Search code examples
javascriptnode.jsautomationpuppeteerheadless

Puppeteer can't click sign-in button


Currently building a puppeteer program that allows me to sign in to a website, however, after inputting login, I can not seem to make puppeteer click the sign-in button or any button for that matter.I have used dev tools, hovered over the button in question, and input its class ="sign-in-button" but it still does not work on the headless browser I am running. It says on the error sheet that there is no node found for selector: button[type=submit]. It is my third day coding, would love any assistance I can get. Thank you! Please leave any suggestions below, I want to know how to make puppeteer click buttons on screen, but I am having trouble.

Note: I have tried await page.$eval("button[class='sign-in-button']", elem => elem.click()); did not work..

sign-in-button when hovered over

this is what it says in elements in dev tools


Solution

  • Your CSS selector points to a button element instead to an input element and is therefore not found.

    Changing the selector to this should work:

    await page.$eval("input[class='sign-in-button']", elem => elem.click());
    
    Short class selector

    Alternatively you could just select it via classname, so if the input element would be changed to a button element the code would not break. Whenever you pu a dot . before a css selector it automatically treats it as class selector.

    await page.$eval(".sign-in-button", elem => elem.click());
    
    

    JS handle

    Instead of clicking the element within the browser context (DOM) you could use page.$ for receiving a button handle and click that.

    // use $ method for receiving a handle to your sign-in button/input
    const btn = await page.$('.sign-in-button')
    
    // click it using the `puppeteer` api instead of native DOM clicking.. 
    btn.click()