使用 Playwright 的 Locator 精确控制文本框输入

使用 Playwright 的 Locator 精确控制文本框输入

在 Playwright 测试中，将一些常用的操作，例如输入文本框，封装成独立的函数可以提高代码的可维护性和复用性。然而，直接使用 page.$ 获取元素句柄并进行操作，在某些情况下可能会遇到问题，例如数据无法正确传递到文本框。这时，可以考虑使用 Playwright 提供的 Locator API。

问题分析

原始代码中，通过 page.$('#value1') 获取文本框 A 的元素句柄，然后使用 textboxA.type(a.toString()) 进行输入。虽然 a 的值正确传递到函数中，但文本框 A 却没有被正确填充。这可能是由于多种原因造成的，例如元素选择器不准确、元素加载延迟等。

解决方案：使用 Locator

Playwright 的 Locator API 提供了一种更健壮的方式来定位和操作页面元素。Locator 会在每次操作前重新查找元素，从而避免了元素句柄失效的问题。

以下是使用 Locator 解决上述问题的示例代码：

// Type character by character
await page.locator('#value1').type('Hello World!');

更进一步，可以将输入文本框的逻辑封装成异步函数：

白果AI论文

论文AI生成学术工具，真实文献，免费不限次生成论文大纲 10 秒生成逻辑框架，10 分钟产出初稿，智能适配 80+学科。支持嵌入图表公式与合规文献引用

61

查看详情

async function enterA(page, a) {
  console.log(`Entering ${a}`);
  await page.locator('#value1').type(a.toString());
}

然后在测试用例中调用该函数：

test('simple form', async ({ page }) => {
  console.log(`Navigating to ${simpleFormUrl}`);
  await page.goto(simpleFormUrl);

  const a = 3;
  const b = 2;
  var expectedResult = a + b;

  await enterA(page, a);

  const textboxB = await page.locator('#value2');
  await textboxB.type(b.toString());
});

代码解释

• page.locator('#value1')：使用 CSS 选择器 #value1 定位文本框 A。Locator 会在每次 type 操作前重新查找元素，确保元素存在且可见。
• .type(a.toString())：将变量 a 转换为字符串，并逐个字符地输入到文本框中。

注意事项

• 确保 CSS 选择器 #value1 能够准确地定位到文本框 A。
• 如果页面元素加载存在延迟，可以使用 Locator 的 waitFor 方法等待元素出现。例如：await page.locator('#value1').waitFor();
• Locator 还提供了其他有用的方法，例如 click、fill、textContent 等，可以根据需要选择合适的方法。
• 使用 Locator 可以提高测试用例的健壮性，减少因元素句柄失效而导致的测试失败。

总结

通过使用 Playwright 的 Locator API，可以更有效地控制文本框的输入，并提高测试用例的健壮性。在将页面操作封装成独立函数时，建议使用 Locator 来定位和操作页面元素，以避免潜在的问题。这种方法不仅解决了数据传递问题，也提高了代码的可读性和可维护性。

以上就是使用 Playwright 的 Locator 精确控制文本框输入的详细内容，更多请关注php中文网其它相关文章！