Is It Possible To Click Every Element On A Page With Dynamic Content?

Is it possible with puppeteer to go to a website, test if every content on the page is clickable/links working and all this with dynamic content, so I can automate my UI-Testing? T

Solution 1:

Yes, in general it is possible to click on any element on the page. Even elements without an ID or class that identifies them, have a selector. It might just be more complicated to get their selector.

Getting the selector of an element

Below is an example how to get the selector of an element inside the Chrome browser. I'm getting the selector for the first p element of your question. Note, that it also does not have an ID or class. The document.querySelector('...') shows that it correctly identifies the node.

---

Even if the element is generated dynamically it has a selector, it might just be harder to find it. You might want to check this page on the various possibilities of CSS selectors.

If the element is not easy to identify you can also think whether it makes more sense to use the content of the element to identify it. You can for example use an XPath expression to find an element with a specific text inside.

Click the element

After you have a selector, you can use the page.click function or the elementHandle.click function like this:

Example: Query all elements, iterate over them and click one after another

const elements = await page.$$('div.example a');
for (const element of elements) {
    await element.click();
}

Example: Simply click two elements

await page.click('div.selector a.example');
await page.click('div.selector a.example2');

Clicking all elements on the page

If you actually want to click all elements on a page, you can use the * selector:

const elements = await page.$$('*');

You could iterate over this array, but be aware that this also contains elements like script tags, div containers, html, head, body and also elements which are not clickable. In addition, some elements (like a tags) might do a navigation request after they are clicked. Other elements (like buttons) might even add or remove something from the DOM.