Skip to content
Playwright Testing
All courses OffersPlacement Report
‹ Back to previous sectionCourse homeAll page URLs

Frontend Test Engineer Interview Questions & Answers

40 questions for Frontend Test Engineer interviews — 2 easy, 36 medium, 2 hard.

About the Frontend Test Engineer role

Focuses on the quality of web user interfaces: functional flows, responsive layouts, accessibility, visual regressions and behaviour under different network conditions. Works closely with frontend developers and often tests components against mocked APIs. Interviews cover locators, assertions, network mocking, device emulation, visual comparisons and debugging rendering or timing issues across Chromium, Firefox and WebKit. Knowledge of HTML, CSS and how modern frontend frameworks render pages is a strong plus.

Cross-browser testing Network mocking Visual comparisons Accessibility checks Responsive emulation
Solved for this roleStart 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
01

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

Locators and AssertionsMedium
Save to ▾
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.
02

How do you run tests on mobile viewports?

Playwright CoreMedium
Save to ▾
Show answer
Use device descriptors such as devices['iPhone 13'] in a project config to emulate viewport, user agent and touch.
03

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

Visual & Accessibility TestingMedium
Save to ▾
Show answer
Create one project per size in playwright.config, for example using devices['Pixel 7'], devices['iPad Mini'] and a desktop viewport, and point them at the same visual test files with testMatch or a tag. Because the project name is part of the baseline file name, each size keeps its own images automatically. This keeps the test code identical while covering responsive layouts.
04

Tell me about a time mocking helped you test a hard edge case.

Network MockingMedium
Save to ▾
Show answer
Situation: we could not reproduce a bug where the cart broke when the stock API returned zero for one item. Task: cover it with a test. Action: I mocked only the stock endpoint with route.fetch and changed one item's quantity, then asserted the out-of-stock label. Result: the bug was fixed and the test now protects that case on every run.
05

How do you test geolocation, permissions and time zones?

Playwright CoreMedium
Save to ▾
Show answer
Set them in the context options (geolocation, permissions, timezoneId, locale) to simulate users from other regions.
06

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

Debugging and Trace ViewerMedium
Save to ▾
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([]); });
07

How do you write data-driven API tests with many inputs?

API TestingMedium
Save to ▾
Show answer
const cases = [ { email: '', status: 400 }, { email: 'bad', status: 400 }, { email: 'ok@test.in', status: 201 }, ]; for (const c of cases) { test(`signup with '${c.email}'`, async ({ request }) => { const res = await request.post('/api/signup', { data: { email: c.email } }); expect(res.status()).toBe(c.status); }); }
08

What are nth(), first() and last(), and why are they risky?

Locators and AssertionsMedium
Save to ▾
Show answer
They pick one element by position from a locator that matches many. They are fine when order is truly meaningful, such as the first search result. They are risky when order depends on data, sorting or rendering speed, because the test may silently act on the wrong element. Prefer filtering by text or a child element that identifies the item.
09

What is expect(...).toPass and how is it different from expect.poll?

Locators and AssertionsHard
Save to ▾
Show answer
toPass retries a whole block of code, including several actions and assertions, until it runs without throwing. expect.poll retries only one function that returns a value. Use toPass for flows like 'click refresh, then check the status' that must be repeated together. It has no timeout by default, so always pass a timeout to avoid a hung test.
10

What is the Clock API in Playwright?

Playwright CoreMedium
Save to ▾
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.
11

Tell me about a time a pipeline you owned broke just before a release.

Framework Design and CI/CDMedium
Save to ▾
Show answer
Situation: on release day the test job failed for every build after a runner image update. Task: unblock the release safely. Action: I compared logs, found missing browser dependencies, pinned the Playwright Docker image version and reran. Result: tests passed within an hour, the release went out on time, and I added an alert for image changes.
12

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

Network MockingMedium
Save to ▾
Show answer
Mock the endpoint with a counter: return Pending for the first two calls and Done after that. Then assert the UI shows Pending and later Done using web-first assertions with a suitable timeout. You can also use page.clock to speed up the polling interval instead of waiting real seconds. This makes a slow real-world process quick and deterministic.
13

