Question 58209 in Html Question posted in
Some basic documentation can be found here.

XPATH to select a div after selecting a nested element? – Html

I wanted to make a generic identifier to find a dropdown after a label. I have 10 different forms all with the same format, but with different ids, names etc. so I can’t use those. I instead was looking to find the label above the dropdown, and then select the next div after that which contains the dropdown.

The idea is to select the dropdown after finding the Label that has "Title"

I have tried multiple different XPaths. Trying something like this:

//span[text()='Title']/following-sibling::div[@class='col-xs-12 form-field input_controls ']

EDIT** Code here:

<div class="form-group is-required sc-row sc-row-12"><div id="label_IO:d027ec571b332450c82599361a4bcbb2" class="" nowrap="true" type="18" oncontextmenu="return contextQuestionLabel(event, 'd027ec571b332450c82599361a4bcbb2', '18');"><label for="IO:d027ec571b332450c82599361a4bcbb2" class="col-xs-12 control-label"><span id="status.IO:d027ec571b332450c82599361a4bcbb2" title="Mandatory - must be populated before Submit" mandatory="true" oclass="" class=" required-marker" data-original-title="Mandatory - must be populated before Submit">&nbsp;</span><img src="images/s.gifx" style="width:1px; margin-right:0px; margin-left:0px" id="section508.IO:d027ec571b332450c82599361a4bcbb2" alt="Mandatory - must be populated before Submit" title="Mandatory - must be populated before Submit" data-original-title="Mandatory - must be populated before Submit"><span class="sn-tooltip-basic " data-toggle="tooltip" data-placement="auto" title="Title" data-original-title="Title">Title</span></label></div><div class="col-xs-12 form-field input_controls "><select name="IO:d027ec571b332450c82599361a4bcbb2" id="IO:d027ec571b332450c82599361a4bcbb2" class="form-control cat_item_option " onchange="if (typeof(variableOnChange) == 'function') variableOnChange('IO:d027ec571b332450c82599361a4bcbb2')"><option value="" selected="SELECTED" role="option">-- None --</option><option value="b30330019f22120047a2d126c42e70ff" role="option">Chief Executive Officer</option><option value="f30330019f22120047a2d126c42e70ff" role="option">Chief Financial Officer</option><option value="370330019f22120047a2d126c42e70ff" role="option">Chief Technology Officer</option><option value="770330019f22120047a2d126c42e70ff" role="option">Director of Application Development</option><option value="b70330019f22120047a2d126c42e70ff" role="option">Director of Infrastructure</option><option value="f70330019f22120047a2d126c42e70ff" role="option">Director of Procurement</option><option value="3b0330019f22120047a2d126c42e70ff" role="option">Director of Security</option><option value="7b0330019f22120047a2d126c42e70ff" role="option">Director, Audit &amp; Risk</option><option value="bb0330019f22120047a2d126c42e70ff" role="option">Director, Finance Strategy</option><option value="fb0330019f22120047a2d126c42e70ff" role="option">HR Administrator</option><option value="3f0330019f22120047a2d126c42e70ff" role="option">HR Manager</option><option value="7f0330019f22120047a2d126c42e70ff" role="option">Infrastructure Analyst</option><option value="bf0330019f22120047a2d126c42e70ff" role="option">Procurement Administrator</option><option value="ff0330019f22120047a2d126c42e70ff" role="option">Recruitment Administrator</option><option value="330370019f22120047a2d126c42e7000" role="option">Recruitment Manager</option><option value="730370019f22120047a2d126c42e7000" role="option">Security Analyst</option><option value="b30370019f22120047a2d126c42e7000" role="option">Senior Auditor</option><option value="f30370019f22120047a2d126c42e7000" role="option">Senior Developer</option><option value="370370019f22120047a2d126c42e7000" role="option">Senior Finance Analyst</option><option value="770370019f22120047a2d126c42e7000" role="option">SVP, Human Resources</option></select><input type="HIDDEN" class="cat_item_option" name="sys_original.IO:d027ec571b332450c82599361a4bcbb2" id="sys_original.IO:d027ec571b332450c82599361a4bcbb2" value=""></div></div>
Tags:

2

Answers


  1. 0

    It looks like an XPath would be something like "../../div[2]/select", and using the function from this answer you could find your the select with it.

    That being said, the label should have a for attribute that you should be able to leverage

    const origin = document.querySelector("label");

const targetByWalk = origin.parentElement.parentElement.querySelector("select");
console.log("targetByWalk", targetByWalk);

const targetByForProperty = document.getElementById(origin.getAttribute("for"));
console.log("targetByForProperty", targetByForProperty);

// https://stackoverflow.com/a/14284815/17519505
function getElementByXpath(path, origin = document) {
  return document.evaluate(
    path,
    origin,
    null,
    XPathResult.FIRST_ORDERED_NODE_TYPE,
    null
  ).singleNodeValue;
}
const targetByXPath = getElementByXpath("../../div[2]/select", origin);
console.log("targetByXPath", targetByXPath);
    <div>
  <div>
    <label for="some-id">Choose a fruit</label>
  </div>
  <div>
    <select id="some-id">
      <option>apple</option>
      <option>banana</option>
    </select>
    <p id="a-similar-id"><i>blah blah</i></p>
  </div>
</div>
    Login or Signup to reply.
  2. 0

    "The idea is to select the dropdown after finding the Label that has ‘Title’"

    To achieve the above, use below XPATH expression:

    //span[text()='Title']//following::select[1]

    Above XPATH expression will locate the first <select> node which appears following the node which has the text ‘Title’

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search