How to click a button on a website using Puppeteer without any class, id ,... assigned to it?

Question

So I want to click on a button on a website. The button has no id, class,... So I should find a way to click the button with the name that's on it. In this example I should click by the name "Supreme®/The North Face® Leather Shoulder Bag"

This is my code in Node.js

const puppeteer = require('puppeteer');

let scrape = async () => {
const browser = await puppeteer.launch({headless: false});
const page = await browser.newPage();
await page.goto('https://www.supremenewyork.com/shop/all/bags');
await page.click(...);
browser.close();
return result;
};

This is the element that I want to click:

<a class="name-link" href="/shop/bags/a9cz4te2r/rsth86fbl">Supreme®/The 
North Face® Leather Shoulder Bag</a>

Solution

Here is a way to collect that data. Try these on your browsers console first.

[...document.querySelectorAll('a.name-link')]
.filter(element => 
  element.innerText.includes('Supreme®/The North Face® Leather Shoulder Bag')
)

What's going on here?

• document.querySelectorAll finds all element with that selector.
• .filter will return the result that matches the query.
• .includes will return data that includes a given string.

If a.name-link does not work, then look for a, if that does not work, then find the parent item and use that.

Once you got the element on your browser, you can apply that on your code, click it etc.

Usage:

You can use page.evaluate to filter and click.

const query = "Supreme®/The North Face® Leather Shoulder Bag";

page.evaluate(query => {
  const elements = [...document.querySelectorAll('a.name-link')];

  // Either use .find or .filter, comment one of these
  // find element with find
  const targetElement = elements.find(e => e.innerText.includes(query));

  // OR, find element with filter
  // const targetElement = elements.filter(e => e.innerText.includes(query))[0];

  // make sure the element exists, and only then click it
  targetElement && targetElement.click();
}, query)

Comments

[SIM]

Btw, If the elements available from your end are in reality what you have pasted above then replace this portion page.click("a[href$='a05ivugj2']") with page.click("a[href$='rsth86fbl']") from within my script above.

[wizencrowd]

If I change the href$ to ckf2cimj7 it will work for me. I guess this is because the website works regional. But the problem is I wont be able to get that tag before the item goes online. The only thing I will know before it goes online is the name of the item. So I need to find a way to click the link by the name "Supreme®/The North Face® Leather Shoulder Bag".

[SIM]

The name you mentioned is not available in that page (at least from my end) when I search it through chrome dev tools.

[wizencrowd]

It is the name of the item itself. prntscr.com/l8ahbr and prntscr.com/l8ahwc

[SIM]

This is how I can see check out this link.

[wizencrowd]

ok, that's weird. But do you got any idea how I can click the link only using the name of the item with the screenshots I gave you?

[SIM]

As .querySelector() doesn't support pseudo-selectors, you need to avail xpath to click on that link defining .='Supreme®/The North Face® Leather Shoulder Bag' within it.

[wizencrowd]

propably a silly question but i'm kind of new to this but what do these 3 points mean before document?

[Md. Abu Taher]

That's a spread operator. developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

[Md. Abu Taher]

As I asked above, can you share a screenshot of the page you are trying to access? Otherwise share the source code of that page somewhere. Otherwise it's all just guessing what works etc.

[wizencrowd]

I removed that accepted thing by accident, because your code works. . Btw this is the link supremenewyork.com/shop/all/bags

[Md. Abu Taher]

No, I am not talking about the link, it's about the screenshot. It doesn't show here like you are seeing. I tried with proxies too. Just doesn't show any name anywhere.

[Md. Abu Taher]

I just guessed what you were trying to do and provided a solution based on that.

[wizencrowd]

This is what I see: prntscr.com/l8bhwh This is the element that I need to click on : prntscr.com/l8bioh But as you can see there are also multiple colors: prntscr.com/l8bivx I need to select the right colour too. Thanks

[Md. Abu Taher]

Ah so Supreme shows that data for london. Great. The above snippet should work perfectly. :)

[bibscy]

I get cannot read property click of undefined