button not clickable with puppeteer

Question

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()

Answer 1

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());