NodeJS/Puppeteer - can't click an element

Question

I'm trying to click on an element but whenever i click the focus seems to turn into an input. Lemme try to rephrase: it is an clickable element who shows after i do some search. I want to click on it so i can do some other actions. However, when i tell puppeteer to click on it, the focus seems to go into an input who's close to this button.

I've did this with Selenium and got it working. But i had to leave Selenium due to performance issues and then i decided to go with Puppeteer for node.js . However i'm encountering this issue.

Yellow is the button im trying to click. Green is where the focus is going on when i execute the click action. Ive noticed that when i pass the mouse on this blue button, its a bit unstable (sometimes its available for clicking, others isn`t. But it can be just my impression).

Ive also tried to disable this input to check if i could force` the focus to stay where i wanted. No success also.

The HTML code for where i`m trying to click is:

I've noticed the focus is going to the previous div (class=search). But i have no idea why this is happening.

Here's what i've tried so far (running on node.js)

const puppeteer = require('puppeteer');

(async () => {
    const browser = await puppeteer.launch({ 
        headless: false,
        args: [
            '--window-size=800,600' 
           
        ]
    });
    const page = await browser.newPage();

   //Begin navigation. Go to the URL, type login and password, press enter and login


    // Disable the input element
    await page.evaluate(() => {
        const inputElement = document.querySelector('input[name="inputSearch"]');
        if (inputElement) {
            inputElement.setAttribute('disabled', 'true');
        }
    });

    // Checking if it was disabled
    const isDisabled = await page.evaluate(() => {
        const inputElement = document.querySelector('input[name="inputSearch"]');
        return inputElement.hasAttribute('disabled');
    });

    console.log('Input element disabled:', isDisabled);
    */
   
   
   
   
   
   //Trying to reach the button
    try {
        
        const selector = 'div.show-menu-client.ng-star-inserted'; 
        await page.waitForSelector(selector, { visible: true, timeout: 10000 });

        // Check if the element is clickable
        await page.waitForFunction(
            selector => {
                const element = document.querySelector(selector);
                return element && !element.hasAttribute('disabled') && getComputedStyle(element).pointerEvents !== 'none';
            },
            {},
            selector
        );

        console.log('Clickable');

        // Interact with the element
        const element = await page.$(selector);
        if (element) {
            await element.click(); // Example click action
            console.log('Clicked.');
        } else {
            console.log('Element not found.');
        }
    } catch (error) {
        console.log('Error:', error.message);
    }



})();

Any input is appreciated. Thanks a lot!

Answer 1

I don't see a way to click on that but this might get the data you want:

// catch the xhr / fetch with the json you want
page.on('response', response => {
  if(response.url().includes('by-person-number')){
    response.json().then(data => {
      console.log(data)
      // do something with this data
    }).catch(e => {})
  }
})

await page.waitForSelector('input[name="inputSearch"]');
await page.type('input[name="inputSearch"]', '32877625000122');
await page.focus('input[name="inputSearch"]');
await page.keyboard.press('Enter')
await page.waitForNavigation();