Locator League

// playwright practice

Playwright locator practice, challenge by challenge.

29 public skill previews across four tracks. These pages explain what you will practise. The editor opens when you sign in, and a reference solution only after you pass.

Searching for “Playwright practice” or “Playwright locator practice”? You are in the right place.

Practise free

Foundations

Challenges 1–7

  1. 01Navigate to a PageYour first Playwright action: open a website in a real browser. You learn what page and await mean, and a hidden check c…
  2. 02Click a ButtonFind a control the way a user does, by its role and visible name, and act on it. You work out which control produces the…
  3. 03Count Multiple ElementsRepeat an action a set number of times with one locator you keep in a variable. The hidden check counts what your action…
  4. 04Fill a Number InputSet the value of a form field. You learn that every kind of input has an accessible role and that fill() replaces what a…
  5. 05Follow a Navigation LinkMove between pages by clicking a link found by its role and name. A hidden check confirms where you landed.…
  6. 06Select from a DropdownChoose an option in a native dropdown. You learn how selectOption() works and how to find a dropdown that has no label.…
  7. 07Add a Todo ItemSome inputs submit when you press Enter. Fill a field and send a key to it as two separate actions, then let the hidden …

Core Interactions

Challenges 8–15

  1. 08Fill a Login FormFill a username and password through their labels and submit the form, as a user would. A hidden check confirms the logi…
  2. 09Test Form Error MessagesGood tests cover failure too. Submit a form with wrong details on purpose; the hidden check confirms the page shows the …
  3. 10Interact with CheckboxesChange the state of two checkboxes in opposite directions. You practise targeting checkboxes by role and the actions mad…
  4. 11Reveal Hidden Content on HoverSome content appears only when the pointer is over an element. Hover the right image, found by its alternative text, so …
  5. 12Detect a Keyboard PressFocus an input and send a key press, the way a keyboard user would. The hidden check reads what the page detected.…
  6. 13Wait for Dynamic ContentStart something that finishes later, without adding a fixed delay. You learn why Playwright waits for you and why sleeps…
  7. 14Handle a JavaScript AlertBrowser alerts block the page until handled. Set up a listener before triggering one so the dialog is dealt with and the…
  8. 15Filter Table RowsNarrow a locator to one table row by its text, then act on a control inside that row. The hidden check confirms you pick…

Advanced Techniques

Challenges 16–22

  1. 16Capture a Network ResponseCatch a network response caused by a page load. You learn to start waiting before the action that triggers it, so the re…
  2. 17Run JavaScript in the BrowserRun a small script inside the page to read and change it, using a value that is only known while the test runs.…
  3. 18Interact Inside an iFrameEmbedded frames have their own document. Scope your locators into an iframe and type into an editor inside it.…
  4. 19Upload a FileAttach a file to an upload field without the operating system picker, using a file name only known at run time, then sub…
  5. 20Handle a Popup WindowSome links open a new tab. Listen for the new page before clicking so your test can follow it.…
  6. 21Mock a GET RequestIntercept a request a page makes on load and answer it with your own data, set up before the page starts, so the page sh…
  7. 22Intercept a Form POSTIntercept only the form submission, answer it yourself, and let every other request through untouched.…

Expert & Verification

Challenges 23–29

  1. 23Drag and DropMove an element onto a drop target with Playwright’s drag helper. The hidden check accepts only a real drop.…
  2. 24Inspect Network PayloadSubmit a search with a value only known at run time and capture exactly what the page sent, so the payload can be checke…
  3. 25Full User JourneyChain several skills into one realistic journey across pages: sign in, reach a protected area and sign out.…
  4. 26Device EmulationSwitch a page to a phone-sized viewport so its mobile layout appears. The hidden check confirms what changes at that siz…
  5. 27Test localStorage StateWrite values to the browser’s local storage and read them back, after first giving the page a real origin to store them …
  6. 28Debug the Broken Test (Full Authoring)You get a broken test with several bugs. Find and fix them, then write the assertions yourself: this is one of two chall…
  7. 29Accessibility Assertions (Full Authoring)Write assertions that check accessible names and roles, the same properties assistive technology relies on and that make…