编剧：两个同名元素，可见的怎么填？

Question

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

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

我正在尝试使用如下代码测试 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 看到登录表单上输入的第一个电子邮件地址不可见，然后尝试填写该地址而不是联系页面上输入的可见电子邮件地址。

很明显，我从来不想填充不可见的元素，那么我怎么能强制编剧只尝试填充可见的元素呢？

Answer 1

可以使用page.locator到check for visibility first然后填入数值

  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);
  }

Answer 2

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

const element = await page.waitForSelector(selector, {state:visible});
await element.fill(yourString);

编剧：两个同名元素，可见的怎么填？

Playwright: Two elements with the same name, how to fill the one that is visible?

playwright

playwright-test