Looking for same xpath for grid's column text from two different pages - xpath

In our application, there is a situation where there is a grid on two pages. I want to get text of columns from the grids. But both grid's column text has little different HTML.
Page 1 grid HTML:
<div class="ngHeaderContainer" ng-style="headerStyle()" style="width: 598px; height: 30px;">
<div class="ngHeaderScroller" ng-style="headerScrollerStyle()" ng-header-row="" style="height: 30px;">
<div class="ngHeaderCell ng-scope col0 colt0" ng-class="col.colIndex()" ng-repeat="col in renderedColumns" ng-style="{ height: col.headerRowHeight }" style="height: 30px;">
<div class="ngVerticalBar ngVerticalBarVisible" ng-class="{ ngVerticalBarVisible: !$last }" ng-style="{height: col.headerRowHeight}" style="height: 30px;"> </div>
<div ng-header-cell="">
<div class="ngHeaderSortColumn " ng-class="{ 'ngSorted': !col.noSortVisible() }" ng-style="{'cursor': col.cursor}" style="cursor: pointer;" draggable="true">
<div class="ngHeaderText ng-binding colt0" ng-class="'colt' + col.index" ng-click="col.sort($event)">Request ID</div>
For this, I've written xpath //div[#class='ngHeaderContainer']//div[#ng-header-cell='']//div[contains(#class,'ngHeaderText')]
Page 2 grid HTML
<div class="ngHeaderContainer" ng-style="headerStyle()" style="width: 598px; height: 30px;">
<div class="ngHeaderScroller" ng-style="headerScrollerStyle()" ng-header-row="" style="height: 30px;">
<div class="ngHeaderCell ng-scope col0 colt0" ng-class="col.colIndex()" ng-repeat="col in renderedColumns" ng-style="{ height: col.headerRowHeight }" style="height: 30px;">
<div class="ngVerticalBar ngVerticalBarVisible" ng-class="{ ngVerticalBarVisible: !$last }" ng-style="{height: col.headerRowHeight}" style="height: 30px;"> </div>
<div ng-header-cell="">
<div class="ng-scope ng-binding" ng-click="onColumnClick( 3, 'select', $event)">
Request ID
<img class="" ng-click="onColumnClick( 3, 'delete', $event)" src="styles/images/common/delete.png" ng-show="true">
<img>
</div>
For this, I've written xpath //div[#class='ngHeaderContainer']//div[#ng-header-cell='']/div
For grid, I've written a class and in that class I've method which returns column names. Since, xpath till reach to column name is different for grid on two different pages, I won't be able to use same method.
Can someone please help me to get xpath which can be used to return column names of the grid of both the pages?

This xpath will do it hopefully. I ran into similiar issue. Took help from here. This should return you both elements
//*[contains(#class, 'ng-binding')]

Related

Error trying to get data using XPath on Google IMPORTXML function

