如何在Cypress测试中统计Vue3文本组件的显示行数

问题背景 #

我在Vue 3中实现了一个MoreOrLessTextButton组件，用于将文本限制在指定行数内显示。核心用法如下：

<MoreOrLessTextButton :textToDisplay="testText" :numberOfLines="4" />

当文本超出设定行数时，组件会在末尾添加“..more”链接；点击后展开全部文本，同时显示“(less)”链接，并且能根据屏幕/窗口尺寸自动适配每行长度和行数。

现在我想在Cypress中测试这个组件的行数控制功能，但目前只能通过统计字符数的方式验证：

cy.get('[data-testid="MoreOrLessTextButton"]').invoke('text').then(
  (text) => {
    expect(text.length).to.be.at.most(300)
  })

这种方式需要手动计算每行字符数，逻辑复杂且不准确。我希望能直接验证文本显示的行数是否符合设定，比如实现类似这样的逻辑：

cy.get('[data-testid="MoreOrLessTextButton"]').invoke('text').then(
  (text) => {
    expect(text.lines).to.match(4)
  })

请问有没有现成的方法可以实现这种行数验证？

补充HTML输出示例：

<span data-testid="MoreOrLessTextButton">Lorem ipsum dolor sit amet, constasipi sit amet, (......) consectetue.</span><a> (less)</a>

解决方案 #

直接通过文本内容无法获取行数，因为行数是由DOM布局决定的。可以利用浏览器的DOM API来计算实际显示的行数：

方法1：使用getClientRects()计算行数 #

getClientRects()会返回元素内每个文本行的矩形区域对象数组，数组的长度就是实际显示的行数。

// 先固定窗口尺寸，避免布局变化影响结果
cy.viewport(1280, 720);

cy.get('[data-testid="MoreOrLessTextButton"]').then($el => {
  const lineElements = $el[0].getClientRects();
  expect(lineElements.length).to.equal(4);
});

方法2：结合行高计算行数 #

如果元素的行高是固定的，可以通过scrollHeight除以行高来得到行数：

cy.get('[data-testid="MoreOrLessTextButton"]').then($el => {
  const lineHeight = parseInt(window.getComputedStyle($el[0]).lineHeight);
  const scrollHeight = $el[0].scrollHeight;
  const lineCount = Math.round(scrollHeight / lineHeight);
  expect(lineCount).to.equal(4);
});

注意事项 #

• 测试前务必固定窗口尺寸，否则不同宽度下行数会变化，导致测试不稳定。
• 如果“..more”或“(less)”链接单独占一行，需要调整断言的行数（比如加1），具体根据组件的实际布局来调整。
• 展开状态下，可以对比元素文本和原始文本是否一致，来验证全部内容已显示：

cy.get('[data-testid="MoreOrLessTextButton"]').invoke('text').then(displayedText => {
  expect(displayedText).to.equal(testText); // testText为原始完整文本
});

内容的提问来源于stack exchange，提问作者St. Jan