Integrationstests mit Protractor in Angular

by Anonymous Forum: Testing in Angular

In Angular kannst du Integrationstests mit Protractor schreiben, um das Zusammenspiel deiner Komponenten, Services und der Benutzeroberfläche zu testen. Protractor ist ein Testframework, das speziell für Angular-Anwendungen entwickelt wurde und auf Selenium WebDriver basiert. Gemeinsam werden wir einen einfachen Integrationstest mit Protractor erstellen:

Stelle sicher, dass du Protractor in deinem Projekt installiert hast, indem du den Befehl npm install -g protractor ausführst.

Erstelle eine neue Datei mit dem Namen app.spec.ts im Verzeichnis e2e deines Angular-Projekts.

Schreibe den folgenden Integrationstestcode in die app.spec.ts-Datei:

typescript

import { browser, by, element } from 'protractor';



describe('App', () => {

  beforeEach(() => {

    browser.get('/');

  });



  it('sollte den Titel "Meine Angular-Anwendung" enthalten', () => {

    expect(browser.getTitle()).toEqual('Meine Angular-Anwendung');

  });



  it('sollte einen Text im Header anzeigen', () => {

    const headerText = element(by.css('h1')).getText();

    expect(headerText).toContain('Willkommen in meiner Angular-Anwendung!');

  });



  it('sollte ein Formular mit Eingabefeldern enthalten', () => {

    const inputFields = element.all(by.css('input'));

    expect(inputFields.count()).toBe(2);

  });



  it('sollte das Formular ausfüllen und eine Nachricht anzeigen', () => {

    element(by.css('input[name="name"]')).sendKeys('Max Mustermann');

    element(by.css('input[name="email"]')).sendKeys('max@example.com');

    element(by.css('button')).click();



    const messageText = element(by.css('.message')).getText();

    expect(messageText).toContain('Vielen Dank für deine Anmeldung, Max!');

  });

});

Führe den Integrationstest aus, indem du den Befehl ng e2e in deinem Terminal ausführst. Protractor wird automatisch den lokalen Entwicklungsserver starten und den Test in einem echten Browser durchführen.

Für die Übung kannst du nun deine eigene Angular-Anwendung auswählen und einen Integrationstest mit Protractor schreiben. Überprüfe, ob alle wichtigen Funktionen und Interaktionen in deiner Anwendung korrekt funktionieren. Passe bei Bedarf deine Tests an, um sicherzustellen, dass deine Anwendung den Anforderungen entspricht.

Integrationstests sind entscheidend, um sicherzustellen, dass alle Teile deiner Angular-Anwendung nahtlos zusammenarbeiten. Nutze Protractor, um die Benutzeroberfläche zu testen und sicherzustellen, dass deine Anwendung korrekt funktioniert.


Angular lernen mit unserem umfangreichen Schulungsangebot. Von grundlegenden bis hin zu fortgeschrittenen Kursen bieten wir praxisorientierte Schulungen, um Ihnen dabei zu helfen, moderne Webanwendungen mit Leichtigkeit zu entwickeln.

Entdecken Sie jetzt unser Angular-Schulungsangebot und nehmen Sie an Kursen teil, die speziell auf Ihre Bedürfnisse zugeschnitten sind.
Besuchen Sie uns unter:https://www.qualiero.com/seminare/angular.html
#Angular #Weiterbildung #Webentwicklung