Puppeteer for UI Automation

What is Automated UI testing?

User interface (UI) testing is the process of testing a product’s graphical user interface to ensure it meets its specifications. Automated UI testing
is the automation of manual test tasks. Because manual tasks can be time consuming and error prone, we implement automated UI testing as a
more accurate, efficient, and reliable method that in longer run can be automated and executed on every release on CI/CD pipelines without
human intervention.

Prerequisite

Puppeteer
VS code or any other IDE
Node js
Jest
Chalk
Allure reporter
Travis-CI for CI/CD test executions

Puppeteer has been introduced as a node library to enable Chrome browser testing that supports feature of both headed and headless
automation. Headless browsers, like Headless Chrome are simply faster, consumes less memory, more flexible, and are steadier under
automation stress. One more advantage of headless automation that it can easily integrated with CI/CD pipelines as most of the servers are
command line and Linux based machines.

Other very useful feature that puppeteer provides are:

1. No need to install/configure driver to interact with browsers
2. Easily integrated with development code-base
3. Use of Karma, Mocha, Jest along with it has all of sudden made testing using automated scripts easier
4. Screenshot capture of page

Framework development

One of the key source to start automation is to create a custom framework that supports re-usability, easy maintainability and reliability. In our
case, framework would be written into the same technology stack that we are using in our development. Therefore, it will get merge into the same
development code and run directly on integration pipelines.

Framework includes following folders:
● test
containing test classes feature wise e.g. login.spec.ts

● pages
contains low level functions that are used in test classes e.g. common.page.ts

● locators
all the locators that are used to locate element, click and send keys

● actions
high level functions that can be reused at most cases e.g. loginApplication, Web driver wait class etc.

● config
Jest configuration
Puppeteer browser launch config
headless mode setup
Prerequisite scenarios

● allure
reporter.ts class containing reporter function

● allure-results
contains all the snapshots, steps and XML files that shows into allure report plugin

● downloads
in order to download any file from browser can be stored into this folder e.g. csv file/json/png files etc.

● Package.json containing all the desired dependencies

.env file containing the configuration that can be handled externally

Test Execution

We can run individual test class with yarn command.
`yarn test:ui-smoke login.spec.ts`

OR, we can run whole test suite directly with
`yarn test:ui-smoke`

After test execution locally, it will show execution status

After running all the tests, allure-results folder will have test results file as well as all the screenshots captured during test execution.

When we run `allure serve` command after test execution, it will open allure report into the browser.

In case of failure, it shows difference and failed the test case. This is Jest assertion that showing as sub-step under allure reporter.

There is a graph visualization as well under Graphs tab.

Continuous integration

As we are using Travis-CI and running the test as yarn commands. Also, puppeteer support headless execution so, it had easy configuration.

Allure report setup gets configuration on AWS level that host the reports at s3 after test execution that gives us the public URL to view allure report.
Allure report configuration can be done for each micro-services.