Automatisierte Cross-Browser-Tests mit Playwright

Einführung

Automatisierte Browsertests sind unerlässlich, um die Qualität des Codes sicherzustellen, den Sie bei der Entwicklung von Webanwendungen liefern. Einige Fehler werden erst dann sichtbar, wenn Sie alles in Ihrer Anwendung miteinander verknüpfen. Sie möchten diese Fehler so früh wie möglich erkennen, um die Kosten für ihre Behebung zu minimieren. Es gibt viele großartige Tools, die Ihnen dabei helfen, und ich möchte Ihnen ein Tool namens Playwright vorstellen.

Microsoft hat Playwright am 31. Januar 2020 veröffentlicht und hat eine aktive Community, die ständig neue Funktionen hinzufügt. In diesem Blogbeitrag erkläre ich Ihnen, was Playwright ist und wie es Ihnen helfen kann, die Qualität Ihrer Webanwendung zu verbessern, wenn Sie verschiedene Geräte ansprechen.
Playwright ist eine Node-Bibliothek, die eine browserübergreifende Webautomatisierung ermöglicht. Sie können auch vorhandene Testläufer einbinden und emulierte Geräte ansteuern.

Sie finden das vollständige Repository auf Github.

Voraussetzungen

In den nächsten Abschnitten werde ich Ihnen erklären, wie Sie Playwright für eine bestehende Angular-Anwendung einrichten können. Nichtsdestotrotz können Sie dies auf jedes Frontend-Framework/jede Bibliothek anwenden. Tatsächlich gibt es in diesem Blogbeitrag keinen Angular-Code.

Die Grundvoraussetzungen sind:

1. Sie haben eine Webanwendung, die Sie lokal in Ihrem Browserfenster ausführen können.
2. Sie verwenden einen der unterstützten Test-Runner (Jest, Jasmine, AVA oder Mocha)

Ein Standard-Angular-Projekt

Wenn Sie ein Angular-Projekt mit der CLI erstellen, wird standardmäßig ein e2e-Ordner mit einer Protractor-Konfiguration erstellt. Wir werden diese Konfiguration wiederverwenden, um Playwright hinzuzufügen.

Installation

Beginnen wir mit der Installation eines Dramatikers:

npm i --save-dev playwright

Jetzt erstellen wir eine neue Spec-Datei, sagen wir "app-playwright.e2e-spec.ts":

In the protractor.conf.js file we change specs to only include the Playwright file:

exports.config = { allScriptsTimeout: 11000, specs: [ './src/**/*playwright.e2e-spec.ts' ],

Als nächstes lassen wir Chrome im Headless-Modus laufen, da Playwright seine eigene Instanz von Chrome ausführt:

capabilities: {
    chromeOptions: {
      args: [ "--headless" ] //So we only display Playwright screens
    },
    browserName: 'chrome'
  },

Ihr erster Test

Wir können einen ersten Test in der app-playwright.e2e-spec.ts wie folgt schreiben:

import { chromium, Browser, Page } from 'playwright';

describe('Angular app homepage', () => {
  let browser: Browser;
  let page: Page;

  beforeAll(async () => {
    browser = await chromium.launch({ headless: false });
    page = await browser.newPage();
  });

  it('Should display the correct page title', async () => {
    await page.goto('https://localhost:4200');
    expect(await page.title()).toBe('MyAngular9AppPlaywright');
  });

  afterAll(async () => {
    await browser.close();
  });
});

Die Browser-Plattform kann durch Importieren von Chromium, Firefox und/oder Webkit angegeben werden. Mit dem Befehl launch wird der Browser standardmäßig im Headless-Modus gestartet.

Wir benötigen ein Seitenobjekt, um die Navigation zu starten und das DOM zu laden. Im ersten Test prüft und bestätigt Jasmine den Seitentitel.
Ein zweites Beispiel zur Prüfung eines DOM-Elements kann wie folgt angegeben werden:

it('should display welcome message', async () => {
    await page.goto('https://localhost:4200');
    const titleBannerContents = await page.$eval(
      'app-root .content span',
      (el: HTMLElement) => el.innerText
    );
    expect(titleBannerContents).toBe(
      'my-angular9-app-playwright app is running!'
    );
  });

Mit der Funktion $eval können Sie eine Abfrage-Selektor-Syntax verwenden. In diesem Fall wird nach dem ersten Vorkommen des Elements , einem Nachkomme mit der Klasse "content" und schließlich einem Nachkomme mit einem Element gesucht. Dies entspricht der folgenden visuellen Darstellung des Elements:

Wir verwenden den inneren Text des span-Elements, um ihn mit dem erwarteten Wert abzugleichen. Nachdem die Tests abgeschlossen sind, bereinigen wir das Browser-Objekt.
Wir führen den Test mit dem Befehl "ng e2e" aus und das Ergebnis sieht folgendermaßen aus:

Die Tests laufen zu schnell, als dass das Auge folgen könnte. Sie können dies mit der Option slowMo verlangsamen:

browser = await chromium.launch({ headless: false, slowMo: 100 });

Geräte-Emulation

Mit Playwright können Sie ganz einfach eine große Anzahl von Geräten emulieren. Nehmen wir an, Sie möchten prüfen, wie responsiv Ihre Webanwendung ist. Sie können dies tun, indem Sie verschiedene Viewport-Größen anvisieren. In Playwright können Sie dies über den Namen des Geräts angeben. Die vollständige Liste der unterstützten Geräte finden Sie auf Github Playwright.