1

我有一个 Ionic React 应用程序，它使用react-router5 来显示各种页面。

该应用程序默认为登录表单，但如果用户转到支持页面，则会有一个联系表单。

我正在尝试使用以下代码测试 Playwright 中的联系表单：

  await page.fill('input[name=mail]', 'playwright@example.com');

但是，我收到一个错误：

=========================== logs ===========================
waiting for selector "input[name=mail]"
  selector resolved to 2 elements. Proceeding with the first one.
  selector resolved to hidden <input name="mail" type="email" placeholder="" autocorr…/>
elementHandle.fill("playwright@example.com")
  waiting for element to be visible, enabled and editable
    element is not visible - waiting...

问题是 Playwright 看到登录表单上的第一个电子邮件地址输入是不可见的，然后尝试填写它而不是联系页面上的可见电子邮件地址输入。

显然，我从不想填充不可见的元素，那我怎么能强迫剧作家只尝试填充可见元素呢？

4

2 回答 2

1

如果您尝试检查元素是否可见，则可以通过这种方式完成。即使您有两个相同的元素，一个选择器一个隐藏一个可见。

const element = await page.waitForSelector(selector, {state:visible});
await element.fill(yourString);
于 2022-03-04T16:56:45.250 回答
0

您可以使用page.locator先检查可见性，然后填写值。

  await page.locator('input[name=mail] >> visible=true').fill('playwright@example.com');

为了使测试更容易编写，将其包装在一个辅助函数中：

  async fillFormElement(
    inputType: 'input' | 'textarea',
    name: string,
    value: string,
  ) {
    await this.page
      .locator(`${inputType}[name=${name}] >> visible=true`)
      .fill(value);
  }
于 2022-03-04T05:08:01.703 回答