Estoy usando Playwright 1.15.2 para probar y enfrentar un problema con la visibilidad de los elementos. Quiero verificar si un modal está visible en la pantalla para poder cerrarlo. El modal comienza con display:none y se convierte en display:block . Además, el modal informa la incorrección en los datos del formulario, por lo que puede aparecer o no (es decir, no puedo esperar a waitForSelector ).
Actualmente, tengo un código similar al siguiente:
const myModal = await page.$("#modal"); if (await myModal.isVisible()) { await page.waitForSelector('#modal > .modal-dialog > .modal-content > .modal-footer > .btn-close'); await page.click('#modal > .modal-dialog > .modal-content > .modal-footer > .btn-close'); }También he intentado:
const myModal = await page.$("#modal:visible"); if (myModal) { ... Usar page.$("text=modal title >> visible=true") o cambiar page.$ a page.locator (con todos los selectores antes mencionados) tampoco funcionó.
La respuesta aceptada para esta pregunta no funcionó tan bien.
¿Alguien podría ayudarme con eso?
page.$("text=modal title >> visible=true") no espera hasta que el elemento esté en el DOM y sea visible.
necesitas usar:
await expect(page.locator("text=modal title")).toBeVisible()
ver aquí: https://playwright.dev/docs/test-assertions#expectlocatortobevisibleoptions
Lo resolví usando waitFor con un state diferente
constructor(page: Page) { this.page = page; this.myElement = page.locator('div.myElement'); } async isMyElementVisible() { await this.myElement.waitFor({ state: 'visible' }); return await this.myElement.isVisible(); } async isMyElementHidden() { await this.myElement.waitFor({ state: 'hidden' }); return await this.myElement.isHidden(); }