Write End to End automation test using puppeteer. In this Automation tutorial, I will cover what is a puppeteer, Automation testing, and how to perform automation testing using puppeteer and jest.
Puppeteer is a web scraping and web automation tool. Puppeteer is a node js library that contains lots of features to automate. Puppeteer always runs automation tests over the latest version of chromium check out the in-depth puppeteer tutorial.
To start web automation with the puppeteer and Jest. we need Node installed in the machine and an IDE to write the code, basic knowledge about JavaScript, NPM, NodeJs, HTML and CSS.
- Install NodeJS.
- Download IDE(Visual Studio code/Notepad/SublimeText).
Steps for End to End automation in puppeteer
- Make sure NodeJS’s latest version is installed on your machine.
- Create a project folder let’s say “Automation tutorial”.
- Install puppeteer using NPM in your working directory using command
npm i puppeteerandnpm i puppeteer-core - Create a test file.
- Start writing test script.
- Run the script and get the output.
Node Commands to Install puppeteer and Jest.
Below NPM commands will install the puppeteer in your project folder.
npm i puppeteer npm i puppeteer-core
End to End automation test using puppeteer
In this puppeteer example, we are going to automate user login. Below are the testcase steps
- Launch browser.
- Navigate to URL.
- Click the login button.
- Enter the email-id and click on the button.
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch({headless:false});
const page = await browser.newPage();
//Enter URL
await page.goto('http://automationpractice.com/index.php');
//wait for login button
await page.waitForSelector(".login");
//Click to login button
const signinbtn = await page.$(".login");
signinbtn.click();
await page.waitForSelector("#email_create");
//Enter email id
await page.type("#email_create", "Nununnnn@gmail.com")
//Click to signup button
const signupbtn = await page.$("#SubmitCreate");
signupbtn.click();
await page.waitFor(10000);
//Close browser
await browser.close();
})();
Step by Step Explanation
const puppeteer = require('puppeteer');require function will include the ‘puppeteer’ in your test file.await puppeteer.launch({headless:false});launch function will open the new instance of a chrome browser and as “headless: false”. It means the browser will be open and you can see it. If we keep it “headless: true”. it will not open the browser and the whole testcase will run in the headless form.await browser.newPage();newPage() function will open a new tab in the chrome browser.page.goto('http://automationpractice.com/index.php');The Goto function is used to navigate on a page. here it will open the web page “http://automationpractice.com/index.php”.page.waitForSelector(".login");waitForSelector is used to wait for the selector or element. in this case, it will wait until the .login class will be visible on the browser.await page.$(".login").click();will find the login element and click on it.await page.type("#email_create", "Nununnnn@gmail.com")type function is used to enter a value into an input element. Here it enters the email id into the element where the input element id is “#email_create”.
Environment setup for puppeteer automation
As we discuss above we need to install NodeJS and an IDE-like visual studio in your development machine to perform automation with the puppeteer. Check out end to end Puppeteer installation tutorial. It will guide you through the step-by-step installation of NodeJs, Visual studio code, and a quick start to writing your first puppeteer code.
Project setup for puppeteer and Mocha
puppeteer is not a testing tool. it just helps to perform the operation on the browser. So How we will perform validation and verifications. So Now mocha and chai will come into the picture and help us to perform verification, validation, and assertion for our automation testcases.
When you working on large-scale projects. it’s really important to set up a scalable and Page Object Model automation framework so check out the here tutorial for Project setup in puppeteer and mocha.
How to handle browser in puppeteer
There are multiple operations that we need to perform with the browser at the time of automation like open browser, close browser, run the browser in headless or in with head. check the detailed explanation of Browser operations in puppeteer.
Handle Input fields, buttons and read lables in the puppeteer
Enter values into the input element and perform click operation on buttons and links. basically, Type() function is used to inject the values into input fields and the click() function is used to click on any button or link. Detail examples to handle the input fields and other HTML elements in the puppeteer.
Handle dropdown and Checkbox in puppeteer
click(selector, click_count) method to handle checkbox that takes two arguments as input. The first input is the selector and the second input is click count.
select(selector, value) function to get the value from the dropdown that takes two arguments as input. First as selector and second argument as the value. check out detailed examples to handle dropdown and checkboxes in puppeteer.
Get Page URL and title in puppeteer
page.title() function to get the title of the current page and page.url() function to get the URL of the current page. let’s perform an example to get page URL and Page title in puppeteer.
page.$eval() the function is used to get the value for an HTML element like label, span, or link in the puppeteer. check some examples to get the HTML element’s value.
Assertions in puppeteer and chai
The assertion is the process of verification of actual results with predict results. To perform verification and validation, we have to use chai with a puppeteer. Assertion helps us to verify any type of values like string, number, or a specific format. Check out some new and detailed examples of Assertion in puppeteer and chai.
Wait and TimeOut in puppeteer
What if your page is loading slow still we can automate it puppeteer provide some external functions to perform explicit and implicit wait while doing automation. Check out the end-to-end examples to perform wait and timeout in puppeteer.
Hooks in puppeteer
Hooks are used to performing an action on a particular stage. let’s say I want to open the browser before running the test suite and close the browser after execution of the automation suite or I want to update the results of every testcases in an HTML report so there are many uses of hooks. check the complete explanation about hooks in puppeteer.
Device Emulations in puppeteer
Device emulation is a process to test your application in a different browser. these days every device has a different size and environment so before launching the application we have to make sure it’s working fine in all the devices that are called responsive view. check how we can achieve device emulation in puppeteer.
