# pwf-ck > Playwright framework using Typescript. Latest version **1.0.24** (published 2024-02-22) · ISC license · 0 weekly downloads > **Deprecated.** This package is deprecated. ## Install ```sh npm install pwf-ck pnpm add pwf-ck yarn add pwf-ck bun add pwf-ck ``` Provides the command `playwright-ts`. ## Health **Score 10/100 (F)** — status: deprecated. Negative: deprecated. ## Facts | | | |---|---| | Version | 1.0.24 | | Published | 2024-02-22 | | First published | 2024-02-22 | | Weekly downloads | 0 | | License | ISC | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 9 | | Unpacked size | 57 KB | | Known vulnerabilities | 0 (+26 in 1 direct dependencies) | | Install scripts | no | | Maintainers | ceekaysingh1 | ## Links - npm: https://www.npmjs.com/package/pwf-ck - npm.io page: https://npm.io/package/pwf-ck ## Dependencies (9) - [pnpm](https://npm.io/package/pnpm.md) ^8.15.2 - [chalk](https://npm.io/package/chalk.md) ^5.3.0 - [dotenv](https://npm.io/package/dotenv.md) ^16.4.4 - [figlet](https://npm.io/package/figlet.md) ^1.7.0 - [commander](https://npm.io/package/commander.md) ^12.0.0 - [playwright](https://npm.io/package/playwright.md) ^1.41.2 - [typescript](https://npm.io/package/typescript.md) ^5.3.3 - [@types/figlet](https://npm.io/package/@types/figlet.md) ^1.5.8 - [@playwright/test](https://npm.io/package/@playwright/test.md) ^1.41.2 ## Recent versions - 1.0.24 (latest) — 2024-02-22 - 1.0.23 — 2024-02-22 - 1.0.22 — 2024-02-22 - 1.0.21 — 2024-02-22 - 1.0.20 — 2024-02-22 - 1.0.19 — 2024-02-22 - 1.0.18 — 2024-02-22 ## README ██████╗░██╗░░░░░░█████╗░██╗░░░██╗░██╗░░░░░░░██╗██████╗░██╗░██████╗░██╗░░██╗████████╗░░░░░░████████╗░██████╗ ██╔══██╗██║░░░░░██╔══██╗╚██╗░██╔╝░██║░░██╗░░██║██╔══██╗██║██╔════╝░██║░░██║╚══██╔══╝░░░░░░╚══██╔══╝██╔════╝ ██████╔╝██║░░░░░███████║░╚████╔╝░░╚██╗████╗██╔╝██████╔╝██║██║░░██╗░███████║░░░██║░░░█████╗░░░██║░░░╚█████╗░ ██╔═══╝░██║░░░░░██╔══██║░░╚██╔╝░░░░████╔═████║░██╔══██╗██║██║░░╚██╗██╔══██║░░░██║░░░╚════╝░░░██║░░░░╚═══██╗ ██║░░░░░███████╗██║░░██║░░░██║░░░░░╚██╔╝░╚██╔╝░██║░░██║██║╚██████╔╝██║░░██║░░░██║░░░░░░░░░░░░██║░░░██████╔╝ ╚═╝░░░░░╚══════╝╚═╝░░╚═╝░░░╚═╝░░░░░░╚═╝░░░╚═╝░░╚═╝░░╚═╝╚═╝░╚═════╝░╚═╝░░╚═╝░░░╚═╝░░░░░░░░░░░░╚═╝░░░╚═════╝░ # 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](https://playwright.dev/docs/intro#installing-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 `--configgen`to 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 :smiley: . - 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/: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")')` | --- _Source: https://npm.io/package/pwf-ck · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._