How to handle locator "or" and dialog overlays?
const dialogCloseBtn = page.getByRole('button', { name: 'Schließen', exact: true });
const newProductBtn = page.getByRole('button', { name: 'Neue Anlagestrategie eröffnen' });
await expect(newProductBtn.or(dialogCloseBtn)).toBeVisible();
if (await dialogCloseBtn.isVisible()) {
await dialogCloseBtn.click();
}Given the following snippet, there is a problem with toBeVisible. Since dialog is just an overlay, newProductBtn is visible but not clickable. Thus, both are visible but only one is clickable. This of course fails the test using toBeVisible but I don't know which assertation to use instead
How can I handle those cases?
References:
- or locator: https://playwright.dev/docs/api/class-locator#locator-or
- toBeVisible assertation: https://playwright.dev/docs/api/class-locatorassertions#locator-assertions-to-be-visible
This thread is trying to answer question "How to handle locator 'or' and dialog overlays?"
Ok got a solution (but maybe there is a better one)
const dialogCloseBtn = page.getByRole('button', { name: 'Schließen', exact: true });
const newProductBtn = page.getByRole('button', { name: 'Neue Anlagestrategie eröffnen' });
await expect(newProductBtn).toBeVisible();
if (await page.getByRole('heading', { name: 'Bitte um Ihre Mithilfe' }).isVisible()) {
await dialogCloseBtn.click();
}
await newProductBtn.click();Here, I wait for the newProductBtn to be visible and thus ensure, that the test only continues with the if statement if (most probably) everything including the dialog is rendered.
Rayrun is a community for QA engineers. I am constantly looking for new ways to add value to people learning Playwright and other browser automation frameworks. If you have feedback, email [email protected].