QABattle

Playwright / Quiz

Locators That Survive a Redesign

getByRole, accessible names, and strict mode. The locators that outlive a CSS refactor, and the ones that die with the next sprint.

Difficulty
Easy
Format
Quiz
Points
100
Estimate
10 min

// MISSION BRIEF

Your Mission

The frontend team just renamed every CSS class in the app. Half the regression suite is dead. The other half, the half built on user-facing locators, did not even notice.

This quiz drills Playwright's locator hierarchy: getByRole, accessible names, getByTestId, and the strict mode rule that keeps your clicks honest.

Speed bonus active: sharp locator instincts earn extra points.

// FIRST CONTACT

Battle teaser

`page.getByRole('button', { name: 'Submit' })` finds elements based on:

  1. AThe id attribute of the element
  2. BThe CSS class name 'Submit' on the button
  3. CThe JavaScript onclick handler named 'Submit'
  4. DThe ARIA role and accessible name, computed the way assistive technology sees the element
Answers, scoring, hints, and the full battle stay sealed.

// SKILL TAGS

playwrighttypescriptlocatorsaccessibilitye2e-testing