API und Benutzeroberfläche

Kurz gesagt: Ein Komponententest ruft die Regel auf, sieht aber nicht, wie der Server sie benutzt. Ein API-Test schickt eine Anfrage wie ein echter Client und prüft den Statuscode und den Body: So fängt er einen Server, der die Regel kopiert und die Ablehnung vergessen hat. Ein UI-Test öffnet einen Browser und findet Buttons nach Rolle und Name, so wie ein Mensch sie sieht. Er ist langsam und brüchig, also gibt es wenige davon, und sie laufen nicht bei jeder Änderung.

Problem

Alles ist grün, und der leere Warenkorb geht durch

Die Szenarien bestehen. Die Komponententests bestehen. Am Freitag bringt der Shop eine neue Version heraus, und am Montag stehen in der Datenbank Bestellungen über 0,00 € mit bezahlten Lieferkosten von 4,90 €.

Die Regel in der Lieferklasse ist richtig. Aber der Programmierer auf dem Server hat „optimiert“ und die Gebühr direkt in dem Code berechnet, der die Anfragen beantwortet. Die Ablehnung hat er nicht kopiert. Kein Test ging durch den Server.

Die Idee

Der API-Test

Der Server des Shops beantwortet Anfragen. Die Kunden-App fragt GET /delivery?total=4999 und bekommt die Gebühr. Für einen leeren Warenkorb bekommt sie den Statuscode 400 und eine Erklärung:

Java

src/main/java/shop/ShopApi.java

private static void delivery(HttpExchange exchange) throws IOException {
    int total = Integer.parseInt(exchange.getRequestURI().getQuery().replace("total=", ""));
    try {
        send(exchange, 200, String.valueOf(Delivery.feeFor(total)));
    } catch (IllegalArgumentException e) {
        send(exchange, 400, e.getMessage());
    }
}

C#

Shop/ShopApi.cs

app.MapGet("/delivery", (int total) =>
{
    try
    {
        return Results.Text(Delivery.FeeFor(total).ToString());
    }
    catch (ArgumentException e)
    {
        return Results.Text(e.Message, statusCode: 400);
    }
});

Python

shop_api.py

def do_GET(self):
    total = int(parse_qs(urlparse(self.path).query)["total"][0])
    try:
        self.send(200, str(delivery_fee(total)))
    except ValueError as e:
        self.send(400, str(e))

JavaScript

shop-api.js

const server = createServer((req, res) => {
  const total = Number(new URL(req.url, "http://localhost").searchParams.get("total"));
  try {
    send(res, 200, String(deliveryFee(total)));
  } catch (e) {
    send(res, 400, e.message);
  }
});

Ein API-Test ist ein Client dieses Servers. Er startet den Server, schickt eine echte HTTP-Anfrage und prüft zwei Dinge: den Statuscode und den Body. Er sieht das Innere des Servers nicht, nur seinen Vertrag mit dem Client:

Java

src/test/java/shop/DeliveryApiTest.java

@Test
@DisplayName("leerer Warenkorb → 400")
void emptyCartIsRefused() throws Exception {
    HttpResponse<String> response = get(0);
    assertEquals(400, response.statusCode());
    assertEquals("Ein leerer Warenkorb kann nicht bestellt werden", response.body());
}

C#

Shop.Tests/DeliveryApiTest.cs

[Fact(DisplayName = "leerer Warenkorb → 400")]
public async Task EmptyCartIsRefused()
{
    var response = await client.GetAsync("/delivery?total=0");
    Assert.Equal(400, (int)response.StatusCode);
    Assert.Equal("Ein leerer Warenkorb kann nicht bestellt werden", await response.Content.ReadAsStringAsync());
}

Python

test_shop_api.py

def test_empty_cart_is_refused(base_url):
    status, text = get(base_url, 0)
    assert status == 400
    assert text == "Ein leerer Warenkorb kann nicht bestellt werden"

JavaScript

shop-api.test.js

test("leerer Warenkorb → 400", async () => {
  const response = await fetch(`${base}/delivery?total=0`);
  assert.equal(response.status, 400);
  assert.equal(await response.text(), "Ein leerer Warenkorb kann nicht bestellt werden");
});

Der Server startet im selben Prozess, auf einem freien Port, den das System wählt. So hängt der Test von nichts außerhalb seiner selbst ab und kann überall laufen.

