Playwright多元素同定位器校验遇strict mode violation错误及解决问询

问题分析 #

你遇到的strict mode violation: locator('.count')错误，是因为Playwright的定位器默认启用严格模式——当定位器匹配到多个元素时，直接调用toHaveText会触发错误，因为该断言默认期望定位器仅匹配单个元素。同时你的原校验方法存在逻辑问题：接收的是数组参数，但却用单个元素的断言逻辑处理，且调用异步函数时未加await，导致执行顺序混乱。

解决方法 #

方法1：批量校验元素与数组值（最简方案） #

Playwright的toHaveText支持直接传入数组，当定位器匹配多个元素时，会按顺序逐个校验元素文本与数组元素的一致性。修改校验方法如下：

const validateFieldValues = async (expectedValues, page) => {
  // 将API返回的数值转成字符串（页面元素文本为字符串类型）
  const stringValues = expectedValues.map(val => val.toString());
  // 批量校验所有.count元素的文本与数组值一一对应
  await expect(page.locator(".count")).toHaveText(stringValues);
};

调用时补上await（异步函数必须等待执行完成）：

await validateFieldValues(fieldValue, page);

方法2：逐个元素精细校验 #

如果需要自定义校验逻辑（比如跳过特定元素、添加额外断言），可以先获取所有匹配元素再遍历校验：

const validateFieldValues = async (expectedValues, page) => {
  const countElements = await page.locator(".count").all();
  // 先校验元素数量与预期值数量一致
  expect(countElements.length).toBe(expectedValues.length);

  // 逐个匹配元素与预期值
  for (let i = 0; i < countElements.length; i++) {
    const expectedText = expectedValues[i].toString();
    await expect(countElements[i]).toHaveText(expectedText);
  }
};

额外修复与注意事项 #

1. 修复路由代码语法错误：你的First Check部分代码中，jp.query语句缺少逗号，会导致语法报错：

// 原错误代码
fieldValue.push(count,
                jp.query(respBody["test"]["check"], "$[?(@.type =='DL')].count"),
                jp.query(respBody["test"]["check"], "$[?(@.type =='VL')].count") // 此处缺少逗号
                jp.query(respBody["test"]["check"], "$[?(@.type =='CL')].count")
)

补上逗号即可解决。

2. 确保顺序一致性：必须保证fieldValue数组的元素顺序，与页面上.count元素的渲染顺序完全一致，否则会出现断言不匹配的错误。

3. 可选优化：精准定位拆分校验
   如果页面上的.count元素属于不同模块（比如Rate、Level等），可以结合父容器定位拆分校验，降低顺序匹配出错的概率：

// 单独校验Rate模块下的.count元素
await expect(page.locator(".rate-container .count")).toHaveText([
  respBody["test"]["rate"]["passed"].toString(),
  respBody["test"]["rate"]["manually_passed"].toString(),
  // ...其他Rate模块值
]);

// 单独校验Level模块下的.count元素
await expect(page.locator(".level-container .count")).toHaveText([
  respBody["test"]["level"]["low"].toString(),
  respBody["test"]["level"]["medium"].toString(),
  // ...其他Level模块值
]);

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