- info@trendnologies.com
- +91 86819 62962
- Chennai
- Coimbatore
- Bangalore
Playwright is an open-source automation testing framework developed by Microsoft for end-to-end web application testing.
It supports:
Key Features
Playwright is preferred because it provides faster execution, built-in autowaiting, better handling of modern web applications, easy parallelexecution, and supports multiple browsers with a single API.
Playwright automatically waits for elements before performing actions.
It waits for:
Locator is preferred because it supports auto waiting and re-querying the DOM whenever action is performed.
By ID
page.locator('#username')
By Text
page.getByText('Login')
By Role
page.getByRole('button', { name: 'Login' })
By Label
page.getByLabel('Email')
By Placeholder
page.getByPlaceholder('Enter username')
By Test ID
page.getByTestId('submit-btn')
Best Practice
Prefer:
Avoid complex XPath.
OM whenever action is performed.
fill() type()
Clears existing text Does not clear
Faster Slower
Sets value directly Types character by character
Playwright Test is the built-in framework for executing tests.
Features
Fixtures are reusable setup objects provided to tests.
Built-in Fixtures
Browser Context is an isolated browser session.
Each context has:
Browser Context
Actual browser instance Separate session inside browser
Heavyweight Lightweight Launch once Create multiple
Hooks are used for setup and teardown.
Types
beforeAll beforeEach
Runs once Runs before every test
Faster Repeated execution
Use Cases
beforeAll:
beforeEach:
Playwright operations are asynchronous.
await waits until action completes.
Synchronous Asynchronous
Executes one by one Non-blocking
Waits for completion Continues execution
JavaScript and Playwright mainly use asynchronous operations.
Promise represents future completion of an
operation.
States
Full Page
await page.screenshot({
path: 'page.png',
fullPage: true
});
Element Screenshot
await
page.locator('#logo').screenshot({
path: 'logo.png'
});
In config:
use: {
video: 'on'
}
npx playwright show-report
HTML Report
Generated automatically after execution.
npx playwright test --headed
By file
npx playwright test login.spec.ts
By title
npx playwright test -g "login test"
In config:
workers: 4
Or:
npx playwright test --workers=4
A flaky test:
without code changes.
Reasons
Prevention
await page.waitForTimeout(5000);
Problems
Better Alternative
await expect(locator).toBeVisible();
Promise represents future completion of an
operation.
States
locator() $$
Auto waits No auto wait
Recommended Old approach
Dynamic Static array
Assertions validate expected results.
Storage State Method
Save Login
await context.storageState({
path: 'auth.json'
});
Reuse Login
use: {
storageState: 'auth.json'
}
Advantage
Avoids repeated login.
Intercepting API/network requests
Playwright supports API testing using request fixture.
Retries rerun failed tests automatically.
Config
retries: 2
Useful for unstable environments.
Used to categorize tests.
Typical structure:
project
├── tests
├── pages
├── utils
├── fixtures
├── playwright.config.ts
└── package.json
Promise represents future completion of an
operation.
States
To avoid flaky tests, I use stable locators, explicit assertions, avoid hard waits, ensure test independence, and leverage Playwright s auto-waiting capability.
Trace Viewer helps debug failed tests.
Enable
use: {
trace: 'on'
}
Open
npx playwright show-trace trace.zip
It shows:
nth()
locator.nth(2)
first()
locator.first()
last()
locator.last()
Used when multiple elements match.
Soft assertion continues execution even if assertion fails
const frame = page.frameLocator('#frame');
await frame.locator('#email').fill('test');
page locator
Represents webpage Represents element
Used for navigation Used for element actions
Browser runs without UI.
GitHub Actions, Jenkins, and Azure DevOps can execute Playwright
tests automatically during deployment pipelines.
Custom fixtures are reusable setup logic
toHaveText() toContainText()
Exact text Partial text
Runs multiple async operations together.
Methods
Interactive mode for debugging tests.
npx playwright test --ui
Common Challenges
Solutions
