One concept: running a test file and reading pass/fail. One skill: the page fixture + page.goto + a first expect(page) check.

This level arms your toolkit once. You cloned the repo, installed Playwright and pytest, and downloaded a browser. Now prove it works. A test is a function whose name starts with test_. Ask for the browser by putting page in the parentheses. Use page.goto(...) to open IchiRamen, then expect(page).to_have_title(...) to check the tab title. Run it with pytest. Green means your hands and eyes reach the live app. You will not repeat this setup again; every later level just adds one new idea on top of this same shape.

from playwright.sync_api import Page, expect

def test_app_loads(page: Page):
    # TODO: open IchiRamen. Use page.goto with the app's relative path.
    expect(page).to_have_title(
        "Playwright Practice App | IchiRamen - Automate a Real Web App"
    )

from playwright.sync_api import Page, expect

def test_app_loads(page: Page):
    page.goto("/dojo/app/index.html")
    expect(page).to_have_title(
        "Playwright Practice App | IchiRamen - Automate a Real Web App"
    )

One concept: a locator is a description you store in a variable. One skill: a locator + expect(locator).to_be_visible() (auto-waiting).

A locator is how you point at one element. page.get_by_role("heading", name="...") returns a locator; you can store it in a variable. A locator does not click or read yet; it just describes "the element that matches this." To check it, use a web-first assertion: expect(heading).to_be_visible(). This is the assertion you will reach for most. It auto-waits: if the page is still settling, the check retries for you until the element shows or it times out. No sleeps. Here you confirm the menu heading "Tonight's Bowls" is on screen after the page loads.

from playwright.sync_api import Page, expect

def test_menu_heading_visible(page: Page):
    page.goto("/dojo/app/index.html")
    # TODO: fix the name below so `heading` describes the real heading
    #       that reads "Tonight's Bowls". "REPLACE ME" matches nothing.
    heading = page.get_by_role("heading", name="REPLACE ME")
    expect(heading).to_be_visible()

from playwright.sync_api import Page, expect

def test_menu_heading_visible(page: Page):
    page.goto("/dojo/app/index.html")
    heading = page.get_by_role("heading", name="Tonight's Bowls")
    expect(heading).to_be_visible()

One concept: passing a string as an argument - the accessible name that identifies the button. One skill: .click(), an action on a locator, then assert the resulting state.

So far you only looked. Now act. A locator can do things: .click() clicks it. The string you pass to get_by_role, like "Shopping cart", is the element's accessible name - the label a screen reader would read. Click the cart button, then check the result: the cart panel opens and shows "Your cart is empty." A good test always pairs an action with a check of what that action caused. Click opens the cart; the assertion proves it really opened empty. Action without a check proves nothing, so we always finish with expect.

from playwright.sync_api import Page, expect

def test_cart_starts_empty(page: Page):
    page.goto("/dojo/app/index.html")
    # TODO: click the cart button (its accessible name is "Shopping cart")
    expect(page.get_by_text("Your cart is empty.")).to_be_visible()

from playwright.sync_api import Page, expect

def test_cart_starts_empty(page: Page):
    page.goto("/dojo/app/index.html")
    page.get_by_role("button", name="Shopping cart").click()
    expect(page.get_by_text("Your cart is empty.")).to_be_visible()

One concept: nothing new - the Python here (a function with the page parameter, method calls, string arguments) is all from A1-A3. One skill: .fill() to type into an input, and .to_be_hidden(), the negative of to_be_visible().

Time to use what you have on something new. .fill("miso") types into an input the same way .click() clicks - a locator, then an action. IchiRamen's search filters the menu as you type. So fill the search box with "miso", then check two things: Miso Ramen is visible, and Tonkotsu is now hidden. to_be_hidden() is just the opposite of to_be_visible() - it asserts an element is gone or not shown. Checking both a positive and a negative makes the test honest: the right bowl stayed and the wrong one left. You now have the full beginner loop: open, point, act, check.

from playwright.sync_api import Page, expect

