Kontinuierliche UI-Testpipeline: BrowserStack mit GitHub-Aktionen

Wussten Sie, dass 88 % der Nutzer mit schlechten Erfahrungen nicht zu Websites zurückkehren, selbst wenn diese hervorragende Dienste und Inhalte bieten? Es ist an der Zeit zu erkennen, dass eine nahtlose Benutzeroberfläche (UI) und ein Benutzererlebnis (UX) für den Erfolg eines Produkts oder Unternehmens von wesentlicher Bedeutung sind und nicht bloßer Luxus.

Hier kommt Kontinuierliches UI-Testen ins Spiel. Kontinuierliches UI-Testen lässt herkömmliche Testansätze hinter sich und integriert sich in fast jeden Schritt der Entwicklung und Bereitstellung. Dadurch wird nicht nur Perfektion für alle Browser und Geräte gewährleistet, sondern auch Präzision erreicht, ohne Ihre Entwicklungspipeline zu verlangsamen.

In diesem Blog untersuchen wir die Rolle BrowserStack und GitHub Actions. Ersteres (BrowserStack) ermöglicht Ihnen die Durchführung automatisierter Tests auf echten Browsern und Geräten und gewährleistet eine beispiellose Genauigkeit. GitHub Actions hingegen automatisiert diesen Prozess, indem es Ihre Testworkflows nahtlos auslöst, wann immer Sie Code übertragen. Lassen Sie uns herausfinden, wie.

Warum sind kontinuierliche UI-Tests so wichtig?

In den heutigen dynamischen Umgebungen führt die Vernachlässigung regelmäßiger UI-Tests zu Problemen wie:

• Fehlerhafte Layouts: Kleine Änderungen im Code können unbeabsichtigt das Design stören, Elemente verlegen oder dazu führen, dass Schnittstellen nicht reagieren.

• Fehlerhafte Cross-Browser-Kompatibilität: Ihre Anwendung könnte in einem Browser problemlos funktionieren, in einem anderen jedoch nicht funktionieren. Dies kann für Benutzer besonders frustrierend sein.

• Schlechte Benutzererfahrung: Es dauert Sekunden, bis Benutzer mit einer fehlerhaften Benutzeroberfläche abgeschreckt werden. Dies wirkt sich direkt auf den Ruf Ihrer Marke und Ihren Umsatz aus.

In jedem CI/CD-Workflow vervielfacht sich das Risiko mit jeder kontinuierlichen Änderung im Code. Eine regelmäßige UI-Konsistenzprüfung kann solche Probleme und Risiken frühzeitig erkennen. Es ist praktisch machbar, bereits in der Bauphase in diese Tests und Prüfungen zu investieren, ohne sich mit teuren Korrekturen, Änderungen in letzter Minute, Kundenabwanderung und verspäteten Veröffentlichungen herumschlagen zu müssen.

Einige weitreichende Vorteile konsistenter UI-Prüfungen sind:

• Erhöhte Entwicklungsgeschwindigkeit: Wenn Sie sich auf den langfristigen Weg konzentrieren, debuggen Sie nicht wahllos, sondern beheben Fehler in Ihrem Code bereits in der Erstellungsphase. Automatisierte Tests steigern Geschwindigkeit und Innovation.

• Höhere Zuverlässigkeit: Kontinuierliches Testen verringert sicherlich die UI-Fehler, die möglicherweise in die Produktion gelangt sind. So haben Sie endlich eine konsistente Leistung in allen Umgebungen!

Manuelles Testen vs. kontinuierliches UI-Testen:

Aspect	Continuous UI Testing	Manual Test Techniques
Execution Time	Automated & faster	Slow & resource-intensive
Coverage	Comprehensive across browsers and devices	Limited to selected devices
Scalability	Scalable with CI/CD workflows.	Difficult to scale with frequent changes
Error Detection	Consistent & accurate error detection	Prone to human & other errors
Cost Efficiency	Lower with automation.	Expensive over time due to manual effort

