使用Cypress获取文本的最佳选择器

Question

我正在学习Cypress选择器策略的最佳实践。考虑到我希望从Cypress Releases页面获得发布号，下面的HTML片段如下：

<div class="main-content-article-wrapper">
  <article class="main-content-article hide-scroll">
    <h1 class="main-content-title">Changelog</h1>
    <div class="nuxt-content">
      <h2 id="9-5-4">
        <a href="#9-5-4" aria-hidden="true" tabindex="-1"><span class="icon icon-link">
             </span>
          </a>9.5.4
      </h2>

...what将是从9.5.4 <h2>获得9.5.4版本号文本的最佳的、未来的校对选择器。

我的想法是，用于Changelog的<h1>文本不太可能改变，但是包含文本的<h2>既不是子版本，也不是兄弟姐妹。

就像这样吗？

cy.get("div.nuxt-content")
  .first("h2").then((txt=>{
   const versionTxt = txt.find("a").text()
   expect(versionTxt).to.equal('9.5.4')

但是，这无法找到目标文本。

Answer 1

您的测试失败，因为文本'9.5.4'在</a>结束标记之外，而.text()只给您提供innerText。

基于HTML，

cy.get("div.nuxt-content")
  .first("h2").then((txt=>{
   const versionTxt = txt.text()
   expect(versionTxt).to.equal('9.5.4')

或

cy.get('h2[id="9-5-4"]')
  .invoke('text')
  .should('eq', '9.5.4')

Answer 2

您可以使用include.text检查版本号。

cy.get('h2#9-5-4').should('include.text', '9.5.4')

Answer 3

根据您的用例，using cy.contains可能是一个可行的选择。它不会使用选择器，但在某些情况下可能是一个更好的解决方案(例如，过于复杂的HTML只有一个特定文本的元素)。

// Just getting the element
cy.contains('9.5.4');
// Validating element exists -- implied by above, but explicit below
cy.contains('9.5.4').should('exist');