赛普拉斯捡到了错误的元素？

Question

我正在尝试使用赛普拉斯查找并单击此元素：

<input class="form-control btn btn-primary" type="button" value="Log out">

我尝试了几种变体，但是最接近的是：

 cy.get("input[type='button']").filter('.btn-primary').should('have.value','Log out').click()

因此，当我运行此命令时，会收到以下响应：

expected [ <input.form-control.btn.btn-primary>, 1 more... ] to have value Log out, but the value was Edit.

当然，这里有一个名为“编辑”的按钮，但这不是我想要的按钮。我已经用should('have.value','Log out')子句指定了我想要的东西。

所以-为什么它坚持尝试使用错误的元素并失败？

更新：我终于做到了。

这是我最后使用的解决方案：

cy.get("input[type='button']").filter('.btn-primary').eq(1)
    .should('have.value','Log out').then(($btn) => {
          $btn.click()
        })

Answer 1

你能尝试

cy.get('input').find("[value='Log out']").click()

或

   cy.get("[value='Log out']").click()

显然，您需要开发人员添加ID，但我知道您的情况。

您也可以尝试是否只有一个btn-primary

cy.get('.btn-primary').click()

Answer 2

这是对我有用的解决方案：

cy.get("input[type='button']").filter('.btn-primary').eq(1)
.should('have.value','Log out').then(($btn) => {
      $btn.click()
    })

Answer 3

如何为该按钮设置唯一的testID并使其尽可能简单。

类似的东西：

data-test-id= "log-out-button" //put that in your button code

，然后在赛普拉斯中：

cy.get('[data-test-id="log-out-button"]')
  .click()

即使您可以设置函数来更有效地获取那些testID：

Command.Cypress.add('getTestID', (testID) => {
    cy.get(`[data-test-id="${testId}"]`)
})

，现在您为获取该按钮所做的一切（或每个具有testID的元素为：cy.getTestID('log-out-button')