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

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