title: Check if element is visible in Playwright
body: <p>I'm using Playwright 1.15.2 for testing and facing a problem with elements' visibility. I want to check if a modal is visible on screen so I can close it. The modal starts with <code>display:none</code> and turns into <code>display:block</code>. Also, the modal informs incorrectness in form data so it may or may not appear (i.e. I can't <code>waitForSelector</code>).</p>
  <p>Currently, I have a code similar to the following:</p>
  <pre class="lang-js prettyprint-override"><code>const myModal = await page.$(&quot;#modal&quot;);
  if (await myModal.isVisible()) {
    await page.waitForSelector('#modal &gt; .modal-dialog &gt; .modal-content &gt; .modal-footer &gt; .btn-close');
    await page.click('#modal &gt; .modal-dialog &gt; .modal-content &gt; .modal-footer &gt; .btn-close');
  }
  </code></pre>
  <p>I've also tried:</p>
  <pre class="lang-js prettyprint-override"><code>const myModal = await page.$(&quot;#modal:visible&quot;);
  if (myModal) {
  ...
  </code></pre>
  <p>Using <code>page.$(&quot;text=modal title &gt;&gt; visible=true&quot;)</code> or switching <code>page.$</code> to <code>page.locator</code> (with all the aforementioned selectors) also didn't work.</p>
  <p>The accepted answer for <a href="https://stackoverflow.com/questions/64784781/how-to-check-if-an-element-exists-on-the-page-in-playwright-js">this question</a> didn't work as well.</p>
  <p>Could anyone help me with that?</p>