点击cypress中不包含href的链接

Question

我正在自动化我的回归检查表，但我陷入了一个测试用例，我必须测试在新选项卡中打开的链接，因为 Cypress 不支持多个选项卡，所以我想在同一个选项卡中打开该链接。 问题是该按钮在标签中不包含任何 href 链接。这是课程。

注意：如果 href 存在，下面显示的代码片段可以正常工作。

<a rel="noopener noreferrer" target="_blank">
<div class="tooltip" style="width: fit-content;">
<span class="tooltip-trigger">
<button class="button-wrapper default undefined undefined mr-3">Preview</button>
</span>
</div>
</a>

我尝试了多种解决方法，但没有任何效果适合我。 部分如下。

cy.xpath('/html/body/div[1]/div[1]/header/div[2]/a')
          .should('have.attr', 'href').and('include', 'Preview')
          .then((href) => {
            cy.visit(href)
          })

另一种解决方法。

cy.xpath("/html/body/div[1]/div[1]/header/div[2]/a")
        .first()
            .should(($a) => {
              $a.attr("target", "_self");
            }).click();

我也尝试过这个。

cy.xpath("/html/body/div[1]/div[1]/header/div[2]/a")
.invoke("removeAttr", "target")
          .click();

期待社区的回复。

Answer 1

以下解决方案适用于我的案例。

cy.window().then((win) => {
  cy.stub(win, "open")
    .callsFake((url) => {
      return win.open.wrappedMethod.call(win, url, "_self");
    })
    .as("open");
});
cy.get("a").contains("Preview").click();
cy.get("@open").should(
  "have.been.calledWithMatch",
  "{your url}"
);

您可以在此处阅读有关此解决方案的更多信息。 https://glebbahmutov.com/blog/cypress-tips-and-tricks/#deal-with-windowopen

Answer 2

我不确定这是否可以，但由于

href

元素上没有

<a>

，我认为新选项卡是由

onclick

的

<button>

处理程序打开的。

我首先会存根

onclick

并断言它已被调用。

const stub = cy.stub()
cy.get('button')
  .then($button => {
    $button[0].onclick = stub
  })
  .click()

cy.wrap(stub).should('be.called')

然后要在新选项卡 URL 上进行测试，请打开另一个测试并直接

cy.visit()

该 URL。

Answer 3

当我遇到这个问题时，我将目标属性更改为_self。我不确定我的选择器是否会获取您的 a 元素。我不知道带有类tooltip-trigger的span是否是唯一的。

cy.get(`span[class="tooltip-trigger"]`)
.should('be.visible')
.parent()
.parent()
.parent()
.find('a')
.and('have.attr', 'target' , '_blank')
.invoke('attr', , 'target' , '_self')
.click()

//assert location