title: Playwright locator fails when wrapping the page object
body: <p>I'm having a weird error in Playwright that I don't understand.</p>
  <p>I click a cancel button like this:</p>
  <pre><code>await page.locator('text=Cancel &gt;&gt; button').click();
  </code></pre>
  <p>However, when I add this exact code to my page wrapper I made based on the <a href="https://playwright.dev/docs/test-pom" rel="nofollow noreferrer">Page Object Model</a> docs:</p>
  <pre><code>import { Page } from 'playwright/test';
  
  class MyPage extends Page {
    async clickCancelButton(): Promise&lt;void&gt; {
      await this.page.locator('text=Cancel &gt;&gt; button').click();
    }
  }
  </code></pre>
  <p>Then it fails to find the button:</p>
  <pre><code>test('Click the cancel button', async ({ page }, workerInfo) =&gt; {
  
    const myPage = new MyPage(page);
    await myPage.goToPageWithCancelButton();
    await myPage.clickCancelButton();
  </code></pre>
  <p>I added many other methods to my class and they work as expected, so I don't understand what is going on here.  It's just &quot;wait for the selector and click&quot;.</p>
  <p>Why does it work when I call it directly but fail when it's inside my page wrapper?</p>
  <p><strong>Second try: do not extend Page</strong></p>
  <p>Based on the comment by @hardkoded, I stopped extending Page:</p>
  <pre><code>import { Page } from '@playwright/test';
  
  class MyPage {
    public readonly page: Page;
  
    constructor(page: Page) {
      this.page = page;
    }
  
    async clickCancelButton(): Promise&lt;void&gt; {
      await this.page.locator('text=Cancel &gt;&gt; button').click();
    }
  }
  </code></pre>
  <p>However, I get the same error as described above.</p>