javascript - 检查元素是否有 href 如果它不应该为空 Cypress.io

Question

尝试在 cypress 中做一个 if 语句，找到页面上的所有标签，如果它们有 href，那么它不应该为空。

这是我目前所得到的:

cy.get("a").each($el => {
    cy.wrap($el)
     .should("have.attr", "href")
     .and("include", "/");
});

然而，即使它没有 href，它也会检查所有内容。

Answer 1

Justin Smith 的回答的更新版本，删除了不必要的回调。

只是为了说明 Cypress 链式命令的可读性。

去掉噪音，只用链

cy.get('Selector for the anchor tag')      // sets <a> as the subject
  .should('have.attr', 'href')             // changes subject to href attribute
  .should('not.be.empty')                  // now test the href
  .and('contain', 'foo');                  // also test another criteria here

请注意，此模式与 Cypress 7 无关，它已用于许多以前的版本。

---

检查所有 hrefs

这个问题实际上是在询问一种方法来检查页面上的所有标签。

例如，

<a></a>                      -- should ignore
<a href="/foo"></a>          -- should pass
<a href="/"></a>             -- should pass
<a href=""></a>              -- should fail

一种方法是在 cy.get() 中更具选择性通过移动 .should("have.attr", "href")元素选择器中的谓词。

cy.get("a[href]")                           // get all <a> that have an href
  .each($el => {                            // test individually
    cy.wrap($el.attr('href'), {log:false})  // here we need to cy.wrap
      .should("include", "/")               // because subject needs to change
  })                                      

Cypress 日志

<表类="s-表"><头><日> <日> <日> <日> <正文>1得到一个[href]3通过2断言预期/包括/通过3断言期望/foo 包含/通过4断言期望''包括/失败