Calmcode - playwright: codegen

Generate Playwright Code

1 2 3 4 5 6 7 8 9

Let's consider the script below.

from playwright.sync_api import sync_playwright

with sync_playwright() as p:
    browser = p.chromium.launch(headless=False)
    page = browser.new_page()
    page.goto("https://calmcode.io")
    # Assert the title
    if page.title() == "Code. Simply. Clearly. Calmly.":
        print("Yep! It works :)")
    browser.close()

This script is almost a unit-test, but it only checks the page title. Let's make a more meangingful script by exploring the site ourselves and recording our behavior.

playwright codegen https://calmcode.io

You'll be presented with a browser that you can interact with together with a small window that contains code.

Everytime you interact with the site, you'll see the code update.

Here's what our interactions generated.

from playwright.sync_api import Playwright, sync_playwright, expect


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()


with sync_playwright() as playwright:
    run(playwright)