pwf-ck v1.0.24
██████╗░██╗░░░░░░█████╗░██╗░░░██╗░██╗░░░░░░░██╗██████╗░██╗░██████╗░██╗░░██╗████████╗░░░░░░████████╗░██████╗ ██╔══██╗██║░░░░░██╔══██╗╚██╗░██╔╝░██║░░██╗░░██║██╔══██╗██║██╔════╝░██║░░██║╚══██╔══╝░░░░░░╚══██╔══╝██╔════╝ ██████╔╝██║░░░░░███████║░╚████╔╝░░╚██╗████╗██╔╝██████╔╝██║██║░░██╗░███████║░░░██║░░░█████╗░░░██║░░░╚█████╗░ ██╔═══╝░██║░░░░░██╔══██║░░╚██╔╝░░░░████╔═████║░██╔══██╗██║██║░░╚██╗██╔══██║░░░██║░░░╚════╝░░░██║░░░░╚═══██╗ ██║░░░░░███████╗██║░░██║░░░██║░░░░░╚██╔╝░╚██╔╝░██║░░██║██║╚██████╔╝██║░░██║░░░██║░░░░░░░░░░░░██║░░░██████╔╝ ╚═╝░░░░░╚══════╝╚═╝░░╚═╝░░░╚═╝░░░░░░╚═╝░░░╚═╝░░╚═╝░░╚═╝╚═╝░╚═════╝░╚═╝░░╚═╝░░░╚═╝░░░░░░░░░░░░╚═╝░░░╚═════╝░
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-tsis shipped with a CLI tool that can be used to update default playwright config file and enable environment configuration support.Once
playwright-tspackage is installed, runnpx playwright-tswith-cor--configgento generate the config files.npx playwright-ts -cThis enables the use of
dotenvin the project and generates.envfile 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
.envto.gitignorefile 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 :smiley: .Generates a
environments.config.tsfile 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 variableTEST_ENVin your pipeline or alternaitvely from.envfile.Updates
playwright.config.tsfile to merge the playwright's default configuration and configuration inenvironments.config.ts. Also, enablesdotenvsupport.
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/:w:/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")') |