checkly/theheadless.dev

🪖 Learn Puppeteer and Playwright - Tips, tricks and in-depth guides from the trenches.

🚨 We gave theheadless.dev a new home! This content was moved to Checkly Public WebSite, will remain OSS and we will publish fresh content around Puppeteer & Playwright there. Feel free to contribute, submit issues or open PR's in the new repository

🖖 Hi, this is the repo with all content, code examples and the VuePress website that make up theheadless.dev, a community driven knowledge base for learning headless browser automation with Puppeteer and Playwright.

You can browse all code examples in this folder, or contribute your own!

Made with ♥️ by ChecklyHQ

Contribute

We welcome new articles on Puppeteer, Playwright and any topic surrounding the practical application of modern headless browser frameworks. Read here how to contribute

Authors

• Giovanni Rago (@rag0g) – Checkly
• Maxi Gimenez (@GMaxi_) – Checkly
• Tim Nolet (@tim_nolet) – Checkly
• Hannes Lenke (@hlenke) – Checkly

Acknowledgements

This code uses parts of plugins and ejected themes from the Vue community:

• https://github.com/webmasterish/vuepress-plugin-autometa
• https://github.com/vuepressjs/vuepress-theme-blog

theheadless.dev's Issues

Why do we need both Playwright and Puppeteer?

Is not just having Playwright enough for E2E testing?

Internal .html links show 404 page when opened in a new tab

On the What is Playwright? page, when I open the link to What is Puppeteer? in a new tab, it shows a 404. Refreshing the page fixes the problem.

This is on line:

The resemblance to Google's What is Puppeteer? is striking, and for good reason.

It looks like this is something to do with the URL being postfixed with .html as other links on the site without this postfix don't have this problem.

Mobile cosmetic: search bubble and cookie consent buttons need better positioning.

Please have a look at the attached screenshot.

1. The search bubble needs more distance to the edge of the screen.
2. The accept and decline buttons should have some space between them.

Navigation not working for me (in production)

Steps to Reproduce:

1. Visit login page directly via link from checklyhq.com - https://theheadless.dev/tag/login/
2. Click What is Puppeteer? link in sidebar

Result:

• url updates to "https://theheadless.dev/posts/basics-puppeteer-intro/" but content does not change
• refreshing the page loads the correct content

Using Chrome 86.0.4240.111 on macOS Catalina 10.15.7

Avoid duplicate pages with vuepress plugin clean urls

The articles on HD are accessible via .HTML and /. We should avoid that behavior and just use /.
I assume that the clean URLs plugin could help us. https://www.npmjs.com/package/vuepress-plugin-clean-urls
Please have a look at the screenshot below.

Wrong id selector on e2e-coupon

Hey,

I appreciate your work 👍 it's really useful !

Just found a little mistake on the puppeteer code in lines 24 - 25 for the e2e-coupon post:
Before :

  await page.waitForSelector("#cart-img");
  await page.click("#cart-img");

After:

  await page.waitForSelector("#cart");
  await page.click("#cart");

Cheers

Cannot Reach Site (Insecure Warning from Chrome and Safari)

I wish I could provide more information, but, the site is currently unreachable in my configuration -- it's corporate-controlled, so I have no idea what that config is. However, I get a

NET::ERR_CERT_INVALID

Subject: theheadless.dev

Issuer: Cisco Umbrella Secondary SubCA nyc-SG

Expires on: Aug 22, 2020

Current date: Aug 19, 2020

Despite it being the 19th, I cannot access your site.

Wish I could help more.

Sidebar covers footer on narrower resolutions

This is more of a cosmetic thing, but on narrower resolutions the sidebar covers part of the footer, making some of the text unreadable. I was able to reproduce this on Chrome and Firefox. Screenshot below:

Wait for user Login

I am looking for an example where the script

• Navigates to the Login page of website/application
• Waits for the human to login into the website
• Detects that the Login is successful
• Takes action as programmed in the script
• Logsout

Scripts like this can help automate tasks for people. Privacy is preserved as the script does not store/see the login credentials