This is a boilerplate/template for a Playwright-Typescript framework for web UI, API, mobile emulation, DB, and visual testing. Docker image, SonarQube, Lighthouse, GitHub Actions setup with Slack notifications are also implemented.
MIT License
Playwright Demo - This project is based on Microsoft Playwright which enables reliable end-to-end testing for modern web apps.
Top Features:
Bonus:
The following software are required:
https://nodejs.org/en/download/
npm ci -g allure-commandline
https://www.sonarqube.org/downloads/
https://docs.sonarqube.org/latest/analysis/scan/sonarscanner/
https://github.com/akshayp7/playwright-typescipt-playwright-test.git
npm install
npx playwright install
export npm_config_ENV="qa"
playwright.config.ts
.Test Cases are present in "tests" folder
:npm run test --ENV="qa"
--project=Firefox
against test:single
in package.json
, just make sure the browser name given matches the name given in playwright.config.ts
.npm run test:single --ENV="qa"
@SmokeTest
at the start of your test case name, then in package.json
against test:parallel
give the tag value and execute :npm run test:parallel --ENV="qa"
@SmokeTest
at the start of your test case name, then in package.json
against test:serial
give the tag value and execute, workers
parameter correspond to test cases you want to execute simultaneously e.g. --workers=3
, executes 3 test cases simultaneously :npm run test:serial --ENV="qa"
npm run test:api --ENV="qaApi"
npm run test:record
npm run test:visual --ENV="qa"
playwright.config.ts
, under device section provide desired device name and execute :npm run test:device --ENV="qa"
npm run allureReport
testConfig.ts
and provide value against username
lib/WebActions
in decipherPassword()
uncomment ENCRYPT
code block and replace password
with your password, execute the test case, Encrypted password will be printed on your console . Copy Encrypted password in testConfig.ts
against password
field. You can comment Encrypt bloack ater this.testConfig.ts
and provide values for dbUsername, dbPassword, dbServerName, dbPort, dbName
. Refer to tests/DB.test.ts
for connecting to DB and Firing a Query.trace.zip
is generated and execute :npx playwright show-trace trace.zip
tsconfig.json
file in paths
section we can re-assign the long path imports like '../../' to a variable which starts with '@' and then we can use it to shorten our import statements in respective file."@pages/*":["pageFactory/pageRepository/*"]
To generate HAR file navigate to HAR.test.ts
inside functional folder, in that use the below line
await page.routeFromHAR('har/personalInfo.har',{update:true});
where update:true
means to record a new har file and store it in the location provided by first parameter har/personalInfo.har
, this generates and links all the required subfiles for personalInfor.har
and stores it in har
directory
Once HAR file is recorded comment the line await page.routeFromHAR('har/personalInfo.har',{update:true});
and uncomment below line
await page.routeFromHAR('har/personalInfo.har',{update:false});
where update:false
means to use the existing HAR from from the path given in first paraeter har/personalInfo.har
, to see this in action you can turn off your internet and run the script, complete webpage is mocked up along with assertions on the browser of your choice this is done using the Network Replay feature and by using our recorded HAR file.
We can use this feature when webpage is down for some reason and we want to test some scenarios.
CustomReporterConfig.ts
using winston logger.First we have to create a logger object using winston.createLogger and then provid the configuration you need.
First argument is "level" for which i have provided value as "info", in winston logger every logging level is provided with a numeric value, for info the numeric value is 2, so if we provide level as info then all the logs which are equal to or less than info level will be displayed. In our case logs with error(0) and warn(1) wil also be logged. For more info on logging refer below link
https://github.com/winstonjs/winston#logging
Second we have to provide format for the log file generate I have provided format as json using winston.format.json()
because JSON is widely used. There are various levels like printf, simple, colorize which you can refer in below link
https://github.com/winstonjs/logform#formats
Third part is transports which defines where the log file will be written. I have provided the location as logs/info.log
in my case
Once logger object is created I have provided logger.add(console);
which instructs logger to write the log files in console as well.
Once logger object is created you can use this instead of console.log in your framework and these logs will be written both in your console and log file.
@Smoke
in test:ui
section of package.json, because all my UI test cases are tagged with @Smoke
tag and we want to run only Web based test cases. To use UI mode use below command with ENV
value of your choicenpm run test:ui --ENV="qa"
For Extracting text from PDF we are using pdfjs-dist-es5
library. You can run the test case PdfToText.test.ts
to verify contents of PDF file. getPDFText()
method in lib/WebActions.ts
class is used for extracting text from PDF file.
Accessibility test case is written in tests/accessibility/Axe.test.ts
, to run this test use the command
npm run test:accessibility --ENV="qa"
.github/workflows/playwright.yml
file and events(trigger points) are set to pus/pull actions on master branch. Changes in command to run test cases can be made in "Run tests" section in this file.Overall Report
Detailed Report
Failure Report
Once you have completed setup for SonarQube given in Prerequisites section, configure SonarQube as given below
sonar.host.url=http://localhost:9000
sonar.sourceEncoding=UTF-8
admin
, default password is admin
. It might ask you to provide a new password for if you have logged in for first time, I have changed default password to password
.sonar-project.properties
file and provide the credentials configured on server webpage username value in sonar.login
and password in sonar.password
, in my case username is admin
and password was changed to password
.sonar.login=admin
sonar.password=password
You can provide any project name in sonar.projectKey
.
Specify a version in sonar.projectVersion
.
Provide UTF-8
in sonar.sourceEncoding
.
In sonar.language
provide the language you want to run scan on (For e.g. for typescipt its ts and for javascript its js).
If you have eslint file in your project provide the location in sonar.eslint.eslintconfigpath
.
You can exclude file from scanning like node_modules, results , Downloads section in sonar.exclusions
.
You can give your project location in sonar.sources
section I have provided it as ./
because my sonar-project.properties
file is within my project. If your properties files is somewhere else you have to provide the complete project path.
Now go to the location where sonar-project.properties
is present and run sonar-scanner
command (In my case I will diectly run it inside my project), and wait for scan to get over with success message.
Now navigate to http://localhost:9000/
and click on your project key displayed and go to Issues section, you can find all the suggestions and issues here. You can fix the issues ans rerun sonar-scanner
command once again.
SonarQube Report
For running the tests on Docker container we have to first build a image from Dockerfile and then run the image to spawn container on which the test scripts will run.
For building image from Docker run below command, where path to Dockerfile must be provided after -f tag and name of the image must be provided after -t tag.
docker build . -f Dockerfile -t playtest
docker run -e npm_config_ENV=qa --name playContainer playtest
CMD npm run test:serial --ENV="qa"
Lighthouse is an open-source, automated tool for improving the quality of web pages. You can run it against any web page, public or requiring authentication. It has audits for performance, accessibility, progressive web apps, SEO and more. I have configure Lighthouse for Performance in my Project. Please use version 9.6.8 as later versions are not compatible.
npm run lighthouse