I need to navigate frames by clicking this drop-down list using selenium. I need to select the links on the menu and drop-down list. But selenium.click doesn't work.
on manual execution:
Mouse-Over The SUBSCRIBER link/menu for list to dropped down
Click the selected link/menu from the drop-down list
I need to automate it through Selenium.
Here is the element inspector from firebug:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<!-- Generated by Python html module ($Revision: 1.6 $). -->
<!-- charset : iso-8859-1 -->
<head> … </head>
<frameset rows="78,62,32,*" frameborder="no" border="0">
<frame scrolling="no" src="/html/header_frame.html" noresize="1" name="head_frame"></frame>
<frame scrolling="no" src="/cgi-bin/main/title.cgi" noresize="1" name="titleframec"></frame>
<frame scrolling="no" src="/cgi-bin/main/navigationframe.cgi" noresize="1" name="navFrame">#document<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<!-- Generated by Python html module ($Revision: 1.6 $). -->
<!-- charset : iso-8859-1 -->
<head> … </head>
<body class="nav_frame" marginwidth="0" marginheight="0" onload="parent.bodyframe.location='/cgi-bin/service/subscriber/subscriberDetails.cgi';" topmargin="0" leftmargin="0"><script language="JavaScript"> … </script>
<table class="nav_frame" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td> … </td>
<td><a onmouseout="MM_startTimeout();" onmouseover="MM_showMenu(menu_SUBS,0,0,null,'subscriber_bt');" href="javascript:;"><img width="125" height="32" border="0" alt="" src="/nav_images/subscriber_bt.jpg" name="subscriber_bt"></img></a></td>
<td> … </td>
<td> … </td>
<td> … </td>
<td> … </td>
<td> … </td>
<td> … </td>
<td> … </td>
<td> … </td>
</tr>
</tbody>
</table>
<script language="JavaScript"> … </script>
<form name="navig" target="bodyframe" method="POST" action="/cgi-bin/service/subscriber/subscriberDetails.cgi"> … </form>
</body>
</html>
</frame>
<frame name="bodyframe">
</frame>
</frameset><noframes> … </noframes>
</html>
You'd need to use the Actions() class of Webdriver.
Actions action = new Actions(driver);
actions.moveToElement(driver.findElement(By.id("subscriber_element"))).moveToElement(driver.findElement(By.id("revealed_element"))).click().build().perform();
Related
Please find my code which intents to develop a Form. Help me in understanding why the CheckBox and NumberSpinner are rendered as TextFields.
I have imported all the required classes and dojo config attribute is configured properly
<%# taglib prefix="c" uri="http://java.sun.com/jstl/core" %>
<%# taglib prefix="fmt" uri=`enter code here`"http://java.sun.com/jstl/fmt" %>
<%#include file="/webclient/admin/jspf/NotificationOperations.jspf" %>
<!-- load dojo and provide config via data attribute -->
<script type="text/javascript" src="/webclient/map/js/dojo/dojo.js" data-dojo-config="parseOnLoad: true"></script>
<script>
require([
"dojo/parser",
"dijit/form/CheckBox",
"dijit/form/NumberSpinner",
"dojo/domReady!"
], function(parser){
parser.parse();
});
</script>
<%#include file="/webclient/common/jspf/jsUtility.jspf" %>
<html>
<head>
<body class="claro">
<style>
#import "/webclient/common/js/dojo/dgrid/css/skins/claro.css";
h2 {
margin: 12px;
}
.heading {
font-weight: bold;
padding-bottom: 0.25em;
}
.ui-widget{
margin: 10px;
}
</style>
<table width="100%" height="100%">
<tr><td>
<div id="DomainMapContainer" >
<tr class="spacer"><td> </td></tr>
<tr><td>
<form id="addProfile" data-dojo-type="dijit/form/Form" data-dojo-props='encType:"multipart/form-data", action:"/prov/createRFC2544TestProfile.do?action=createRFC2544TestProfile", method:"POST", target:"formSubmitIframe"'>
<table>
<tr>
<td><label for="profileName">Profile Name</label></td>
<td>
<input data-dojo-type="dijit/form/TextBox" data-dojo-props='id:"profileName", name:"profileName", required:"true"'/>
</td>
</tr>
<tr>
<td><label for="comments">Comments</label></td>
<td>
<input data-dojo-type="dijit/form/TextArea" data-dojo-props='id:"comments", name:"comments", rows:"5", cols:"40"'/>
</td>
</tr>
<tr>
<td><label for="frameSize">Frame Size</label></td>
<td>
<table>
<tr>
<td><label for="cb_1"><input data-dojo-type="dijit/form/CheckBox" id="cb_1" name="cb_1" value="64" checked/> 64</label></td>
<td><label for="cb_2"><input data-dojo-type="dijit/form/CheckBox" id="cb_2" name="cb_2" value="128"/> 128</label></td>
</table>
</td>
</tr>
</table>
<fieldset>
<legend><label> Throughput Test</label></legend>
<table>
<tr>
<td><label for="tTestDuration">Test Duration</label></td>
<td><input data-dojo-type="dijit/form/NumberSpinner" id="tTestDuration" value="60" data-dojo-props="smallDelta:1, constraints:{min:1,max:600,places:0}" name="tTestDuration"/>(Seconds)</td>
</tr>
<tr>
<td><label for="tTestMinFrameRate">Minimum Frame Rate</label></td>
<td><input data-dojo-type="dijit/form/NumberSpinner" id="tTestMinFrameRate" value="0" data-dojo-props="smallDelta:1, constraints:{min:1,max:10000,places:0}" name="tTestMinFrameRate"/>(Mbps)</td>
</tr>
<tr>
<td><label for="tTestMaxFrameRate">Maximum Frame Rate</label></td>
<td><input data-dojo-type="dijit/form/NumberSpinner" id="tTestMaxFrameRate" value="100" data-dojo-props="smallDelta:1, constraints:{min:1,max:10000,places:0}" name="tTestMaxFrameRate"/>(Mbps)</td>
</tr>
<tr>
<td><label for="tTestStepSize">Step Size</label></td>
<td><input data-dojo-type="dijit/form/NumberSpinner" id="tTestStepSize" value="5" data-dojo-props="smallDelta:1, constraints:{min:1,max:100,places:0}" name="tTestStepSize"/>(Mbps)</td>
</tr>
<tr>
<td><label for="tTestAcceptableLoss">Step Size</label></td>
<td><input data-dojo-type="dijit/form/NumberSpinner" id="tTestAcceptableLoss" value="0" data-dojo-props="smallDelta:0.1, constraints:{min:0,max:10,places:0}" name="tTestAcceptableLoss"/>(%)</td>
</tr>
</table>
</fieldset>
</form>
</td></tr>
</div>
</td></tr>
</table>
</body>
</head>
</html>
I'm seeing a few things here, first of all you're missing a closing </tr> tag when you close the "frame size" table. I suppose that it won't cause errors, but you can never be too sure.
You're also closing your </head> tag at the bottom of the page. You should close it before the <body> starts.
Then the real problem is that your widgets are not working because there are errors while parsing your HTML. The cause of the error is the "comments" text area. The correct module name you should use is dijit/form/Textarea, so the "a" of area should be in lowercase.
Besides that, you should also add the dijit/form/Textarea module to your list of modules (in your require() block).
If you did all that it should work, as you can see in this fiddle: http://jsfiddle.net/9U5AB/
I've the below html.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<form name="new" method="post" action="GetR.jsp">
<div class="Main">
<table width="200" border="1">
<tr>
<td>Units</td>
<td><input type="text" name="Units" id="Units"></td>
</tr>
<tr>
<td>Product Type</td>
<td><input type="text" name="ProdT" id="ProdT"></td>
</tr>
<tr>
<td>Hours</td>
<td><input type="text" name="hours" id="hours"></td>
</tr>
<tr>
<td colspan="2"><input name="submit" type="submit" id="submit" value="Submit"></td>
</tr>
</table>
</div>
</form>
</body>
</html>
and the below data base table
here actually when the user enters the number of units and hours and product type(product type is same as database table name) based on the input, the output should be the column names(whether it is achieved, exceeded or far exceeded) . please let me know how can i write a query for it.
for example the given row.
we entered the units as 1, and if the hours is 8(4.1hrs-8hrs), it should show No.of.Hours for Achieved, if hours is 4(2.1hrs-4hrs) it should show Exceeded and if 2(below 2 hrs) it should show Far-Exceeded.
Thanks
I'm starting developing in HTML and I'm trying to use the Kendo UI framework in ASP.NET MVC.
I started with this tutorial: Entity Framework 5.x – Database First Workflow
With this I was able to create a Web Page that show me a table with data from a database.
But now I want to style de table with Kendo UI widgets (Grid). To do that I followed this video: Using KendoUI Grids on ASP.Net MVC - Tutorial 1 (until 4:37min)
The steps that I made so far:
Download trial version of Kendo UI Complete for ASP.NET MVC
Copy kendo.default.min.css and kendo.common.min.css files from the downloaded folder to the Content folder in my Visual Studio project
Copy kendo.all.min.js file from the downloaded folder to the Scripts folder
Changed the View with the following code:
#model IEnumerable<DatabaseFirst.Models.Artesano>
#{
ViewBag.Title = "Index";
}
<link href="#Url.Content("~/Content/kendo.common.min.css")" rel="stylesheet" />
<link href="#Url.Content("~/Content/kendo.default.min.css")" rel="stylesheet" />
<script src="#Url.Content("~/Scripts/kendo.all.min.js")" type="text/javascript" ></script>
<script type="text/javascript">
$(function () {
$("#artesanos-grid").kendoGrid();
});
</script>
<h2>Index</h2>
<p>
#Html.ActionLink("Create New", "Create")
</p>
<table id="artesanos-grid">
<thead>
<tr>
<th>
#Html.DisplayNameFor(model => model.RFC)
</th>
<th>
#Html.DisplayNameFor(model => model.RazonSocial)
</th>
<th>
#Html.DisplayNameFor(model => model.Telefonos)
</th>
<th>
#Html.DisplayNameFor(model => model.Fax)
</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
#foreach (var item in Model) {
<tr>
<td>
#Html.DisplayFor(modelItem => item.RFC)
</td>
<td>
#Html.DisplayFor(modelItem => item.RazonSocial)
</td>
<td>
#Html.DisplayFor(modelItem => item.Telefonos)
</td>
<td>
#Html.DisplayFor(modelItem => item.Fax)
</td>
<td>
#Html.ActionLink("Edit", "Edit", new { id=item.RFC }) |
#Html.ActionLink("Details", "Details", new { id=item.RFC }) |
#Html.ActionLink("Delete", "Delete", new { id=item.RFC })
</td>
</tr>
}
</tbody>
</table>
But when I run the page, no changes are made to the grid...
What am I missing?
PS:
The source code of the loaded page is:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link href="/Content/site.css" rel="stylesheet"/>
<script src="/Scripts/modernizr-2.6.2.js"></script>
</head>
<body>
<link href="/Content/kendo.common.min.css" rel="stylesheet" />
<link href="/Content/kendo.default.min.css" rel="stylesheet" />
<script src="/Scripts/kendo.all.min.js" type="text/javascript" ></script>
<script type="text/javascript">
$(function () {
$("#artesanos-grid").kendoGrid();
});
</script>
<h2>Index</h2>
<p>
Create New
</p>
<table id="artesanos-grid">
<thead>
<tr>
<th>
RFC
</th>
<th>
RazonSocial
</th>
<th>
Telefonos
</th>
<th>
Fax
</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>
325
</td>
<td>
sdfwef
</td>
<td>
wetfgvs
</td>
<td>
sdfsdgs
</td>
<td>
Edit |
Details |
Delete
</td>
</tr>
<tr>
<td>
2
</td>
<td>
weg
</td>
<td>
asdgweg
</td>
<td>
dsg
</td>
<td>
Edit |
Details |
Delete
</td>
</tr>
<tr>
<td>
235423
</td>
<td>
sdga
</td>
<td>
et
</td>
<td>
wefwf
</td>
<td>
Edit |
Details |
Delete
</td>
</tr>
<tr>
<td>
23
</td>
<td>
wq
</td>
<td>
sasdga
</td>
<td>
aegweg
</td>
<td>
Edit |
Details |
Delete
</td>
</tr>
</tbody>
</table>
<script src="/Scripts/jquery-1.8.2.js"></script>
</body>
</html>
My problem was in the Views/Shared/_Layout.cshtml:
The file was generated like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>#ViewBag.Title</title>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
</head>
<body>
#RenderBody()
#Scripts.Render("~/bundles/jquery")
#RenderSection("scripts", required: false)
</body>
</html>
So I changed to:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>#ViewBag.Title</title>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
#Scripts.Render("~/bundles/jquery")
</head>
<body>
#RenderBody()
#RenderSection("scripts", required: false)
</body>
</html>
(I put the #Scripts.Render("~/bundles/jquery") at the header)
The problem is now solved.
When i add this as Gadget to google calendar ,it partially goes out of the screen...How should i correct such that the gadget will appear with in the screen...
Here is a code where it creates a gadget asking for username and password and login button..
I just want to know the procedure too make the gadget to appear with in the screen
enter code here
<?xml version="1.0" encoding="UTF-8"?>
<Module>
<ModulePrefs title="ABC Google Calendar Gadget" width="180" author="abc" author_email="abcgmail.com" description="My First Test">
<Require feature="dynamic-height"/>
<Require feature="google.calendar-0.5"/>
</ModulePrefs>
<Content type="html">
<![CDATA[
<html style="overflow: hidden;">
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<style>
//.login {
// display: block;
//}
//.event {
// display: none;
/}
</style>
</head>
<body class="loc-en ff ff3">
<script>
var _message = 'This is My first Gadget!';
function validateForm(){
alert("Hello");
$('.login').hide();
$('.event').show();
}
function createEventfun(){
alert("create event");
var eventData = {
title: 'NewYear',
details: 'Hi all',
location: 'My room',
allDay: true,
startTime: {year: 2013, month: 04, date: 21},
endTime: {year: 2013, month: 04, date: 22},
attendees: [
{email: 'nirupama.ninusah#gmail.com'}
],
rrule: 'RRULE:FREQ=YEARLY'
};
google.calendar.composeEvent(eventData);
}
function load()
{
alert("Page is loaded");
}
function changeWidth(){
var e1 = document.getElementById("gadgetcell");
e1.style.width = 180;
alert("Page is loaded and width of gadgetcell is modified to 180");
}
</script>
<div class="login" align="left">
<table border="1" height="200" width="100%">
<tr>
<td>
<image src="http://abc.com/Portals/78096/images/abc_logo.jpg" height="60" width="90"/>
</td>
</tr>
<tr>
<td align="left">
<table border="0">
<tr>
<td>Userid</td>
<td><input type="text" name="userid" size=10/><br></td>
</tr>
<tr>
<td>Password</td>
<td><input type="password" name="password" size=10/><br></td>
</tr>
<tr>
<td>VidyoURL</td>
<td><input type="text" name="url" size=10/><br></td>
</tr>
<tr>
<td><button onClick="validateForm()" style="background-color:red;color:white">LOGIN</button></td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<div class="event" style="width: 180px;">
<table border="1">
<tr>
<td>
<image src="http://abc.com/Portals/78096/image/abc_logo.jpg" height="60" width="90"/>
</td>
</tr>
<tr>
<td align="center">
<table border="0" height="200" width="100%">
<tr>
<span>User Successfully Aunthenticated</span>
</tr>
<tr>
<button onclick="createEventfun()" style="background-color:red;color:white">CREATE VIDYO EVENT</button>
</tr>
</table>
</td>
</tr>
</table>
</div>
</body>
</html>
]]></Content>
</Module>
Look at Managing Gadget Height:
- A <Require feature="dynamic-height"/> tag (under <ModulePrefs>) to tell the
gadget to load the dynamic-height library.
- A call to the JavaScript function gadgets.window.adjustHeight() whenever there
is a change in content, or another event occurs that requires the gadget to
resize itself.
I added this script to all views and it works:
<script type="text/javascript" charset="utf-8">
function resize(){
gadgets.window.adjustHeight();
}
window.onload=resize;
</script>
Don't forget about "Required feature" tag
I'm fighting with bad support of html clients for CSS and I need to do a email template with table layout.
I just can't place and align tables within tables correctly. I tried it with valign etc. but this doesn't work...
How can I place one table within another table on top and in the center?
To illustrate I've posted this fiddle:
http://jsfiddle.net/eabJh/1/
The <td >Another nested table</td> is in center position but not on top but in the middle.
Here is my html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<body style="background-color: black">
<table background="http://i3.mirror.co.uk/incoming/article276604.ece/ALTERNATES/s615/tweet-that-ricky-gervais-jibe-at-mongs-pic-twitter-com-rickygervais-132840776.jpg" width="810" border="20" bordercolor="white" style="border-style:solid; border-spacing:0px; border-collapse:collapse">
<tr style="height:400px">
<td>test
<table width="380" cellspacing="0" cellpadding="2" align="center" border="0">
<tr>
<td >Another nested table</td>
</tr>
</table></td>
</tr>
</table>
</body>
</html>
</html>
Updated Fiddle
Use valign = "top":
<td valign = "top">test
<table width="380" cellspacing="0" cellpadding="2" align="center" border="0">
<tr>
<td>Another nested table</td>
</tr>
</table>
</td>