Genauer, für Neugierige

Die Server hier sind die kleinsten, die jede Sprache eingebaut hat: com.sun.net.httpserver in Java, ASP.NET Core Minimal API in C#, http.server in Python und node:http in JavaScript. In einem echten Projekt ist der Server groß, aber der Test ist derselbe: eine Anfrage, ein Statuscode, ein Body. Java und C# haben auch Werkzeuge, die die Anwendung im Testmodus ohne echtes Netz starten (zum Beispiel WebApplicationFactory in ASP.NET Core). Python und JavaScript haben eigene (TestClient in FastAPI, supertest).

Die Idee

Der Lauf

Die ganze Datei mit API-Tests, gegen den Server, der die Regel aufruft. Alles besteht:

Java

src/test/java/shop/DeliveryApiTest.java

package shop;

import com.sun.net.httpserver.HttpServer;
import org.junit.jupiter.api.AfterAll;
import org.junit.jupiter.api.BeforeAll;
import org.junit.jupiter.api.DisplayName;
import org.junit.jupiter.api.Test;

import java.net.URI;
import java.net.http.HttpClient;
import java.net.http.HttpRequest;
import java.net.http.HttpResponse;

import static org.junit.jupiter.api.Assertions.assertEquals;

class DeliveryApiTest {
    private static HttpServer server;
    private static final HttpClient client = HttpClient.newHttpClient();

    @BeforeAll
    static void start() throws Exception {
        server = ShopApi.start(0);
    }

    @AfterAll
    static void stop() {
        server.stop(0);
    }

    private HttpResponse<String> get(int total) throws Exception {
        URI uri = URI.create("http://127.0.0.1:" + server.getAddress().getPort() + "/delivery?total=" + total);
        return client.send(HttpRequest.newBuilder(uri).build(), HttpResponse.BodyHandlers.ofString());
    }

    @Test
    @DisplayName("49,99 € → Lieferung 4,90 €")
    void paidDelivery() throws Exception {
        HttpResponse<String> response = get(4999);
        assertEquals(200, response.statusCode());
        assertEquals("490", response.body());
    }

    @Test
    @DisplayName("50,00 € → kostenlose Lieferung")
    void freeDelivery() throws Exception {
        HttpResponse<String> response = get(5000);
        assertEquals(200, response.statusCode());
        assertEquals("0", response.body());
    }

    @Test
    @DisplayName("leerer Warenkorb → 400")
    void emptyCartIsRefused() throws Exception {
        HttpResponse<String> response = get(0);
        assertEquals(400, response.statusCode());
        assertEquals("Ein leerer Warenkorb kann nicht bestellt werden", response.body());
    }
}

Ausgabe

OK     49,99 € → Lieferung 4,90 €
OK     50,00 € → kostenlose Lieferung
OK     leerer Warenkorb → 400
Tests: 3, bestanden: 3, fehlgeschlagen: 0

C#

Shop.Tests/DeliveryApiTest.cs

using Microsoft.AspNetCore.Builder;
using Xunit;

namespace Shop;

public class DeliveryApiTest : IAsyncLifetime
{
    private WebApplication app;
    private readonly HttpClient client = new();

    public async Task InitializeAsync()
    {
        app = ShopApi.Create();
        app.Urls.Add("http://127.0.0.1:0");
        await app.StartAsync();
        client.BaseAddress = new Uri(app.Urls.First());
    }

    public async Task DisposeAsync() => await app.StopAsync();

    [Fact(DisplayName = "49,99 € → Lieferung 4,90 €")]
    public async Task PaidDelivery()
    {
        var response = await client.GetAsync("/delivery?total=4999");
        Assert.Equal(200, (int)response.StatusCode);
        Assert.Equal("490", await response.Content.ReadAsStringAsync());
    }

    [Fact(DisplayName = "50,00 € → kostenlose Lieferung")]
    public async Task FreeDelivery()
    {
        var response = await client.GetAsync("/delivery?total=5000");
        Assert.Equal(200, (int)response.StatusCode);
        Assert.Equal("0", await response.Content.ReadAsStringAsync());
    }

