Backend interview prep

Start

Playwright Testing in Angular

Learn Playwright testing in Angular with installation, configuration, browser automation, locators, API mocking, authentication, Page Object Model, CI/CD integration, enterprise best practices, and interview questions.

Playwright is Microsoft's modern browser automation framework designed for End-to-End (E2E), UI, and integration testing.

It supports all major browser engines from a single API:

  • Chromium
  • Firefox
  • WebKit

Playwright has become the preferred testing framework for many enterprise Angular applications because it provides:

  • Fast execution
  • Auto waiting
  • Parallel testing
  • Cross-browser testing
  • Mobile emulation
  • API testing
  • Network mocking
  • Screenshots and videos
  • Trace Viewer

Table of Contents

  1. What is Playwright?
  2. Why Use Playwright?
  3. Playwright Architecture
  4. Installation
  5. Project Structure
  6. Writing Your First Test
  7. Playwright Locators
  8. Auto Waiting
  9. Browser Contexts
  10. Network Mocking
  11. Authentication Testing
  12. Page Object Model
  13. API Testing
  14. Mobile Testing
  15. CI/CD Integration
  16. Enterprise Banking Example
  17. Best Practices
  18. Common Mistakes
  19. Top 10 Interview Questions
  20. Interview Cheat Sheet
  21. Summary

What is Playwright?

Playwright is an open-source browser automation framework that allows developers to automate browser interactions using JavaScript or TypeScript.

It supports:

  • End-to-End Testing
  • UI Automation
  • API Testing
  • Cross-browser Testing
  • Mobile Emulation

Why Use Playwright?

Benefits include:

  • Cross-browser support
  • Fast execution
  • Auto waiting
  • Parallel execution
  • Reliable locators
  • Trace Viewer
  • Screenshots
  • Videos
  • Network interception
  • Built-in assertions

Playwright Architecture

flowchart LR

Developer

Developer --> Playwright

Playwright --> Browser

Browser --> AngularApplication

AngularApplication --> BackendAPI

Playwright vs Cypress

Feature Playwright Cypress
Chromium ✅ ✅
Firefox ✅ Limited
WebKit ✅ Experimental/Limited
Parallel Execution ✅ ✅
Mobile Emulation ✅ Basic
Multiple Browser Contexts ✅ ❌
API Testing ✅ Limited
Trace Viewer ✅ ❌

Installation

Install Playwright

npm init playwright@latest

Or

npm install -D @playwright/test

Install browsers

npx playwright install

Run tests

npx playwright test

Project Structure

playwright/

├── tests/

├── pages/

├── fixtures/

├── utils/

├── playwright.config.ts

└── reports/

First Playwright Test

import {

test,

expect

}

from '@playwright/test';

test(

'login',

async ({

page

}) => {

await page.goto('/login');

await page

.getByLabel('Username')

.fill('admin');

await page

.getByLabel('Password')

.fill('password');

await page

.getByRole(

'button',

{

name:'Login'

}

)

.click();

await expect(page)

.toHaveURL('/dashboard');

});

Test Execution Flow

flowchart LR

Test

Test --> Browser

Browser --> AngularApplication

AngularApplication --> Assertions

Playwright Locators

Preferred locator methods

page.getByRole();

page.getByText();

page.getByLabel();

page.getByPlaceholder();

page.getByTestId();

Example

await page

.getByTestId(

'login-button'

)

.click();

These locators are resilient and improve test maintainability.

Auto Waiting

Playwright automatically waits for:

  • Elements to appear
  • Elements to become visible
  • Elements to become enabled
  • Navigation to finish
  • Stable page state

Example

await page

.getByRole(

'button'

)

.click();

No explicit wait is usually required.

Browser Contexts

A Browser Context is an isolated browser session.

Benefits:

  • Independent cookies
  • Separate storage
  • Parallel users
  • Secure isolation

Example

const context =

await browser

.newContext();

Multiple User Testing

Example

const admin =

await browser

.newContext();

const customer =

await browser

.newContext();

Useful for:

  • Chat applications
  • Banking approvals
  • Admin portals
  • Collaboration features

Browser Context Architecture

