Web Application Automation Testing Tools With Puppeteer From Google IO

You might be curious to know what is Google I/O? So let’s start. Google IO is an annual developer conference held by Google in Mountain View, California. “I/O” stands for input/output, as well as the slogan “Innovation in the Open”. Now let’s look at what is a puppeteer?

What is a Puppeteer?

Puppeteer is the Open Source NodeJS Library at the Provide API to control Chrome Browser through chrome dev tool protocol. This contrasts with other Selenium-based Web Automation Test Frameworks in Control Browser. 

This gives Puppeteer an advantage because it has native and direct access to Chrome. Puppeteer was released for the first time since around 2017, and initially, the main purpose was to use the Library for Automate. But the puppeteer was introduced in more web automation testing scenarios, which puppeteer itself can control. 

It cannot, however, manage Test Cases like other Test Frameworks, such as making assertions or testing setup/Teardown or Test Reports. So it’s important to use Puppeteer to do a good Web Automation Test.

Puppeteer for Firefox

Sessions’ start-up has announced a major announcement from the collaboration between Google and Mozilla, causing Puppeteer for Firefox. This is the first start of the experiment to lead Puppeteer on Firefox, but it’s still a trial phase. If you want to try it out, try it. npm install puppeteer-firefox.

Puppeteer for Web Automation Test

Puppeteer, of course, has a rich range of Control Chrome Browser APIs, from the action on Browsers such as Click, TypeText, Form Submission, etc. Which is what people who do Web Automation Tests already want.

Problem and Solution

Usually, people encounter the classic problems of those who have written Web Automation Tests which summarize the problems as follows.

1. Tests Slowness

It is an undeniable problem that testing running on the web browser takes quite a long time to test. Many people write tests often using the browser to open/close each time when running each test to ensure that there is no Cookie, Network Caching, and cause good Test Isolation. But that is why it runs slower. 

Puppeteer has provided the API for creating a new browser context in Incognito Mode. Instead of running the browser every time, Google Claim says that Make Day 100 times faster.

2. Flaky Tests

Flaky Test is a Test that produces different results every single time that the test is administered. This problem is solved with The Provide Set of API which allows the puppeteer to stop waiting for some work before proceeding or assertion.

Puppeteer for Modern Web Testing

Puppeteer also has several APIs designed to be used for Tesla as follows:

1. Offline Support

We can also run offline mode through the Puppeteer API. That allows us to create the Test scenario when Web App doesn’t have an internet connection.

page.setOfflineMode(true);

2. Service Worker

Service Worker is a Javascript that works behind the Browser’s background, helping to manage many things for our web such as network caching or managing push notifications for us. Puppeteer has the ability to access service workers so that we can check something at the service worker such as checking if our App has been registered to service worker. The example below is to check if the web logo https://pptr.dev is cached with the service worker.

3. Geolocation

We can set Geolocation of our Browser as well as in the location we want. This enables test scenarios for the web to actually retrieve Browser Geolocation.

4. Network Monitoring

Puppeteer’s highlight is that it can now be able to do Network Monitoring which in the corner of the test means that we can mock network requests/responses at our Web App Call to the Server. 

The example above is intercepting network requests with Resource Type as a picture to return a response to all the set cat images. Network Request Interception allows us to create negative Test Scenarios, such as server return error, failure to find our Web App.

5. Dispatch Event

The Dispatch Event is sending some Javascript Code to the browser. We work to achieve an event on our Web App, such as pressing the Enter button on the keyboard, Mouse Down Event, etc., which Puppeteer can simulate the event.

6. Performance Testing

In addition to performing the Functional UI Test, Puppeteer can also help perform testing for our Web Application.

7. Metrics

We can check out how much resources we use, such as checking how many apps we use Memory, can call the API to get the value out. page.metrics() The JSHeapUsedSize value is the specific memory usage of our app.

8. Chrome Tracing

Tracing is the chrome DevTools’ feature to capture CSS, DOM, Animation Frames, and Network on Web App.

9. Code Coverage

We can also use code coverage through the Puppeteer API, where you can choose from both CSS Coverage and JavaScript Coverage.

10. Accessibility

Puppeteer has an API that can help you access accessibility trees on your Browser to check that our App has an Accessibility Tree or anything that can give Screen Readers, which is a technology that reads aloud to visually impaired people. The method is to snapshot the Accessibility Object in the Web App.

11. Community

Google now uses Puppeteer within the organization, including Facebook and Netflix. Usage of Puppeteer, as well as that Puppeteer’s community, is growing rapidly. There’s a Slack Channel https://puppeteer.slack.com with more than 270 people, and there’s a lot of people who help.

Puppeteer is a Web Automation Library for Web Developers in the future because of its many capabilities, and it’s a Native Library that supports directly from Google. There will be no google io 2020, this year due to the novel coronavirus pandemic. The conference of google io extended from the usual two-day schedule to three days. There was no keynote on the final day. If you have any further questions regarding Puppeteer, please feel free to address them in the comments section below. We will be happy to resolve them.