Cypress 获取 href 属性

Question

我有一个测试用例，其中有一个 link 在新选项卡中打开。由于 Cypress 不支持多个选项卡，我想获取 link 的 href 属性，然后在同一个选项卡中打开它。我正在尝试这样做，但由于某种原因它不起作用。

it('Advertise link should refer to Contact page', () => {
    var link = document.querySelector("div.footer-nav > ul > li:nth-child(2) > a").href;
    cy.visit(link);
    cy.title().should('include', 'Text');
});

Answer 1

下面的代码应该可以实现您想要实现的目标。还有一整个recipe with suggestions on how to test links that open in new tabs.

it('Advertise link should refer to Contact page', () => {
   cy.get('div.footer-nav > ul > li:nth-child(2) > a')
     .should('have.attr', 'href').and('include', 'contact')
     .then((href) => {
       cy.visit(href)
     })
})

我还建议通读 Cypress 文档，了解分配和使用变量的最佳方法：https://on.cypress.io/variables-and-aliases

Answer 2

解决方案 1：invoke("attr", "href")

导航到元素的 href 属性中指定的 URL：

cy.get(selector)
      .invoke('attr', 'href')
      .then(href => {
        cy.visit(href);
      });

参考：https://docs.cypress.io/api/commands/invoke.html#Function-with-Arguments

---

解决方案 2：阻止内容在新选项卡中打开。

从锚元素中删除目标属性，然后单击它以导航到同一选项卡中的 URL：

cy.get(selector).invoke('removeAttr', 'target').click()

参考：https://docs.cypress.io/examples/examples/recipes.html#Tab-Handling-and-Links

Answer 3

我解决了这个问题：

首先 - 检查 href 是否有正确的值

其次 - 创建另一个测试，在其中访问该 href

href 的值在我的例子中是硬编码的。

Answer 4

我在测试中使用了类似的东西：

cy.get('a').each(($el) => {
    const herf = $el.attr('href');
    cy.log(herf);

    // then I will do your test:
    cy.visit(link);
    cy.title().should('include', 'Text');

});