My Playwright Test Automation Framework for UIs and APIs

The repository “yasafooo/playwright-test-automation-framework” on GitHub is a test automation framework built using Playwright, a Node.js library for automating web browsers. The framework includes utility functions and configurations for creating and running automated tests for web applications. It is designed to be easy to use and customizable, allowing developers to create and run tests using different browsers and devices.

It’s a simple framework, we can run through the Jenkins pipeline using JenkisFile. It will execute the tests on the playwright's official docker image (the running device should have docker) and post the results to Teams/Slack channels.

Project Structure

test.config.js

This is a module.exports function that exports an object with a few properties related to setting up an automated test environment using Playwright. Here’s what each line of the code does:

• The first line loads the dotenv module, which allows the use of environment variables stored in a .env file located in the same directory as the code. The dotenv() function reads the variables from the .env file and adds them to the process.env object so they can be accessed later in the code.
• The second line initializes an empty object called setUp that will contain properties related to the test environment.
• The third line assigns a string value of “https://playwright.dev/" to the applicationDevUrl property of the setUp object. This URL is the web address of the application being tested.
• The fourth line assigns a string value of “https://echo.getpostman.com/" to the applicationDevApi property of the setUp object. This URL is the API endpoint being tested.
• The fifth line sets the value of the testEnv property of the setUp object to the value of the TEST_ENVIRONMENT environment variable. If TEST_ENVIRONMENT is not set, it defaults to “DEV”.
• Finally, the setUp object is returned from the function and can be used by other code modules to configure and run automated tests.

teams.config.json

Please refer to the following docs for the Test Result Reporter plugin

GitHub - test-results-reporter/reporter: Publishes test results to Microsoft Teams, Google Chat &…

Test Results Reporter

playwright.config.js

This is a configuration file for running end-to-end tests using the Playwright Test automation framework.

The file exports a config object that sets up the test environment with various options and settings such as the test directory, timeout limits, test reporters, and device profiles to run the tests on.

The config object also defines different projects that represent the different browser/device configurations that will be tested against. These can be configured with different settings such as the testDir to point to specific test folders, or the use property to specify device profiles for the tests.

The config object also defines options for test artifacts such as screenshots, videos, and traces to be saved in the outputDir.

Overall, this file sets up the environment and configurations for running end-to-end tests on different browsers and devices, with various options to customize the test execution and report results.

package.json

This is a package.json file, which is used to manage dependencies and scripts for a Node.js project.

• name: The name of the project.
• version: The version number of the project.
• description: A brief description of the project.
• main: The entry point of the project.
• scripts: A collection of scripts that can be run using npm run <script-name>.
• repository: The URL of the repository where the project is hosted.
• keywords: A list of keywords associated with the project.
• author: The author(s) of the project.
• license: The license under which the project is distributed.
• bugs: The URL where issues with the project can be reported.
• homepage: The URL of the project's homepage.
• devDependencies: A list of dependencies that are only required for development purposes, such as testing frameworks or build tools.

In this specific package.json file, the project is a test automation framework for UI and API using Playwright. It has the following devDependencies:

• @playwright/test: A testing framework for Playwright.
• dotenv: A zero-dependency module that loads environment variables from a .env file into process.env.
• image-base64: A module that converts images to base64 strings.
• test-results-reporter: A module that sends reports to Teams and Slack channels.

Jenkinsfile

This is a Jenkins pipeline script written in Groovy language for automating the Playwright test suite. The script has two stages: ‘Install Playwright’ and ‘Run Tests’.

In the ‘agent’ section, a Docker container with the image ‘mcr.microsoft.com/playwright’ is defined, which will be used as the runtime environment for running the tests. The ‘label’ option specifies the Jenkins agent label that will be used for running the pipeline.

In the first stage ‘Install Playwright’, the ‘npm i -D @playwright/test’ command installs the Playwright testing framework as a dev dependency, and ‘npx playwright install’ installs the necessary browser binaries.

In the second stage ‘Run Tests’, the ‘npx playwright test — list’ command lists all the tests available to run, and ‘npx playwright test’ executes the tests. Finally, the ‘npx test-results-reporter publish -c teams.config.json’ command publishes the test results to a Teams channel using the ‘teams.config.json’ configuration file.

