Hinweis
Für den Zugriff auf diese Seite ist eine Autorisierung erforderlich. Sie können versuchen, sich anzumelden oder das Verzeichnis zu wechseln.
Für den Zugriff auf diese Seite ist eine Autorisierung erforderlich. Sie können versuchen, das Verzeichnis zu wechseln.
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.
Komponententests
Ein Komponententest ist ein Ansatz zum Überprüfen kleiner Funktionseinheiten. Dies erfolgt 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 zum Überprüfen dieser Anforderungen sieht also folgendermaßen 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, einen Komponententest neben der Komponente zu belassen, die überprüft werden soll.
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"
});
End-to-End-Tests
Bei einem End-to-End-Test wird ein bestimmtes Benutzerszenario ausgeführt, wobei genau die Schritte unternommen werden, 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:
Öffnen Sie den Browser, und navigieren Sie zur Anmeldeseite.
Geben Sie die E-Mail-Adresse ein.
Geben Sie das Kennwort ein.
Wählen Sie Anmeldung aus.
Vergewissern Sie sich, dass der Benutzer zur Homepage umgeleitet wurde.
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“, „#password“ und „#signin“ sind CSS-ähnliche Selektoren, die HTML-Elemente auf der Seite identifizieren. Weitere Informationen finden Sie in der W3C-Spezifikation Selectors Level 3.
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 möglicherweise vorab erstellte Daten oder Konfigurationen erforderlich. Beispielsweise müssen Sie unter Umständen die Benutzeranmeldung mit Social Media-Konten 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
Mit modernen Browsern wie Chrome oder Microsoft Edge können Sie die Automatisierung sowohl im monitorlosen Modus als auch im normalen Modus ausfü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
In diesem Projekt stehen zwei integrierte Möglichkeiten zum Ausführen von Tests zur Verfügung:
npm-Befehl
npm run test
Test-Explorer
Die Test-Explorer-Erweiterung für VS Code (z. B. Mocha Test Explorer) verfügt über eine praktische Benutzeroberfläche und eine Option zum automatischen Ausführen von Tests bei jeder Änderung des Quellcodes:
Nächste Schritte
Weitere Informationen zum Entwicklerportal: