End-to-end testing with Puppeteer
- What is it?
Puppeteer is a Node library which provides a high-level API to control headless Chrome or Chromium over the DevTools Protocol.
According to to Google, the library is able to do most of the things we manually do in the browser, such as:
- Generate screenshots and PDFs of pages.
- Crawl a SPA (Single-Page Application) and generate pre-rendered content (i.e. “SSR” (Server-Side Rendering)).
- Automate form submission, UI testing, keyboard input, etc.
- Create an up-to-date, automated testing environment. Run your tests directly in the latest version of Chrome using the latest JavaScript and browser features.
- Capture a timeline trace of your site to help diagnose performance issues.
- Test Chrome Extensions.
And, no, it’s not a testing library, but it’s ability to manipulate user actions on the browser and the ability to provide most the information that a Chrome Devtool does make it qualified for end-to-end testing (only works with Chrome).
2. How to use it for end-to-end testing?
First, we’ll need a testing library, any js library would be ok (Jest, Mocha, …).
The article is using example with Jest. If you’re also using Jest, add preset to your jest.config.ts
{
"preset": "jest-puppeteer"
}Then, install puppeteer.
npm i puppeteer
# or "yarn add puppeteer"That’s it. Now you can start writting a test case.
Some basic api to start with is:
- Launch a browser const browser = await puppeteer.launch({headless:false}) . If you don’t set the headless, the test run without launching the browser.
- Add new page/tab const page = await browser.newPage()
- Go to a URL page.goto('http://localhost:3000/')
- Get an element page.$eval , this is equal to document.querySelector and page.$$eval is equal to document.querySelectorAll
- Interacting on the page using page.click(selector) , page.tap(selector) , page.type(selector, text)
- Emulating mobile device page.emulate({viewport: {options}, userAgent: string})
More API can be found here.
I have an example of a test case as above. It simply tell the browser to find the email and password input and type a pre-defined email and password. If login was successful, we can expect to have the “user” object saved in our localstorage. Then close the browser.
There’re Chrome extension that helps to record what you do on the screen and turn it into puppeteer code so you can start by modifying it instead of writting everything from the beginning.
3. Conclusion
There’re pros and cons of using Puppeteer for end-to-end testing. The pros is that if you can do something with the browser, you can do it using puppeteer (you can take screenshot and compare images, test the web performance, …), it’s good for a quick, simple test. Cons is that you’re not yet able to record the testing process, and it ‘s not very good on complex project.
By the time i write this, i just found out that there’re also extension that helps record and turn action into Cypress code so I personally think that Cypress is a better choice for testing. It’s more steady and easier to write and it’s an actual testing framework. But, still good to know something new, right :)
