How to click on the table cell for particular text - ruby

The following is the DOM details:
<div id: "abc_440"
<table class = "listtable" >
<tbody>
<tr>
<td id = "someid" >
<td class = 'someclass_item"> This is Text </td>
<td class = 'someclass_button">
< a > Add </a>
</td>
</tr>
</tbody>
</table>
</div>
I need to click on 'Add' for particular text at "This is Text". I have to use div with ID (abc_440)to locate the corresponding table as there are may divs with this same dom layout. but index at div ID (for example 440) keeps changing to random number. How do I handle it in general ?
Please help.

I think that what you want to do is very similar to the previous Watir question.
Given that the id is randomly generated, it does not sounds like a good way of finding the link. You will likely need to use the text of the same row.
Assuming that the "This is Text" is unique (as you said you want to find the Add link for it), you can find that td, go to the parent row and then get the link.
b.td(:text => 'This is Text').parent.link.click
If you need to ensure that the text is in the second column, then you can do:
b.trs.find{ |tr|
tr.td.exists? and tr.td(:index => 1).text == 'This is Text'
}.link.click
The tr.td.exists? is added in case some of your rows do not have any tds (example a header row), which would cause an exception when checking the second criteria.

Don't mix quotes in HTML tags. id: doesn't work. <td>s should rarely be empty. The Add button should be a button, not an <a>nchor element. Buttons only work in <form>s.
<form id="abc_440" action='someURI'> <!-- The handler for the button. -->
<table class="listtable">
<tbody>
<tr>
<td id = "someid">
<!-- What goes here? -->
</td>
<td class='someclass_item'>
This is Text
</td>
<td class='someclass_button'>
<button name='add'>Add</button>
</td>
</tr>
</tbody>
</table>
</form>
You should be able to find the button through its name attribute, add, and through the form's id attribute, abc_440. Who generates the ids?
Once you have the problem of finding the add button solved, and figuring out where the form's id comes from, please then stop using tables for formatting. There's no need for that. Learn about <form>s, <fieldset>s, <legend>s, and <label>s. I doubt you need the *some_id* part, the text part should probably be a <label>, and you can use CSS to format your <label>s as:
label {
width: 150px;
float: left;
}
fieldset p {
clear: left;
}

Related

Unable to click on Select link present in last column of web table

