Calmcode - playwright: debugging

Let's show how you might easily debug Playwright.

1 2 3 4 5 6 7 8 9

This is the same test file as before, but it has a little "bug" in it.

from playwright.sync_api import Page, expect

def test_path_to_datasette(page: Page) -> None:
    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("", timeout=1000)

def test_navigation_img_and_link(page: Page) -> None:

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

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

Spotting it from the file is tricky, but when you run pytest you'll notice that the test_path_to_datasette is breaking.

You can zoom in on this test via pytest:


This will only run that one test. But we can also go a step further and run the test in headed mode. This way, the browser will start up and we'll be able to see what is happening.

pytest --headed

This might be too fast for comfort though, so let's slow down each step with the --slowmo flag.

pytest --headed --slowmo 1500

Extra settings

You can add a bunch of these flags that might be very useful while debugging. To see a complete list, be sure to check the documentation.