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 }), ])