<p dir="auto"><strong>Context:</strong></p>
<ul dir="auto">
<li>Playwright Version: [1.19]</li>
</ul>
<p dir="auto"><strong>Describe the bug</strong><br>
In this below POM demonstration example, visibility check element is duplicated. This is misleading in POM context. So documentation needs to updated.<br>
<a href="https://playwright.dev/docs/test-pom" rel="nofollow">https://playwright.dev/docs/test-pom</a></p>
<p dir="auto">Expected:<br>
await expect(this.coreConceptsLink).toBeVisible();</p>
<p dir="auto">As "this.coreConceptsLink = page.locator('text=Core concepts');"<br>
is already defined in PlaywrightDevPage constructor</p>
<p dir="auto">Actual<br>
await expect(this.page.locator('h1').locator("text=Core concepts")).toBeVisible();</p>
<p dir="auto">Add any other details about the problem here.<br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/43817524/157172929-f81e7edc-7bd5-4db3-84a5-a16c27488b83.png"><img src="https://user-images.githubusercontent.com/43817524/157172929-f81e7edc-7bd5-4db3-84a5-a16c27488b83.png" alt="image" style="max-width: 100%;"></a></p>
<h3 dir="auto">System info</h3>
<ul dir="auto">
<li>Playwright Version: 1.36.0</li>
<li>Operating System: OSX</li>
<li>Browser: N/A</li>
<li>Other info:</li>
</ul>
<p dir="auto"><strong>package.json config file</strong></p>
<div class="highlight highlight-source-json notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&quot;devDependencies&quot;: {
 &quot;@playwright/test&quot;: &quot;^1.36.0&quot;,
}"><pre class="notranslate"><span class="pl-ent">"devDependencies"</span>: {
 <span class="pl-ent">"@playwright/test"</span>: <span class="pl-s"><span class="pl-pds">"</span>^1.36.0<span class="pl-pds">"</span></span>,
}</pre></div>
<p dir="auto">We do not have <code class="notranslate">playwright</code> as a dependency anywhere.</p>
<p dir="auto"><strong>Steps</strong></p>
<ul dir="auto">
<li>Add <code class="notranslate">"@playwright/test": "^1.36.0",</code> to dev dependencies</li>
<li>Run <code class="notranslate">npx playwright install --with-deps</code></li>
</ul>
<p dir="auto"><strong>Expected</strong></p>
<p dir="auto">We get playwright 1.36.0 installed; I can see it's <a href="https://github.com/microsoft/playwright/releases/tag/v1.36.0">a new release only recently available</a></p>
<p dir="auto"><strong>Actual</strong></p>
<pre class="notranslate">╔════════════════════════════════════════════════════════════════════════════════════════════════════════╗
║ Playwright Test integrity check failed:                                                                ║
║ You have @playwright/test version '1.36.0' and 'playwright' version '1.33.0' installed!                ║
║ You probably added 'playwright' into your package.json by accident, remove it and re-run 'npm install' ║
╚════════════════════════════════════════════════════════════════════════════════════════════════════════╝
</pre>
<p dir="auto">cc <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/aslushnikov/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/aslushnikov">@aslushnikov</a></p>