01
How do you install and start a Playwright project?
Show answer
Run npm init playwright@latest, which sets up config, example tests and browsers; execute with npx playwright test.
Practical Playwright Testing Interview Questions
119 questions with answers. Hands-on questions where you write code, a query, a formula or concrete steps.
How to approach these questions
Talk while you work: say your approach first, write the simplest correct version, then improve it and mention edge cases.
Solved — practicalStart practicing
3 QUESTIONS FREESign up to unlock the full question bank and track your progress.Unlock every question and answer, then continue practising company-wise and package-wise.
3 questions free Unlock the rest in seconds
02
How do you share cookies between API login and UI?
Show answer
Log in with request.post, call request.storageState(), and create a browser context using that state.
03
How do you tag and filter tests?
Show answer
Add tags in the title (@smoke) or use the tag option, and run with --grep @smoke or --grep-invert.
04
How do you integrate Playwright with Allure or other reports?
Show answer
Install the allure-playwright reporter, add it in the config reporters array and generate the report from the allure-results folder in CI.
05
How do you mock an API response?
Show answer
await page.route('**/api/users', route =>
route.fulfill({ status: 200, json: [{ id: 1, name: 'Test' }] })
);
06
How do you test file downloads and verify their content?
Show answer
Capture the download event, save it with download.saveAs, then read the file in Node and assert on name, size or content.
07
How do you test pagination or chained API calls?
Show answer
Read the next page link or IDs from earlier responses, loop until done and assert counts and uniqueness; pass IDs between calls in the same test.
08
How do you test accessibility with Playwright?
Show answer
Integrate axe-core through @axe-core/playwright, run an analysis on the page and assert that there are no violations.
09
Write a test that logs in and checks the dashboard heading.
Show answer
test('login', async ({ page }) => {
await page.goto('/login');
await page.getByLabel('Email').fill('a@b.com');
await page.getByLabel('Password').fill('secret');
await page.getByRole('button', { name: 'Login' }).click();
await expect(page.getByRole('heading', { name: 'Dashboard' })).toBeVisible();
});
10
How do you test geolocation, permissions and time zones?
Show answer
Set them in the context options (geolocation, permissions, timezoneId, locale) to simulate users from other regions.
11
How would you type the response of an API call in TypeScript?
Show answer
Define an interface for the payload, cast or validate the parsed JSON to it (for example with zod), and use that type in assertions to catch shape changes.
12
How do you create test data through the API before a UI test?
Show answer
In a fixture or beforeEach, call the API (request.post) to create the user or order, use it in the UI test, then delete it in teardown. It is faster and more reliable than creating data through the UI.
13
How do you test file upload via API?
Show answer
Use request.post with multipart: { file: { name, mimeType, buffer } } and assert the response and stored file details.
14
How do you run tests on three browsers in parallel?
Show answer
Define projects for chromium, firefox and webkit in playwright.config.ts, set workers, then run: npx playwright test
15
How do you shard tests across machines?
Show answer
Use npx playwright test --shard=1/4 in each CI job and merge reports afterwards to reduce total run time.
16
How do you handle dialogs such as alerts?
Show answer
Register page.on('dialog', d => d.accept()) before the action triggers the dialog.
17
How do you structure environment-specific configs in Playwright?
Show answer
Use dotenv files per environment, read them in playwright.config and set baseURL and credentials from variables, selecting with an ENV flag.
18
How do you run only smoke tests?
Show answer
Tag tests (in the title or with { tag: '@smoke' }) and run: npx playwright test --grep @smoke (use --grep-invert to exclude).
19
How do you run tests in Docker?
Show answer
Use the official Playwright image which contains browsers and dependencies, mount the project and run npx playwright test for consistent CI environments.
20
How do you run Playwright in GitHub Actions?
Show answer
Workflow: checkout → setup-node → npm ci → npx playwright install --with-deps → npx playwright test → upload playwright-report as an artifact.
21
How do you debug a Playwright test?
Show answer
Use --debug or the Inspector, page.pause(), UI mode, the trace viewer and headed runs with slowMo.
22
How do you take screenshots and videos?
Show answer
page.screenshot() for captures and config options use: { screenshot: 'only-on-failure', video: 'retain-on-failure' } for automatic evidence.
23
How do you perform drag and drop and hover?
Show answer
locator.hover() and locator.dragTo(target) perform these actions, with auto-waiting for actionability.
24
How do you validate an API response in Playwright?
Show answer
Assert the status with expect(res.status()).toBe(200), parse res.json() and check fields, using schema validation for the structure.
25
How do you handle date pickers and custom dropdowns?
Show answer
Click to open the control, then use getByRole('option') or a text locator for the target item, instead of relying on fragile index-based selectors.
26
How do you write a Page Object in Playwright?
Show answer
A class receives page in its constructor, stores locators as properties and exposes actions like login(user, pass). Tests call page objects, not raw locators.
27
How do you handle iframes in Playwright?
Show answer
Use page.frameLocator('#frame').getByRole(...) so actions work inside the iframe with auto-waiting.
28
How do you work with iframes?
Show answer
const frame = page.frameLocator('#payment-frame');
await frame.getByLabel('Card number').fill('4111 1111 1111 1111');
29
How do you measure API response time?
Show answer
Record timestamps around the request or use response timing, then assert the duration is under an agreed threshold.
30
How do you send authentication headers?
Show answer
Set extraHTTPHeaders in the config or pass headers per request, for example Authorization: Bearer token fetched in a setup step.
31
How do you handle a new tab?
Show answer
const [newPage] = await Promise.all([
context.waitForEvent('page'),
page.getByText('Open').click(),
]);
await newPage.waitForLoadState();
32
How do you make an API request in Playwright?
Show answer
Use the request fixture: const res = await request.get('/api/users'); expect(res.ok()).toBeTruthy(); const body = await res.json();
33
How do you handle file uploads and downloads?
Show answer
setInputFiles on the input for uploads; for downloads wait on page.waitForEvent('download') and save or inspect the file.
34
How do you wait for a network response in Playwright?
Show answer
Use page.waitForResponse(res => res.url().includes('/api/orders') && res.ok()) together with the action that triggers it.
35
How do you handle shadow DOM?
Show answer
Playwright locators pierce open shadow roots by default, so getByRole and CSS locators work without special handling.
36
How do you validate JSON schema?
Show answer
Use a library such as zod or ajv to define the expected schema and parse the response to fail on missing or wrongly typed fields.
37
What are fixtures and how do you create a custom one?
Show answer
Fixtures set up and tear down test dependencies. Extend with test.extend({ loggedInPage: async ({ page }, use) => { ...; await use(page); } }).
38
How do you handle GraphQL APIs in Playwright?
Show answer
POST the query and variables as JSON to the single endpoint and assert both data and errors fields in the response.
39
How do you run a single test or file in Playwright?
Show answer
npx playwright test tests/login.spec.ts, add -g "test title" to match a name, or use test.only while debugging.
40
How do you send a POST request with a JSON body?
Show answer
await request.post('/api/users', { data: { name: 'Asha' } }) automatically sets JSON headers and serialises the payload.
41
How do you handle multiple tabs or pop-ups?
Show answer
Wait for the popup event with const [popup] = await Promise.all([page.waitForEvent('popup'), page.click('a')]), then interact with popup.
42
How do you mock network requests?
Show answer
page.route('**/api/items', route => route.fulfill({ json: [...] })) intercepts and replies with test data; route.abort() simulates failures.
43
How do you run tests on mobile viewports?
Show answer
Use device descriptors such as devices['iPhone 13'] in a project config to emulate viewport, user agent and touch.
44
How do you test a file download?
Show answer
const [download] = await Promise.all([
page.waitForEvent('download'),
page.getByText('Export').click(),
]);
await download.saveAs('reports/file.csv');
45
Write an API test with the request fixture.
Show answer
test('get user', async ({ request }) => {
const res = await request.get('/api/users/1');
expect(res.ok()).toBeTruthy();
expect((await res.json()).id).toBe(1);
});
46
How do you filter a list of locators by text or by a child element?
Show answer
// pick one product card from many
const card = page.getByRole('listitem')
.filter({ hasText: 'Wireless Mouse' })
.filter({ has: page.getByRole('button', { name: 'Add to cart' }) });
await card.getByRole('button', { name: 'Add to cart' }).click();
// hasNotText and hasNot exclude matches
47
How do you assert the number of rows in a table?
Show answer
// waits until exactly 5 data rows are rendered
const rows = page.getByRole('table').getByRole('row');
await expect(rows).toHaveCount(6); // 1 header + 5 rows
// avoid: expect(await rows.count()).toBe(6)
// that reads once and does not retry
48
Write code to fill a login form using label-based locators.
Show answer
test('login form', async ({ page }) => {
await page.goto('/login');
await page.getByLabel('Email').fill('user@test.in');
await page.getByLabel('Password').fill('Pass@123');
await page.getByRole('button', { name: 'Sign in' }).click();
await expect(page).toHaveURL(/dashboard/);
});
49
How do you change the default assertion timeout?
Show answer
Web-first assertions wait 5 seconds by default. Change it globally in playwright.config with expect: { timeout: 10000 }, or for one assertion with await expect(locator).toBeVisible({ timeout: 15000 }). Raise it only for genuinely slow steps like report generation. Raising it everywhere hides performance problems and makes failing tests slower to report.
50
How do you assert an element's CSS class, attribute or value?
Show answer
const btn = page.getByRole('button', { name: 'Submit' });
await expect(btn).toHaveClass(/disabled/);
await expect(btn).toHaveAttribute('aria-busy', 'true');
await expect(page.getByLabel('City')).toHaveValue('Pune');
await expect(btn).toHaveCSS('cursor', 'not-allowed');
51
How do you write a custom matcher with expect.extend?
Show answer
expect.extend takes an object of matcher functions. Each receives the received value and arguments, and returns { pass, message, name, expected, actual }. For example a toHaveAmount matcher can read a locator's text, strip the currency symbol and compare numbers, retrying with expect.poll inside. Export the extended expect from a shared fixtures file so all tests use the same version.
52
How do you locate elements inside a specific row or card?
Show answer
Chain locators: find the container first, then search inside it. Example: page.getByRole('row', { name: 'INV-104' }).getByRole('button', { name: 'Download' }). Each step narrows the search area, so short names like Edit or Download stay unique. Chaining also documents intent clearly and avoids long CSS paths that break when markup changes.
53
How do you verify a page's URL and title after navigation?
Show answer
await page.getByRole('link', { name: 'Orders' }).click();
await expect(page).toHaveURL(/\/orders$/);
await expect(page).toHaveTitle('My Orders | Shop');
// both retry, so no need to wait for navigation manually
54
Write a custom fixture that gives a logged-in page.
Show answer
import { test as base } from '@playwright/test';
export const test = base.extend({
loggedInPage: async ({ page }, use) => {
await page.goto('/login');
await page.getByLabel('Email').fill('qa@test.in');
await page.getByLabel('Password').fill('Pass@123');
await page.getByRole('button', { name: 'Sign in' }).click();
await use(page);
},
});
55
How do you override options like baseURL or viewport for one file?
Show answer
Call test.use at the top of the file or inside a describe block, for example test.use({ viewport: { width: 375, height: 812 }, locale: 'hi-IN' }). The options apply only to tests in that scope. Options you can set this way include baseURL, storageState, colorScheme and extraHTTPHeaders. Global defaults stay in the use block of playwright.config.
56
How do you provide page objects as fixtures?
Show answer
type Pages = { loginPage: LoginPage; cartPage: CartPage };
export const test = base.extend<Pages>({
loginPage: async ({ page }, use) => {
await use(new LoginPage(page));
},
cartPage: async ({ page }, use) => {
await use(new CartPage(page));
},
});
// test('x', async ({ loginPage }) => { ... })
57
How do you attach a screenshot or log to the report from inside a test?
Show answer
test('report', async ({ page }, testInfo) => {
await page.goto('/reports');
await testInfo.attach('report page', {
body: await page.screenshot(),
contentType: 'image/png',
});
await testInfo.attach('meta', { body: 'build 42', contentType: 'text/plain' });
});
58
Write a beforeEach hook that opens the home page and accepts the cookie banner.
Show answer
test.beforeEach(async ({ page }) => {
await page.goto('/');
const accept = page.getByRole('button', { name: 'Accept cookies' });
if (await accept.isVisible()) {
await accept.click();
}
});
59
How do you change part of a real API response?
Show answer
await page.route('**/api/profile', async route => {
const response = await route.fetch();
const json = await response.json();
json.plan = 'premium';
await route.fulfill({ response, json });
});
await page.goto('/account');
await expect(page.getByText('Premium plan')).toBeVisible();
60
How do you block images and fonts to speed up tests?
Show answer
await page.route(/\.(png|jpe?g|webp|woff2?)$/, route => route.abort());
// or by resource type
await page.route('**/*', route =>
route.request().resourceType() === 'image'
? route.abort()
: route.continue()
);
61
How do you mock network traffic using a HAR file?
Show answer
Record once with page.routeFromHAR('data/orders.har', { url: '**/api/**', update: true }) while running against a real server. Later runs replay the saved responses from the HAR instead of hitting the backend. You can edit the stored JSON to create edge cases. Re-record when the API changes, otherwise the replay drifts from reality.
62
How do you simulate a slow API to test a loading spinner?
Show answer
await page.route('**/api/report', async route => {
await new Promise(r => setTimeout(r, 3000));
await route.continue();
});
await page.getByRole('button', { name: 'Generate' }).click();
await expect(page.getByRole('progressbar')).toBeVisible();
await expect(page.getByRole('progressbar')).toBeHidden();
63
How do you listen to all network requests on a page?
Show answer
Subscribe to events: page.on('request', r => ...), page.on('response', r => ...) and page.on('requestfailed', r => ...). You can log URLs, collect API calls or count failures. Unlike route, listeners only observe and cannot change traffic. They are handy for checks like 'no request returned a 5xx status during this flow'.
64
How do you assert that a request was sent with the correct payload?
Show answer
const reqPromise = page.waitForRequest(r =>
r.url().endsWith('/api/orders') && r.method() === 'POST'
);
await page.getByRole('button', { name: 'Place order' }).click();
const req = await reqPromise;
expect(req.postDataJSON()).toMatchObject({ qty: 2, sku: 'MOU-01' });
65
How do you test offline behaviour?
Show answer
Call context.setOffline(true) to cut all network access for the context, then check that the app shows an offline banner or queues actions. Switch back with setOffline(false) and verify it syncs. You can also set offline: true in the context options. For a single failing endpoint, use route.abort instead of going fully offline.
66
How do you mock one GraphQL query when all calls go to /graphql?
Show answer
await page.route('**/graphql', async route => {
const body = route.request().postDataJSON();
if (body.operationName === 'GetCart') {
return route.fulfill({ json: { data: { cart: { items: [] } } } });
}
return route.fallback();
});
67
How do you add or change request headers for only some requests?
Show answer
Register a route for the matching URLs and call route.continue({ headers: { ...route.request().headers(), 'x-test-mode': 'true' } }). Other requests are untouched. For headers on every request, use extraHTTPHeaders in the config instead. This is useful for feature toggles, tenant ids or bypass tokens that only certain endpoints accept.
68
How do you mock a paginated endpoint that returns different data per page?
Show answer
await page.route('**/api/products?*', route => {
const url = new URL(route.request().url());
const p = Number(url.searchParams.get('page') ?? 1);
const items = Array.from({ length: 10 }, (_, i) => ({ id: (p - 1) * 10 + i }));
return route.fulfill({ json: { items, hasNext: p < 3 } });
});
69
How do you open a trace file?
Show answer
Download trace.zip from the test results or CI artifact. Run npx playwright show-trace path/to/trace.zip to open it locally, or drag the file into trace.playwright.dev, which processes it in the browser without uploading it. In the HTML report, failed tests with a trace show a trace link you can click directly.
70
How do you record a trace manually with the tracing API?
Show answer
Call await context.tracing.start({ screenshots: true, snapshots: true }) before the steps, and await context.tracing.stop({ path: 'trace.zip' }) after them. This is useful in scripts that use the library without the test runner, or when you want a trace of only part of a flow. tracing.group can label sections of steps.
71
How do you capture browser console messages and page errors?
Show answer
Listen with page.on('console', msg => ...) for console.log, warnings and errors, and page.on('pageerror', err => ...) for uncaught exceptions. Collect them in an array and attach them to the report on failure. Traces also show console output. Uncaught page errors often explain why a button did nothing or a page stayed blank.
72
How do you fail a test if the page logs any console error?
Show answer
test('no console errors', async ({ page }) => {
const errors: string[] = [];
page.on('console', m => { if (m.type() === 'error') errors.push(m.text()); });
page.on('pageerror', e => errors.push(e.message));
await page.goto('/dashboard');
expect(errors).toEqual([]);
});
73
How do you debug a test in VS Code with the Playwright extension?
Show answer
Install the Playwright Test for VS Code extension. Open the Testing panel to see tests, then set a breakpoint in the test file and click Debug Test. Execution stops at the breakpoint with the browser open, so you can inspect variables. Turn on Show browser to watch runs, and use Pick locator or Record at cursor to add steps.
74
How do you reproduce a flaky test locally?
Show answer
Run it many times in isolation: npx playwright test cart.spec.ts -g 'apply coupon' --repeat-each=30 --workers=4 --trace=on. Repeating it with several workers creates the timing pressure CI has. Add --retries=0 so failures are not hidden. Once it fails, open the trace for that run and compare it with a passing run.
75
Write a test that updates a user with PUT and verifies the change.
Show answer
test('update user', async ({ request }) => {
const res = await request.put('/api/users/12', {
data: { name: 'Neha', city: 'Jaipur' },
});
expect(res.status()).toBe(200);
const get = await request.get('/api/users/12');
expect(await get.json()).toMatchObject({ name: 'Neha', city: 'Jaipur' });
});
76
How do you send query parameters in an API request?
Show answer
// GET /api/products?category=books&page=2
const res = await request.get('/api/products', {
params: { category: 'books', page: 2 },
});
expect(res.ok()).toBeTruthy();
const body = await res.json();
expect(body.items.length).toBeGreaterThan(0);
77
How do you set baseURL and common headers for API tests?
Show answer
Put them in the use block of playwright.config: use: { baseURL: process.env.API_URL, extraHTTPHeaders: { Accept: 'application/json', Authorization: `Bearer ${process.env.TOKEN}` } }. The request fixture then sends them on every call, and tests use short paths like /api/users. Keep tokens in environment variables, never in the repository.
78
Write a test that deletes a record and confirms it is gone.
Show answer
test('delete product', async ({ request }) => {
const created = await request.post('/api/products', { data: { name: 'Temp' } });
const { id } = await created.json();
const del = await request.delete(`/api/products/${id}`);
expect(del.status()).toBe(204);
const get = await request.get(`/api/products/${id}`);
expect(get.status()).toBe(404);
});
79
How do you validate response headers?
Show answer
Use response.headers() for an object of lower-cased header names, or headersArray() for duplicates. Assert content-type contains application/json, cache-control matches the policy, and security headers such as strict-transport-security are present. Also check that sensitive headers like server version are not exposed. Header checks catch configuration bugs that body checks miss.
80
How do you write data-driven API tests with many inputs?
Show answer
const cases = [
{ email: '', status: 400 },
{ email: 'bad', status: 400 },
{ email: 'ok@test.in', status: 201 },
];
for (const c of cases) {
test(`signup with '${c.email}'`, async ({ request }) => {
const res = await request.post('/api/signup', { data: { email: c.email } });
expect(res.status()).toBe(c.status);
});
}
81
How do you use keyboard shortcuts in Playwright?
Show answer
Use locator.press('Enter') for a key on a focused element, or page.keyboard.press('Control+A') for page-level shortcuts. Modifiers combine with a plus sign, and ControlOrMeta picks Ctrl on Windows and Linux and Cmd on macOS. keyboard.down and keyboard.up hold keys. Use pressSequentially only when the app needs real keystrokes, such as autocomplete.
82
How do you select an option from a native select dropdown?
Show answer
const country = page.getByLabel('Country');
await country.selectOption('India'); // by value or label
await country.selectOption({ label: 'India' });
await expect(country).toHaveValue('IN');
// multi-select: selectOption(['a', 'b'])
83
How do you check a checkbox and verify it is checked?
Show answer
const terms = page.getByRole('checkbox', { name: 'I agree to the terms' });
await terms.check();
await expect(terms).toBeChecked();
await terms.uncheck();
await expect(terms).not.toBeChecked();
// setChecked(true) works for both cases
84
How do you emulate a mobile device in Playwright?
Show answer
Import devices from @playwright/test and spread a profile into a project or test.use, for example use: { ...devices['Pixel 7'] }. This sets viewport, user agent, device scale factor, touch support and isMobile. It emulates the browser, not a real phone, so it is good for responsive layout tests but not a replacement for real-device testing.
85
How do you test a page in dark mode or with reduced motion?
Show answer
Set colorScheme: 'dark' or reducedMotion: 'reduce' in the context options or test.use. You can also switch during a test with page.emulateMedia({ colorScheme: 'dark' }). Then assert the right styles or take a screenshot comparison. Reduced motion also helps stability, because many apps skip animations when that preference is set.
86
Write a typed helper that retries an async function a few times.
Show answer
async function retry<T>(fn: () => Promise<T>, times = 3): Promise<T> {
let lastError: unknown;
for (let i = 0; i < times; i++) {
try {
return await fn();
} catch (e) {
lastError = e;
}
}
throw lastError;
}
87
How do you read test data from a JSON file and loop over it?
Show answer
import users from './data/users.json';
for (const u of users) {
test(`login as ${u.role}`, async ({ page }) => {
await page.goto('/login');
await page.getByLabel('Email').fill(u.email);
await page.getByLabel('Password').fill(u.password);
await page.getByRole('button', { name: 'Sign in' }).click();
});
}
88
How do you read environment variables safely in a TypeScript test project?
Show answer
Load a .env file with a package like dotenv in playwright.config, then read process.env.BASE_URL. Values are string | undefined, so validate them early and throw a clear error if a required one is missing. Keep .env out of git and commit an .env.example instead. In CI, set the same names as secret variables.
89
How do you check that a product list on the page is sorted by price?
Show answer
const texts = await page.getByTestId('price').allTextContents();
const prices = texts.map(t => Number(t.replace(/[^0-9.]/g, '')));
const sorted = [...prices].sort((a, b) => a - b);
expect(prices).toEqual(sorted);
// wait for the list first with toHaveCount
90
How do you publish the Playwright HTML report from a CI pipeline?
Show answer
Keep the html reporter in the config. After the test step, add an upload-artifact step that runs even when tests fail, using a condition like always(), and upload the playwright-report folder with a retention period. Team members download and open it with npx playwright show-report. Some teams also publish it to static hosting for direct links.
91
Show a config with a setup project and a browser project that reuses its login.
Show answer
projects: [
{ name: 'setup', testMatch: /auth\.setup\.ts/ },
{
name: 'chromium',
use: { ...devices['Desktop Chrome'], storageState: '.auth/user.json' },
dependencies: ['setup'],
},
],
92
Write a visual assertion that masks a live clock and an ad banner.
Show answer
// masked areas are painted with a solid box
await expect(page).toHaveScreenshot('home.png', {
mask: [
page.getByTestId('live-clock'),
page.locator('.ad-banner'),
],
maskColor: '#FF00FF',
animations: 'disabled',
fullPage: true,
});
93
Write a test that compares only the pricing card instead of the full page.
Show answer
test('pricing card looks right', async ({ page }) => {
await page.goto('/pricing');
const card = page.getByRole('region', { name: 'Pro plan' });
// screenshot is clipped to the element
await expect(card).toHaveScreenshot('pro-plan.png');
});
94
Write an accessibility scan that checks only WCAG 2.1 A and AA rules.
Show answer
import { test, expect } from '@playwright/test';
import AxeBuilder from '@axe-core/playwright';
test('signup page has no WCAG A/AA issues', async ({ page }) => {
await page.goto('/signup');
const results = await new AxeBuilder({ page })
.withTags(['wcag2a', 'wcag2aa', 'wcag21a', 'wcag21aa'])
.analyze();
expect(results.violations).toEqual([]);
});
95
How do you exclude a third-party widget or switch off one rule in an axe scan?
Show answer
// scan the page but skip the chat widget you do not own
const results = await new AxeBuilder({ page })
.include('main')
.exclude('#third-party-chat')
.disableRules(['duplicate-id'])
.analyze();
expect(results.violations).toEqual([]);
// log a ticket for anything you exclude
96
Write a test that checks keyboard Tab order through a login form.
Show answer
test('login form is keyboard friendly', async ({ page }) => {
await page.goto('/login');
await page.getByLabel('Email').focus();
await page.keyboard.press('Tab');
await expect(page.getByLabel('Password')).toBeFocused();
await page.keyboard.press('Tab');
await expect(page.getByRole('button', { name: 'Sign in' })).toBeFocused();
await page.keyboard.press('Enter');
});
97
How do you attach axe results to the Playwright HTML report?
Show answer
test('cart is accessible', async ({ page }, testInfo) => {
await page.goto('/cart');
const results = await new AxeBuilder({ page }).analyze();
await testInfo.attach('axe-results', {
body: JSON.stringify(results.violations, null, 2),
contentType: 'application/json',
});
expect(results.violations).toEqual([]);
});
98
How do you run the same visual tests at mobile, tablet and desktop sizes?
Show answer
Create one project per size in playwright.config, for example using devices['Pixel 7'], devices['iPad Mini'] and a desktop viewport, and point them at the same visual test files with testMatch or a tag. Because the project name is part of the baseline file name, each size keeps its own images automatically. This keeps the test code identical while covering responsive layouts.
99
How do you test a site protected by HTTP basic authentication?
Show answer
Set httpCredentials with a username and password in the use block of the config, or pass it to browser.newContext. Playwright then answers the browser's authentication challenge automatically, so no pop-up appears. Read the values from environment variables rather than hard-coding them. You can also limit the credentials to a specific origin with the origin field.
100
How do you set up Playwright component testing in an existing React project?
Show answer
Run npm init playwright@latest -- --ct and choose React. It installs @playwright/experimental-ct-react, creates playwright-ct.config.ts and adds a playwright folder containing index.html and index.tsx. index.html hosts the mounted component and index.tsx is where global styles, themes and providers go. Tests then live in files such as Button.spec.tsx and run with npx playwright test -c playwright-ct.config.ts.
101
Write a component test for a Counter that increments on click.
Show answer
import { test, expect } from '@playwright/experimental-ct-react';
import { Counter } from './Counter';
test('increments on click', async ({ mount }) => {
const component = await mount(<Counter initial={2} />);
await component.getByRole('button', { name: 'Add' }).click();
await expect(component.getByTestId('count')).toHaveText('3');
});
102
Write a component test that checks an onSubmit callback receives the form data.
Show answer
test('submits the entered name', async ({ mount }) => {
const submitted: string[] = [];
const component = await mount(
<NameForm onSubmit={(name) => submitted.push(name)} />
);
await component.getByLabel('Name').fill('Asha');
await component.getByRole('button', { name: 'Submit' }).click();
await expect.poll(() => submitted).toEqual(['Asha']);
});
103
How do you wrap a component in a theme or router provider using hooksConfig?
Show answer
// playwright/index.tsx
import { beforeMount } from '@playwright/experimental-ct-react/hooks';
import { ThemeProvider } from '../src/theme';
export type HooksConfig = { theme?: 'light' | 'dark' };
beforeMount<HooksConfig>(async ({ App, hooksConfig }) => {
return <ThemeProvider mode={hooksConfig?.theme ?? 'light'}><App /></ThemeProvider>;
});
// in a test
await mount(<Header />, { hooksConfig: { theme: 'dark' } });
104
How do you mock API calls made by a component in a component test?
Show answer
Newer Playwright versions provide a router fixture in component tests. You call router.route with a URL pattern and fulfil it with test data, much like page.route, and it can also use mock handlers written for Mock Service Worker. Alternatively, inject a fake data client through props or a provider in hooksConfig. Mocking keeps component tests fast and independent of any backend.
105
How do you pass slots and listen to events in a Vue component test?
Show answer
With the Vue package you can mount with an options object: mount(Button, { props: { label: 'Save' }, slots: { default: 'Click me' }, on: { click: handler } }). The on map receives emitted events, so you can push payloads into an array and assert on them. JSX syntax is also supported if the project is configured for it.
106
How do you take visual snapshots of each component state in component tests?
Show answer
Mount the component once per state, for example default, disabled, loading and error, and call await expect(component).toHaveScreenshot() for each. Since only the component is on the page, images are small, stable and fast to review. Run them in the same Docker image as CI. This often replaces many full-page visual tests that break for unrelated reasons.
107
How do you test a component that reads from a global state store?
Show answer
Wrap the mounted component in the store provider inside beforeMount, and use hooksConfig to choose the initial state for each test, such as a logged-in user or an empty cart. Build the store in the browser side of index.tsx, not in the test file. Then interact with the component and assert on the rendered output rather than reading store internals.
108
Write a component test that checks a required field shows an error on blur.
Show answer
test('shows error when email is left empty', async ({ mount }) => {
const component = await mount(<EmailField required />);
const input = component.getByLabel('Email');
await input.focus();
await input.blur();
await expect(component.getByText('Email is required')).toBeVisible();
await expect(input).toHaveAttribute('aria-invalid', 'true');
});
109
How do you share one authenticated API context across all tests in a worker?
Show answer
Create a worker-scoped fixture that calls request.newContext with baseURL and an auth header, or logs in through the API and keeps the cookies. Pass it to use, and dispose it after use returns. Every test in that worker gets the same ready context, so login happens once per worker. Do not store per-test data on it, or tests start depending on each other.
110
How do you return a fake JSON response that depends on the request body?
Show answer
await page.route('**/api/quote', async (route) => {
const body = route.request().postDataJSON();
const price = body.plan === 'pro' ? 999 : 299;
await route.fulfill({
status: 200,
json: { plan: body.plan, price },
});
});
111
Write a fixture that gives each parallel worker its own test account.
Show answer
import { test as base } from '@playwright/test';
export const test = base.extend<{}, { account: { email: string; password: string } }>({
account: [async ({}, use, workerInfo) => {
const i = workerInfo.parallelIndex;
await use({
email: `qa.user${i}@example.test`,
password: process.env.QA_PASSWORD!,
});
}, { scope: 'worker' }],
});
112
Write a GitHub Actions job that runs the suite in four shards.
Show answer
jobs:
e2e:
runs-on: ubuntu-latest
strategy:
fail-fast: false
matrix:
shard: [1, 2, 3, 4]
steps:
- uses: actions/checkout@v4
- uses: actions/setup-node@v4
- run: npm ci && npx playwright install --with-deps
- run: npx playwright test --shard=${{ matrix.shard }}/4 --reporter=blob
- uses: actions/upload-artifact@v4
with:
name: blob-${{ matrix.shard }}
path: blob-report
113
How do you use more than one reporter in the same run?
Show answer
// playwright.config.ts
export default defineConfig({
reporter: [
['list'],
['html', { open: 'never', outputFolder: 'playwright-report' }],
['junit', { outputFile: 'results/junit.xml' }],
],
});
114
Write a minimal custom reporter that prints the titles of failed tests at the end.
Show answer
import type { Reporter, TestCase, TestResult } from '@playwright/test/reporter';
class FailedListReporter implements Reporter {
private failed: string[] = [];
onTestEnd(test: TestCase, result: TestResult) {
if (result.status === 'failed' || result.status === 'timedOut') {
this.failed.push(test.titlePath().join(' > '));
}
}
onEnd() {
console.log(`Failed tests (${this.failed.length}):`);
this.failed.forEach((t) => console.log(' - ' + t));
}
}
export default FailedListReporter;
115
How do you open an HTML report downloaded from a CI artifact?
Show answer
Unzip the artifact and run npx playwright show-report followed by the folder path, for example npx playwright show-report ./playwright-report. This starts a small local server, which is needed because traces load through it. Opening index.html directly from disk often fails to show traces. You can also upload a single trace zip to the online trace viewer.
116
How do you run one group of tests serially while the rest of the suite runs in parallel?
Show answer
Put the group in its own project with fullyParallel: false and limit it to one worker, which recent versions allow with a workers setting on the project, or run it in a separate CI step with --project=serial --workers=1. Inside a file, test.describe.configure({ mode: 'serial' }) keeps order. Use project dependencies if the group must run after the parallel tests.
117
How do you add build details such as the commit and environment to the test report?
Show answer
Set the metadata field in playwright.config, for example metadata: { commit: process.env.GIT_SHA, env: process.env.TEST_ENV }, which reporters can read and recent HTML reports show. Inside tests use testInfo.annotations.push for per-test details like a ticket id. Custom reporters can read config.metadata in onBegin and include it in messages or uploads.
118
How do you skip a test only in WebKit?
Show answer
test('drag a file onto the upload zone', async ({ page, browserName }) => {
test.skip(browserName === 'webkit', 'Known WebKit drag issue, ticket QA-123');
await page.goto('/upload');
// rest of the test
});
119
How do you add, read and clear cookies in a browser context?
Show answer
await context.addCookies([
{ name: 'consent', value: 'yes', url: 'https://shop.example.test' },
]);
const cookies = await context.cookies();
expect(cookies.find((c) => c.name === 'consent')?.value).toBe('yes');
await context.clearCookies({ name: 'consent' });
Frequently asked questions
Why are practical questions important?
Most technical rounds include at least one live task. Practising the exact typing and reasoning makes you calm and fast in the real round.
How should I answer them?
Talk while you work: say your approach first, write the simplest correct version, then improve it and mention edge cases.
More ways to practise
Company-wise Playwright Testing questionsPackage-wise Playwright Testing questionsExperience-wise Playwright Testing questionsRole-wise Playwright Testing questionsCity-wise Playwright Testing questionsMost asked Playwright Testing questionsScenario-based questionsHR & behavioural questionsPlaywright Testing mock interviewOnline assessment questionsTechnical round questionsManagerial round questionsPlaywright Testing topic sheets