是否可以 select 包含 h1 的锚标记，其中包含文本 "Visit Site"？

Question

我正在使用 Cypress.io 来测试我的初创公司的网站，并且想要 select 一个特定的锚标记。

但是，该锚标记没有任何可用于识别它的唯一属性，因此我想使用包含文本 "Visit Site" 的子 h1 标记来帮助识别锚标签。

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

我无法使用 href 属性来帮助识别锚标记，因为笔试将用于结构相同但内容不同的其他页面。

我的问题是，我不知道是否可以根据元素是否包含特定文本的元素来 select 元素。

Answer 1

您好，根据您的问题，我已经准备好示例，请查看此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>

注：你可以看到第二个A标签h1包含有hello个字

Answer 2

您可以使用 jQuery 的包含 select 或根据其中的文本找到所需的 h1。找到 h1 后，select 它的父级将成为您的锚点。

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

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

Answer 3

例如...我阻止了 link (preventDefault()) 的默认行为。

因此，使用 :contains() selector，您可以定位包含特定文本的 link。

它将以匹配的所有元素为目标...但在实践中，如果您不迭代集合，结果将是第一个。

这里的例子...它抛出点击元素的父元素。所以没有问题。一切都取决于你想做什么。 ;)

然后...获取那个target的parent()得到anchor的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>

是否可以 select 包含 h1 的锚标记，其中包含文本 "Visit Site"？

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

javascript

jquery

chai

cypress