Playwright Testing Interview Questions for Product Companies

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

How do you handle authentication to avoid logging in every test?

Fixtures and HooksMedium

Show answer

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'.

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();

How do you handle dialogs such as alerts?

Playwright CoreMedium

Show answer

How do you verify that an API returns consistent data across two versions of an endpoint?

API TestingHard

Show answer

Call both versions, for example /v1/orders/42 and /v2/orders/42, with the same test data. Map the fields that should match, since names may differ, and compare them with toEqual. Also assert that fields removed in v2 are really absent and new ones have correct types. Running this during a migration catches breaking changes before clients switch.

A test passes locally but fails in CI with a timeout on a click. How do you use the trace?

Debugging and Trace ViewerHard

Show answer

Open the CI trace and go to the failed click. Check the action log, which shows what Playwright waited for, such as the element not being visible or another element intercepting pointer events. Compare before and after snapshots and the network tab for slow or failed calls. Common causes are a slower environment, a cookie banner or different screen size.

Ten engineers write tests and quality varies a lot. How do you keep the framework consistent?

Show answer

Write a short contribution guide with examples. Add ESLint with the Playwright plugin and the no-floating-promises rule, plus Prettier, enforced in CI. Require reviews from framework owners for shared fixtures and page objects. Provide generators or templates for new page objects, and run regular sessions to review flaky tests together.

How do access modifiers help in page object classes?

Show answer

private and protected hide internal locators and helper steps, so tests can only call meaningful public methods such as login or addToCart. This keeps tests readable and lets you change internals without breaking callers. readonly on the page field prevents it from being replaced. TypeScript enforces these at compile time only, not at runtime.

What are fixtures and how do you create a custom one?

Fixtures and HooksMedium

Show answer

Fixtures set up and tear down test dependencies. Extend with test.extend({ loggedInPage: async ({ page }, use) => { ...; await use(page); } }).

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

Component TestingMedium

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.

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.

What are union types and type narrowing in TypeScript?

Show answer

A union type allows several types, such as string | number or 'admin' | 'user'. Before using type-specific methods, you narrow the type with checks like typeof, instanceof, in or comparing a literal field. TypeScript then knows the exact type inside that branch. In tests, unions model options like a role parameter that accepts only known values.

What does the JSON reporter output and how would you use it?

Parallel Runs, Sharding & ReportingMedium

Show answer

The JSON reporter writes the full suite tree with every test, its status, retries, duration, errors and attachment paths into one file. Teams parse it in scripts to post a summary to chat, to collect flaky tests that passed on retry, or to push results to a database for trends. Set outputFile so the JSON does not mix with console output.

Write an accessibility scan that checks only WCAG 2.1 A and AA rules.

Visual & Accessibility TestingMedium

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([]); });

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.

Images load lazily and are sometimes missing from full-page screenshots. How do you make them stable?

Visual & Accessibility TestingHard

Show answer

Scroll the content into view or remove loading=lazy for the test, then wait until every image has loaded, for example with expect.poll checking that all img elements report complete and a natural width above zero. Serving images from mocked routes removes network timing too. Only after that call toHaveScreenshot, which then waits for two identical frames.

What happens if you forget an await?

Show answer

The action runs without waiting, so the next step may run first — causing flaky failures or 'Target closed' errors. The @typescript-eslint/no-floating-promises rule catches it.

How do you handle a page that opens a browser permission prompt for notifications?

Playwright CoreEasy

Show answer

Browser permission prompts are not part of the page, so you cannot click them. Instead grant the permission up front with the permissions option in the config or context, for example permissions: ['notifications'], or call context.grantPermissions. To test the denied path, create a context without the permission and assert that the app shows its fallback message.

Describe how you mentored junior engineers on your test framework.

Show answer

Situation: three interns joined with little automation experience. Task: make them productive without lowering quality. Action: I ran short sessions on fixtures, locators and traces, paired with each of them on a first test, and gave detailed but kind review comments. Result: within a month they each shipped stable tests, and one later improved our reporting script.

