Attempting to get particular element that has dynamic xpath

Product Forums Katalon Studio
,
#1

I am unsure how to go about getting a particular element that will not always be in the same xpath location. Here is a snippet of HTML to explain what I am getting at.

> <div class="grid-canvas" style="height: 120px; width: 705px;">

<div class="ui-widget-content slick-row even" row="0" style="top:0px">
    <div class="slick-cell l0 r0 center"><span class="checkbox ui-corner-all"><span class="checked"></span></span>
    </div>
    <div class="slick-cell l1 r1" title=""><span class="rateCodeSpacer" style="width:10px"></span><span
            class="statusActive">EDITDUPRC</span></div>
    <div class="slick-cell l2 r2">H+P</div>
    <div class="slick-cell l3 r3" title=""></div>
    <div class="slick-cell l4 r4">Load Rates <br>$N/A</div>
    <div class="slick-cell l5 r5 center">2022-01-01 00:00:00 <br>N/A</div>
    <div class="slick-cell l6 r6 center" title=""></div>
    <div class="slick-cell l7 r7" title="">
        <form class="result-action" action="" method="post">
            <div class="ratecodes-action" style="display: block;"> <select name="action">
                    <option value="edit">Edit Rate Code</option>
                    <option value="duplicate-ratecode">Duplicate Rate Code</option>
                    <option value="editAllocationsRestrictions">Edit Availability</option>
                    <option value="manage-profile">Manage Rates</option>
                    <option value="add-child">Add Sub Rate Code</option>
                    <option value="room-map">Room Map</option>
                </select> <input type="hidden" name="rateCodeId" value="1617346"> <input type="submit" value="Go">
            </div>
            <div class="rates-action displayNone" style="display: none;"> <input
                    onclick="window.open('https://extranet.bookitdev.com/manage_rate_profile.php?rateCodeId=1617346');"
                    type="button" value="Manage Rates"> </div>
        </form>
    </div>
</div>
<div class="ui-widget-content slick-row odd" row="1" style="top:40px">
    <div class="slick-cell l0 r0 center" title=""><span class="checkbox ui-corner-all"><span
                class="checked"></span></span></div>
    <div class="slick-cell l1 r1" title=""><span class="rateCodeSpacer" style="width:10px"></span><span
            class="statusActive">AUTOTESTRE</span></div>
    <div class="slick-cell l2 r2">H+P</div>
    <div class="slick-cell l3 r3" title="Automated Test Base Rate Code">Automated Test Base Rate Code</div>
    <div class="slick-cell l4 r4">Load Rates <br>$N/A</div>
    <div class="slick-cell l5 r5 center" title="2022-01-01 00:00:00 N/A">2022-01-01 00:00:00 <br>N/A</div>
    <div class="slick-cell l6 r6 center" title=""></div>
    <div class="slick-cell l7 r7">
        <form class="result-action" action="" method="post">
            <div class="ratecodes-action" style="display: block;"> <select name="action">
                    <option value="edit">Edit Rate Code</option>
                    <option value="duplicate-ratecode">Duplicate Rate Code</option>
                    <option value="editAllocationsRestrictions">Edit Availability</option>
                    <option value="manage-profile">Manage Rates</option>
                    <option value="add-child">Add Sub Rate Code</option>
                    <option value="room-map">Room Map</option>
                </select> <input type="hidden" name="rateCodeId" value="1617345"> <input type="submit" value="Go">
            </div>
            <div class="rates-action displayNone" style="display: none;"> <input
                    onclick="window.open('https://extranet.bookitdev.com/manage_rate_profile.php?rateCodeId=1617345');"
                    type="button" value="Manage Rates"> </div>
        </form>
    </div>
</div>
<div class="ui-widget-content slick-row even" row="2" style="top:80px">
    <div class="slick-cell l0 r0 center" title=""><span class="checkbox ui-corner-all"><span
                class="checked"></span></span></div>
    <div class="slick-cell l1 r1" title=""><span class="rateCodeSpacer" style="width:0px"></span><span
            class="slick-group-toggle collapsed"></span><span class="statusActive">BASE</span></div>
    <div class="slick-cell l2 r2">H+P</div>
    <div class="slick-cell l3 r3" title="Migrated base rate inventory">Migrated base rate inventory</div>
    <div class="slick-cell l4 r4" title="">Load Rates <br>$96.00</div>
    <div class="slick-cell l5 r5 center" title="2015-01-27 00:00:00 N/A">2015-01-27 00:00:00 <br>N/A</div>
    <div class="slick-cell l6 r6 center" title="">2016-11-03 <br>N/A</div>
    <div class="slick-cell l7 r7" title="">
        <form class="result-action" action="" method="post">
            <div class="ratecodes-action" style="display: block;"> <select name="action">
                    <option value="edit">Edit Rate Code</option>
                    <option value="duplicate-ratecode">Duplicate Rate Code</option>
                    <option value="editAllocationsRestrictions">Edit Availability</option>
                    <option value="manage-profile">Manage Rates</option>
                    <option value="add-child">Add Sub Rate Code</option>
                    <option value="room-map">Room Map</option>
                </select> <input type="hidden" name="rateCodeId" value="147665"> <input type="submit" value="Go">
            </div>
            <div class="rates-action displayNone" style="display: none;"> <input
                    onclick="window.open('https://extranet.bookitdev.com/manage_rate_profile.php?rateCodeId=147665');"
                    type="button" value="Manage Rates"> </div>
        </form>
    </div>
