Playwright with JavaScript – Complete Notes
1. Introduction to Playwright
What is Playwright?
Playwright is an open-source end-to-end (E2E) automation testing framework developed by Microsoft. It
allows testing of modern web applications across different browsers with a single API.
Key Features
• Supports Chromium, Firefox, and WebKit
• Cross-platform: Windows, macOS, Linux
• Fast execution with auto-waiting
• Powerful selectors
• Headless & headed mode
• Built-in test runner
• Supports JavaScript, TypeScript, Python, Java, C#
Why Playwright over Selenium/Cypress?
• No flaky waits (auto-wait)
• Multiple browser contexts
• Network interception
• Native mobile emulation
• Better performance
2. Architecture of Playwright
Core Components
• Browser – Chromium / Firefox / WebKit
• BrowserContext – Incognito-like isolated session
• Page – Single tab
• Locator – Element handler
Browser → Context → Page → Locator
3. Installation & Setup
Prerequisites
• [Link] (>=16)
• npm or yarn
1
Install Playwright
npm init playwright@latest
Install Only Playwright
npm install -D @playwright/test
Install Browsers
npx playwright install
4. Project Structure
project-name/
├─ tests/
│ └─ [Link]
├─ [Link]
├─ [Link]
└─ node_modules/
5. Playwright Test Runner
Basic Test Syntax
const { test, expect } = require('@playwright/test');
test('basic test', async ({ page }) => {
await [Link]('[Link]
await expect(page).toHaveTitle(/Example/);
});
Test Hooks
[Link](async ({ page }) => {
await [Link]('[Link]
});
[Link](async ({ page }) => {
2
[Link]('Test finished');
});
6. Browser & Context Handling
const { chromium } = require('playwright');
(async () => {
const browser = await [Link]({ headless: false });
const context = await [Link]();
const page = await [Link]();
await [Link]('[Link]
await [Link]();
})();
7. Page Navigation
await [Link]('[Link]
await [Link]();
await [Link]();
await [Link]();
8. Locators & Selectors
Locator Types
[Link]('text=Login');
[Link]('#username');
[Link]('.btn-primary');
[Link]('//input[@name="email"]');
Actions
await [Link]('#email').fill('test@[Link]');
await [Link]('#submit').click();
3
9. Assertions
await expect(page).toHaveTitle('Dashboard');
await expect(locator).toBeVisible();
await expect(locator).toHaveText('Welcome');
await expect(locator).toBeEnabled();
10. Handling Inputs
await [Link]('#username', 'admin');
await [Link]('#password', 'password');
await [Link]('#remember');
await [Link]('#remember');
await [Link]('#country', 'IN');
11. Waits in Playwright
Auto Wait (Default)
Playwright automatically waits for elements.
Explicit Waits
await [Link]('#login');
await [Link](3000);
12. Handling Alerts & Dialogs
[Link]('dialog', async dialog => {
[Link]([Link]());
await [Link]();
});
13. Frames & iFrames
const frame = [Link]({ name: 'frameName' });
await [Link]('#input', 'text');
4
14. Multiple Tabs & Windows
const [newPage] = await [Link]([
[Link]('page'),
[Link]('#openTab')
]);
15. File Upload & Download
Upload
await [Link]('#file', '[Link]');
Download
const download = await [Link]('download');
await [Link]('[Link]');
16. Screenshots & Videos
await [Link]({ path: '[Link]' });
Enable video in config:
use: {
video: 'on'
}
17. API Testing
test('API test', async ({ request }) => {
const response = await [Link]('[Link]
expect([Link]()).toBeTruthy();
});
5
18. Network Interception
await [Link]('**/api/**', route => [Link]());
19. Environment Variables
[Link].BASE_URL
20. Playwright Configuration
[Link] = {
testDir: './tests',
timeout: 30000,
retries: 1,
use: {
headless: true,
screenshot: 'only-on-failure'
}
};
21. Reporting
npx playwright show-report
22. Best Practices
• Use locators, not selectors
• Avoid hard waits
• Keep tests independent
• Use Page Object Model (POM)
23. Interview Questions (Quick)
1. What is BrowserContext?
2. Difference between locator and selector?
3. How does Playwright handle waits?
4. How to run tests in parallel?
6
5. Difference between Playwright and Selenium?
24. Sample POM Structure
class LoginPage {
constructor(page) {
[Link] = page;
[Link] = [Link]('#username');
}
async login(user) {
await [Link](user);
}
}
25. Commands Summary
npx playwright test
npx playwright test --headed
npx playwright test --project=chromium
✅ End of Playwright with JavaScript Notes
