How can I select a dynamically created/positioned button in a page in Selenium IDE?

StackOverflow https://stackoverflow.com/questions/22816918

  •  26-06-2023
  •  | 
  •  

Question

I have a page that contains a list of items and buttons. The position of each item is dynamic and the item I am looking for can be the 1st in the list, or the 100th. The button I need to push's ID changes based on where it is in the list. And the button name is the same for every item on the list. I tried to select based on the name, and it just clicked the first button in the list (Mine was the 11th that time). I'm including the HTML for the entire line. There is one part which I can identify, and that's the "QA GM 04012014 1424" part.

Can anyone help me click the correct button? "Start New Quote" is the button name. Here's the HTML:

<table class="controlLayout">
<tbody>
<tr id="section5_Row0" class="twControlTR">
<td class="sectionBodyCenterControl twControlTD " width="50%" valign="top" colspan="2" rowspan="1">
<input id="TBL_SELECTION_LIST_Table0" type="hidden" value="S^11"     Name="TBL_SELECTION_LIST_tw#local#items">
<div id="Table0-div" class="repeatingTable">
<table id="Table0" class="tableControlNoLabel twControl twTable" cellspacing="0">
<tbody>
<tr id="_Header" class="tableControlHeader twTableHeaderTR">
<tr id="Table0_0" class="tableControlDataRow evenRow twTableTR" style="display: none;">
<tr id="Table0_1" class="tableControlDataRow oddRow twTableTR" style="display: none;">
<tr id="Table0_2" class="tableControlDataRow evenRow twTableTR" style="display: none;">
<tr id="Table0_3" class="tableControlDataRow oddRow twTableTR" style="display: none;">
<tr id="Table0_4" class="tableControlDataRow evenRow twTableTR" style="display: none;">
<tr id="Table0_5" class="tableControlDataRow oddRow twTableTR" style="display: none;">
<tr id="Table0_6" class="tableControlDataRow evenRow twTableTR" style="display: none;">
<tr id="Table0_7" class="tableControlDataRow oddRow twTableTR" style="display: none;">
<tr id="Table0_8" class="tableControlDataRow evenRow twTableTR" style="display: none;">
<tr id="Table0_9" class="tableControlDataRow oddRow twTableTR" style="display: none;">
<tr id="Table0_10" class="tableControlDataRow evenRow twTableTR" style="display: none;">
<tr id="Table0_11" class="tableControlDataRow oddRow twTableTR selectedRow" style="display: table-    row;">
<td class="twTableTD" onclick="selectRow(this, 'single', false, 11, null, false);">
<td class="twTableTD" onclick="selectRow(this, 'single', false, 11, null, false);">
<div>
<div id="CustomHTML3_11" class="customHTML">
QA GM 04012014 1424 Item 1 Name
<div style="display:none;">52448-QA GM 04012014 1424 Item 1 Description-QA GM 04012014 1424 Item 1     Name-Hardware-ELECTRICAL-CORDS</div>
</div>
</div>
</td>
<td class="twTableTD" onclick="selectRow(this, 'single', false, 11, null, false);">
<td class="twTableTD" onclick="selectRow(this, 'single', false, 11, null, false);">
<td class="twTableTD" onclick="selectRow(this, 'single', false, 11, null, false);">
<td class="twTableTD" onclick="selectRow(this, 'single', false, 11, null, false);">
<td class="twTableTD" onclick="selectRow(this, 'single', false, 11, null, false);">
<td class="twTableTD" onclick="selectRow(this, 'single', false, 11, null, false);">
<td class="twTableTD" onclick="selectRow(this, 'single', false, 11, null, false);">
<td class="twTableTD" onclick="selectRow(this, 'single', false, 11, null, false);">
<div>
<div id="ButtonGroup4_11" class="buttonGroupNoLabel twControl twButtonGroup" align="right">
<button id="ButtonGroup4_Button0" class="layoutButton twButton ButtonGroup4_Button0" onclick="if     (isFormSubmitted(this, true)) { return false; } else { return true; }" name="ButtonGroup4#Button0"     type="submit">Start New Quote</button>
</div>
</div>
</td>
<td class="twTableTD" onclick="selectRow(this, 'single', false, 11, null, false);">
</tr>
<tr id="Table0_12" class="tableControlDataRow evenRow twTableTR" style="display: none;">
<tr id="Table0_13" class="tableControlDataRow oddRow twTableTR" style="display: none;">
<tr id="Table0_14" class="tableControlDataRow evenRow twTableTR" style="display: none;">
<tr id="Table0_15" class="tableControlDataRow oddRow twTableTR" style="display: none;">
<tr id="Table0_16" class="tableControlDataRow evenRow twTableTR" style="display: none;">
<tr id="Table0_17" class="tableControlDataRow oddRow twTableTR" style="display: none;">
<tr id="Table0_18" class="tableControlDataRow evenRow twTableTR" style="display: none;">
<tr id="Table0_19" class="tableControlDataRow oddRow twTableTR" style="display: none;">
<tr id="Table0_20" class="tableControlDataRow evenRow twTableTR" style="display: none;">
<tr id="Table0_21" class="tableControlDataRow oddRow twTableTR" style="display: none;">
<tr id="Table0_22" class="tableControlDataRow evenRow twTableTR" style="display: none;">
<tr id="Table0_23" class="tableControlDataRow oddRow twTableTR" style="display: none;">
<tr id="Table0_24" class="tableControlDataRow evenRow twTableTR" style="display: none;">
<tr id="Table0_25" class="tableControlDataRow oddRow twTableTR" style="display: none;">
<tr id="Table0_26" class="tableControlDataRow evenRow twTableTR" style="display: none;">
<tr id="Table0_27" class="tableControlDataRow oddRow twTableTR" style="display: none;">
<tr id="Table0_28" class="tableControlDataRow evenRow twTableTR" style="display: none;">
<tr id="Table0_29" class="tableControlDataRow oddRow twTableTR" style="display: none;">
<tr id="Table0_30" class="tableControlDataRow evenRow twTableTR" style="display: none;">
<tr id="Table0_31" class="tableControlDataRow oddRow twTableTR" style="display: none;">
<tr id="Table0_32" class="tableControlDataRow evenRow twTableTR" style="display: none;">
<tr id="Table0_33" class="tableControlDataRow oddRow twTableTR" style="display: none;">
<tr id="Table0_34" class="tableControlDataRow evenRow twTableTR" style="display: none;">
<tr id="Table0_35" class="tableControlDataRow oddRow twTableTR" style="display: none;">
</tbody>
</table>
</div>
<script type="text/javascript">
</td>
</tr>
</tbody>
</table>
</div>

