- 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
