ceiqapractice/forte

Table of Contents

1. About FORTE
2. FORTE Start
3. Execution
• Web
• API
4. Reports
5. Docker
6. LightHouse

About FORTE

PLAYWRIGHT - JAVASCRIPT

Playwright is a Node.js library to automate Chromium, Firefox, and WebKit with a single API. Playwright is built to enable cross-browser web automation that is ever-green, capable, reliable and fast. It allows testing Chromium, Firefox and WebKit with a single API.

FORTE - FULLY OPTIMIZED RADICAL TEST ENGINE

• FORTE is designed for Web Application and REST API Automation Testing.
• FORTE - Playwright has its own test runner for end-to-end tests, we call it Playwright Test.
• By using JSON as Test Data Management for picking up the data's by mentioning the class name from the Test Class.
• Web Scraping - FORTE Engine will find the Web Elements according to the given URL's & it will stored in a JSON file for DATA PROCESSING
• Logicial Identifier for the Locators matching inside the DOM, it will locate & works on the available 1ocators
• Common Functions are available for the entire functional flow Activity
• As, FORTE supports for API Testing the CRUD Methods for the REST API's & Validating the BODY
• For Generating the Test Data for the CRUD Operations the Common Functions will be supported with FAKER ( RANDOM TEST DATA)

FORTE Start

The following software are required:

• nodejs : Download and Install Node JS from

  https://nodejs.org/en/download/

• Install Java 8 or above, Allure Reports require Java 8 or higher.

Installation

1. Clone the repo using below URL

https://github.com/ceiqapractice/FORTE.git

2. Navigate to folder and install npm packages using:

npm install

Execution

WEB

URL Config

The URL of the application under test can be given in the baseConfig.js file and used through the test.

Web Actions

All the common web related playwright’s actions are pre-available in the path main > web >commonFunctions > webActions.js and these common actions can be used throughout the test.

Any update on the actions or addition of the new methods can be added over here so it can be re-used for the test.

Element Finder

Element Finder feature allows you to find the elements of the page with the identifiers ID and Name and generate a JSON file with the page locators.

Below configurations need to be done for visual regression testing in baseConfig.js

The JSON file with the name of the page title will be generated under the Locators folder for the element finder with locators’ identifiers.

The JSON file data will be stored in the below format.

Pagetitle_elementid:"#element id value" //if the element contains only ID
Pagetitle_elementName:".element name value" //if the element contains only name
Pagetitle_elementName:["#element id value",".element name value"] //if the element contains both ID and Name

Element Finder can be executed using the command :

 npx playwright test test/web/elementFinder.spec.js 

Test Data Management

Test data management helps you to organize the test data based on your needs in the environment and language specific and retrieve data easily as required for the test case execution.

The Test data can contain three different files (Common data, Environment specific data & Language Specific data) and it should be saved under the folder Testdata in the JSON format.

The format of the files should be mentioned as : TestData>Modulename>

modulename.json (Common data)
modulename.envname.json(Environment Specific data) e.g. LoginPage.QA.json /LoginPage.dev.json
modulename.Languagecode.json(Language Specific data) e.g. LoginPage.en.json/LoginPage.fr.json

And the Env and Language configuration can be done in Config.js file

Test data Management can be used by importing the data handler file under FORTE>Helper>datahandler.js

Importing the file and object can be created with the two parameters module type (The name of the file you have stored under test data) & Test type (WEB/API) to access the data from the test data location

e.g.,
Const Object=new dataHandler (moduletype, Testtype)
Object.getdata().Key//It will return the specified value for the JSON key 

RUN

To run the Web test cases the first configuration need to be done in Playwright.config.js file

testDir : “test/web” // The testDir should be set to WEB to run the Web test cases 

You can run single test, multiple tests or all test using the command line and the commands shown below

Running single test file

 npx playwright test test/web/login-page.spec.js 

Running a set of test files

 npx playwright test test/web/login-page.spec.js test/web/home-page.spec.js

Running a file that have home or login in the filename

 npx playwright test test/web/login-page.spec.js test/web/home-page.spec.js

Running Tests on Specific browsers

 npx playwright test test/web/login-page.spec.js --project=chromium

Running all Tests

 npx playwright test 

PARALLEL EXECUTION
Parallel Execution works along with workers based on the tags of execution from the package.json file

All tests run in worker processes. These processes are OS processes, running independently, orchestrated by the test runner. All workers have identical environments and each starts its own browser. Note that parallel tests are executed in separate worker processes and cannot share any state or global variables. Each test executes all relevant hooks just for itself

for eg., from the above image, tag of smoketest will be executed in parallel with 5 workers along with the mentioned tags in the tests in firefox env In the below image of the Regression execution there is no environment mentioned so it will be executed based on the browsers mentioned in the PROJECTS -> playwright.config.js

locator Finder
Locator Finder, Which is used to filter the available elements from the list of elements in a DOM

The list of available elements will be mentioned in the JSON File

It will accept in the form of Array as well as String of element. It will search according to the logicial finder of elements in the DOM When the element is available and visible it will pick from the DOM and perform the actions

NOTE : It will accept String of DATA and Array of an elements

Visual Comparison

Visual comparison is an feature that navigates through every pages of the application and takes screenshot for visual regression of the application.

Below configurations need to be done for visual regression testing in baseConfig.js

Program navigates to each page of the application and checks whether the screenshot for the page is present in the folder that is specified in the foldertobestested configuration. If the screenshot is present, then it will be compared with the actual page or else screenshot of the page will be taken and placed in the folder mentioned in the configuration.

Threshold and Pixel difference ratio can be configured in the playwright.config.js

