Clicking a selector with Puppeteer

user_11718346 0
Viewed 17876

So I am having trouble clicking a login button on the nike website..

I am not sure why It keeps crashing, well because it can't find the selector I guess but I am not sure what I am doing wrong.

I would like to also say I am having some sort of memory leak before puppeteer crashes and sometimes it will even crash my macbook completely if I don't cancel the process in time inside the console.

EDIT: This code also causes a memory leak whenever it crashes forcing me to have to hard reset my mac if I don't cancel the application fast enough.

Node Version: 14.4.0 Puppeteer Version: 5.2.1

Current code:

const puppeteer = require('puppeteer');

(async () => {
    const browser = await puppeteer.launch({
        headless: false,
        defaultViewport: null,
        args: ['--start-maximized']
    })

    const page = await browser.newPage()
    await page.goto('https://www.nike.com/')

    const winner = await Promise.race([
        page.waitForSelector('[data-path="join or login"]'),
        page.waitForSelector('[data-path="sign in"]')
    ])

    await page.click(winner._remoteObject.description)
})()

I have also tried:

await page.click('button[data-var]="loginBtn"');
puppeteer node.js javascript
3 Answers

Try it:

await page.click('button[data-var="loginBtn"]');
user_127005750

They are A/B testing their website, so you may land on a page with very different selectors than you retreived while you visited the site from your own chrome browser.

In such cases you can try to grab the elements by their text content (unfortunately in this specific case that also changes over the designs) using XPath and its contains method. E.g. $x('//span[contains(text(), "Sign In")]')[0]

So I suggest to detect both button versions and get their most stable selectors, these can be based on data attributes as well:

A

$('[data-path="sign in"]')

B

$('[data-path="join or login"]')

Then with a Promise.race you can detect which button is present and then extract its selector from the JSHandle@node like this: ._remoteObject.description:

{
  type: 'object',
  subtype: 'node',
  className: 'HTMLButtonElement',
  description: 'button.nav-btn.p0-sm.body-3.u-bold.ml2-sm.mr2-sm',
  objectId: '{"injectedScriptId":3,"id":1}'
}

=>

button.nav-btn.p0-sm.prl3-sm.pt2-sm.pb2-sm.fs12-nav-sm.d-sm-b.nav-color-grey.hover-color-black

Example:

const browser = await puppeteer.launch({
  headless: false,
  defaultViewport: null,
  args: ['--start-maximized']
})
const page = await browser.newPage()
await page.goto('https://www.nike.com/')
const winner = await Promise.race([
  page.waitForSelector('[data-path="join or login"]'),
  page.waitForSelector('[data-path="sign in"]')
])

await page.click(winner._remoteObject.description)

FYI: Maximize the browser window as well to make sure the elment has the same selector name.

defaultViewport: null, args: ['--start-maximized']

Chromium starts in a bit smaller window with puppeteer by default.

user_124125950

You need to use { waitUntil: 'networkidle0' } with page.goto

This tells puppeteer to wait for the network to be idle (no requests for 500ms)

const puppeteer = require('puppeteer');

(async () => {
    const browser = await puppeteer.launch({
        headless: false,
        defaultViewport: null,
        args: ['--start-maximized']
    })

    const page = await browser.newPage()

    // load the nike.com page and wait for it to fully load (inc A/B scripts)
    await page.goto('https://www.nike.com/', { waitUntil: 'networkidle0' })

    // select whichever element appears first
    var el = await page.waitForSelector('[data-path="join or login"], [data-path="sign in"]', { timeout: 1000 })

    // execute click
    await page.click(el._remoteObject.description)
})()
user_4434310
Related