Here's the HTML for the specific row it falls on:

<tr id="Table0_11" class="tableControlDataRow oddRow twTableTR selectedRow" style="display: table-    row;">
    <td class="twTableTD" onclick="selectRow(this, 'single', false, 11, null, false);">
    <td class="twTableTD" onclick="selectRow(this, 'single', false, 11, null, false);">
        <div>
            <div id="CustomHTML3_11" class="customHTML">
            QA GM 04012014 1424 Item 1 Name
            <div style="display:none;">52448-QA GM 04012014 1424 Item 1 Description-QA GM 04012014 1424 Item 1     Name-Hardware-ELECTRICAL-CORDS</div>
            </div>
        </div>
    </td>
    <td class="twTableTD" onclick="selectRow(this, 'single', false, 11, null, false);">
    <td class="twTableTD" onclick="selectRow(this, 'single', false, 11, null, false);">
    <td class="twTableTD" onclick="selectRow(this, 'single', false, 11, null, false);">
    <td class="twTableTD" onclick="selectRow(this, 'single', false, 11, null, false);">
    <td class="twTableTD" onclick="selectRow(this, 'single', false, 11, null, false);">
    <td class="twTableTD" onclick="selectRow(this, 'single', false, 11, null, false);">
    <td class="twTableTD" onclick="selectRow(this, 'single', false, 11, null, false);">
    <td class="twTableTD" onclick="selectRow(this, 'single', false, 11, null, false);">
        <div>
            <div id="ButtonGroup4_11" class="buttonGroupNoLabel twControl twButtonGroup" align="right">
            <button id="ButtonGroup4_Button0" class="layoutButton twButton ButtonGroup4_Button0" onclick="if     (isFormSubmitted(this, true)) { return false; } else { return true; }" name="ButtonGroup4#Button0"     type="submit">Start New Quote</button>
            </div>
        </div>
    </td>
    <td class="twTableTD" onclick="selectRow(this, 'single', false, 11, null, false);">
</tr>
Was it helpful?

Solution

Perhaps I'm oversimplifying this, but if Start New Quote appears only once in the page, using CSS to find the button element can be done with something like:

css = button:contains("Start New Quote")

Kindly let us know if this works.

EDIT:

I am thinking of other approaches right now, but if by any chance, the button's id is always ButtonGroup4_xx then you can probably use the following XPath:

//button[starts-with(@id, 'ButtonGroup4_')]

Let us know if this helps.

EDIT2:

This seems to be working on my end. Granted, it's dirty, but it works.

//div[contains(., 'QA GM 04012014 1424')]/parent::div/parent::div/parent::td/following-sibling::td[8]/div/div/button

This was tested using both Selenium IDE and the lxml library for Python and returns the button correctly.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top