Búsqueda de sitios web

javascript - ¿Cómo hacer DECLARACIONES CONDICIONALES usando SELECTORES en PLAYWRIGHT?

Necesito algo de ayuda para hacer declaraciones condicionales usando pruebas de Playwright.
Tengo un selector dado, digamos un botón, y necesito escribir una declaración condicional como esta:

if (selector is not present/visible)

    do nothing and proceed with the *next lines of code*

else  

    await page.click(*selector*)

*next lines of code*

¿Hay alguna manera eficiente de hacer este tipo de cosas? No encontré nada en la documentación de Playwright.

Respuesta #1

ACTUALIZACIÓN 2024: Esta respuesta se originó en 2021 cuando los Element Handles (enfoque I) eran un concepto más relevante en Playwright. Como señalaron otros: se recomienda el uso de Locators (enfoque II) en las versiones actuales de Playwright.

I. usando manejadores de elementos dentro de la condición (DEPRECAD0)

Se puede implementar en JavaScript de manera similar a tu pseudo-código usando page.$ (selector), que devuelve null si el elemento especificado no está en el DOM. (Nota: ¡presta atención al uso correcto de los paréntesis dentro de la condición!)

También invertiría tu condición inicial if(falsy)...else en un solo if(truthy), ya que quieres ejecutar un comando solo si el selector existe, la rama else no tiene mucho sentido:

if ((await page.$('#elem-id')) !== null) {
  await page.click('#elem-id')
}
// code goes on with *next lines of code*

II. usando localizadores dentro de la condición (RECOMENDADO)

Algunos pueden notar la advertencia en la documentación "Se desaconseja el uso de ElementHandle, use objetos Locator y afirmaciones web-first en su lugar." Por defecto, no deberías preocuparte por usar ElementHandles o mezclarlos con los Locators de Playwright en pruebas e2e o scrapers; estos se heredaron de Puppeteer y funcionan de manera confiable en Playwright también (si no fuera así, Microsoft los habría desaprobado). Microsoft promueve los Locators por sobre los Element Handles solo porque la mayoría de las funcionalidades adicionales en las que invirtieron en los últimos años (como "getByAltText", "getByLabel", etc.) están construidas sobre los Locators, de modo que puedas escribir pruebas e2e más fácilmente con su ayuda. Esa es la razón de la advertencia en la documentación. No necesitas evitar los Element Handles a toda costa.

Si quieres reutilizar un localizador en una declaración condicional, puedes usar locator.isVisible().

const myElement = page.locator('#elem-id') 
if (await myElement.isVisible()) {
  await myElement.click()
}
// code goes on with *next lines of code*

Artículos relacionados