Reading Xpath with successive /../

theo.retos · November 18, 2021, 5:59pm

I used Relative xpath helper chrome extension to find the relative xpath between two web items. The first has identifiable text, the latter is an empty box in a grid that needs to be completed in the row of the identifiable text. The grid is dynamic. I want to use the text item as the search point to then find the empty box and click on the box, so I want to program Katalon to find the box using the text item. I can’t figure out what to tell the program to look for because I don’t know what the successive /…/…/ means.

Ideas?

Item 1 xpath - Empty Box

//DIV[@class=‘slick-cell l5 r5 hasEditor selected row-selected row-selected-top row-selected-bottom’]

Item 2 xpath - Text Item in row used to find empty box

//SPAN[@title=‘1020Q, 02-Planning, 60331 - Miscellaneous Expense, ***’][text()=‘1020Q, 02-Planning, 60331 - Miscellaneous Expense, ***’]

Relative xpath

//SPAN[@title=‘1020Q, 02-Planning, 60331 - Miscellaneous Expense, ***’][text()=‘1020Q, 02-Planning, 60331 - Miscellaneous Expense, ***’]/…/…/…/…/…/…//DIV[@class=‘slick-cell l5 r5 hasEditor selected row-selected row-selected-top row-selected-bottom’]

Code in Katalon to Locate Object
def rawXpath = ‘’’(.//*[normalize-space(text()) and normalize-space(.)=‘1020Q, 02-Planning, 60331 - Miscellaneous Expense, ***’])[1]/following::div[]’’’

TestObject dynamicObject = new TestObject(‘dynamicObject’).addProperty(‘xpath’, ConditionType.EQUALS, rawXpath, true)

blnobjFound = WebUI.verifyElementPresent(dynamicObject, 5, FailureHandling.OPTIONAL)

println(blnobjFound)

WebUI.click(dynamicObject)

grylion54 · November 18, 2021, 9:36pm

I use the symbol, /../ within an element’s xpath as going up a level in the HTML, equivalent to the xpath command, “parent”. Note that the symbol has two periods.

To show code in its proper form, you should put triple “slanted quotes” (found above the TAB key, on the same key as the tilde) above and below your code, like ```

kazurayam · November 18, 2021, 11:07pm

kazurayam · November 18, 2021, 11:11pm

I think that /.../.../ is NOT a valid XPath syntax.

The official XPath 1.0 Specification includes “Abbreviated Syntax” at XML Path Language (XPath)

I could not find ... in the document. Is it .. or ...? — these are quite different.

kazurayam · November 18, 2021, 11:20pm

Please share your target HTML source code, full code. Provided with the HTML source, we can discuss about XPath to locate elements in it. Otherwise, impossible.

theo.retos · November 23, 2021, 4:05am

Not sure why that autocorrected, the relative xpath is /…/ with two dots only:

//SPAN[@title='1020Q, 02-Planning, 60331 - Miscellaneous Expense, ***'][text()='1020Q, 02-Planning, 60331 - Miscellaneous Expense, ***']/../../../../../..//DIV[@class='slick-cell l5 r5 hasEditor selected row-selected row-selected-top row-selected-bottom']

HTML Source Code, trying to get from top span 1020Q to the final div l5 r5. The final div has no unique attributes. It’s an empty box that appears in the same row as the span:

<div class="slick-cell l1 r1 readonly readonly selected row-selected row-selected-top row-selected-bottom active"><span style="display:inline-block;height:1px;width:45px"></span><button role="presentation" type="button" tabindex="-1" aria-hidden="true" class="toggle leaf"><span class="icon12"></span></button><span title="1020Q, 02-Planning, 60331 - Miscellaneous Expense, ***">1020Q, 02-Planning, 60331 - Miscellaneous Expense, ***</span></div>
<div class="slick-cell l2 r2 readonly slick-grid-right-edge readonly selected row-selected row-selected-top row-selected-bottom">
  <div title="USD" style="overflow: hidden; text-align: left;">USD</div>
</div>
</div>
<div class="ui-widget-content slick-row even" style="top:120px">
  <div class="slick-cell l0 r0 hasEditor">
    <div class="ActionLinkButton" aria-disabled="false" style="display: block;" role="button" title="Actions"> <span class="pv12MenuAffordanceIcon"><span class="icon12"></span></span><span class="ui-button-text " style=""></span></div>
  </div>
  <div class="slick-cell l1 r1 readonly readonly"><span style="display:inline-block;height:1px;width:15px"></span><button role="presentation" type="button" tabindex="-1" aria-hidden="true" class="pv-formatter hierarchy-ctrl"><span class="icon12"></span></button><span title="Type: Non-Labor OpEx">Type: Non-Labor OpEx</span></div>
  <div class="slick-cell l2 r2 readonly slick-grid-right-edge readonly">
    <div title="USD" style="overflow: hidden; text-align: left;">USD</div>
  </div>
</div>
<div class="ui-widget-content slick-row odd" style="top:150px">
  <div class="slick-cell l0 r0 hasEditor">
    <div class="ActionLinkButton" aria-disabled="false" style="display: block;" role="button" title="Actions"> <span class="pv12MenuAffordanceIcon"><span class="icon12"></span></span><span class="ui-button-text " style=""></span></div>
  </div>
  <div class="slick-cell l1 r1 readonly readonly"><span style="display:inline-block;height:1px;width:30px"></span><button role="presentation" type="button" tabindex="-1" aria-hidden="true" class="pv-formatter hierarchy-ctrl"><span class="icon12"></span></button><span title="Account: Advertising">Account: Advertising</span></div>
  <div class="slick-cell l2 r2 readonly slick-grid-right-edge readonly">
    <div title="USD" style="overflow: hidden; text-align: left;">USD</div>
  </div>
</div>
<div class="ui-widget-content slick-row even" style="top:60px">
  <div class="slick-cell l0 r0 hasEditor">
    <div class="ActionLinkButton" aria-disabled="false" style="display: block;" role="button" title="Actions"> <span class="pv12MenuAffordanceIcon"><span class="icon12"></span></span><span class="ui-button-text " style=""></span></div>
  </div>
  <div class="slick-cell l1 r1 readonly readonly"><span style="display:inline-block;height:1px;width:30px"></span><button role="presentation" type="button" tabindex="-1" aria-hidden="true" class="pv-formatter hierarchy-ctrl"><span class="icon12"></span></button><span title="Account: Miscellaneous-CAP">Account: Miscellaneous-CAP</span></div>
  <div class="slick-cell l2 r2 readonly slick-grid-right-edge readonly">
    <div title="USD" style="overflow: hidden; text-align: left;">USD</div>
  </div>
</div>
<div class="ui-widget-content slick-row even" style="top:180px">
  <div class="slick-cell l0 r0 hasEditor">
    <div class="ActionLinkButton" aria-disabled="false" style="display: block;" role="button" title="Actions"> <span class="pv12MenuAffordanceIcon"><span class="icon12"></span></span><span class="ui-button-text " style=""></span></div>
  </div>
  <div class="slick-cell l1 r1 readonly readonly"><span style="display:inline-block;height:1px;width:45px"></span><button role="presentation" type="button" tabindex="-1" aria-hidden="true" class="toggle leaf"><span class="icon12"></span></button><span title="1607Q, 03-Execution, Other GL Code, ***">1607Q, 03-Execution, Other GL Code, ***</span></div>
  <div class="slick-cell l2 r2 readonly slick-grid-right-edge readonly">
    <div title="USD" style="overflow: hidden; text-align: left;">USD</div>
  </div>
</div>
</div>
</div>
</div>
<div class="slick-pane slick-pane-top slick-pane-right" tabindex="0" style="top: 32px; height: 796px; left: 410px; width: 1508px;">
  <div class="ui-state-default slick-headerrow" style="display: none; width: 1508px;">
    <div style="display: block; height: 1px; position: absolute; top: 0px; left: 0px; width: 1210px;"></div>
    <div class="slick-headerrow-columns slick-headerrow-columns-right" style="width: 800px;"></div>
  </div>
  <div class="ui-state-default slick-top-panel-scroller" style="display: none;">
    <div class="slick-top-panel" style="width:10000px"></div>
  </div>
  <div class="slick-viewport slick-viewport-top slick-viewport-right" tabindex="0" hidefocus="" style="overflow: auto; height: 796px; width: 1508px;">
    <div class="grid-canvas grid-canvas-top grid-canvas-right" tabindex="0" hidefocus="" style="height: 779px; width: 800px;">
      <div class="ui-widget-content slick-row even" style="top:0px">
        <div class="slick-cell l3 r3 readonly readonly">
          <div title="" style="overflow: hidden; text-align: left;"></div>
        </div>
        <div class="slick-cell l4 r4 hasEditor readonly">
          <div title="" style="overflow: hidden; text-align: right;"></div>
        </div>
        <div class="slick-cell l5 r5 hasEditor readonly">
          <div title="" style="overflow: hidden; text-align: right;"></div>
        </div>

kazurayam · November 23, 2021, 4:21am

Your HTML code contains a lot of unnecessary </div> tags.

For example in the 4th line contains an unnecessary </div>.

<div class="slick-cell l1 r1 readonly readonly selected row-selected row-selected-top row-selected-bottom active"><span style="display:inline-block;height:1px;width:45px"></span><button role="presentation" type="button" tabindex="-1" aria-hidden="true" class="toggle leaf"><span class="icon12"></span></button><span title="1020Q, 02-Planning, 60331 - Miscellaneous Expense, ***">1020Q, 02-Planning, 60331 - Miscellaneous Expense, ***</span></div>
<div class="slick-cell l2 r2 readonly slick-grid-right-edge readonly selected row-selected row-selected-top row-selected-bottom">
  <div title="USD" style="overflow: hidden; text-align: left;">USD</div>
</div>
</div>   <!-- WHAT IS THIS? -->

and at the line 41-44, there are a lot of unnecessary </div>.

        </div>   <!-- WHAT IS THIS? -->
        </div>   <!-- WHAT IS THIS? -->
        </div>   <!-- WHAT IS THIS? -->
        </div>   <!-- WHAT IS THIS? -->

I can not create a test project that works on my local machine with this untidy HTML.

I am not able to have any idea about your issue.

theo.retos · November 25, 2021, 5:47pm

This is the code for the entire container, I believe. Like I said, I’m new to Katalon and trying to figure out how to move through this grid from the defined section 1020Q to the box in column 2021.

<div id="detail-grid" class="gridContainer container-widget border-box-sized border-layout-center grid-driver slickgrid_359256 ui-widget" layout="border-layout" style="min-height: 1px; min-width: 1px; width: 1920px; height: 829px; overflow: hidden; outline: 0px;">
  <div tabindex="0" hidefocus="" style="position:fixed;width:0;height:0;top:0;left:0;outline:0;"></div>
  <div class="slick-pane slick-pane-header slick-pane-left" tabindex="0" style="width: 410px;">
    <div class="ui-state-default slick-header slick-header-left">
      <div class="slick-header-columns slick-header-columns-left" style="left: -1000px; width: 1410px;" unselectable="on">
        <div class="ui-state-default slick-header-column pv-header-depth-0" id="slickgrid_359256ActionMenuInput" title="" style="width: 30px;"><span class="slick-column-name"></span>
          <div class="slick-resizable-handle"></div>
        </div>
        <div class="ui-state-default slick-header-column pv-header-depth-0" id="slickgrid_359256Description" title="Click to expand/collapse; Ctrl+Click to expand one level; Ctrl+Shift+Click to collapse one level" style="width: 300px;"><button role="presentation" type="button" tabindex="-1" aria-hidden="true" class="pv-formatter hierarchy-ctrl pv-header-plugin" style="display: inline-block;"><span class="icon12"></span></button><button role="presentation" type="button" tabindex="-1" aria-hidden="true" class="pv-formatter hierarchy-ctrl pv-header-plugin" collapsed="collapsed" style="display: none;"><span class="icon12"></span></button><span class="slick-column-name">Description</span>
          <div class="slick-resizable-handle"></div>
        </div>
        <div class="ui-state-default slick-header-column pv-header-depth-0" id="slickgrid_359256Measures" title="" style="width: 80px;"><span class="slick-column-name">Measures</span>
          <div class="slick-header-menubutton" style="display: none;">
            <div class="dropdown-affordance">▼</div>
          </div>
          <div class="slick-resizable-handle"></div>
        </div>
      </div>
    </div>
  </div>
  <div class="slick-pane slick-pane-header slick-pane-right" tabindex="0" style="left: 410px; width: 1508px;">
    <div class="ui-state-default slick-header slick-header-right">
      <div class="slick-header-columns slick-header-columns-right" style="left: -1000px; width: 3345px;" unselectable="on">
        <div class="ui-state-default slick-header-column pv-header-depth-0" id="slickgrid_359256Note" title="" style="width: 80px;"><span class="slick-column-name">Line Notes</span>
          <div class="slick-header-menubutton" style="display: none;">
            <div class="dropdown-affordance">▼</div>
          </div>
          <div class="slick-resizable-handle"></div>
        </div>
        <div class="ui-state-default slick-header-column pv-header-depth-0 right-align" id="slickgrid_359256|Year|2020" title="" period-number="2020" style="width: 80px; background: lightsteelblue;"><span class="slick-column-name" style="background: lightsteelblue;">2020</span>
          <div class="slick-resizable-handle"></div>
        </div>
        <div class="ui-state-default slick-header-column pv-header-depth-0 right-align" id="slickgrid_359256|Year|2021" title="" period-number="2021" style="width: 80px;"><span class="slick-column-name">2021</span>
          <div class="slick-resizable-handle"></div>
        </div>
        <div class="ui-state-default slick-header-column pv-header-depth-0 right-align" id="slickgrid_359256|Year|2022" title="" period-number="2022" style="width: 80px;"><span class="slick-column-name">2022</span>
          <div class="slick-resizable-handle"></div>
        </div>
        <div class="ui-state-default slick-header-column pv-header-depth-0 right-align" id="slickgrid_359256|Year|2023" title="" period-number="2023" style="width: 80px;"><span class="slick-column-name">2023</span>
          <div class="slick-resizable-handle"></div>
        </div>
        <div class="ui-state-default slick-header-column pv-header-depth-0 right-align" id="slickgrid_359256|Year|2024" title="" period-number="2024" style="width: 80px;"><span class="slick-column-name">2024</span>
          <div class="slick-resizable-handle"></div>
        </div>
        <div class="ui-state-default slick-header-column pv-header-depth-0 right-align" id="slickgrid_359256|Year|2025" title="" period-number="2025" style="width: 80px;"><span class="slick-column-name">2025</span>
          <div class="slick-resizable-handle"></div>
        </div>
        <div class="ui-state-default slick-header-column pv-header-depth-0 right-align" id="slickgrid_359256|Year|2026" title="" period-number="2026" style="width: 80px;"><span class="slick-column-name">2026</span>
          <div class="slick-resizable-handle"></div>
        </div>
        <div class="ui-state-default slick-header-column pv-header-depth-0 right-align" id="slickgrid_359256|Year|2027" title="" period-number="2027" style="width: 80px;"><span class="slick-column-name">2027</span>
          <div class="slick-resizable-handle"></div>
        </div>
        <div class="ui-state-default slick-header-column pv-header-depth-0 right-align" id="slickgrid_359256|Summary|0" title="" qualified-period-key="S0" period-number="0" timescale="S" style="width: 80px;"><span class="slick-column-name">Total</span>
          <div class="slick-resizable-handle"></div>
        </div>
      </div>
    </div>
  </div>
  <div class="slick-pane slick-pane-top slick-pane-left" tabindex="0" style="top: 32px; height: 796px; width: 410px;">
    <div class="ui-state-default slick-headerrow" style="display: none; width: 410px;">
      <div style="display: block; height: 1px; position: absolute; top: 0px; left: 0px; width: 1210px;"></div>
      <div class="slick-headerrow-columns slick-headerrow-columns-left" style="width: 410px;"></div>
    </div>
    <div class="ui-state-default slick-top-panel-scroller" style="display: none;">
      <div class="slick-top-panel" style="width:10000px"></div>
    </div>
    <div class="slick-viewport slick-viewport-top slick-viewport-left" tabindex="0" hidefocus="" style="overflow: scroll hidden; height: 796px; width: 410px;">
      <div class="grid-canvas grid-canvas-top grid-canvas-left" tabindex="0" hidefocus="" style="height: 779px; width: 410px;">
        <div class="ui-widget-content slick-row even" style="top:0px">
          <div class="slick-cell l0 r0 hasEditor">
            <div class="ActionLinkButton" aria-disabled="false" style="display: block;" role="button" title="Actions"> <span class="pv12MenuAffordanceIcon"><span class="icon12"></span></span><span class="ui-button-text " style=""></span></div>
          </div>
          <div class="slick-cell l1 r1 readonly readonly"><span style="display:inline-block;height:1px;width:0px"></span><button role="presentation" type="button" tabindex="-1" aria-hidden="true" class="pv-formatter hierarchy-ctrl"><span class="icon12"></span></button><span title="Initiative: PV 2021 Auto KMcSQGK Initiative 1">Initiative: PV 2021 Auto KMcSQGK Initiative 1</span></div>
          <div class="slick-cell l2 r2 readonly slick-grid-right-edge readonly">
            <div title="USD" style="overflow: hidden; text-align: left;">USD</div>
          </div>
        </div>
        <div class="ui-widget-content slick-row odd" style="top:30px">
          <div class="slick-cell l0 r0 hasEditor">
            <div class="ActionLinkButton" aria-disabled="false" style="display: block;" role="button" title="Actions"> <span class="pv12MenuAffordanceIcon"><span class="icon12"></span></span><span class="ui-button-text " style=""></span></div>
          </div>
          <div class="slick-cell l1 r1 readonly readonly"><span style="display:inline-block;height:1px;width:15px"></span><button role="presentation" type="button" tabindex="-1" aria-hidden="true" class="pv-formatter hierarchy-ctrl"><span class="icon12"></span></button><span title="Type: Non-Labor CapEx">Type: Non-Labor CapEx</span></div>
          <div class="slick-cell l2 r2 readonly slick-grid-right-edge readonly">
            <div title="USD" style="overflow: hidden; text-align: left;">USD</div>
          </div>
        </div>
        <div class="ui-widget-content slick-row odd active" style="top:90px">
          <div class="slick-cell l0 r0 hasEditor selected row-selected row-selected-top row-selected-bottom row-selected-left">
            <div class="ActionLinkButton" aria-disabled="false" style="display: block;" role="button" title="Actions"> <span class="pv12MenuAffordanceIcon"><span class="icon12"></span></span><span class="ui-button-text " style=""></span></div>
          </div>
          <div class="slick-cell l1 r1 readonly readonly active selected row-selected row-selected-top row-selected-bottom"><span style="display:inline-block;height:1px;width:45px"></span><button role="presentation" type="button" tabindex="-1" aria-hidden="true" class="toggle leaf"><span class="icon12"></span></button><span title="1020Q, 02-Planning, 60331 - Miscellaneous Expense, ***">1020Q, 02-Planning, 60331 - Miscellaneous Expense, ***</span></div>
          <div class="slick-cell l2 r2 readonly slick-grid-right-edge readonly selected row-selected row-selected-top row-selected-bottom">
            <div title="USD" style="overflow: hidden; text-align: left;">USD</div>
          </div>
        </div>
        <div class="ui-widget-content slick-row even" style="top:120px">
          <div class="slick-cell l0 r0 hasEditor">
            <div class="ActionLinkButton" aria-disabled="false" style="display: block;" role="button" title="Actions"> <span class="pv12MenuAffordanceIcon"><span class="icon12"></span></span><span class="ui-button-text " style=""></span></div>
          </div>
          <div class="slick-cell l1 r1 readonly readonly"><span style="display:inline-block;height:1px;width:15px"></span><button role="presentation" type="button" tabindex="-1" aria-hidden="true" class="pv-formatter hierarchy-ctrl"><span class="icon12"></span></button><span title="Type: Non-Labor OpEx">Type: Non-Labor OpEx</span></div>
          <div class="slick-cell l2 r2 readonly slick-grid-right-edge readonly">
            <div title="USD" style="overflow: hidden; text-align: left;">USD</div>
          </div>
        </div>
        <div class="ui-widget-content slick-row odd" style="top:150px">
          <div class="slick-cell l0 r0 hasEditor">
            <div class="ActionLinkButton" aria-disabled="false" style="display: block;" role="button" title="Actions"> <span class="pv12MenuAffordanceIcon"><span class="icon12"></span></span><span class="ui-button-text " style=""></span></div>
          </div>
          <div class="slick-cell l1 r1 readonly readonly"><span style="display:inline-block;height:1px;width:30px"></span><button role="presentation" type="button" tabindex="-1" aria-hidden="true" class="pv-formatter hierarchy-ctrl"><span class="icon12"></span></button><span title="Account: Advertising">Account: Advertising</span></div>
          <div class="slick-cell l2 r2 readonly slick-grid-right-edge readonly">
            <div title="USD" style="overflow: hidden; text-align: left;">USD</div>
          </div>
        </div>
        <div class="ui-widget-content slick-row even" style="top:60px">
          <div class="slick-cell l0 r0 hasEditor">
            <div class="ActionLinkButton" aria-disabled="false" style="display: block;" role="button" title="Actions"> <span class="pv12MenuAffordanceIcon"><span class="icon12"></span></span><span class="ui-button-text " style=""></span></div>
          </div>
          <div class="slick-cell l1 r1 readonly readonly"><span style="display:inline-block;height:1px;width:30px"></span><button role="presentation" type="button" tabindex="-1" aria-hidden="true" class="pv-formatter hierarchy-ctrl"><span class="icon12"></span></button><span title="Account: Miscellaneous-CAP">Account: Miscellaneous-CAP</span></div>
          <div class="slick-cell l2 r2 readonly slick-grid-right-edge readonly">
            <div title="USD" style="overflow: hidden; text-align: left;">USD</div>
          </div>
        </div>
        <div class="ui-widget-content slick-row even" style="top:180px">
          <div class="slick-cell l0 r0 hasEditor">
            <div class="ActionLinkButton" aria-disabled="false" style="display: block;" role="button" title="Actions"> <span class="pv12MenuAffordanceIcon"><span class="icon12"></span></span><span class="ui-button-text " style=""></span></div>
          </div>
          <div class="slick-cell l1 r1 readonly readonly"><span style="display:inline-block;height:1px;width:45px"></span><button role="presentation" type="button" tabindex="-1" aria-hidden="true" class="toggle leaf"><span class="icon12"></span></button><span title="1607Q, 03-Execution, Other GL Code, ***">1607Q, 03-Execution, Other GL Code, ***</span></div>
          <div class="slick-cell l2 r2 readonly slick-grid-right-edge readonly">
            <div title="USD" style="overflow: hidden; text-align: left;">USD</div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="slick-pane slick-pane-top slick-pane-right" tabindex="0" style="top: 32px; height: 796px; left: 410px; width: 1508px;">
    <div class="ui-state-default slick-headerrow" style="display: none; width: 1508px;">
      <div style="display: block; height: 1px; position: absolute; top: 0px; left: 0px; width: 1210px;"></div>
      <div class="slick-headerrow-columns slick-headerrow-columns-right" style="width: 800px;"></div>
    </div>
    <div class="ui-state-default slick-top-panel-scroller" style="display: none;">
      <div class="slick-top-panel" style="width:10000px"></div>
    </div>
    <div class="slick-viewport slick-viewport-top slick-viewport-right" tabindex="0" hidefocus="" style="overflow: auto; height: 796px; width: 1508px;">
      <div class="grid-canvas grid-canvas-top grid-canvas-right" tabindex="0" hidefocus="" style="height: 779px; width: 800px;">
        <div class="ui-widget-content slick-row even" style="top:0px">
          <div class="slick-cell l3 r3 readonly readonly">
            <div title="" style="overflow: hidden; text-align: left;"></div>
          </div>
          <div class="slick-cell l4 r4 hasEditor readonly">
            <div title="" style="overflow: hidden; text-align: right;"></div>
          </div>
          <div class="slick-cell l5 r5 hasEditor readonly">
            <div title="" style="overflow: hidden; text-align: right;"></div>
          </div>
          <div class="slick-cell l6 r6 hasEditor readonly">
            <div title="" style="overflow: hidden; text-align: right;"></div>
          </div>
          <div class="slick-cell l7 r7 hasEditor readonly">
            <div title="" style="overflow: hidden; text-align: right;"></div>
          </div>
          <div class="slick-cell l8 r8 hasEditor readonly">
            <div title="" style="overflow: hidden; text-align: right;"></div>
          </div>
          <div class="slick-cell l9 r9 hasEditor readonly">
            <div title="" style="overflow: hidden; text-align: right;"></div>
          </div>
          <div class="slick-cell l10 r10 hasEditor readonly">
            <div title="" style="overflow: hidden; text-align: right;"></div>
          </div>
          <div class="slick-cell l11 r11 hasEditor readonly">
            <div title="" style="overflow: hidden; text-align: right;"></div>
          </div>
          <div class="slick-cell l12 r12 readonly slick-grid-right-edge readonly">
            <div title="" style="overflow: hidden; text-align: right;"></div>
          </div>
        </div>
        <div class="ui-widget-content slick-row odd" style="top:30px">
          <div class="slick-cell l3 r3 readonly readonly">
            <div title="" style="overflow: hidden; text-align: left;"></div>
          </div>
          <div class="slick-cell l4 r4 hasEditor readonly">
            <div title="" style="overflow: hidden; text-align: right;"></div>
          </div>
          <div class="slick-cell l5 r5 hasEditor readonly">
            <div title="" style="overflow: hidden; text-align: right;"></div>
          </div>
          <div class="slick-cell l6 r6 hasEditor readonly">
            <div title="" style="overflow: hidden; text-align: right;"></div>
          </div>
          <div class="slick-cell l7 r7 hasEditor readonly">
            <div title="" style="overflow: hidden; text-align: right;"></div>
          </div>
          <div class="slick-cell l8 r8 hasEditor readonly">
            <div title="" style="overflow: hidden; text-align: right;"></div>
          </div>
          <div class="slick-cell l9 r9 hasEditor readonly">
            <div title="" style="overflow: hidden; text-align: right;"></div>
          </div>
          <div class="slick-cell l10 r10 hasEditor readonly">
            <div title="" style="overflow: hidden; text-align: right;"></div>
          </div>
          <div class="slick-cell l11 r11 hasEditor readonly">
            <div title="" style="overflow: hidden; text-align: right;"></div>
          </div>
          <div class="slick-cell l12 r12 readonly slick-grid-right-edge readonly">
            <div title="" style="overflow: hidden; text-align: right;"></div>
          </div>
        </div>
        <div class="ui-widget-content slick-row odd active" style="top:90px">
          <div class="slick-cell l3 r3 readonly readonly selected row-selected row-selected-top row-selected-bottom">
            <div title="" style="overflow: hidden; text-align: left;"></div>
          </div>
          <div class="slick-cell l4 r4 hasEditor readonly selected row-selected row-selected-top row-selected-bottom">
            <div title="" style="overflow: hidden; text-align: right;"></div>
          </div>
          <div class="slick-cell l5 r5 hasEditor selected row-selected row-selected-top row-selected-bottom">
            <div title="" style="overflow: hidden; text-align: right;"></div>
          </div>
          <div class="slick-cell l6 r6 hasEditor selected row-selected row-selected-top row-selected-bottom">
            <div title="" style="overflow: hidden; text-align: right;"></div>
          </div>
          <div class="slick-cell l7 r7 hasEditor selected row-selected row-selected-top row-selected-bottom">
            <div title="" style="overflow: hidden; text-align: right;"></div>
          </div>
          <div class="slick-cell l8 r8 hasEditor selected row-selected row-selected-top row-selected-bottom">
            <div title="" style="overflow: hidden; text-align: right;"></div>
          </div>
          <div class="slick-cell l9 r9 hasEditor selected row-selected row-selected-top row-selected-bottom">
            <div title="" style="overflow: hidden; text-align: right;"></div>
          </div>
          <div class="slick-cell l10 r10 hasEditor selected row-selected row-selected-top row-selected-bottom">
            <div title="" style="overflow: hidden; text-align: right;"></div>
          </div>
          <div class="slick-cell l11 r11 hasEditor selected row-selected row-selected-top row-selected-bottom">
            <div title="" style="overflow: hidden; text-align: right;"></div>
          </div>
          <div class="slick-cell l12 r12 readonly slick-grid-right-edge readonly selected row-selected row-selected-top row-selected-bottom row-selected-right">
            <div title="" style="overflow: hidden; text-align: right;"></div>
          </div>
        </div>
        <div class="ui-widget-content slick-row even" style="top:120px">
          <div class="slick-cell l3 r3 readonly readonly">
            <div title="" style="overflow: hidden; text-align: left;"></div>
          </div>
          <div class="slick-cell l4 r4 hasEditor readonly">
            <div title="" style="overflow: hidden; text-align: right;"></div>
          </div>
          <div class="slick-cell l5 r5 hasEditor readonly">
            <div title="" style="overflow: hidden; text-align: right;"></div>
          </div>
          <div class="slick-cell l6 r6 hasEditor readonly">
            <div title="" style="overflow: hidden; text-align: right;"></div>
          </div>
          <div class="slick-cell l7 r7 hasEditor readonly">
            <div title="" style="overflow: hidden; text-align: right;"></div>
          </div>
          <div class="slick-cell l8 r8 hasEditor readonly">
            <div title="" style="overflow: hidden; text-align: right;"></div>
          </div>
          <div class="slick-cell l9 r9 hasEditor readonly">
            <div title="" style="overflow: hidden; text-align: right;"></div>
          </div>
          <div class="slick-cell l10 r10 hasEditor readonly">
            <div title="" style="overflow: hidden; text-align: right;"></div>
          </div>
          <div class="slick-cell l11 r11 hasEditor readonly">
            <div title="" style="overflow: hidden; text-align: right;"></div>
          </div>
          <div class="slick-cell l12 r12 readonly slick-grid-right-edge readonly">
            <div title="" style="overflow: hidden; text-align: right;"></div>
          </div>
        </div>
        <div class="ui-widget-content slick-row odd" style="top:150px">
          <div class="slick-cell l3 r3 readonly readonly">
            <div title="" style="overflow: hidden; text-align: left;"></div>
          </div>
          <div class="slick-cell l4 r4 hasEditor readonly">
            <div title="" style="overflow: hidden; text-align: right;"></div>
          </div>
          <div class="slick-cell l5 r5 hasEditor readonly">
            <div title="" style="overflow: hidden; text-align: right;"></div>
          </div>
          <div class="slick-cell l6 r6 hasEditor readonly">
            <div title="" style="overflow: hidden; text-align: right;"></div>
          </div>
          <div class="slick-cell l7 r7 hasEditor readonly">
            <div title="" style="overflow: hidden; text-align: right;"></div>
          </div>
          <div class="slick-cell l8 r8 hasEditor readonly">
            <div title="" style="overflow: hidden; text-align: right;"></div>
          </div>
          <div class="slick-cell l9 r9 hasEditor readonly">
            <div title="" style="overflow: hidden; text-align: right;"></div>
          </div>
          <div class="slick-cell l10 r10 hasEditor readonly">
            <div title="" style="overflow: hidden; text-align: right;"></div>
          </div>
          <div class="slick-cell l11 r11 hasEditor readonly">
            <div title="" style="overflow: hidden; text-align: right;"></div>
          </div>
          <div class="slick-cell l12 r12 readonly slick-grid-right-edge readonly">
            <div title="" style="overflow: hidden; text-align: right;"></div>
          </div>
        </div>
        <div class="ui-widget-content slick-row even" style="top:60px">
          <div class="slick-cell l3 r3 readonly readonly">
            <div title="" style="overflow: hidden; text-align: left;"></div>
          </div>
          <div class="slick-cell l4 r4 hasEditor readonly">
            <div title="" style="overflow: hidden; text-align: right;"></div>
          </div>
          <div class="slick-cell l5 r5 hasEditor readonly">
            <div title="" style="overflow: hidden; text-align: right;"></div>
          </div>
          <div class="slick-cell l6 r6 hasEditor readonly">
            <div title="" style="overflow: hidden; text-align: right;"></div>
          </div>
          <div class="slick-cell l7 r7 hasEditor readonly">
            <div title="" style="overflow: hidden; text-align: right;"></div>
          </div>
          <div class="slick-cell l8 r8 hasEditor readonly">
            <div title="" style="overflow: hidden; text-align: right;"></div>
          </div>
          <div class="slick-cell l9 r9 hasEditor readonly">
            <div title="" style="overflow: hidden; text-align: right;"></div>
          </div>
          <div class="slick-cell l10 r10 hasEditor readonly">
            <div title="" style="overflow: hidden; text-align: right;"></div>
          </div>
          <div class="slick-cell l11 r11 hasEditor readonly">
            <div title="" style="overflow: hidden; text-align: right;"></div>
          </div>
          <div class="slick-cell l12 r12 readonly slick-grid-right-edge readonly">
            <div title="" style="overflow: hidden; text-align: right;"></div>
          </div>
        </div>
        <div class="ui-widget-content slick-row even" style="top:180px">
          <div class="slick-cell l3 r3 readonly readonly">
            <div title="" style="overflow: hidden; text-align: left;"></div>
          </div>
          <div class="slick-cell l4 r4 hasEditor readonly">
            <div title="" style="overflow: hidden; text-align: right;"></div>
          </div>
          <div class="slick-cell l5 r5 hasEditor">
            <div title="" style="overflow: hidden; text-align: right;"></div>
          </div>
          <div class="slick-cell l6 r6 hasEditor">
            <div title="" style="overflow: hidden; text-align: right;"></div>
          </div>
          <div class="slick-cell l7 r7 hasEditor">
            <div title="" style="overflow: hidden; text-align: right;"></div>
          </div>
          <div class="slick-cell l8 r8 hasEditor">
            <div title="" style="overflow: hidden; text-align: right;"></div>
          </div>
          <div class="slick-cell l9 r9 hasEditor">
            <div title="" style="overflow: hidden; text-align: right;"></div>
          </div>
          <div class="slick-cell l10 r10 hasEditor">
            <div title="" style="overflow: hidden; text-align: right;"></div>
          </div>
          <div class="slick-cell l11 r11 hasEditor">
            <div title="" style="overflow: hidden; text-align: right;"></div>
          </div>
          <div class="slick-cell l12 r12 readonly slick-grid-right-edge readonly">
            <div title="" style="overflow: hidden; text-align: right;"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="slick-pane slick-pane-bottom slick-pane-left" tabindex="0" style="display: none;">
    <div class="slick-viewport slick-viewport-bottom slick-viewport-left" tabindex="0" hidefocus="" style="overflow: auto hidden;">
      <div class="grid-canvas grid-canvas-bottom grid-canvas-left" tabindex="0" hidefocus=""></div>
    </div>
  </div>
  <div class="slick-pane slick-pane-bottom slick-pane-right" tabindex="0" style="display: none;">
    <div class="slick-viewport slick-viewport-bottom slick-viewport-right" tabindex="0" hidefocus="" style="overflow: auto;">
      <div class="grid-canvas grid-canvas-bottom grid-canvas-right" tabindex="0" hidefocus=""></div>
    </div>
  </div>
  <div tabindex="0" hidefocus="" style="position:fixed;width:0;height:0;top:0;left:0;outline:0;"></div>
</div>

kazurayam · November 25, 2021, 11:57pm

How about something like this:

//div[@id='detail-grid']//span[starts-with(text(),'1020Q')]/parent::div/parent::div/following-sibling::div[3]

Your problem is a difficult one. So I needed to create a mimic project to reproduce the environment. In there I tried many times to find a solution. I have published the project at GitHub:

If you want to run this project on your PC, do the followings:

It requires “Groovy” is installed. You can install Groovy as the document tells: https://groovy-lang.org/install.html
in the command line, do as follows :

$ cd <projectDir>
$ groovy httpserver.groovy

in any browser, navigate to “http://localhost”
In the Katalon project, select “Test Cases/TC1”, and run it.

The TC1 is as follows::

import java.nio.file.Path
import java.nio.file.Paths

import com.kms.katalon.core.configuration.RunConfiguration
import com.kms.katalon.core.testobject.ConditionType
import com.kms.katalon.core.testobject.TestObject
import com.kms.katalon.core.webui.keyword.WebUiBuiltInKeywords as WebUI

Path projectDir = Paths.get(RunConfiguration.getProjectDir())
Path html = projectDir.resolve("page.html")
URL htmlURL = html.toUri().toURL()
int timeout = 10

WebUI.openBrowser('')
WebUI.navigateToUrl(htmlURL.toExternalForm())

String key = '1020Q'
int index = 3
String expr = """//div[@id='detail-grid']//span[starts-with(text(),'${key}')]/parent::div/parent::div/following-sibling::div[${index}]"""

TestObject tObj = createTestObjectWithXPath(expr)

WebUI.verifyElementPresent(tObj, timeout)
WebUI.closeBrowser()

/**
 * 
 * @param xpath
 * @return
 */
TestObject createTestObjectWithXPath(String xpath) {
	TestObject tObj = new TestObject("myTestObject")
	tObj.addProperty("xpath", ConditionType.EQUALS, xpath)
	return tObj
}

Topic		Replies	Views
Relative XPath V5.7 Release Announcement Archive releases , katalon-studio , feature-request	3	794	September 15, 2018
Using CSS Selectors to find Dynamic Values Archive	5	3186	January 2, 2018
How can I write relative xpath for Windows Desktop apps Katalon Studio desktop , katalon-studio , windows	2	4390	April 3, 2024
Attempting to get particular element that has dynamic xpath Katalon Studio katalon-studio , web-testing	11	1927	June 21, 2019
Need help on XPATH Syntax Katalon Studio katalon-studio , web-testing	2	534	June 27, 2019

Reading Xpath with successive /../

Related Topics