You can get pretty expressive with codegen

Mobile

We can repeat our steps but now for a mobile phone.

playwright codegen --device="iPhone 11" https://calmcode.io

Those interactions give us this script:

from playwright.sync_api import Playwright, sync_playwright, expect


def run(playwright: Playwright) -> None:
    browser = playwright.webkit.launch(headless=False)
    context = browser.new_context(**playwright.devices["iPhone 11"])
    page = context.new_page()
    page.goto("https://calmcode.io/")
    page.get_by_role("link", name="ngrok", exact=True).click()
    page.get_by_role("link", name="3").click()
    page.get_by_role("link", name="5").click()

    # ---------------------
    context.close()
    browser.close()


with sync_playwright() as playwright:
    run(playwright)

If you pay very close attention you'll notice that these scripts are slightly different. The mobile version only renders numbers in the video list and this is reflected in the code.

This is the run function from before. Note how the "name" in page.get_by_role is different.

def run(playwright: Playwright) -> None:
    browser = playwright.chromium.launch(headless=False)
    context = browser.new_context()
    page = context.new_page()
    page.goto("https://calmcode.io/")
    page.get_by_role("link", name="ngrok", exact=True).click()
    page.get_by_role("link", name="3. Installation").click()
    page.get_by_role("link", name="5. Configuration").click()
    page.locator("pre").filter(has_text="authtoken: <YOUR TOKEN> tunnels: streamlit: addr: 8501 proto: http auth: \"vincen").click()
    context.close()
    browser.close()

More Settings

There are many more settings for devices that you can use.

# Emulate screen size and color scheme.
playwright codegen --viewport-size=800,600 --color-scheme=dark <url>

You can read all about these settings in the docs.