What does the Pick locator tool do?

Debugging and Trace ViewerEasy
Save to ▾
Show answer
In the Inspector, UI mode and the VS Code extension, Pick locator lets you hover over any element on the page and see the locator Playwright recommends for it, usually a role or label based one. You can copy it into your test. It is a fast way to write locators and to check whether an existing one is unique.
14

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

Locators and AssertionsMedium
Save to ▾
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.
15

How do you add or change request headers for only some requests?

Network MockingMedium
Save to ▾
Show answer
Register a route for the matching URLs and call route.continue({ headers: { ...route.request().headers(), 'x-test-mode': 'true' } }). Other requests are untouched. For headers on every request, use extraHTTPHeaders in the config instead. This is useful for feature toggles, tenant ids or bypass tokens that only certain endpoints accept.
16

A trace shows the click landed on an overlay instead of the button. How do you fix it?

Debugging and Trace ViewerMedium
Save to ▾
Show answer
The call log will say another element intercepts pointer events. Find what the overlay is, such as a loading mask, cookie banner or chat widget. Wait for it to disappear with expect(overlay).toBeHidden(), or close it in a fixture. Do not use force: true, because it hides a real issue: a user would also be blocked by that overlay.
17

How do you use keyboard shortcuts in Playwright?

Playwright CoreMedium
Save to ▾
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.
18

How do you locate elements inside a specific row or card?

Locators and AssertionsMedium
Save to ▾
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.
19

What is a Promise and what states can it have?

JavaScript and TypeScriptEasy
Save to ▾
Show answer
A Promise represents a value that will be available later, such as an API response. It is pending at first, then either fulfilled with a value or rejected with an error, and it never changes after that. You consume it with await or then and catch. Almost every Playwright call returns a Promise, which is why tests use await so much.
20

What does the DEBUG=pw:api environment variable do?

Debugging and Trace ViewerMedium
Save to ▾
Show answer
Setting DEBUG=pw:api prints detailed logs of every Playwright API call to the terminal, including waits and retries inside actions. It helps when a test hangs and you need to see exactly which step is waiting and why. Other channels such as pw:browser show browser process output. It is noisy, so use it only while investigating.
21

How do you test how the UI handles a 500 error from the orders API?

Network MockingMedium
Save to ▾
Show answer
Mock the endpoint with route.fulfill({ status: 500, json: { message: 'Server error' } }), then open the page. Assert the user sees a friendly error message and a retry button, and that no broken half-rendered table appears. Then make the retry return 200 and check the data loads. This covers a path that is hard to trigger on a real server.
22

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

Debugging and Trace ViewerMedium
Save to ▾
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.
23

How do you record a trace manually with the tracing API?

Debugging and Trace ViewerMedium
Save to ▾
Show answer
Call await context.tracing.start({ screenshots: true, snapshots: true }) before the steps, and await context.tracing.stop({ path: 'trace.zip' }) after them. This is useful in scripts that use the library without the test runner, or when you want a trace of only part of a flow. tracing.group can label sections of steps.
24

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

Playwright CoreMedium
Save to ▾
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.
25

How do you test a file download?

Playwright CoreMedium
Save to ▾
Show answer
const [download] = await Promise.all([ page.waitForEvent('download'), page.getByText('Export').click(), ]); await download.saveAs('reports/file.csv');
26

How do you take screenshots and videos?

Debugging and Trace ViewerMedium
Save to ▾
Show answer
page.screenshot() for captures and config options use: { screenshot: 'only-on-failure', video: 'retain-on-failure' } for automatic evidence.
27

How do you mock an API response?

API TestingMedium
Save to ▾
Show answer
await page.route('**/api/users', route => route.fulfill({ status: 200, json: [{ id: 1, name: 'Test' }] }) );
28

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

Fixtures and HooksMedium
Save to ▾
Show answer
Log in once in a setup project, save storageState to a file and reuse it in other projects or tests.
29

Write a fixture that gives each parallel worker its own test account.

