如何在Cypress中实现带重试机制的元素上下位置校验？

要实现两个通过cy.contains()定位的元素都被重试，核心是让两个元素的查询逻辑都处于Cypress的断言重试上下文中。之前的写法仅会重试第二个元素的定位，因为第一个元素的查询是在断言外执行的，只会运行一次。

标准实现方式 #

将两个元素的查询、存在性校验、位置比较全部放在同一个should()回调内，Cypress会自动重试整个回调直到所有断言通过或超时：

const text1 = "目标文本1";
const text2 = "目标文本2";

cy.get('body').should($body => {
  // 每次重试时重新查找两个元素
  const $el1 = $body.find(`:contains("${text1}")`);
  const $el2 = $body.find(`:contains("${text2}")`);

  // 先确保元素存在且唯一（避免匹配多个元素导致错误）
  expect($el1).to.have.length(1, `未找到唯一匹配text1的元素`);
  expect($el2).to.have.length(1, `未找到唯一匹配text2的元素`);

  // 获取元素位置并校验上下关系
  const rect1 = $el1[0].getBoundingClientRect();
  const rect2 = $el2[0].getBoundingClientRect();

  expect(rect1.top).to.be.greaterThan(rect2.top, `元素1未位于元素2下方`);
});

为什么这个方法有效 #

• cy.get('body').should()会触发Cypress的重试机制，回调函数会被反复执行，直到所有expect断言都通过。
• 每次重试时，$body.find()会重新查找两个元素，确保拿到最新的DOM节点和位置信息，完美适配拖拽过程中元素位置动态变化的场景。

注意事项 #

• 若页面中存在多个匹配同一文本的元素，需调整选择器（比如结合元素标签、类名）来确保find()能定位到唯一目标元素，避免have.length(1)断言失败。
• 可以根据实际需求调整位置校验逻辑，比如用rect1.bottom > rect2.top来校验元素1的顶部在元素2的底部下方，实现更精准的上下位置判断。

内容的提问来源于stack exchange，提问作者Alexey Romanov