Playwright locator is reassigned after click()

Question

I am getting some strange behavior with the .click() method in a large application built using the angular framework.

When I first click on the locator assigned to next_button the correct button is clicked during the test.

The second click on next_button is on a different button.

The third click on next_button is on the correct button again.

When I use the record test feature, and click on the button twice, the locator does not change, and the locator being clicked on for the second call is: page.getByRole('button').filter({ hasText: 'navigate_next' }).first()

Here is the part of the test where I am getting the strange behavior:

const next_button = page.getByRole('button').filter({ hasText: 'navigate_next' }).nth(2);
await next_button.click();
await expect(page.getByText('Results 11 - 20')).toBeVisible();
await next_button.click();  // this clicks a different button
await next_button.click();  // this click the correct button
await expect(page.getByText('Results 21 - 30')).toBeVisible();
await expect(page.getByRole('button').filter({ hasText: 'navigate_next' }).nth(2)).toBeDisabled();

Any help and explanations as to why this is happening would be GREATLY appreciated!

Answer 1

I can't tell what's exactly going on, but you have to be aware that locators in Playwright are lazy and only locate elements when they're used with an action or assertion.

From the Playwright docs:

Every time a locator is used for an action, an up-to-date DOM element is located in the page. In the snippet below, the underlying DOM element will be located twice, once prior to every action. This means that if the DOM changes in between the calls due to re-render, the new element corresponding to the locator will be used.

Every time you call click() Playwright will figure out matching elements again. Note that you don't need to await locators but only await actions and assertions.

// locator definition
const button = page.locator();
// locate the element matching the definition
// and click it
await button.click();
// locate the element matching the definition
// and check if its visible
await expect(button).toBeVisible();

So I assume your application does some DOM changes on the way.