</div>

The elements I am after (select option and Go button for ‘AUTOTESTRE’) currently has an xpath of //[@id=“results”]/div[5]/div/div[2]/div[8]/form/div[1]/select and //[@id=“results”]/div[5]/div/div[2]/div[8]/form/div[1]/input[2] respectively.

Now, where it is at (row in those divs is //*[@id=“results”]/div[5]/div/div[2] could be shifted up or down, so div[2] is dynamic. How can I make sure that I am always selecting those no matter it’s position?

#2

Like this:

//select[@name='action']
//input[@type='submit' and @value='Go']
#3

each row has their own select and input Go button. I don’t see that that helps

#4

Sorry, you will need to include a piece that looks for “AUTOTESTRE”:

//div[contains(@class, 'slick-cell') and .//span[text()='AUTOTESTRE']]/following-sibling::div//select[@name='action']
//div[contains(@class, 'slick-cell') and .//span[text()='AUTOTESTRE']]/following-sibling::div//input[@type='submit' and @value='Go']
#5

How would I go about doing that? I am relatively new to using Katalon. I should have mentioned that up front. Thanks for all the assistance you all are providing.

#6

Just use the xpath I mentioned. Are you using the Object Repository? Or are you handling element location yourself?

#7

I am using the Object Repository

#8

Then modify your two test objects, the one for the select, and one the for the button, with the xpaths from above:

select:

image
image1069×215 7.87 KB

button:

image
image1222×219 8.09 KB

#9

For those situations where I am wanting the ‘AUTOTESTRE’ to be any value determined by a variable and not use the Object Repository, should I be able to do something like this?

String rcxPathSelect = "//div[contains(@class, 'slick-cell') and .//span[text()='" + GlobalVariable.rateCodeName + "']]/following-sibling::div//select[@name='action']'"
String rcxPathGoBtn = "//div[contains(@class, 'slick-cell') and .//span[text()='" + GlobalVariable.rateCodeName + "']]/following-sibling::div//input[@type='submit' and @value='Go']"

TestObject rcSelectOptions = new TestObject("Rate Code Selection")
rcSelectOptions.addProperty("xpath", ConditionType.EQUALS, rcxPathSelect, true)

TestObject rcGoBtn = new TestObject("Go Button")
rcGoBtn.addProperty("xpath", ConditionType.EQUALS, rcxPathGoBtn, true)

WebUI.selectOptionByValue(rcSelectOptions, 'manage-profile', true)
WebUI.click(rcGoBtn)

If so, I am getting information that Katalon was unable to find the element.
Unable to find the element located by 'By.xpath: //div[contains(@class, 'slick-cell') and .//span[text()='AUTOTESTRE']]/following-sibling::div//select[@name='action']''. Please recheck the objects properties to make sure the desired element is located.

This is followed up by a Katalon error: Unable to select option by value 'manage-profile' of object 'Rate Code Selection' using regular expression (Root cause: com.kms.katalon.core.exception.StepFailedException: Unable to select option by value 'manage-profile' of object 'Rate Code Selection' using regular expression

I thought that doing that would be the same as if it were a static item I was using from the Object Repository when I did this:

WebUI.selectOptionByValue(findTestObject('Object Repository/Extranet Manage Rate Profiles_OR/Rate Code Selection'), 'manage-profile', true)
WebUI.click(findTestObject('Object Repository/Extranet Manage Rate Profiles_OR/Go Button'))
#10

You have an extra single quote in that xpath, at the very end:

String rcxPathSelect = "//div[contains(@class, 'slick-cell') and .//span[text()='" + GlobalVariable.rateCodeName + "']]/following-sibling::div//select[@name='action']'"

It would look like this:

String rcxPathSelect = "//div[contains(@class, 'slick-cell') and .//span[text()='" + GlobalVariable.rateCodeName + "']]/following-sibling::div//select[@name='action']"

#11

@Brandon_Hein thank you for that. I would have never seen that extra quote.

#12

Hi @dustin.lennon

Has @Brandon_Hein’s answer resolved the issue ? Can I ( or you can too ) mark this topic as resolved ?
So that people in the future would have an easier time searching for a solution.

Cheers !