How to Click a Button on a Website Using Puppeteer Without Any Class, Id ,... Assigned to It

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

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)

How to make a click on a button that doesnt have id on pupeteer

Page.click requires a CSS selector as its mandatory parameter. Do not forget that CSS class selector syntax is: .class-name, so you will need something like this:

await page.click('.btn.btn-primary.btn-block.submit_silentOrderPostForm.checkout-next')

How to click a button by name or text with puppeteer?

From your browser, open the page where the button sits.
Right click on the page and select "Inspect".

Then, from the DOM code, right click on the button, and select "Copy > Copy JS path".

That selector can be easily used in puppeteer.

Puppeteer: how to foreach every button class and click if specific class name found

Don't use forEach for asynchronous execution as it throws away the promises instead of awaiting them. Use a simple for loop:

const buttons = await page.$$('button[class*="--slot-available"]')

for (const button of buttons)
    await button.click();

Puppeteer click parent node of a element with no id

This seems working:

import puppeteer from 'puppeteer';

const browser = await puppeteer.launch({ headless: false, defaultViewport: null });

try {
  const [page] = await browser.pages();

  await page.goto('https://releases.footshop.com/nike-air-force-1-07-lx-wmns-5iBRxXsBHBhvh4GFc9ge');

  await page.click('span[class="default-text__21bVM"]');

  const size = 9;
  const xp = `//div[contains(@class, "col-3") and text()="${size}"]`;
  await page.waitForXPath(xp);

  const [sizeButton] = await page.$x(xp);
  await sizeButton.click();
  await page.click('span[class="text__1S19c"]');
} catch (err) { console.error(err); }

Puppeteer: Clicking button on a website doesn't work

The below code should work.

const puppeteer = require('puppeteer');

(async ()=>{
  const browser = await puppeteer.launch({headless:false});
  const [page] = await browser.pages();
  await page.goto('https://www.alternate.de/html/product/1685585');

 
  const acceptCookiesSelector='button[class="cookie-submit-all"]';
  await page.waitForSelector(acceptCookiesSelector);
  await page.click(acceptCookiesSelector);

  const buySelector='a[class="details-cart-button btn btn-primary btn-block btn-lg d-flex justify-content-center tp-button "]';
  await page.waitForSelector(buySelector);
  await page.click(buySelector);

})();

I will try to explain why your code didn't work.

The click method that you use on the page scrolls into view the element that you want to click and uses the left mouse button and clicks on it, in your case, the button was in the view, but it was overshadowed by the accept-cookie banner, so all you have to do is click on accept the cookies to get rid of that banner then click on the buy button and it will work.

Your first example worked because click method in the browser console is a different method than the one used on Puppeteer, and it worked because it doesn't rely on the mouse to generate the click.

Puppeteer: How to click element so it opens in new tab?

Middle click using page.click:

let options = {button : 'middle'};
await page.click('a[href="'+accountsClickElements[i]+'"]', options)

It might take some time for the new tab to open, which you can wait for with await page.waitForTimeout(1000).

Full code:

let accountsClickElements = await page.$$eval('.result-lockup__name a', el => el.map(x => x.getAttribute('href')));

browser.on('targetcreated', function(){                                            
    console.log(accountsClickElements[i]) 
})   

let options = {
    button : 'middle'
};
for (let i = 0; i<25; i++) {
    await page.waitForTimeout(2000);
    await page.focus('a[href="'+accountsClickElements[i]+'"]')                                                    
    await page.click('a[href="'+accountsClickElements[i]+'"]', options)
    const [tab1, tab2, tab3] = await browser.pages();
    await page.waitForTimeout(2000);
    await tab3.bringToFront();                                                                               
    await ListenCompanyPageNewTab(tab3); 
    await tab2.bringToFront();                                                            
} 

---

Related Topics