Tengo una función que espera un selector bajo el alcance de un elemento. El ElementHandle que estoy pasando no parece actualizarse a medida que se actualiza el DOM: registro el HTML externo de este elemento cada vez que falla mi llamada waitForFunction, y los cambios no están allí.

 async function waitForSubElSelector(page, el, subElSelector) { // offset/rects checks for visible check (from https://stackoverflow.com/a/33456469) await page.waitForFunction((selector, scopeEl) => { const subEl = scopeEl.querySelector(selector) let found = !!(subEl && (subEl.offsetWidth || subEl.offsetHeight || subEl.getClientRects().length)); if (!found) { console.log(`waitForSubElSelector failed EL: ${scopeEl.outerHTML} SELECTOR: "${selector}", ${!subEl ? 'not found' : subEl.offsetWidth + ', ' + subEl.offsetHeight + ', ' + subEl.getClientRects().length}`) } return found; }, {}, subElSelector, el ).catch(e => { console.log(`waitForSubElSelector failed w/ selector '${subElSelector}'`) throw e; }) return await el.$(subElSelector); }

También verifiqué esto en la Consola del navegador: puedo encontrar el elemento y luego el selector desde allí.

Un caso de uso es esperar a que esté disponible un botón Siguiente, por ejemplo:

 await waitForSubElSelector(this.browserPage, pageEl, '#nextButton:not([disabled])')

¿Cómo puedo hacer que esto funcione?

Una idea que tuve: tal vez mi marco web reemplace parte del DOM, por lo que el ElementHandle que tengo no es el actual; ¿Hay alguna verificación 'en-DOM' en Titiritero?