Clicking on the anchor tag opens a menu and in one of the options(named Application) there is another menu where few applications are listed and I have to click on them. I am unable to click on it since it is not wrapped in a select tag.
here is the code:
<div class="menuBarSub mb_standardSub" menu="mn-1441711622465-/contextMenu" style="position: absolute; left: 1252.33px; top: 17px; display: block; z-index: 100;" role="navigation">
<table cellspacing="0" cellpadding="0">
<tbody role="menu" style="width: 100%;">
<tr id="/contextMenu/ID1277705525089001" class="menuItem" orientation="vertical">
<tr id="/contextMenu/ID1285350191126000" class="menuItem" orientation="vertical">
<tr id="/contextMenu/ID1412292365029000" class="menuItem" orientation="vertical">
<tr id="/contextMenu/ID1416325132235000" class="menuItem selected" orientation="vertical" aria-selected="true">
<tr id="/contextMenu/ID1332408920353004" class="menuItem" orientation="vertical">
</tbody>
</table>
</div>
Few points:
1. After clicking on the anchor tag you will have to wait for the presence of the menu. Use WebDriverWait and ExpectedConditions class for that.
2. You will have to hover over the menu appearing using Actions class clickAndHold(Locator).build().perform() method.
3. The get(0) is a different issue and just so that you should know it has nothing to do with selenium but has to do with Java. get(0) is method from List<E> collections Interface which is returned by WebDriver#findElements(Locator) API.
Let me know if you need further assistance.
Related
I have a dropdown on a web page for selecting a country which has been rendered using the jQuery Chosen plugin. An extract of the html below,
<div>
<label for="phMainContent_EmployeeAdd1_ddlCountry" id="phMainContent_EmployeeAdd1_lblCountry" class="short required">Country*</label>:
<div id="phMainContent_EmployeeAdd1_ddlCountry_chzn" class="chzn-container undefined chzn-container-single" style="width: 199.44444px;">
<span>Please select ...</span><div><b></b></div>
<div class="chzn-drop" style="left: -9000px; width: 197.222px; top: 28px;">
<div class="chzn-search"><input type="text" style="width: 162px;"></div>
<ul class="chzn-results">
<li id="phMainContent_EmployeeAdd1_ddlCountry_chzn_o_0" class="active-result result-selected">Please select ...</li>
<li id="phMainContent_EmployeeAdd1_ddlCountry_chzn_o_1" class="active-result">United Kingdom</li>
<li id="phMainContent_EmployeeAdd1_ddlCountry_chzn_o_2" class="active-result">Afghanistan</li>
.......
If I use the Selenium IDE to record the actions to select the “United Kingdom” from the list the following script is recorded. Run snippet to see table with the commands in it.
<table border="1">
<tr>
<td>Command</td>
<td>Target</td>
</tr>
<tr>
<td>click</td>
<td>css=a.chzn-single > span</td>
</tr>
<tr>
<td>click</td>
<td>id=phMainContent_EmployeeAdd1_ddlCountry_chzn_o_1</td>
</tr>
</table>
I can run this script repeatably in the IDE and the UK is selected from the dropdown each time. However, if I export the C#/Nunit/Webdriver code below
driver.FindElement(By.CssSelector("a.chzn-single > span")).Click();
driver.FindElement(By.Id("phMainContent_EmployeeAdd1_ddlCountry_chzn_o_1")).Click();
and execute it, it fails on the 1st statement with the Selenium Element Not Visible exception.
Any advice on how to resolve this issue?
you can try xPath and select like //span[contains(.,'Please Select')]
Use explicit wait to make sure the dropdown is visible before the click
WebDriverWait wait = new WebDriverWait(driver, TimeSpan.FromSeconds(10));
IWebElement dropdown = wait.Until(ExpectedConditions.ElementIsVisible(By.CssSelector("a.chzn-single > span")));
dropdown.Click();
driver.FindElement(By.Id("phMainContent_EmployeeAdd1_ddlCountry_chzn_o_1")).Click();
I meet a headache problems, when I use dojo to develop a frontend UI. I have google this problem for a long time. So does the mailist and bugtracker.
When I open a page with TabContainer and swith to a Tab, the DataGrid in the Tab didn't properly displayed.Now I switch to another Tab and switch back again, the grid properly displayed.I implement this in Declarative dojo. Only one line javascript code.
<script>
function imgFormatter(s) {
return '<img src="' + s + '"/>';
}
</script>
situation is like this:
Open the page
http://i.stack.imgur.com/QGeid.png
switch to another Tab and siwtch back again
http://i.stack.imgur.com/OWQxR.png
code:
<div data-dojo-type="dijit.layout.TabContainer" data-dojo-props="region: 'center'">
<div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="region: 'center'" title="tab1">
tab1
</div>
<div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="region: 'center'" title="Hosts">
<div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region: 'center'">
<div data-dojo-type="dojo.data.ItemFileReadStore" data-dojo-props="url: dojo.config.api2Path + '/GangliaHostMetric', urlPreventCache:true, clearOnClose:true" data-dojo-id="gangliaHostSummaryStore"></div>
<table data-dojo-type="dojox.grid.DataGrid" data-dojo-props="region: 'center', query : {}, store:gangliaHostSummaryStore" data-dojo-id="gangliaHostSummaryGrid">
<thead>
<tr>
<th field="hostname">hostname</th>
<th field="load_report" width="300" formatter="imgFormatter">Load</th>
<th field="mem_report" width="300" formatter="imgFormatter">Memory</th>
<th field="network_report" width="300" formatter="imgFormatter">Network</th>
<th field="cpu_report" width="300" formatter="imgFormatter">CPU</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
IF the grid si the only thing displayed in the tab, then you don't need all these BorderContainers and ContentPanes, put the grid as directChild of the TabContainer.
Otherwise, it is a famous problem, one way to solve this is to create the grid programmatically after the tab onLoad. Tha means basically connecting to tab onLoad event, and create the grid here.
Another way to fix it is to play around with doLayout, isLayoutContainer, and specify the size of the parent widget also.
With all of this you should find a suitable solution to your problem. If you want more guidance, I'd recommand joining irc freenode #dojo. There you'll maybe find someone to guide you step by step :)
I am working on 1 project, where i have to locate button, i have used xpath for same, but button id change on every refresh, so i am facing problem in it..
Below is screenshot for same - let me know you can i identify that button so that it will not cause error even if id chages
<button type="button" id="ext-gen11" class=" x-btn-text">Login</button>
Code HTML
<tr>
<td></td>
<td><div id="LoginButton" style="float: left;"><table style="width: auto;" id="ext-comp-1032" class="x-btn x-btn-noicon x-btn-over x-btn-focus" cellspacing="0"><tbody class="x-btn-small x-btn-icon-small-left"><tr><td class="x-btn-tl"><i> </i></td><td class="x-btn-tc"></td><td class="x-btn-tr"><i> </i></td></tr><tr><td class="x-btn-ml"><i> </i></td><td class="x-btn-mc"><em class="" unselectable="on"><button class=" x-btn-text" id="ext-gen12" type="button">Login</button></em></td><td class="x-btn-mr"><i> </i></td></tr><tr><td class="x-btn-bl"><i> </i></td><td class="x-btn-bc"></td><td class="x-btn-br"><i> </i></td></tr></tbody></table></div></td>
</tr>
xPath:
//button[text()='Login']
XPath should do the trick:
Command: clickAndWait
Target: //input[#value='Login']
Edit
Assuming, that there is only one button with value "Login" on it
Sending out mass emails, pretty much the whole thing is inside tables.
CSS affecting the table:
.title {
vertical-align: top;
}
HTML:
<table width="580" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="title" align="left" width="440" valign="top">
<h2><singleline label="Title">Enter your title</singleline></h2>
<p><multiline label="Description">Description</multiline></p>
</td>
<td align="left" valign="top" width="20"><img src="/images/00.gif" height="1" width="20" border="0"></td>
<td align="left" valign="top" width="120"><img src="/images/001.jpg" editable="true" label="Image" width="120" border="0"></td>
</tr>
<tr>
<td colspan="3" align="left" valign="top" width="580"><img src="/images/00.gif" height="20" width="1" border="0"></td>
</tr>
</table>
I need the text inside the tag to be flush with the top of the table. Currently the /images/001/jpg is flush, but the text is 5 pixels below the edge of the table.
I'm using vertical-align: top in the CSS, have tried border-spacing: none, border-collapse: collapse, and border: none. None of them solved the problem.
Using margin-top: -5px; on the tag solved the problem in standard browser testing, but wasn't supported by some email clients.
this is Ros from Campaign Monitor. What isn't entirely obvious is that the <singleline> and <multiline> tags convert into <p>your content</p>
...when imported into the Campaign Monitor editor. It's these <p> tags that are creating this extra padding - here's an example.
The easiest way to avoid this is to add p { margin: 0; padding: 0; } to your CSS styles.
Hopefully this fixes this issue for you. Note that we have a forum for answering questions like this, so feel free to post your template code there in the future.
Many thanks to everyone who contributed here!
Ros' suggestion suffices most of the time, but Gmail removes your header styles which leaves the inserted p tags with gmail's default margin top and bottom.
An alternative to get around this is by adding a div tag within your multiline tag. This will successfully prevent Campaign Monitor from wrapping your content with a p tag.
Here is a structure example:
<multiline>
<div>
Your Content Goes Here.
</div>
</multiline>
Put
valign="top"
on your TD for the text. If the email client doesn't recognize CSS it should recognize the standard HTML attribute.
Also, if that doesn't fix it, can you edit your Q and add the definition for "title" CSS definition that you are using on that .
I'm assuming your referring to the text inside the H2 tag.
Create a class for the <h2>
.noPad {
padding-top: 0px;
}
Or don't use the H2 and just use a span or div element.
It could just be the line-height of the text as opposed to margin/padding - check that as well
I'm working with Jasperrerports 3.5.1 and I have a html-styled text that I need to be printed in a PDF with the proper styles.
In the cell I want to print the styled text I have the markup property set to "HTML". I have created a this sample text:
<p>
<table border="0">
<tbody>
<tr>
<td>wewewe</td>
<td>eeeee</td>
</tr>
<tr>
<td>qwewewq</td>
<td>3333333</td>
</tr>
</tbody>
</table>
</p>
<p>4444</p>
but in the PDF it is printed as if, without any formatting.
Do you know how can I use html styles here, because using tables inside cells are one of the client's requeriments.
Thanks.
I know this question is old, but JasperReports only supports a small, very small set of HTML tags for styling. The list I found of those tags is:
b
br
font
u
i
sup
sub
li
See here for more info.
First, I'm not sure if case matters but make sure the value of the markup attribute for your textElement element in your JRXML is set to "html" (lowercase).
Second, the purpose of the markup attribute is to format text using HTML, it is meant to make text bold, italic, change font color or size, etc. Creating a table is not what this attribute is for.
You can create tables using standard JRXML, without resorting to embedding HTML, an example is bundled with the JasperReports download under ${JASPERREPORTS_HOME}/demo/samples/table
You can do something like
<textField >
<reportElement x="7" y="10" width="543" height="53"/>
<textElement markup="html">
<font size="10" pdfFontName="Helvetica" isPdfEmbedded="true"/>
</textElement>
<textFieldExpression class="java.lang.String"><![CDATA[$F{myElementName}]]></textFieldExpression>
</textField>
Then you can pass the following string programatically
<p style="color:red">
<table border="0">
<tbody>
<tr>
<td style="border: 1px solid">wewewe</td>
<td style="border: 1px solid">eeeee</td>
</tr>
<tr>
<td style="border: 1px solid" >qwewewq</td>
<td style="border: 1px solid">3333333</td>
</tr>
</tbody>
</table>
</p>
<p>4444</p>
I haven't found yet how to create css to apply it using classes inside a jasperreport text element.