flowchart LR

Browser

Browser --> ContextOne

Browser --> ContextTwo

ContextOne --> UserOne

ContextTwo --> UserTwo

Network Mocking

Intercept API

await page.route(

'**/api/customers',

route =>

route.fulfill({

status:200,

body:'[]'

})

);

Benefits

  • Stable tests
  • Faster execution
  • No backend dependency

Authentication Testing

Typical scenarios

  • Login
  • Logout
  • Session timeout
  • Invalid credentials
  • Password reset
  • MFA flow (if applicable)

Example

await page.goto('/login');

await page

.getByLabel(

'Username'

)

.fill('admin');

File Upload

Example

await page

.setInputFiles(

'input[type=file]',

'test.pdf'

);

Screenshots

Capture screenshot

await page

.screenshot({

path:

'home.png'

});

Useful for:

  • Failures
  • Visual verification
  • Regression testing

Video Recording

Enable in configuration

use: {

video:

'retain-on-failure'

}

Benefits

  • Debugging
  • Failure analysis
  • CI artifacts

Trace Viewer

Enable traces

use: {

trace:

'on-first-retry'

}

View trace

npx playwright show-trace trace.zip

Trace Viewer provides:

  • Timeline
  • DOM snapshots
  • Network requests
  • Console logs
  • Screenshots

API Testing

Playwright supports direct API testing.

Example

const response =

await request.get(

'/api/customers'

);

expect(

response.ok()

).toBeTruthy();

Useful for:

  • Health checks
  • Backend validation
  • Contract verification

Mobile Testing

Playwright supports device emulation.

Example

projects: [

devices['iPhone 15']

]

Test

  • Responsive layouts
  • Navigation
  • Forms
  • Gestures
  • Mobile menus

Page Object Model

Example

export class LoginPage {

constructor(

private page: Page

){}

async login(

user:string,

password:string

){

await this.page

.getByLabel(

'Username'

)

.fill(user);

await this.page

.getByLabel(

'Password'

)

.fill(password);

await this.page

.getByRole(

'button',

{

name:'Login'

}

)

.click();

}

}

Benefits

  • Reusable code
  • Cleaner tests
  • Better maintainability

Page Object Architecture

flowchart LR

Test

Test --> LoginPage

LoginPage --> Browser

Browser --> AngularApplication

Enterprise Banking Example

Critical Business Flows

  • Login
  • View Accounts
  • Transfer Money
  • Bill Payment
  • Loan Application
  • Investment Dashboard
  • Statement Download
  • Logout

Testing Strategy

Workflow Validation
Login Authentication
Accounts Data Rendering
Transfers Business Rules
Payments Success Flow
Investments Portfolio Data
Logout Session Cleanup

Enterprise Pipeline

flowchart TD

Developer

Developer --> Git

Git --> CI

CI --> Playwright

Playwright --> MultipleBrowsers

MultipleBrowsers --> Reports

CI/CD Integration

Typical pipeline

Build

↓

Unit Tests

↓

Integration Tests

↓

Playwright Tests

↓

Deployment

Headless execution

npx playwright test

Common CI platforms

  • GitHub Actions
  • GitLab CI
  • Jenkins
  • Azure DevOps

Performance Best Practices

Practice Benefit
Use getByRole() Stable selectors
Use Browser Contexts Parallel testing
Enable Trace Viewer Faster debugging
Mock External APIs Reliable tests
Reuse Page Objects Cleaner code
Parallel Execution Faster builds
Keep Tests Independent Reliable execution
Run in CI/CD Continuous quality

Common Mistakes

Using Fragile CSS Selectors

Avoid

page.locator(

'.btn-primary'

);

Prefer

page.getByRole(

'button',

{

name:'Save'

}

);

Adding Manual Delays

Avoid

await page.waitForTimeout(5000);

Rely on Playwright's built-in auto waiting whenever possible.

Sharing Test State

Each test should create its own data and not depend on previous tests.

Ignoring Multiple Browsers

Validate critical workflows across:

  • Chromium
  • Firefox
  • WebKit

Not Using Trace Viewer

Enable traces for retries and failures to simplify debugging.

