Your first real test, read line by line

Three days of JavaScript and you now hold every piece, so today you spend them on one real test and read every line of it aloud. The promise under test comes from the store itself: a shopper can search for a dish and see its price in JMD.

Here is the whole test. Type it into tests/tumble-kitchen.spec.js under your Day 2 smoke test:

import { test, expect } from '@playwright/test';

test('verify that searching for jerk finds the Jerk Chicken Plate with its price', async ({ page }) => {
  await page.goto('https://juliapottinger.com/practice/tumble-kitchen/');

  await page.getByRole('searchbox', { name: 'Search the menu' }).fill('jerk');
  await page.getByTestId('search-submit').click();

  const card = page.getByTestId('product-card').first();
  await expect(card).toContainText('Jerk Chicken Plate');
  await expect(card.getByTestId('product-price')).toHaveText('6,800 JMD');
});

Every line, out loud

1. The import brings in two tools: test, which registers a test, and expect, which asserts.
2. The test line gives the test a name that is a sentence, then hands your steps a fresh browser tab called page. The async marks it as work that waits; you met that yesterday.
3. goto drives the tab to the store, and await holds the line until the page is ready.
4. fill finds the search field by its role and its label, Search the menu, the same words a user reads, and types jerk into it.
5. click presses the search button by its agreed test id.
6. const card stores a pointer to the first product card. Day 3 again: name your values.
7. The first expect insists the card mentions the Jerk Chicken Plate.
8. The second expect insists its price reads exactly 6,800 JMD, comma and all.

Go, act, expect. Every test you will ever write is that story with different nouns.

The waiting you did not have to write

Between the click and the results there is a real 700 millisecond gap while the store fetches its feed, and for that gap the old catalogue is still on screen with the Deluxe Plantain Plate first. Nothing in your test mentions this. That is auto-waiting: click waits for the button to be ready before pressing, and toContainText keeps re-checking the card until the answer changes or a timeout says stop. Playwright retries the question so you do not have to guess the delay.

Auto-waiting covers most gaps, not all of them. The gaps it cannot cover, and the honest way to wait through them, is Day 9.

A test is a story: go, act, expect. If you cannot read it aloud as one sentence per line, it is not finished.

Do this today

Type the test, run it, then run npx playwright test —ui and watch it step through the store. Then prove you can read the story by changing it: search for salad instead, and update both assertions to the Fresh Salad Bowl at 3,900 JMD. Run it green. Tomorrow your test gets the structure that lets it survive a redesign.