Playwright Automation Testing Notes
1. Introduction to Automation Testing
What is Automation Testing?
Automation testing uses tools and scripts to execute test cases. Unlike manual testing, where a
person interacts with the software, automation testing relies on predefined instructions to
perform the same actions. This saves time, ensures consistency, and is especially useful for
repetitive or complex scenarios.
Why Playwright?
Playwright is a modern end-to-end testing tool that stands out for its features:
● Multi-Browser Support: It can run tests on Chromium (Google Chrome/Edge), Firefox,
and WebKit (Safari).
● Fast and Reliable: Built-in auto-wait ensures actions are performed only when the
application is ready.
● Cross-Platform: Playwright tests can be executed on Windows, macOS, and Linux.
● Modern Features: Includes API mocking, mobile device emulation, and more, making it
suitable for testing modern web applications.
2. Setting Up Playwright
Prerequisites
● Node.js: Playwright requires Node.js to run. Install it from the official Node.js website.
● Basic Knowledge of JavaScript/TypeScript: Familiarity with these programming
languages is essential.
Installation Steps
Initialize a Node.js Project: This creates a package.json file to manage dependencies.
npm init -y
1.
Install Playwright: This downloads the Playwright library and necessary browser binaries.
npm install @playwright/test
2.
Run the Test Generator: Playwright provides a code generator to create test scripts
interactively.
npx playwright codegen
3.
Project Structure
A typical Playwright project looks like this:
project-folder/
|-- tests/
| |-- example.test.js # Contains test scripts
|-- playwright.config.js # Global configurations
|-- package.json # Dependency manager
|-- node_modules/ # Installed modules
3. Playwright Basics
Key Concepts
1. Browser: Represents the browser application (e.g., Chrome, Firefox). It launches and
manages browser instances.
2. Context: An isolated environment within a browser. Each context has its own cookies,
cache, and session storage, making it useful for testing independent sessions.
3. Page: Represents a single tab or window in a browser. Most user interactions are
performed on a Page.
Writing a Basic Script
This script navigates to a website and verifies its title:
const { test, expect } = require('@playwright/test');
test('basic test', async ({ page }) => {
await page.goto('https://example.com'); // Navigate to URL
await expect(page).toHaveTitle('Example Domain'); // Check title
});
● page.goto: Navigates to the specified URL.
● expect: Performs assertions, such as verifying the page title.
4. Playwright APIs and Core Concepts
Selectors
Selectors identify elements on the page. Playwright provides several types:
● CSS Selectors: Locate elements by class, ID, or attributes (e.g., .class, #id,
[name="value"]).
● Text Selectors: Match elements containing specific text (e.g., text='Example').
● Custom Selectors: Use locator for more advanced targeting (e.g.,
page.locator('css=selector')).
Actions
Actions simulate user interactions:
Click:
await page.click('button#submit');
●
Type:
await page.type('input#username', 'TestUser');
●
Hover:
await page.hover('div#menu');
●
Assertions
Assertions verify expected outcomes:
Page Title:
await expect(page).toHaveTitle('Page Title');
●
Text Content:
await expect(page.locator('h1')).toHaveText('Welcome');
●
Visibility:
await expect(page.locator('button#login')).toBeVisible();
●
5. Advanced Playwright Features
Emulation
Emulate mobile devices and user environments for responsive testing:
await browser.newContext({
viewport: { width: 375, height: 812 },
userAgent: 'Mobile User Agent'
});
Network Interception
Intercept and mock API responses:
await page.route('**/api/data', route => {
route.fulfill({
contentType: 'application/json',
body: JSON.stringify({ key: 'mocked value' })
});
});
Handling Pop-ups
Dialog Boxes: Handle alert, confirm, or prompt dialogs.
page.on('dialog', async dialog => {
console.log(dialog.message());
await dialog.accept();
});
●
Iframes: Interact with content inside iframes.
const frame = page.frame({ name: 'frame-name' });
await frame.click('button');
●
6. Test Automation Framework Design
Page Object Model (POM)
A design pattern that separates locators and test logic:
● Advantages:
○ Reusability: Shared code between tests.
○ Maintainability: Centralized element updates.
Example Implementation:
class LoginPage {
constructor(page) {
this.page = page;
this.usernameInput = page.locator('#username');
this.passwordInput = page.locator('#password');
this.loginButton = page.locator('#login');
}
async login(username, password) {
await this.usernameInput.fill(username);
await this.passwordInput.fill(password);
await this.loginButton.click();
}
}
module.exports = LoginPage;
7. Playwright Test Runner
Configuring Playwright
Global settings are defined in playwright.config.js:
module.exports = {
timeout: 30000, // Test timeout
retries: 2, // Retry on failure
use: {
headless: true, // Run tests in headless mode
baseURL: 'https://example.com',
},
};
Parallel Execution
Execute multiple tests simultaneously:
npx playwright test --workers=4
8. Cross-Browser and Parallel Testing
Running on Multiple Browsers
Specify browsers in the configuration:
npx playwright test --project=chromium --project=firefox --project=webkit
Cloud Testing
Playwright integrates with services like BrowserStack or LambdaTest for cloud-based browser
testing. Update configurations accordingly.
9. Debugging and Reporting
Debugging Tools
Playwright Inspector: Visual tool for debugging.
npx playwright test --debug
●
Tracing: Record and replay test execution.
await context.tracing.start({ screenshots: true, snapshots: true });
await context.tracing.stop({ path: 'trace.zip' });
●
Reports
Generate and view HTML reports:
npx playwright show-report
10. CI/CD Integration
Jenkins Integration
Run Playwright tests in a Jenkins pipeline:
npx playwright test
GitHub Actions
Automate Playwright tests with GitHub Actions:
name: Playwright Tests
on: [push, pull_request]
jobs:
test:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- name: Set up Node.js
uses: actions/setup-node@v3
with:
node-version: '16'
- run: npm install
- run: npx playwright install
- run: npx playwright test
11. Best Practices
● Use Explicit Locators: Avoid ambiguous selectors for better test stability.
● Keep Tests Independent: Ensure tests can run in isolation without dependencies.
● Avoid Hard Waits: Use Playwright’s auto-wait and expect conditions.
● Update Dependencies Regularly: Ensure compatibility with the latest features.
This detailed guide ensures a deep understanding of Playwright automation, with clear
explanations for all terms and concepts to prepare for industry-level challenges.
