如何在Cypress中验证文本完全可见？

朴素的cy.contains(someVeryLongText).should('be.visible')只会判断元素本身是否可见，哪怕文本被截断、只显示一行也会通过测试，完全达不到验证全部文本可见的需求。下面是几种可靠的解决方案：

方案1：验证元素内容未被截断 #

利用元素的scrollHeight和clientHeight（横向截断用scrollWidth和clientWidth）判断内容是否超出容器：

• scrollHeight：元素内容的总高度（包括超出容器的部分）
• clientHeight：元素的可见高度（容器本身的高度）

如果两者相等，说明内容完全容纳在容器内，没有被截断。代码示例：

cy.contains(someVeryLongText).then($el => {
  // 确保元素本身可见
  expect($el).to.be.visible;
  // 验证纵向无截断
  expect($el[0].scrollHeight).to.equal($el[0].clientHeight);
  // 若需验证横向无截断，加上这行
  expect($el[0].scrollWidth).to.equal($el[0].clientWidth);
});

方案2：验证文本完整尺寸适配容器 #

如果元素没有固定高度（scrollHeight和clientHeight可能本来就相等），可以通过临时元素计算文本的完整尺寸，再和容器尺寸对比：

cy.contains(someVeryLongText).then($el => {
  const containerRect = $el[0].getBoundingClientRect();
  const containerStyle = window.getComputedStyle($el[0]);

  // 创建临时span，复制容器样式以保证文本尺寸计算准确
  const tempTextEl = document.createElement('span');
  tempTextEl.textContent = someVeryLongText;
  tempTextEl.style.font = containerStyle.font;
  tempTextEl.style.whiteSpace = containerStyle.whiteSpace;
  tempTextEl.style.lineHeight = containerStyle.lineHeight;
  document.body.appendChild(tempTextEl);

  const textRect = tempTextEl.getBoundingClientRect();
  document.body.removeChild(tempTextEl);

  // 验证文本尺寸不超过容器可见尺寸
  expect(textRect.height).to.be.lte(containerRect.height);
  expect(textRect.width).to.be.lte(containerRect.width);
  // 确保元素本身可见
  expect($el).to.be.visible;
});

方案3：封装自定义断言（复用性更高） #

把验证逻辑封装成Cypress自定义命令，方便多次调用：

// 在cypress/support/commands.js中添加
Cypress.Commands.add('beFullyVisible', { prevSubject: 'element' }, ($el) => {
  // 验证元素可见
  expect($el).to.be.visible;
  // 验证无纵向截断
  expect($el[0].scrollHeight).to.equal($el[0].clientHeight);
  // 验证无横向截断
  expect($el[0].scrollWidth).to.equal($el[0].clientWidth);
  return $el;
});

// 使用方式
cy.contains(someVeryLongText).should('beFullyVisible');

额外验证：检查是否被其他元素遮挡 #

如果需要确保文本没有被其他元素遮挡，可以通过对比元素的位置信息判断：

cy.contains(someVeryLongText).then($el => {
  const targetRect = $el[0].getBoundingClientRect();
  let isCovered = false;

  // 遍历页面所有元素，检查是否有重叠遮挡
  document.querySelectorAll('body *').forEach(el => {
    if (el === $el[0]) return;
    const elRect = el.getBoundingClientRect();

    // 判断两个矩形是否重叠
    const hasOverlap = !(
      elRect.right < targetRect.left ||
      elRect.left > targetRect.right ||
      elRect.bottom < targetRect.top ||
      elRect.top > targetRect.bottom
    );

    if (hasOverlap) {
      // 计算重叠区域占目标元素的比例，超过10%则认为被遮挡
      const overlapWidth = Math.max(0, Math.min(elRect.right, targetRect.right) - Math.max(elRect.left, targetRect.left));
      const overlapHeight = Math.max(0, Math.min(elRect.bottom, targetRect.bottom) - Math.max(elRect.top, targetRect.top));
      const overlapRatio = (overlapWidth * overlapHeight) / (targetRect.width * targetRect.height);
      if (overlapRatio > 0.1) {
        isCovered = true;
      }
    }
  });

  expect(isCovered).to.be.false;
});

内容的提问来源于stack exchange，提问作者v-moe