cypress example kitchensink
v3.1.2
Dies ist eine Beispiel-App, mit der Cypress.io End-to-End (E2E) -Tests vorgestellt werden. Die Anwendung zeigt die Verwendung der meisten Cypress -API -Befehle. Zusätzlich ist diese Beispiel -App so konfiguriert, dass sie E2E -Tests in verschiedenen CI -Plattformen ausführen. Mehrere Workflows demonstrieren die Verwendung von Cypress-Docker-Bildern, die bequeme, vorkonfigurierte kompatible Umgebungen für Zypressen bieten. Die Tests werden ebenfalls stark kommentiert.
Um die Anwendung der Spüle zu sehen und die von der App demonstrierten Cypri -API -Befehle anzuzeigen, besuchen Sie Beispiel.cypress.io.
Eine vollständige Referenz unserer Dokumentation finden Sie unter docs.cypress.io.
Für einen Beispiel-Zahlungsantrag, in dem die reale Verwendung von Cypress.io End-to-End-Test (E2E) verwendet wird, gehen Sie zum Cypress-io/Cypress-Realld-App-Repository.
In der folgenden Tabelle werden Live -Workflows von verschiedenen CI -Anbietern aufgeführt. Diese testen jeweils unabhängig den Inhalt dieses Beispiel -Repositorys. Sie laufen und zeichnen mit Cypress Cloud aus, wobei ihre Ergebnisse zentral unter Cypress Cloud ProjectID 4b7344 angezeigt werden. Jeder CI -Anbieter zeigt seinen Baustatus auf seiner eigenen Website:
| CI -Anbieter | Workflow | Status erstellen | Docker -Beispiel |
|---|---|---|---|
| Appveyor | Appveyor.yml | ||
| Circleci | .Circleci/config.yml | ✅ | |
| Cypress-io/github-action | mit action.yml | ||
| Github -Aktionen | Single.yml | ||
| Github -Aktionen | parallel.yml |
Sie finden alle CI -Ergebnisse, die in der Cypress Cloud aufgezeichnet wurden
Diese Tabelle zeigt zusätzliche Beispiele für CI -Workflows. Mit Ausnahme von Workflows mit GitHub -Aktionen sind dies keine Live -Beispiele wie in der obigen Tabelle und müssen vor der Verwendung geändert werden. Die Workflows der GitHub -Aktionen sind live und werden ohne Aufnahme zur Cypress -Cloud ausgeführt.
| CI -Anbieter | Grundlegende Konfiguration | Vollständige parallele Konfiguration | Docker -Beispiel |
|---|---|---|---|
| AWS verstärken sich | amplify.yml | ||
| AWS Codebuild | Basic/BuildSpec.yml | BuildSpec.yml | |
| Azure Pipelines | Basic/azure-ci.yml | Azure-ci.yml | |
| Buddy.works | buddy.yml | ✅ | |
| Buildkite | .buildkite/pipeline.yml | ||
| Circleci | Basic/.circleci/config.yml | ✅ | |
| CloudBees Codeship Pro | Basic/Codeship-Pro | codeship-services.yml | ✅ |
| Github -Aktionen | Chrome.yml | ||
| Github -Aktionen | Chrome-Docker.yml | ✅ | |
| Gitlab | Basic/.gitlab-ci.yml | .gitlab-ci.yml | ✅ |
| Jenkins | Basic/JenkinsFile | Jenkinsfile | ✅ |
| Semaphor 2.0 | Basic/.semaphore.yml | .Semaphore/semaphore.yml | |
| Travis CI | Basic/.Travis.yml | .Travis.yml |
Die Cypress -Dokumentationsseite CI -Anbieterbeispiele liefert einige weitere Beispiele mit umfangreichen Leitfaden für die Verwendung von Cypress mit einigen der beliebtesten CI -Anbieter.
Um die Tests von diesem Repo auf Ihrem lokalen Computer auszuführen, stellen Sie zunächst sicher, dass Ihr Computer die Anforderungen an die Zypressensysteme entspricht, einschließlich der Installation von Node.js gemäß der in der Datei .node-Version angegebenen Version.
Durch Ausführen der folgenden Anweisungen klonen das Repository, installieren Abhängigkeiten und führen Zypressen aus:
git clone https://github.com/cypress-io/cypress-example-kitchensink.git
cd cypress-example-kitchensink
npm ci # install dependencies
npm run local:run # run Cypress headlessly local:run ist ein Paket.json -Skript, das einen lokalen Webserver startet und dann Cypress Run verwendet, um Zypressen Kopflos auszuführen. Wenn Sie Cypress -Tests interaktiv ausführen möchten, führen Sie den folgenden Befehl aus, der Cypress Open verwendet, um Cypress im Kopfmodus auszuführen. Sie können einzelne Tests auswählen, die zum Durchführen werden.
npm run local:open Als Alternative zur Verwendung des local:open und local:run von Skripten können Sie den Server auch in einem Schritt starten und Cypress in einem zweiten Schritt ausführen.
npm start # start server on port 8080 Sie können überprüfen, ob der Server ausgeführt wird, wenn Sie einen Webbrowser öffnen und zu http://localhost:8080 navigieren.
Dann in einem separaten Terminalfenster entweder ausführen
npx cypress run # for headless modeoder
npx cypress open # for headed interactive mode Die Skripte local:run and local:open Verwenden Sie den start-test Alias des NPM-Moduls Start-Server-Test zum Ausführen. Startet Cypress.
Das start erzeugt einen Webserver, der das NPM -Modul serviert und die Spülbecken -App auf Port 8080 zeigt.
Wenn Sie Docker lokal installiert haben, beispielsweise mit Docker Desktop, können Sie die Tests von diesem Repo interaktiv in einem Docker -Container ausführen. Verwenden Sie Cypress Docker -Bilder, die mit allen Voraussetzungen für das Ausführen von Zypressen erstellt wurden. Sie sind als Basis, Browser erhältlich und enthalten Optionen von Docker Hub und der öffentlichen Galerie von Amazon ECR (Elastic Container Registry).
Beginnen Sie wie oben, klonieren Sie das Repo und installieren Sie Abhängigkeiten:
git clone https://github.com/cypress-io/cypress-example-kitchensink
cd cypress-example-kitchensink
npm ciNotiz
Der Einfachheit halber verwenden die folgenden Beispiele von Docker eine Repository -Referenz wie cypress/base mit dem latest Versions -Tag. Um eine frühere Version auszuwählen, ersetzen Sie latest durch ein explizites Tag, z. B. cypress/base:20.15.1 . Explizite Versionstags werden für die Produktion empfohlen. Die Verwendung wird in der Tag -Auswahl weiter erklärt.
Das folgende Beispiel verwendet ein Cypress/Base -Bild, das selbst keine Browser enthält. Sie werden stattdessen den mit Zypressen gebündelten Elektronenbrowser verwenden. Führen Sie Folgendes aus, um den Docker -Container auszuführen:
docker run -it --rm -v .:/e2e -w /e2e cypress/base:latestWenn die Container -Eingabeaufforderung angezeigt wird, geben Sie ein:
npx cypress install # install Cypress binary
npm run test:ci # start server and run tests in Electron browser
exit Mit einem Cypress/Browser -Bild haben Sie die zusätzliche Auswahl an Browsern Chrom, Rand und Firefox. Führen Sie Folgendes aus:
docker run -it --rm -v .:/e2e -w /e2e cypress/browsers:latestWenn die Container -Eingabeaufforderung angezeigt wird, geben Sie ein:
npx cypress install # install Cypress binary
npm run test:ci # start server and run tests in Electron browser
npm run test:ci:chrome # start server and run tests in Chrome browser
npm run test:ci:edge # start server and run tests in Edge browser
npm run test:ci:firefox # start server and run tests in Firefox browser
exit Die Zypressen/enthaltenen Bilder fügen im Vergleich zu Cypress/Browsern eine vollständige Zypresseninstallation hinzu. Führen Sie Folgendes aus, um den Container mit einem One-Line-Befehl auszuführen und mit dem Chrome-Browser zu testen:
docker run -it --rm -v .:/e2e -w /e2e --entrypoint bash cypress/included:latest -c ' npm run test:ci:chrome ' # use for matching Cypress versions Ersetzen Sie das latest Tag im obigen Befehl mit der Cypress -Version aus dem Repo Package.json, wenn dieses Repository noch nicht auf die neueste veröffentlichte Cypress -Version aktualisiert wurde. Beachten Sie, dass nicht übereinstimmende Versionen Fehler verursachen.
Notiz
Zusätzliche Browser Chrome, Edge und Firefox sind nur in linux/amd64 -Architekturbildern cypress/browsers und cypress/included installiert. Browser sind nicht vorinstalliert für linux/arm64 -Architekturbilder. Der Elektronenbrowser, der zu Cypress integriert ist, ist in allen Bildern und Architekturen erhältlich.
Wenn Sie versuchen möchten, Tests in einem CII -Anbieter (Continuous Integration) auszuführen, müssen Sie zuerst das Repository aufgeben, damit Sie Ihre eigene Kopie haben. Siehe die GitHub -Dokumentation, um Aliase für remote upstream (zu diesem Repo) und remote origin (zu Ihrer Gabel) korrekt einzurichten. Sie müssen auch ein Konto bei dem CI -Anbieter haben, mit dem Sie testen möchten.
Schauen Sie sich die beitragende Richtlinie an.
Siehe Veröffentlichungen.
