Playwright has rapidly become one of the most popular end-to-end testing frameworks, known for its speed, reliability, and built-in auto-waiting mechanisms. As more companies migrate from Selenium to Playwright, interviewers increasingly test candidates on its architecture, APIs, and best practices. This guide covers the 50 most commonly asked Playwright interview questions, organized by difficulty level, with clear and practical answers.
Basic Level Questions
1. What is Playwright?
Playwright is an open-source end-to-end testing and browser automation framework developed by Microsoft. It allows testers and developers to automate Chromium, Firefox, and WebKit browsers using a single API, with support for JavaScript, TypeScript, Python, Java, and .NET.
2. What makes Playwright different from Selenium?
Playwright communicates with browsers over a single WebSocket-based protocol rather than the W3C WebDriver protocol, giving it faster execution and more reliable control. It also has built-in auto-waiting, native support for multiple browser contexts, and features like network interception and tracing built directly into the framework, whereas Selenium relies more heavily on external tools and manual wait handling.
3. Which browsers does Playwright support?
Playwright supports Chromium (Chrome/Edge), Firefox, and WebKit (Safari's engine), all through a single unified API, including their mobile emulation modes.
4. What programming languages does Playwright support?
Playwright officially supports JavaScript/TypeScript, Python, Java, and .NET (C#).
5. How do you install Playwright?
For a Node.js project:
npm init playwright@latest
This installs Playwright Test, browser binaries, and generates example configuration and test files.
6. What is a browser context in Playwright?
A browser context is an isolated, incognito-like session within a browser instance. Each context has its own cookies, cache, and storage, allowing multiple independent sessions to run in parallel without interfering with each other, without the overhead of launching separate browser instances.
7. What is the difference between a browser, a context, and a page in Playwright?
A browser is an instance of Chromium, Firefox, or WebKit. A context is an isolated session within that browser (like an incognito window). A page is a single tab within a context. One browser can have multiple contexts, and each context can have multiple pages.
8. How do you launch a browser in Playwright?
const { chromium } = require('playwright');
const browser = await chromium.launch();
const page = await browser.newPage();
await page.goto('https://example.com');
9. What is Playwright Test?
Playwright Test is the built-in test runner that comes with Playwright, providing features like test fixtures, parallel execution, retries, screenshots on failure, and detailed HTML reporting out of the box.
10. How do you run Playwright tests?
npx playwright test
npx playwright test --headed # run in headed mode
npx playwright test --project=chromium # run on a specific browser
11. What is auto-waiting in Playwright?
Auto-waiting is a built-in mechanism where Playwright automatically waits for elements to be actionable (visible, enabled, stable, and receiving events) before performing an action like click() or fill(), eliminating the need for manual waits in most cases.
12. What are locators in Playwright?
Locators are the recommended way to find elements in Playwright. They represent a way to find elements at any moment and are re-evaluated each time an action is performed, making them resilient to DOM changes:
const button = page.locator('#submit-button');
await button.click();
13. What is the difference between a locator and an ElementHandle in Playwright?
A locator is lazy and re-queries the DOM every time it's used, making it resilient to dynamic content changes. An ElementHandle is a direct reference to a specific DOM element at a point in time, which can become stale if the DOM changes. Playwright recommends using locators over ElementHandles in almost all cases.
14. What are the common ways to locate elements in Playwright?
page.getByRole()– locate by ARIA rolepage.getByText()– locate by visible textpage.getByLabel()– locate form elements by their labelpage.getByPlaceholder()– locate inputs by placeholder textpage.getByTestId()– locate by a customdata-testidattributepage.locator()– locate using CSS or XPath selectors
15. Why does Playwright recommend getByRole() over CSS selectors?
getByRole() locates elements the way assistive technologies and real users perceive them, making tests more resilient to implementation changes (like class name updates) and encouraging accessible markup, whereas CSS selectors are tightly coupled to the DOM structure and can break with minor styling changes.
Intermediate Level Questions
16. How do you handle waits in Playwright?
Playwright handles most waits automatically through auto-waiting, but for specific scenarios, you can use:
await page.waitForSelector('#element');
await page.waitForLoadState('networkidle');
await page.waitForURL('**/dashboard');
await locator.waitFor({ state: 'visible' });
17. How do you handle dropdowns in Playwright?
await page.selectOption('#dropdownId', 'value1');
await page.selectOption('#dropdownId', { label: 'Option 1' });
await page.selectOption('#dropdownId', { index: 2 });
18. How do you handle multiple tabs/windows in Playwright?
const [newPage] = await Promise.all([
context.waitForEvent('page'),
page.click('#open-new-tab')
]);
await newPage.waitForLoadState();
19. How do you handle alerts/dialogs in Playwright?
Playwright automatically dismisses dialogs unless a listener is registered. To handle them explicitly:
page.on('dialog', async dialog => {
console.log(dialog.message());
await dialog.accept();
});
20. How do you handle iframes in Playwright?
const frame = page.frameLocator('#iframeId');
await frame.locator('#insideFrameButton').click();
21. How do you take a screenshot in Playwright?
await page.screenshot({ path: 'screenshot.png' });
await page.screenshot({ path: 'fullpage.png', fullPage: true });
await locator.screenshot({ path: 'element.png' }); // element-level screenshot
22. How do you record a video of test execution in Playwright?
Video recording is configured at the context level:
const context = await browser.newContext({
recordVideo: { dir: 'videos/' }
});
23. What is Playwright Trace Viewer?
Trace Viewer is a debugging tool that records a complete trace of test execution, including DOM snapshots, network requests, console logs, and screenshots at each step, allowing testers to visually step through what happened during a failed test.
npx playwright test --trace on
npx playwright show-trace trace.zip
24. How do you perform API testing in Playwright?
Playwright provides a built-in request context for making HTTP calls directly, without needing a browser:
const response = await request.get('https://api.example.com/users');
expect(response.status()).toBe(200);
const body = await response.json();
25. How do you intercept and mock network requests in Playwright?
Using the page.route() method:
await page.route('**/api/data', route => {
route.fulfill({
status: 200,
body: JSON.stringify({ mockKey: 'mockValue' })
});
});
26. How do you handle file uploads in Playwright?
await page.setInputFiles('#uploadInput', 'path/to/file.txt');
await page.setInputFiles('#uploadInput', ['file1.txt', 'file2.txt']); // multiple files
27. How do you handle file downloads in Playwright?
const [download] = await Promise.all([
page.waitForEvent('download'),
page.click('#downloadButton')
]);
await download.saveAs('path/to/save/file.pdf');
28. What are fixtures in Playwright Test?
Fixtures are reusable pieces of setup and teardown logic (like a logged-in page, a database connection, or test data) that are automatically injected into tests, promoting cleaner and more maintainable test code:
test('example test', async ({ page }) => {
// 'page' is a built-in fixture
});
29. How do you create a custom fixture in Playwright?
const test = base.extend({
loggedInPage: async ({ page }, use) => {
await page.goto('/login');
await page.fill('#username', 'admin');
await page.fill('#password', 'password');
await page.click('#loginBtn');
await use(page);
}
});
30. How does Playwright achieve parallel test execution?
Playwright Test runs test files in parallel across multiple workers by default, with each worker running in its own isolated process. The number of workers can be configured in playwright.config.js using the workers option.
31. What is the Page Object Model (POM) in Playwright, and how is it implemented?
POM is a design pattern where each web page is represented as a class containing locators and methods for interacting with that page, keeping test logic separate from page structure details:
class LoginPage {
constructor(page) {
this.page = page;
this.username = page.locator('#username');
this.password = page.locator('#password');
}
async login(user, pass) {
await this.username.fill(user);
await this.password.fill(pass);
await this.page.locator('#loginBtn').click();
}
}
32. What are assertions in Playwright, and how do web-first assertions work?
Playwright provides built-in expect() assertions that automatically retry until the condition is met or a timeout occurs, making tests more resilient to timing issues:
await expect(page.locator('#status')).toHaveText('Success');
await expect(page.locator('#element')).toBeVisible();
33. What is the difference between toHaveText() and toContainText()?
toHaveText() asserts that the element's text exactly matches the expected string, while toContainText() checks that the element's text contains the expected substring, allowing partial matches.
34. How do you run tests across multiple browsers in Playwright?
By configuring projects in playwright.config.js:
projects: [
{ name: 'chromium', use: { ...devices['Desktop Chrome'] } },
{ name: 'firefox', use: { ...devices['Desktop Firefox'] } },
{ name: 'webkit', use: { ...devices['Desktop Safari'] } },
]
35. How do you perform mobile emulation in Playwright?
Playwright includes predefined device descriptors:
const { devices } = require('playwright');
const context = await browser.newContext({
...devices['iPhone 13']
});
36. What is the difference between headless and headed mode in Playwright?
Headless mode runs the browser without a visible UI, making it faster and suitable for CI pipelines. Headed mode launches a visible browser window, useful for debugging. Playwright runs headless by default.
37. How do you debug Playwright tests?
npx playwright test --debug– opens the Playwright Inspectorpage.pause()– pauses execution at a specific point in the script- Trace Viewer for post-execution analysis
- VS Code Playwright extension for step-by-step debugging
38. What is the Playwright Inspector?
The Playwright Inspector is a GUI tool that lets you step through test scripts line by line, inspect locators, and generate selectors interactively, making it useful for both debugging and writing new tests.
39. What is Codegen in Playwright?
Codegen is a tool that records user interactions in a browser and automatically generates corresponding Playwright test code:
npx playwright codegen https://example.com
40. How do you handle authentication/session reuse across tests in Playwright?
By saving the authenticated browser state (cookies, local storage) to a file after logging in once, then reusing it in subsequent tests to skip repeated logins:
await context.storageState({ path: 'auth.json' });
// Reused later:
const context = await browser.newContext({ storageState: 'auth.json' });
Advanced Level Questions
41. How does Playwright's architecture achieve better reliability compared to Selenium?
Playwright controls browsers through their own dedicated automation protocols (like Chrome DevTools Protocol) via a single persistent WebSocket connection, rather than sending individual HTTP requests per command as WebDriver does. This reduces latency, avoids flaky waits, and enables features like network interception and multiple isolated contexts within a single browser instance.
42. What is the difference between page.click() and locator.click()?
page.click() is a shortcut method that internally creates a locator and clicks it in one step, while using locator.click() on a pre-defined locator object is generally recommended since locators can be reused, chained, and are more explicit about intent. Functionally, both perform the same auto-waiting click action.
43. How do you handle shadow DOM elements in Playwright?
Playwright automatically pierces open shadow DOM when using standard locators like page.locator(), so elements inside shadow roots can typically be located the same way as regular DOM elements, without special syntax.
44. How do you perform visual regression testing in Playwright?
Using the built-in screenshot comparison feature:
await expect(page).toHaveScreenshot('homepage.png');
Playwright compares the captured screenshot against a stored baseline image and fails the test if the difference exceeds a configurable threshold.
45. How do you handle test retries in Playwright?
Retries can be configured globally or per project in playwright.config.js:
retries: 2,
This reruns failed tests up to the specified number of times, which is particularly useful in CI environments to handle occasional flakiness.
46. What is sharding in Playwright, and why is it used?
Sharding splits the test suite across multiple machines or CI jobs to run tests in parallel at a larger scale, reducing overall execution time:
npx playwright test --shard=1/3
47. How do you integrate Playwright with CI/CD pipelines like GitHub Actions or Jenkins?
Playwright provides official Docker images and GitHub Actions workflows. A typical setup involves installing dependencies, running npx playwright install --with-deps to install browsers, executing npx playwright test, and publishing the generated HTML report as a build artifact.
48. How does Playwright handle network conditions and throttling?
Using the Chrome DevTools Protocol session directly, or by intercepting requests via page.route() and adding artificial delays, Playwright can simulate slow networks, offline conditions, or specific response modifications for robustness testing.
49. What is component testing in Playwright?
Component testing allows testing individual UI components (like React, Vue, or Svelte components) in isolation, in a real browser environment, without needing to render the entire application, bridging the gap between unit tests and full end-to-end tests.
50. What are some best practices for writing reliable Playwright tests?
- Prefer
getByRole(),getByText(), andgetByTestId()over brittle CSS/XPath selectors - Avoid hard-coded waits like
waitForTimeout(); rely on Playwright's auto-waiting and web-first assertions - Keep tests independent and isolated using fresh browser contexts
- Use the Page Object Model to separate test logic from page structure
- Leverage Trace Viewer and screenshots on failure for easier debugging
- Reuse authentication state to speed up test suites
- Run tests in parallel and use sharding for large test suites in CI
Final Tips for Your Playwright Interview
- Be ready to explain why Playwright's architecture (single WebSocket protocol, browser contexts) leads to faster and more reliable tests compared to older WebDriver-based tools.
- Practice writing locators using
getByRole()and other user-facing locator strategies, since these are core to Playwright's recommended approach. - Understand web-first assertions and how their built-in retry behavior removes the need for manual synchronization code.
- Be comfortable discussing Trace Viewer, Codegen, and debugging tools, as these are commonly asked about in practical/hands-on rounds.
- Have a solid grasp of the Page Object Model and fixtures, since real-world Playwright projects are rarely built with flat, unstructured test scripts.
Good luck with your interview preparation!