🎭 Playwright TypeScript Example 🎭

📃 Articles written about this project

• Test Automation - Accelerating Playwright TypeScript Tests with Parallel Execution in GitHub Actions and Allure Reporting
• Test Automation - How to Use Dynamic Base URLs with Playwright TypeScript in GitHub Actions
• Test Automation - How To Attach Public IP Address to Allure Report using Playwright TypeScript Auto Fixtures
• Test Automation - Data-Driven Testing (DDT) with Playwright TypeScript Using Excel
• Test Automation - Efficient Element Selection with Playwright Typescript using Test IDs

🛠️ Tech Stack

Tool	Description
@stylistic/eslint-plugin	Stylistic formatting rules for ESLint
@types/node	TypeScript definitions for Node.js
@typescript-eslint/eslint-plugin	ESLint plugin for TypeScript
@typescript-eslint/parser	Parser for TypeScript-specific linting rules
allure-playwright	Allure framework integration for Playwright Test framework
dotenv	Loads environment variables from a .env file into process.env
ESLint	A tool for identifying and reporting on patterns in JavaScript
eslint-plugin-import	ESLint plugin with rules that help validate proper imports
eslint-plugin-playwright	ESLint plugin for Playwright tests
husky	Git hooks for enforcing rules in commits and push events
lint-staged	Run linters on git staged files
Playwright	A framework for Web Testing and Automation
TypeScript	A typed superset of JavaScript
xlsx	Library to parse and write Excel files

⚙️ Setup Instructions

Clone the project

git clone https://github.com/nirtal85/playwright-typescript-example.git
cd playwright-typescript-example

Install dependencies

npm install

Install playwright browsers

npx playwright install --with-deps

Create .env File

Create a .env file in the project root directory to securely store project secrets and configuration variables. This file will be used to define key-value pairs for various parameters required by the project. Add the following properties to the .env file:

Parameter	Description	Example Value
BASE_URL	The base URL for the application	"https://example.com"

🏃‍♂️ Running Tests

Run tests:

npx playwright test

Run the test with UI mode:

npx playwright test --ui

📊 Viewing Test Results

Install Allure Commandline To View Test results

For Windows:

Follow the instructions here to install Scoop.
Run the following command to install Allure using Scoop:

scoop install allure

For Mac:

brew install allure

View Results Locally:

allure serve allure-results

View Results Online:

View allure results via Github pages

ℹ️ View Help And Other CLI Options

npx playwright test --help