如何测试 cypress 中元素的相对位置？

Question

我目前是 cypress 的新手，想要测试“忘记密码”是否应该位于 Facebook 页面的“登录”按钮下方？有办法做到这一点吗？

有没有办法测试 cypress 中元素的相对位置？

Answer 1

我认为你可以使用 jQuery .position()

cy.get('#element1')
  .then($el => $el.position().top)  // get 1st top value
  .then(top1 => {
    cy.get('#element2')
      .then($el => $el.position().top)  // get 2nd top value
      .then(top2 => {
        expect(top1).to.be.gt(top2)
      })
  })

注释

Cypress 使用 jQuery来寻找元素。链接 .then($el => ... 公开包含该元素的 jQuery 对象，因此现在您可以应用不属于 Cypress 命令一部分的其他 jQuery 函数。

事实上，任何其他 Javascript 。

您还可以创建可重用的函数

const getTop = ($el) = $el.position().top;

cy.get('#element1').then(getTop)  
  .then(top1 => {
    cy.get('#element2').then(getTop)
      .then(top2 => {
        expect(top1).to.be.gt(top2)
      })
  })

Answer 2

您可以使用 cypress 方法 next() 来确定 Log in 按钮旁边的元素，如下所示。 next() 获取一组 DOM 元素中紧随其后的同级元素DOM 元素。

cy.get('div[type="submit"]').next().should('have.text', 'Forgot password?')