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?

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?

• javascript
• html
• node.js
• dom
• puppeteer

2 Answers 2

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();
});

You may use attribute starts with selector to do that:

page.click('button[id^="product-"]')