The name of the screenshot will be saved in the format of the “url-win32.png” followed by the trimmed base URL. E.g., The screenshot name of the URL (https://www.ceiamerica.com/about-us/) is aboutus-win32.png.

Folder to be tested should be placed under the structure FORTE > Visualcomparisonscreenshots> Foldername

Visual Regression can be executed using the command :

 npx playwright test test/web/Visualcomparison.spec.mjs 

API

FORTE - Application Programming Interface

      Configuration
         

• From the TestData Folder the API Modules will be decalred for eg., -> TestData->LoginPage->LoginPage.json Inside the JSON file the "BASEURL","PATH PARAMETER","QUERY PARAMETER","TOKEN",etc .. will be configured

    Config :
     {
     "baseURL": "https://gorest.co.in/public-api/users/",
     "getUserListURL": "https://gorest.co.in/public/v2/users",
     "accesstoken": "?access-token=",
     "auth": {
       "TOKEN": "c4f17a80e91c5a9368535ff65f17bad328fc3191b4892dae81a60340bec89e5c"
       },
     "pathuser": "3396",
     "queryParameter": {
     "parameterURL": "&page=4&gender=Female&status=Active"
     },
     "count": 5,
     "updateuser": "2599"
   }
  

TEST DATA

• It will Pick the test values from the folder TestData
• By Mentioning the Module Type and Test Type in the Data Handler it will pick up either WEB or API execution
• Need to mention in every tests according to the module and test type

test('API Testing', async ({request}) => {

let DataHandlertest = new DataHandler("LoginPage", "API"); // function });

or

test('Web Testing', async ({page}) => {

let DataHandlertest = new DataHandler("LoginPage", "WEB"); // function });

The data will be picked from this folder structure for eg.,-> APITestData -> LoginPage -> LoginPage.json. Then the Array of Data or string of data will be retireved

RUN

To run the API test cases the configuration need to be upadte in the Playwright.config.js file

testDir : “test/api” // The testDir should be set to API to run the Web test cases 

You can run single test, multiple tests or all test using the command line and the commands shown below

SINGLE TEST & MULTIPLE TEST

Running single test file

 npx playwright test .\loginPage-POST.spec.js  

Running a set of test files

 npx playwright test test/api/loginPage-GET.spec.js test/api/loginPage-POST.spec.js

Running a file that have home or login in the filename

 npx playwright test test/api/loginPage-POST.spec.js test/api/loginPage-POST.spec.js

Running all Tests

 npx playwright test 

GROUPING Test :

	 * The tags will be mentioned according to the type of testing in the package.json file. 
 The  same tags will declared in the test function 
  
  test('GET METHOD - Path Parameters -User Login with Token @smoke', async ({request}) => {
    // function
  }
	 Inside the Package.json file -> 

	 "scripts": {
		"fulltest" : "npx playwright test",
		"smoketest": "npx playwright  test --grep @smoke"
		}	
 *  In command line run with npx playwright test --grep @smoke  for tag based execution 
 * In Command line run with npx playwright test  for full test execution  

Reports

After every test execution allure results folder will be generated in project root folder then run the below commands to generate the allure report

npx allure generate ./allure-results --clean

Run the below command to open the allure report in the browser

npx allure open ./allure-report

• Overall Report

• Detailed Report

• Failed Report

Notification
A detailed status of Test execution report with test report link and the data table will be sent to the configured mails and Teams group. To achieve that add the [“./My-Reporter.js”] to your reporter config in Playwright.config.js.

All the necessary config for Notification can be done in the baseConfig.js file.

//baseConfig.js
//Mail Configurations
"FromMailaddress":"[email protected]",// From Mail Address should be mentioned here
"FromAddressPassword":"value",//From address password should be mentioned here
"ToMailAddress":["firstmail","Secondmail],//To Mail addresses should be mentioned here
"TeamsWebhookURL":"https://computerenterprisesinc.webhook.office.com/webhookb2/....",//Teams Channel WebHook URL should be mentioned here
"MailServiceProvider":"Gmail",//Mail service provider should be mentioned here
"MailNotification":"yes",//Yes for Mail notification enable and No for notification disable
"TeamsNotification":"yes",//Yes for Teams notification enable and No for notification disable
"Githubreportlink":"https://ceiqapractice.github.io/.." //Github report link can be added here

Snapshot for notifications:

Docker

Local Execution
      Prerequisites
         1. Installation
                 Clone the repo using below URL

https://github.com/akshayp7/playwright-typescipt-playwright-test.git

                 Navigate to folder and install npm packages using:

npm install

         2. Install Docker app
         3. Run the Docker app
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 --file tag and name of the image must be provided after -t tag.

docker build . --file Dockerfile.focal -t crate

Once the image is generated we can run the image to spawn container and run scrips using below command. In Below Command "playContainer" is name of the container created using "crate" image.

docker run -it -d --name playContainer crate /bin/bash

Execute the test script in "playContainer" , run the below command

docker exec -it playContainer /bin/bash

Now docker container is ready, Run the test scripts using below commands,

npx playwright test

CI/CD Execution

   FORTE integrated with Github repository , after every commit to github master the github action will be triggered ,
     GitHub Action Workflow:
           1.Code Check out
           2.Execute the docker file
                2.1.Pull Microsoft playwright image
                2.2.Create new directory
                2.3. Copy and paste source code into new directory
                2.4.Install npm and playwright
                2.5.Run test cases
                2.6.Generate Allure result
           3.Copy allure results from docker container
           4. Publish Allure results as artifacts
           5. Publish Allure results to Github pages

LightHouse

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.

• To configure Lighthouse navigate to "Lighthouse.js" and replace base URL with desired URL to test.
• Call lsaudit() function before page navigation to audit the webpage.
• To run Lighhouse test use below command, reports will be generated in htnl format in root directory with name "LighthouseReport.html"

npm run lighthouse