Playwright Lab

Write a test by using the app.

I write Playwright suites for a living at VML. This lab records your clicks in a mini version of Swesso, my art-matching app, and writes the test I would write. Every line comes with the reasoning a code generator usually keeps to itself, and you can swap in worse locators to see how I'd review them.

Locate like a user

Roles, labels and visible text first. Test ids when nothing else works. CSS only as a last resort.

Assert, don't wait

Web-first assertions and auto-waiting actions. No sleeps anywhere.

Explain every line

Click any generated line to see why it was written that way.

Use the app. Every action becomes a line of the test.

localhost:3000/lab/sandbox

Swesso

Swipe through museum collections and discover your artistic matches.

Log in

Irises · Vincent van Gogh · 1890

Hover an element to see its locator
swesso.spec.ts0 steps
import { test, expect } from '@playwright/test';
 
test('', async ({ page }) => {

Relative URLDocs

This resolves against baseURL in playwright.config.ts, so the same test runs on localhost, preview deploys and production.

// Log in (any email and password) or continue as a guest.
});

Things to try

Each screen hides a common locator or timing trap.

  1. 01Log in

    'Log in' is also part of 'Log in as guest' and the form's heading. Watch the button's locator handle it.

  2. 02Peek behind the stack

    Hover the artist on the top card. The cards behind it are hidden but still in the DOM, and only some locators know that.

  3. 03Swipe

    Drag a card instead of pressing the heart, and see what gets recorded and why.

  4. 04Open your matches

    'Matches (3)' changes as you go, so the locator switches to a regex.

  5. 05Choose a worse locator

    Click a 'Remove' line and pick nth() or the XPath. Then sort the list by artist and think about which one survives.

  6. 06Count the collection

    In Assert mode, click a card in your matches and pick toHaveCount.

  7. 07Visit The Met

    'View at The Met' opens a new tab. Record it to see how a test catches a popup.

  8. 08Find the bug

    One painting in your matches has no alt text. Hover the images until you find it.

Paintings courtesy of The Metropolitan Museum of Art's Open Access program (public domain).