JavaScript & TypeScript / Quiz

Playwright in TypeScript: Fixtures With Teeth

test.extend with a type argument, worker vs test scope, page objects as typed fixtures, and mergeTests. E2E plumbing the compiler can vouch for.

Difficulty
Medium
Format
Quiz
Points
150
Estimate
9 min

// MISSION BRIEF

Your Mission

Playwright is TypeScript-native, and its fixture system is where that pays off: define a fixture once with a type, and every test that destructures it gets full inference, no casts, no any.

This quiz covers building typed fixtures and page objects: test.extend, the use callback, worker scope, readonly locators, and composing fixture sets.

Speed bonus active.

// FIRST CONTACT

Battle teaser

You want tests to receive a ready-made TodoPage: test('adds', async ({ todoPage }) => ...). The mechanism:

  1. AglobalThis.todoPage = new TodoPage(page) in a setup file
  2. BA beforeEach that assigns to a shared let variable, cast as TodoPage
  3. Cconst test = base.extend<{ todoPage: TodoPage }>({ todoPage: async ({ page }, use) => { await use(new TodoPage(page)); } }); the type argument makes the destructured fixture fully typed
  4. Dtest.addFixture('todoPage', TodoPage) at runtime
Answers, scoring, hints, and the full battle stay sealed.

// SKILL TAGS

typescriptplaywrightfixturespage-object-modele2e-testing