Getting a Dynamic Element by Selector

Question

I need to click to a certain web button with the id: #product-6852370-Size.

I am working with Puppeteer, so normally I would do:

page.click('#product-6852370-Size');

The tricky part is that the number 6852370 is dynamic and changes every time I refresh the page.

So what I need is a piece of code that is saying:

Search for id's that include product- and -size. Any way that this might happen?

Answer 1

You can match the beginning and end of the id attribute using:

await page.click('[id^="product-"][id$="-Size"]');

Or, more accurately, you can ensure that a number is present in the middle of your id using regex:

await page.evaluate(() => {
  [...document.querySelectorAll('[id^="product-"][id$="-Size"]')].filter(e => e.id.match(/^product-\d+-Size$/g))[0].click();
});