cypress example kitchensink
v3.1.2
Ceci est un exemple d'application utilisée pour présenter les tests Cypress.io de bout en bout (E2E). L'application démontre l'utilisation de la plupart des commandes API Cypress. De plus, cet exemple de l'application est configuré pour exécuter les tests E2E dans diverses plates-formes CI. Plusieurs workflows démontrent l'utilisation CI d'images Docker Cypress qui fournissent des environnements compatibles pratiques et préconfigurés pour Cypress. Les tests sont également fortement commentés.
Pour voir l'application de l'évier de la cuisine et pour afficher les commandes API Cypress démontrées par l'application, visitez Exemple.Cypress.io.
Pour une référence complète de notre documentation, accédez à docs.cypress.io.
Pour un exemple d'application de paiement démontrant l'utilisation du monde réel des tests Cypress.io de bout en bout (E2E), accédez au référentiel Cypress-io / Cypress-Realworld-App.
Le tableau suivant répertorie les flux de travail en direct de divers fournisseurs de CI. Ceux-ci testent chacun le contenu de cet exemple de référentiel. Ils s'exécutent et enregistrent en utilisant Cypress Cloud avec leurs résultats affichant au centre de Cypress Cloud ProjectID 4b7344 . Chaque fournisseur CI montre son statut de construction sur son propre site:
| Fournisseur CI | Flux de travail | Statut de construction | Exemple de docker |
|---|---|---|---|
| Appyseur | appveyor.yml | ||
| Circleci | .circleci / config.yml | ✅ | |
| cypress-io / github-action | using-action.yml | ||
| Actions github | single.yml | ||
| Actions github | parallel.yml |
Vous pouvez trouver tous les résultats CI enregistrés sur le nuage Cypress
Ce tableau montre des exemples supplémentaires de flux de travail CI. À l'exception des workflows GitHub Actions, ce ne sont pas des exemples en direct comme dans le tableau ci-dessus et ils peuvent nécessiter une modification avant utilisation. Les workflows GitHub Actions sont en direct et ils s'exécutent sans enregistrer vers Cypress Cloud.
| Fournisseur CI | Configuration de base | Configuration parallèle complète | Exemple de docker |
|---|---|---|---|
| AWS Amplify | amplify.yml | ||
| AWS CodeBuild | Basic / buildSpec.yml | buildspe.yml | |
| Pipelines azure | base / 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 | ✅ |
| Actions github | chrome.yml | ||
| Actions github | chrome-docker.yml | ✅ | |
| Gitlab | base / .gitlab-ci.yml | .gitlab-ci.yml | ✅ |
| Jenkins | Basic / Jenkinsfile | Jenkinsfile | ✅ |
| Semaphore 2.0 | basique / .semaphore.yml | .semaphore / semaphore.yml | |
| Travis CI | base / .travis.yml | .travis.yml |
Les exemples de fournisseurs CI de documentation Cypress fournissent quelques exemples supplémentaires avec des guides étendus pour utiliser Cypress avec certains des fournisseurs CI les plus populaires.
Pour exécuter les tests à partir de ce dépôt sur votre machine locale, assurez-vous d'abord que votre machine répond aux exigences du système Cypress, y compris l'installation de Node.js en fonction de la version spécifiée dans le fichier .Node-Version.
L'exécution des instructions suivantes clonera le référentiel, installera les dépendances et exécutera Cypress:
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 est un script package.json qui démarre un serveur Web local, puis utilise Cypress Run pour exécuter Cypress sans tête. Si vous souhaitez exécuter des tests Cypress de manière interactive, exécutez la commande suivante qui utilise Cypress Open pour exécuter Cypress en mode tête. Vous pouvez choisir des tests individuels à exécuter.
npm run local:open Comme alternative à l'utilisation du local:open et local:run les scripts, vous pouvez également démarrer le serveur en une étape, puis exécuter Cypress dans une deuxième étape.
npm start # start server on port 8080 Vous pouvez vérifier que le serveur s'exécute si vous ouvrez un navigateur Web et naviguez vers http://localhost:8080 .
Ensuite, dans une fenêtre de terminal séparé, exécutez soit
npx cypress run # for headless modeou
npx cypress open # for headed interactive mode Les scripts local:run et local:open Utiliser l'alias start-test du module NPM start-server-and-test pour exécuter ./scripts/start.js, qui démarre le serveur Web, attend qu'il se prépare, puis lance Cypress.
Le script start engendre un serveur Web à l'aide du module NPM Service et affiche l'application de l'évier de la cuisine sur le port 8080 .
Si Docker a installé localement, par exemple à l'aide de Docker Desktop, vous pouvez exécuter les tests à partir de ce référentiel de manière interactive dans un conteneur Docker. Utilisez des images Cypress Docker, qui sont construites avec toutes les conditions préalables pour exécuter Cypress. Ils sont disponibles en tant que base, navigateurs et options incluses de Docker Hub et de la galerie publique Amazon ECR (Elastic Container Registry).
Comme ci-dessus, commencez par cloner le repo et installation des dépendances:
git clone https://github.com/cypress-io/cypress-example-kitchensink
cd cypress-example-kitchensink
npm ciNote
Pour plus de simplicité, les exemples Docker ci-dessous utilisent une référence de référentiel telle que cypress/base avec la latest balise de version. Pour sélectionner une version antérieure, remplacez latest par une balise explicite, par exemple cypress/base:20.15.1 . Des balises de version explicite sont recommandées pour la production. L'utilisation est en outre expliquée dans la sélection des balises.
L'exemple suivant utilise une image cyprès / base qui ne contient elle-même aucun navigateur. Vous utiliserez à la place le navigateur électronique avec du cyprès. Pour exécuter le conteneur Docker, exécutez ce qui suit:
docker run -it --rm -v .:/e2e -w /e2e cypress/base:latestLorsque l'invite de conteneur apparaît, entrez:
npx cypress install # install Cypress binary
npm run test:ci # start server and run tests in Electron browser
exit Avec une image Cypress / Browsers, vous avez le choix supplémentaire de navigateurs Chrome, Edge et Firefox. Exécutez ce qui suit:
docker run -it --rm -v .:/e2e -w /e2e cypress/browsers:latestLorsque l'invite de conteneur apparaît, entrez:
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 Les images Cypress / incluses ajoutent une installation complète du cyprès par rapport aux cyprès / navigateurs. Exécutez ce qui suit pour exécuter le conteneur avec une commande en ligne, testant avec le navigateur Chrome:
docker run -it --rm -v .:/e2e -w /e2e --entrypoint bash cypress/included:latest -c ' npm run test:ci:chrome ' # use for matching Cypress versions Remplacez la latest balise de la commande ci-dessus à l'aide de la version Cypress de The Repo's Package.json, si ce référentiel n'a pas encore été mis à jour vers la dernière version Cypress publiée. Notez que les versions incompatibles entraîneront des erreurs.
Note
Les navigateurs supplémentaires Chrome, Edge et Firefox ne sont installés que sur des images d'architecture linux/amd64 cypress/browsers et cypress/included . Les navigateurs ne sont pas disponibles préinstallés pour les images d'architecture linux/arm64 . Le navigateur électronique, intégré à Cypress, est disponible dans toutes les images et architectures.
Si vous souhaitez essayer d'exécuter des tests dans un fournisseur d'intégration continu (CI), vous devez d'abord débarquer le référentiel afin d'avoir votre propre copie. Reportez-vous à la documentation GitHub pour configurer correctement les alias remote upstream (à ce référentiel) et remote origin (à votre fourche). Vous devrez également avoir un compte avec le fournisseur CI avec lequel vous souhaitez tester.
Consultez la directive contributive.
Voir les versions.