How do you run tests against a preview deployment created for each pull request?

Show answer

Make baseURL come from an environment variable, such as process.env.BASE_URL, with a default for local runs. In the pipeline, wait for the preview deployment to be ready, read its URL from the deployment step and pass it to the test job. Add a quick health check request first, so a failed deployment is reported clearly instead of as hundreds of test failures.

How do you fail a test if the page logs any console error?

Debugging and Trace ViewerMedium

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([]); });

Mocked responses drift from the real API and tests pass while production breaks. How do you prevent this?

Network MockingHard

Show answer

Generate mock data from the API schema or real recorded responses instead of hand-writing it. Validate mocks against the OpenAPI schema in a unit test. Add contract tests on the backend side and re-record HAR files on a schedule. Keep a few unmocked end-to-end tests that run after each deploy. Treat mock files as code with owners and reviews.

Component and end-to-end tests run together and slow down every commit. How do you separate them?

Component TestingMedium

Show answer

Give them separate configs, such as playwright-ct.config.ts with its own testDir for component specs and playwright.config.ts for end-to-end tests, because component tests also need the bundler options and framework test import. In CI, run component tests on every commit as a fast job and end-to-end tests later or in parallel. Shared settings like reporters can live in a common module both configs import.

What are interfaces and types in TypeScript?

Show answer

Both describe the shape of data. Interfaces are extendable and suit object contracts; type aliases can also model unions and primitives.

How do you assert an element's CSS class, attribute or value?

Locators and AssertionsMedium

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');

What is the difference between a type annotation and a type assertion with as?

Show answer

A type annotation such as const user: User = data asks the compiler to check that the value really fits User. A type assertion such as data as User tells the compiler to trust you, so mismatches are not reported. In test code assertions are risky on API responses, because a wrong field passes compilation and fails later. Prefer annotations, type guards or runtime schema validation.

Test data is left behind when tests fail midway. How do you guarantee cleanup?

Fixtures and HooksMedium

Show answer

Create the data inside a fixture and delete it after await use(). Fixture teardown runs even when the test fails or times out, so cleanup is reliable. Avoid cleanup steps at the end of the test body, because they never run after a failed assertion. As a safety net, tag test data with a prefix and run a nightly cleanup job.

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

Component TestingMedium

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.

Write an API test with the request fixture.

API TestingMedium

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

Why should the Playwright Docker image version match your package version?

Framework Design and CI/CDMedium

Show answer

Each Playwright version expects specific browser builds. The official Playwright Docker image tagged v1.x.y-noble contains the browsers for that exact version. If package.json has a different version, tests fail because browsers are missing or mismatched. Pin both together and update them in the same pull request.

A test checks a price that is formatted differently per locale. How do you make the assertion robust?

Locators and AssertionsHard

Show answer

Fix the locale for the test with the locale and timezoneId options so the format is predictable. Build the expected string with Intl.NumberFormat using the same locale, rather than hard-coding it. If you test several locales, run them as projects or parameterised tests. For business logic, also assert the raw number through the API response.

Retries make the build green, but nobody notices flaky tests. How do you surface them?

Show answer

Playwright already marks tests that passed on retry as flaky in the HTML and JSON reports. Read the JSON report in a small script after each run, post flaky test names to the team channel, and fail the build if the flaky count crosses a threshold. Over time you can track trends per test and per area.

How do you handle date pickers and custom dropdowns?

Locators and AssertionsMedium

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.

The team wants to replace all end-to-end tests with component tests to save time. What do you advise?

Component TestingHard

Show answer

Agree to move detailed UI checks down to component tests, because they are faster and more precise. But keep a thin layer of end-to-end tests for critical journeys like signup, checkout and payment, since component tests use mocked data and cannot catch broken APIs, routing or deployment issues. Decide per risk, measure runtime savings, and track escaped defects after the change.

What are projects in playwright.config?

Framework Design and CI/CDMedium

Show answer

Named configurations that run the same tests across different browsers, devices or environments.

The app polls a status endpoint every few seconds. How do you test the change from Pending to Done?