I’m trying puppeteer out.

Problem Description:

I made 2 functions, one for clicking a button and increase the item number to buy in cart. The second one is intended to retrieve the current in-page value that the button is supposed to change on click. My problem is that I can see the browser update values of a DOM element on clicking the button with puppeteer, but when retrieving it with button.evaluate(), it turns out to be the same as if I didn’t press it.

This problem is located in the first function (the second one is for additional context), where I retrieve two times the current value, one for the original number the DOM element had and the second for retrieving its value after click, which is expected to be 1 unit higher.

What I’ve tried so far:

1. anElementHandle.evaluateHandle() just to make sure I retrieve an in-page input’s current value. But it seems to me I’m accessing a DOM snapshot.
2. anElementHandle.evaluate() This was what I initially did.
3. page.evaluate() and select the input manually.

Impressions:
My only guess is to refresh the page to force getting the new updated value of the input. But this seems to me clunky and an unnecessary workaround. I’d like to understand what’s happening under the hood for learning purposes.

Puppeteer version: 22.7.0

Node version: 20.12.2 LTS

The function in question:

async function increaseItemInCartByOne(plusButton: ElementHandle, shoppingCartAPI: any) {

try {
    const previousAmount = await shoppingCartAPI.cartItemAmountNumberByButton(plusButton)
    while (true) {
        const [_, response] = await Promise.all([
            plusButton.click(),
            page?.waitForResponse(r => r.request().url().includes('/cesta/') && r.request().method() === "PUT")
        ])

        if (response?.status() === 200) {
            const currentAmount = await shoppingCartAPI.cartItemAmountNumberByButton(plusButton)
            
            if (currentAmount === previousAmount) {
                const message = await getUIWarningMessage(4000) as string
                const outOfStock = message?.search(/lo sentimos no puede llevar la cantidad solicitada/i) >= 0
                if (outOfStock) {
                    throw new Error("This item is now out of stock")
                } else throw new Error("Don't know what's happening")
            } else if (currentAmount > previousAmount) break;
        }
    }

} catch (error) {
    console.log(error)
}
}

This is the function returning the object the main function consumes from:

async function shoppingCartAPI() {
//TODO collects the checkout items to buy in the shopping cart page and returns an API
//TODO This API is nothing but an object with methods having access to this function closure

await gotoCartMenu()
const productItemRows = await page?.$$(".table-row.prod-item-info")
if (!productItemRows) throw new Error("Shopping Cart is probably empty. Aborting")

return {
    cartItemAmountNumberByButton: async (button: ElementHandle) => {
        const updatedValue = await page?.evaluate((button) => button.previousElementSibling?.getAttribute("value")?.trim(), button);

        const newUpdatedValue = await page?.evaluate(() => {
            const newValue = document.querySelector(".table-row.prod-item-info:nth-child(2) .btn.cart-plus-btn")
            console.log(newValue)
            console.log(newValue?.previousElementSibling?.getAttribute("value"))
            return newValue?.previousElementSibling?.getAttribute("value")?.trim()
        });
            
        return Number(updatedValue)
    },
    getBuyAnotherItemInCartButtons: async () => {
        const buttons = []
        for (const row of productItemRows) {
            buttons.push(
                (await row.evaluateHandle((productRow) => {
                    const btn = productRow.querySelector(".btn.cart-plus-btn")
                    return btn
                })).asElement()
            )
        }

        if (buttons.length !== productItemRows.length)
            logger.error(`There are ${productItemRows.length} product(s) in cart and ${buttons.length} buttons for adding items are missing. This is weird`)

        return buttons
    }
}

}

Thank you for your time 🙂