如何用Cypress获取动态表格中Chrome的CPU数值？

由于表格刷新后行列位置会动态变化，不能依赖固定的行列索引定位元素。核心思路是以浏览器名称「Chrome」为锚点定位目标行，再提取该行的CPU列数值，以下是具体实现：

1. 通用实现：通过表头索引定位CPU列 #

如果表格表头（如「CPU」）是固定的，这种方法兼容性最强：

// 获取CPU表头对应的列索引
cy.get('thead th')
  .contains('CPU')
  .invoke('index')
  .then((cpuColumnIndex) => {
    // 定位Chrome所在行，再提取对应列的文本
    cy.contains('tr', 'Chrome')
      .find('td')
      .eq(cpuColumnIndex)
      .invoke('text')
      .then((cpuValue) => {
        // 可对数值进行断言或后续处理
        expect(cpuValue).to.match(/^\d+(\.\d+)?%$/); // 验证数值格式为百分比
        cy.log(`Chrome CPU占用率：${cpuValue}`);
      });
  });

2. 简化实现：通过单元格属性定位 #

如果CPU列的单元格有唯一标识（比如类名cpu-column），可以直接跳过表头索引步骤：

cy.contains('tr', 'Chrome')
  .find('td.cpu-column')
  .invoke('text')
  .then((cpuValue) => {
    cy.log(`Chrome CPU占用率：${cpuValue}`);
    // 其他业务逻辑处理
  });

3. 处理表格刷新的加载等待 #

由于表格会刷新，需先等待表格加载完成再执行定位逻辑：

// 等待表格tbody加载出数据
cy.get('tbody tr').should('have.length.greaterThan', 0);

// 再执行上述提取逻辑
cy.contains('tr', 'Chrome')
  .find('td.cpu-column')
  .invoke('text')
  .then((cpuValue) => {
    // 处理数值
  });

内容的提问来源于stack exchange，提问作者Leonid Slavutin