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

Question

I have an Ionic React app that uses react-router 5 to display various pages.

The app defaults to a login form, but if users go to the support page, there is a contact form.

I'm trying to test the contact form in Playwright with code like this:

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

However, I'm getting an error:

=========================== 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...

The problem is that Playwright is seeing the first email address input on the login form, which is not visible, and then trying to fill that in instead of the visible email address input on the contact page.

Obviously, I never want to fill in an element that isn't visible, so how can I force playwright to only try to fill in visible elements?

Answer 1

You can use page.locator to check for visibility first and then fill in the value.

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

To make tests easier to write, wrap this in a helper function:

  async fillFormElement(
    inputType: 'input' | 'textarea',
    name: string,
    value: string,
  ) {
    await this.page
      .locator(`${inputType}[name=${name}] >> visible=true`)
      .fill(value);
  }