Playwright with JavaScript - Detailed Study Notes
1. Introduction to Playwright
Playwright is a modern end-to-end test automation framework developed by Microsoft. It allows testing web
applications across multiple browsers like Chromium, WebKit, and Firefox. It supports JavaScript, TypeScript,
Python, Java, and .NET.
Key Benefits:
• Cross-browser automation • Auto-waiting for elements • Supports UI, API, visual, and mobile testing • Advanced
debugging (trace, video, screenshot) • Built-in parallelism and test isolation
2. JavaScript Essentials
Before using Playwright, developers should understand JS fundamentals such as variables, loops, async/await,
and promises.
Async/Await Example
async function example() { let result = await someAsyncTask(); console.log(result); }
3. Installing Playwright
npm init -y npm install @playwright/test npx playwright install
4. Writing the First Test
import { test, expect } from '@playwright/test'; test('Homepage title test', async ({ page }) => { await
page.goto('https://example.com'); await expect(page).toHaveTitle(/Example Domain/); });
5. Understanding Locators
Locators allow interaction with webpage elements. Playwright recommends using getByRole selectors for stability.
Examples: page.getByRole('button', { name: 'Login' }) page.getByText('Submit') page.locator('#username')
6. Page Object Model (POM)
POM helps in reducing code duplication and improving reusability by separating UI operations from test logic.
Example: export class LoginPage { constructor(page) { this.page = page; this.username =
page.getByLabel('Username'); this.password = page.getByLabel('Password'); this.loginBtn =
page.getByRole('button', { name: 'Login' }); } async login(user, pass) { await this.username.fill(user); await
this.password.fill(pass); await this.loginBtn.click(); } }
7. API Testing with Playwright
Playwright includes a built-in APIRequestContext that allows sending API requests without UI interaction.
Example: test('GET users', async ({ request }) => { const response = await request.get('/api/users');
expect(response.status()).toBe(200); });
8. Reporting
Playwright provides HTML reports, JSON reports, as well as Allure reporting integration for advanced
visualization.
Enable HTML report: npx playwright test --reporter=html
9. Debugging / Trace Viewer
Trace viewer allows visually debugging test failures. It records steps, screenshots, console logs, and network logs.
Run with trace: npx playwright test --trace on
10. CI/CD Integration
Playwright can be integrated with GitHub Actions, Jenkins, GitLab CI/CD, Azure DevOps, and others to enable
continuous testing.
GitHub Actions Example: name: Playwright Tests on: [push] jobs: test: runs-on: ubuntu-latest steps: - uses:
actions/checkout@v3 - uses: actions/setup-node@v3 - run: npm install - run: npx playwright install - run: npx
playwright test
