使用 Playwright 通过异步函数向文本框 A 传递数据

本文介绍了如何使用 Playwright 测试框架，通过异步函数向页面中的文本框传递数据。我们将探讨使用 locator 的推荐方法，并提供示例代码，帮助你解决在 Playwright 测试中异步函数数据传递的问题。

在 Playwright 中，将测试逻辑封装到异步函数中是一种常见的代码组织方式。然而，直接使用 page.$ 获取元素句柄并进行操作，在某些情况下可能会遇到问题，例如元素未正确加载或异步操作导致的问题。Playwright 官方推荐使用 locator 来定位元素并进行操作，这可以提高代码的稳定性和可读性。

使用 locator 向文本框传递数据

locator 提供了一种更可靠的方式来定位页面元素，并且能够自动处理元素加载和重试等问题。以下是一个示例，展示了如何使用 locator 将数据传递到文本框 A：

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

在这个例子中，page.locator('#value1') 返回一个 Locator 对象，它代表了页面中 id 为 value1 的元素。type() 方法用于模拟用户输入，它会将字符串 Hello World! 逐个字符地输入到文本框中。

示例代码：将数据传递到文本框 A 的异步函数

怪兽AI数字人

数字人短视频创作，数字人直播，实时驱动数字人

44

查看详情

我们可以将上述方法封装到一个异步函数中：

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

然后在 Playwright 测试中使用这个函数：

const { test, expect } = require('@playwright/test');

test('simple form', async ({ page }) => {
  const simpleFormUrl = 'your_simple_form_url'; // 替换为你的表单 URL
  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());

  // 添加断言，验证结果
  // 例如：
  // const sumButton = await page.locator('#gettotal');
  // await sumButton.click();
  // const resultElement = await page.locator('#displayvalue');
  // await expect(resultElement).toHaveText(expectedResult.toString());
});

注意事项

• 元素选择器: 确保元素选择器 #value1 正确地指向了目标文本框。可以使用 Playwright 的 Inspector 工具来验证选择器。
• 异步操作: type() 方法是异步的，所以需要使用 await 等待操作完成。
• 错误处理: 在实际应用中，可以添加错误处理机制，例如使用 try...catch 块来捕获潜在的异常。
• 类型转换: 确保传递给 type() 方法的数据是字符串类型，可以使用 toString() 方法进行转换。
• URL: 将 your_simple_form_url 替换为实际的 URL。
• 断言: 务必添加断言来验证测试结果，例如验证文本框中的值是否正确。

总结

使用 locator 是在 Playwright 中与页面元素交互的推荐方式。它提供了更稳定和可靠的 API，能够自动处理元素加载和重试等问题。通过将 locator 与异步函数结合使用，可以编写出更清晰、更易于维护的 Playwright 测试代码。记住要仔细检查元素选择器，并添加断言来验证测试结果。

以上就是使用 Playwright 通过异步函数向文本框 A 传递数据的详细内容，更多请关注php中文网其它相关文章！