Is it possible to select an anchor tag which contains a h1 which contains the text "Visit Site"?

3
votes

I am using Cypress.io to test my startup's website and would like to select a specific anchor tag.

However, that anchor tag does not have any unique attribute I can use to identify it, therefore I would like to use a child h1 tag containing the text "Visit Site" to help with identifying the anchor tag.

<a href="/blablabla" target="_blank" rel="noopener noreferrer canonical">
  <h1>Visit Site</h1>
</a>

I would not be able to use the href attribute to help identify the anchor tag, as the written test would be used across other pages of the same structure but of different content.

My issue is that I do not know if its possible to select an element based on whether it contains an element of a certain text.

3
javascriptjquerychaicypress
If you want to use Cypress commands (not jQuery), cy.contains('a > h1', 'Visit Site').parent(). The cy.contains(...) yields the h1 and .parent() shifts focus back to a and yields it to the next command chained. – Richard Matsen

3 Answers

3
votes

You can use jQuery's contains selector to find the desired h1 based on text inside it. Once h1 is found, just select its parent which will be your anchor.

let targetH1 = $('a h1:contains("Visit Site")');

console.log(targetH1.parent()); // this will give you the anchor element
1
votes

Hi As per your question I'm prepared example please check this link Example Link

$(document).ready(function(){
$("a").each(function(index,elem){
	let findHeading=$(elem).find("h1:contains('Visit Site')");
  if(findHeading!=undefined)
  {
  	console.log("Index "+index);
  	console.log("Find H1 "+$(findHeading).html());
  }
  
})
	
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="/blablabla" target="_blank" rel="noopener noreferrer canonical">
  <h1>Visit Site</h1>
</a>
<a href="/blablabla" target="_blank" rel="noopener noreferrer canonical">
  <h1>Hello</h1>
</a>
<a href="/blablabla" target="_blank" rel="noopener noreferrer canonical">
  <h1>Visit Site</h1>
</a>

Note: you can see the second A tag h1 contain has hello word

1
votes

For the example... I prevented the default behavior of a link (preventDefault()).

So using the :contains() selector, you can target the link containing a particular text.

It will target ALL of the elements matching... But in practice, if you dont iterate the collection, you will have the first one as a result.

Inn the example here... It throws the parent element of a clicked element. So there is no issue. All depends on what you want to do. ;)

Then... Get the parent() of that target to get the href attribute of the anchor.

$("a h1:contains('Visit Site')").click(function(e){
 e.preventDefault();
 console.log("YEAH! " + $(this).parent().attr("href"))
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href="/blablabla" target="_blank" rel="noopener noreferrer canonical">
  <h1>Visit Site</h1>
</a>
<a href="/hummphh" target="_blank" rel="noopener noreferrer canonical">
  <h1>Wrong link</h1>
</a>
<a href="/hooo" target="_blank" rel="noopener noreferrer canonical">
  <h1>Other link</h1>
</a>