how to write XPath of a nested element-CodePudding

HTML structure is as shown below,

<div class  = "items">
   <oj-input-text class = "input", label-hint = "asd">
       <input class = "text-input-entry">
   <oj-input-text class = "input", label-hint = "pfg">
       <input class = "text-input-entry">

How do I write Xpath to get to input class = "text-input-entry" under oj-input-text class = "input", for the label-hint = "pfg"

I thought something like this would work but it does not

//div [@class = "items"]/oj-input-text [@class = "input", @label-hint = "pfg"]/input [@class = "text-input-entry"]

CodePudding user response：

Converting your description to XPath is strait-forward.
It will be:

//oj-input-text[@class = 'input' and @label-hint = 'pfg']//input[@class = 'text-input-entry']

or in case if oj-input-text is not a regular element tag name as it looks here

//*[name()=oj-input-text and @class = 'input' and @label-hint = 'pfg']//input[@class = 'text-input-entry']

//oj-input-text[@class = 'input' and @label-hint = 'pfg']//input[@class = 'text-input-entry'] means as following:
// somewhere on the document
oj-input-text node with oj-input-text tag name
@class = 'input' element class attribute value is input
and - another condition there @label-hint = 'pfg' - label-hint attribute has value of pgf
second // - somewhere below this element, inside it
input - tag name input
class = 'text-input-entry' - class attribute with value of text-input-entry

CodePudding user response：

Use Chrome DevTools -> Inspect -> Copy -> Copy XPath This will give you an example of how to build the XPath. i.e. The XPath of your question's code: //*[@id="question"]/div/div[2]/div[1]/pre[1]/code