cypress

Question

我想知道如果 href 属性包含锚标记中的文本，如何使用 cypress 库进行测试。代码如下：

我有一个 div 有很多带有数据属性的锚点。

<div>
    <a href="/tag/hash1/" data-cy="hashtags">#hash1</a>
    <a href="/tag/hash2/" data-cy="hashtags">#hash2</a>
    <a href="/tag/hash3/" data-cy="hashtags">#hash3</a>
    // and many more
</div>

我开始测试，检查每个元素是否有“#”，href 属性是否有“/tag/”：

describe('Test', () => {
  
  it('should navigate to link from hashtag', () => {
    cy.visit('/');
    cy.get('[data-cy="hashtag"]').each((item) => {
      cy.wrap(item).contains('#').should('have.attr', 'href').and('contain', '/tag/');
    })
  })
});

但是我如何检查 href 是否包含标签中显示的文本？

Answer 1

从 cy.get() 生成元素后，您可以将其作为 jQuery 对象引用。 In this case, we'll want to get the text.

describe('Test', () => {
  
  it('should navigate to link from hashtag', () => {
    cy.visit('/');
    cy.get('[data-cy="hashtag"]').each((item) => {
      cy.wrap(item).contains('#').should('have.attr', 'href', `/tag/${item.text().replace('#', '')}`)
    })
  })
});

如果您只是想查看 href 是否包含文本，您可以使用 jQuery attr function.

describe('Test', () => {
  
  it('should navigate to link from hashtag', () => {
    cy.visit('/');
    cy.get('[data-cy="hashtag"]').each((item) => {
      expect(item.text()).to.contain('#');
      expect(item.attr('href')).to.contain(item.text().replace('#', ''));
    })
  })
});

cypress - 如何将 href 与锚文本进行比较

cypress - how to compare href to anchor text