Calmcode - playwright: local development

Let's now point to a local dev server.

1 2 3 4 5 6 7 8 9

Sofar we've been pointing to https://calmcode.io. This works, but usually you're not interested in testing a live endpoint. You'd rather test the local server so that you're able to prevent mistakes from being pushed live. To help with that, we can install another pytest plugin.

python -m pip install pytest-base-url

This plugin can tell pytest what the base-url of our tests should be, which playwright is able to pick up.

Running it

In the video, we're running a local dev server on localhost:5000.

That means that you're able to run the tests via:

pytest playwright/test_e2e.py --base-url http://localhost:5000

Just make sure that your unit tests have updated base urls.

# Before
page.goto("http://calmcode.io/")

# After
page.goto("/")

In our case, the new tests should look like this:

from playwright.sync_api import Page, expect


def test_path_to_datasette(page: Page) -> None:
    page.goto("/")
    page.get_by_role("button", name="More").click()
    page.locator("#dropdown-button-1").get_by_role("link", name="Datasets").click()
    page.get_by_role("row", name="bigmac logo bigmac.csv An economic indicator? csv 1331 71KB Detailed Info").get_by_role("link", name="Detailed Info").click()
    page.get_by_role("button", name="Explore bigmac.csv").click()
    expect(page).to_have_url("https://calmcode-datasette.fly.dev/calmcode/bigmac", timeout=1000)


def test_navigation_img_and_link(page: Page) -> None:
    page.goto("/")

    # Use img to navigate
    page.locator(".flex-grow").click()
    page.get_by_role("link", name="args kwargs logo").click()
    img_elem = page.get_by_role("img", name="Calmcode -")
    expect(img_elem).to_be_visible()

    # Use link to navigate
    page.goto("/")
    page.get_by_role("link", name="args kwargs", exact=True).click()
    img_elem = page.get_by_role("img", name="Calmcode -")
    expect(img_elem).to_be_visible()


def test_search(page: Page) -> None:
    page.goto("/")
    page.get_by_role("link", name="Search").click()
    page.get_by_placeholder("Search calmcode content").click()
    page.get_by_placeholder("Search calmcode content").fill("pur")
    page.get_by_placeholder("Search calmcode content").press("Enter")
    page.get_by_role("link", name="pur.py").click(timeout=1000)
    page.get_by_text("pur.py").click()