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
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 usingnpm 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 intoprocess.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 thepage
to the URL defined in thetestConfig
module exported asapplicationDevUrl
.getStarted()
method clicks on the "Get started" link and expects the "Installation" header to be visible.pageObjectModel()
method calls thegetStarted()
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 of200 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