Watir-Webdriver, Ruby - click on the table row - ruby

I'm using Watir-Webdriver and Ruby. On the page I have a table of record. I need to click on any row and it should go the next page. How can I click on the row?
Here's the source code for each record from the table
<tr class="ng-scope" ng-click="clickHandler({rowItem: item})" ng-repeat="item in ngModel">
<td class="ng-bindging">Sometext</td>
<td class="ng-bindging">Sometext1</td>
<td class="ng-bindging">Sometext2</td>
<td class="ng-bindging">Sometext3</td>
<td class="ng-bindging">Sometext4</td>
<td>
<span class="glyphicon glyphicon-play-circle"></span>
</td>
Any suggestions would be appreciated.
Thank you.

As you do not care which tr element you click, you could simply click the first tr element in the table:
record_table = browser.table
record_table.tr.click
If the first row is a header row, you might need to click the last row instead:
record_table = browser.table
record_table.trs.last.click
Note that browser.table will click the first table on the page. If there are more tables on the page, you will want to be more specific - eg browser.table(id: 'some_id').

The key is to find unique attributes that Watir can access. The first issue is that your angular app doesn't product valid html5 without data- prepended.
I don't know what your other rows look like to know how to click this one versus another one, but if that attribute is unique, you could use css:
browser.element(css: "tr[ng-repeat='item in ngModel']")
If your text is unique you could also do this (even though it is less ideal):
browser.td(text: 'Sometext').parent

Related

Cypress: Access the td next to a known one within a table

Can anybody help?
I need to write a cypress locator with a table name and the real name, but click on the checkbox in a td next to the real name label.
so far I have:
cy.contains('[tabletitle]', 'XYZ').should('be.lengthOf', 1)
.closest('table')
.contains('td', 'REALNAME').should('be.lengthOf', 1)
.parentsUntil('tr[name='tr-xyz']')
.get('input[type="checkbox"]').check();
I tried closest instead of parentsUntil, but it always jumps above the table name and then ergo click on all the input checkboxes of all the tables on the page. I want it to stay within a tr and just clicks on the checkbox in the above td (within the table).
Here is a scetch of the page:
<table name='xyz'><div tabletitle>XYZ</div>
<tr name='tr-efg'>
<td><div><div name='td-xyz'><input type="checkbox"></div></div></td>
<td><div someOtherDiffsandTD></div>
<td><div name='realName1'>REALNAME</div></td>
<td ...etc
<tr name='tr-efg'>
...same as first line with different realname
<tr name='tr-efg'>
... etc ...
</table>
<table name='abc'>
<tr name='tr-efg'>
...same as first table with first td containing a checkbox and second td a cell with the realname...
To navigate to the table element after selecting the tile, just use .parent() - assuming the table is the direct parent of the title element.
cy.contains('div[tabletitle]', 'XYZ') // tabletitle div with "XYZ"
.parent() // table
.should('be.lengthOf', 1)
.within(() => { // limit to this table
cy.contains('tr', 'REALNAME') // row with "REALNAME" in one of the columns
.should('be.lengthOf', 1)
.find('input[type="checkbox"]') // find, not get
// otherwise all inputs on page are returned
.check() // ✅
})
I suspect the HTML you show isn't the full picture, there should be a <tbody> around the <tr> and the title is oddly placed, I would expect it to precede the <table>.

Coldfusion, Dropdown menu, Can a single option value contain multiple variables?

I am writing a CFM file to display a dropdown menu, in the dropdown options I want Var1 [Var2, Var3] to display for each line. I tried both concatenation and commas, tried a mix of brackets and quotes and cannot find the right combination. Using Oracle SQL developer. I am a student taking a database management class. I read through Adobe's site and cannot find an example like this. I also combed stack, but everything is PHP and javascript related. The result should have a dropdown, where each selection shows: cus_code with corresponding [cus_fname, cus_lname] for each line. Below is the query that pulls the data needed and the dropdown menu. The place I am having trouble is in the output, where each line from the dropdown should have 3 variables. Every attempt I make causes an error.
<!--Here is my query: grab customer code, last name, first name from customer table, join invoice table on customer code-->
<CFQUERY NAME="INVOICESEARCH" DATASOURCE="ORCL">
SELECT DISTINCT levine04.CUSTOMER6.CUS_CODE, CUS_LNAME, CUS_FNAME
FROM levine04.CUSTOMER6, levine04.INVOICE6
WHERE levine04.CUSTOMER6.CUS_CODE = levine04.INVOICE6.CUS_CODE;
</CFQUERY>
<!--Here is my dropdown:-->
<TR>
<TD ALIGN="right">INV_NUMBER</TD>
<TD>
<INPUT TYPE ="text" NAME="INV_NUMBER" SIZE="10" MAXLENGTH="10">
</TD>
</TR>
<TR>
<TD ALIGN="right">CUS_CODE, [CUS_FNAME, CUS_LNAME]</TD>
<TD>
<SELECT NAME="CUS_CODE" SIZE=1>
<OPTION SELECTED VALUE="ANY">ANY
<CFOUTPUT QUERY="INVOICESEARCH">
<OPTION VALUE="#INVOICESEARCH.CUS_CODE#" + "#INVOICESEARCH.CUS_LNAME#" +"#INVOICESEARCH.CUS_FNAME#"> #CUS_CODE# + #CUSLNAME# + #CUSFNAME#
</CFOUTPUT>
</SELECT>
</TD>
</TR>
Got it! But maybe this will help someone else..
<OPTION VALUE="#INVOICESEARCH.CUS_CODE#"> #CUS_CODE#[#CUS_LNAME#, #CUS_FNAME#]

