Playwright Testing Interview Questions in Kolkata

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.

What do maxDiffPixels, maxDiffPixelRatio and threshold control in a screenshot comparison?

Visual & Accessibility TestingMedium

Show answer

threshold sets how different two pixels can be in colour, from 0 to 1, before they count as different; the default is 0.2. maxDiffPixels allows a fixed number of differing pixels, and maxDiffPixelRatio allows a fraction of the total image. Keep them tight so real regressions fail, and set them in the expect section of the config rather than loosening single tests one by one.

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

Show answer

What does the optional chaining operator do?

Show answer

obj?.a?.b safely reads nested properties and returns undefined instead of throwing if something in the chain is missing.

Which frameworks does Playwright component testing support?

Component TestingEasy

Show answer

Official packages exist for React, Vue and Svelte, named like @playwright/experimental-ct-react and @playwright/experimental-ct-vue. Each package provides the mount fixture and hooks in the style of its framework, such as slots and events for Vue. Support has changed between versions and the feature is experimental, so check the current docs and pin the package version alongside @playwright/test.

What is the difference between click and dispatchEvent?

Show answer

click simulates a real user click with actionability checks; dispatchEvent fires a DOM event directly without those checks.

How do you set baseURL and common headers for API tests?

API TestingMedium

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.

How do you set test timeouts?

Show answer

Use timeout and expect.timeout in config, test.setTimeout() for one test and test.slow() for known slower tests.

What is the Clock API in Playwright?

Show answer

page.clock lets tests control time. clock.install() fakes Date and timers, clock.setFixedTime() freezes the current date, and clock.fastForward() or runFor() moves time ahead. This is useful for session timeouts, countdowns, scheduled banners and date-based logic, without waiting real minutes. Install the clock before the page loads so the app uses fake time from the start.

What does force: true do on an action, and why should you avoid it?

Show answer

force: true skips the actionability checks, so Playwright clicks even if the element is hidden, disabled or covered. It can make a test pass while a real user would be blocked. Use it only for special cases like a custom checkbox whose real input is visually hidden by design. Otherwise fix the cause, such as an overlay.

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

Locators and AssertionsMedium

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.

How do you open a trace file?

Debugging and Trace ViewerEasy

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.

How do you handle errors in async code?

JavaScript and TypeScriptEasy

Show answer

Use try-catch with await, or .catch() on promises, and make sure rejected promises are never left unhandled.

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

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 do you change the default assertion timeout?

Locators and AssertionsEasy

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.

Write a test that updates a user with PUT and verifies the change.

API TestingMedium

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

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 test that duplicate POST requests do not create duplicate orders?

API TestingHard

Show answer

If the API supports an idempotency key header, send the same POST twice with the same key and assert one order exists and both responses return the same id. Send it with different keys and expect two orders. Also try concurrent requests with Promise.all to check race conditions. Without a key, document the risk to the team.

What is testInfo and what can you do with it?

Show answer

testInfo is passed as the second argument to tests and hooks. It gives the test title, project name, retry number, status and output path. You can attach files, add annotations, change the timeout with testInfo.setTimeout, or skip conditionally. For example, attach extra logs only when testInfo.status differs from testInfo.expectedStatus.

What is async/await?

JavaScript and TypeScriptEasy

Show answer

Syntax over Promises: an async function returns a Promise and await pauses until it resolves. Every Playwright action returns a Promise, so you await each step.

How do you test offline behaviour?

Network MockingMedium

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.

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.

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

Network MockingMedium

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 does fullyParallel change?

Framework Design and CI/CDMedium

Show answer

By default Playwright runs test files in parallel but tests within one file in order in a single worker. fullyParallel: true lets tests inside a file run in parallel across workers too. It speeds up suites with big files, but every test must be independent. You can also enable it per file with test.describe.configure({ mode: 'parallel' }).

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 filter a list of locators by text or by a child element?

Locators and AssertionsMedium

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

Why turn on strict mode in tsconfig for a test project?

Show answer

strict enables checks such as strictNullChecks and noImplicitAny. They catch bugs like using a value that may be undefined, missing parameters or wrong property names before tests run. In a large suite this saves debugging time and makes page objects safer to refactor. Pair it with the no-floating-promises lint rule to catch missing awaits.

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.

Explain the event loop.

Show answer

JavaScript runs one call stack and uses queues for async work; the event loop pushes callbacks from the microtask (promises) and task queues when the stack is empty.

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

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

What is a generic type parameter constraint, such as T extends object?

JavaScript and TypeScriptHard

Show answer

A constraint limits what types a generic can accept. function pick<T extends object, K extends keyof T>(obj: T, key: K) only accepts objects and keys that exist on them, so pick(user, 'emial') fails at compile time. In test helpers this catches typos in field names and keeps return types precise without using any.

How would you design a visual testing strategy for a large web application?

Visual & Accessibility TestingHard

Show answer

Snapshot stable, high-value screens and shared components, not every page. Render baselines only in a pinned Docker image, mask or mock dynamic data, and disable animations. Keep visual tests in their own project or tag so they can run on pull requests touching UI code. Define owners for baseline reviews and keep thresholds strict in config. Combine with functional assertions, because pictures alone do not tell you why something broke.

How do you test a file download?