Tengo un componente de tabla que tiene paginación. Agregué un atributo de datos en la etiqueta <tbody>
que cambia al hacer clic en el botón siguiente de la página de la tabla (por ejemplo data-id: table-page-one
cambia a data-id: table-page-two
. Necesito esperar esta ID al azar antes de verificar los elementos de la fila.La prueba está pasando si la ejecuto con SLOMO=true HEADLESS=false
, pero cuando la ejecuto normalmente, después del clic de paginación, da el siguiente error: thrown: Exceeded timeout of 20000 ms for a test
Mi código es similar al siguiente:
if ('verify table row checkboxes are checked', async () => { await page.click(nextTablePageSelector); // gets stuck here await page. waitForSelector("[data-id='table-page-two']"); // below works in SLOMO=true HEADLESS=false mode // checking each row using $$eval });
Tengo un método de retraso personalizado entre page.click
y page.waitForSelector
y funciona, pero el equipo no quiere usar retrasos, porque puede conducir a pruebas incompletas.
¿Cuál es la forma correcta de observar el cambio de parte de la interfaz de usuario o, más específicamente, observar un atributo que ya está acostumbrado a cambiar?
Considere agrupar las promesas y usar la bandera visible
.
await Promise.all([ page.click(nextTablePageSelector), page.waitForSelector('tbody[data-id=page-two]', { visible: true }), ])