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

Understand browser, context, and page in Playwright

🎥 Playwright: Browser, Context & Page - Real-time Demo and Multi-User Testing  . 🎯 Goal: Understand browser , context , and page in Playwright 🧠 1. What is a browser ? ✅ Definition: A browser in Playwright is a launched instance of a real browser (Chromium, Firefox, WebKit) that can be used for automated testing. ✅ Purpose: It starts and controls the browser process. It is the root of your test execution. Required to create contexts and pages . ✅ Code Example: ts Copy Edit import { chromium } from 'playwright' ; const browser = await chromium. launch ({ headless : false }); 🧠 2. What is a context (browser context)? ✅ Definition: A context is like a separate browser profile (or incognito tab) inside the browser. Each context is isolated — no cookies, local storage, or sessions are shared. ✅ Purpose: Simulates multiple users or sessions. Enables parallel and isolated testing. Allows setting user-specific prefer...
Post a Comment
Read more

How to Maximize a Browser window using Playwright Java

  Playwright itself does not have a direct maximize () method like some other browser automation tools, but you can achieve the effect by setting the viewport to the screen size of your display. Below are ways to handle Maximize a browser in Playwright Java  Ø   Setting the viewport to the screen size  o    setViewportSize(1920, 1080): This sets the browser window to a full HD resolution, effectively maximizing it. o    setHeadless(false): Ensures the browser runs in a visible mode so you can see the window being maximized.  Code Snapshot  Playwright playwright = Playwright. create ()   ;   Browser browser = playwright.chromium().launch(new BrowserType.LaunchOptions().setHeadless(false));     // Create a new browser context   BrowserContext context = browser.newContext(new Browser.NewContextOptions()          .setViewportSize(1920, 1080));     ...
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