I have a Application Under Test that has a tabular structure like below:
<table width="100%" cellspacing="0" cellpadding="0" border="0" style="background-color: White">
<tbody>
<tr>
<td id="lefthandcol" class="b24-lefthandcol" valign="top" style="width: 130px !important">
<td style="height: 400px; width: 5px">
<td style="height: 400px; width: 5px">
<td valign="top">
<div id="ctl00_ContentPlaceHolder1_MiddlePanel">
<div id="DestinationDiv"></div>
<table>
</td>
<td style="height: 400px; width: 5px">
<td style="height: 400px; width: 5px">
<td width="225" valign="top" align="right" style="background-color: White;">
</tr>
</tbody>
</table>
The question is how do I identify this table since it doesn't have id?
What is generally people do in such scenario?
You should find any unique parent-children relationship and write it with the help of CSS or Xpath:
IWebElement table = driver.FindElement(By.XPath("//table[descendant::*[#id='ctl00_ContentPlaceHolder1_MiddlePanel']]"));
So the table with descendant element with id=ctl00_ContentPlaceHolder1_MiddlePanel will be found.
If id is not available then either go with xpath or css.If you cant write them by your own then you can use tools like firebug and xpath checker..
Related
I have a report which is completely of HTML based. I'm trying to automate and using selenium webdriver for finding the elements. In one of the part, below is the HTML format
<tbody>
<tr>
<td style="border: 1px solid #D1D1D1; background-color:#F4F4F4; color: #707070;padding :2px;">
<table style="width: 100%;
border-collapse: collapse; font-size: 15px;font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;" role="presentation">
<tbody><tr>
<!--Action Date -->
<td></td>
<td width="100%" valign="top" align="right">
<span style="font-size: 12px;">12/7/20 10:21 AM</span>
</td>
</tr>
<tr>
<!-- Name and status column -->
<td style="" width="25" valign="top" align="center">
<img src="images/qual_checkmark_24.png" alt="">
</td>
<td width="535">
<span>First line of <strong>TEXT</strong></span>
</td>
</tr>
</tbody></table>
</td>
</tr>
<tr>
<td style="border: 1px solid #D1D1D1; background-color:#F4F4F4; color: #707070;padding :2px;">
<table style="width: 100%;
border-collapse: collapse; font-size: 15px;font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;" role="presentation">
<tbody><tr>
<!--Action Date -->
<td></td>
<td width="100%" valign="top" align="right">
<span style="font-size: 12px;">12/7/20 10:18 AM</span>
</td>
</tr>
<tr>
<!-- Name and status column -->
<td style="" width="25" valign="top" align="center">
<img src="images/qual_arrowupcircleblue_24.png" alt="">
</td>
<td width="535">
<span>Second line of<strong>TEXT</strong></span>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
I wanted to find the text in span tag (eg: first line of text, second line of text ) where i don't have any other attributes. I tried various other way of finding it via xpath, cssSelector and nothing works. Could someone help?
Try to use this XPath to select span nodes without attributes:
//span[not(#*)]
//tbody/tr[2]/td/span
you can use the parent as reference, in the html you provided the span is under the tr which is second element of tbody.
//tbody/tr[2] , will find all elements which are second child of tbody , and then direct child td/span
A combination of both answers would be probably best:
//tbody/tr/td/span[not(#*)]
It's still flexible and less error-prone at the same time.
There are two sets of <span> tags. One that holds the datetime e.g. 12/7/20 10:18 AM and the other that holds the text e.g TEXT.
To print the list of <span> tag texts you need to induce WebDriverWait for the visibilityOfAllElementsLocatedBy() and you can use Java8 stream() and map() and you can use either of the following Locator Strategies:
xpath:
List<String> myTexts = new WebDriverWait(driver, 20).until(ExpectedConditions.visibilityOfAllElementsLocatedBy(By.xpath("//tbody//tr/td/table/tbody//tr//td/span[./strong]"))).stream().map(element->element.getText()).collect(Collectors.toList());
System.out.println(myTexts);
I am trying to select an element in the prompt, but I am unable to switch control to the prompt.
I've tried the below code:
Alert a = driver.switchTo().alert();
WebElement e = wait.until(Expected Conditions.visibilityofElementLocated(By.xpath("locator"));
Adding HTML code
<table role="dialog" aria-labelledby="ariaLabelledBy_promptsDlg" oncontextmenu="_CWprompts.eventCancelBubble(event);return false" border="0" cellspacing="0" cellpadding="0" id="promptsDlg" style="display: block; padding: 0px; visibility: visible; position: absolute; top: 119px; left: 368px; width: 800px; height: 400px; z-index: 1005;">
<tbody>
<tr>
<td style="width:800px;height:400px;" class="dialogbox" id="td_dialog_promptsDlg" onresize="_CWprompts.DialogBoxWidget_resizeIframeCB('promptsDlg',this)" valign="top">
<table class="dlgBox2" width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td height="0" valign="top">
<table style="height:26" class="dlgTitle" width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr valign="top" style="height:26px">
<td onselectstart="return false" ondragstart="return false" onmousedown="_CWprompts.DialogBoxWidget_down(event,'promptsDlg',this,false);return false;" style="cursor:move;padding-left:10px;" width="100%" valign="middle" align="left">
<nobr>
<span id="ariaLabelledBy_promptsDlg" class="titlezone">Prompts</span>
</nobr>
</td>
<td class="dlgCloseArea" align="left" valign="middle">
<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr style="height:26px">
<td valign="middle" align="left" style="padding-right:4px;">
<div id="helpIcon_promptsDlg" "="" title="Help Contents" class="imo" style="width:16px;height:16px;background-image:url('images/main/galleries/icon16x16gallery1b.png');background-position:0px -480px;"></div>
</td>
<td style="padding-right:10px">
<div id="dialogClose_promptsDlg" class="dlgCloseBtn" title="Close window"></div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
I am getting no such alert exception. Can someone please help me out with this?
Thanks in advance.
I was wondering if this is capable/ anyone has an example.
The webpage I'm accessing has a very structured layout and uses comments to start and finish sections.
In each section their is always a opening comment, a closing comments and a <h3></h3> and then only sometimes a <table></table>
If I know the Xpaths where a section starts and where it finishes is there a way to loop this range?
HTML
<!-- Asset Allocation -->
<h3 style="border-top: 1px solid #CCCCCC; margin-top: 20px;">Asset Allocation</h3>
<p class="fundreportsubheading">% as at 31 Aug 2017</p>
<table class="table2 tablefundreport noth">
<tbody><tr class="N_Qodd">
<td style="text-align: left;">Domestic Equity</td>
<td>4.181</td>
</tr>
<tr class="N_Qeven">
<td style="text-align: left;">International Equity</td>
<td>95.494</td>
</tr>
<tr class="N_Qodd">
<td style="text-align: left;">Listed Property</td>
<td>0.000</td>
</tr>
<tr class="N_Qeven">
<td style="text-align: left;">Unlisted Property</td>
<td>0.000</td>
</tr>
<tr class="N_Qodd">
<td style="text-align: left;">Domestic Fixed Interest</td>
<td>0.000</td>
</tr>
<tr class="N_Qeven">
<td style="text-align: left;">International Fixed Interest</td>
<td>0.000</td>
</tr>
<tr class="N_Qodd">
<td style="text-align: left;">Cash</td>
<td>0.325</td>
</tr>
<tr class="N_Qeven">
<td style="text-align: left; border-bottom: none;">Other</td>
<td style="border-bottom: none;">0.000</td>
</tr>
</tbody></table>
<!-- /Asset Allocation -->
Sample comment Xpaths
//*[#id="maincontent"]/div[2]/div[3]/comment()[3]
//*[#id="maincontent"]/div[2]/div[3]/comment()[4]
I’m trying to automate and select the drop down values.
2 fields are having same drop down values (i.e.). Yes and No and both field has similar HTML code . So unable to find unique Xpath in order to click on second field and it is throwing an org.openqa.selenium.ElementNotInteractableException exception. Since the tag name is not SELECT, so I couldn’t use SELECT Class.
HTML Code:
1st Field
<table id="ssl" class="x-field dropdown x-form-item x-box-item x-field-default x-vbox-form-item x-form-dirty" style="margin: 0px; width: 660px; table-layout: fixed; left: 9px; top: 36px;" cellpadding="0">
<tbody>
<tr id="ssl-inputRow">
<td id="ssl-labelCell" class="x-field-label-cell" style="" halign="left" width="385" valign="top">
<label id="ssl-labelEl" class="x-form-item-label x-form-item-label-left" for="ssl-inputEl" style="width:380px;margin-right:5px;">Use SSL to connect to NetScaler </label>
</td>
<td id="ssl-bodyEl" class="x-form-item-body x-form-trigger-wrap-focus" colspan="2" role="presentation" style="width: 100%;">
<table id="ssl-triggerWrap" class="x-form-trigger-wrap" style="width: 100%; table-layout: fixed;" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td id="ssl-inputCell" class="x-form-trigger-input-cell" style="width: 100%;">
<div id="ext-gen1668" class="x-hide-display x-form-data-hidden" role="presentation"></div>
<input id="ssl-inputEl" class="x-form-field x-form-text x-form-focus x-field-form-focus x-field-default-form-focus" autocomplete="off" name="ssl" readonly="readonly" style="width: 100%; -moz-user-select: text;" aria-invalid="false" data-errorqtip="" type="text">
</td>
<td id="ext-gen1667" class="x-trigger-cell" style="width:22px" valign="top">
<div id="ext-gen1666" class="x-trigger-index-0 x-form-trigger x-form-arrow-trigger x-form-trigger-last x-unselectable" role="button" style="-moz-user-select: none;"></div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
2nd Field:
<table id="isDiscovery" class="x-field dropdown x-form-item x-box-item x-field-default x-vbox-form-item x-form-dirty" style="margin: 0px; width: 660px; table-layout: fixed; left: 9px; top: 67px;" cellpadding="0">
<tbody>
<tr id="isDiscovery-inputRow">
<td id="isDiscovery-labelCell" class="x-field-label-cell" style="" halign="left" width="385" valign="top">
<label id="isDiscovery-labelEl" class="x-form-item-label x-form-item-label-left" for="isDiscovery-inputEl" style="width:380px;margin-right:5px;">Discover StoreFront hosts using this NetScaler </label>
</td>
<td id="isDiscovery-bodyEl" class="x-form-item-body" colspan="2" role="presentation" style="width: 100%;">
<table id="isDiscovery-triggerWrap" class="x-form-trigger-wrap" style="width: 100%; table-layout: fixed;" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td id="isDiscovery-inputCell" class="x-form-trigger-input-cell" style="width: 100%;">
<div id="ext-gen1671" class="x-hide-display x-form-data-hidden" role="presentation"></div>
<input id="isDiscovery-inputEl" class="x-form-field x-form-text" autocomplete="off" name="isDiscovery" readonly="readonly" style="width: 100%; -moz-user-select: text;" aria-invalid="false" data-errorqtip="" type="text">
</td>
<td id="ext-gen1670" class="x-trigger-cell" style="width:22px" valign="top">
<div id="ext-gen1669" class="x-trigger-index-0 x-form-trigger x-form-arrow-trigger x-form-trigger-last x-unselectable" role="button" style="-moz-user-select: none;"></div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
Tried Xpath (but it is failing to select 2nd field)
1st field xpath:
.//*[#id='ssl-inputEl']//following::div[contains(#id,'boundlist-')]/div/ul/li[2][contains(text(), 'No')]
.//*[#id='ssl-inputEl’]//following::div[contains(#id,'boundlist-')]/div/ul/li[1][contains(text(), ‘Yes’)]
.//*[contains(#id,'boundlist-')]/div/ul/li[1][contains(text(), 'Yes')]
.//*[contains(#id,'boundlist-')]/div/ul/li[2][contains(text(), 'No')]
2nd field xpath:
.//*[#id='isDiscovery-inputEl']//following::div[contains(#id,'boundlist-')]/div/ul/li[2][contains(text(), 'No')]
.//*[#id='isDiscovery-inputEl']//following::div[contains(#id,'boundlist-')]/div/ul/li[1][contains(text(), ‘Yes’)]
.//*[contains(#id,'boundlist-')]/div/ul/li[1][contains(text(), 'Yes')]
.//*[contains(#id,'boundlist-')]/div/ul/li[2][contains(text(), 'No')]
I want to make the table transparent and I want to see the background image through the table list which is striped with different colors.
I have tried the following but it didn't work.
<style> #loading {
position: absolute; width: 100%; height: 100%; background: url('http://www.jettools.com/images/animated_spinner.gif') no-repeat center center;
}
</style>
<div id="loading"></div>
<table style="background: transparent !important;">
<thead>
<th></th><th></th><th></th><th></th>
</thead>
<tbody style="background: transparent !important;" >
<tr>
<td title="">
</td>
<td title=""
</td>
<td title="">
</td>
<td title="">
</td>
</tr>
</tfoot> </tfoot>
</tbody>
</table>