I want to search Seller and have to click on select link for selected one. When I type seller name, it shows only record for selected seller.
I tried with following code, its not working. Can anyone please help
cy.get('input[name="search"]',{ timeout: 10000 }).type(this.data1.vehicle1_seller1)
//cy.wait(6000)
Cypress.config('defaultCommandTimeout', 10000);
cy.get('td[class="span-3"] div').each(($el, index, $list) => {
if ($el.text().includes('STB002')) {
// cy.contains("Select").eq(index).click()
cy.get('.span-1-5 > div > a > span').contains('select').eq(index).click({force:true})
}
}
this is the DOM structure >
<table>
<tbody>
<tr class="even">
<td class="span-3">
<div title="06V001">06V001</div> == $0
</td>
<td>
<div title="06 Vauxhall Ormskirk">06 Vauxhall Ormskirk</div>
</td>
<td class="span-1-5">
<div>
<a id="link57" href="./wicket/page?7-1.-seller-table-body-rows-10-cells-3-cell-link">
<span>select</span>
</a>
</div>
</td>
</tr>
<tr class="odd">
</tr>
<tr class="even">
</tr>
</tbody>
</table>
The HTML table is set out in rows and cells, exactly as you see it on the screen.
Your test is searching for the cell containing the text, but really you want to search for the row containing the text, then get the select button of that row.
The basic test would be
cy.contains('tr', 'STB002')
.within(() => {
// now inside the row
cy.contains('span', 'select').click()
})
The next problem is the car STB002 isn't on the first page, so you won't find it straight after loading.
Maybe use the search box to load that row (as you have in one screen-shot). I can't say what that code is, because the DOM picture doesn't include the search box.

Passing computed string to x-teleport in alpine.js

I want to append an element to a specific element when the user clicks the button. The scenario goes like this. Is there another way to deal with that kind of problem?
<table>
<tbody>
<tr>
<td>
One
<button>delete</button>
<button x-on:click="edit(passIdToFunc)">edit</button>
</td>
</tr>
<tr id="one" style="display: hidden"></tr>
<!-- append x-teleport dom node to here when current value is id = one -->
<tr>Two</tr>
<tr id="two" style="display: hidden"></tr>
<tr>Three</tr>
<tr id="three" style="display: hidden"></tr>
...
</tbody>
</table>
<!--
For the initial render, or if there is no table data,
I would like to append it to somewhere else with display none.
-->
<template x-teleport="computedString">
...
</template>
This looks like the wrong usage for x-teleport, though it's not clear from the example where you are teleporting to. You can just use x-show to toggle display:none if that's what you're looking for.

How to identify dynamically generated image id's in a table row by using nightwatch JS

I have a table in that each row have some information. In one of the rows, images are available and also they are clickable. I need to click one of the image which has dynamic id.
Please refer below source code
<tr id="tblRow_2">
<td height="25" colspan="8" style="border: none; text-align: right">
<input id="PPPayNow_0" type="image" src="/Client/images/paynowprepay.gif" onclick="pppayClick(0,35);"/>
<input id="PayNow_0" type="image" src="/Client/images/paynow.gif" onclick="payClick(0,35);" alt=""/>
</td>
<td></td>
<td id="paymentTotal_0" style="text-align:right; font-size:medium; font-weight:bold; color:Black; border:none"></td>
I have tried CSS selectors & x-path but no luck.
Presuming the onclick attribute values are constantly- they are js functions after all, so should be, this is how you can select the 1st input:
//td/input[starts-with(#onclick, "pppayClick")]
And this is for the 2nd:
//td/input[starts-with(#onclick, "payClick")]
You could do the same with the id attribute, if only the prefixes (the _0 part) change.
I solved this problem by using X-Path preceding siblings and x-path string functions for preceding Axes i.e. number string-length(string?) it returns the number of characters in the string . number string-length(string?) => this function I used for identifying input tag which will be enable after clicking checkbox.
solution is :
browser.useXpath().click('//*[#id="tableId"]/tbody/tr/td[3][string-length(text()) > 0]/preceding::td[2]/input[starts-with(#id, "PayNow")]');

2 forms - Credit Card and Checking Account - 2 identical xpaths for one checkbox - automation will not click the checkbox

here is the xpath I am using
//tr[#id = 'inputSavePaymentAccounts']/descendant::input[#type = 'checkbox' and #name = 'payAck' and #tabindex = '10'
here is how I can get it to check the checkbox
jQuery('.payAck').prop('checked', true)
here is the checking account html that is inside an iframe
<tr id="inputSavePaymentAccounts" class="savePaymentAccounts" style="display: table-row;">
<td class="addCCLabel" style="padding-top: 15px;">Save this Payment Method</td>
<td style="padding-top: 15px;">
<input class="payAck" type="checkbox" onchange="friendlyNameShow()" name="payAck" tabindex="10">
</td>
</tr>
here is the credit card html that is inside the same iframe
<tr id="inputSavePaymentAccounts" class="savePaymentAccounts" style="display: table-row;">
<td class="addCCLabel" style="padding-top: 15px;">Save this Payment Method</td>
<td style="padding-top: 15px;">
<input class="payAck" type="checkbox" onchange="friendlyNameShow()" name="payAck" tabindex="25">
</td>
</tr>
The main issue is that when i use:
jQuery('.payAck').prop('checked', true)
it checkmarks the checkbox however, at the time the checkbox is checked I am suppose to see a text box display, which is not happening with the above jquery. I was hoping the execution of xpath would solve this
see these for a more clearer picture
image of checkbox http://prnt.sc/c12b1p
image of checkbox when it is checked with text box displaying (need this to happen) http://prnt.sc/c12b7q
First of all, I would recommend you remove the inline javascript. Your primary selector in this case is a class and the class is assigned to 2 elements (at least from what I see in your example). When you check the checkbox using jQuery with the class selector, it is going to trigger all the elements that belong to that class and I don't think that is what you intend to do. Also, using click() will work, but that will cause friendlyNameShow() to be called twice and you will need to check the state of the checkbox since you are not explicitly checking/un-checking it. Try using and Id instead.

Access cell in table and click

I am writing a script to automate certain tasks. I am at a point where I have a table and hyperlinked name written in its second row, first column ([2][1]). I want to access that cell and click on it to go to intended page. Structure of the page looks like this:
<table id="listViewTable" class="listview" width="100%" cellspacing="0" cellpadding="0" border="0" style="margin-top: 0px;">
<tbody></tbody>
<tbody id="lvTred">
<tr id="1381137000000078119" class="tdout">
<td width="10" data-cid="dummy"></td>
<td class="lvCB" data-cid="dummy"></td>
<td>
<a id="listView_1381137000000078119" class="link" href="/crm/EntityInfo.do?id=1381137000000078119&module=Potentials&relCntId=1381137000000078117" data-params="{"relContactId":"1381137000000078117","module":"Potentials",…id":"1381137000000075541","recordNum":"1","lookback":"true"}" data-cid="detailView"></a>
</td>
I have successfully accessed table with id 'listviewTable' but not able to access cell with id 'listView_1381137000000078119' which is at location [2][1] in table. I did something like this:
cell = table.cell(:id, 'listView_1381137000000078119')
where table is actual table with mentioned id. Can anyone help?
Based on your HTML, there is no <td> tag with an id attribute of listView_1381137000000078119. However, there is an <a> tag with an id attribute of listView_1381137000000078119.
puts b.table.td(:id, 'listView_1381137000000078119').exists?
puts b.table.link(:id, 'listView_1381137000000078119').exists?
#=> false
#=> true

Resources