Develop Reference

Unable to locate element inside a table using xpath with selenium

I want to click on a button inside my table each row has a update button I want to click on a specfic button inside my table.
Here is a what my table looks like:
<table _ngcontent-vhp-c82="" datatable="" id="dtOptionsComments" class="display table table-striped table-bordered dt-responsive dataTable dtr-inline" aria-describedby="dtOptionsComments_info" style="width: 100%;" width="100%">
<thead _ngcontent-vhp-c82="">
<tr _ngcontent-vhp-c82="">
<th _ngcontent-vhp-c82="" class="no-marking sorting_disabled" rowspan="1" colspan="1" style="width: 50.4px;" aria-label=""></th>
<th _ngcontent-vhp-c82="" class="sorting sorting_asc" tabindex="0" aria-controls="dtOptionsComments" rowspan="1" colspan="1" style="width: 1109.4px;" aria-label="Comment.Comment Shipping.ShippingDatatable.aria.sortDescending" aria-sort="ascending">Comentario Shipping.Shipping</th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td class="no-marking dtr-control">
<a href="javascript:void(0);">
<span data-toggle="modal" data-target="#update-modal" update-comment-text="6 MESES DE GARANTIA" update-comment-id="5" class="material-icons md-18 clickable"> edit </span>
</a>
<a href="javascript:void(0);">
<span data-toggle="modal" data-target="#delete-modal" delete-comment-id="5" class="material-icons clickable">delete</span>
</a>
</td>
<td class="sorting_1">6 MESES DE GARANTIA</td>
</tr>
<!-- MORE ROWS!!! -->
</tbody>
<tfoot _ngcontent-vhp-c82="">
<tr _ngcontent-vhp-c82="">
<td _ngcontent-vhp-c82="" class="no-marking" rowspan="1" colspan="1">
<a _ngcontent-vhp-c82="" href="javascript:void(0);">
<span _ngcontent-vhp-c82="" class="material-icons clickable"> add_box </span>
</a>
</td>
<td _ngcontent-vhp-c82="" rowspan="1" colspan="1">
<input _ngcontent-vhp-c82="" formcontrolname="addComment" type="text" id="addComment" name="addComment" class="form-control ng-untouched ng-pristine ng-invalid">
<!---->
</td>
</tr>
</tfoot>
</table>
Here is my code trials:
IWebElement btnUpdate = _driver.FindElement(By.XPath("//*[update-comment-id='" + commentAction.GetLastQuoteInsertId().ToString() + "']"));
btnUpdate.Click();
I have validated that the function GetLastQuoteInsertId returns the proper value
Why is my xPath selector wrong how can I fix it thank you for your help.

You were almost there. While considering a xpath the attribute_name should be always preceded by a # sign.
Additionally to make the xpath more canonical as the element is a <span> element you can mention //span to start the xpath.
Effectively, your line of code will be:
IWebElement btnUpdate = _driver.FindElement(By.XPath("//span[#update-comment-id='" + commentAction.GetLastQuoteInsertId().ToString() + "']"));
btnUpdate.Click();

Label and TextBox value on button click as alert

I need little help.
On button click I need values from the labels and txtBox'es shown in form of alert on the screen.
It should look like this:
Label0(value) txtBoxOpis0(value)
Label1(value) txtBoxOpis1(value) ....
The table has many more filed's, I copy'ed in this example only two rows.
<table id="MainContent_gvKarakteristike" style="color:#333333;border-collapse:collapse;" cellspacing="0" cellpadding="4">
<tbody><tr style="color:White;background-color:#507CD1;font-weight:bold;">
<th scope="col">Karakteristike</th><th scope="col"> </th><th scope="col">Opis</th>
</tr><tr style="background-color:#EFF3FB;">
<td>
<span id="MainContent_gvKarakteristike_Karakteristike_0" mycustomattr="foo" margin-left="100px" style="display:inline-block;font-family:Georgia;height:30px;width:150px;">GRP Total_Thickness</span>
</td><td>
<span id="MainContent_gvKarakteristike_Label_0" class="IDKarakteristike" margin-left="100px" style="display:inline-block;font-family:Georgia;height:30px;width:150px;">1</span>
</td><td>
<input name="ctl00$MainContent$gvKarakteristike$ctl02$txtBoxOpis" id="MainContent_gvKarakteristike_txtBoxOpis_0" margin-left="100px" style="font-family:Georgia;height:28px;width:130px;" type="text">
</td>
</tr><tr style="background-color:White;">
<td>
<span id="MainContent_gvKarakteristike_Karakteristike_1" mycustomattr="foo" margin-left="100px" style="display:inline-block;font-family:Georgia;height:30px;width:150px;">GRP Wear Layer thickness</span>
</td><td>
<span id="MainContent_gvKarakteristike_Label_1" class="IDKarakteristike" margin-left="100px" style="display:inline-block;font-family:Georgia;height:30px;width:150px;">2</span>
</td><td>
<input name="ctl00$MainContent$gvKarakteristike$ctl03$txtBoxOpis" id="MainContent_gvKarakteristike_txtBoxOpis_1" margin-left="100px" style="font-family:Georgia;height:28px;width:130px;" type="text">
</td>
</tr><tr style="background-color:#EFF3FB;">
<td>
Here's the button
<input name="ctl00$MainContent$btnButton" value="Save" onclick="return false;" id="MainContent_btnButton" autopostback="false" type="submit">
Thanks in advance !