    [Fact(DisplayName = "leerer Warenkorb → 400")]
    public async Task EmptyCartIsRefused()
    {
        var response = await client.GetAsync("/delivery?total=0");
        Assert.Equal(400, (int)response.StatusCode);
        Assert.Equal("Ein leerer Warenkorb kann nicht bestellt werden", await response.Content.ReadAsStringAsync());
    }
}

Ausgabe

OK     49,99 € → Lieferung 4,90 €
OK     50,00 € → kostenlose Lieferung
OK     leerer Warenkorb → 400
Tests: 3, bestanden: 3, fehlgeschlagen: 0

Python

test_shop_api.py

import urllib.request
from urllib.error import HTTPError

import pytest

from shop_api import start


@pytest.fixture(scope="module")
def base_url():
    server = start()
    yield f"http://127.0.0.1:{server.server_address[1]}"
    server.shutdown()


def get(base_url, total):
    try:
        with urllib.request.urlopen(f"{base_url}/delivery?total={total}") as response:
            return response.status, response.read().decode()
    except HTTPError as e:
        return e.code, e.read().decode()


def test_paid_delivery(base_url):
    status, text = get(base_url, 4999)
    assert status == 200
    assert text == "490"


def test_free_delivery(base_url):
    status, text = get(base_url, 5000)
    assert status == 200
    assert text == "0"


def test_empty_cart_is_refused(base_url):
    status, text = get(base_url, 0)
    assert status == 400
    assert text == "Ein leerer Warenkorb kann nicht bestellt werden"

Ausgabe

OK     test_empty_cart_is_refused
OK     test_free_delivery
OK     test_paid_delivery
Tests: 3, bestanden: 3, fehlgeschlagen: 0

JavaScript

shop-api.test.js

import { after, before, test } from "node:test";
import assert from "node:assert/strict";
import { start } from "./shop-api.js";

let server;
let base;

before(async () => {
  server = await start();
  base = `http://127.0.0.1:${server.address().port}`;
});

after(() => server.close());

test("49,99 € → Lieferung 4,90 €", async () => {
  const response = await fetch(`${base}/delivery?total=4999`);
  assert.equal(response.status, 200);
  assert.equal(await response.text(), "490");
});

test("50,00 € → kostenlose Lieferung", async () => {
  const response = await fetch(`${base}/delivery?total=5000`);
  assert.equal(response.status, 200);
  assert.equal(await response.text(), "0");
});

test("leerer Warenkorb → 400", async () => {
  const response = await fetch(`${base}/delivery?total=0`);
  assert.equal(response.status, 400);
  assert.equal(await response.text(), "Ein leerer Warenkorb kann nicht bestellt werden");
});

Ausgabe

OK     49,99 € → Lieferung 4,90 €
OK     50,00 € → kostenlose Lieferung
OK     leerer Warenkorb → 400
Tests: 3, bestanden: 3, fehlgeschlagen: 0

Jetzt der Server vom Anfang der Lektion: Die Regel ist kopiert, ohne die Ablehnung.

Java

src/main/java/shop/ShopApi.java

private static void delivery(HttpExchange exchange) throws IOException {
    int total = Integer.parseInt(exchange.getRequestURI().getQuery().replace("total=", ""));
    // Die Regel ist hier kopiert, statt Delivery aufzurufen.
    int fee = total >= Delivery.FREE_FROM ? 0 : Delivery.FEE;
    send(exchange, 200, String.valueOf(fee));
}

C#

Shop/ShopApi.cs

app.MapGet("/delivery", (int total) =>
{
    // Die Regel ist hier kopiert, statt Delivery aufzurufen.
    int fee = total >= Delivery.FreeFrom ? 0 : Delivery.Fee;
    return Results.Text(fee.ToString());
});

Python

shop_api.py

def do_GET(self):
    total = int(parse_qs(urlparse(self.path).query)["total"][0])
    # Die Regel ist hier kopiert, statt Delivery aufzurufen.
    fee = 0 if total >= FREE_FROM else FEE
    self.send(200, str(fee))

JavaScript

shop-api.js

const server = createServer((req, res) => {
  const total = Number(new URL(req.url, "http://localhost").searchParams.get("total"));
  // Die Regel ist hier kopiert, statt Delivery aufzurufen.
  const fee = total >= FREE_FROM ? 0 : FEE;
  send(res, 200, String(fee));
});

