如何动态设置nth()索引值，实现多环形图的并行测试？

现有两个异步测试函数用于验证环形图进度：

• donutChartPercentage：获取环形图内显示的百分比文本
• donutChartProgress：通过stroke-dasharray属性计算环形图的实际进度百分比

当前函数固定使用nth(1)定位第一个环形图，以下是改造方案，让函数支持传入动态索引，从而可以并行验证多组环形图：

修改后的函数代码 #

1. 改造donutChartPercentage函数 #

添加index参数（设置默认值1以兼容原有调用逻辑），将固定的nth(1)替换为传入的索引值：

async function donutChartPercentage(page, index: number = 1) {
  const donutChartPercentageText = await playerBioObject(page).donutChartLabel.nth(index).textContent();
  return donutChartPercentageText;
}

2. 改造donutChartProgress函数 #

同样添加index参数，替换环形图元素定位的固定索引：

async function donutChartProgress(page, index: number = 1) {
  const inputElement = statisticsObject(page).donutChartCircleProgress.nth(index);
  const myText = await inputElement.getAttribute('stroke-dasharray');
  const progressText: string = (myText?.split(" ")[0])!;
  const progressNumber: number = parseFloat(progressText);
  const finalPercentageNumber = Math.round(progressNumber / 31.4 * 100);
  return finalPercentageNumber.toString();
}

调用方式示例 #

验证指定索引的环形图 #

比如验证第2组环形图：

expect(await donutChartProgress(page, 2) + "%").toEqual(await donutChartPercentage(page, 2));

并行验证多组环形图 #

若已知页面环形图总数，可通过循环批量验证：

// 假设页面有3组环形图
for (let i = 1; i <= 3; i++) {
  expect(await donutChartProgress(page, i) + "%").toEqual(await donutChartPercentage(page, i));
}

内容的提问来源于stack exchange，提问作者Sundeep Sandhu