Fügen Sie end-to-end Cypress-Tests zu Ihrer Amplify-App hinzu - AWS Amplify Hosten
Tutorial: Richten Sie end-to-end Tests mit Cypress einFügen Sie Tests zu Ihrer bestehenden Amplify-App hinzuTests deaktivieren

Die vorliegende Übersetzung wurde maschinell erstellt. Im Falle eines Konflikts oder eines Widerspruchs zwischen dieser übersetzten Fassung und der englischen Fassung (einschließlich infolge von Verzögerungen bei der Übersetzung) ist die englische Fassung maßgeblich.

Fügen Sie end-to-end Cypress-Tests zu Ihrer Amplify-App hinzu

Sie können end-to-end (E2E) -Tests in der Testphase Ihrer Amplify-App ausführen, um Regressionen catch, bevor Sie den Code in die Produktion bringen. Die Testphase kann in der Build-Spezifikation YAML konfiguriert werden. Derzeit können Sie während eines Builds nur das Cypress-Testframework ausführen.

Tutorial: Richten Sie end-to-end Tests mit Cypress ein

Cypress ist ein JavaScript basiertes Test-Framework, mit dem Sie E2E-Tests in einem Browser ausführen können. Ein Tutorial, das zeigt, wie Sie E2E-Tests einrichten, finden Sie im Blogbeitrag Ausführen von end-to-end Cypress-Tests für Ihre Fullstack-CI/CD-Bereitstellung mit Amplify.

Fügen Sie Tests zu Ihrer bestehenden Amplify-App hinzu

Sie können Cypress-Tests zu einer vorhandenen App hinzufügen, indem Sie die Build-Einstellungen der App in der Amplify-Konsole aktualisieren. Die Build-Spezifikation YAML enthält eine Sammlung von Build-Befehlen und zugehörigen Einstellungen, die Amplify verwendet, um Ihren Build auszuführen. Verwenden Sie den test Schritt, um alle Testbefehle zur Build-Zeit auszuführen. Für E2E-Tests bietet Amplify Hosting eine tiefere Integration mit Cypress, mit der Sie einen UI-Bericht für Ihre Tests erstellen können.

In der folgenden Liste werden die Testeinstellungen und deren Verwendung beschrieben.

Vor dem Test

Installieren Sie die Abhängigkeiten, die für die Ausführung von Cypress-Tests erforderlich sind. Amplify Hosting verwendet Mochawesome, um einen Bericht zu erstellen, in dem Sie Ihre Testergebnisse einsehen können, und warten Sie, bis der Localhost-Server während des Builds eingerichtet ist.

Test

Führen Sie Cypress-Befehle aus, um Tests mit Mochawesome durchzuführen.

Nach dem Test

Der Mochawesome-Bericht wird aus der JSON-Ausgabe generiert. Beachten Sie, dass Sie, wenn Sie Yarn verwenden, diesen Befehl im unbeaufsichtigten Modus ausführen müssen, um den Mochawesome-Bericht zu generieren. Für Yarn können Sie den folgenden Befehl verwenden.

yarn run --silent mochawesome-merge cypress/report/mochawesome-report/mochawesome*.json > cypress/report/mochawesome.json
Artefakte > Basisverzeichnis

Das Verzeichnis, von dem aus Tests ausgeführt werden.

Artefakte> configFilePath

Die generierten Testberichtsdaten.

Artefakte>Dateien

Die generierten Artefakte (Screenshots und Videos) stehen zum Herunterladen zur Verfügung.

Der folgende Beispielauszug aus einer amplify.yml Build-Spezifikationsdatei zeigt, wie Sie Ihrer App Cypress-Tests hinzufügen.

test:
  phases:
    preTest:
      commands:
        - npm ci
        - npm install -g pm2
        - npm install -g wait-on
        - npm install mocha mochawesome mochawesome-merge mochawesome-report-generator
        - pm2 start npm -- start
        - wait-on http://localhost:3000
    test:
      commands:
        - 'npx cypress run --reporter mochawesome --reporter-options "reportDir=cypress/report/mochawesome-report,overwrite=false,html=false,json=true,timestamp=mmddyyyy_HHMMss"'
    postTest:
      commands:
        - npx mochawesome-merge cypress/report/mochawesome-report/mochawesome*.json > cypress/report/mochawesome.json
        - pm2 kill
  artifacts:
    baseDirectory: cypress
    configFilePath: '**/mochawesome.json'
    files:
      - '**/*.png'
      - '**/*.mp4'

Tests deaktivieren

Nachdem die Testkonfiguration zu Ihren amplify.yml Build-Einstellungen hinzugefügt wurde, wird der test Schritt für jeden Build in jedem Zweig ausgeführt. Wenn Sie die Ausführung von Tests global deaktivieren oder nur Tests für bestimmte Zweige ausführen möchten, können Sie die USER_DISABLE_TESTS Umgebungsvariable verwenden, ohne Ihre Build-Einstellungen zu ändern.

Um Tests für alle Branches global zu deaktivieren, fügen Sie die USER_DISABLE_TESTS Umgebungsvariable mit dem Wert true for all Branches hinzu. Der folgende Screenshot zeigt den Abschnitt Umgebungsvariablen in der Amplify-Konsole mit deaktivierten Tests für alle Zweige.

Der Abschnitt Umgebungsvariablen in der Amplify-Konsole.

Um Tests für einen bestimmten Zweig zu deaktivieren, fügen Sie die USER_DISABLE_TESTS Umgebungsvariable mit dem Wert false für alle Zweige hinzu und fügen Sie dann für jeden Zweig, den Sie deaktivieren möchten, eine Überschreibung mit dem Wert von true hinzu. Im folgenden Screenshot sind Tests für den Hauptzweig deaktiviert und für jeden anderen Zweig aktiviert.

Der Abschnitt Umgebungsvariablen in der Amplify-Konsole.

Das Deaktivieren von Tests mit dieser Variablen führt dazu, dass der Testschritt während eines Builds vollständig übersprungen wird. Um Tests wieder zu aktivieren, setzen Sie diesen Wert auf false oder löschen Sie die Umgebungsvariable.