Dieselben Tests schlagen beim leeren Warenkorb fehl. Der Server sagt 200, und er sollte 400 sagen:

Java

src/test/java/shop/DeliveryApiTest.java

package shop;

import com.sun.net.httpserver.HttpServer;
import org.junit.jupiter.api.AfterAll;
import org.junit.jupiter.api.BeforeAll;
import org.junit.jupiter.api.DisplayName;
import org.junit.jupiter.api.Test;

import java.net.URI;
import java.net.http.HttpClient;
import java.net.http.HttpRequest;
import java.net.http.HttpResponse;

import static org.junit.jupiter.api.Assertions.assertEquals;

class DeliveryApiTest {
    private static HttpServer server;
    private static final HttpClient client = HttpClient.newHttpClient();

    @BeforeAll
    static void start() throws Exception {
        server = ShopApi.start(0);
    }

    @AfterAll
    static void stop() {
        server.stop(0);
    }

    private HttpResponse<String> get(int total) throws Exception {
        URI uri = URI.create("http://127.0.0.1:" + server.getAddress().getPort() + "/delivery?total=" + total);
        return client.send(HttpRequest.newBuilder(uri).build(), HttpResponse.BodyHandlers.ofString());
    }

    @Test
    @DisplayName("49,99 € → Lieferung 4,90 €")
    void paidDelivery() throws Exception {
        HttpResponse<String> response = get(4999);
        assertEquals(200, response.statusCode());
        assertEquals("490", response.body());
    }

    @Test
    @DisplayName("50,00 € → kostenlose Lieferung")
    void freeDelivery() throws Exception {
        HttpResponse<String> response = get(5000);
        assertEquals(200, response.statusCode());
        assertEquals("0", response.body());
    }

    @Test
    @DisplayName("leerer Warenkorb → 400")
    void emptyCartIsRefused() throws Exception {
        HttpResponse<String> response = get(0);
        assertEquals(400, response.statusCode());
        assertEquals("Ein leerer Warenkorb kann nicht bestellt werden", response.body());
    }
}

Ausgabe

FEHLER leerer Warenkorb → 400: expected: <400> but was: <200>
OK     49,99 € → Lieferung 4,90 €
OK     50,00 € → kostenlose Lieferung
Tests: 3, bestanden: 2, fehlgeschlagen: 1

C#

Shop.Tests/DeliveryApiTest.cs

using Microsoft.AspNetCore.Builder;
using Xunit;

namespace Shop;

public class DeliveryApiTest : IAsyncLifetime
{
    private WebApplication app;
    private readonly HttpClient client = new();

    public async Task InitializeAsync()
    {
        app = ShopApi.Create();
        app.Urls.Add("http://127.0.0.1:0");
        await app.StartAsync();
        client.BaseAddress = new Uri(app.Urls.First());
    }

    public async Task DisposeAsync() => await app.StopAsync();

    [Fact(DisplayName = "49,99 € → Lieferung 4,90 €")]
    public async Task PaidDelivery()
    {
        var response = await client.GetAsync("/delivery?total=4999");
        Assert.Equal(200, (int)response.StatusCode);
        Assert.Equal("490", await response.Content.ReadAsStringAsync());
    }

    [Fact(DisplayName = "50,00 € → kostenlose Lieferung")]
    public async Task FreeDelivery()
    {
        var response = await client.GetAsync("/delivery?total=5000");
        Assert.Equal(200, (int)response.StatusCode);
        Assert.Equal("0", await response.Content.ReadAsStringAsync());
    }

    [Fact(DisplayName = "leerer Warenkorb → 400")]
    public async Task EmptyCartIsRefused()
    {
        var response = await client.GetAsync("/delivery?total=0");
        Assert.Equal(400, (int)response.StatusCode);
        Assert.Equal("Ein leerer Warenkorb kann nicht bestellt werden", await response.Content.ReadAsStringAsync());
    }
}

Ausgabe

FEHLER leerer Warenkorb → 400: Assert.Equal() Failure: Values differ Expected: 400 Actual: 200
OK     49,99 € → Lieferung 4,90 €
OK     50,00 € → kostenlose Lieferung
Tests: 3, bestanden: 2, fehlgeschlagen: 1

Python

test_shop_api.py

import urllib.request
from urllib.error import HTTPError

import pytest

from shop_api import start


