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 use checkboxes to highlight table rows in Jquery Mobile?

Encountering a NoClassDefFoundError when working with Selenium: org/openqa/selenium/NoAlertPresentException

Transforming date and timezone offset into an isoDate format using moment.js

React's useState feature is doubling the increment

utilizing various ajax functions

What are the steps to effectively utilize data retrieved from readFragment using Apollo?

issue with deploying a software package and getting it installed

Using JavaScript to sort data within specific timeframes

Is it possible to execute a controller function only when the textarea has completely loaded?

The value of document.readyState remains as 'complete' even while the page is still actively loading on the frontend

Creating a tooltip with a left arrow and a bordered design

Implementing Javascript to insert IFRAME into the DOM

Displaying specific choices depending on the previous selection made

What is the best way to display a segment of an SVG on a Canvas element?

Discovering a particular element involves iterating through the results returned by the findElements method in JavaScript

Is the JavaScript progress bar dysfunctional when used with object-oriented JavaScript code, but functions properly with arrow functions?

Launch all external links in Browser (NWjs)

Juggling Browsers with Protractor

The AJAX request encountered an error due to an Unexpected End of JSON Input

AngularJS and CodeIgniter collaborating to bring server-side pagination