Playwright Testing Interview Questions for E-commerce &amp; consumer tech Companies

Show answer

Use page.frameLocator('#frame').getByRole(...) so actions work inside the iframe with auto-waiting.

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.

What are the trade-offs of trace 'on' versus 'retain-on-failure' in CI?

Debugging and Trace ViewerHard

Show answer

'on' records and keeps every trace, which costs time, disk space and artifact storage for thousands of passing tests. 'retain-on-failure' still records everything but deletes traces of passing tests, so cost is mainly runtime. 'on-first-retry' is cheapest but gives no trace for a first failure without retries. Most teams use on-first-retry with retries in CI.

How do you test file upload via API?

API TestingMedium

Show answer

Use request.post with multipart: { file: { name, mimeType, buffer } } and assert the response and stored file details.

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.

How do you keep test code, page objects and utilities organised as a repository grows?

Framework Design and CI/CDMedium

Show answer

Use a clear layout: tests grouped by feature, a pages folder for page objects, a fixtures folder that exposes them, and api and data folders for helpers and builders. Add path aliases in tsconfig, a lint config with the Playwright plugin, and a short contributing guide. Review new helpers in pull requests so duplicate utilities do not spread.

How would you type the response of an API call in TypeScript?

JavaScript and TypeScriptHard

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.

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 }, }); });

What is APIRequestContext?

API TestingMedium

Show answer

The object behind the request fixture that holds base URL, headers and cookies, and can share cookies with a browser context.

Promise.all vs Promise.allSettled vs Promise.race?

JavaScript and TypeScriptMedium

Show answer

all waits for every promise and rejects on the first failure; allSettled waits for all and reports each outcome; race settles with the first one to finish.

What is locator strictness in Playwright?

Show answer

Locators are strict: an action such as click or fill throws a strict mode violation if the locator matches more than one element. This prevents a test from silently clicking the wrong item. Fix it by making the locator more specific with a name, filter or chaining. Methods like count(), all() or first() are allowed to work with many matches on purpose.

What is the difference between workerIndex and parallelIndex?

Parallel Runs, Sharding & ReportingMedium

Show answer

workerIndex is a unique number for every worker process started during the run, so it keeps growing when a worker is restarted after a failure. parallelIndex is a slot number from 0 to workers minus 1, and a restarted worker reuses its slot. Use parallelIndex, also exposed as TEST_PARALLEL_INDEX, to pick a fixed test account or database per slot.

How do you run tests in Docker?

Framework Design and CI/CDMedium

Show answer

Use the official Playwright image which contains browsers and dependencies, mount the project and run npx playwright test for consistent CI environments.

How do you test a dropdown component's keyboard support in a component test?

Show answer

Mount the dropdown, focus the trigger and press Enter or ArrowDown to open it. Assert the listbox is visible and the first option has aria-selected or focus. Press ArrowDown again and check the active option moves, then press Enter and assert the trigger shows the chosen value and the list is closed. Finally press Escape on an open list to confirm it closes without changing the value.

A test must confirm that an error banner does not appear, but it always waits the full timeout. How do you fix it?

Show answer

Use a web-first negative assertion such as await expect(banner).toBeHidden() or not.toBeVisible(); they pass as soon as the element is absent, so they do not wait the full timeout. The real problem is timing: assert after a positive signal, such as the success message appearing, otherwise the banner may simply not have rendered yet and the check passes too early.

Write a typed helper that retries an async function a few times.

JavaScript and TypeScriptMedium

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; }

How do you test a flow that needs two user roles, such as an admin and a customer, in one test?

Fixtures and HooksHard

Show answer

Create two browser contexts in the same test, each with its own storageState file, for example admin.json and user.json made by a setup project. Wrap them in fixtures like adminPage and userPage so tests stay short. The admin approves an order in one context and the customer sees the update in the other, with fully separate cookies.

How does URL matching work in page.route?

Show answer

The first argument can be a glob string, a regular expression or a function that receives a URL object. Globs like '**/api/users*' are simple but * does not cross slashes and ** does. Regex gives precise control over query strings. A predicate function suits complex rules, for example matching host plus a specific search parameter.

How would you build a flaky-test dashboard from Playwright results?

Parallel Runs, Sharding & ReportingHard

Show answer