Aspekt Kontinuierliches UI-Testen Manuelle Testtechniken Ausführungszeit Automatisiert und schneller Langsam und ressourcenintensiv Abdeckung Umfassend für alle Browser und Geräte Beschränkt auf ausgewählte Geräte Skalierbarkeit Skalierbar mit CI/CD-Workflows. Schwierig zu skalieren bei häufigen Änderungen Fehlererkennung Konsistente und genaue Fehlererkennung Anfällig für menschliche und andere Fehler Kosteneffizienz Absenken mit Automatisierung. Mit der Zeit teuer aufgrund des manuellen Aufwands

Was ist BrowserStack?

BrowserStack gilt als führende cloudbasierte Testplattform, mit der Entwickler ihre Anwendungen im Wesentlichen auf einer Vielzahl von Browsern, Betriebssystemen und Geräten testen können. Es ist ein perfekter Ersatz für jedes interne Gerätelabor. Zu den zusätzlichen Vorteilen von BrowserStack gehören:

• Visuelle Tests für Ihre Plattform: Hilft Ihnen bei einer konsistenten Benutzererfahrung, ohne sich um Plattformfragmentierung kümmern zu müssen. Nahtlose Erkennung visueller Regressionen und ermöglicht pixelgenaue Designs.

• Unterstützt automatisiertes Testen: Sie können Cypress, Selenium oder jedes andere Test-Framework problemlos auf BrowserStack ausführen, um eine saubere und robuste UI-Validierung zu gewährleisten.

• Browser- und geräteübergreifende Tests: Validiert eine nahtlose Ausführung über verschiedene Browser und Versionen auf verschiedenen Geräten.

Was sind GitHub-Aktionen?

Es handelt sich um ein Automatisierungstool, das sich nahtlos in GitHub integrieren lässt. „Aktionen“ helfen Entwicklern, die Workflows zu initiieren, zu verwalten und auszulösen, insbesondere basierend auf Code-Pushs, PRs (Pull-Requests) oder geplanten Triggern. Einige Hauptfunktionen von GitHub Actions sind:

• Parallele Ausführung: Es hilft im Wesentlichen dabei, Jobs gleichzeitig auszuführen, um Zeit zu sparen und die Lieferung zu beschleunigen.

• Anpassbare Pipelines: Aktionen können bei der Definition Ihrer Projektabläufe sehr effizient sein, indem Sie YAML-Dateien verwenden, die auf spezifische CI/CD-Anforderungen zugeschnitten sind.

• Umfassende Integration: Sie können nahtlos mit Tools von Drittanbietern wie BrowserStack oder AWS usw. kombinieren, um jede Art umfassender Automatisierung zu ermöglichen.

• Ereignisgesteuerte Workflows: Das Beste daran ist wahrscheinlich, dass es die Automatisierung von Aufgaben auf der Grundlage von Repository-Ereignissen ermöglicht, wie z. B. das Ausführen von Tests oder das Bereitstellen Ihres Repository-Codes.

Voraussetzungen:

Im Folgenden finden Sie eine Liste der Tools, die Sie benötigen, um die Einrichtung von Schnittstellentests mit BrowserStack und GitHub Actions durchzuführen:

• Ein GitHub-Repository.

• Zugriff auf BrowserStack (Automatisieren).

• Selenium/Cypress-Testskripte (oder ein im Blog bereitgestelltes Beispielskript).

Wie lässt sich BrowserStack in GitHub-Aktionen integrieren?

Nachdem wir endlich die wichtigsten Ergebnisse der Wahl von BrowserStack und GitHub Actions verstanden haben, können wir zu dem Schluss kommen, dass sie sich zusammen als effektiv robust und automatisiert erweisen können. Lesen Sie weiter, um zu erfahren, wie sauber Ihre UI-Tests auf verschiedenen Geräten und Browsern ausgeführt werden können. Willkommen zur technischen Schritt-für-Schritt-Anleitung für den Integrationsprozess:

Step-1 :	Event Triggering: Activating Your Workflow
Step-2 :	Code Checkout: Preparing the Test Environment
Step-3 :	Test Execution on BrowserStack: Running UI Tests
Step-4 :	Results Collection and Reporting

Sehen wir uns den detaillierten Ansatz für jeden der vier oben genannten Schritte an:

Schritt-1: Ereignisauslöser: Aktivieren Ihres Workflows

