How to click on the checbox from a list of checkboxes available inside a table using selenium - selenium

I have been trying to click on the one particular checkbox, but all the checkboxes have the same tags and parameters inside. Only the text which is the name of the check box is varying, but unfortunately couldn't get that also to be used. Kindly do help me with this.
Html code:
<tr class="ng-scope" ng-repeat="group in groupsList | orderBy:'groupName'">
<td class="col-xs-4 ng-binding">
<input class="ng-scope ng-pristine ng-valid" type="checkbox" checklist-value="group" ng-model="checked"/>
Checkbox1 name
<br/>
</td>
</tr>
<!-- end ngRepeat: group in groupsList | orderBy:'groupName' -->
<tr class="ng-scope" ng-repeat="group in groupsList | orderBy:'groupName'">
<td class="col-xs-4 ng-binding">
<input class="ng-scope ng-pristine ng-valid" type="checkbox" checklist-value="group" ng-model="checked"/>
Checkbox2 name
<br/>
</td>
</tr>
<!-- end ngRepeat: group in groupsList | orderBy:'groupName' -->
<tr class="ng-scope" ng-repeat="group in groupsList | orderBy:'groupName'">
<td class="col-xs-4 ng-binding">
<input class="ng-scope ng-pristine ng-valid" type="checkbox" checklist-value="group" ng-model="checked"/>
Checkbox3 name
<br/>
</td>
</tr>
<!-- end ngRepeat: group in groupsList | orderBy:'groupName' -->
<tr class="ng-scope" ng-repeat="group in groupsList | orderBy:'groupName'">
<td class="col-xs-4 ng-binding">
<input class="ng-scope ng-pristine ng-valid" type="checkbox" checklist-value="group" ng-model="checked"/>
Checkbox4 name
Answers would be very much helpful and appreciated.
The xpaths I have tried:
//table/tbody/tr/td/input/following-sibling::text()
this is highlighting all the texts i.e names of checkboxes
//table/tbody/tr/td/input/following-sibling::br/preceding::text()='Checkbox name'
//table/tbody/tr/td/input/text()\[preceding::br and contains(../text(),'Checkbox name')\][1]

You should try using following xPath to select checkbox which is based on visible text :-
//td[contains(., 'Checkbox1 name')]/input

As you mentioned in the question, your purpose is to click on the checkbox.
You can select the input tag with the exact text:
//input[.="Checkbox1 name"]
or if you think there could be some extra spaces or text around the text, then you can use contains function:
//input[contains(., "Checkbox1 name")]

Also you can select by index:
element(by.tagName('table')).all(by.tagName('input')).get(INDEX).click();

Check this - protractor allows to search byCssContaining text -
http://www.protractortest.org/#/api?view=ProtractorBy.prototype.cssContainingText
It might be better than xPath.
Here is for your question:
function clickCheckboxByName (name) {
var checkbox = element(by.cssContainingText("input[type='checkbox']", name));
checkbox.click();
}

Related

How to find xpath for text contains and select check box in that row using selenium IDE

I've 3 rows in my table and I want to select a check box that contains text 1024.0281. I can find text contains part number like this
xpath=//a[text()='1024.0281']
But I don't know how to select checkbox in that line, How to do that?
I'm trying to do this in Selenium IDE.
Thank you in advance!
<tbody>
<tr class="odd">
<td><input class=RightText name='DHR' type='checkbox' id='Chk_DHR0' value='1^310^0^^^^' onClick=javascript:fnCalcDHRAmt( 'Chk_DHR0',this.form) tabindex="8"><input type=hidden name='hDHRID0' value='GM-DHR-200789551'> <input type=hidden name='hVID0' value='334'> <input type='hidden' value='0' name='hDHRAmtGMDHR200789551'></td>
<td>PS-1876546</td>
<td><a title="7.5mm REVERE HA Monoaxial Screw, 27mm">1024.0131</a></td>
</tr>
<tr class="even">
<td><input class=RightText name='DHR' type='checkbox' id='Chk_DHR1' value='1^465^0^^^^' onClick=javascript:fnCalcDHRAmt( 'Chk_DHR1',this.form) tabindex="9"><input type=hidden name='hDHRID1' value='GM-DHR-200789552'> <input type=hidden name='hVID1' value='334'> <input type='hidden' value='0' name='hDHRAmtGMDHR200789552'></td>
<td>PS-1876546</td>
<td><a title="8.5mm REVERE HA Monoaxial Screw, 25mm">1024.0281</a></td>
</tr>
<tr class="odd">
<td><input class=RightText name='DHR' type='checkbox' id='Chk_DHR2' value='1^1000^0^^^^' onClick=javascript:fnCalcDHRAmt( 'Chk_DHR2',this.form) tabindex="10"><input type=hidden name='hDHRID2' value='GM-DHR-200789553'> <input type=hidden name='hVID2' value='334'> <input type='hidden' value='0' name='hDHRAmtGMDHR200789553'></td>
<td>PS-1876546</td>
<td><a title="REVERE 4.5 Thoracic Lamina Hook, Narrow, Medium">1041.9902</a></td>
</tr>
</tbody>
Use the following xpath which will select the tr based on anchor text and then find the input checkbox.
//tr[.//a[text()='1024.0281']]//input[#class='RightText']
Or use preceding
//a[text()='1024.0281']/preceding::input[#name='DHR'][1]

Checkbox Selection in Kendo Grid Wrapper

