‹ Back to previous section Course home All page URLs

Playwright Testing Interview Questions for Analytics Companies

40 questions weighted to the interview style of analytics companies — 6 easy, 28 medium, 6 hard.

How analytics companies interview for Playwright Testing

Analytics and data-services firms test practical skill hard: SQL, Excel or Python tasks, statistics, and business cases where you turn data into a recommendation. Many run a take-home or live case round in addition to technical interviews.

This set focuses on API Testing (7), Network Mocking (5), JavaScript and TypeScript (5), Locators and Assertions (4).

HR round Technical interview Case or guesstimate round Technical round 1 Technical round 2 or case round

Solved — analytics companiesStart 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

Does headless mode behave differently from headed mode?

Playwright CoreMedium

Show answer

Modern Chromium headless uses the same browser code as headed, so behaviour is very close. Differences still appear in viewport size, GPU rendering, fonts and some OS dialogs. Tests should set an explicit viewport and not depend on window focus. If something passes headed but fails headless, record a trace and compare screenshots.

How do you mock an API response?

API TestingMedium

Show answer

await page.route('**/api/users', route => route.fulfill({ status: 200, json: [{ id: 1, name: 'Test' }] }) );

How do you test a page in dark mode or with reduced motion?

Playwright CoreMedium

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.

How do you run tests on three browsers in parallel?

Framework Design and CI/CDEasy

Show answer

Define projects for chromium, firefox and webkit in playwright.config.ts, set workers, then run: npx playwright test

When should you use getByTestId?

Locators and AssertionsEasy

Show answer

Use getByTestId when no user-facing locator is stable or unique, for example icon-only buttons, dynamic grids or canvas wrappers. It matches the data-testid attribute by default, and you can change the attribute name with testIdAttribute in the config. Test ids are very stable but users never see them, so prefer role, label or text first and keep test ids as a fallback.

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.

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 locate elements inside a specific row or card?

Locators and AssertionsMedium

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.

A locator matches three Delete buttons and the test fails with a strict mode violation. How do you fix it?

Locators and AssertionsMedium

Show answer

First scope the locator to the item you mean, for example the row that contains the user's name: page.getByRole('row', { name: 'Ravi Kumar' }).getByRole('button', { name: 'Delete' }). Do not reach for first() or nth() as a quick fix, because the order can change and the test may delete the wrong record. Scoping by meaningful context is stable and readable.

Visual tests pass on developers' laptops but fail in CI with tiny font differences. Why, and how do you fix it?

Visual & Accessibility TestingMedium

Show answer

Font rendering, anti-aliasing and installed fonts differ between Windows, macOS and Linux, so the same page produces slightly different pixels. The fix is to generate and compare baselines in one fixed environment, usually the official Playwright Docker image used in CI. Developers update baselines by running that container locally or through a CI job, not from their own machines. Loosening thresholds should be the last resort.

How do you mock WebSocket traffic in Playwright?

Network MockingHard

Show answer

Use page.routeWebSocket with a URL pattern. The handler gets a WebSocketRoute: you can reply to messages with ws.onMessage and ws.send without any server, or call connectToServer() to sit in the middle and change messages in both directions. This lets you test live dashboards and chat apps, for example pushing a fake price update.

What are arrow functions?

JavaScript and TypeScriptEasy

Show answer

A short function syntax that does not have its own this and arguments, taking them from the surrounding scope.

What is the playwright/index.tsx file used for?

Component TestingMedium

Show answer

It is the entry file bundled into the component test page, so it runs in the browser before every mount. You import global CSS, fonts and theme files there, and register beforeMount and afterMount hooks to wrap components in providers such as a router, theme or state store. Keeping this setup in one place means individual tests can mount components without repeating boilerplate.

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 is the difference between @playwright/test and the playwright package?

Playwright CoreEasy

Show answer

@playwright/test is the test runner with fixtures, assertions, parallel workers, retries, reports and config. The playwright package is the automation library alone, used for scripts like scraping or generating PDFs, where you launch browsers yourself. For testing, install @playwright/test. Both share the same browser automation API underneath.

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.

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.

What are the built-in fixtures page, context, browser and request?

Fixtures and HooksEasy

Show answer

page is a fresh tab for each test. context is the isolated browser context that owns the page, with its own cookies and storage. browser is the shared browser instance for the worker. request is an APIRequestContext for HTTP calls. You ask for them by name in the test function, and Playwright creates and cleans them up automatically.

A third-party analytics script makes tests slow and flaky. What do you do?

Network MockingMedium

Show answer