Playwright Best Practices

Practice Recommendation
Semantic Locators Yes
Browser Contexts Yes
Trace Viewer Yes
Page Objects Yes
Mock External APIs Yes
Parallel Execution Yes
Cross-browser Testing Yes
CI/CD Integration Yes

Playwright vs Selenium

Feature Playwright Selenium
Auto Waiting ✅ Manual
Browser Contexts ✅ Limited
API Testing ✅ Plugin
Trace Viewer ✅ ❌
Parallel Testing Excellent Good
Setup Easy Moderate
Mobile Emulation ✅ Plugin

Advantages

Benefit Description
Cross-browser Testing Chromium, Firefox, WebKit
Auto Waiting Reduced flaky tests
Browser Contexts Multiple users
Trace Viewer Advanced debugging
API Testing Built-in support
Enterprise Ready Excellent CI/CD integration

Top 10 Playwright Interview Questions

1. What is Playwright?

Answer

Playwright is Microsoft's browser automation framework for End-to-End testing, UI automation, API testing, and cross-browser testing.

2. Which browsers does Playwright support?

Answer

Playwright supports:

  • Chromium
  • Firefox
  • WebKit

using a single API.

3. What are Browser Contexts?

Answer

Browser Contexts are isolated browser sessions with separate cookies, local storage, and session data, enabling secure parallel testing.

4. What is Playwright's Auto Waiting?

Answer

Playwright automatically waits for elements to become ready before performing actions, reducing flaky tests and eliminating many explicit waits.

5. What is the Trace Viewer?

Answer

Trace Viewer records execution details such as screenshots, DOM snapshots, network requests, and console logs, making test failures easier to diagnose.

6. Why use getByRole()?

Answer

getByRole() creates stable, accessibility-friendly locators that are less likely to break when the UI structure changes.

7. Can Playwright test APIs?

Answer

Yes. Playwright provides built-in APIs for sending HTTP requests and validating backend responses without opening a browser.

8. What is the Page Object Model?

Answer

The Page Object Model organizes page interactions into reusable classes, improving maintainability and reducing duplication.

9. How does Playwright differ from Cypress?

Answer

Playwright provides broader cross-browser support, Browser Contexts, built-in API testing, and Trace Viewer, while Cypress emphasizes a highly interactive developer experience and strong browser-based debugging.

10. What are Playwright best practices?

Answer

  • Prefer semantic locators
  • Use Browser Contexts
  • Enable Trace Viewer
  • Reuse Page Objects
  • Mock unstable external APIs
  • Keep tests independent
  • Execute tests in parallel
  • Run automatically in CI/CD

Interview Cheat Sheet

Requirement Playwright Feature
Browser Automation Playwright
Cross-browser Testing Chromium, Firefox, WebKit
Stable Locators getByRole(), getByTestId()
Parallel Users Browser Contexts
API Mocking page.route()
API Testing request API
Debugging Trace Viewer
Screenshots screenshot()
Video Recording Built-in
Enterprise Testing CI/CD + Parallel Execution

Summary

Playwright is a modern browser automation framework that enables reliable End-to-End, UI, and API testing for Angular applications. Features such as cross-browser support, Browser Contexts, automatic waiting, Trace Viewer, network interception, and parallel execution make it well suited for enterprise-scale testing. Combined with Page Object Model and robust CI/CD integration, Playwright helps teams deliver high-quality Angular applications with confidence.

Key Takeaways

  • ✅ Playwright supports Chromium, Firefox, and WebKit.
  • ✅ Browser Contexts enable isolated parallel testing.
  • ✅ Auto waiting minimizes flaky tests.
  • ✅ Trace Viewer simplifies debugging.
  • ✅ Built-in API testing and network mocking improve test flexibility.
  • ✅ Use semantic locators like getByRole().
  • ✅ Reuse Page Objects for maintainable automation.
  • ✅ Test critical workflows across multiple browsers.
  • ✅ Integrate Playwright into CI/CD pipelines.
  • ✅ Playwright is one of the most frequently requested E2E testing skills in Angular interviews.

Next Article

➡️ 119-Angular-Interview-Tips-QA.md