@pytest.fixture(scope="module")
def base_url():
    server = start()
    yield f"http://127.0.0.1:{server.server_address[1]}"
    server.shutdown()


def get(base_url, total):
    try:
        with urllib.request.urlopen(f"{base_url}/delivery?total={total}") as response:
            return response.status, response.read().decode()
    except HTTPError as e:
        return e.code, e.read().decode()


def test_paid_delivery(base_url):
    status, text = get(base_url, 4999)
    assert status == 200
    assert text == "490"


def test_free_delivery(base_url):
    status, text = get(base_url, 5000)
    assert status == 200
    assert text == "0"


def test_empty_cart_is_refused(base_url):
    status, text = get(base_url, 0)
    assert status == 400
    assert text == "Ein leerer Warenkorb kann nicht bestellt werden"

Ausgabe

FEHLER test_empty_cart_is_refused: assert 200 == 400
OK     test_free_delivery
OK     test_paid_delivery
Tests: 3, bestanden: 2, fehlgeschlagen: 1

JavaScript

shop-api.test.js

import { after, before, test } from "node:test";
import assert from "node:assert/strict";
import { start } from "./shop-api.js";

let server;
let base;

before(async () => {
  server = await start();
  base = `http://127.0.0.1:${server.address().port}`;
});

after(() => server.close());

test("49,99 € → Lieferung 4,90 €", async () => {
  const response = await fetch(`${base}/delivery?total=4999`);
  assert.equal(response.status, 200);
  assert.equal(await response.text(), "490");
});

test("50,00 € → kostenlose Lieferung", async () => {
  const response = await fetch(`${base}/delivery?total=5000`);
  assert.equal(response.status, 200);
  assert.equal(await response.text(), "0");
});

test("leerer Warenkorb → 400", async () => {
  const response = await fetch(`${base}/delivery?total=0`);
  assert.equal(response.status, 400);
  assert.equal(await response.text(), "Ein leerer Warenkorb kann nicht bestellt werden");
});

Ausgabe

FEHLER leerer Warenkorb → 400: 200 !== 400
OK     49,99 € → Lieferung 4,90 €
OK     50,00 € → kostenlose Lieferung
Tests: 3, bestanden: 2, fehlgeschlagen: 1

Die Komponententests aus der vorigen Lektion bestehen weiterhin, weil die Lieferklasse nicht angefasst wurde. Jede Stufe fängt ihre eigenen Fehler.

Probier es aus

Was sieht nur der API-Test?

1. Die Komponententests bestehen. Was kann außerdem kaputt sein, das nur der API-Test sieht?

Die LieferregelWie der Server die Regel benutzt: ob er sie aufruft, welchen Statuscode er liefert, was im Body stehtDie Farbe des Buttons

2. Ein leerer Warenkorb muss abgelehnt werden. Der API-Test prüft nur den Body „Ein leerer Warenkorb kann nicht bestellt werden“. Was übersieht er?

Den Statuscode: Ein Server, der 200 mit dem Fehlertext liefert, bestehtNichtsDie Antwortzeit

3. Warum startet der API-Test den Server auf einem freien Port (Port 0) und nicht auf 8080?

Weil 8080 verboten istEs macht keinen UnterschiedDamit er nicht mit einem anderen Prozess zusammenstößt und die Tests überall und gleichzeitig laufen können

Prüfen

Die Idee

Der UI-Test mit Playwright

Ein UI-Test öffnet einen echten Browser und tut, was der Kunde tut: öffnet den Warenkorb, drückt „Bestellen“, liest, was dort steht. Das Werkzeug hier ist Playwright. Es hat Versionen für alle vier Sprachen:

Java

src/test/java/shop/CheckoutUiTest.java

package shop;

import com.microsoft.playwright.Browser;
import com.microsoft.playwright.Page;
import com.microsoft.playwright.Playwright;
import com.microsoft.playwright.options.AriaRole;
import org.junit.jupiter.api.DisplayName;
import org.junit.jupiter.api.Tag;
import org.junit.jupiter.api.Test;

import static com.microsoft.playwright.assertions.PlaywrightAssertions.assertThat;