def test_search_filters_to_miso(page: Page):
    page.goto("/dojo/app/index.html")
    # TODO: type "miso" into the search box so only Miso Ramen remains
    expect(page.get_by_role("heading", name="Miso Ramen")).to_be_visible()
    expect(page.get_by_role("heading", name="Tonkotsu")).to_be_hidden()

from playwright.sync_api import Page, expect

def test_search_filters_to_miso(page: Page):
    page.goto("/dojo/app/index.html")
    page.get_by_role("searchbox", name="Search menu").fill("miso")
    expect(page.get_by_role("heading", name="Miso Ramen")).to_be_visible()
    expect(page.get_by_role("heading", name="Tonkotsu")).to_be_hidden()

One concept: writing your own function with def, and building a string with an f-string. One skill: reading an element's text with the web-first assertion expect(locator).to_have_text(...).

So far every test was one flat function. Now write a small helper of your own with def. A helper is just a named block you can call, so you do not repeat the same locator twice. You also need to build text. An f-string starts with f and lets you drop values inside {}: f"${13.50:.2f}" becomes "$13.50". The :.2f keeps two decimals, which is how prices show. Then check the real card text with a new web-first assertion: expect(price).to_have_text("$13.50"). Like to_be_visible, it auto-waits. You confirm Miso Ramen's price reads exactly what you built.

from playwright.sync_api import Page, expect


def price_locator(page, dish_name):
    card = page.get_by_role("listitem").filter(has_text=dish_name)
    return card.locator(".ry-ramen-price")


def test_miso_price_shown(page: Page):
    page.goto("/dojo/app/index.html")
    dish = "Miso Ramen"
    # TODO: build the expected price string with an f-string.
    #       Miso Ramen costs 13.50 dollars. The card shows it as "$13.50".
    #       Replace the empty string below using an f-string.
    expected = ""
    expect(price_locator(page, dish)).to_have_text(expected)

from playwright.sync_api import Page, expect


def price_locator(page, dish_name):
    card = page.get_by_role("listitem").filter(has_text=dish_name)
    return card.locator(".ry-ramen-price")


def test_miso_price_shown(page: Page):
    page.goto("/dojo/app/index.html")
    dish = "Miso Ramen"
    expected = f"${13.50:.2f}"
    expect(price_locator(page, dish)).to_have_text(expected)

One concept: if/else - run one block when a condition is true, another when it is false. One skill: a multi-step login flow (click, fill, fill, submit), then a conditional check on the member bar.

Real apps behave differently depending on input. if/else lets a test say "if this is true, check one thing; otherwise check another." Here you log in as TWO different people and let one if/else decide the right check for each. The member bar only appears for a valid member. So: if the username is the real member "naruto", assert the bar is visible; otherwise assert it stays hidden. The login flow (click "Log in", fill username and password, click "Sign in") is wrapped in a small helper check_member_bar(...) so you do not repeat it - it uses .click() and .fill() from A1-A4. The valid credentials are username naruto, password ramen. Your one job is to write the if condition that decides which assertion runs. Because you call the helper once with a wrong username and once with the real one, BOTH branches actually run.

New locators in this level (first use): two new locators appear in this test, get_by_label("Username") and get_by_test_id("member-bar"). They are siblings of the get_by_role you already use, the same get_by_* family and shape: get_by_label finds a field by its form label, and get_by_test_id finds an element by its data-testid. You do not author them here (they ship in the starter); just recognize them as the label and test-id members of the same locator family.

from playwright.sync_api import Page, expect


def check_member_bar(page, username, password):
    page.goto("/dojo/app/index.html")
    page.get_by_role("button", name="Log in").click()
    page.get_by_label("Username").fill(username)
    page.get_by_label("Password").fill(password)
    page.get_by_role("button", name="Sign in").click()
    # TODO: a real member (username "naruto") should see the member bar;
    #       anyone else should not. Fill in the condition for the if.
    if False:
        expect(page.get_by_test_id("member-bar")).to_be_visible()
    else:
        expect(page.get_by_test_id("member-bar")).to_be_hidden()


def test_member_bar_reflects_who_logged_in(page: Page):
    # wrong user first (no session cookie set yet), then the real member
    check_member_bar(page, "sasuke", "ramen")   # else-branch: bar hidden
    check_member_bar(page, "naruto", "ramen")   # if-branch: bar visible

from playwright.sync_api import Page, expect


def check_member_bar(page, username, password):
    page.goto("/dojo/app/index.html")
    page.get_by_role("button", name="Log in").click()
    page.get_by_label("Username").fill(username)
    page.get_by_label("Password").fill(password)
    page.get_by_role("button", name="Sign in").click()
    if username == "naruto":
        expect(page.get_by_test_id("member-bar")).to_be_visible()
    else:
        expect(page.get_by_test_id("member-bar")).to_be_hidden()


def test_member_bar_reflects_who_logged_in(page: Page):
    # wrong user first (no session cookie set yet), then the real member
    check_member_bar(page, "sasuke", "ramen")   # else-branch: bar hidden
    check_member_bar(page, "naruto", "ramen")   # if-branch: bar visible

One concept: counting - .count() returns a number, and you check it with plain Python assert. One skill: .count() on a locator that matches several elements.

Some locators match more than one element. page.get_by_role("button", name="Customize") matches every "Customize" button, one per menu bowl. .count() returns how many: a plain number. To check a number, use Python's own keyword: assert count == 4. This is different from expect. Use expect(locator)... for anything ON the page (visible, text, hidden) because it auto-waits. Use plain assert for plain Python values you already hold, like a number from .count(). assert does NOT auto-wait, so only use it on a value, never directly on UI state. Confirm there are 4 customizable bowls.

Why name="Customize" matches all four: name= does a SUBSTRING match against the element's ACCESSIBLE name, not an exact match against its visible text. Each Customize button shows the text "Customize" but carries aria-label="Customize Miso Ramen" (and one per bowl), and an aria-label OVERRIDES the visible text, so the accessible name is the full label like "Customize Miso Ramen". The substring "Customize" is inside all four, so all four match. If you wrote name="Customize", exact=True you would get 0, because no button's accessible name is exactly "Customize". Takeaway: name= is a substring match on the accessible name, which here is the aria-label.

from playwright.sync_api import Page


def test_four_customizable_bowls(page: Page):
    page.goto("/dojo/app/index.html")
    customize_buttons = page.get_by_role("button", name="Customize")
    # TODO: read how many elements this locator matches.
    #       Use .count() on the locator.
    count = 0
    assert count == 4

from playwright.sync_api import Page


def test_four_customizable_bowls(page: Page):
    page.goto("/dojo/app/index.html")
    customize_buttons = page.get_by_role("button", name="Customize")
    count = customize_buttons.count()
    assert count == 4

One concept: a list of strings and a for loop that visits each one. One skill: none brand new - it reuses .click() (A3), f-strings (A5), and to_have_text (A5) inside a loop.

A list holds several values: ["Miso Ramen", "Tonkotsu", "Shoyu"]. A for loop runs the same steps for each one: for bowl in bowls: gives you each name in turn. Inside the loop, click that bowl's add button, built with an f-string: f"Add {bowl} to cart". After the loop has added three bowls, check the cart counter shows "3" with to_have_text. This is the whole beginner loop applied at scale: one list, one loop, three actions, one final check. No new tool, just the ones you have used combined. That is what most real tests look like.

from playwright.sync_api import Page, expect


def test_adding_three_bowls_updates_count(page: Page):
    page.goto("/dojo/app/index.html")
    bowls = ["Miso Ramen", "Tonkotsu", "Shoyu"]
    # TODO: loop over each bowl name in the list and click its
    #       "Add <bowl> to cart" button. Use a for loop.
    expect(page.get_by_test_id("cart-count")).to_have_text("3")

from playwright.sync_api import Page, expect


def test_adding_three_bowls_updates_count(page: Page):
    page.goto("/dojo/app/index.html")
    bowls = ["Miso Ramen", "Tonkotsu", "Shoyu"]
    for bowl in bowls:
        page.get_by_role("button", name=f"Add {bowl} to cart").click()
    expect(page.get_by_test_id("cart-count")).to_have_text("3")