Можно ли выбрать тег привязки, который содержит h1, который содержит текст «Посетить сайт»? - PullRequest
Новая
       27

Можно ли выбрать тег привязки, который содержит h1, который содержит текст «Посетить сайт»?

3 голосов
/ 18 февраля 2020

Я использую Cypress.io для тестирования веб-сайта моего запуска и хотел бы выбрать указанный c тег привязки.

Однако этот тег привязки не имеет какого-либо уникального атрибута, который я могу использовать для его идентификации поэтому я хотел бы использовать дочерний тег h1, содержащий текст «Посетить сайт», чтобы помочь в идентификации тега привязки. 

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

Я бы не смог использовать атрибут href для помогите определить тег привязки, так как письменный тест будет использоваться на других страницах той же структуры, но разного содержания.

Моя проблема в том, что я не знаю, возможно ли выбрать элемент на основе того, содержит элемент определенного текста.

Ответы [ 3 ]

3 голосов
/ 18 февраля 2020

Вы можете использовать селектор содержимого jQuery, чтобы найти нужный h1 на основе текста внутри него. Как только h1 найден, просто выберите его родителя, который будет вашим якорем. 

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

console.log(targetH1.parent()); // this will give you the anchor element
1 голос
/ 18 февраля 2020

Для примера ... Я предотвратил поведение ссылки по умолчанию (preventDefault()).

Поэтому, используя селектор :contains() , вы можете настроить таргетинг на ссылку, содержащую конкретный текст.

Он будет нацелен на ВСЕ соответствующие элементы ... Но на практике, если вы не выполните итерацию коллекции, вы получите первый результат.

В приведенном здесь примере .. . Он выбрасывает родительский элемент элемента, по которому щелкнули. Так что нет проблем. Все зависит от того, что вы хотите сделать. ;)

Тогда ... Получите parent() этой цели, чтобы получить атрибут href привязки. 

$("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>
1 голос
/ 18 февраля 2020

Привет. По вашему вопросу я подготовил пример, пожалуйста, проверьте эту ссылку Пример ссылки 

$(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>

Примечание: вы можете увидеть второй A тег h1 содержит имеет hello слово

...