Write a custom reporter or parse the JSON report after each CI run, and store per test: id, status, retry count, duration, branch and commit. A test that passed after a retry counts as flaky. Aggregate over the last few hundred runs to rank tests by flake rate and duration, and show trends. Use it to assign owners and quarantine tests above an agreed threshold.

A designer changes the primary button colour and 300 visual tests fail at once. How do you handle it?

Visual & Accessibility TestingHard

Show answer

First confirm the change is intended and check a sample of diffs to make sure nothing else moved. Then regenerate baselines in the CI Docker environment in a separate commit, so reviewers can see only image changes. Longer term, reduce the count: most of those tests should not snapshot full pages. Keep a few page-level shots and move detail checks to component-level screenshots of key states.

Write a minimal custom reporter that prints the titles of failed tests at the end.

Parallel Runs, Sharding & ReportingHard

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;

What is the blob reporter and why does it exist?

Parallel Runs, Sharding & ReportingMedium

Show answer

The blob reporter writes a compact archive of everything about a run, including results, attachments and traces, into the blob-report folder. It is meant for machines rather than people. Each shard produces one blob, and npx playwright merge-reports later combines them into a single HTML, JUnit or JSON report. Without it, every shard would produce its own separate HTML report.

How do contract tests differ from functional API tests?

API TestingHard

Show answer

Functional tests check behaviour: given this input, the API returns the right data and status. Contract tests check that the shape agreed between consumer and provider, such as field names and types, has not changed. Playwright suits functional tests and simple schema checks. Dedicated contract tools help when many services evolve independently and need consumer-driven agreements.

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.

Your test clicks a button before the page's JavaScript has attached its handler, so nothing happens. What do you do?

Show answer

This is a hydration problem: the button is visible and enabled but not yet interactive. Wait for a signal that the app is ready, such as a loaded data request or a visible element that only appears after hydration, then click. A better fix is to report it to developers, because real users hit the same issue. Avoid fixed waitForTimeout calls.

How do you debug a test in VS Code with the Playwright extension?

Debugging and Trace ViewerMedium

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.

When should you choose a component test over an end-to-end test?

Show answer

Choose a component test when the behaviour lives inside one component: validation messages, disabled states, sorting in a table, keyboard handling in a dropdown or rendering of edge-case data. These are slow and awkward to reach through full flows. Choose end-to-end when the risk is in integration, such as routing, authentication or data saved on the server.

How do you test API error scenarios?

API TestingMedium

Show answer

Send invalid payloads or missing auth and assert 400, 401 or 404 codes and the error message bodies.

How do you run one group of tests serially while the rest of the suite runs in parallel?

Parallel Runs, Sharding & ReportingMedium

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.

How do you test that the app retries a request that failed the first time?

Show answer

Register a route with a counter: on the first call use route.fulfill with status 503, and on later calls fulfil with a success body. Perform the action, then assert the UI shows the final data and the counter equals 2. You can also check that no error message flashed. This proves the retry logic works without waiting for a real outage.

Describe a time a test passed but the feature was actually broken.

Show answer

Situation: a checkout test passed, but users saw a blank order summary. Task: find why. Action: I found the test only asserted that the summary container was visible, not its contents. I added assertions on item names, totals and the order id. Result: the test caught the regression, and I reviewed other tests for similar weak assertions.

What are soft assertions?

Show answer

await expect.soft(locator).toHaveText('...') records the failure but lets the test continue, so you see every mismatch in one run.

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.

How do you design a locator strategy for a team so tests survive UI redesigns?

Locators and AssertionsHard

Show answer

Set a written priority order: role with name, then label, placeholder or text, then test id, and CSS or XPath only as a last resort. Agree with developers to add data-testid on complex widgets. Keep locators inside page objects so a change is fixed in one place. Add a lint rule or review check against long CSS chains and nth-child selectors.

Describe a time strict TypeScript types caught a bug in your test code.

JavaScript and TypeScriptMedium

Show answer

Situation: our API helpers returned loosely typed objects and tests often read fields that no longer existed. Task: make helpers safer. Action: I added response interfaces, turned on strict mode and replaced any with unknown plus type guards. Result: the compiler immediately showed eleven tests reading a renamed field, which had been passing because they compared undefined with undefined. We fixed them before the next release.

How do you mock API calls made by a component in a component test?