In this section, we’ll build a production-ready Playwright automation framework and explain how each folder contributes to the overall architecture. This is the type of framework commonly used in enterprise applications and discussed in senior SDET interviews.
Step 1: Enterprise Framework Folder Structure
Playwright-Framework
│
├── .github/
│ └── workflows/
│ playwright.yml
│
├── pages/
│ LoginPage.ts
│ DashboardPage.ts
│ ProductPage.ts
│ CartPage.ts
│ CheckoutPage.ts
│
├── workflows/
│ LoginWorkflow.ts
│ CheckoutWorkflow.ts
│
├── fixtures/
│ baseFixture.ts
│ loginFixture.ts
│
├── utils/
│ Logger.ts
│ WaitUtility.ts
│ JsonUtility.ts
│ RandomData.ts
│ ScreenshotUtility.ts
│ Environment.ts
│
├── api/
│ CustomerAPI.ts
│ OrderAPI.ts
│
├── test-data/
│ login.json
│ checkout.json
│ products.json
│
├── constants/
│ URL.ts
│ Messages.ts
│ Timeout.ts
│
├── tests/
│ login.spec.ts
│ checkout.spec.ts
│ orders.spec.ts
│
├── reports/
├── screenshots/
├── traces/
├── videos/
│
├── playwright.config.ts
├── global-setup.ts
├── global-teardown.ts
├── package.json
└── README.md
Step 2: Responsibilities of Each Folder
pages/
Contains only page-related logic.
Example:
LoginPage
DashboardPage
CheckoutPage
PaymentPage
A page object should:
- Store page locators
- Expose page actions
- Optionally expose page-specific validations
A page object should not:
- Read Excel files
- Generate random data
- Call unrelated APIs
- Contain business workflows spanning multiple pages
workflows/
Many beginners place all business logic inside page objects.
Instead, create workflow classes.
Example:
Login Workflow
↓
Open Login Page
↓
Enter Username
↓
Enter Password
↓
Click Login
↓
Verify Dashboard
This keeps page objects small and reusable.
Examples:
LoginWorkflow
CheckoutWorkflow
OrderWorkflow
PaymentWorkflow
fixtures/
Provides reusable setup.
Examples:
Browser Fixture
Login Fixture
API Fixture
Database Fixture
Avoid creating browser instances manually in every test.
utils/
Contains reusable helper classes.
Examples:
Date Utility
Random Data
Logger
Encryption
Screenshot Utility
Download Utility
Upload Utility
PDF Utility
Utilities should remain generic and independent of specific pages.
api/
Store API helper classes separately from UI automation.
Example:
Customer API
Order API
Product API
Payment API
This separation allows UI and API automation to evolve independently.
constants/
Avoid hardcoding values.
Examples:
Application URL
Messages
Timeout
Roles
Endpoints
test-data/
Contains:
JSON
CSV
Excel
YAML
XML
Avoid storing test data inside test files.
Step 3: Workflow Layer
Enterprise frameworks often include a workflow (or business layer).
Architecture:
Test
↓
Workflow
↓
Page Objects
↓
Playwright
Example
Instead of
Test
↓
Login Page
↓
Dashboard Page
↓
Cart Page
↓
Checkout Page
Use
Test
↓
Checkout Workflow
↓
All Page Objects
Benefits:
- Cleaner tests
- Less duplication
- Easier maintenance
Step 4: Layered Architecture
Tests
│
▼
Business Workflows
│
▼
Page Objects
│
▼
Utilities
│
▼
Playwright API
│
▼
Browser
│
▼
Web Application
Each layer has a single responsibility.
Step 5: Login Workflow
Instead of repeating login steps in multiple tests:
Open Login
↓
Enter Username
↓
Enter Password
↓
Click Login
↓
Verify Dashboard
Create a reusable login workflow.
Advantages:
- Centralized login logic
- Easy updates
- Cleaner test cases
Step 6: Checkout Workflow
A checkout workflow might include:
Login
↓
Search Product
↓
Open Product
↓
Add to Cart
↓
Checkout
↓
Payment
↓
Order Confirmation
This represents one business process composed of multiple page objects.
Step 7: API + UI Integration
Many enterprise projects create data through APIs before validating it in the UI.
Example:
API
Create Customer
↓
API
Create Product
↓
API
Generate Order
↓
UI
Search Order
↓
Verify Status
Advantages:
- Faster setup
- Less UI dependency
- More stable tests
Step 8: Data Cleanup Strategy
Automation should avoid leaving unnecessary test data behind.
Typical cleanup:
Create User
↓
Execute Test
↓
Delete User
Or
Create Order
↓
Execute Test
↓
Cancel/Delete Order
Cleanup can be handled:
- After each test
- After all tests
- Through scheduled database jobs (depending on the environment)
Step 9: Reusable Components
Good frameworks maximize reuse.
Reusable examples:
Login
Logout
Navigation
Calendar Selection
Dropdown Selection
Table Reader
File Upload
File Download
Avoid copying the same logic into multiple page objects.
Step 10: Configuration Strategy
Separate configurations by environment.
Example:
Development
↓
QA
↓
UAT
↓
Production
Each environment should define:
- Base URL
- API URL
- Credentials (prefer secure secrets management)
- Timeouts
- Feature flags (if applicable)
Step 11: Secure Credential Management
Never commit credentials to source control.
Use:
- Environment variables
- Secret managers
- CI/CD secrets
- Vault solutions (for enterprise environments)
Avoid:
admin
password123
inside source files.
Step 11: Logging Architecture
Recommended logging flow:
Test Starts
↓
Log Browser Launch
↓
Log Navigation
↓
Log User Actions
↓
Log Validations
↓
Log Result
↓
Log Browser Close
Keep logs informative but concise.
Step 12: Screenshot Strategy
Capture screenshots:
- On failure
- Before destructive actions (optional)
- During debugging (optional)
Avoid capturing screenshots after every step in normal execution.
Step 13: Trace Strategy
Capture traces when:
- A test fails
- Debugging intermittent failures
- Investigating complex synchronization issues
Trace Viewer provides:
- Timeline
- DOM snapshots
- Network activity
- Console messages
- User actions
Step 14: Parallel Testing Strategy
Example:
Worker 1
Authentication
--------------------
Worker 2
Orders
--------------------
Worker 3
Payments
--------------------
Worker 4
Reports
Ensure:
- No shared state
- Independent test data
- Separate browser contexts
Step 15: Cross-Browser Strategy
Recommended execution:
Chromium
↓
Firefox
↓
WebKit
Run smoke tests on all browsers and reserve full regression for the browsers required by your project.
Step 16: Continuous Integration Flow
Developer Commit
↓
Pull Request
↓
Code Review
↓
Build
↓
Install Dependencies
↓
Install Browsers
↓
Run Lint
↓
Run Unit Tests (if applicable)
↓
Run Smoke Automation
↓
Run Regression
↓
Generate Report
↓
Publish Artifacts
↓
Notify Team
Step 17: Pull Request Checklist
Before creating a PR:
- Code builds successfully
- All tests pass
- ESLint passes
- Prettier formatting applied
- No hardcoded values
- No static waits
- No duplicate methods
- Meaningful commit messages
- Updated documentation (if required)
Step 18: Versioning Strategy
Example:
Version 1.0
↓
Version 1.1
↓
Version 1.2
↓
Version 2.0
Tag framework releases to simplify rollback and traceability.
Step19: Recommended NPM Scripts
Typical scripts include:
test
test:smoke
test:regression
test:headed
test:chrome
test:firefox
test:webkit
report
lint
format
These provide a consistent way to execute different suites.
Step 20: Enterprise Coding Guidelines
Follow these principles:
Single Responsibility Principle
Each class should have one responsibility.
Open/Closed Principle
Design classes so they can be extended without modifying existing behavior wherever practical.
DRY (Don’t Repeat Yourself)
Move repeated logic into reusable methods or workflows.
KISS (Keep It Simple, Stupid)
Prefer simple, readable solutions over unnecessary complexity.
YAGNI (You Aren’t Gonna Need It)
Don’t implement features before they are actually required.
Step 21: Enterprise Framework Maturity Model
Beginner Framework
- Tests
- Page Objects
Intermediate Framework
- Fixtures
- Utilities
- Reporting
- Environment support
Advanced Framework
- Business workflows
- API integration
- Parallel execution
- CI/CD
- Authentication reuse
- Robust logging
- Cross-browser support
Enterprise Framework
- Scalable architecture
- Secure configuration management
- API + UI hybrid testing
- Containerized execution
- Cloud execution
- Comprehensive reporting
- Test analytics
- Quality gates in CI/CD
Senior Playwright Interview Questions & Answers
1. Why would you introduce a Workflow Layer?
Answer:
A workflow layer encapsulates complete business processes that span multiple pages. This keeps page objects focused on page interactions while making test cases shorter, more readable, and easier to maintain.
2. What is the difference between a Page Object and a Workflow?
Answer:
A Page Object models a single page by exposing its locators and actions.
A Workflow coordinates multiple page objects to accomplish a business process such as placing an order or completing user registration.
3. Why shouldn’t business logic be placed inside page objects?
Answer:
Business workflows often involve multiple pages. Keeping them in page objects creates oversized classes, increases coupling, and makes reuse difficult. Separating workflows improves maintainability and follows the Single Responsibility Principle.
4. How do you organize a framework for thousands of test cases?
Answer:
I organize it into layers (tests, workflows, page objects, utilities, API helpers, fixtures), group tests by feature, externalize configuration and test data, enable parallel execution, use authentication reuse, and integrate reporting and CI/CD.
5. How do you reduce execution time in Playwright?
Answer:
- Execute tests in parallel.
- Reuse authenticated sessions with
storageState. - Create test data through APIs instead of the UI where appropriate.
- Categorize suites into smoke and regression.
- Avoid unnecessary browser launches and redundant setup.
- Remove fixed waits.
6. How do you handle flaky tests?
Answer:
I investigate the root cause rather than relying on retries. Common improvements include using stable locators, waiting on application state instead of time, isolating test data, improving cleanup, and reviewing application synchronization issues.
7. What qualities define a production-ready Playwright framework?
Answer:
A production-ready framework has a clean layered architecture, reusable fixtures, focused page objects, workflow abstraction, secure configuration management, reliable reporting, logging, authentication reuse, CI/CD integration, parallel execution, cross-browser support, coding standards, and comprehensive