使用 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!');更进一步，可以将输入文本框的逻辑封装成异步函数：
Shell本身是一个用C语言编写的程序，它是用户使用Linux的桥梁。Shell既是一种命令语言，又是一种程序设计语言。作为命令语言，它交互式地解释和执行用户输入的命令；作为程序设计语言，它定义了各种变量和参数，并提供了许多在高级语言中才具有的控制结构，包括循环和分支。它虽然不是Linux系统核心的一部分，但它调用了系统核心的大部分功能来执行程序、建立文件并以并行的方式协调各个程序的运行。因此，对于用户来说，shell是最重要的实用程序，深入了解和熟练掌握shell的特性极其使用方法，是用好Linux系统
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 来定位和操作页面元素，以避免潜在的问题。这种方法不仅解决了数据传递问题，也提高了代码的可读性和可维护性。