The ‘post’ section defines a post-build action to be taken after the tests have been completed. In this case, if the tests are successful, a message is printed to the console saying ‘Test Finished’. The ‘archiveArtifacts’ command and ‘sh’ command is commented out but can be used to archive any artifacts generated by the test suite and clean up any files.

customreport/reporter.js

This is a custom reporter module that can be used with Playwright’s testing framework. It exports a single class CustomReporter that has several methods that will be called by Playwright during a test run.

onBegin(config, suite) is called at the beginning of the test run and logs the number of tests that will be run. It also gets the title of the top-level suite of tests.

onTestBegin(test) is called before each test and logs the name of the test.

onTestEnd(test, result) is called after each test and creates a test object that includes the name, ID, duration, status, and any attachments (such as screenshots). The test object is pushed to a stack.

onEnd(result) is called at the end of the test run and creates a suite object that includes the environment, duration, name, and all the test objects collected in the stack. It then logs the suite object as a JSON string.

Overall, this custom reporter module provides a way to create a custom format for test results that can be easily consumed by other tools or services.

pages/HomePage.js

This is a module that exports a class HomePage. The class has a constructor that takes a page parameter which is an instance of a Page class from the Playwright library. The class has four methods:

• goto() method navigates the page to the URL defined in the testConfig module exported as applicationDevUrl.
• getStarted() method clicks on the "Get started" link and expects the "Installation" header to be visible.
• pageObjectModel() method calls the getStarted() method and then clicks on the "Page Object Model" link.

The class also defines four properties:

• getStartedLink - a Playwright locator that targets the "Get started" link.
• gettingStartedHeader - a Playwright locator that targets the "Installation" header.
• pomLink - a Playwright locator that targets the "Page Object Model" link.
• tocList - a Playwright locator that targets the table of contents list on the page.

services/Path.js

This code exports a function that returns an object containing a set of constants related to HTTP response statuses.

The returned object has a single key-value pair:

• SUCCESS_STATUS - a string value of "status/200", which represents the path to the HTTP response status code of 200 OK.

The purpose of this code is to provide a central location for defining and storing constants related to HTTP response statuses, which can be used throughout the application.

services/PostmanService.js

This is a module that exports a function that returns an object PostManService. The PostManService object has a single function getPostManStatus that accepts a request object as an argument.

Within getPostManStatus, a path variable is constructed by concatenating the applicationDevApi base URL from the test.config file with the SUCCESS_STATUS path from the Path module. Then, an HTTP POST request is sent to this path using the request.post method. The response from this API call is returned as the result of the getPostManStatus function.

Overall, this module provides a way to send a POST request to a specific endpoint (defined by SUCCESS_STATUS) in the applicationDevApi base URL and retrieve the response.

tests/api/api.spec.js

This is a Playwright test file written in JavaScript. It contains a single test called Test check the postman status that verifies the response from a Postman service.

The test and expect functions are imported from the @playwright/test library. The PostManService is imported from a custom module defined in the ../../services/PostmanService file. The testName variable is a string that contains the name of the test.

The test.describe function is used to define a test suite that contains the Test check the postman status test. The test.beforeAll, test.beforeEach, test.afterEach, and test.afterAll functions are used to define test hooks that run before or after the test.

The test function defines the test and takes a callback function as its argument. The callback function takes an object called testInfo that contains information about the current test.

The PostManService().getPostManStatus(request) function sends a POST request to the Postman service and returns a response. The response is then checked using the expect.soft function to verify that the response is ok and has a status of 200.

tests/ui/ui.spec.js

This is a Playwright test script that tests the functionality of a web application’s homepage.

The script imports the test, expect, and chromium modules from the Playwright library, as well as the HomePage class from a custom pages module. It also defines a testName variable.

The script then defines a test.describe block, which contains several nested test blocks.

In the first test block, the beforeAll hook launches a new instance of the Chromium browser and creates a new browser context and page. It also initializes a HomePage object and assigns it to the home variable.

The beforeEach hook navigates the page to the application's home page.

The first test case verifies that the “Getting started” section of the home page contains a table of contents with specific text elements.

The second test case verifies that clicking the “Page Object Model” link navigates the page to an article about the page object model and that the article contains specific text.

The afterEach hook logs information about the completed test case.

The afterAll hook closes the browser and logs a message indicating that the tests are finished.

please provide your feedback and comments to support me.

https://github.com/yasafooo/playwright-test-automation-framework