Mit „ereignisgesteuert“ meinen wir im Wesentlichen, dass die Workflows in GitHub Actions durch das Repository-Ereignis ausgelöst werden. Es funktioniert wie eine Türklingel – nichts passiert, bis es aktiviert wird und eine vordefinierte Reaktion auslöst.

Ähnlich dazu verfügt GitHub Actions über eine Reihe von Ereignissen, durch die der Workflow auf eine bestimmte Weise (je nach Ereignis) ausgelöst werden kann. Einige Beispiele sind:

• • Push:Code wird an bestimmte Zweige gepusht (z. B. Main, Develop usw.)

    * Pull Request (PR):Initiieren, Synchronisieren oder Zusammenführen der Pull Requests.

    * Löschen: Wenn ein Zweig oder Tag gelöscht wird.

Sie können diese Beispielereignisse mithilfe einer Konfiguration in einer beliebigen .yml-Datei verstehen:

on:
  push:
    branches:
      - main
  pull_request:
    branches:
      - main
  delete:  # Trigger workflow when a branch or tag is deleted

Schritt 2: Codeprüfung: Vorbereiten der Testumgebung

Der nächste Schritt in diesem Prozess besteht nun darin, den Workflow in GitHub Actions zu verwenden, um Ihre Repository-Codebasis abzurufen. Wir können dies mit Aktionen/Checkout-Aktionen unterstützen, die außerdem sicherstellen, dass alle Testskripte und Konfigurationsdateien Ihres Repositorys erfolgreich zur Ausführung verfügbar sind.

Ein Beispiel für ein YAML-Snippet hierfür könnte sein:

steps:
  - name: Checkout Repository
    uses: actions/checkout@v3

?
Standardmäßig ruft die Checkout-Aktion nur den neuesten Commit ab, um Arbeitsabläufe zu beschleunigen. Verwenden Sie fetch- Depth: 0 für den vollständigen Repository-Verlauf, falls erforderlich.

Schritt-3: Testausführung auf BrowserStack: Ausführen von UI-Tests

Der Kern der Integration von BrowserStack mit GitHub Actions liegt in der nahtlosen Ausführung von UI-Tests auf der leistungsstarken Infrastruktur von BrowserStack. Diese entscheidende Einrichtung ermöglicht es den Entwicklern, jede Art von browserübergreifenden Tests ziemlich effizient zu automatisieren. Dadurch erhalten Sie eine konsistente Leistung Ihrer Anwendung in allen unterschiedlichen Umgebungen. Hier erfahren Sie im Detail, wie die Testausführung in BrowserStack konfiguriert wird:

1. BrowserStack-Anmeldeinformationen einrichten:

* Authenticating test execution will require Access Keys.

* We store these Access Keys securely as ‘GitHub Secrets’ (`BROWSERSTACK_USERNAME` and `BROWSERSTACK_ACCESS_KEY`):

    ```yaml
    steps:
      - name: Set BrowserStack Credentials
        env:
          BROWSERSTACK_USERNAME: ${{ secrets.BROWSERSTACK_USERNAME }}
          BROWSERSTACK_ACCESS_KEY: ${{ secrets.BROWSERSTACK_ACCESS_KEY }}
    ```

1. Abhängigkeiten installieren:

* You must then install the project dependencies based on your project (e.g., Selenium, Cypress). This `.yml` file could be an example:

    ```yaml
    steps:
      - name: Install Dependencies
        run: |
          npm install
          npm run build
    ```

1. Tests über BrowserStack CLI oder API ausführen:

* Configure the test runner to execute on BrowserStack Automate:  
    Example for Selenium:

    ```yaml
    steps:
      - name: Run Selenium Tests on BrowserStack
        run: |
          npx selenium-standalone start &
          npm test
    ```

* Example for Cypress (via BrowserStack Cypress CLI):

    ```yaml
    steps:
      - name: Run Cypress Tests on BrowserStack
        run: |
          browserstack-cypress run --sync
    ```

Schritt 4: Ergebniserfassung und Berichterstattung

BrowserStack liefert, wie oben erwähnt, den perfekten Bericht und die perfekte Analyse, indem es diese umfassend für Sie erstellt. Dazu gehören im Wesentlichen:

• Ausführungsprotokolle: eine Reihe von Schritt-für-Schritt-Protokollen zum Debuggen.

