How to locate a div with non unique id/class, which contains a div with a certain text and then fetch all the <td> and <tr> tags under that div

So I have HTML something like this.

<div class="generic classname" id="generic ID name" >  // div1
<div class="presentation" id="body presentation">      // div2
<font>unique text</font>
<div class= "generic classname" id="generic ID name""> //div3
// under this div I have the table entry.
// multiple <td> and <tr>
</div>
</div>
</div>

My job is to match the "unique text" in div no 2, so I can locate the element div number 1 and then fetch all the table <td> <tr> in div no 3

The problem is I am not sure how to locate the div which doesn't have a unique class name or id name. I can't use full XPath, since the table changes and the divs change randomly.

Use the below xpath with reference to div 2 to find the unique text and then find div and table inside div.

//div[./font[text()='unique text']]/div[1]/table

If all your divs are nested as you say and your aim is to get the table in div3, you don't need to get the parent.

This is one option:

//font[text()='unique text']/following-sibling::div

This xpath finds the font with your unique text then it's sibling (same parent) div

This xpath identifier is another option:

//font[text()='unique text']/parent::*/div

this xpath finds the font with your unique text then get it's * (any) parent then gets the relevant div inside it.

You can do the parent axes to up again if you want "div1".

Looks like this in devtools:

This is based on your html looking like:

<div class="generic classname" id="generic ID name" >
	<div class="presentation" id="body presentation">
		<font>unique text</font>
		<div class="generic classname" id="generic ID name""> 
            // under this div I have the table entry.
            // multiple <td> and <tr>
		</div>
	</div>
</div>

Different HTML would need a different xpath so please say if you need to update.

As per the HTML:

<div class="generic classname" id="generic ID name" >  // div1
	<div class="presentation" id="body presentation">      // div2
		<font>unique text</font>
		<div class= "generic classname" id="generic ID name"> //div3
			// under this div I have the table entry.
			// multiple <td> and <tr>
		</div>
	</div>
</div>

As your usecase is not dependent on any of the <div1> attributes, you can easily avoid considering <div1>.

Solution

To locate the third <div> you have four approaches as follows:

• Using the text unique text and <div> attributes:

  //font[text()='unique text']//following::div[@class='generic classname' and @id='generic ID name']
  

• Using the textunique text and index:

  //font[text()='unique text']//following::div[1]
  

• Using the <div2> which have a child <font> tag with text as unique text and <div> attributes:

  //div[./font[text()='unique text']]//following-sibling::div[@class='generic classname' and @id='generic ID name']
  

• Using the <div2> which have a child <font> tag with text as unique text and index:

  //div[./font[text()='unique text']]//following-sibling::div[1]
  

I would search or get the tag of the "unique text" with js.

<script>
  // get the element
  let elem = document.getElementsByName('font');
</script>

https://www.w3schools.com/jsref/met_doc_getelementsbyname.asp

One more option for you:

//div[font='unique text']/div