I am trying to find the XPath to get 5 values of the following website: https://plataforma.penserico.com/dashboard/cp.pr?e=TRPL4
I want the values 7,59 2,04 1,81 7,60 7,59
For the first value I tried this command but I get #N/A:
=IMPORTXML("https://plataforma.penserico.com/dashboard/cp.pr?e=TRPL4";"//*[#id='j_idt104:0:j_idt109:1:chartPanel0']/div/span[1]")
The piece of HTML is like below:
<span id="j_idt104:0:j_idt109:1:chartPanel0">
<div class="c--anim-btn" style="color: #5DADE2;">
<span class="c-anim-btn">
7,59
</span>
<span>
<div style="font-size: 12px !important;">
<div style="width: 90%; left: 5%; position:relative;line-height:2em;white-space: nowrap;">
<div style="width:50%;float:left"><label class="idtri">1T:</label>2,04</div>
<div style="width:50%;float:right"><label class="idtri">2T:</label>1,81</div>
</div>
<div style="width: 90%; left: 5%; position:relative;line-height:2em;white-space: nowrap;">
<div style="width:50%;float:left"><label class="idtri">3T:</label>7,60</div>
<div style="width:50%;float:right"><label class="idtri">4T:</label>7,59</div>
</div>
</div>
</span>
</div></span>
What could be the second paramenter to get the values I want?
Thank you
You have to fix your XPath with the following one to get the values :
//tr[.//span[.='P/L']]/td[2]//text()[parent::span[#class='c-anim-btn'] or parent::div][normalize-space()]
Output (formula in C4):
EDIT : Individual XPath :
//tr[.//span[.='P/L']]/td[2]//text()[parent::span[#class='c-anim-btn']]
(//tr[.//span[.='P/L']]/td[2]//text()[parent::div][normalize-space()])[1]
(//tr[.//span[.='P/L']]/td[2]//text()[parent::div][normalize-space()])[2]
(//tr[.//span[.='P/L']]/td[2]//text()[parent::div][normalize-space()])[3]
(//tr[.//span[.='P/L']]/td[2]//text()[parent::div][normalize-space()])[4]

Identifying previous items using xpath in Selenium IDE

I want to check the checkbox based on the value in the text input labeled 'Field' I have tried the following:
<tr>
<td>check</td>
<td>/label[text()="Field"]/../input[#value="6 1012 49817"]/preceding-sibling::label[text()="Private"]/../input</td>
<td></td>
</tr>
Here is the HTML:
<div class="wdg colShwHdeCls" id="divFormFieldPrivate-0" style="width: 82px;">
<input id="FormFieldPrivate-0" name="FormFieldPrivate-0" title="" style="" class="wdg colShwHdeCls" type="checkbox">
<label for="FormFieldPrivate-0">Private</label>
</div>
<div class="csLineBreak"> </div>
<div class="acI fldWd100 wdg colShwHdeOpn" id="divFormFieldId-0"><label for="FormFieldId-0">Field<a class="aut" title="Show selection list"></a>
<a style="display: inline-block; opacity: 0.0118143;" href="field/view?FieldId=" title="View this Field" class="acOptVw acLb acI"></a>
<a style="display: inline-block; opacity: 0.0118143;" href="field/edit?FieldId=" class="acEd acLb acI" title="Edit this Field"></a>
<a style="display: inline-block; opacity: 0.0118143;" href="field/add?FieldId=" class="acAd lightbox acI" title="Add a new Field"></a>
</label>
<br>
<span style="display:none;" id="FormFieldId-0-Old">6 1012 49817</span>
<input id="FormFieldId-0" name="FormFieldId-0" value="11955" type="hidden">
<input autocomplete="off" id="FormFieldId-0-Dsp" title="type three or more characters to see selection list" class="wdg csAutCpl csAutCplFld ui-autocomplete-input" value="6 1012 49817" type="text">
<span class="ui-helper-hidden-accessible" aria-live="polite" role="status"></span>
</div>
Suggestions are welcome thanks ;-)
This is one possible way. First part of the XPath supposed to find the div element containing label with certain text ("Field" in this case) and input with certain value attribute :
//div[label[normalize-space(text())="Field"] and input[#value="6 1012 49817"]]
From the above div, find preceding sibling div containing label with text equals "Private", then get the input child element of that div :
/preceding-sibling::div[label[text()="Private"]]/input
So the entire XPath will look about like this :
//div[label[normalize-space(text())="Field"] and input[#value="6 1012 49817"]]/preceding-sibling::div[label[text()="Private"]]/input
xpathtester.com demo

get width of a div which was generated by javascript on runtime

I have few columns which was generated by dhtmlx's javascript. The column was generated on run time which means that if I tried to view the source code of the page using the Chrome's View Page Source, I won't be able to see the generated code. But I can see the generated code by right clicking on the element and select 'Inspect Element'. So here's a part of the generated code that I copy pasted from 'Inspect Element':
<div id="scheduler_here" class="dhx_cal_container dhx_scheduler_grid" style="width:100%;height:100%;">
<div class="dhx_cal_header" style="width: 1148px; height: 20px; left: -1px; top: 60px;">
<div class="dhx_grid_line">
<div style="width:169px;">Start Date</div>
<div style="width:169px;">Time</div>
<div style="width:169px;">Event</div>
<div style="width:169px;">Location</div>
<div style="width:169px;">Stakeholders</div>
<div style="width:169px;">Type</div>
</div>
</div>
<div class="dhx_cal_data" style="width: 1148px; height: 506px; left: 0px; top: 81px; overflow-y: auto;">
<div>
<div class="dhx_grid_v_border" style="left:184px" id="imincol0"></div>
<div class="dhx_grid_v_border" style="left:370px" id="imincol1"></div>
<div class="dhx_grid_v_border" style="left:556px" id="imincol2"></div>
<div class="dhx_grid_v_border" style="left:742px" id="imincol3"></div>
<div class="dhx_grid_v_border" style="left:928px" id="imincol4"></div>
</div>
<div class="dhx_grid_area"><table></table></div>
</div>
</div>
I'm trying to get the column width of imincol0, imincol1, imincol2 and so on which you can see at the last part of the code. I have tried few methods to get the width of the columns with these ids but to no avail. I'll always get null.
If you use jquery you could do this:
var x = $('#imincol0').width();
If you're using pure js you could try this:
var x = document.getElementById('imincol0').offsetWidth;

How to set a specific height for a PanelBar?

Is there a way to set the panel bar to a specific height (ie. 300px), and make that specific section scrollable if it's too long?
Assuming that you have your panelbar defined as a ul, something like:
<ul id="panelbar">
<li class="k-state-active">
<span class="k-link k-state-selected">My Teammates</span>
<div style="padding: 10px;">
<div class="teamMate">
<img src="../../content/web/panelbar/andrew.jpg" alt="Andrew Fuller">
<h2>Andrew Fuller</h2>
<p>Team Lead</p>
</div>
<div class="teamMate">
<img src="../../content/web/panelbar/nancy.jpg" alt="Nancy Leverling">
<h2>Nancy Leverling</h2>
<p>Sales Associate</p>
</div>
<div class="teamMate">
<img src="../../content/web/panelbar/robert.jpg" alt="Robert King">
<h2>Robert King</h2>
<p>Business System Analyst</p>
</div>
</div>
</li>
<li>
Projects
...
</li>
</ul>
You should define a CSS style as:
#panelbar {
height: 300px;
overflow-y: scroll;
}
See an example here: http://trykendoui.telerik.com/#OnaBai/ifus
The solution above scrolls the entire control. Here's how to scroll the panel's items.
Click here for the Dojo example

Element selection using xPath

I am trying to write a test automation code and having a hard time finding an element using Xpath in the below structure.
<div id="270590-bar" class="chart-row clearfix" style="display: block;">
<div class="bar-col float">
<div class="bar-wrapper">
<div class="topic-name-wrapper" style="background-color: transparent;">Business</div>
<div class="bar" style="width:170px"></div>
</div>
<div style="float:left;position:relative; ">
<div class="level-dd-fake">Intermediate</div>
<select id="270590-level" class="level-dropdown level-select">
</div>
<div id="270590-un" class="topic unsubscribe" style="float:left; margin: 0px 0px 0px 1px !important;"></div>
</div>
There are several data rows which will use the same set of lines as above for each row.
When I give the value inside class="topic-name-wrapper" eg:- Business
I want to select the DropDown element at class="level-dropdown level-select"
Hope the question is clear and any help on this is really appreciated.
As far as I understand you need something like that:
//div[*[.='Business']]/following-sibling::div/select

Resources