OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

What's the recommended way to click away from a dialog with Playwright?

  • Thread starter Thread starter Peter
  • Start date Start date
P

Peter

Guest
I'm writing a web app that uses Mantine's <Modal> dialog component. The modal shows an overlay on the background when opened. Clicking on the overlay causes it to close.

I am trying to write a Playwright test that needs to close the dialog by clicking on the overlay. What's the recommended way of clicking outside an element in Playwright?

Here's an example dialog:

Code:
import { Button, MantineProvider, Modal } from "@mantine/core";
import { useState } from "react";

export default function App() {
  const [opened, setOpened] = useState(true);
  return (
    <MantineProvider>
      <Button onClick={() => setOpened(true)}>Open modal</Button>
      <Modal opened={opened} onClose={() => setOpened(false)}>
        This is a modal!
      </Modal>
    </MantineProvider>
  );
}

The best solution I've come up with is using locator.click()'s position option on the page's <body> element to click in the corner of the viewport, like so:

Code:
await page.locator("body").click({ position: { x: 0, y: 0 } });

This works, but it feels hacky. I shouldn't need to specify a location where the dialog is not covering. I'd imagine there's some recommended way to do this.

<p>I'm writing a web app that uses <a href="https://mantine.dev" rel="nofollow noreferrer">Mantine</a>'s <a href="https://mantine.dev/core/modal/" rel="nofollow noreferrer"><code><Modal></code> dialog</a> component. The modal shows an overlay on the background when opened. Clicking on the overlay causes it to close.</p>
<p>I am trying to write a Playwright test that needs to close the dialog by clicking on the overlay. What's the recommended way of clicking outside an element in Playwright?</p>
<p>Here's an example dialog:</p>
<pre><code>import { Button, MantineProvider, Modal } from "@mantine/core";
import { useState } from "react";

export default function App() {
const [opened, setOpened] = useState(true);
return (
<MantineProvider>
<Button onClick={() => setOpened(true)}>Open modal</Button>
<Modal opened={opened} onClose={() => setOpened(false)}>
This is a modal!
</Modal>
</MantineProvider>
);
}
</code></pre>
<p>The best solution I've come up with is using <a href="https://playwright.dev/docs/api/class-locator#locator-click-option-position" rel="nofollow noreferrer"><code>locator.click()</code>'s <code>position</code> option</a> on the page's <code><body></code> element to click in the corner of the viewport, like so:</p>
<pre class="lang-js prettyprint-override"><code>await page.locator("body").click({ position: { x: 0, y: 0 } });
</code></pre>
<p>This works, but it feels hacky. I shouldn't need to specify a location where the dialog is not covering. I'd imagine there's some recommended way to do this.</p>
 
Top