@Tag("ui")
class CheckoutUiTest {
    @Test
    @DisplayName("Bestellung genau an der Grenze")
    void freeDeliveryOnTheBoundary() {
        try (Playwright playwright = Playwright.create()) {
            Browser browser = playwright.chromium().launch();
            Page page = browser.newPage();
            // ein Warenkorb von 50,00 €
            page.navigate("http://localhost:4100/cart?test-cart=5000");
            page.getByRole(AriaRole.BUTTON, new Page.GetByRoleOptions().setName("Bestellen")).click();
            assertThat(page.getByRole(AriaRole.HEADING, new Page.GetByRoleOptions().setName("Bestellung angenommen"))).isVisible();
            assertThat(page.getByText("Lieferung: kostenlos")).isVisible();
        }
    }
}

C#

Shop.UiTests/CheckoutUiTest.cs

using Microsoft.Playwright;
using Xunit;

namespace Shop;

public class CheckoutUiTest
{
    [Fact(DisplayName = "Bestellung genau an der Grenze")]
    [Trait("Category", "UI")]
    public async Task FreeDeliveryOnTheBoundary()
    {
        using var playwright = await Playwright.CreateAsync();
        await using var browser = await playwright.Chromium.LaunchAsync();
        var page = await browser.NewPageAsync();
        // ein Warenkorb von 50,00 €
        await page.GotoAsync("http://localhost:4100/cart?test-cart=5000");
        await page.GetByRole(AriaRole.Button, new() { Name = "Bestellen" }).ClickAsync();
        await Assertions.Expect(page.GetByRole(AriaRole.Heading, new() { Name = "Bestellung angenommen" })).ToBeVisibleAsync();
        await Assertions.Expect(page.GetByText("Lieferung: kostenlos")).ToBeVisibleAsync();
    }
}

Python

test_checkout_ui.py

import pytest
from playwright.sync_api import Page, expect


@pytest.mark.ui
def test_free_delivery_on_the_boundary(page: Page):
    # ein Warenkorb von 50,00 €
    page.goto("http://localhost:4100/cart?test-cart=5000")
    page.get_by_role("button", name="Bestellen").click()
    expect(page.get_by_role("heading", name="Bestellung angenommen")).to_be_visible()
    expect(page.get_by_text("Lieferung: kostenlos")).to_be_visible()

JavaScript

tests/checkout.spec.js

import { test, expect } from "@playwright/test";

test("Bestellung genau an der Grenze", async ({ page }) => {
  // ein Warenkorb von 50,00 €
  await page.goto("http://localhost:4100/cart?test-cart=5000");
  await page.getByRole("button", { name: "Bestellen" }).click();
  await expect(page.getByRole("heading", { name: "Bestellung angenommen" })).toBeVisible();
  await expect(page.getByText("Lieferung: kostenlos")).toBeVisible();
});

