In the previous blog on this topic, we covered the basics of Puppeteer. This blog takes that discussion forward by covering how to start writing simple automated test cases with Puppeteer using the code editor.
Prerequisites of Setting up Puppeteer
This blog is for beginners; therefore, no advanced knowledge of coding is necessary. For this process to work, please ensure that NodeJS is installed on your machine. Additionally, a basic understanding of command lines and JavaScript is also required.
A Code Editor is also needed; the most popular ones for JavaScript are Atom, Sublime Text, and Bluefish. However, this blog utilizes the VS Code.
Project Initialization in Puppeteer
To initialize a project of automated test cases for a web application, a user needs to perform the following actions:
- Make a directory that will contain the project files.
- Open VS Code and import that directory into the editor.
- Open the Terminal for VS Code and navigate to the created directory.
- Type in “npm init” and press ‘Enter’ to initialize the project. This utility will walk through the process of creating a package.json file.
- Utility inputs few values, including the description, entry point (index.js) by default, test command, git repository, keywords, and authors.
- Type in “Yes” to the ‘Is this OK?’ question and press ‘Enter.’
- As a result, a package.json file is created within the project folder, and user can open that file to look for the values typed in.
- Now, let’s install the dependencies. We are installing three dependencies here, which are:
- Puppeteer – automation library
- Mocha – standard tester
- Chai – assertion library
Type in “npm install puppeteer mocha chai” to install these three in one go. Users can also install them separately by typing “npm install puppeteer,” “npm install mocha,” “npm install chai,” and press enter. It will take some time as the puppeteer will also need to download Chromium which is sometimes approximately 200 megabytes depending upon the platform.
9. If users want, they can also install prettier to format the code.
10. The package.json file will look like this. Related to the “scripts” tag, lets cover that later in this blog.
Basic Test for Automation in Puppeteer
Let us start writing some of the basic tests. For this, create a directory “test” inside the project and create a file ” example.test.js,”for writing some of the test scripts.
- Open the file and write const puppeteer = require(‘puppeteer’) in the beginning. This allows for accessing everything inside the puppeteer library.
- Now write a describe(‘My first Puppeteer Test’, () => {………… block, which is a wrapper around test suite or test step depending upon the context.
- Inside this describe block, create as many it blocks or test steps as desired. Sample syntax is it(‘should launch a Browser and Close it’, async function () {………
- Since Puppeteer is using async functions, we also used the async keyboard before the function.
- The sample code snippet is attached below. It opens a web page and validates few things in in a single test case.
- The before & after block contains the code that is executed before and after the test suite defined in the current file. In comparison, the beforeEach & afterEach blocks contain the code that executes before and after each test case in the current file.
Run the Test
To run the test, open the package.json file and, under the “scripts” add the following line.
Go to the terminal now and write “npm run test:example” to run the test. The terminal shows the execution alongside the test status and the time to execute the test.
Conclusion
This blog shows that it is very simple to set up the Puppeteer environment and write the first test case to interact with the browser alongside accessing a certain web page and perform few assertions. The test is performed in headless mode, but that can always be changed to the non-headless mode in the puppeteer launch options to visualize the execution. The next blog in this series will cover some more functionalities that are easily achievable through puppeteer.
