[BUG] Playwright fills out a test value into the wrong form field while testing a form submission

[boldchains]

Context:

• Playwright Version: [what Playwright version do you use?] 1.25.2
• Operating System: [e.g. Windows, Linux or Mac] Mac
• Node.js version: [e.g. 12.22, 14.6] v16.16.0
• Browser: [e.g. All, Chromium, Firefox, WebKit] Chromium
• Extra: [any specific details about your environment]

Code Snippet

test("admin can create/delete a user", async ({ page }) => {
    const firstName = faker.name.firstName();
    const lastName = faker.name.lastName();
    const userEmail = faker.internet.email(firstName, lastName);
    const password = "P@ssw0rd";

    // Admin user can create a user
    await page.locator("id=create-user-email").fill(userEmail);
    await page.locator("id=create-user-firstname").fill(firstName);
    await page.locator("id=create-user-lastname").fill(lastName);
    await page.locator("id=create-user-password").fill(password);
    await page.locator("id=create-user-password-confirm").fill(password);

    await page.waitForSelector("id=create-user-role");
    await page.locator("id=create-user-role").click();
    await page.locator(`li[role="option"]:has-text("User")`).click();
    await page.locator("id=create-user-button").click();
    await page.waitForURL(`/users`);

    // should have one row within the users list
    const rowSelector = `div[role="row"]:has-text("${userEmail}")`;
    await page.waitForSelector(rowSelector);
    await expect(await page.$$(rowSelector)).toHaveLength(1);
    const row = await page.locator(rowSelector);
    await expect(row).toContainText(userEmail.toLowerCase());
    await expect(row).toContainText(firstName);
    await expect(row).toContainText(lastName);
    await expect(row).toContainText("User");

    // delete user
    await page
      .locator(`div[role="row"]:has-text("${userEmail}") >> button`)
      .nth(1)
      .click();
    await page.locator("text=Confirm").click();
    await expect(await page.locator(rowSelector).count()).toEqual(0);
  });
});

Describe the bug

I detected some strange behaviour while filling out the multiple fields, it's not happening every time, but it does happened sometimes. Instead of filling out the password into confirm password field, it was filling out into user email field. What would make this happen?

[mxschmitt]

Does it happen with every browser? Can you provide us a repro which we can run locally?

[boldchains]

It happens for only Chromium browser. Unfortunately, I am not able to share the repo with you

[mxschmitt]

Then we unfortunately have to assume that it's an issue within your application, if you are able to share a repro in the future, then feel free to file a new issue with it. closing for now since we can't act on it.

[Krisell]

Just wanted to add here that we were experiencing the same thing in a project and the reason was a delayed explicit autofocus (document.getElementById('some-id').focus() in a timeout). We solved that for now by skipping that when Playwright runs (and we know it's of course not ideal to make testing-specific changes to the app).

[guido-visser]

Our application does the same thing when a form appears, it gives focus to the first input field it finds (element.focus()). In most cases Playwright is later than the focus() event and it works fine. However, sometimes Playwright is quicker causing a fill in an unwanted place.

Could there be some sort of implementation (or an event listener for the focus event) to wait until that first field is in focus? (it's a generic field in my case, which makes it a bit more complex)

@Krisell Could you share how you let the application know it was Playwright running? I've tested some with environment variables, but that doesn't seem to work. Much appreciated!

[guido-visser]

Found a solution posted here, re-posting it here for quick reference.

test.beforeEach(async ({ page, context }) => {
        await context.addInitScript(() => (window.isUnderTest = true));
});

Then use window.isUnderTest in your application code to check.

[Krisell]

@Krisell Could you share how you let the application know it was Playwright running? I've tested some with environment variables, but that doesn't seem to work. Much appreciated!

Here's how we do that: #9468 (comment)