You Can Do something like this
$('#MainContent_btnButton').click(function () {
alert(
'Label0('+
$("#MainContent_gvKarakteristike_Label_1").text()+
')\n(txtBoxOpis0'+
$("#MainContent_gvKarakteristike_txtBoxOpis_1").text()+
')'
);
});

Move a button to another tr programatically

I have a login form designed using a <table> in an ASP.NET application.
A client is asking to modify the layout by moving around a few UI controls. They want to move the Forgot Password link below the Login button so they are on separate lines.
However, for all other clients, everything needs to remain the same, so if any CSS or style changes need to be done, I would need to do it programatically. Are there any easy ways to do this?
I am trying to avoid creating duplicate user controls to fit the layout they want, and then hide/show controls, depending on the client.
<table style="TABLE-LAYOUT: fixed; WIDTH: 370px;">
<COLGROUP>
<COL width="120px">
<COL width="250px">
</COLGROUP>
<tr>
<td>Username:</td>
<td><input type="text" name="username"></td>
</tr>
<tr>
<td>Password:</td>
<td><input type="text" name="password"></td>
</tr>
<tr>
<td> </td>
<td>
<table>
<tr>
<td style="text-align:right;">
Forgot Password
</td>
<td>
<button type="submit">Login</button>
</td>
</tr>
</table>
</td>
</tr>
</table>
JSfiddle Demo
EDIT: jQuery NOT allowed. JavaScript OK.

