Die Leistungsfähigkeit von Headless Chrome und PWA-Automatisierung mit Puppeteer

Blog

Die Leistungsfähigkeit von Headless Chrome und PWA-Automatisierung mit Puppeteer

Das Testen von Code ist entscheidend für die Wartbarkeit einer komplexen Codebasis, aber es ist genauso wichtig, dass Tests einfach zu schreiben, zu warten und zu verstehen sind. Front-End-Code ist keine Ausnahme von dieser Regel, und Verhaltensweisen, die in Ihrer Benutzeroberfläche enthalten sind, sollten ebenfalls getestet werden. In der Vergangenheit war das Testen der Benutzeroberfläche aus verschiedenen Gründen schwierig, aber die Verwendung von React beseitigt viele dieser Hürden. Wir hoffen, dass Puppenspieler gute Arbeit leistet, um die verbleibenden zu entfernen!

Die Liebesgeschichte des Puppenspielers

Bevor wir beginnen, definieren wir Puppeteer. Puppeteer ist eine Knotenbibliothek, die eine High-Level-API zur Steuerung von Chrome oder Chromium über das DevTools-Protokoll bereitstellt. Puppeteer führt standardmäßig kopflose Chrome- oder Chromium-Instanzen aus, weshalb sie immer zusammen erwähnt werden. Puppeteer wurde vom Google Chrome DevTools-Team für Chrome entwickelt, um weitere automatisierte/headless Browser-Tests zu unterstützen und weniger schmerzhaft zu machen.
Die Emulation auf niedriger Ebene wird normalerweise mit dem DevTools-Protokoll durchgeführt. Genau wie die Chrome DevTools-Benutzeroberfläche verwendet Puppeteer das DevTools-Protokoll unter der Haube, um alle seine Operationen zu steuern, und es hilft sehr bei der Eingabeemulation.

Was können wir mit Puppenspieler machen?

Die meisten Dinge, die wir manuell im Browser tun können, können mit Puppeteer erledigt werden! Hier sind ein paar Beispiele für den Einstieg:

  • Erstellen Sie Screenshots und PDFs von Seiten.
  • Crawlen Sie eine SPA (Single-Page Application) und generieren Sie vorgerenderten Inhalt (z. B. SSR (Server-Side Rendering)).
  • Automatisieren Sie die Formularübermittlung, UI-Tests, Tastatureingaben usw.
  • Erstellen Sie eine aktuelle, automatisierte Testumgebung.
  • Führen Sie Ihre Tests direkt in der neuesten Version von Chrome mit den neuesten JavaScript- und Browserfunktionen aus.
  • Erfassen Sie eine Zeitachse Ihrer Website, um Leistungsprobleme zu diagnostizieren. Chrome-Erweiterungen testen.

Deklarative UIs sind testbare UIs

Alle neuen UI-Funktionen für OpenSooq.com werden jetzt mithilfe von React implementiert, das die Benutzeroberfläche einer Anwendung in einen Satz wiederverwendbarer Komponenten strukturiert. Komponenten sind eine Möglichkeit, die Art und Weise zu deklarieren, wie eine Benutzeroberfläche durch ein idempotentes gerendert werden soll machen Funktion, die eine reine Funktion des Anwendungszustands ist.

Reine Funktionen (und damit React-Komponenten) sind viel einfacher zu testen, da sie einfach a . zurückgeben Bezeichnung wie die Benutzeroberfläche der Komponente bei einem bestimmten Anwendungsstatus aussehen sollte, anstatt die Benutzeroberfläche tatsächlich zu mutieren und Nebenwirkungen zu haben. Diese Beschreibung wird als virtuelles DOM bezeichnet und ist eine baumartige Datenstruktur.

Zusicherungen über den Zustand eines React-Renderbaums können viel Boilerplate-Code enthalten und sind schwer zu lesen, was den Wert des Tests schmälert. Darüber hinaus können Ihre Tests durch direktes Assertieren auf dem resultierenden Baum stark an Implementierungsdetails gekoppelt werden, was Ihre Tests äußerst fragil macht.

Puppeteer macht es einfach und intuitiv, Fragen zur gerenderten Ausgabe Ihrer React-Komponenten zu stellen, indem eine flüssige Benutzeroberfläche rund um die gerenderten React-Komponenten bereitgestellt wird.

