[Question] How to wait for a Locator to be visible?

[TimeInvestor]

Context:
In Page Object Model, I would create a page object like this

import { Locator, Page } from '@playwright/test';

export class PlaywrightDevPage {
  readonly page: Page;
  readonly getStartedLink: Locator;

  constructor(page: Page) {
    this.page = page;
    this.getStartedLink = page.locator('text=Get started');
  }

  async goto() {
    await this.page.goto('https://playwright.dev');
    // duplicate selector appearence
    await this.page.waitForSelector(''text=Get started'');
  }
}

Because Locator.isVisible() does not wait for the element to become visible and returns immediately, I have to use waitForSelector method. But there is no supported function like page.waitForSelector(locator: Locator) or page.waitForLocator(locator: Locator) or Locator.waitUtil(state: State).

@TimeInvestor - I think you are looking for this - #8577

[TimeInvestor]

Yes, something like that.
The example I gave may not be a good one, but it shows the essential part of the challenge: When locator usage is recommended and assertion/expect in not recommended in Page Objects, having Locator.waitFor() does help a lot.

[A-ZC-Lau]

Maybe you can get around this by accessing the elementHandle

i.e. await this.page.locator("text='Get started'").elementHandle()

[TimeInvestor]

@A-ZC-Lau that works. Thanks for the advice.

[aslushnikov]

@TimeInvestor in Playwright Test, you can use web-first assertions:

  async goto() {
    await this.page.goto('https://playwright.dev');
    await expect(this.getStartedLink).toBeVisible();
  }

[TimeInvestor]

@aslushnikov Thanks for the tip.
Why I did not consider the solution is that there is some advice against assertions in page object citing that page object should be clear of test intend.

[TimeInvestor]

And await expect(locator).toBeVisible(); will fail if the element takes time to get loaded. At this point of time, I think we should really add back the timeout option in locator.isVisible([options]) 😅

[awarecan]

await this.page.waitForSelector("text=Get started", {state: "visible"});

[TimeInvestor]

await this.page.waitForSelector("text=Get started", {state: "visible"});

I want to resue the locator in my page object.

[awarecan]

I see what you are asking now, that has been implemented in #9200

[TimeInvestor]

I see what you are asking now, that has been implemented in #9200

Yes, that's it!
Thanks.

[JoelEinbinder]

Looks like this has been resolved.

[kartal-huseyin]

What about java