如何使用赛普拉斯比较 React JS 中两个 div 的 css 宽度？

Question

我的 UI 上有 2 个 div，它们的宽度必须相同才能使 Cypress 场景通过。

我知道如何将宽度与静态值匹配，例如...

cy.get('[aria-label="div1"]').should('have.css', 'width', '150px');
cy.get('[aria-label="div2"]').should('have.css', 'width', '150px');

但是，我想比较 div1 和 div2 的宽度并确保它们相同 - 因为它不一定总是 150 像素。

我怎样才能做到这一点？

Answer 1

你可以这样做：

cy.get('[aria-label="div1"]')
  .invoke('css', 'width')
  .then((width1) => {
    cy.get('[aria-label="div2"]')
      .invoke('css', 'width')
      .then((width2) => {
        expect(width1).to.equal(width2)
      })
  })

Answer 2

您也可以 select 将两者放在一起并在一个函数中进行比较，

  cy.get('[aria-label^="div"]')
    .should($els => {
      expect($els[0].style.width).to.eq($els[1].style.width)
    })

如何使用赛普拉斯比较 React JS 中两个 div 的 css 宽度？

How to compare css width of two divs in React JS using Cypress?

reactjs

cypress