how to wait for load newly created elements - puppeteer

Question

I want to get the sizes of the product from the adidas.com site using Puppeteer. The sizes are not loaded in the initial loading and the HTML code is as follows:

<div class="sizes___3Stmf">
<div class="gl-label size___TqqSo" data-testid="size-placeholder"><span class="notranslate placeholder___yXpD2">AAA</span></div>
</div>

But after full loading, the elements will change as below and the sizes will be displayed:

<div class="sizes___3Stmf gl-vspace" data-auto-id="size-selector">
<button class="gl-label size___TqqSo selected___2CqxQ"><span>36</span></button>
</div>

How can I wait for the changed elements to load and then get it? My code is as follows. I even tried using the waitForSelector() but it didn't work.

await page.goto(url, {waitUntil: 'domcontentloaded'});
await page.waitForSelector('.sizes___3Stmf button');        
const outputApp = await page.$(".sizes___3Stmf");
const outputHtml = await page.evaluate((el) => el.innerHTML, outputApp);
console.log(outputHtml);

I get the following error by running the above code:

timeouterror: waiting for selector `.sizes___3stmf button` failed: timeout 30000ms exceeded.

Answer 1

You should rely on 100% stable element attributes. sizes___3Stmf class name doesn't look like one of them.

Try to wait for div with attribute data-auto-id:

await page.waitForSelector('div[data-auto-id="size-selector"] button');