Playwright Testing Interview Questions in Mumbai

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

What does outputDir contain and why does it matter in parallel runs?

Show answer

outputDir, test-results by default, holds per-test artifacts such as screenshots, videos and traces. Playwright creates a separate subfolder for each test and retry, so parallel workers do not overwrite each other's files. testInfo.outputPath gives you a safe path inside it for your own files. It is cleared at the start of every run, so do not store anything permanent there.

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.

How do you validate JSON schema?

API TestingMedium

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.

What happens the first time toHaveScreenshot runs and no baseline image exists?

Visual & Accessibility TestingEasy

Show answer

Playwright cannot compare anything, so it captures the screenshot, saves it as the new baseline in the snapshots folder and marks the test as failed with a message that the snapshot was missing. On the next run the test compares against that file. This is why you review new baselines before committing them, and why baselines should be generated in the same environment that CI uses.

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

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.

What do toHaveAccessibleName and toHaveAccessibleDescription check?

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.

A toast message disappears after two seconds and the assertion on it is flaky. How do you test it reliably?

Locators and AssertionsMedium

Show answer

Assert immediately after the action that triggers it, using a web-first assertion like toBeVisible and toHaveText, which start checking at once. Do not add sleeps before the check. If the toast is still missed, control time with page.clock so it does not auto-hide, or verify the result through the data it confirms, such as the saved record.

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

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 run Playwright in GitHub Actions?

Framework Design and CI/CDMedium

Show answer

Workflow: checkout → setup-node → npm ci → npx playwright install --with-deps → npx playwright test → upload playwright-report as an artifact.

Which methods does the Playwright Reporter interface provide?

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.

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

How do you write a custom matcher with expect.extend?

Locators and AssertionsHard

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.

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

What do headed mode and slowMo do?

Debugging and Trace ViewerEasy

Show answer

--headed shows the browser window instead of running headless, so you can watch the test. slowMo, set in launchOptions, adds a delay in milliseconds before every action, which makes fast steps visible. Both help when you are writing or debugging a test. Do not leave slowMo on in CI, because it slows every action.

What are the serial and parallel modes of test.describe.configure?

Show answer

test.describe.configure({ mode: 'serial' }) runs tests in order in one worker, and if one fails the rest are skipped. mode: 'parallel' lets tests in one file run across workers. Serial mode suits a true step-by-step flow, but it makes tests depend on each other, so prefer independent tests and use serial only when there is no alternative.

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

Framework Design and CI/CDHard

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 use test.step and test annotations?

Show answer

test.step groups actions into named steps in reports; annotations such as test.skip, test.fixme and test.slow communicate intent and adjust behaviour.

What are fixtures in Playwright?

Framework Design and CI/CDMedium

Show answer

Reusable setup/teardown units injected into tests (page, context, request). You can extend test with custom fixtures such as loggedInPage.

A multi-select filter test passes even when an extra option stays selected. How do you tighten it?

Locators and AssertionsEasy

Show answer

The test probably checks only that the wanted options are selected, for example with a loop of toBeChecked or a contains check. Replace it with await expect(select).toHaveValues(['red', 'green']), which passes only when exactly those values are selected, and it retries until the timeout. For custom multi-select widgets, assert the full list of selected chips with toHaveText on the chip locator.

How do you perform drag and drop and hover?

Playwright CoreMedium

Show answer

locator.hover() and locator.dragTo(target) perform these actions, with auto-waiting for actionability.

What is hoisting?

Show answer

Declarations of var and functions are moved to the top of their scope at compile time; let and const are hoisted but stay in the temporal dead zone until declared.

What does the reportSlowTests option do?

Show answer

reportSlowTests makes Playwright list test files that took longer than a threshold at the end of the run. You set max, the number of files to show, and threshold in milliseconds, for example { max: 5, threshold: 60000 }. It is a cheap way to find files worth splitting, because one slow file can hold up a worker or a whole shard.

What is an ARIA snapshot and how does toMatchAriaSnapshot work?

Show answer

An ARIA snapshot is a YAML description of the accessibility tree for a part of the page: roles, names and states such as checked or level. toMatchAriaSnapshot compares the live tree of a locator against that template, and partial templates or regular expressions can be used for changing text. It tests structure and semantics, so it survives styling changes that would break a pixel screenshot.

Describe a time you designed a fixture layer that other teams adopted.

Fixtures and HooksHard

Show answer

Situation: three product teams each had their own login and data setup code. Task: give them one reliable layer. Action: I built shared worker-scoped auth fixtures, test-scoped data builders with automatic cleanup, and page object fixtures, published them as an internal package with examples and versioned releases. Result: two more teams adopted it within a quarter, duplicate setup code disappeared and onboarding time for new testers dropped from weeks to days.

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

Show answer

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

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.

How do you change a mounted component's props during a test?

Component TestingMedium

Show answer

Call component.update with new JSX, for example await component.update(<Badge count={5} />). Playwright re-renders the same instance with the new props, so internal state is kept, just like a parent re-rendering it in the app. This lets you test effects that react to prop changes. To test fresh mounting behaviour instead, unmount and mount again.

What are template literals?

Show answer

Strings in backticks that allow embedded expressions like `Hello ${name}` and multi-line text, useful for building dynamic locators and URLs.

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

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.

Tell me how you learned TypeScript quickly for a project.

JavaScript and TypeScriptEasy

Show answer

Situation: I joined a team whose Playwright suite was in TypeScript while I knew only basic JavaScript. Task: become productive in two weeks. Action: I studied types, interfaces and generics in the evenings, read the team's page objects, and fixed small compiler errors as practice. Result: by week three I was writing new tests and reviewing simple pull requests.

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.

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

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.

How do you run the same visual tests at mobile, tablet and desktop sizes?