CODEWITHSUNDEEP
javajavascripthtmlseleniumxpath
Segmented
Segmented

Reputation: 2044

Traversing DOM in Selenium using xpath axes

I am writing Selenium test for a dynamic web page. In this piece of the code, I read from an excel sheet and check if the element is present in the given web page. I have marked the important portion of the code with comments labelled as << >>

try {
      driver.manage().timeouts().implicitlyWait(0, TimeUnit.MILLISECONDS);
      <<//**This works fine, as tested**>>                                       
      element =  driver.findElement(By.xpath("//span[contains(text(),'"+str.split("\\s+")[0].trim()+"')]"));

     str1 = element.getText().replace("\n", " ").trim();


        //check if the param from the sheet does not matche the param grabbed
        if (!str1.contentEquals(str))
            {
              finalassert = false  ;
              System.out.println("param from sheet does not match");
             }
         else
             {                                                                          
              <<//**This does not work as expected.**>>
              element =  driver.findElement(By.xpath("//span[contains(text(),'"+str.split("\\s+")                [0].trim()+"')]/parent::div/following-sibling::div/child::div"));

              System.out.println("ELEMENT FOUND: "+element.getText());
              element.click();
              Thread.sleep(1000); 

              driver.manage().timeouts().implicitlyWait(10, TimeUnit.MILLISECONDS);
              System.out.println(str1);

               }

   } catch (NoSuchElementException ignored) 
          {
           System.out.println(str);

           finalassert = false  ; 

           }

For the sake of example, the element grabbed by element = driver.findElement(By.xpath("//span[contains(text(),'"+str.split("\\s+")[0].trim()+"')]")); is a parameter called volume The dynamically generated code for this would look like:

<div class="x-form-label" id="ext-element-304" style="width: 50% !important;">
<span id="ext-element-305">Volume</span>
</div>

My aim is to click the input box, which is right next to it (horizontally opposite). The dynamically generated code for the same would look like: 

    <div class="x-unsized x-field-input" id="ext-input-98">
<<//**This is what I would like to click**>>
    <input class="x-input-el x-form-field x-input-number" type="number" id="ext-element-937" step="1" name="a0" readonly="true" tabindex="1"/>
    <div class="x-clear-icon" id="ext-element-939"/></div>
    <div class="x-field-mask" style="display: none !important;" id="ext-element-938"/></div>
    </div>

I am using xpath axes here to do my job. The code element = driver.findElement(By.xpath("//span[contains(text(),'"+str.split("\\s+")[0].trim()+"')]/parent::div/following-sibling::div/child::div"));works most of the time but fails often. is there a better way of doing this?

EDIT 1: To give a better understanding of the relation between my <span> and <div> element, I include the dynamically generated HTML here: ("ext-element-305" is Volume&& id="ext-input-115" is the desired element to be clicked relatively traversing from Volume)