Block it in tests with context.route on its domain and route.abort, or fulfill it with an empty script. Analytics is not what you are testing, and blocking it removes delays and random network errors. If tracking events matter, write a few separate tests that capture the requests with waitForRequest and assert their parameters.

How do you test that a modal dialog traps focus and returns it when closed?

Visual & Accessibility TestingHard

Show answer

Open the dialog with a button and assert the dialog role is visible and focus moved inside it. Press Tab more times than there are controls and check with toBeFocused that focus never leaves the dialog. Press Escape, assert the dialog is hidden, and check that the opening button is focused again. Running the same test with Shift+Tab covers backward navigation as well.

What is UI mode and how is it different from --debug?

Debugging and Trace ViewerMedium

Show answer

UI mode, opened with npx playwright test --ui, is a dashboard to run, filter and watch tests, with a trace-like timeline for each one and a watch mode that reruns on file changes. --debug opens the Inspector to step through a single run live. Use UI mode for daily development and --debug for stepping through a specific action.

interface vs type in TypeScript?

JavaScript and TypeScriptMedium

Show answer

Both describe object shapes. Interfaces can be extended and merged; type aliases can also describe unions and primitives. Use interfaces for page or test-data shapes, types for unions.

How is a Playwright component test different from a Jest unit test with jsdom?

Component TestingMedium

Show answer

jsdom is a JavaScript imitation of the DOM running in Node, so layout, CSS, real focus and many browser APIs are missing or fake. A Playwright component test renders in real Chromium, Firefox or WebKit, so visibility, scrolling, styles and keyboard behaviour are real. The cost is a build step and a browser, so it is slower than jsdom. Pure logic and hooks are still cheaper in unit tests.

How do you measure API response time?

API TestingMedium

Show answer

Record timestamps around the request or use response timing, then assert the duration is under an agreed threshold.

How do you return a fake JSON response that depends on the request body?

Network MockingMedium

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

How do you assert that a request was sent with the correct payload?

Network MockingMedium

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

How do you check that a product list on the page is sorted by price?

JavaScript and TypeScriptMedium

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 share cookies between API login and UI?

API TestingMedium

Show answer

An endpoint should reject invalid email addresses. Which negative tests would you write?

API TestingMedium

Show answer

Cover empty string, missing field, null, wrong type such as a number, no at sign, no domain, spaces, very long strings and a duplicate existing email. For each, assert a 400 or 422 status, a clear error message naming the field, and that nothing was created. Also check that a valid email with uppercase letters is accepted.

How do you validate an API response in Playwright?

API TestingMedium

Show answer

Assert the status with expect(res.status()).toBe(200), parse res.json() and check fields, using schema validation for the structure.

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.

How do you listen to all network requests on a page?

Network MockingMedium

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

What happens if you forget an await?

JavaScript and TypeScriptMedium

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 make an API request in Playwright?

API TestingEasy

Show answer

Use the request fixture: const res = await request.get('/api/users'); expect(res.ok()).toBeTruthy(); const body = await res.json();

What happens before and after await use() in a fixture?

Fixtures and HooksMedium

Show answer

Code before await use(value) is setup and runs before the test. use hands the value to the test and waits while the test runs. Code after it is teardown and runs when the test finishes, even if it failed. This keeps setup and cleanup for one resource in one place, which is cleaner than a separate beforeEach and afterEach pair.

What do toHaveAccessibleName and toHaveAccessibleDescription check?

Visual & Accessibility TestingMedium

Show answer

They assert the name and description that assistive technology computes for an element, using the accessibility tree rather than raw attributes. The name may come from a label, aria-label, aria-labelledby or inner text, and the description often from aria-describedby. For example an icon-only close button should have the name Close. These checks catch problems that a plain text assertion would miss.

How does this behave in arrow functions compared with regular functions?

JavaScript and TypeScriptMedium

Show answer

A regular function gets this from how it is called, so passing a class method as a callback can lose this. An arrow function has no own this and uses the value from the surrounding code. In page objects, arrow functions in callbacks such as map keep access to this.page, which avoids undefined errors.

How would you design API test coverage for a new endpoint?

API TestingHard

Show answer

Cover happy path, validation errors, auth and permissions, boundary values, idempotency, schema, performance and data cleanup.

Which methods does the Playwright Reporter interface provide?

Parallel Runs, Sharding & ReportingMedium

Show answer

The main ones are onBegin with the config and full suite, onTestBegin and onTestEnd for each test, onStepBegin and onStepEnd for steps, onStdOut and onStdErr for output, onError for errors outside tests and onEnd with the overall result. onEnd can be async, so you can send results to an API before the process exits. You register the reporter by path in the reporter config.