• Screenshots: Erfasst wichtige Testschritte und übermittelt sie an Sie.

• Videos: Vollständige Aufzeichnungen von Testausführungen, die in Echtzeit durchgeführt wurden.

• Teststatus: Highlights der bestandenen, nicht bestandenen und übersprungenen Tests Ihrer Bewerbung.

Die genannten Artefakte könnten für einen einfachen Zugriff problemlos mit dem GitHub Actions-Workflow verknüpft werden. So machen wir es beispielsweise mit einer .yml-Datei.

on:
  push:
    branches:
      - main
  pull_request:
    branches:
      - main
  delete:  # Trigger workflow when a branch or tag is deleted

Erweiterte Integrationsfunktionen

1. Parallele Testausführung:
   
   Führen Sie mithilfe der parallelen Testfunktionen von BrowserStack Automate mehrere Testfälle gleichzeitig auf verschiedenen Browsern und Geräten aus. Dies kann über die Einstellungen des Test-Frameworks konfiguriert werden (z. B. maxInstances in Selenium).

2. Dynamische Browser- und Gerätematrix:
   
   Definieren Sie die Testmatrix dynamisch mithilfe von JSON-Konfigurationen und ermöglichen Sie so einfache Updates für Browser und zu testende Geräte:
   

   steps:
     - name: Checkout Repository
       uses: actions/checkout@v3
   

3. Fehlerbenachrichtigungen:
   
   Richten Sie Benachrichtigungen für Workflow-Fehler mithilfe von Integrationen wie Slack oder E-Mail ein:
   

   * Authenticating test execution will require Access Keys.
   
   * We store these Access Keys securely as ‘GitHub Secrets’ (`BROWSERSTACK_USERNAME` and `BROWSERSTACK_ACCESS_KEY`):
   

Technisches Diagramm

Unten finden Sie ein Diagramm, das einen integrierten Arbeitsablauf veranschaulicht

1. GitHub-Ereignis: Code-Push- oder Pull-Anfrage löst den Workflow aus.

2. CI Pipeline: GitHub Actions ruft den Code und die Abhängigkeiten ab.

3. BrowserStack-Ausführung:Tests werden auf BrowserStack Automate ausgeführt.

4. Testergebnisse: Protokolle, Screenshots und Berichte werden generiert und wieder mit dem Workflow verknüpft.

Durch die Nutzung der nahtlosen Integration von BrowserStack und GitHub Actions können Teams ihre UI-Tests automatisieren und so eine umfassende Abdeckung aller Geräte und Browser gewährleisten und gleichzeitig ihre CI/CD-Pipelines beschleunigen.

Diese Integration rationalisiert UI-Tests und ermöglicht es Teams, Probleme frühzeitig zu erkennen und qualitativ hochwertige Anwendungen schneller bereitzustellen.

Profi-Tipps zur Verbesserung Ihrer UI-Testeffizienz

1. Nutzen Sie parallele Tests: Beschleunigen Sie Ihre Testzyklen, indem Sie Tests auf mehreren Browsern und Geräten gleichzeitig ausführen, wodurch die Laufzeit verkürzt und die Abdeckung verbessert wird.

2. Wiederholungsmechanismen implementieren: Implementieren Sie Wiederholungsversuche, um die Auswirkungen unregelmäßiger Tests zu reduzieren und konsistente Ergebnisse sicherzustellen.

3. Übernehmen Sie visuelle Regressionstests: Verwenden Sie Tools wie Percy, um unbeabsichtigte UI-Änderungen durch den Vergleich visueller Schnappschüsse zu erkennen und so eine nahtlose Benutzeroberfläche sicherzustellen.

Häufige Probleme und wie man sie löst

Bei der Implementierung kontinuierlicher UI-Tests können Sie auf mehrere häufige Herausforderungen stoßen. Hier finden Sie einige Tipps sowie Tipps zur Fehlerbehebung:

1. Flockentests:

on:
  push:
    branches:
      - main
  pull_request:
    branches:
      - main
  delete:  # Trigger workflow when a branch or tag is deleted

1. Konfigurationsfehler:

steps:
  - name: Checkout Repository
    uses: actions/checkout@v3

1. Probleme mit der Browserkompatibilität

* Authenticating test execution will require Access Keys.

