PlayWright_OverAll

 

Playwright Setup and Kick Start

Prerequisites for Installing Playwright

1. Install Node.js – Required for running JavaScript-based projects.
2. Install Visual Studio Code (VS Code) – A recommended code editor for development.
3. Create a Project Folder – Open the folder using VS Code to begin development.

---

Installing Playwright

Open the terminal in your project folder and run:

npm init playwright@latest

This command initializes a Playwright project and creates the following files and folders:

• package.json – Manages project dependencies and scripts.
• playwright.config.js – Contains Playwright configuration settings.
• tests/ – Directory for organizing test files.

---

To check the installed version of Playwright:

npx playwright -v

 

 

 

 

 

 

 

 

 

 

 

Prerequisites for Installing Playwright

1. Install Node.js
• Required for running JavaScript/TypeScript-based Playwright projects.
• Verify installation:

o   node -v

o   npm -v

2. Install Visual Studio Code (VS Code)
• Recommended IDE for Playwright development.
• Install extensions:
• Playwright Test for VS Code
• ESLint (optional)
3. Create a Project Folder
• Create a new folder on your system.
• Open the folder using VS Code.

---

Installing Playwright

Open the terminal in your project folder and run:

npm init playwright@latest

During installation, you will be prompted to:

• Choose TypeScript or JavaScript
• Select browsers (Chromium, Firefox, WebKit)
• Add GitHub Actions workflow (optional)
• Install Playwright browsers

---

Project Structure Created

playwright-project/

│

├── node_modules/

├── tests/

│   └── example.spec.ts

├── playwright.config.ts

├── package.json

├── package-lock.json

└── .gitignore

Important Files

• package.json – Project dependencies and scripts
• playwright.config.ts/js – Global Playwright configuration
• tests/ – All test scripts
• node_modules/ – Installed libraries

---

Verify Playwright Installation

npx playwright -v

---

Install Playwright Browsers (If Needed)

npx playwright install

Install specific browser:

npx playwright install chromium

---

Running Playwright Tests

Run all tests

npx playwright test

Run tests in headed mode

npx playwright test --headed

Run tests in a specific browser

npx playwright test --browser=chromium

Run a single test file

npx playwright test tests/login.spec.ts

Run tests with UI mode

npx playwright test --ui

---

Viewing Test Reports

After execution, open the HTML report:

npx playwright show-report

---

Debugging Tests

Debug mode

npx playwright test --debug

Slow motion

npx playwright test --headed --slow-mo=500

---

Recording Tests

Generate tests automatically using Codegen:

npx playwright codegen https://example.com

---

Playwright Test Syntax (Basic Example)

import { test, expect } from '@playwright/test';

 

test('Homepage validation', async ({ page }) => {

  await page.goto('https://example.com');

  await expect(page).toHaveTitle('Example Domain');

});

---

Common Playwright Commands (Quick Reference)

Command	Purpose
npx playwright test	Run all tests
npx playwright test --headed	Run in browser
npx playwright test --ui	Open test runner UI
npx playwright show-report	View HTML report
npx playwright codegen	Record tests
npx playwright install	Install browsers
npx playwright -v	Check version

 

 

 

Inside that directory, you can run several commands:

 

  npx playwright test

    Runs the end-to-end tests.

 

  npx playwright test --ui

    Starts the interactive UI mode.

 

  npx playwright test --project=chromium

    Runs the tests only on Desktop Chrome.

 

  npx playwright test example

    Runs the tests in a specific file.

 

  npx playwright test --debug

    Runs the tests in debug mode.

 

  npx playwright codegen

    Auto generate tests with Codegen.

 

We suggest that you begin by typing:

 

    npx playwright test

 

And check out the following files:

  - .\tests\example.spec.ts - Example end-to-end test

  - .\playwright.config.ts - Playwright Test configuration

// import { test, expect } from '@playwright/test';

 

// test('has title', async ({ page }) => {

//   await page.goto('https://playwright.dev/');

 

//   // Expect a title "to contain" a substring.

//   await expect(page).toHaveTitle(/Playwright/);

// });

 

// test('get started link', async ({ page }) => {

//   await page.goto('https://playwright.dev/');

 

//   // Click the get started link.

//   await page.getByRole('link', { name: 'Get started' }).click();

 

//   // Expects page to have a heading with the name of Installation.

//   await expect(page.getByRole('heading', { name: 'Installation' })).toBeVisible();

// });

 

 

 

---

🔹 Session 2: Variables & Data Types (Foundation)

• What is a variable (box concept)
• Why we store data
• Declaring variables in TypeScript
• let, const (no theory overload)
• Data types:
• string
• number
• boolean
• Assigning values
• Printing variables using console.log
• Common beginner mistakes

---

🔹 Session 3: Type Safety (Why TypeScript is Special)

• What is type checking
• Compile-time error vs runtime error
• Why TypeScript prevents mistakes
• Declaring type explicitly
• Type mismatch examples
• Understanding error messages in VS Code
• Fixing type errors
• Why companies prefer TypeScript

---

🔹 Session 4: Operators & Basic Logic

• What are operators
• Arithmetic operators (+ - * /)
• Comparison operators (==, ===, >, <)
• Logical operators (&&, ||)
• Real-life examples (age, login, eligibility)
• Using operators in TypeScript
• Printing results
• Beginner logic building

---

🔹 Session 5: Conditions (Decision Making)

• What is condition in programming
• if statement
• if – else
• else if
• Real examples:
• login success/failure
• age validation
• Writing readable conditions
• Nested conditions (simple)
• Common logical mistakes

---

🔹 Session 6: Loops (Repeating Actions)

• Why loops are needed
• Real-life examples (repeat task)
• for loop
• while loop (basic idea)
• Loop with numbers
• Loop with conditions
• Printing values in loop
• Avoiding infinite loops

---

🔹 Session 7: Functions (Reusable Code)

• What is a function
• Why reuse code
• Creating simple functions
• Function parameters
• Returning values
• Function with types
• Calling a function
• Real-life automation examples

---

🔹 Session 8: Arrays & Objects (Test Data Basics)

• What is test data
• What is an array
• Storing multiple values
• Accessing array values
• Looping through array
• What is an object
• Key-value concept
• Simple object examples
• Relation to test data in Playwright

---

🔹 Session 9: Introduction to Playwright with TypeScript

• What is browser automation
• What Playwright can automate
• Creating Playwright project
• Folder structure overview
• Understanding .spec.ts file
• First Playwright test
• test, page, expect
• Running test from terminal
• Viewing HTML report

---

🔹 Session 10: Basic Automation Flow (End-to-End)

• Launch browser
• Open URL
• Locate element (basic locators)
• Click action
• Enter text
• Wait concept (no deep theory)
• Basic assertions
• Handling simple errors
• Automation best practices
• Next learning path

---

🎯 Outcome After 10 Sessions

Learner will be able to:

• Understand basic coding logic
• Read TypeScript code confidently
• Write simple Playwright tests
• Run tests and see reports
• Be ready for advanced Playwright topics