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.

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.