def test_specials_endpoint_returns_the_menu(page):
    response = page.request.get("/dojo/app/api/specials.json")

    assert response.ok
    assert response.status == 200

    body = response.json()
    assert body["restaurant"] == "IchiRamen"

    # The list of bowl names that came back from the API.
    names = [special["name"] for special in body["specials"]]
    assert "Miso Ramen" in names
    assert len(body["specials"]) == 4

If you have not met list comprehensions yet, the names = [...] line is optional sugar. This plain for form is exactly equivalent and uses only the tools you met in A8 - the ONE fix in this level is the URL, never the comprehension:

    names = []
    for special in body["specials"]:
        names.append(special["name"])

Why assert, not expect. expect is for on-page elements that may take time to appear (auto-waiting). An API response is data you already hold the moment the call returns; there is nothing to wait for, so plain assert (met in A7) is the right tool. UI state uses expect; a value in hand uses assert.

Real values used: the endpoint /dojo/app/api/specials.json, whose restaurant is "IchiRamen" and whose four specials names/prices mirror the SUT menu cards - Miso Ramen $13.50 (src/dojo/app/index.html:187), Tonkotsu $15.00 (:249), Shoyu $12.50 (:309), Shio $12.00 (:371) - the visible <span class="ry-ramen-price"> price elements. No page element is touched; this is a pure HTTP check.

def test_wrong_path_returns_404(page):
    # A path that does not exist on the static host.
    response = page.request.get("/dojo/app/api/specials-does-not-exist.json")

    assert response.ok is False
    assert response.status == 404

Real values used: the same endpoint folder /dojo/app/api/; the missing path /dojo/app/api/specials-does-not-exist.json returns 404 from the static host. Nothing on the page is touched.

When to mock vs hit the real endpoint. Hit the REAL endpoint (this rank) when you want truth: confirm the live API actually returns the right data and the right status codes, including 404. MOCK the endpoint (the next level, Jonin, with page.route) when you want CONTROL: force a slow response, a 500, or an empty list to test how the UI reacts, without depending on a live server. Real checks catch "the API changed"; mocks let you test states the real API will not produce on demand. A mature suite uses both - real API tests for the contract, mocked routes for UI edge cases.

from playwright.sync_api import expect


def test_flash_deal_shows_mocked_data(page):
    # Register the route BEFORE navigating, so the fetch is intercepted.
    page.route(
        "**/api/flash-deal",
        lambda route: route.fulfill(
            json={"item": "Miso Ramen", "price": 9.99, "delay": 0}
        ),
    )
    # ?async=on triggers initAsyncFeatures(), which fetch()es /api/flash-deal.
    page.goto("/dojo/app/index.html?async=on")

    banner = page.get_by_test_id("flash-deal")
    expect(banner).to_be_visible()
    expect(banner).to_contain_text("Miso Ramen")
    expect(banner).to_contain_text("$9.99")

The starter repo ships two files: test_flash_deal_mock_starter.py is the one you edit and run (the RED starter above), and test_flash_deal_mock.py is this canonical reference to compare against. They are the same test; only the glob differs.

If you have not met lambda yet, the one-line handler is just shorthand for "a tiny function that takes route and calls route.fulfill(...)". This named-function form is exactly equivalent and uses only A5 tools - the ONE fix in this level is the glob, never the lambda:

def fake_flash_deal(route):
    route.fulfill(json={"item": "Miso Ramen", "price": 9.99, "delay": 0})


def test_flash_deal_shows_mocked_data(page):
    page.route("**/api/flash-deal", fake_flash_deal)
    page.goto("/dojo/app/index.html?async=on")

    banner = page.get_by_test_id("flash-deal")
    expect(banner).to_be_visible()
    expect(banner).to_contain_text("Miso Ramen")
    expect(banner).to_contain_text("$9.99")

Why expect, not assert. The banner appears after the intercepted fetch resolves, so it is on-page state that takes a moment to render. expect(banner).to_contain_text(...) auto-waits for it. This is the opposite of SJ1, where the API response was a value in hand and plain assert was right. Mocking still drives the UI, so UI rules apply: expect for what is on the page.

Real locators / facts used: the banner <div data-testid="flash-deal"> at src/dojo/app/index.html:129; the banner text FLASH DEAL: Miso Ramen now $9.99 is built from the mocked item and price in showFlashDeal() (:1171-1184). The seam /api/flash-deal is fetched bare on the async path (:1236), which is why **/api/flash-deal matches and ?async=on is required. The seam is deliberately unbacked on the live site (it 404s), so your mock is what answers.

Proof it really intercepts - read only, not a task. A mock only means something if the outcome changes when it is present. This control test registers NO route and asserts the LIVE fallback instead - it is a teaching aid, not a starter you fix:

from playwright.sync_api import expect


def test_flash_deal_falls_back_without_mock(page):
    # No page.route. The seam 404s, the SUT falls back to Tonkotsu $10.00.
    page.goto("/dojo/app/index.html?async=on")

    banner = page.get_by_test_id("flash-deal")
    expect(banner).to_be_visible(timeout=5000)
    expect(banner).to_contain_text("Tonkotsu")
    expect(banner).to_contain_text("$10.00")
    expect(banner).not_to_contain_text("Miso Ramen")

Mocked: Miso Ramen now $9.99. Unmocked: Tonkotsu now $10.00. The only difference is the page.route call - that is the interception, proven. (The harder rep is /api/order-status, which needs a full add-to-cart, checkout, and place-order flow before the tracker even appears; flash-deal is the clean teaching seam.)