Cypress 检查元素位置答案

【问题标题】：Cypress check element positionCypress 检查元素位置
【发布时间】：2018-04-13 19:35:21
【问题描述】：

使用 Cypress.io，有没有办法检查元素的位置？我有一个问题，在某些情况下，存在一个错误，即滚动条被连续添加和删除，导致页面边缘“抖动”，我希望能够编写一个测试来查看是否发生这种情况断言元素的位置在出现后没有改变。我在文档中没有看到任何关于这种断言的内容。

【问题讨论】：

标签： cypress

【解决方案1】：

我想我明白了；类似：

let initialPosition;

cy.get('button').then(
  ($button) => {
    initialPosition = $button.position();
  }
);

cy.wait(100);

cy.get('button')
  .should(
    ($button) => {
      expect($button.position()).deep.equal(initialPosition);
    }
  );
});

确实没用，但这是我想要的测试。

【讨论】：

【解决方案2】：

是的，您可以通过赛普拉斯检查 CSS 值

例子：

.should('have.css', 'float', 'right');

.should('have.css', 'right', '10px');

.should('have.css', 'top', '50%');

【讨论】：

这不会给出页面上的实际位置，只是应用到元素的样式。