Achte darauf, wie der Test den Button findet: nach Rolle und Name („ein Button mit dem Namen Bestellen“), nicht nach CSS (#app > div:nth-child(3) > button). Rolle und Name sind das, was der Kunde sieht und was ein Screenreader einem blinden Menschen sagt. Sie ändern sich, wenn sich die Bedeutung ändert. CSS ändert sich, wenn der Designer etwas verschiebt.

Die Prüfungen in Playwright warten von selbst: „ist die Überschrift sichtbar“ wartet bis zu ein paar Sekunden, bis sie erscheint. Deshalb gibt es im Test keine Pausen.

Genauer, für Neugierige

Der Testwarenkorb (?test-cart=5000) ist eine Absprache mit den Programmierern: In der Testumgebung kann der Shop mit einem fertigen Warenkorb starten, damit der UI-Test nicht Produkte suchen und hinzufügen muss. Das ist ein Teil des Tests, der nicht in Playwright lebt, sondern im Shop.

Playwright stammt von Microsoft und ist Open Source. Andere verbreitete Werkzeuge sind Selenium (das älteste) und Cypress (nur JavaScript). Das Finden nach Rolle wurde durch die Testing Library populär, und die Rollen sind die des Barrierefreiheitsstandards ARIA.

Die Idee

Warum UI-Tests kaputtgehen und warum es wenige gibt

Ein UI-Test ist dem Kunden am nächsten und am teuersten:

• langsam: ein Browser, ein Netz, eine Seite. Sekunden pro Test, nicht Millisekunden;
• braucht alles: einen laufenden Shop, eine Datenbank, Testdaten;
• brüchig: Er schlägt wegen eines verschobenen Buttons, eines langsamen Netzes, einer Animation fehl. Ein brüchiger Test schlägt ohne Fehler fehl, und die Leute hören auf, ihm zu trauen.

Deshalb gibt es wenige UI-Tests: nur die End-to-End-Pfade, die nicht kaputtgehen dürfen. Die Regeln werden weiter unten geprüft: die Beträge auf Komponentenebene, der Vertrag des Servers mit einem API-Test.

Dieser UI-Test läuft im Kurs nicht: Er braucht einen Browser und einen laufenden Shop, die der Prüfer des Kurses nicht hat. Aus demselben Grund sind in der CI-Konfiguration der nächsten Lektion die UI-Tests abgesondert und laufen einmal pro Nacht gegen die Testumgebung, nicht bei jeder Änderung. Die Szenarien, die Komponententests und die API-Tests in diesem Modul laufen wirklich.

Probier es aus

Welcher Locator übersteht es?

1. Welcher Locator übersteht es, wenn der Designer den Button „Bestellen“ in einen anderen Block verschiebt und seine Klassen ändert?

#app > div:nth-child(3) > button.btn-primaryDer Button mit dem Namen „Bestellen“ (Rolle und Name)Der dritte Button auf der Seite

2. Der Button ist <div class="btn" onclick="…">Bestellen</div>. Ein Test, der nach der Rolle „button“ sucht, findet ihn nicht. Was heißt das?

Dass der Test falsch ist und CSS brauchtDass ein Kunde mit Screenreader ihn auch nicht findet: Es ist ein Fehler der Barrierefreiheit, kein Problem des TestsDass Playwright div nicht unterstützt

3. Nach „Bestellen“ erscheint die Bestätigung nach einer halben Sekunde. Wie wartet der Test darauf?

Mit einer Prüfung, die von selbst bis zu einer festgelegten Zeit wartet, bis etwas erscheintMit einer Pause von 3 SekundenEr wartet nicht

Prüfen

Übung

Welche Stufe wofür

1. API, UI oder weiter unten. Der Shop sortiert seine Tests.

1. Was prüft man am besten mit einem API-Test?

Dass der Kunde die Meldung verstehtDass die Schwelle für zehn verschiedene Beträge 50 € istDass eine Anfrage für einen leeren Warenkorb 400 und eine Erklärung liefert

2. Der Shop hat 400 UI-Tests, sie laufen 2 Stunden, und jeden Tag schlagen fünf oder sechs ohne Fehler fehl. Was schlägst du vor?

Mehr UI-TestsSie nur einmal im Monat laufen lassenDie meisten Prüfungen auf die Ebene der API und der Komponenten verlagern; UI-Tests für die wenigen Pfade behalten, die nicht kaputtgehen dürfen

3. Welcher UI-Test ist am meisten wert?

Jeder Betrag von 1 bis 100 € über die OberflächeDer Kunde bestellt einen Warenkorb an der Grenze und sieht „Lieferung: kostenlos“Die Farbe jedes Buttons

Prüfen

Test

Teste dich

1. Was prüft ein API-Test?

Die Antwort des Servers auf eine echte Anfrage: den Statuscode und den BodyWie die Seite aussiehtDen Code der Regel von innen

2. Warum findet ein UI-Test Elemente nach Rolle und Name und nicht nach CSS?

CSS ist in Playwright verbotenRollen sind schnellerRolle und Name ändern sich, wenn sich die Bedeutung ändert; CSS ändert sich bei jeder Designänderung

3. Warum gibt es wenige UI-Tests?

Sie sind langsam, brauchen einen Browser und einen laufenden Shop und gehen bei kleinen Änderungen kaputtWeil sie keine Fehler findenWeil Browser Geld kosten

4. Der Server hat die Regel kopiert und die Ablehnung vergessen. Welcher Test fängt das?

Der API-Test für einen leeren WarenkorbDer KomponententestKeiner

Prüfen

Lektion von vorn beginnen

Verwandte Lektionen

• Baut auf: Usability und Barrierefreiheit · Warum und was automatisieren · Vom Szenario zu den Schritten · Komponententests
• Geht weiter in: Tests in der CI
• Aufgaben zum Thema: Automatisierung