Why Puppeteer couldn't click this button?

Question

I wrote a script in Puppeteer to scrape this site "https://jobs.abb.com/jobsearch/". It has a button called "More" to show all the job postings. Actually it is a list (). I couldn't click "More" from my Puppeteer script.

Why is it? How can I click it? Is there any way?

let URL = "https://jobs.abb.com/jobsearch/?sap-language=EN#";

// Open the above URL in a browser's new page
const ping = async () => {
  const browser = await puppeteer.launch({ headless: false, args:['--start-maximized' ] });
  const page = await browser.newPage();
  await page.setViewport({ width: 1366, height: 768 });
  await page.setDefaultNavigationTimeout(0);
  await page.goto(URL, { waitUntil: "load" });


// Method - 1
await page
     .waitForSelector("#__component0---map_search--tableJobs-trigger")
     .then(() => console.log("Selector found"));

   await page
     .$eval("#__component0---map_search--tableJobs-trigger", e => e.click())
     .then(console.log("Clicked"))
     .catch(err => console.log(err));

// Method - 2
   await page.waitForSelector("#__component0---map_search--tableJobs-trigger");
   await page.click("#__component0---map_search--tableJobs-trigger");

}

ping();

Method - 1, didn't create any error at the same time it didn't click the button too.

...

Method - 2, it produced an error "Error: Node is either not visible or not an HTMLElement"

Is there any way to scrape a page like this "https://jobs.abb.com/jobsearch/?sap-language=EN#" ?

Note: I think it is been connected with SAP UI

Answer 1

I am not sure why a normal page.click(selector) or eval(selector, e => e.click) isn't working for ui5 buttons, but the following worked for me:

editButton = await page.waitForSelector("#__button87");
await editButton.click();

Puppeteer version: 5.3.1