如何使用Cypress比较React JS中两个div的css宽度

Question

我的UI上有两个div，其宽度必须相同，Cypress场景才能通过。

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

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

然而，我想比较div1和div2的宽度，并确保它们相同——因为它不需要总是150px。

我怎样才能做到这一点？

Answer 1

您也可以同时选择两者并在函数中进行比较

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

Answer 2

您可以这样做：

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)
})
})