Setting Up Playwright with Node.js
The Best Playwright Testing Training Institute in Hyderabad
In the fast-evolving field of software testing, tools like Playwright and Selenium are essential for automation testers. If you are a graduate, postgraduate, or someone looking to switch your career from a different domain to IT, it’s crucial to receive professional guidance and hands-on experience in automation tools. That’s where I Hub Talent excels.
I Hub Talent is widely recognized as the best Playwright Testing Training Institute in Hyderabad. It offers a live, intensive internship program conducted by industry experts and specifically tailored for:
Setting Up Playwright with Node.js
Playwright is a modern end-to-end testing and browser automation framework developed by Microsoft. It allows developers and testers to automate Chromium, Firefox, and WebKit with a single API. Setting it up with Node.js is simple and powerful — and this guide walks you through every step, from installation to writing your first test.
✅ Why Use Playwright?
Supports Chromium, Firefox, and WebKit
Built-in auto-waiting
Headless and headed execution
Supports parallel testing
Can simulate multiple devices and screen sizes
Built-in support for screenshot, video recording, and tracing
🧰 Prerequisites
Before setting up Playwright, make sure you have:
✅ Node.js installed (v14 or above recommended)
✅ npm or yarn installed
✅ A code editor like VS Code
💡 To check Node.js:
bash
Copy
Edit
node -v
npm -v
Download: https://nodejs.org
📦 Step 1: Initialize Your Project
Create a new folder for your project and initialize it with npm:
bash
Copy
Edit
mkdir playwright-demo
cd playwright-demo
npm init -y
This creates a package.json file which helps manage dependencies.
📥 Step 2: Install Playwright
Install Playwright and its browser binaries:
bash
Copy
Edit
npm install -D @playwright/test
npx playwright install
This installs:
@playwright/test: Playwright’s test runner and API
All supported browsers (Chromium, Firefox, WebKit)
🔄 Use npx playwright install-deps on Linux to install dependencies.
🛠️ Step 3: Project Structure
A simple project structure might look like this:
lua
Copy
Edit
playwright-demo/
├── tests/
│ └── example.spec.js
├── package.json
└── playwright.config.js
Playwright automatically looks for tests inside the tests/ directory.
✍️ Step 4: Write Your First Test
Create a file named example.spec.js inside the tests/ folder:
javascript
Copy
Edit
const { test, expect } = require('@playwright/test');
test('Google Search Test', async ({ page }) => {
await page.goto('https://www.google.com');
await page.locator('[name="q"]').fill('Playwright testing');
await page.keyboard.press('Enter');
await page.waitForTimeout(2000);
await expect(page).toHaveTitle(/Playwright/);
});
▶️ Step 5: Run the Test
Use the following command:
bash
Copy
Edit
npx playwright test
Output will show a report of passed/failed tests.
⚙️ Step 6: Configuration File (Optional but Recommended)
Create a Playwright config file:
bash
Copy
Edit
npx playwright test --init
This generates a playwright.config.js file. Example config:
javascript
Copy
Edit
// playwright.config.js
const { defineConfig } = require('@playwright/test');
module.exports = defineConfig({
timeout: 30000,
retries: 1,
use: {
headless: true,
screenshot: 'on',
video: 'retain-on-failure',
baseURL: 'https://example.com',
},
});
💡 Useful Playwright CLI Commands
Command Purpose
npx playwright codegen <URL> Open browser recorder and generate code
npx playwright test Run all tests
npx playwright test <file> Run a specific test file
npx playwright show-report Opens the HTML report
npx playwright install Install browsers
npx playwright install-deps Install system dependencies (Linux)
📊 View Test Reports
Playwright generates an HTML report after the test run:
bash
Copy
Edit
npx playwright show-report
You’ll see detailed test results including:
Screenshots
Step-by-step trace
Errors and logs
🧪 Advanced Testing Features
Parallel Execution
Playwright runs tests in parallel by default. Configure workers in playwright.config.js:
javascript
Copy
Edit
workers: 4,
Cross-Browser Testing
javascript
Copy
Edit
projects: [
{ name: 'Chromium', use: { browserName: 'chromium' } },
{ name: 'Firefox', use: { browserName: 'firefox' } },
{ name: 'WebKit', use: { browserName: 'webkit' } },
],
Device Emulation
javascript
Copy
Edit
const { devices } = require('@playwright/test');
projects: [
{
name: 'iPhone 13',
use: { ...devices['iPhone 13'] }
}
],
🧼 Best Practices
Use test fixtures for reusability
Use data-testid attributes for stable selectors
Keep tests isolated and repeatable
Use headless mode for CI/CD
Avoid waitForTimeout() when possible; use await page.waitForSelector() instead
🧠 Bonus: Code Generation with Playwright
Run this command to open an interactive browser that records your actions:
bash
Copy
Edit
npx playwright codegen https://example.com
This tool automatically creates test scripts based on your clicks, typing, and navigation — saving huge time in script creation.
🧪 CI Integration (GitHub Actions Example)
Create a .github/workflows/playwright.yml:
yaml
Copy
Edit
name: Playwright Tests
on: [push]
jobs:
test:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- uses: actions/setup-node@v3
with:
node-version: '18'
- run: npm ci
- run: npx playwright install --with-deps
- run: npx playwright test
🧾 Summary
Setting up Playwright with Node.js is straightforward and developer-friendly. With powerful features like auto-waiting, device emulation, built-in test runner, and cross-browser support, Playwright is a top-tier choice for modern web automation and testing.
🔑 Key Takeaways:
Playwright supports all major browsers and devices
Easy to install and configure with Node.js
Great for both QA engineers and developers
Works well with CI/CD systems
Read more:
Playwright with JavaScript vs Python vs TypeScript
Writing Your First Playwright Test
Installing Playwright: A Quick Guide
Comments
Post a Comment