How can I use XPATH to target a div after choosing a nested element?

Question

How can I use XPATH to target a div after choosing a nested element?

I had the task of creating a universal identifier to locate a dropdown menu following a label. There are 10 different forms, each with a unique structure but consistent format, which means I cannot rely on specific IDs or names. Instead, my approach was to identify the label above the dropdown and then select the subsequent div element containing the dropdown.

The objective is to target the dropdown associated with a Label labeled "Title"

I experimented with various XPaths and attempted something like the following:

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

**Updated 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>

javascript html css selenium-webdriver css-selectors

Answer 1

Answer №1

"To successfully access the dropdown menu, first identify the Label containing 'Title'"

In order to accomplish this task, utilize the following XPATH expression:

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

The provided XPATH expression will pinpoint the initial <select> element that follows the node with the text 'Title'

Answer 2

"To successfully access the dropdown menu, first identify the Label containing 'Title'"

In order to accomplish this task, utilize the following XPATH expression:

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

The provided XPATH expression will pinpoint the initial <select> element that follows the node with the text 'Title'

Answer 3

Answer №2

It seems like using an XPath expression such as "../../div[2]/select" could help locate the select element, as explained in this helpful response.

Additionally, remember that the label ideally should contain a for attribute which can be utilized effectively.

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

const selectionByNavigation = reference.parentElement.parentElement.querySelector("select");
console.log("selectionByNavigation", selectionByNavigation);

const selectionByForAttribute = document.getElementById(reference.getAttribute("for"));
console.log("selectionByForAttribute", selectionByForAttribute);

function getElementUsingXpath(path, origin = document) {
  return document.evaluate(
    path,
    origin,
    null,
    XPathResult.FIRST_ORDERED_NODE_TYPE,
    null
  ).singleNodeValue;
}
const selectionByCustomXpath = getElementUsingXpath("../../div[2]/select", reference);
console.log("selectionByCustomXpath", selectionByCustomXpath);

<div>
  <div>
    <label for="unique-id">Pick a color</label>
  </div>
  <div>
    <select id="unique-id">
      <option>red</option>
      <option>blue</option>
    </select>
    <p id="similar-id"><i>lorem ipsum</i></p>
  </div>
</div>

Answer 4

It seems like using an XPath expression such as "../../div[2]/select" could help locate the select element, as explained in this helpful response.

Additionally, remember that the label ideally should contain a for attribute which can be utilized effectively.

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

const selectionByNavigation = reference.parentElement.parentElement.querySelector("select");
console.log("selectionByNavigation", selectionByNavigation);

const selectionByForAttribute = document.getElementById(reference.getAttribute("for"));
console.log("selectionByForAttribute", selectionByForAttribute);

function getElementUsingXpath(path, origin = document) {
  return document.evaluate(
    path,
    origin,
    null,
    XPathResult.FIRST_ORDERED_NODE_TYPE,
    null
  ).singleNodeValue;
}
const selectionByCustomXpath = getElementUsingXpath("../../div[2]/select", reference);
console.log("selectionByCustomXpath", selectionByCustomXpath);

<div>
  <div>
    <label for="unique-id">Pick a color</label>
  </div>
  <div>
    <select id="unique-id">
      <option>red</option>
      <option>blue</option>
    </select>
    <p id="similar-id"><i>lorem ipsum</i></p>
  </div>
</div>

How can I use XPATH to target a div after choosing a nested element?

Answer №1

Answer №2

Similar questions

How do I test Pinia by calling one method that in turn calls another method, and checking how many times it has been called

What is the most efficient method of organizing form components together?

Is there a copyright concern regarding CSS?

What could be causing the occasional appearance of a tiny glitch, like a pixel dot, below a menu item when utilizing this hover effect?

Troubleshooting Autocomplete User Interface Problems

When the jQuery document is ready, it typically returns null, but the console can still access and display

How can I pass a dynamic scope variable to a JavaScript function in AngularJS that is being updated within an ng-repeat loop?

Issues with CSS Min-Height in Various Web Browsers

Is the exchange between Ajax/jQuery and PHP a two-way street?

python The program will not be terminated abruptly when calling selenium driver.quit()

An element seems to be missing on this webpage: Element not found: //button[@type='save'][text()='Accept All']

Jest - Silence greets the test results

Error: Execution time limit of 30 seconds has been surpassed, causing a fatal issue on line 64

Transfer the data stored in the ts variable to a JavaScript file

modifying the arrangement of span elements

Well, it appears that I am having trouble establishing a connection between the users in this chatting application

Arrange a set of items using AngularJS according to specific criteria

Unable to verify POST $http request using $httpBackend

Secure your application with Express.js and MySQL user authentication

Tips for updating the pagination layout in Material UI Table