Puppeteer: waitForFunction not working as expected

Question

I am using Node and Puppeteer.

I have an element that once I click it, text becomes "Generating" until download is finished. Once completed, text changes to something else. I am trying to poll to 1) verify the text switches to "Generating" (for verification) then 2) Poll until "Generating" is no longer present, indicating that it's finished and I can proceed. I have tried the following methods and none have seem to worked.

Although, I have tried all of these methods isolated (without being inside waitForFunction() and they all work. For example, verified document... works in console, etc.

Below is a couple of things I've tried (for the sake of brevity I'm not including the exhaustive list of others I've tried, many of which probably didn't even make sense but I was desperate). I am not including the 2nd step mentioned above since it's just an inverse of code below):

await page.waitForFunction('document.querySelector(#rptCol3A1Lnk0_txt).innerText.includes("Generating")')

I then attempted to use $eval, being a beginner with Node and Promises, I tried all combos I could think of with awaits and returns:

await page.waitForFunction((frame) => frame.$eval("#rptCol3A1Lnk0_txt", el => el.textContent.includes("Generating")),
        {timeout: 5000, polling: 300}, frame)

await page.waitForFunction(async (frame) => {
            return await frame.$eval("#rptCol3A1Lnk0_txt", el => el.textContent.includes("Generating"))
        },
        {timeout: 5000, polling: 300}, frame)

await page.waitForFunction(async (frame) => {
            return frame.$eval("#rptCol3A1Lnk0_txt", el => el.textContent.includes("Generating"))
        },
        {timeout: 5000, polling: 300}, frame)

The Puppeteer documentation is not super helpful for this method.

Answer 1

If it's in a frame you call it on the frame. Also you're quoting things wrong:

await frame.waitForFunction(() => document.querySelector("#rptCol3A1Lnk0_txt").innerText.includes("Generating"))