UI testing with Jest and Puppeteer

Let’s see how we can simply test the UI using Jest and Puppeteer.

What is Jest?

Jest is used by Facebook to test all JavaScript code including React applications. One of Jest’s philosophies is to provide an integrated “zero-configuration” experience. We observed that when engineers are provided with ready-to-use tools, they end up writing more tests, which in turn results in more stable and healthy code bases.

What is Puppeteer?

Puppeteer is a Node library which provides a high-level API to control headless Chrome or Chromium over the DevTools Protocol. It can also be configured to use full (non-headless) Chrome or Chromium.

Make the solution ready.

The solution for this article is in the GitHub, pulling from this will download the source code of this solution. When I have made this I have first downloaded an empty solution. And navigate to the folder.

Then execute the following code

Let us add a file named “package.json”

and add the following lines

After that we are going to create a JavaScript file named “sum.js” and following lines are in the file

Let us create a folder named “Test1st” and in that folder let us create a test file named “sum.test.js” and let us add following lines

In the command prompt if we run the following line

“npm test” it will see the test result. This is basically we have just made the Jest working.

So now it is the time to call Puppeteer. Let’s install Puppeteer by typing following command

then mkdir TestPuppeteer to keep the test files where we will be keeping test files for puppeteer.

It also download the chromium which is an open source and Chrome is build on chromium.

Testing Strategy. But before that we need to remove the package.json file to install the puppeteer safely. Then again add this file wit following line of codes

Now the solution is ready to go and we have seen the basic test using Jest. Next we will be looking at how to make use of Puppeteer for UI testing.

Starting off.

Let us create a file named “puppeteer.test.js” under the folder “TestPuppeteer” and include the following lines before everything.

 

Now we need to use a method named “beforeAll” to use it at the beginning of the test described in the file like to open the browser go to the URL etc. therefore we also should use another method named  “afterAll” to clean up the process like closing the browser etc. And the code will be like following

 

Above code block defines the body of the Test Suites and there will be Tests inside the test suites.

Before we go for actual testing let us define before and after matters

 

Basically we are opening and closing a specific URL each time we check. And in this case we are using the URL: https://UI-testing-with-Jest-and-Puppeteer.iamrezwan.com.

The Application to test:

At https://UI-testing-with-Jest-and-Puppeteer.iamrezwan.com a very simple application is written where it simply takes user input, trigger a JavaScript and submit a form and show the submitted data at the bottom of the page.

So let us declare a test suit named “UI-testing-with-Jest-and-Puppeteer” and write the “beforeAll” & “afterAll” to define the behavior.

Check for the title match with the URL.

Following line will check if the specific URL match the title of the page

Check the data field existence and inputting data.

 

Above code will check for the specific defined and will type the inputted value and if it is failed to find the mentioned field or failed to type the specific value to that field.

Check for calculation.

 

The example application is designed such a way that when inputting the date of birth it will calculate the age any the box age will show the age. So we have done that with the above code.

Check for submission of a form.

 

Above code will click the button to submit the data and wait for the page change then we can again check for the page title if it has navigated to the desired page. In this specific case it is the same page.

Check for the data after the submission.

Conclusion.

In the beforeAll we have written “headless: false” therefore setting that to true will not open up the browser and will run that in the background.

There may have network delay while testing, for that we can incorporate before run the test.


The solution used in this solution is in separate folder named “Project” in the git and can  run using .net core.

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *