One concept: Playwright pierces an OPEN shadow root for you - get_by_role, get_by_text, get_by_test_id, and CSS all see through it as if it were not there. One skill: run the preamble to make the picker visible, then reach its shadow radios with a normal role locator.

Some components hide their internals in a shadow root - a mini-DOM attached to a host element so its styles and markup do not leak into the page. IchiRamen's spice picker is one: the host is <spice-picker data-testid="spice-picker"> and its three radio buttons (Mild / Medium / Hot) live inside an OPEN shadow root. The good news: you do NOT need a special API. Role, text, test-id, and CSS locators all pierce an open shadow boundary automatically. Two limits to know: XPath does not pierce, and a closed shadow root is not reachable - but this picker is open and you use a role locator, so it just works.

The catch the old dojo got wrong: the picker sits inside form#checkoutForm, inside the cart panel - both display:none until you open them. So before any assertion you run a preamble: goto the app, add Miso Ramen, open the Shopping cart, then click Checkout. Only after Checkout is the picker visible and its shadow radios reachable. The clicks ARE the path to the element - never hand-wave them.

Two small notes on the reference below. to_have_attribute("aria-checked", "true") is new here: it asserts an element's attribute, which is how you read the picker's selection (the app sets aria-checked="true" on the chosen radio and clears the others). And role names match by substring, so name="Hot" matches the button text even though it carries a trailing chili emoji - use the plain word, not the emoji-laden name.

# preamble ran: add Miso -> Shopping cart -> Checkout
picker = page.get_by_test_id("spice-picker")
picker.get_by_role("radio", name="Hot").click()  # works: open root is pierced

page.goto("/dojo/app/index.html")
picker = page.get_by_test_id("spice-picker")
picker.get_by_role("radio", name="Hot").click()  # times out: picker is hidden

from playwright.sync_api import expect


def open_checkout_form(page):
    # Real preamble: add a bowl, open the cart, click Checkout.
    # Only after this is the checkout form (and the spice picker) visible.
    page.goto("/dojo/app/index.html")
    page.get_by_role("button", name="Add Miso Ramen to cart").click()
    page.get_by_role("button", name="Shopping cart").click()
    # TODO: one line is missing. The spice picker only appears after Checkout:
    #       page.get_by_role("button", name="Checkout").click()


def test_spice_picker_inside_shadow_dom(page):
    open_checkout_form(page)

    picker = page.get_by_test_id("spice-picker")
    expect(picker).to_be_visible(timeout=3000)  # picker stays hidden -> times out

from playwright.sync_api import expect


def open_checkout_form(page):
    # Real preamble: add a bowl, open the cart, click Checkout.
    # Only after this is the checkout form (and the spice picker) visible.
    page.goto("/dojo/app/index.html")
    page.get_by_role("button", name="Add Miso Ramen to cart").click()
    page.get_by_role("button", name="Shopping cart").click()
    page.get_by_role("button", name="Checkout").click()


def test_spice_picker_inside_shadow_dom(page):
    open_checkout_form(page)

    picker = page.get_by_test_id("spice-picker")
    expect(picker).to_be_visible()

    # "Medium" ships pre-selected (aria-checked="true").
    medium = picker.get_by_role("radio", name="Medium")
    expect(medium).to_have_attribute("aria-checked", "true")

    # Click "Hot" inside the open shadow root and assert the selection moved.
    hot = picker.get_by_role("radio", name="Hot")
    hot.click()
    expect(hot).to_have_attribute("aria-checked", "true")
    expect(medium).to_have_attribute("aria-checked", "false")

One concept: an iframe is a whole separate document embedded in the page; your normal page.get_by_* locators search the MAIN document only and cannot see inside it. One skill: page.frame_locator("#confirmFrame") points at the frame, then you chain a normal locator to reach inside.

Your normal page locators search the main document only - they cannot see into a frame. To reach in, you first point at the frame, then locate inside it: page.frame_locator("#confirmFrame") returns a frame locator, and page.frame_locator("#confirmFrame").get_by_role("button", name="Continue") reaches the button in the iframe. Everything you know - get_by_role, expect, .click() - works once you are pointed at the frame. IchiRamen shows a confirmation iframe after you place an order: <iframe id="confirmFrame">, hidden until checkout submit fills its srcdoc. Inside is a heading <h1>Order Confirmed!</h1> and a <button> Continue that posts a message to the parent, which then hides the iframe.

The iframe only appears after a full checkout, so the preamble is longer here: goto, add Miso Ramen, open Shopping cart, click Checkout, then fill the three required fields - Full name, Delivery address, Phone number - and click Place order. That submit injects and shows the iframe. One field is fussy: use get_by_label("Delivery address", exact=True). Without exact=True it also matches a "Delivery addresses" listbox on the page and Playwright raises a strict-mode violation - so the exact=True is load-bearing.

# order placed
frame = page.frame_locator("#confirmFrame")
expect(frame.get_by_role("heading", name="Order Confirmed!")).to_be_visible()
frame.get_by_role("button", name="Continue").click()  # acts INSIDE the iframe

# order placed
heading = page.get_by_role("heading", name="Order Confirmed!")  # main frame only
expect(heading).to_be_visible()  # times out: heading lives in the iframe

from playwright.sync_api import expect


def place_order(page):
    page.goto("/dojo/app/index.html")
    page.get_by_role("button", name="Add Miso Ramen to cart").click()
    page.get_by_role("button", name="Shopping cart").click()
    page.get_by_role("button", name="Checkout").click()
    page.get_by_label("Full name").fill("Naruto Uzumaki")
    page.get_by_label("Delivery address", exact=True).fill("Konoha Village, Gate 4")
    page.get_by_label("Phone number").fill("0700000000")
    page.get_by_role("button", name="Place order").click()


def test_confirm_iframe_continue(page):
    place_order(page)

    # TODO: the heading is INSIDE the #confirmFrame iframe. A plain page locator
    #       cannot see in. Wrap it in the frame:
    #       page.frame_locator("#confirmFrame").get_by_role("heading", name="Order Confirmed!")
    heading = page.get_by_role("heading", name="Order Confirmed!")  # wrong: main frame
    expect(heading).to_be_visible(timeout=3000)

from playwright.sync_api import expect


def place_order(page):
    page.goto("/dojo/app/index.html")
    page.get_by_role("button", name="Add Miso Ramen to cart").click()
    page.get_by_role("button", name="Shopping cart").click()
    page.get_by_role("button", name="Checkout").click()
    page.get_by_label("Full name").fill("Naruto Uzumaki")
    page.get_by_label("Delivery address", exact=True).fill("Konoha Village, Gate 4")
    page.get_by_label("Phone number").fill("0700000000")
    page.get_by_role("button", name="Place order").click()


def test_confirm_iframe_continue(page):
    place_order(page)

    # The confirmation lives INSIDE the iframe. frame_locator reaches in.
    frame = page.frame_locator("#confirmFrame")
    expect(frame.get_by_role("heading", name="Order Confirmed!")).to_be_visible()

    # Continue posts 'confirmContinue' to the parent, which hides the iframe.
    frame.get_by_role("button", name="Continue").click()
    expect(page.locator("#confirmFrame")).to_be_hidden()

One concept: source.drag_to(target) does the whole gesture - hover the source, press the mouse, move to the target, release - which the browser turns into native drag events. One skill: drag the first cart row onto the second and assert the hidden order input flipped.

The cart rows are HTML5-draggable (draggable="true"). Dragging one row onto another swaps them in the cart array and re-renders. A hidden input <input id="cartOrder" data-testid="cart-order"> always holds the current order as comma-joined item ids, updated on every render - that hidden input is your assertion target: read its value with to_have_value(...) and you know the order changed. The skill is source.drag_to(target): for an element with draggable="true" the browser turns that mouse sequence into native drag events, firing the app's dragstart / dragover / drop handlers. No extra setup. (to_have_value and hover are both new here; they are self-explanatory siblings of the assertions and actions you already use.)

Honest note on reliability. HTML5 native drag-and-drop is famously finicky with automation, so this was not assumed. Against THIS SUT on playwright 1.60.0, source.drag_to(target) reordered the cart on 5 of 5 consecutive runs, and the manual mouse fallback (below) worked on 3 of 3. So for IchiRamen drag_to is the idiomatic primary and the manual sequence is a stable fallback - no overclaim beyond what ran.

A target-precision gotcha worth teaching. Each cart row has remove / quantity buttons in its CENTER, and drag_to drops at the target's center. Dropping onto the SECOND row's body correctly fires that row's drop handler. But dropping a row onto its OWN center - for example first.drag_to(first) - lands the mouse-up on that row's remove button and DELETES the item instead of reordering (#cartOrder becomes just tonkotsu). Lesson: drag onto a DIFFERENT row, and assert the new order, not just "something changed."

first = page.get_by_test_id("cart-item-0")
second = page.get_by_test_id("cart-item-1")
first.drag_to(second)
expect(page.get_by_test_id("cart-order")).to_have_value("tonkotsu,miso-ramen")

# no drag; clicking the center can even hit a child button
page.get_by_test_id("cart-item-0").click()  # may remove the item

from playwright.sync_api import expect


def two_item_cart(page):
    page.goto("/dojo/app/index.html")
    page.get_by_role("button", name="Add Miso Ramen to cart").click()
    page.get_by_role("button", name="Add Tonkotsu to cart").click()
    page.get_by_role("button", name="Shopping cart").click()


def test_drag_to_reorder(page):
    two_item_cart(page)

    order = page.get_by_test_id("cart-order")
    first = page.get_by_test_id("cart-item-0")
    second = page.get_by_test_id("cart-item-1")

    # TODO: one line is missing. Drag the first row onto the second:
    #       first.drag_to(second)

    expect(order).to_have_value("tonkotsu,miso-ramen", timeout=3000)

from playwright.sync_api import expect


def two_item_cart(page):
    page.goto("/dojo/app/index.html")
    page.get_by_role("button", name="Add Miso Ramen to cart").click()
    page.get_by_role("button", name="Add Tonkotsu to cart").click()
    page.get_by_role("button", name="Shopping cart").click()


def test_drag_to_reorder(page):
    two_item_cart(page)
    order = page.get_by_test_id("cart-order")
    expect(order).to_have_value("miso-ramen,tonkotsu")  # starting order

    first = page.get_by_test_id("cart-item-0")
    second = page.get_by_test_id("cart-item-1")
    first.drag_to(second)

    expect(order).to_have_value("tonkotsu,miso-ramen")  # reordered

first.hover()
page.mouse.down()
second.hover()
second.hover()      # the second move helps the browser commit the drag
page.mouse.up()