I've added kendo-grid like this:
https://www.telerik.com/kendo-vue-ui/components/grid/selection/#toc-checkbox-selection
But when I investigate my source code under console I don't see tags "id" and "for"
<td role="gridcell">
<input class="k-checkbox" data-role="checkbox" aria-label="Select row" aria-checked="false" type="checkbox">
<label class="k-checkbox-label k-no-text"></label>
</td>

xpath with following-sibling

I want to access the table with classname 'table table-hover' that should be under the class=='box-title' that contains the text 'OODR Items for next 20 Days'. Can any one please help me out to get the xpath for this ? I tried with following-sibling but no luck. Thanks in advance.
<?xml version="1.0" encoding="UTF-8"?>
<div id="topTenSellers" class="box box-solid box-primary frontpageWidget">
<div class="box-header">
<i class="fa fa-group" />
<h3 class="box-title">OODR Items for next 20 Days</h3>
<div class="box-tools pull-right">
<button class="btn btn-primary btn-sm" data-widget="collapse">
<i class="fa fa-minus" />
</button>
</div>
</div>
<!-- /.box-header -->
<div class="box-body no-padding">
<table class="table table-hover">
<tbody>
<tr>
<th style="width: 10px">#</th>
<th>Booking</th>
<th>Item Start Date</th>
<th>Site</th>
<th>Supplier</th>
</tr>
<tr>
<td>
<strong>1</strong>
</td>
<td>
(642143)
</td>
<td>21/10/2017 00:00:00</td>
<td>Ski</td>
<td>OODR - Out of Date Range</td>
</tr>
</tbody>
</table>
</div>
<!-- /.box-body -->
</div>
You can try following instead of following-sibling as mentioned h3 and table nodes are not siblings:
//div[#id="topTenSellers"]//h3[#class="box-title" and .="OODR Items for next 20 Days"]/following::table[#class="table table-hover"]
If there is only one element of that class name then either of these will work. One thing to note though, selenium can struggle with spaces in class names depending on the version and browser. If you find that is the case, then use multiple contains to handle the spaces.
//table[contains(#class,'table table-hover')]
//table[#class = 'table table-hover']
If you need that the element as a child of that OODR Items for the next 20 days
//h3[contains(text(),'OODR Items for the next 20 days')]/parent::div/following-sibling::div/table[#class ='table table-hover']
This path uses your anchor point, "OODR Items..", then goes to the parent, then sibling, then to the item with the specified class name. Good luck!

How to extract text between 2 same child tags of a parent tag

Below is the html markup and I want to extract mobile number 7788996655 using xpath:-
<table class="table hover" id="resultTable">
<tbody>
<tr class="odd">
<td class="left">
<img src="/symfony/web/index.php/pim/viewPhoto/gamerNumber/1/from/gameDir" height="200" width="196">
</td>
<td class="left">
<span style="font-weight:bold;">John Player</span>
<br>
<span style="font-weight:bold;">Email: </span>
john.player#yyeett.com,
<span style="font-weight:bold;">
Mobile: </span>7788996655,
<span style="font-weight:bold;">Skype: </span>
game.player,
<br>
<span style="font-weight:bold;">Designation: </span>
Moderator,
<br>
<span style="font-weight:bold;">Game Name: </span>
Counter Strike
<br>
</td>
</tr>
</tbody>
</table>
I tried below xpath, but it didn't worked:
//td/span[contains(.,'Mobile:')]/following-sibling::text()[1]
Can someone provide solution for this?
Workaround I tried is to get whole text within td and then used pattern matching regex to extract mobile number from it. But, now i want to know whether is it possible using xpath?
You can do it using below XPath
<parent td node xpath>/text()[preceding-sibling::span[1][text() = 'Mobile: ']]
Now for an explanation. /td/text() will select each text which is part of the td node but is not part of any other node. So in this case it ,,7788996655,, game.player, moderator.
Now out of these 4 text we want to filter out one which has a previous sibling, which is a span and has text Mobile:, so we can add [preceding-sibling::span[1][text()='Mobile: ']]

Need help finding xpath of input field beside label

I have a dom structure like this
<tr class="">
<td class="labelCol requiredInput">
<label for="name_lastacc2" class="">
<span class="requiredMark">*</span>
Last Name</label>
</td>
<td class="dataCol col02">
<div class="requiredInput">
<div class="requiredBlock"></div>
<input id="name_lastacc2" maxlength="80" name="name_lastacc2" size="20" tabindex="3" type="text"></div>
</td>
<td class="labelCol">
<label for="00NG0000008Rybp">Business Ext.</label>
</td>
<td class="dataCol">
<input id="00NG0000008Rybp" maxlength="10" name="00NG0000008Rybp" size="20" tabindex="22" type="text"></td>
</tr>
I am trying to find the input box next to its label.
Eg:
Last Name: ________________
I have tried using xpath queries like
//label[contains(text(),'Last Name']/../following-sibling::*/div/input[#type='text']
but i get an [INVALID XPATH EXPRESSION] error. Where am i going wrong ?
Your path expression is missing the closing bracket of contains().
//label[contains(text(),'Last Name')]/../following-sibling::*/div/input[#type='text']
But that said, I do not think your path expression is correct now. Your expression will match any following sibling of the parent of label[contains(text(),'Last Name')]. What you want it to find is the input element that immediately follows.
The only reason your original expression only finds one input element is that the second one is nested inside one more div. But I do not think you should rely on that.
Instead, try:
//label[contains(.,'Last Name')]/following::input[1]
Then, the result is
<input id="name_lastacc2" maxlength="80" name="name_lastacc2" size="20" tabindex="3" type="text"/>