Currently, I am conducting tests on a web application utilizing Nightwatch.js, which relies on Selenium WebDriver for browser interactions. Within my application, there is a list of items that are dynamically created and only differentiated by their names, displayed as input values. The task at hand is to locate an item based on its name.
Below is an example of the HTML representation of the document structure:
<div class="item">
<input> <!-- current value: "first" -->
</div>
<div class="item">
<input> <!-- current value: "second" -->
</div>
<div class="item">
<input> <!-- current value: "first" -->
</div>
The goal is to identify the div.item that contains an input with the value second.
It is important to note that the value of an <input> is determined by the value of its value property, which may differ from the value of its value attribute. Due to DOM manipulation by React in my case, the inputs may not possess the value attribute at all.
Is there a method to locate an element based on its property value using Nightwatch (or Selenium WebDriver API)?
After reviewing the WebDriver documentation and exploring alternatives such as executing custom JavaScript code, I have encountered certain limitations (e.g., the need for a custom implementation of waiting for an element to appear and a lack of interaction with Nightwatch page objects). From my perspective, the other methods primarily focus on examining the HTML structure only (thus, dealing with attributes at best, not properties).
Just to clarify, the utilization of selectors like input[value=...] (CSS) or //input[@value=...] (XPath) is not a viable solution, as they search for attribute values rather than property values.