Cypress获取href属性

Question

我有一个测试案例，其中有一个链接会在新标签页中打开。由于 Cypress 不支持多个标签页，因此我想获取该链接的 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');
});

- Max

---

“它不起作用”你能更清楚一些吗？你看到了什么具体的行为，你想要看到什么？ - Hamms

还有一些需要考虑的事情- 1）var link是否获取正确的路径 2）您在浏览器中进行了测试吗 3）visit()是否需要使用cy.wait()等待页面稳定？ - Richard Matsen

Answer 1

下面的代码应该可以实现您想要的功能。此外，还有一个完整的方案，介绍了如何测试在新选项卡中打开链接的建议。

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

- Jennifer Shehane

---

"href" 是一个 JQuery<HTMLElement>，因此编译器会发出警告，因为它无法赋值给字符串，但是在运行测试时它能够正常工作。如何避免这个警告？我正在使用 Visual Studio Code 和 Cypress 8.3.1。 - Alex 75

你可以通过将 JQuery 元素转换为字符串来避免警告：cy.visit(String(href))。 - user640232

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：防止内容在新标签页中打开。

从锚点元素中删除 target 属性，然后单击它以在同一标签页中导航到其 URL：

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

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

- Mobiletainment

---

这是一个惊人的方法，可以在不进入新标签页的情况下进行测试，而这在cypress中是不支持的。非常感谢！ - krankuba

Answer 3

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

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');

});

- Marco Amato

Answer 4

我解决了这个问题：

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

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

在我的情况下，href 的值是硬编码的。

- srgj

---

只是一些侧面的注释：

• 您的选择器是“div.footer-nav> ul> li:nth-child(2)> a”，太复杂了，如果有一种简单的方法来选择该值（也许检查属性或者href是否以特定的内容开头）
• Cypress的理念是端到端测试，因此一个测试应该比单元/集成测试更大且执行更多的断言。

- Marco Amato