<html debug="true">
<head id="ext-element-1">
<script src="chrome-extension://bmagokdooijbeehmkpknfglimnifench/googleChrome.js"/>
<body id="ext-element-3" class="x-desktop x-windows x-chrome x-landscape" style="width: 100% !important; height: 100% !important;">
<div class="x-container x-sized x-size-monitored x-paint-monitored" id="ext-viewport" style="width: 100% !important; height: 100% !important;">
<div class="x-body" id="ext-element-4">
<div class="x-container x-panel x-sized x-select-overlay x-floating x-item-hidden" id="ext-panel-3" style="width: 18em !important; height: 109px !important; left: 131px !important; top: 112px !important; z-index: 12 !important; display: none !important;">
<div class="x-mask x-sized x-floating x-paint-monitored x-size-monitored x-item-hidden" id="ext-mask-6" style="top: 0px !important; left: 0px !important; right: 0px !important; bottom: 0px !important; z-index: 11 !important; display: none !important;">
<div class="x-mask x-has-message x-sized x-floating x-paint-monitored x-size-monitored x-item-hidden" id="ext-loadmask-4" style="top: 0px !important; left: 0px !important; right: 0px !important; bottom: 0px !important; z-index: 8 !important; display: none !important;">
<div class="x-container x-unsized x-sheet-action x-item-hidden x-floating" id="ext-actionsheet-1" style="left: 0px !important; right: 0px !important; bottom: 0px !important; display: none !important; width: 300px !important; z-index: 100 !important;">
<div class="x-mask x-sized x-floating x-paint-monitored x-size-monitored x-item-hidden" id="ext-mask-3" style="top: 0px !important; left: 0px !important; right: 0px !important; bottom: 0px !important; display: none !important; z-index: 99 !important;">
<div class="x-inner x-layout-card" id="ext-element-2">
<div class="x-container x-tabpanel x-fullscreen x-layout-card-item x-sized" id="Main">
<div class="x-dock x-dock-vertical x-sized" id="ext-element-85">
<div class="x-container x-toolbar-dark x-toolbar x-item-hidden x-dock-item x-docked-top x-sized" id="ext-toolbar-2" style="height: 15mm !important; min-height: 2.6em !important; display: none !important;">
<div class="x-dock-body" id="ext-element-86">
<div class="x-dock x-dock-horizontal x-sized" id="ext-element-184">
<div class="x-dock-body" id="ext-element-185">
<div class="x-dock x-dock-vertical x-sized" id="ext-element-195">
<div class="x-container x-toolbar-dark x-toolbar x-item-hidden x-stretched x-dock-item x-docked-top" id="ext-toolbar-4" style="min-height: 2.6em !important; display: none !important;">
<div class="x-dock-body" id="ext-element-196">
<div class="x-inner x-layout-card" id="ext-element-78">
<div class="x-container x-nested-list x-layout-card-item x-sized" id="ext-Navigation-1">
<div class="x-dock x-dock-vertical x-sized" id="ext-element-96">
<div class="x-container x-toolbar-dark x-toolbar x-item-hidden x-paint-monitored x-navigation-bar x-dock-item x-docked-top x-sized" id="ext-titlebar-1" style="height: 15mm !important; display: none !important;">
<div class="x-dock-body" id="ext-element-97">
<div class="x-dock x-dock-horizontal x-sized" id="ext-element-126">
<div class="x-container x-item-hidden x-nested-list x-dock-item x-docked-left x-sized" id="ext-StoredMethodsTree-1" style="width: 300px !important; display: none !important;">
<div class="x-dock-body" id="ext-element-127">
<div class="x-dock x-dock-vertical x-sized" id="ext-element-140">
<div class="x-container x-toolbar-light x-toolbar x-item-hidden x-dock-item x-docked-top x-sized" id="ext-StoredMethodsToolBar-1" style="height: 47px !important; min-height: 2.6em !important; display: none !important;">
<div class="x-dock-body" id="ext-element-141">
<div class="x-dock x-dock-horizontal x-sized" id="ext-element-160">
<div class="x-container x-item-hidden x-nested-list x-dock-item x-docked-left x-sized" id="ext-StorageTree-1" style="width: 300px !important; display: none !important;">
<div class="x-dock-body" id="ext-element-161">
<div class="x-dock x-dock-vertical x-sized" id="ext-element-173">
<div class="x-container x-toolbar-light x-toolbar x-item-hidden x-dock-item x-docked-top x-sized" id="ext-StorageToolBar-1" style="height: 47px !important; min-height: 2.6em !important; display: none !important;">
<div class="x-container x-toolbar x-toolbar-dark x-dock-item x-docked-top x-sized" id="ext-SampleToolBar-1" style="min-height: 2.6em !important; height: 15mm !important;">
<div class="x-body" id="ext-element-1065">
<div class="x-center" id="ext-element-1066">
<div class="x-inner x-toolbar-inner x-horizontal x-align-center x-pack-start x-layout-box" id="ext-element-1063">
<div class="x-button x-iconalign-center x-button-plain x-layout-box-item x-stretched" id="ext-button-31">
<div class="x-button x-iconalign-center x-button-plain x-layout-box-item x-stretched" id="ext-button-32">
<div class="x-layout-box-item x-flexed x-stretched" id="ext-spacer-7" style="-webkit-box-flex: 1;"/>
<div class="x-button x-iconalign-center x-button-plain x-layout-box-item x-stretched" id="ext-button-33">
<div class="x-button x-iconalign-center x-button-plain x-layout-box-item x-stretched" id="ext-button-34">
<div class="x-button x-iconalign-center x-button-plain x-layout-box-item x-stretched" id="ext-button-35">
<div class="x-button-plain x-button x-iconalign-center x-layout-box-item x-stretched" id="ext-DeleteFileActionsButton-1">
<div class="x-button x-iconalign-center x-button-plain x-layout-box-item x-stretched" id="ext-button-36">
</div>
</div>
</div>
<div class="x-dock-body" id="ext-element-174">
<div class="x-inner x-layout-card" id="ext-element-87">
<div class="x-container x-dataview-normal x-dataview x-dataview-ungrouped x-dataview-inlineblock x-layout-card-item x-sized x-item-hidden x-paint-monitored" id="ext-IconList-1" style="margin: 10% auto !important; height: 100% !important; display: none !important;">
<div class="x-container x-panel x-layout-card-item x-sized" id="ext-Sample-1">
<div class="x-dock x-dock-horizontal x-sized" id="ext-element-1039">
<form class="x-container x-form x-dock-item x-docked-left x-sized" id="ext-ViewBarContainer-1" style="width: 70px !important;">
<div class="x-body" id="ext-element-1038">
<div class="x-container x-toolbar x-toolbar-dark rotate x-paint-monitored x-sized x-floating" id="ext-SampleViewBar-1" style="width: 718px !important; height: 70px !important; min-height: 2.6em !important; top: 718px !important; z-index: 2 !important;">
<div class="x-inner x-toolbar-inner x-horizontal x-align-center x-pack-start x-layout-box" id="ext-element-1037" style="padding: 0px !important;">
<div class="x-button-normal x-button x-layout-box-item x-flexed x-button-pressing x-sized" id="ext-button-25" style="-webkit-box-flex: 1; height: 66px !important; background-image: url('http://profectus/NanoSenchaTouch2.1.1%20(Sprint%2032%2022-05-14)/app/resources/images/viewbar_table.png'); background-size: 100%;">
<div class="x-button-normal x-button x-layout-box-item x-flexed x-button-pressing x-sized" id="ext-button-26" style="-webkit-box-flex: 1; height: 66px !important; background-image: url('http://profectus/NanoSenchaTouch2.1.1%20(Sprint%2032%2022-05-14)/app/resources/images/viewbar_graph.png'); background-size: 100%;">
<div class="x-button-normal x-button x-layout-box-item x-flexed x-button-pressing x-sized" id="ext-button-27" style="-webkit-box-flex: 1; height: 66px !important; background-image: url('http://profectus/NanoSenchaTouch2.1.1%20(Sprint%2032%2022-05-14)/app/resources/images/viewbar_result.png'); background-size: 100%;">
<div class="x-button-normal x-button x-layout-box-item x-flexed x-button-pressing x-sized" id="ext-button-28" style="-webkit-box-flex: 1.5; height: 66px !important; background-image: url('http://profectus/NanoSenchaTouch2.1.1%20(Sprint%2032%2022-05-14)/app/resources/images/viewbar_parameters.png'); background-size: 100%;">
</div>
<div class="x-paint-monitor overflowchange"/>
</div>
<div class="x-inner x-form-inner x-horizontal x-align-end x-pack-start x-layout-box" id="ext-element-1035"/>
</div>
<div class="x-anchor" style="display: none;" id="ext-element-1036"/>
</form>
<div class="x-dock-body" id="ext-element-1040">
<div class="x-dock x-dock-vertical x-sized" id="ext-element-1059">
<div class="x-dock-body" id="ext-element-1060">
<div class="x-dock x-dock-horizontal x-sized" id="ext-element-1061">
<div class="x-container x-panel x-dock-item x-docked-left x-sized" id="ext-ParametersPanel-1" style="width: 300px !important;">
<div class="x-inner x-panel-inner x-layout-card" id="ext-element-377">
<form class="x-container x-panel x-paint-monitored x-layout-card-item x-sized" id="ext-KineticsParameters-1">
<div class="x-dock x-dock-vertical x-sized" id="ext-element-375">
<div class="x-dock-body" id="ext-element-376">
<div class="x-body x-scroll-view" id="ext-element-368">
<div class="x-scroll-bar-grid-wrapper" id="ext-element-367">
<div id="ext-element-369" class="x-scroll-container x-translatable-container x-size-monitored x-paint-monitored">
<div class="x-inner x-panel-inner x-translatable x-size-monitored x-paint-monitored x-scroll-scroller" id="ext-element-295">
<div class="x-container x-field-text x-field x-item-disabled x-label-align-left x-field-labeled x-item-hidden x-form-label-nowrap" id="ext-MethodField-1" style="display: none !important;">
<div class="x-container x-field-select x-field x-label-align-left x-form-label-nowrap x-field-labeled" id="ext-VolumeField-1">
<div class="x-form-label" id="ext-element-304" style="width: 50% !important;">
<span id="ext-element-305">Volume</span>
</div>
<div class="x-component-outer" id="ext-element-303">
</div>
<div class="x-container x-field-select x-field x-label-align-left x-form-label-nowrap x-field-labeled x-item-hidden" id="ext-PathlengthField-1" style="display: none !important;">
<div class="x-container x-field x-label-align-left x-toggle-field x-form-label-nowrap x-field-labeled x-item-hidden" id="ext-HeatTo37-1" tabindex="1" style="display: none !important;">
<div class="x-container x-field-number x-field x-label-align-left x-form-label-nowrap x-field-labeled x-field-clearable" id="ext-WavelengthField-1">
<div class="x-form-label" id="ext-element-320" style="width: 50% !important;">
<div class="x-component-outer" id="ext-element-319">
</div>
<div class="x-unsized x-button-plain x-button x-iconalign-right" id="ext-AddFieldsButton-1">
<div class="x-container x-field-number x-field x-label-align-left x-form-label-nowrap x-field-labeled x-field-clearable" id="ext-MinMaxNumberField-1">
<div class="x-container x-field-number x-field x-label-align-left x-form-label-nowrap x-field-labeled x-field-clearable" id="ext-MinMaxNumberField-2">
<div class="x-container x-field-number x-field x-label-align-left x-form-label-nowrap x-field-labeled x-field-clearable" id="ext-MinMaxNumberField-3">
<div class="x-container x-field-select x-field x-label-align-left x-form-label-nowrap x-field-labeled x-item-hidden" id="ext-ConcentrationUnitsField-1" style="display: none !important;">
<div class="x-container x-field-select x-field x-label-align-left x-form-label-nowrap x-field-labeled" id="ext-ReactionConstantField-1">
<div class="x-container x-field-text x-field x-label-align-left x-field-labeled x-form-label-nowrap x-empty" id="ext-textfield-1">
<div class="x-form-label" id="ext-element-359" style="width: 30% !important;">
<span id="ext-element-360">Curve Fit</span>
</div>
<div class="x-component-outer" id="ext-element-358">
</div>
<div class="x-unsized x-label" id="ext-label-5" style="color: rgb(128, 128, 128); margin: 4pt !important;">
<div class="x-size-monitors overflowchanged">
<div class="x-paint-monitor overflowchange"/>
</div>
<div class="x-size-monitors overflowchanged">
<div class="x-paint-monitor overflowchange"/>
</div>
</div>
</div>
<div class="x-container x-toolbar x-stretched x-toolbar-light x-dock-item x-docked-bottom" id="ext-toolbar-5" style="min-height: 2.6em !important;">
</div>
<div class="x-anchor" style="display: none;" id="ext-element-296"/>
<div class="x-paint-monitor overflowchange"/>
</form>
</div>
<div class="x-anchor" style="display: none;" id="ext-element-378"/>
</div>
<div class="x-dock-body" id="ext-element-1062">
<div class="x-inner x-panel-inner x-vertical x-align-stretch x-pack-start x-layout-box" id="ext-element-379">
<div class="x-container x-layout-box-item x-flexed x-sized" id="ext-container-14" style="-webkit-box-flex: 1;">
<div class="x-inner x-horizontal x-align-stretch x-pack-end x-layout-box" id="ext-element-381">
<div class="x-container x-panel x-layout-box-item x-flexed x-sized" id="ext-SampleGraph-1" style="-webkit-box-flex: 1;">
<div class="x-inner x-panel-inner x-layout-fit x-stretched" id="ext-element-382">
<div class="x-container x-draw-component x-size-monitored x-paint-monitored x-layout-fit-item x-sized" id="ext-Graph-2">
<div class="x-inner" id="ext-element-994">
<div class="x-chart-watermark" style="display: none; right: 10px; bottom: 48px;" id="ext-element-1076"/>
<div style="position: absolute; z-index: 0; left: 61px !important; top: 10px !important; width: 859px !important; height: 276px !important;" id="ext-Graph-2-main">
<div style="position: absolute; z-index: 4; left: 61px !important; top: 10px !important; width: 859px !important; height: 276px !important;" id="ext-Graph-2-overlay-surface">
<div style="width: 100%; height: 100%; position: relative;" id="ext-element-997">
<canvas class="x-surface" id="ext-element-998" height="276" width="859" style="left: 0px; height: 276px; width: 859px;"/>
</div>
</div>
<div style="position: absolute; z-index: 2; left: 61px !important; top: 10px !important; width: 859px !important; height: 276px !important;" id="ext-Graph-2-series-surface">
<div style="position: absolute; z-index: 3; left: 10px !important; top: 0px !important; width: 51px !important; height: 334px !important;" id="ext-Graph-2-ext-chart-axis-numeric-3">
<div style="position: absolute; z-index: 3; left: 0px !important; top: 286px !important; width: 930px !important; height: 38px !important;" id="ext-Graph-2-ext-chart-axis-numeric-4">
<div class="x-container x-toolbar-dark x-toolbar x-stretched x-floating" id="ext-toolbar-9" style="min-height: 2.6em !important; z-index: 5 !important; right: 10px !important; top: 10px !important; background: none;">
</div>
<div class="x-size-monitors overflowchanged">
<div class="x-paint-monitor overflowchange"/>
</div>
</div>
<div class="x-anchor" style="display: none;" id="ext-element-383"/>
</div>
<div class="x-container x-panel x-layout-box-item x-flexed x-sized" id="ext-SampleResults-1" style="max-width: 300px !important; -webkit-box-flex: 1;">
<div class="x-inner x-panel-inner x-layout-fit x-stretched" id="ext-element-415">
<form class="x-container x-panel x-paint-monitored x-layout-fit-item x-sized" id="ext-KineticsResults-1">
<div class="x-body x-scroll-view" id="ext-element-975">
<div class="x-scroll-bar-grid-wrapper" id="ext-element-974">
<div id="ext-element-976" class="x-scroll-container x-size-monitored x-paint-monitored">
<div class="x-inner x-panel-inner x-size-monitored x-paint-monitored x-scroll-scroller" id="ext-element-934" style="-webkit-transform: translate3d(0px, 0px, 0px);">
<div class="x-container x-field-number x-field x-label-align-left x-field-labeled x-form-label-nowrap x-empty" id="ext-FixedDigitsField-65">
<div class="x-form-label" id="ext-element-940" style="width: 50% !important; background-color: rgb(247, 247, 247);">
<span id="ext-element-941">A0 (10 mm path)</span>
</div>
<div class="x-component-outer" id="ext-element-936">
<div class="x-unsized x-field-input" id="ext-input-98">
<input class="x-input-el x-form-field x-input-number" type="number" id="ext-element-937" step="1" name="a0" readonly="true" tabindex="1"/>
<div class="x-clear-icon" id="ext-element-939"/>
<div class="x-field-mask" style="display: none !important;" id="ext-element-938"/>
</div>
</div>
</div>
<div class="x-container x-field-number x-field x-label-align-left x-field-labeled x-form-label-nowrap x-empty" id="ext-FixedDigitsField-66">
<div class="x-form-label" id="ext-element-946" style="width: 50% !important; background-color: rgb(247, 247, 247);">
<div class="x-component-outer" id="ext-element-942">
</div>
<div class="x-container x-field-number x-field x-label-align-left x-field-labeled x-form-label-nowrap x-empty" id="ext-FixedDigitsField-67">
<div class="x-container x-field-number x-field x-label-align-left x-field-labeled x-form-label-nowrap x-empty" id="ext-FixedDigitsField-68">
<div class="x-container x-field-number x-field x-label-align-left x-field-labeled x-form-label-nowrap x-empty" id="ext-FixedDigitsField-69">
<div class="x-container x-field-number x-field x-label-align-left x-field-labeled x-form-label-nowrap x-empty" id="ext-FixedDigitsField-70">
<div class="x-size-monitors overflowchanged">
<div class="x-paint-monitor overflowchange"/>
</div>
<div class="x-size-monitors overflowchanged">
<div class="x-paint-monitor overflowchange"/>
</div>
</div>
<div class="x-anchor" style="display: none;" id="ext-element-935"/>
<div class="x-paint-monitor overflowchange"/>
</form>
</div>
<div class="x-anchor" style="display: none;" id="ext-element-416"/>
</div>
</div>
</div>
<div class="x-container x-list x-paint-monitored x-layout-box-item x-flexed x-sized" id="ext-SampleTable-1" style="-webkit-box-flex: 1;">
<div class="x-container x-panel x-item-hidden x-layout-box-item x-flexed x-sized" id="SampleValues" style="display: none !important; -webkit-box-flex: 1;">
</div>
</div>
</div>
</div>
<div class="x-container x-panel x-dock-item x-docked-bottom x-sized" id="ext-SampleDetails-1" style="height: 50px !important;">
</div>
</div>
</div>
<div class="x-anchor" style="display: none;" id="ext-element-380"/>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="x-container x-panel x-layout-card-item x-sized x-item-hidden" id="Preferences" style="display: none !important;">
<div class="x-container x-panel x-layout-card-item x-sized x-item-hidden" id="Help" style="display: none !important;">
</div>
</div>
</div>
</div>
<div class="x-container x-toolbar-dark x-toolbar x-dock-item x-docked-right x-sized x-item-hidden" id="ext-toolbar-3" style="width: 60px !important; min-height: 2.6em !important; border-width: 0px !important; display: none !important; background: none;">
</div>
</div>
<div class="x-container x-tabbar x-tabbar-dark x-item-hidden x-stretched x-dock-item x-docked-bottom" id="ext-tabbar-1" style="min-height: 2.6em !important; display: none !important;">
</div>
</div>
</div>
</div>
<div class="x-size-monitors overflowchanged">
<div class="x-paint-monitor overflowchange"/>
</div>
<div id="ext-element-394" style="overflow: hidden; position: relative; float: left; width: 0px; height: 0px;">
<iframe style="visibility: hidden !important; width: 0px !important; height: 0px !important; position: absolute !important; border: 0px !important;"/>
</body>
</html>

EDIT 2: The element = driver.findElement(By.xpath("//span[contains(text(),'volume')]/following::input[1])); does not solve the situation as it is not exactly the following input according to the DOM structure. Please refer to a sample diagram to show the GUI location of the element I want to select: enter image description here

Upvotes: 1

Views: 1537

Answers (1)

helderdarocha
helderdarocha

Reputation: 23637

My aim is to click the input box, which is right next to it

To select the following input (ignoring any div structure) elements you can use:

//span[contains(text(),'Volume')]/following::input

That step will select select zero or more input elements that follow the span selected in the first location step. If you want only the next input, use:

//span[contains(text(),'Volume')]/following::input[1]

Upvotes: 1

Related Questions