Projektkomponenten

Unser Automatisierungsprojekt besteht aus drei Ordnern:

  1. Knotenmodule : sind Node.js-Module, die eine einfache oder komplexe Funktionalität darstellen, die in einzelnen oder mehreren JavaScript-Dateien organisiert ist, die in der gesamten Node.js-Anwendung wiederverwendet werden können.
  2. src: das ist für eine andere notwendige Bibliothek zum Beispiel: babel-preset-react-app und ladbar.
  3. Testfälle: Dies ist das wichtigste, das den Quellcode der Testfälle enthält.

Der Testfallordner enthält zwei Ordner, der erste davon ist

1- Zusammensetzungen: die bestehen aus:

  • Helfer : sind Subcodes, die ich schreibe, um den Testfallcode zu vereinfachen und lesbar zu machen.

mögen:

  • clickDOMBySelector:
export const clickDOMBySelector = async selector => { await page.waitForSelector(selector); await page.click(selector); };

Hier in dieser Methode erhalten wir HTML-Elemente durch ihre Selektoren und klicken dann darauf. (wir verwenden es für notwendige Fälle, da Selektoren regelmäßig geändert werden)

  • clickDOMByText:
export const clickDOMByText = elemName => async text => { const dom = await getDOMByText(elemName)(text); await awaitFor(.1); await dom.click(); };

Wie wir hier sehen, haben wir zwei Argumente, HTML-Element und Text. Wir verwenden es, um auf ein bestimmtes Element mit dem Text darauf zu klicken. Diese Methode ist leistungsfähiger als die erste, aber nicht alle HTML-Elemente enthalten Text, also brauchen wir die erste für ausgewählte Fälle.

  • DOMElemByTextExists:
export const DOMElemByTextExists = elemName => async text => { const dom = await getDOMByText(elemName)(text); expect(!!dom).toBeTruthy(); };

Bei dieser Methode verwenden wir die gleichen Argumente wie bei clickDOMByText, aber hier verwende ich es, um sicherzustellen, dass sich der ausgewählte Text auf der Seite befindet (z. B. um sicherzustellen, dass ich mich auf der Startseite befinde oder nicht).

  • Navigation: sind Subcodes, die ich der Einfachheit halber schreibe, um von einer Seite zur anderen zu wechseln:

und das sind Beispiele dafür:

  • schließenSplashScreen:
export const closeSplashScreen = async () => { if (!await isSplashScreenExists()) { return; } await clickDOMBySelector('#continueToSiteLink') };
  • openHomePage:
export const openHomePage = async () => { await openPage(`/ar`); await page.evaluate(async () => { window.forceLoadAssets = true; }); await closeSplashScreen(); await page.waitForSelector('.homePage'); await DOMElemByTextExists('h3')('بيع . إشتري . دردش'); };
  • openSideMenü:
export const openSideMenu = async () => { if (await isSideMenuOpen()) { return; } await clickDOMBySelector('#menu-handle') };

Notiz: Das sind nicht alle Helfer und Navigatoren, es gibt viele davon.

**2-Komponente:**Der zweite Ordner enthält jede Komponente, die sich auf ein bestimmtes Element oder eine bestimmte Funktionalität in unserer App bezieht.

Ausführen von Testfällen

Um die Testfälle auszuführen, verwenden wir Garnbefehle (Abhängigkeitsverwaltung);

yarn test --runInBand // to run all test cases to gather on sequence yarn test test_case_name // to run all test cases one by on

Das folgende Diagramm zeigt die Ausführung des Testfalls der Anmeldung mit der Telefonnummer.

Wenn Sie den Befehl ausführen, wird automatisch der Browser geöffnet und Sie sehen die Ausführung von Testfällen wie unten.

Vorwärts gehen

Die Probleme, die Puppeteer anspricht, sind keineswegs spezifisch für OpenSooq. Die größte Herausforderung beim Testen mit Puppeteer ist nur an Chrome gebunden. Wir haben eine Reihe von Funktionen für die zukünftige Entwicklung geplant und ein Teil davon deckt andere Browser ab.

#gewicht #Chrom #Puppenspieler