Skip to main content

Playwright Installation and Test Execution Using JavaScript

🎥 Playwright Installation & Test Execution Using JavaScript – Step-by-Step Guide

Pre-requisites

The following two items should be installed:

  • Node.js
  • VS Code

Playwright Installation & Test Execution Using JavaScript (Step-by-Step)

✅ Step 1: Create a Project Folder

Open your file explorer or terminal and create a new folder:

mkdir PlaywrightTest

Navigate into the folder:

cd PlaywrightTest

✅ Step 2: Open Folder in VS Code

Open Visual Studio Code. Click File → Open Folder and select the PlaywrightTest folder.

✅ Step 3: Initialize Playwright

Open the integrated terminal in VS Code:

  • Shortcut: Ctrl + ~ or use View → Terminal

Run the following command:

npm init playwright@latest

Follow the prompts:

  • Select JavaScript
  • Keep the default test folder (tests)
  • Choose GitHub Actions workflow (optional)
  • Press Enter to install browsers (Chromium, Firefox, WebKit)

After installation, the following will be created:

  • package.json
  • playwright.config.js
  • tests/ folder with example tests
  • .vscode/ (optional)

✅ Step 4: Run Your First Test (Using CLI)

Playwright includes a sample test file example.spec.js in the tests folder. Run all tests using:

npx playwright test

💡 Note: This will run all tests inside the tests folder.

✅ Step 5: View Test Report

After tests complete, view the HTML report:

npx playwright show-report

✅ Step 6: Run Test in Specific Browser

To run in Chromium only:

npx playwright test --project=chromium

To run with browser UI (headed mode):

npx playwright test --project=chromium --headed

✅ Step 7: Run a Specific Test File

To run only one test file:

npx playwright test tests/example.spec.js --project=chromium

With headed mode:

npx playwright test tests/example.spec.js --project=chromium --headed

✅ Step 8: Folder Structure After Setup


PlaywrightTest/
│
├── tests/
│   └── example.spec.js       # Sample test file
│
├── node_modules/             # Installed dependencies
├── package.json              # Project config
├── package-lock.json         # Dependency lock
├── playwright.config.js      # Playwright configuration
└── .gitignore (optional)

✅ Summary of CLI Commands

Purpose Command
Run all tests npx playwright test
Show HTML test report npx playwright show-report
Run only Chromium browser npx playwright test --project=chromium
Run Chromium in headed mode npx playwright test --project=chromium --headed
Run specific test file npx playwright test <path-to-file>
Run specific test with browser npx playwright test <file> --project=chromium

Comments

Post a Comment

Popular posts from this blog

Step-by-Step: Launch Browser, Context, and Page in Playwright and Run Test and Configuration (JavaScript)

🎥 Setup Browser, Context, Page & Run Config Test Scripts with package.json & playwright.config.js Step-by-Step: Launch Browser, Context, and Page in Playwright and Run Test and Configuration (JavaScript) 1. Install Playwright You can install Playwright using the following command: npm init playwright@latest 2. Create a Basic Test Script Understand the core Playwright architecture: Element Description browser Controls the browser instance (like Chrome, Firefox, etc.) context Acts like a separate browser profile (cookies, localStorage are isolated) page A single browser tab where interaction happens 3. Run the Test npx playwright test example.spec.js Ways to Run TypeScript Tests Way Command Notes 🟢 Via npx npx playwright test Uses built-in TypeScript support 🟢 With s...
Post a Comment
Read more

Playwright Test Structure in Details -Session-02

🎥 Playwright: test.only, Hooks & Grouping with test.describe Explained Let’s go step-by-step , showing how to build from a single test , to using beforeEach / afterEach , and then organizing things with test.describe . ✅ Step 1: Basic Single Test with test.only import { test, expect } from '@playwright/test' ; test. only ( '🚀 Basic test - check title' , async ({ page }) => { await page. goto ( 'https://example.com' ); await expect (page). toHaveTitle ( /Example Domain/ ); }); test.only ensures only this test runs — great for debugging. ✅ Step 2: Add beforeEach and afterEach import { test, expect } from '@playwright/test' ; test. beforeEach ( async ({ page }) => { console . log ( '🔄 Setting up before each test' ); await page. goto ( 'https://example.com' ); }); test. afterEach ( async ({ page }, testInfo) => { console . log ( `📦 Finished test: ${testInfo.title} `); }); test. only ( ...
Post a Comment
Read more

Playwright Locators in JavaScript (Complete Guide)

🎯 Playwright Locators in JavaScript (Complete Guide) This guide explains each Playwright locator with: ✅ What it is 🕐 When to use ⚙️ How to use it 🎯 Benefits 🧪 Code Examples 🔹 1. Locator by ID ✅ What: Selects an element with a unique id . 🕐 When: Element has a unique id . ⚙️ How: page.locator('#username') 🎯 Benefit: Fast and reliable. <input id="username" /> await page.locator('#username').fill('John'); 🔹 2. Locator by Class ✅ What: Selects by class . 🕐 When: Repeated or styled elements. ⚙️ How: page.locator('.password') 🎯 Benefit: Useful for shared styling. <input class="password" /> await page.locator('.password').fill('12345'); 🔹 3. Locator by Text ✅ What: Matches visible element text. 🕐 When: For buttons, links, etc. ⚙️ How: page.getByText('Login') 🎯 Benefit: Human-readable. <button>Login...
Post a Comment
Read more