CODEWITHSUNDEEP
javascriptnode.jsgoogle-chromechromiumpuppeteer
invalid
invalid

Reputation: 1515

How can I click display:none element with puppeteer?

I want to click an element which display property is none. How can I do this?

Code:

page.click(".foo");

Upvotes: 7

Views: 7682

Answers (3)

Scott Wu
Scott Wu

Reputation: 1

A variation on Thomas's answer using $eval for a more compact code.

await page.$eval('.foo', el => el.click())

Upvotes: 0

Dmitri Algazin
Dmitri Algazin

Reputation: 3456

Problem is still actual, did not worked for me using: await page.evaluate(() => { document.querySelector('.foo').click(); });

After spending at least half day, I made a small trick with changing CSS 'display' property to 'inherit', click() an element, and revert CSS 'display' back to original.

  let inputCheckBox = await document.querySelector("input[type='checkbox']");

  const cssDisplay = inputCheckBox.style.display;
  if (!cssDisplay || 'none' === cssDisplay) {
     inputCheckBox.style.display = 'inherit';
  }

  await inputCheckBox.click();

  if (cssDisplay !== inputCheckBox.style.display) {
     inputCheckBox.style.display = cssDisplay;
  }

Upvotes: 0

Thomas Dondorf
Thomas Dondorf

Reputation: 25270

You can use the JavaScript click function. This function will trigger the elements click event and does not care about whether the element is visible or not.

You need to use page.evaluate to execute it inside the page.

Example:

await page.evaluate(() => {
  document.querySelector('.foo').click();
});

Upvotes: 12

Related Questions