Question 184440 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – button not clickable with puppeteer

I am trying to automate a login process into one of my accounts and this website has some weird password table that I have to click on to type my password , but when I select a button from the table and try to click on it I get the error:

throw new Error(‘Node is either not clickable or not an HTMLElement’)
the line that is causing the error is : ** button.click()**

here is the code :

const puppeteer= require("puppeteer")
function sleep(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
  }

const pwd=["123456", "dadhaiudhw", "3712893jdhusydiu", "12kd9", "12!@#@4dmsak"]
  

const test= async ()=>{
    const browser= await puppeteer.launch({headless: false})
    const page= await browser.newPage()
    await page.goto("https://ebanking.cpa-bank.dz/customer/")
    const inputElement = await page.$('#form\:username');
    await inputElement.type("96391281", {delay:100});
    await sleep(Math.random()*4200)
    const nextButton= await page.$("#form\:submit")
    await nextButton.click()

    await page.waitForSelector(".keypad-key")
    const buttons = await page.$$('.keypad-key');

    for(let button of buttons){
        let valueHandle = await button.getProperty('textContent');
        let btnText = await valueHandle.jsonValue();
        
        if(btnText==="Shift"){
                button.click()
        }
    
    }

}

test()
Tags:

2

Answers


  1. 0

    From a quick glance of the situation, puppeteer just might not pass all the necessary checks that the website has on that button, the security might be past the complexity of puppeteer which is causing puppeteer to throw a default error.
    Obviously puppeteer has to programmatically generate those clicks to what they think will be needed to click buttons, a solution to this would be to either do this without puppeteer or to read the code on the button event listener and see what it is checking for and then compare that to how puppeteer is dispatching their spoofed clicks.

    Login or Signup to reply.
  2. 0

    This line is also causing the problem in your code,

    let btnText = await valueHandle.jsonValue();

    You should split the password into characters, then loop through it clicking on the keypad keys that match the characters in the password. Using XPATH you can get elements that contain a text e.g. //button[contains(@class,"keypad-key") and text()="a"] selects button with class keypad-key, which has text content a,

    Code :

    const puppeteer = require('puppeteer');

let browser;
(async () => {

    async function login(user, password) {

        const browser = await puppeteer.launch({headless: false});
        const page = await browser.newPage();

        async function waitClick(selector) { 
            let btn = await page.waitForSelector(selector); 
            await btn.click(); 
        }

        let url = 'https://ebanking.cpa-bank.dz/customer/';

        await page.goto(url, {waitUntil: 'networkidle2', timeout: 30000});
        await page.waitForSelector('#form\:username'); // wait for page

        await page.keyboard.type(user, { delay: 10 });

        await waitClick('#form\:submit'); // click next

        await page.waitForSelector('body'); // wait for page

        await waitClick('#inputPassId'); // click on input area first

        let passArr = [...password]; // split password into array of characters
        for(let el of passArr) {             
            if (/[A-Z]/.test(el)) { //press shift if uppercase
                await waitClick("xpath/" + `//button[contains(@class,"keypad-key") and text()="Shift"]`);
                await waitClick("xpath/" + `//button[contains(@class,"keypad-key") and text()="${el}"]`);
                await waitClick("xpath/" + `//button[contains(@class,"keypad-key") and text()="Shift"]`);
            } else {
                await waitClick("xpath/" + `//button[contains(@class,"keypad-key") and text()="${el}"]`);
            }            
        }

        await waitClick('#form\:showPasswordId a'); // click to show password not required

        await waitClick('#form\:loginButton'); 

        //await browser.close();

    }

    await login("96391281", "AadBaiudhw" );

})().catch(err => console.error(err)).finally(() => browser ?. close());
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search