pwf-ck

██████╗░██╗░░░░░░█████╗░██╗░░░██╗░██╗░░░░░░░██╗██████╗░██╗░██████╗░██╗░░██╗████████╗░░░░░░████████╗░██████╗ ██╔══██╗██║░░░░░██╔══██╗╚██╗░██╔╝░██║░░██╗░░██║██╔══██╗██║██╔════╝░██║░░██║╚══██╔══╝░░░░░░╚══██╔══╝██╔════╝ ██████╔╝██║░░░░░███████║░╚████╔╝░░╚██╗████╗██╔╝██████╔╝██║██║░░██╗░███████║░░░██║░░░█████╗░░░██║░░░╚█████╗░ ██╔═══╝░██║░░░░░██╔══██║░░╚██╔╝░░░░████╔═████║░██╔══██╗██║██║░░╚██╗██╔══██║░░░██║░░░╚════╝░░░██║░░░░╚═══██╗ ██║░░░░░███████╗██║░░██║░░░██║░░░░░╚██╔╝░╚██╔╝░██║░░██║██║╚██████╔╝██║░░██║░░░██║░░░░░░░░░░░░██║░░░██████╔╝ ╚═╝░░░░░╚══════╝╚═╝░░╚═╝░░░╚═╝░░░░░░╚═╝░░░╚═╝░░╚═╝░░╚═╝╚═╝░╚═════╝░╚═╝░░╚═╝░░░╚═╝░░░░░░░░░░░░╚═╝░░░╚═════╝░

Playwright-ts

playwright-ts is a playwright framework based on Playwright and Typescript. This provides a boilerplate with wrappers and utility functions to create automated testing suite more efficiently and quickly.

usage

Installation

• Install Playwright
• Install playwright-ts from NPM package manager npm install playwright-ts

Please note:- playwright-ts requires ECMAScript module support, so please ensure your projects support ES modules by setting "type"="module" in your package.json files.

Environment Configuration Support

• playwright-ts is shipped with a CLI tool that can be used to update default playwright config file and enable environment configuration support.

• Once playwright-ts package is installed, run npx playwright-ts with -c or --configgento generate the config files.

  npx playwright-ts -c

• This enables the use of dotenv in the project and generates .env file in root directory of project to configure environment variables for local execution. Simply add the name and value of variable to the file using the already provided syntax.

  Pro tip: Always add .env to .gitignore file as this file can potentially have "SENSITIVE" data. Also, the values from file are always read as strings, so expect discrepancy when using boolean values .

• Generates a environments.config.ts file that holds value of configuration properties for different environments. All you have to do is modify this as per your needs and use the appropriate value for environment variable TEST_ENV in your pipeline or alternaitvely from .env file.

• Updates playwright.config.ts file to merge the playwright's default configuration and configuration in environments.config.ts. Also, enables dotenv support.

To read any config value in your test. Import the merged config and use as shown below.

import config from "../playwright.config";
await page.goto(config.baseUrl!);

NPM Packages

Use	Script
PNPM Package	npm i -g pnpm	For efficient package manager
add tsconfig	pnpm tsc --init
tsup	pnpm add tsup -D	bundle library
noUncheckedIndexedAccess	noEmit - tru	change in tsconfig
package.json	tsup framework --format cjs, esm --dts
to build	pnpm run build
Changeset	pnpm add -D @changesets/cli

ref: https://www.youtube.com/watch?v=eh89VE3Mk5g

Playwright Guide

Installation

Use	Script
Installation	npm init playwright@latest
Runs the end-to-end tests	npx playwright test
Starts the interactive UI mode.	npx playwright test --ui
trace on	npx playwright test --trace on
Runs the tests only on Desktop Chrome.	npx playwright test --project=chromium
Runs the tests in a specific file.	npx playwright test example
Runs the tests in debug mode.	npx playwright test --debug
Auto generate tests with Codegen	npx playwright codegen
Show Report	npx playwright show-report
Open Playwright Inspector	npx playwright open
Generate Allure reporting	npx allure generate ./allure-results --clean
Open Allure report	npx allure open ./allure-report/
To Run tests in local	TEST_ENV=local npx playwright test
To Run a specfic test	npx playwright test -g "test name"

Running tests using env variable : https://medium.com/@irfan17sat/configuring-multiple-environments-in-playwright-67e402c1c627

Automation Testing Principles : https://testingconsultancy-my.sharepoint.com//g/personal/aadhith_bose_ttcglobal_com/EW6TZYI_XhVLu2b1MFb-Mk4BInbKTyKlBwifFnGdh-RmPQ?e=sNZvUW

Page Objects

Name	Description
By Tag Name	page.locator('input')
By ID	page.locator('#id')
By Class Value	page.locator('.class value')
By Attribute	page.locator('[placeholder="Email"]')
By Full Class Value	page.locator('[class="full static shape rectangle"]')
Combine	page.locator('#id').locator(.class)
Combine	page.locator('#id').getByRole('button, {name:"Sign in"}')
By Xpath	page.locator('//xpath')
By Partial text	page.locator(':text("Email")')
By Exact text	page.locator(':text-is("Email here")')