Selenium - Selecting an item from dropdown list if the values are inside <table> tags and NOT under <option> in html - selenium

The below is a snippet from our html code which appears as a drop down list in the application. I am unable to select a particular value from the drop down list using Select class in Selenium - possibly because it doesn't have "Option" tags?. Is there any way to select the item?
-UPDATE: This has a parent tag which talks about visibility. Basically to tell that elements are visible only if the user clicks the drop down arrow.
"< input type="hidden" *****"
For e.g. I need to select 'I am option2' from the list during the test execution.
<div id="xyz" class="DropdownInnerContainer" style="z-index:99999;">
<table id="abc" class="DropdownItemContainer" list="1000020">
<tr class="">
<td value="" index="0" title="">
</td>
<td class="BorderCell"></td>
</tr>
<tr class="">
<td value="I am option1" index="1" plid="1002827">I am option1</td>
<td class="BorderCell"></td>
</tr>
<tr class="">
<td value="I am option2" index="2" plid="1002828">I am option2</td>
<td class="BorderCell"></td>
</tr>
<tr class="">
<td value="I am option3" index="3" plid="1002829">I am option3</td>
<td class="BorderCell"></td>
</tr>
<tr class="">
<td value="I am option4" index="4" plid="1002830">I am option4</td>
<td class="BorderCell"></td>
</tr>
</table>

If the text inside of the td that you want to select is unique, then you can click the table element with the id of 'abc' and then click the following element. The code provided is C#, but can be translated pretty easily.
IWebElement option = _driver.FindElement(By.XPath("//td[text()='I am option2']"));

It appears that since the drop down options were inside a < table >, the Select class was unable to identify the list options. So here's what I did:
First click() the dropdown, which opens up the menu:
driver.findElement(By.xpath(".//*[#id='abc01_tbl']/div/div")).click();
Then pass the value using the contains() method and then click() on it.
driver.findElement(By.xpath(".//*[#id='xyz01_tbl']/tbody/tr/td[1][contains(text(),'I am option2')]")).click();

You can not use Select in this scenario because there is no any select tag for dropdown. Drop down is under table body.
Please use below xpath for select option form drop down.
driver.findElement(By.xpath("//table[#id='abc']/tr[td[text()='your option text']]/td"));

Related

How to locate the parent element of a child element identified through innerText?

