[Bug]: addLocatorHandler blocks

[ruifigueira]

Version

1.43.1

Steps to reproduce

Run the following test:

test("play wordle", async ({ page }) => {
    page.addLocatorHandler(page.getByRole('heading', { name: 'How To Play' }), async () => {
        await page.getByLabel('Close').click();
    });

    await page.goto('https://www.nytimes.com/games/wordle/index.html');
    await page.getByTestId('Play').click();
    for (const letter of 'salet')
        await page.locator(`[data-key=${letter}]`).click();
});

Expected behavior

It should close the help dialog and type SALET

Actual behavior

It closes the help dialog and blocks, not typing any letter. I'm attaching the captured trace:

trace.zip

Additional context

No response

Environment

System:
    OS: Windows 11 10.0.22631
    CPU: (8) x64 11th Gen Intel(R) Core(TM) i5-1135G7 @ 2.40GHz
    Memory: 11.32 GB / 31.74 GB
  Binaries:
    Node: 18.16.0 - ~\scoop\apps\nvm\current\nodejs\nodejs\node.EXE
    npm: 9.7.1 - ~\scoop\apps\nvm\current\nodejs\nodejs\npm.CMD
    pnpm: 8.15.4 - ~\AppData\Local\pnpm\pnpm.EXE
  IDEs:
    VSCode: 1.88.1 - C:\Users\rui.figueira\scoop\apps\vscode\current\bin\code.CMD
  npmPackages:
    @playwright/test: ^1.43.1 => 1.43.1

[ruifigueira]

I missed an await. New version of the test:

test('play wordle', async ({ page }) => {
    await page.addLocatorHandler(page.getByRole('heading', { name: 'How To Play' }), async () => {
        await page.getByLabel('Close').click();
    });

    await page.goto('https://www.nytimes.com/games/wordle/index.html');
    await page.getByTestId('Play').click();
    for (const letter of 'salet')
        await page.locator(`[data-key=${letter}]`).click();
});

And it's still failing. Trace:
trace_v2.zip

[ruifigueira]

Ok, I figured it out. The callback was being called twice because clicking the Close button was not closing the dialog immediately.

To fix it, I have to wait for the locator to disappear:

test('play wordle', async ({ page }) => {
  await page.addLocatorHandler(page.getByRole('heading', { name: 'How To Play' }), async () => {
    await page.getByLabel('Close').click();
    await page.getByRole('heading', { name: 'How To Play' }).waitFor({ state: 'hidden' });
  });

  await page.goto('https://www.nytimes.com/games/wordle/index.html');
  await page.getByTestId('Play').click();
  for (const letter of 'salet')
    await page.locator(`[data-key=${letter}]`).click();
});

This pattern happens a lot due to fadeout animations. Maybe it would be worth to add a paragraph explaining this in the documentation.

[cyrus-afshari]

Ok, I figured it out. The callback was being called twice because clicking the Close button was not closing the dialog immediately.

To fix it, I have to wait for the locator to disappear:

test('play wordle', async ({ page }) => {
  await page.addLocatorHandler(page.getByRole('heading', { name: 'How To Play' }), async () => {
    await page.getByLabel('Close').click();
    await page.getByRole('heading', { name: 'How To Play' }).waitFor({ state: 'hidden' });
  });

  await page.goto('https://www.nytimes.com/games/wordle/index.html');
  await page.getByTestId('Play').click();
  for (const letter of 'salet')
    await page.locator(`[data-key=${letter}]`).click();
});

This pattern happens a lot due to fadeout animations. Maybe it would be worth to add a paragraph explaining this in the documentation.

You spared me a lot of time and frustration! Thanks for sharing this, I was having the same issue and adding the waitFor({ state: 'hidden' }) solved it for me. Playwright's documentation on addLocatorHandler() should include your suggestion!

[dgozman]

@cyrus-afshari Implicit waitFor at the end is now the default behavior of addLocatorHandler(). If that does not work for you, could you please file a new issue by filling in the "Bug Report" template and provide a repro?

[cyrus-afshari]

@cyrus-afshari Implicit waitFor at the end is now the default behavior of addLocatorHandler(). If that does not work for you, could you please file a new issue by filling in the "Bug Report" template and provide a repro?

I am on version 1.43.1, so I believe I don't have that new default behavior