Interact with visible elements by automating mouse clicks with puppeteer

Question

Interact with visible elements by automating mouse clicks with puppeteer

When attempting to click on various elements within a page, my goal is to do so only if they are visible. While achieving this in selenium with the is_displayed method was simple, I have struggled to find a similar approach in puppeteer. I attempted to implement something along these lines:

try {
    await page
      .waitForSelector(id, visible=true, timeout=0)
      .then(() => {
        element.click()
      });
...

Unfortunately, this approach does not work as expected with simple elements like :

<a class="cookie-close" href="#">
OK
</a>

Additionally, I have been unable to determine how to achieve this using the element.click method in puppeteer.

javascript selenium puppeteer

Answer 1

Answer №1

Answer Concisely

const element = await page.waitForSelector('a.cookie-close', { visible: true });
await element.click();

In this code snippet, the page.waitForSelector function is utilized to choose a visible element with the selector a.cookie-close. Once the selector is identified, elementHandle.click is employed to trigger a click event on it.

Detailed Clarification

Among the available functions in Puppeteer, only page.waitForSelector and page.waitForXPath come equipped with an option that validates the presence and visibility of an element. Upon invocation, Puppeteer verifies if the style attribute visibility isn't set to hidden and confirms the existence of a visible bounding box for the specified element.

Ensuring Non-Emptiness of Element

In scenarios where a visibly present element might be devoid of content (e.g., <span></span>), you can extend your query as illustrated below:

const element = await page.waitForSelector('SELECTOR:not(:empty)', { visible: true });

This revised approach incorporates pseudo selectors like :empty and :not to confirm the inclusion of child nodes or text within the targeted element. For situations demanding the selection based on specific textual content inside the element, consider exploring insights shared in this referenced response.

Answer 2

Answer Concisely

const element = await page.waitForSelector('a.cookie-close', { visible: true });
await element.click();

In this code snippet, the page.waitForSelector function is utilized to choose a visible element with the selector a.cookie-close. Once the selector is identified, elementHandle.click is employed to trigger a click event on it.

Detailed Clarification

Among the available functions in Puppeteer, only page.waitForSelector and page.waitForXPath come equipped with an option that validates the presence and visibility of an element. Upon invocation, Puppeteer verifies if the style attribute visibility isn't set to hidden and confirms the existence of a visible bounding box for the specified element.

Ensuring Non-Emptiness of Element

In scenarios where a visibly present element might be devoid of content (e.g., <span></span>), you can extend your query as illustrated below:

const element = await page.waitForSelector('SELECTOR:not(:empty)', { visible: true });

This revised approach incorporates pseudo selectors like :empty and :not to confirm the inclusion of child nodes or text within the targeted element. For situations demanding the selection based on specific textual content inside the element, consider exploring insights shared in this referenced response.

Answer 3

Answer №2

Just like Selenium, it is recommended to utilize Puppeteer's waitForSelector function which can check for the presence and visibility of DOM elements.

try {
  // An error will be thrown if the element is not present or visible.
  await chromePage.waitForSelector("div.hello", {
    visible: true
  });
  await chromePage.click("div.hello");
} catch(err) {
  console.log(err);
}

Answer 4

Just like Selenium, it is recommended to utilize Puppeteer's waitForSelector function which can check for the presence and visibility of DOM elements.

try {
  // An error will be thrown if the element is not present or visible.
  await chromePage.waitForSelector("div.hello", {
    visible: true
  });
  await chromePage.click("div.hello");
} catch(err) {
  console.log(err);
}

Answer 5

Answer №3

If you're looking for a more natural way to ensure an element is visible before clicking on it, this code snippet provides a solution. It functions similarly to the explanation given by @joquarky:

click() {
    let retries = 5;
    const hoverAndClick = () => {
        return this._element!.hover() // this._element is ElementHandle
            .then(() => {
                return this._element!.click();
            })
            .catch(err => {
                if (retries <= 0) {
                    throw err;
                }
                retries -= 1;
                sleep(1000).then(hoverAndClick);
            });
    };

    return hoverAndClick();
}

The key difference here is that we allow for multiple attempts in case the element is undergoing a transition or is temporarily hidden by its parent elements.

Answer 6

If you're looking for a more natural way to ensure an element is visible before clicking on it, this code snippet provides a solution. It functions similarly to the explanation given by @joquarky:

click() {
    let retries = 5;
    const hoverAndClick = () => {
        return this._element!.hover() // this._element is ElementHandle
            .then(() => {
                return this._element!.click();
            })
            .catch(err => {
                if (retries <= 0) {
                    throw err;
                }
                retries -= 1;
                sleep(1000).then(hoverAndClick);
            });
    };

    return hoverAndClick();
}

The key difference here is that we allow for multiple attempts in case the element is undergoing a transition or is temporarily hidden by its parent elements.

Answer 7

Answer №4

It is recommended to utilize page.click() when initiating a click action.

To learn more about page.click(selector, [options]) functionality, refer to the Puppeteer's API documentation: https://github.com/GoogleChrome/puppeteer/blob/HEAD/docs/api.md#pageclickselector-options

Answer 8

It is recommended to utilize page.click() when initiating a click action.

To learn more about page.click(selector, [options]) functionality, refer to the Puppeteer's API documentation: https://github.com/GoogleChrome/puppeteer/blob/HEAD/docs/api.md#pageclickselector-options

Answer 9

Answer №5

If you're looking for a different approach, you might want to consider the following code snippet:

// checks if element exists
let elem = await page.evaluate(() => {
  return document.getElementById(id);
});

// use Vanilla JS to verify if element is visible
if (elem && !element.hidden) {
  await page.click(id);
}

Answer 10

If you're looking for a different approach, you might want to consider the following code snippet:

// checks if element exists
let elem = await page.evaluate(() => {
  return document.getElementById(id);
});

// use Vanilla JS to verify if element is visible
if (elem && !element.hidden) {
  await page.click(id);
}

Answer 11

Answer №6

Dealing with a similar issue led me to develop the following solution:

await page.waitForSelector('#clickable');
await page.evaluate(() => {
  let el = document.querySelector('#clickable');
  if (isVisible(el)) {
    el.click();
    return true;
  }
  return false;

  function isVisible(el) {
    if (el.offsetParent === null && el !== document.body) {
      return false; // not attached to document
    }
    if (el.offsetWidth <= 0 || el.offsetHeight <= 0) {
      return false; // lacks width or height
    }
    let style = el.style;
    if (style.display === "none" || style.visibility === "hidden" || style.opacity === "0") {
      return false; // affected by hidden CSS attributes
    }
    if (el === document.body) {
      return true;
    }
    return isVisible(el.offsetParent);
  }
});

This approach validates the element's connection to the document, ensuring it has some dimensions and remains visible based on CSS styles display:none, visibility:hidden, or opacity:0.

Please be aware that unconventional hiding methods like large negative margin/padding may impact the effectiveness of this code.

Answer 12

Dealing with a similar issue led me to develop the following solution:

await page.waitForSelector('#clickable');
await page.evaluate(() => {
  let el = document.querySelector('#clickable');
  if (isVisible(el)) {
    el.click();
    return true;
  }
  return false;

  function isVisible(el) {
    if (el.offsetParent === null && el !== document.body) {
      return false; // not attached to document
    }
    if (el.offsetWidth <= 0 || el.offsetHeight <= 0) {
      return false; // lacks width or height
    }
    let style = el.style;
    if (style.display === "none" || style.visibility === "hidden" || style.opacity === "0") {
      return false; // affected by hidden CSS attributes
    }
    if (el === document.body) {
      return true;
    }
    return isVisible(el.offsetParent);
  }
});

This approach validates the element's connection to the document, ensuring it has some dimensions and remains visible based on CSS styles display:none, visibility:hidden, or opacity:0.

Please be aware that unconventional hiding methods like large negative margin/padding may impact the effectiveness of this code.

Interact with visible elements by automating mouse clicks with puppeteer

Answer №1

Answer Concisely

Detailed Clarification

Ensuring Non-Emptiness of Element

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

What is the best way to programmatically change the event tied to an element's click

When using React, draggable components with input fields may lose their ability to receive focus when clicking on the input field

Unable to move cursor in contenteditable section

There seems to be an issue: [ng:areq] - Please visit the following link for more information: http://errors.angularjs.org/1

Sort the data - a selection menu is included in each row of the table

Identifying when a user has inputted incorrect $routeparams

Error unfound: [CLIENT_MISSING_INTENTS]: The Client requires valid intents to function properly

Using JQuery to manipulate `this`, its children, its siblings, and more

Cookie Consent has an impact on the performance of PageSpeed Insights

How to break down JSON into individual elements using JavaScript

Is it possible to invoke a helper function by passing a string as its name in JavaScript?

Assistance with XPATH: Locating specific text and locating the subsequent button within a few divs down

Exploring the Power of jQuery Deferreds and Promises through Multiple getJSON Requests

Import JSON Data into Angular-nvD3 Chart (AngularJS)

Error encountered when attempting to initiate a second screenshare on Chrome due to an invalid state

Countdown malfunction: wrong date displayed

Execute JavaScript function after completion of CSS animation using jQuery

`the issue of $scope object not being passed correctly to ng-if and ng-class ternary conditions

Setting the column width and border-top in Highcharts

JavaScript code to make titles slide in as the user scrolls