Jquery can do this for you. the code might look something like this:
$("#toggle").click(toggleButtonPosition);
function toggleButtonPosition() {
var buttonRow = $("button[type=submit]").closest("tr"), buttonCell, newTR, tr;
if (buttonRow.find("td").length === 2) {
// the table is in its initial configuration. Need to extract the button cell and add it to a new row
buttonCell = buttonRow.find("button").closest("td");
buttonCell.remove();
newTR = $("<tr />").append(buttonCell);
newTR.insertBefore(buttonRow);
} else {
// Reverse the process
buttonCell = buttonRow.find("td");
tr = buttonRow.siblings().first();
tr.append(buttonCell);
buttonRow.remove();
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table style="TABLE-LAYOUT: fixed; WIDTH: 370px;">
<COLGROUP>
<COL width="120px">
<COL width="250px">
</COLGROUP>
<tr>
<td>Username:</td>
<td><input type="text" name="username"></td>
</tr>
<tr>
<td>Password:</td>
<td><input type="text" name="password"></td>
</tr>
<tr>
<td> </td>
<td>
<table>
<tr>
<td style="text-align:right;">
Forgot Password
</td>
<td>
<button type="submit">Login</button>
</td>
</tr>
</table>
</td>
</tr>
</table>
Toggle Button Position

You don't need to duplicate the layout. You can do it by adding/ removing the css class depending upon the client using jquery or javascript.
$(document).ready(function(){
var client1 = true; // variable to store client
if(client1){
$('button').removeClass('client2').addClass('client1');
}
else {
$('button').removeClass('client1').addClass('client2');
}});
Css classes to be added/removed from the button depending upon the client. I have put 'client1' css class on the button.
button.client1{display:block;margin:0 auto}
button.client2{float:right;margin-left:4px}
Html code as follows:
<table style="TABLE-LAYOUT: fixed; WIDTH: 370px;">
<COLGROUP>
<COL width="120px">
<COL width="250px">
</COLGROUP>
<tr>
<td>Username:</td>
<td><input type="text" name="username"></td>
</tr>
<tr>
<td>Password:</td>
<td><input type="text" name="password"></td>
</tr>
<tr>
<td> </td>
<td>
<table>
<tr>
<td>
<button type="submit" class='client1'>Login</button>
Forgot Password
</td>
</tr>
</table>
</td>
</tr>

You could use jQuery to archive that.
Here is an example of moving the button one step back
$(document).ready(function() {
var loginLayOut = $(".login"); // login Table
var btnTd = loginLayOut.find("button").parent(); // button container, in this case its td
var tbody = btnTd.parent().parent(); // we get the tbody by moving two step back
var tr = $("<tr></tr>"); // create a new tr
tr.append(btnTd); // append the td to the new created tr
tbody.prepend(tr); // insert the tr to the tbody at position 0
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class='login' style="TABLE-LAYOUT: fixed; WIDTH: 370px;">
<COLGROUP>
<COL width="120px">
<COL width="250px">
</COLGROUP>
<tr>
<td>Username:</td>
<td><input type="text" name="username"></td>
</tr>
<tr>
<td>Password:</td>
<td><input type="text" name="password"></td>
</tr>
<tr>
<td> </td>
<td>
<table>
<tr>
<td style="text-align:right;">
Forgot Password
</td>
<td>
<button type="submit">Login</button>
</td>
</tr>
</table>
</td>
</tr>
</table>

Parsing HTML content with C# Parser

I have the following HTML file, I want to get each H2 (Standard (Flexible Rate).. and Executive (Flexible Rate) ... with the Room Only , Breakfast Included .
Then push the Room Only and Breakfast Include with 2 Prices of each into objects where I have Standard along with 2 prices from Room Only and Breakfast Included, and the same for Executive
I tried Fizzler with AgilityPack however, I couldn't get the correct results, could you please suggest me an idea or one good parser for this case? Thanks
<div id="accordionResizer" style="padding:5px; height:300px; border-radius:6px;" class="ui-widget-content regestancias">
<div id="accordion" class="dias">
<h2>
<a href="#">
Standard (Flexible Rate) from 139 €
</a>
</h2>
<div class="estancias_precios estancias_precios_new">
<table style="width: 285px;">
<tr class="" title="">
<cont>
<td style="width: 25px;">
<input type="radio" name="estancias" id="tarifa602385" elem="tarifa" idelem="602" idreg="385" precio="139" reg="Only%20Bed" nombre="Standard%20%28Flexible%20Rate%29" />
</td>
<td style="width: 155px;">
<label class="descrip" for="tarifa602385" precio="139.00" reg="Only%20Bed" nombre="Standard%20%28Flexible%20Rate%29">
Only Bed
</label>
</td>
<td style="width: 55px;"></td>
<td style="width: 55px;">
<strong class="precios_mos">139.00 €</strong>
</td>
</cont>
</tr>
<tr class="" title="">
<cont>
<td style="width: 25px;">
<input type="radio" name="estancias" id="tarifa602386" elem="tarifa" idelem="602" idreg="386" precio="156.9" reg="Breakfast%20Included" nombre="Standard%20%28Flexible%20Rate%29" />
</td>
<td style="width: 155px;">
<label class="descrip" for="tarifa602386" precio="156.90" reg="Breakfast%20Included" nombre="Standard%20%28Flexible%20Rate%29">
Breakfast Included
</label>
</td>
<td style="width: 55px;"></td>
<td style="width: 55px;">
<strong class="precios_mos">156.90 €</strong>
</td>
</cont>
</tr>
</table>
</div>
<h2>
<a href="#">
Executive (Flexible Rate) from 169 €
</a>
</h2>
<div class="estancias_precios estancias_precios_new">
<table style="width: 285px;">
<tr class="" title="">
<cont>
<td style="width: 25px;">
<input type="radio" name="estancias" id="tarifa666385" elem="tarifa" idelem="666" idreg="385" precio="169" reg="Only%20Bed" nombre="Executive%20%28Flexible%20Rate%29" />
</td>
<td style="width: 155px;">
<label class="descrip" for="tarifa666385" precio="169.00" reg="Only%20Bed" nombre="Executive%20%28Flexible%20Rate%29">
Only Bed
</label>
</td>
<td style="width: 55px;"></td>
<td style="width: 55px;">
<strong class="precios_mos">169.00 €</strong>
</td>
</cont>
</tr>
<tr class="" title="">
<cont>
<td style="width: 25px;">
<input type="radio" name="estancias" id="tarifa666386" elem="tarifa" idelem="666" idreg="386" precio="186.9" reg="Breakfast%20Included" nombre="Executive%20%28Flexible%20Rate%29" />
</td>
<td style="width: 155px;">
<label class="descrip" for="tarifa666386" precio="186.90" reg="Breakfast%20Included" nombre="Executive%20%28Flexible%20Rate%29">
Breakfast Included
</label>
</td>
<td style="width: 55px;"></td>
<td style="width: 55px;">
<strong class="precios_mos">186.90 €</strong>
</td>
</cont>
</tr>
</table>
</div>
</div>
</div>

Here you go with a quick and dirty approach:
class RoomInfo
{
public String Name { get; set; }
public Dictionary<String, Double> Prices { get; set; }
}
private static void HtmlFile()
{
List<RoomInfo> rooms = new List<RoomInfo>();
HtmlDocument document = new HtmlDocument();
document.Load("file.txt");
var h2Nodes = document.DocumentNode.SelectNodes("//h2");
foreach (var h2Node in h2Nodes)
{
RoomInfo roomInfo = new RoomInfo
{
Name = h2Node.InnerText.Trim(),
Prices = new Dictionary<string, double>()
};
var labels = h2Node.NextSibling.NextSibling.SelectNodes(".//label");
foreach (var label in labels)
{
roomInfo.Prices.Add(label.InnerText.Trim(), Convert.ToDouble(label.Attributes["precio"].Value, CultureInfo.InvariantCulture));
}
rooms.Add(roomInfo);
}
}
The rest is up to you! ;-)

Selenium C# Any alternative way of finding if element is present on browser other than IsElementPresent(By by)

I have a scenario where there are three distinct html parent elements
<tr class="s3288" data-id="s3288">
<tr class="s3288" data-id="s3288">
<tr class="s1" data-id="s1">
Two these elements have a child element
<a class="gylink mapvl" title="No Map Values" href="#">Map Values</a>
but third one does not have this child element.
in my test scenario, I have to click this child element if present.
Is there any function by which i can detect if this element is present?
I have used following function bug for some reason it does not work properly
function i used
protected bool IsElementPresent(By by)
{
try
{
wait.Until(drv => (drv.FindElement(by)));
return true;
}
catch
{
return false;
}
}
Here is how the html of browser looks like
<tr class="s1" data-id="s1">
<td class="ftc1">
<td class="ftc2">
<td class="ftc3 valuecol">
<td class="ftc4 headcol">
<ul class="multihead">
<li>
<input class="txtinput chghead headcolfield pholder changit requiref" type="text" placeholder="Enter Column Header Value" validate="{required: true, messages: {required: 'Required'}}" name="th_s1_0_true" value="">
<a class="gylink mapvl" title="No Map Values" href="#">Map Values</a>
</li>
</ul>
</td>
<td class="ftc5 deletecol"> </td>
</tr>
<tr class="s3288" data-id="s3288">
<td class="ftc1">
<td class="ftc2">
<td class="ftc3 valuecol">
<td class="ftc4 headcol">
<ul class="multihead">
<li>
<input class="txtinput chghead headcolfield pholder changit requiref" type="text" placeholder="Enter Column Header Value" validate="{required: true, messages: {required: 'Required'}}" name="th_s3288_0_true" value="">
<a class="gylink mapvl" title="No Map Values" href="#">Map Values</a>
</li>
</ul>
</td>
<td class="ftc5 deletecol"> </td>
</tr>
<tr class="t1" data-id="t1">
<td class="ftc1">
<td class="ftc2">
<td class="ftc3 valuecol">
<td class="ftc4 headcol">
<ul class="multihead">
<li>
<input class="txtinput chghead headcolfield pholder changit requiref" type="text" placeholder="Enter Column Header Value" validate="{required: true, messages: {required: 'Required'}}" name="th_t1_0_true" value="">
</li>
</ul>
</td>
<td class="ftc5 deletecol"> </td>
</tr>