-1

I'm using Vuetify and writing end-to-end tests using Playwright. I see that a v-dialog is being opened with a delay due to animation. My Playwright test very quickly starts interacting with the elements inside the dialog. I want to wait until the dialog is fully open. Otherwise, buttons aren't working since Playwright clicks them before they are interactable.

canbax
  • 3,432
  • 1
  • 27
  • 44
  • Either add a delay to the test or check for the final state of an animated element using a locator with eg `.isVisible` – Panagiotis Kanavos Aug 10 '23 at 07:47
  • How do you interact with the dialog? When you use locators, any action like `click()` or `textContent()` will wait until the element is both visible and actionable before executing. – Panagiotis Kanavos Aug 10 '23 at 07:50

1 Answers1

-1

you can use waitForSelector in your Playwright test to wait for the v-dialog to open before interacting with its elements:

const { chromium } = require('playwright');

(async () => {
const browser = await chromium.launch();
const page = await browser.newPage();

// Navigate to your page with the v-dialog element

// Click the button or perform any action that opens the v-dialog

// Wait for the v-dialog to open and become visible
await page.waitForSelector('.v-dialog', { state: 'visible' });

// Now you can interact with the elements inside the v-dialog
await page.click('.v-dialog button'); // Replace with the actual selector

// Close the browser
await browser.close();
})();
Mohamed Mostafa
  • 520
  • 2
  • 10
  • 1
    That's strongly discouraged in the docs and unnecessary if locators are used. A locator will wait for the final state automatically. In fact, just `click` will wait for the button to be both visible and actionable before sending a click event – Panagiotis Kanavos Aug 10 '23 at 07:47