5. E2E

This time we focus on E2E (End-to-End), the highest-level testing in web development. We no longer touch the code, but its results in the browser.

The goal is to emulate the visitor's experience, generating a virtual mouse and keyboard that navigate through every corner. We check whether certain HTML tags are visible, whether pressing a button does what it should, whether the correct messages appear, whether the form is submitted. Everything is automated to have a final layer where, without looking inside, we check that all the pieces work in harmony. If some step isn't the expected one, a report is generated with what happened.

Many E2E frameworks were born in the JavaScript world, but from Python we have a first-class option: Playwright. It controls Chromium, Firefox and WebKit, integrates with pytest and is quick to get running.

{: .advice } Another popular tool is Selenium. We don't use it here because its installation is more cumbersome (it requires a native driver and extra steps) and it wasn't originally designed for such a convenient testing layer.

Install

We install Playwright and its pytest integration, and download the browsers:

pip install pytest-playwright
playwright install

Our first test

Let's set ourselves some simple goals:

1. Go to the official Emacs page.
2. Check that there is a title with the text "GNU Emacs".
3. Click on the Features link.
4. Count that there are 6 features.

We create a file test_emacs.py:

from playwright.sync_api import Page, expect


def test_emacs_features(page: Page):
    page.goto("https://www.gnu.org/software/emacs/")
    expect(page.locator("h1")).to_contain_text("GNU Emacs")
    page.click("a[href$='#features']")
    expect(page.locator(".features li")).to_have_count(6)

We run it:

pytest test_emacs.py

Playwright will open a browser (by default without a window, in headless mode), will do all the instructions at lightning speed and, if everything matches, you'll have a lovely green. If something fails, it will warn you with the detail of what it expected and what it found, and it can even save a screenshot and a video of the moment.

Other interesting checks

Find a text inside a tag

If we had:

<h1 class="title">Welcome</h1>

We could locate it as if it were a CSS selector:

expect(page.locator("h1.title")).to_contain_text("Welcome")

Count elements

expect(page.locator("li")).to_have_count(12)

Fill in a form and submit it

page.fill("#input-name", "Julio the Tester")
page.fill("#input-email", "testing@prueba.com")
page.fill("#input-message", "A long and detailed test message.")
page.check(".disclaimer input[type='checkbox']")
page.click("input[type='submit']")

Wait for a class to appear after clicking

page.click("button[type='button']")
expect(page.locator(".alert")).to_have_class("alert alert--success")

Playwright automatically waits for the element to be ready, so you'll rarely have to add fixed waits by hand.