Cypress 获得 href 属性

我有一个测试用例，其中我有一个链接，它在一个新的选项卡中打开。因为 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');
});
108908 次浏览
小开
最佳答案

下面的代码应该可以完成您想要完成的任务。

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

小开

解决方案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

小开

我解决了这个问题:

首先检查 href 的值是否正确

第二-创建另一个测试，在其中访问 href

Href 的值在我的案例中是硬编码的。

小开

我在一次测试中使用了类似的方法:

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


});

提交答案