I need to select a row in a table where I have a text, hence I would like to leverage the option of selecting a text and then eventually selecting the parent
Now the page looks like:
<tr class=" tableRow1" id="_pu5ufb" dr="1" _awtisprimaryrow="1">
<td width="1" class="tableBody w-tbl-cell" align="center"><span
class="selectColumnMarker">
<div class="w-chk-container">
<input bh="CHKINP" hasaction="false" class="w-chk-native"
id="_m7iynb" value="1" type="checkbox" elementid="_jw4lmb"
issender="false" awnomitcomponent="true" name="_jw4lmb"><label
bh="CHK" class="w-chk w-chk-dsize"></label>
</div>
</span>
</td>
<td align="left" class="tableBody w-tbl-cell">
<span>
<table role="presentation" class="mls" cellpadding="0"
cellspacing="0">
<tbody><tr>
<td class="" id="_tz87e" tabindex="0"><a id="_3iqrbb" href="#"
bh="HL" _sf="true">Analyst</a>
</td>
</tr>
</tbody></table>
</span>
</td><td class="tableBody w-tbl-cell">
</td>
<td class="tableBody w-tbl-cell">
</td>
</tr>
I need to find the text Analyst and then find the associated <tr> class and select the <tr> class.
Any help would be highly appreciable
First, whenever you have mixed content (text and markup) it is better to compare elements' string value than text nodes because inline markup might be splitting the compared text into different text nodes.
Second, you can use:
//tr[td='Analyst']/#class
Note: node-set comparison is an existencial comparison. It means that you are asking if there is some node (some td element in this case) with string value equal to 'Analyst'.
Of course, in HTML there are elements for which white space is not significant for rendering (it's not preserved) despite its presence in the source document. In that case you can use this simple XPath 1.0 expression:
//tr[td[normalize-space()='Analyst']]/#class
Do note: a node-set has a false boolean value if and only if it's empty; you can "nest" predicates (properly, a predicate can be any XPath expression).
I need to find the text Analyst and then find the associated tr class and select the tr class.
XPath 2.01
This XPath,
//tr[td/normalize-space() = "Analyst"]/#class
will select all #class attributes of tr elements containing a td with a space-normalized string value of "Analyst".
Do note, however, that in your sample HTML, such a tr has no #class.
1Thanks for correction, #DebanjanB
Fix your XML file to
<?xml version="1.0"?>
<!DOCTYPE stylesheet [
<!ENTITY nbsp " ">
]>
<root>
<tr class=" tableRow1" id="_pu5ufb" dr="1" _awtisprimaryrow="1">
<td width="1" class="tableBody w-tbl-cell" align="center">
<span class="selectColumnMarker">
<div class="w-chk-container">
<input bh="CHKINP" hasaction="false" class="w-chk-native" id="_m7iynb" value="1" type="checkbox" elementid="_jw4lmb" issender="false" awnomitcomponent="true" name="_jw4lmb"/>
<label bh="CHK" class="w-chk w-chk-dsize"/>
</div>
</span>
</td>
<td align="left" class="tableBody w-tbl-cell">
<span>
<table role="presentation" class="mls" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="" id="_tz87e" tabindex="0">
<a id="_3iqrbb" href="#" bh="HL" _sf="true">Analyst</a>
</td>
</tr>
</tbody>
</table>
</span>
</td>
<td class="tableBody w-tbl-cell">
</td>
<td class="tableBody w-tbl-cell">
</td>
</tr>
</root>
Then, the expression you are looking for is
//tr[td/a/text()='Analyst']/#class
But because the tr element does not have a class attribute, the result is empty.
A bit unclear what exactly you meant by ...find the associated tr class and select the tr class... once you have found ...the text Analyst....
However, as the elements are dynamic element and to locate the element with text as Analyst you can use either of the following Java based Locator Strategies:
linkText
WebElement elem = new WebDriverWait(driver, 20).until(ExpectedConditions.visibilityOfElementLocated(By.linkText("Analyst")));
cssSelector:
WebElement elem = new WebDriverWait(driver, 20).until(ExpectedConditions.visibilityOfElementLocated(By.cssSelector("td.tableBody table.mls a[bh='HL']")))
xpath:
WebElement elem = new WebDriverWait(driver, 20).until(ExpectedConditions.visibilityOfElementLocated(By.xpath("//td[contains(#class, 'tableBody')]//table[#class='mls']//a[text()='Analyst']")));
To extract the class attribute of the <tr> element with respect to the text as Analyst you can use the following Java based solution:
xpath:
String tr_class_attrib = new WebDriverWait(driver, 20).until(ExpectedConditions.elementToBeClickable(By.xpath("//td[contains(#class, 'tableBody')]//table[#class='mls']//a[text()='Analyst']//preceding::tr[1]"))).getAttribute("class");

How to verify an image exists within a specific element using Robot Framework

I am trying to verify that a specific image exists on a webpage in a specific element. The image:
Has no unique id
Has no unique alt
The src attribute contains a query string I am trying to ignore
Appears multiple times on the page
I can't use Page Should Contain Image because it appears multiple times but I need to verify it appears in a specific table cell. The image src looks like this:
${BaseUrl}/status_submitted.png?master_2017217_17-29
Here's the HTML surrounding the image:
<table id="mass_list" class="grid">
<tr>
<th class="shrink align_center">Status</th>
<th>Action</th>
<th class="shrink align_right">Submitted</th>
<th class="shrink">Submitted By</th>
</tr>
<tr>
<td>
<img src="https://{baseurl}/images/status_submitted.png?master_2017217_17-29" alt="Submitted" width="70" height="20" />
</td>
<td class="nowrap">
Automation Test 1488321180.7
<br />
<small class="mute">
<strong>0</strong> of <strong>2</strong> records processed
</small>
</td>
<td class="nowrap align_right">Yesterday at 4:33 PM</td>
<td class="nowrap">Tina Tester</td>
</tr>
<tr>
<td>
<img src="https://{baseurl}/images/status_submitted.png?master_2017217_17-29" alt="Submitted" width="70" height="20" />
</td>
<td class="nowrap">
Add an attribute
<br />
<small class="mute">
<strong>0</strong> of <strong>16</strong> records processed
</small>
</td>
<td class="nowrap align_right">Yesterday at 8:06 AM</td>
<td class="nowrap">Tina Tester</td>
</tr>
I need to verify that just ${BaseUrl}/status_submitted.png exists on the page within a specific table cell or xpath location. How do I do this?
Given the example document this was a rather straight forward excersise for me using nothing more than Google Chrome itself. Put the contents of the example in a file with HTML/Body tags around it and then use the right-click inspect to inspect the element in the console. Right click again on the source tag and choose Copy>Xpath.
This will result in the following xPath: //*[#id="mass_list"]/tbody/tr[2]/td[1]/img where the first number tr[2]is the row, and the second number td[1] is the column.
A second approach is to look at the image tag itself and filter based on the file path location of the images with that src attribute: //img[contains(#src, "status_submitted.png")]

How can I reach the link inside TR using XPATH

This HTML code has menu of targets and you need to select one target. One of these targets is ANY TARGET to continue process.
<tr id="mainForm:nav-panel-tab-set:0:trigger-selectTable:0" class=" iceRowSelMouseOver" tabindex="0" onmouseover="this.className=' iceRowSelMouseOver';" onmouseout="Ice.enableTxtSelection(document.body); this.className='iceDatTblRow1 selectable-rowRow1 iceRowSel'" onmousedown="return Ice.preventTextSelection(event);" ondblclick="Ice.registerDblClick(this);" onclick="Ice.registerClick(this,'mainForm:nav-panel-tab-set:0:trigger-selectTableclick_row','mainForm:nav-panel-tab-set:0:trigger-selectTableclick_count','0','mainForm',200,true,event,false,'mainForm:nav-panel-tab-set:0:trigger-selectTablesel_rows','');">
<td class="iceDatTblCol1 selectable-rowCol1" scope="row">
<a id="mainForm:nav-panel-tab-set:0:trigger-selectTable_idx_0" class="iceHdnLnk" onfocus="return Ice.tblRowFocus(this, false);" onblur="return Ice.tblRowBlur(this);" href="#">
<img alt="" src="/ice/xmlhttp/css/xp/css-images/spacer.gif"/>
</a>
<span id="mainForm:nav-panel-tab-set:0:trigger-selectTable:0:j_idt1417" class="iceOutTxt">ANY TARGET</span>
</td>
<td class="iceDatTblCol2 selectable-rowCol2">
<span id="mainForm:nav-panel-tab-set:0:trigger-selectTable:0:j_idt1419" class="iceOutTxt select-icon">»</span>
</td>
</tr>
How can I reach the ANY TARGET to click on >> to add using XPATH?
Extra Information:
The previous code is for sub window to add target. the main window code is:
<tr class="icePnlGrdRow1 settings-tableRow1">
<td id="mainForm:nav-panel-tab-set:0:j_idt1305-2-0" class="icePnlGrdCol1 settings-tableCol1">
<table id="mainForm:nav-panel-tab-set:0:j_idt1326" class="icePnlGrd settingsLabel">
<tbody>
<tr class="icePnlGrdRow1 settingsLabelRow1">
<td id="mainForm:nav-panel-tab-set:0:j_idt1326-0-0" class="icePnlGrdCol1 settingsLabelCol1">
<span id="mainForm:nav-panel-tab-set:0:j_idt1327" class="iceOutTxt label">Target</span>
</td>
</tr>
<tr class="icePnlGrdRow2 settingsLabelRow2">
<td id="mainForm:nav-panel-tab-set:0:j_idt1326-1-0" class="icePnlGrdCol1 settingsLabelCol1">
<span id="mainForm:nav-panel-tab-set:0:j_idt1328" class="iceOutTxt sidenote">Target or group</span>
</td>
</tr>
</tbody>
</table>
</td>
<td id="mainForm:nav-panel-tab-set:0:j_idt1305-2-1" class="icePnlGrdCol2 settings-tableCol2">
<table id="mainForm:nav-panel-tab-set:0:j_idt1329" class="icePnlGrd search">
<tbody>
<tr class="icePnlGrdRow1 searchRow1">
<td id="mainForm:nav-panel-tab-set:0:j_idt1329-0-0" class="icePnlGrdCol1 searchCol1">
<span id="mainForm:nav-panel-tab-set:0:j_idt1330" class="iceOutTxt"/>
</td>
<td id="mainForm:nav-panel-tab-set:0:j_idt1329-0-1" class="icePnlGrdCol2 searchCol2">
<input id="mainForm:nav-panel-tab-set:0:j_idt1331" class="iceCmdBtn" type="image" src="/ice/img/search-icon.png" onfocus="setFocus(this.id);" onclick="iceSubmitPartial(form, this, event);return false;" onblur="setFocus('');" name="mainForm:nav-panel-tab-set:0:j_idt1331"/>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
I used ID to click on the targets to open the sub window
//*[#id='mainForm:nav-panel-tab-set:0:j_idt1331']
However, I did not get any response to add any target to my main window either I used the solutions you mentioned.
You can reach the span containing "ANY TARGET":
//span[text() = "ANY TARGET"]
You can extend this to reach the span containing ">>" in the td immediately following the td that contains "ANY TARGET":
//td[span[text() = "ANY TARGET"]]/following-sibling::td[1]/span[text() = ">>"]
Try to focus on the first TD and then click on the Span element.
IWebElement td = browser_drive.FindElement(By.Id("mainForm:nav-panel-tab-set:0:trigger-selectTable:0")).FindElements(By.TagName("td"))[0];
IWebElement anytext = td.FindElement(By.Id("mainForm:nav-panel-tab-set:0:trigger-selectTable:0:j_idt1417"));
OpenQA.Selenium.Interactions.Actions act = new OpenQA.Selenium.Interactions.Actions(browser_drive);
act.MoveToElement(td).Click(anytext);
(Coded using C#, there must be an alternative. Pseudo code, not complied)

How to "firmly" locate an element in a table? Selenium

How can I locate an element "1988" (the fourth line) in the following table:
<table border="0" width="820" cellpadding="2" cellspacing="0">
<tbody>
<tr valign="top">
<td class="default" width="100%">Results <b>1</b> to <b>10</b> of <b>1988</b></td>
</tr>
<tr valign="top">
<td class="default" bgcolor="#C0C0C0"> <font class="resultsheader"> ...etc
</tr>
</tbody>
</table>
IMPORTANT: I know one way that works (By.xpath):
driver.findElement(By.xpath("//td[#width='100%']")).getText();
However, this way does not ALWAYS work. The page is dynamic, so I need a way to locate that element no matter what changes happen to the page.
I tried the following but I am not sure:
By.xpath("//html//body//table//tbody//tr[3]//td//table//tbody//tr//td[2]//table[4]//tbody//tr[1]//td//b[3]"
If you can't change the HTML and want to use attributes for selection, you can write something like this:
//table[#border=0][#width=820]//tbody//tr[1]//td//b[3]

Unable to find element with css selector

Using Selenium Webdriver for FF/IE using C# (.Net)
Below is my page source and I am trying to use the CssSelector to find/contains the particular name from my page and i have tried with the below code but resulting in error, any help?
//code
driver.FindElement(By.CssSelector("td:contains('John John')"))
//error:
e {"Unable to find element with css selector == td:contains('John John')"} System.Exception {OpenQA.Selenium.NoSuchElementException}
//my html code:
<div id="ctl00_ContentPlaceHolder1_AddeCardControl1_gv_ctl01_RecordCount" style="float:right; padding-right:10px; margin-top:3px;">
<b>308</b> Items Found
</div>
</td>
</tr>
<tr class="item">
<td align="center">Edit</td>
<td align="center" style="width:15px;"></td>
<td>John John</td>
<td> </td>
<td> </td>
<td> </td>
<td><img src="check.png" alt='Active' style='display: ;' /></td>
<td>9/7/2012 11:15:08 PM</td>
</tr>
<tr class="altItem">
<td align="center">Edit</td>
<td align="center" style="width:15px;"></td>
<td>John Schulz</td>
<td> </td>
<td>Visitors</td>
<td> </td>
<td><img src="check.png" alt='Active' style='display: ;' /></td>
<td>9/7/2012 6:28:29 PM</td>
</tr>
<tr class="item">
<td align="center">Edit</td>
<td align="center" style="width:15px;"></td>
<td>Parker Smith</td>
<td> </td>
<td>Visitors</td>
<td> </td>
<td><img src="check.png" alt='Active' style='display: ;' /></td>
<td>9/7/2012 6:01:28 PM</td>
</tr>
<tr class="altItem">
<td align="center">Edit</td>
<td align="center" style="width:15px;"></td>
<td>Test 123</td>
<td> </td>
<td>Visitors</td>
<td> </td>
<td><img src="check.png" alt='Active' style='display: ;' /></td>
<td>9/7/2012 1:36:45 PM</td>
</tr>
<tr class="item">
<td align="center">Edit</td>
<td align="center" style="width:15px;">
The :contains pseudoselector is not part of the W3C CSS Selector standard. As such, browsers do not support selecting elements using it. Some JavaScript CSS selector engines (Sizzle, the engine used by jQuery, for example) provide a :contains pseudoselector, but its presence cannot be relied on.
If you must find an element by the text contents of the element, your only solution at this point is to use XPath. A (very poorly performing) example of how to find this in your case would be as follows:
IWebElement element = driver.FindElement(By.XPath("//td[contains(., 'John John')"));
Note that a better solution will always be to have the application you're automating have proper IDs for the elements you need to find. You should be using text to find elements only as a last resort.
You can try this
var webElements = (Driver.FindElements(By.XPath(elementXpath))).ToList();
webElements.FindIndex(item => item.Text.Contains("John John").Click()
where "elementXpath" is path to each cell in table "names". So you get the list of names and then just find a match. You'll get your item clicked.
You may have better luck using the javascript executor to click the element. I am using a very slow IE9 64bit emulator and it seems the only way to click on certain buttons is to use the javascript executor.
CSS selectors aren't very useful here, because CSS selectors work on the html structure i.e. type, relationship and attributes of web elements; they don't work well on the html content, which in this case is the internal text content 'John John'.
But, xpath will work for this job. The function you need is text() which returns the element's inner text content:
//td[text()='John John']
So your webdriver code should look like this:
driver.FindElement(By.xpath("//td[text()='John John']"));
P.S. All locators verified using Firepath in firefox.
You can use the below code:
driver.FindElement(By.XPath("//td[contains(text(), 'John John')"));