Freigeben über

Testen des selbstgehosteten Entwicklerportals

GILT FÜR: Developer | Basic | Basic v2 | Standard | Standard v2 | Premium | Premium v2

In diesem Artikel erfahren Sie, wie Sie Komponententests und End-to-End-Tests für Ihr selbstgehostetes Portal einrichten.

Erstellen von Komponententests

Ein Komponententest ist ein Ansatz zum Überprüfen kleiner Funktionseinheiten. Ein Komponententest arbeitet isoliert von anderen Teilen der Anwendung.

Beispielszenario

In diesem Szenario testen Sie eine Kennworteingabesteuerung. Es werden nur Kennwörter akzeptiert, die mindestens Folgendes enthalten:

  • Einen Buchstaben
  • Eine Zahl
  • Ein Sonderzeichen

Der Test zur Überprüfung dieser Anforderungen sieht wie folgt aus:

const passwordInput = new PasswordInput();

passwordInput.value = "";
expect(passwordInput.isValid).to.equal(false);

passwordInput.value = "password";
expect(passwordInput.isValid).to.equal(false);

passwordInput.value = "p@ssw0rd";
expect(passwordInput.isValid).to.equal(true);

Projektstruktur

Es ist üblich, dass ein Komponententest neben der Komponente beibehalten wird, die überprüft wird.

component.ts
component.spec.ts

Simulierte HTTP-Anforderungen

In manchen Fällen wird erwartet, dass eine Komponente HTTP-Anforderungen ausführt. Die Komponente sollte ordnungsgemäß auf verschiedene Arten von Antworten reagieren. Verwenden Sie MockHttpClient, um bestimmte HTTP-Antworten zu simulieren. Die Schnittstelle HttpClient wird implementiert, die von vielen anderen Komponenten des Projekts verwendet wird:

const httpClient = new MockHttpClient();

httpClient.mock()
    .get("/users/jane")
    .reply(200, {
        firstName: "Jane",
        lastName: "Doe"
    });

Erstellen von umfassenden Tests

Ein End-to-End-Test führt ein bestimmtes Benutzerszenario aus, das genaue Schritte ausführt, die der Benutzer ausführen soll. In einer Webanwendung wie dem Azure API Management-Entwicklerportal scrollt der Benutzer durch den Inhalt und wählt Optionen aus, um bestimmte Ergebnisse zu erzielen.

Zum Replizieren der Benutzernavigation können Sie Hilfsbibliotheken für die Browserbearbeitung wie Puppeteer verwenden. Sie können Benutzeraktionen simulieren und angenommene Szenarien automatisieren. Puppeteer erstellt außerdem in jeder Phase des Tests automatisch Screenshots von Seiten oder Komponenten. Vergleichen Sie sie später mit vorherigen Ergebnissen, um Abweichungen und potenzielle Regressionen zu erkennen.

Beispielszenario

In diesem Szenario müssen Sie einen Benutzeranmeldeflow überprüfen. Für dieses Szenario sind die folgenden Schritte erforderlich:

  1. Öffnen Sie den Browser, und navigieren Sie zur Anmeldeseite.
  2. Geben Sie die E-Mail-Adresse ein.
  3. Geben Sie das Kennwort ein.
  4. Wählen Sie Anmelden aus.
  5. Vergewissern Sie sich, dass der Benutzer zur Homepage umgeleitet wurde.
  6. Stellen Sie sicher, dass die Seite das Menüelement Profil enthält. Dies ist einer der möglichen Indikatoren, dass Sie sich erfolgreich angemeldet haben.

Erstellen Sie mit genau den gleichen Schritten ein Skript, um den Test automatisch auszuführen:

// 1. Open browser and navigate to the sign-in page.
const page = await browser.newPage();
await page.goto("https://contoso.com/signin");

// 2. Enter email.
await this.page.type("#email", "john.doe@contoso.com");

// 3. Enter password.
await this.page.type("#password", "p@s$w0rd");

// 4. Click Sign-in.
await this.page.click("#signin");

// 5. Verify that user got redirected to Home page.
expect(page.url()).to.equal("https://contoso.com");

// 6. Verify that the page includes the Profile menu item.
const profileMenuItem = await this.page.$("#profile");
expect(profileMenuItem).not.equals(null);

Hinweis