* We store these Access Keys securely as ‘GitHub Secrets’ (`BROWSERSTACK_USERNAME` and `BROWSERSTACK_ACCESS_KEY`):

Best Practices, die Sie in diesem Fall übernehmen können:

• Aufrechterhaltung einer stabilen Testumgebung: Richten Sie spezielle Testumgebungen ein, um konsistente Ergebnisse sicherzustellen.

• Testleistung überwachen: Behalten Sie die Testausführungszeit im Auge und vermeiden Sie die Ausführung unnötiger Tests.

• Protokolle überprüfen: Überprüfen Sie Protokolle immer, wenn Tests keine klaren Erkenntnisse darüber liefern, was schief gelaufen ist.

• Parallel testen: Um die Effizienz und Abdeckung zu verbessern, testen Sie auf mehreren Browsern und Geräten gleichzeitig.

Indem Sie diese häufigen Probleme angehen und Best Practices befolgen, können Sie die Zuverlässigkeit Ihrer UI-Tests verbessern und ein reibungsloseres Testerlebnis gewährleisten.

Keploy: Vereinfachung der Testautomatisierung mit Fokus auf Geschwindigkeit und Genauigkeit

Keploy ist eine Open-Source-Testplattform ohne Code, die darauf ausgelegt ist, die Testgenerierung und -ausführung für moderne Anwendungen zu optimieren. Durch die automatische Erfassung von API-Interaktionen hilft es, zuverlässige und umfassende Testfälle ohne manuelles Eingreifen zu generieren.

Warum Keploy beim kontinuierlichen UI-Testen verwenden?

1. Automatisierte Testerstellung: Keploy generiert automatisch Testfälle, indem es API-Aufrufe während der Laufzeit aufzeichnet, wodurch der Bedarf an manueller Skripterstellung reduziert wird.

2. Regressionstests: Es stellt sicher, dass Ihre Anwendung eine konsistente Leistung beibehält, indem Abweichungen erkannt und gekennzeichnet werden.

3. Nahtlose CI/CD-Integration: Keploy arbeitet mit Tools wie GitHub Actions und BrowserStack zusammen und steigert so die Effizienz Ihrer CI/CD-Pipelines.

4. Schnellere Iterationen: Durch die Möglichkeit, den Zeitaufwand für die Erstellung von Testskripten zu reduzieren, können sich Teams auf Entwicklung und Innovation konzentrieren.

Anwendungsfall:

Die Kombination von Keploy mit BrowserStack bietet eine umfassende Testlösung, die sowohl APIs als auch UI-Elemente abdeckt, um eine konsistente plattformübergreifende Leistung zu gewährleisten. Durch die Integration von Keploy in Ihren Workflow können Sie die Testeffizienz weiter steigern und die Bereitstellung beschleunigen, während Sie gleichzeitig eine erstklassige Anwendungsqualität beibehalten.

Abschluss

Kontinuierliches UI-Testen ist kein Luxus mehr, sondern eine Notwendigkeit in der heutigen schnelllebigen Entwicklungsumgebung. Tools wie BrowserStack und GitHub Actions ermöglichen Teams die Bereitstellung nahtloser, plattformübergreifender Benutzererlebnisse durch die Automatisierung komplexer Testprozesse. Diese Integrationen ermöglichen schnellere Entwicklungszyklen, höhere Zuverlässigkeit und geringere Kosten und stellen sicher, dass Ihre Anwendung den höchsten Qualitätsstandards entspricht.

Durch die Kombination dieser Tools mit innovativen Plattformen wie Keploy können Sie Ihre Teststrategie auf die nächste Stufe heben und sowohl Probleme auf UI- als auch API-Ebene frühzeitig im Entwicklungszyklus erkennen. Dies beschleunigt nicht nur Ihre CI/CD-Pipeline, sondern stärkt auch die allgemeine Belastbarkeit und Benutzerzufriedenheit Ihrer Anwendung.

Ressourcen -

• BrowserStack-Dokumentation

• GitHub-Aktionsdokumentation

• Browserübergreifendes Testen mit BrowserStack

Das obige ist der detaillierte Inhalt vonKontinuierliche UI-Testpipeline: BrowserStack mit GitHub-Aktionen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!