Trying to read data from a table by combining the properties of 2 different tables

Here is the HTML for two tables that I am trying to read info from.
Table 1 has the heading that I am looking for:
<div>
<table>
<tbody>
<tr>
<td><h3 id="00Qw000000cxlth_RelatedNoteList_title">**My table**</h3></td> // table Head is stored in this table
</td>
</tr>
</tbody>
</table>
</div>
Table 2 is where the data is present and I read to store all the TD cells data in the string array. Table 2 is present right below table 1 but they are two different tables.
<div>
<div id="00Qw000000cxlth_RelatedNoteList_body" class="pbBody"> //div id changes dynamically everytime for a different record.
<table class="list">
<tbody>
<tr>
<td>Attachment</td>
<td>Requirement info for status</td>
<td>09/07/2014 20:34</td>
<td>John doe</td>
</tr>
</tbody>
</table>
</div>
My question: Is it possible to search for the heading of first table ("My table") and than fetch all the table data from the following table (table 2).
driver.manage().timeouts().implicitlyWait(20, TimeUnit.SECONDS);
List<WebElement> rows = driver.findElements(By.xpath("//table[#class='list']//td"));
int count = rows.size();
System.out.println(rows.size());
String[] array = new String[count];
for (int i = 0; i<count; i++)
{
array[i] = rows.get(i).getText();
System.out.println(array[i]);
}
This gives me all the data from the table 2, but it also gives me all the tables info on the page that has #class = 'list' and not just the table with heading = 'My table'
Tried the following solutions without any luck
//div//table[//h3[contains(text(),'My table')]]//table//td[following-sibling::td] - Gets way more matches than just from one table.
Yes, you can. If your second table and first table are siblings, e.g.
<table>1st table</table>
<table>2nd table</table>
You can locate the first table first then find the second table using xpath, please follow this link to find more information on how to locate an element using sibling. http://scraping.pro/res/xpath-cheat/xpath_css_dom_recipes.pdf
There are many ways to "Uniquely" identify a web element, the link above is my favorite selenium cheat sheet.
Try this...
WebElement table = driver.findElement(By.cssSelector("table.list"));
List<WebElement> rows = table.findElements(By.tagName("tr"));
System.out.println(rows.size());
for (WebElement row : rows)
{
System.out.println(row.getText().trim());
}
This will return the first TABLE that has class = "list". It then loops through all the table rows of that table and prints the innerText.
Use below xpath
//div[table/tbody/tr/td/h3[#id='00Qw000000cxlth_RelatedNoteList_title'] or ./div[#id='00Qw000000cxlth_RelatedNoteList_body']/table[#class='list']/tbody/tr/td]
I have created a html page according to same HTML tags you have provided above.
This xpath return you 1st table heading as well as 2nd table all data. Then extract it all using WebElement List and further you can write your code according to your need.
If it is not working for you then let me know

Selenium IDE: Handle Ajax controls - select drop down values

I am trying to select drop down values using Selenium IDE. Say for example there are three drop down lists Country, State & City. Once you select a country A from the country drop down, the state drop down is populated (empty before) with the corresponding values and so on for the city.
When I record, some hardcoded values get recorded specific to the value selected in first drop down.
I selected the first value in the first drop down. Then selenium records the following for the ajax action:
click | css=option[value="28"]
Here 28 is the id stored in db for the selected value (first item in the drop down). I don't want this hardcoded value in my script as the actual ids in prod will be different.
I tried using waitForCondition but it is not able to populate the drop down values in the second drop down. Adding pause of 10 seconds also didn't help.
The sample recorded code is here:
<tr>
<td>select</td>
<td>id=property1</td>
<td>index=1</td>
</tr>
<tr>
<td>click</td>
<td>css=option[value="28"]</td>
<td></td>
</tr>
<tr>
<td>select</td>
<td>id=property2</td>
<td>index=1</td>
</tr>
<tr>
<td>click</td>
<td>css=option[value="12"]</td>
<td></td>
</tr>
<tr>
<td>select</td>
<td>id=property3</td>
<td>index=1</td>
</tr>
<tr>
<td>click</td>
<td>css=option[value="14"]</td>
<td></td>
</tr>
<tr>
The waitForCondition I tried is here
waitForCondition | var value = selenium.getText("//input[#id='some_xyIDHidden']"); value == "" | 10000
I am probably missing a basic step here. Need help.
Thanks
Try using selenium.fireEvent("<locator>","blur") on each and every element
in this condition you have to to store the value in a variable, the while dropdown will appear then you can use that value, for this you have to use the storeEval command to store the value in a variable

Using jQuery Validate to ensure there is at least one row in my table

I am using a table in an entry program to allow the user to add one or more rows of information (much like this article).
I need to ensure that there is at least one row in this table. Google is not really turning much up for me on people doing this. Can anyone give me direction on this? Can I do a count based on a class name?
Here is the layout of my table:
<table id="editorRows">
...
<tbody class="editorRow">
<tr class="row1">
</tr>
<tr class="row2" style="display: none;">
</tr>
<tr class="row3" style="display:none;">
</tr>
</tbody>
</table>
A "row" in this case is the tag. Row 2 and 3 get dynamically showen based on options in row 1.
you can use $("#editorRows tr").length > 0

Resources