编剧：两个同名的元素，如何填充可见的那个？

Question

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

\n

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

\n

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

\n

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

\n

但是，我收到错误：

\n

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

\n

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

\n

显然，我从来不想填充不可见的元素，那么我如何强制剧作家只尝试填充可见元素呢？

\n

Answer 1

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

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