Parallel Runs, Sharding & ReportingMedium
Save to ▾
Show answer
import { test as base } from '@playwright/test'; export const test = base.extend<{}, { account: { email: string; password: string } }>({ account: [async ({}, use, workerInfo) => { const i = workerInfo.parallelIndex; await use({ email: `qa.user${i}@example.test`, password: process.env.QA_PASSWORD!, }); }, { scope: 'worker' }], });
30

How do you do visual regression testing?

Playwright CoreMedium
Save to ▾
Show answer
Use expect(page).toHaveScreenshot() to compare with stored baselines, with thresholds and masks for dynamic regions.
31

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

Network MockingMedium
Save to ▾
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.
32

How do you capture browser console messages and page errors?

Debugging and Trace ViewerMedium
Save to ▾
Show answer
Listen with page.on('console', msg => ...) for console.log, warnings and errors, and page.on('pageerror', err => ...) for uncaught exceptions. Collect them in an array and attach them to the report on failure. Traces also show console output. Uncaught page errors often explain why a button did nothing or a page stayed blank.
33

How do you handle file uploads and downloads?

Playwright CoreMedium
Save to ▾
Show answer
setInputFiles on the input for uploads; for downloads wait on page.waitForEvent('download') and save or inspect the file.
34

How does Playwright talk to browsers, and why does that make it less flaky?

Playwright CoreHard
Save to ▾
Show answer
Playwright runs outside the browser and controls it through a persistent connection using each engine's own protocol, such as CDP for Chromium and patched protocols for Firefox and WebKit. It can watch DOM, network and events directly, so it waits on real state instead of polling from inside the page. This gives reliable auto-waiting, multi-tab and network control.
35

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

Network MockingMedium
Save to ▾
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'.
36

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

Playwright CoreMedium
Save to ▾
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.
37

How do you handle shadow DOM?

Locators and AssertionsMedium
Save to ▾
Show answer
Playwright locators pierce open shadow roots by default, so getByRole and CSS locators work without special handling.
38

How do you filter a list of locators by text or by a child element?

Locators and AssertionsMedium
Save to ▾
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
39

How do you test accessibility with Playwright?

Playwright CoreMedium
Save to ▾
Show answer
Integrate axe-core through @axe-core/playwright, run an analysis on the page and assert that there are no violations.
40

How do you handle multiple tabs or pop-ups?

Playwright CoreMedium
Save to ▾
Show answer
Wait for the popup event with const [popup] = await Promise.all([page.waitForEvent('popup'), page.click('a')]), then interact with popup.

Frequently asked questions

What does a Frontend Test Engineer do?

Focuses on the quality of web user interfaces: functional flows, responsive layouts, accessibility, visual regressions and behaviour under different network conditions. Works closely with frontend developers and often tests components against mocked APIs. Interviews cover locators, assertions, network mocking, device emulation, visual comparisons and debugging rendering or timing issues across Chromium, Firefox and WebKit. Knowledge of HTML, CSS and how modern frontend frameworks render pages is a strong plus.

Which skills are tested in a Frontend Test Engineer interview?

Expect questions on Cross-browser testing, Network mocking, Visual comparisons, Accessibility checks, Responsive emulation. Most rounds also ask you to explain a project and solve one practical problem live.

How do I prepare for a Frontend Test Engineer interview?

Revise Locators and Assertions, Network Mocking, Playwright Core, Debugging and Trace Viewer first using the topic sheets, practise the questions on this page aloud, then do one full mock interview to practise timing.

Topic sheets for this role

Locators and Assertions questionsNetwork Mocking questionsPlaywright Core questionsDebugging and Trace Viewer questions

Other roles

Playwright Automation EngineerSoftware Development Engineer in Test (SDET)QA EngineerAutomation Testing InternSenior SDETQA Automation LeadTest Architect

More ways to practise

Company-wise Playwright Testing questionsPackage-wise Playwright Testing questionsExperience-wise Playwright Testing questionsRole-wise Playwright Testing questionsCity-wise Playwright Testing questionsMost asked Playwright Testing questionsScenario-based questionsPractical / hands-on questionsHR & behavioural questionsPlaywright Testing mock interviewOnline assessment questionsTechnical round questionsManagerial round questionsPlaywright Testing topic sheets