使用赛普拉斯获取文本的最佳选择器

Question

我正在学习赛普拉斯选择器策略的最佳实践。鉴于我想从 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>

...用于从 <h2> 获取 9.5.4 版本号文本的最佳选择器是什么？

我的想法是 <h1> 的 Changelog 文本不太可能更改，但包含该文本的 <h2> 既不是 child 也不是兄弟姐妹.

所以是这样的？

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

但是，找不到目标文本

Answer 1

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

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

Answer 2

您的测试失败，因为文本 '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 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');

使用赛普拉斯获取文本的最佳选择器

Best selector for obtaining text using Cypress

jquery

selector

cypress