Zeichenfolgen wie #email, #passwordund #signin sind CSS-ähnliche Selektoren, die HTML-Elemente auf der Seite identifizieren. Weitere Informationen finden Sie unter Selectors Level 3 W3C-Spezifikation.

Zuordnungen von Benutzeroberflächenkomponenten

Benutzerflows durchlaufen häufig die gleichen Seiten oder Komponenten. Ein gutes Beispiel ist das Hauptmenü der Website, das auf jeder Seite vorhanden ist.

Erstellen Sie eine Zuordnung der Benutzeroberflächenkomponenten, um zu vermeiden, dass die gleichen Selektoren für jeden Test konfiguriert und aktualisiert werden. Beispielsweise könnten Sie die Schritte 2 bis 6 im vorherigen Beispiel durch nur zwei Zeilen ersetzen:

const signInWidget = new SigninBasicWidget(page);
await signInWidget.signInWithBasic({ email: "...", password: "..." });

Testkonfiguration

Für bestimmte Szenarien sind bereits erstellte Daten oder Konfigurationen erforderlich. Beispielsweise müssen Sie die Benutzeranmeldung mit Konten für soziale Medien automatisieren. Diese Daten schnell oder einfach zu erstellen ist schwierig.

Zu diesem Zweck können Sie Ihrem Testszenario eine spezielle Konfigurationsdatei hinzufügen. Die Testskripts können die erforderlichen Daten aus der Datei auswählen. Je nach Build- und Testpipeline können die Tests die Geheimnisse aus einem benannten sicheren Speicher pullen.

Im Folgenden finden Sie ein Beispiel für eine Datei vom Typ validate.config.json, die im src-Ordner Ihres Projekts gespeichert wird:

{
    "environment": "validation",
    "urls": {
        "home": "https://contoso.com",
        "signin": "https://contoso.com/signin",
        "signup": "https://contoso.com/signup/"
    },
    "signin": {
        "firstName": "John",
        "lastName": "Doe",
        "credentials": {
            "basic": {
                "email": "johndoe@contoso.com",
                "password": "< password >"
            },
            "aadB2C": {
                "email": "johndoe@contoso.com",
                "password": "< password >"
            }
        }
    },
    "signup": {
        "firstName": "John",
        "lastName": "Doe",
        "credentials": {
            "basic": {
                "email": "johndoe@contoso.com",
                "password": "< password >"
            }
        }
    }
}

Monitorlose Tests im Vergleich zu normalen Tests

Moderne Browser, z. B. Chrome oder Microsoft Edge, ermöglichen es Ihnen, die Automatisierung sowohl im kopflosen Modus als auch im normalen Modus auszuführen. Der Browser wird im monitorlosen Modus ohne grafische Benutzeroberfläche ausgeführt. Er führt weiterhin die gleichen Seiten- und DOM-Bearbeitungen (Dokumentobjektmodell) durch. Die Browserbenutzeroberfläche wird in der Regel nicht in Bereitstellungspipelines benötigt. In diesem Fall ist das Ausführen von Tests im monitorlosen Modus eine gute Option.

Beim Entwickeln eines Testskripts ist es hilfreich zu sehen, was genau im Browser passiert. Dies ist ein guter Zeitpunkt, um den normalen Modus zu verwenden.

Ändern Sie die Option headless in der Datei constants.ts, um zwischen den Modi zu wechseln. Sie befindet sich im Ordner tests in Ihrem Projekt:

export const LaunchOptions = {
    headless: false
};

Eine weitere nützliche Option ist slowMo. Die Ausführung des Tests zwischen den einzelnen Aktionen wird angehalten:

export const LaunchOptions = {
    slowMo: 200 // milliseconds
};

Tests durchführen

Es gibt zwei integrierte Methoden zum Ausführen von Tests in diesem Projekt:

npm-Befehl

npm run test

Test Explorer

Verwenden Sie eine Test-Explorer-Erweiterung für VS Code. Der Mocha-Test-Explorer verfügt beispielsweise über eine bequeme Benutzeroberfläche und eine Option zum automatischen Ausführen von Tests für jede Änderung des Quellcodes:

Screenshot: Test-Explorer von Visual Studio Code

Verwandte Inhalte

Weitere Informationen zum Entwicklerportal:

  • Last updated on