cypress example kitchensink
v3.1.2
Esta es una aplicación de ejemplo utilizada para mostrar pruebas de extremo a extremo (E2E) Cypress.io. La aplicación demuestra el uso de la mayoría de los comandos API de Cypress. Además, esta aplicación de ejemplo está configurada para ejecutar pruebas E2E en varias plataformas CI. Varios flujos de trabajo demuestran el uso de CI de imágenes de ciprés que proporcionan entornos compatibles convenientes y preconfigurados para Cypress. Las pruebas también se comentan fuertemente.
Para ver la aplicación del fregadero de la cocina y ver los comandos de la API de Cypress demostrados por la aplicación, visite el ejemplo.cypress.io.
Para obtener una referencia completa de nuestra documentación, vaya a docs.cypress.io.
Para una aplicación de pago de ejemplo que demuestre el uso del mundo real de las pruebas de extremo a extremo (E2E) de Cypress.io, visite el repositorio de Cypress-IO/Cypress-Realworld-App.
La siguiente tabla enumera los flujos de trabajo en vivo de varios proveedores de CI. Cada uno prueba independientemente el contenido de este repositorio de ejemplo. Se ejecutan y registran usando Cypress Cloud con sus resultados que se muestran centralmente en Cypress Cloud ProjectId 4b7344 . Cada proveedor de CI muestra su estado de compilación en su propio sitio:
| Proveedor de CI | Flujo de trabajo | Estado de construcción | Ejemplo de Docker |
|---|---|---|---|
| Appveyor | appveyor.yml | ||
| Circleci | .circleci/config.yml | ✅ | |
| cipress-io/github-acción | usando-cact.yml | ||
| Acciones de Github | sencillo | ||
| Acciones de Github | paralelo.yml |
Puede encontrar todos los resultados de CI registrados en la nube de Cypress
Esta tabla muestra ejemplos adicionales de flujos de trabajo de CI. Con la excepción de los flujos de trabajo de las acciones de GitHub, estos no son ejemplos en vivo como en la tabla anterior y pueden requerir modificación antes de su uso. Los flujos de trabajo de las acciones de GitHub están en vivo y se ejecutan sin grabar en Cypress Cloud.
| Proveedor de CI | Configuración básica | Configuración paralela completa | Ejemplo de Docker |
|---|---|---|---|
| AWS amplifica | Amplify.yml | ||
| AWS CodeBuild | BASIC/BUILDSPEC.YML | buildspec.yml | |
| Tuberías azules | Básico/Azure-Ci.yml | azure-ci.yml | |
| Buddy.Works | Buddy.yml | ✅ | |
| Buildkite | .BuildKite/Pipeline.yml | ||
| Circleci | BASIC/.circleci/config.yml | ✅ | |
| CloudBees Codeship Pro | Básico/Codeship-Pro | CodeShip-Services.yml | ✅ |
| Acciones de Github | chrome.yml | ||
| Acciones de Github | Chrome-Docker.yml | ✅ | |
| Gitlab | básico/.gitlab-ci.yml | .gitlab-ci.yml | ✅ |
| Jenkins | Básico/Jenkinsfile | Jenkinsfile | ✅ |
| Semaphore 2.0 | básico/.semaphore.yml | .Semaphore/Semaphore.yml | |
| Travis CI | BASIC/.TRAVIS.YML | .travis.yml |
Los ejemplos de proveedores de CI de la página de documentación de Cypress proporcionan algunos ejemplos más con guías extensas para usar Cypress con algunos de los proveedores de CI más populares.
Para ejecutar las pruebas de este repositorio en su máquina local, primero asegúrese de que su máquina cumpla con los requisitos del sistema Cypress, incluida la instalación de Node.js de acuerdo con la versión especificada en el archivo .node-version.
Ejecución de las siguientes instrucciones clonará el repositorio, instalará dependencias y ejecutará 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 es un script Package.json que inicia un servidor web local y luego usa Cypress Run para ejecutar Cypress sin cabeza. Si desea ejecutar las pruebas de Cypress de manera interactiva, ejecute el siguiente comando que usa Cypress abierto para ejecutar Cypress en modo encabezado. Puede elegir pruebas individuales para ejecutar.
npm run local:open Como alternativa al uso de los scripts local:open and local:run , también puede iniciar el servidor en un solo paso y luego ejecutar Cypress en un segundo paso.
npm start # start server on port 8080 Puede verificar que el servidor se esté ejecutando si abre un navegador web y navega a http://localhost:8080 .
Luego en una ventana de terminal separada ejecutar
npx cypress run # for headless modeo
npx cypress open # for headed interactive mode Los scripts local:run y local:open Use el alias start-test del módulo npm start-server-and-test para ejecutar ./scripts/start.js, que inicia el servidor web, espera a que esté listo, y luego lanza Cypress.
El script start genera un servidor web utilizando el módulo NPM que sirve y muestra la aplicación de fregadero de la cocina en el puerto 8080 .
Si tiene Docker instalado localmente, por ejemplo, usando Docker Desktop, puede ejecutar las pruebas desde este repositorio de manera interactiva en un contenedor Docker. Use imágenes Cypress Docker, que se construyen con todos los requisitos previos para ejecutar Cypress. Están disponibles como base, navegadores e incluidas opciones de Docker Hub y la Galería Pública de Amazon ECR (Elastic Container Registry).
Como se indicó anteriormente, comience clonando el repositorio e instalando dependencias:
git clone https://github.com/cypress-io/cypress-example-kitchensink
cd cypress-example-kitchensink
npm ciNota
Para simplificar, los ejemplos de Docker a continuación utilizan una referencia de repositorio como cypress/base con la latest versión de la versión. Para seleccionar una versión anterior, reemplace latest con una etiqueta explícita, por ejemplo cypress/base:20.15.1 . Se recomiendan etiquetas de versión explícitas para la producción. El uso se explica más a fondo en la selección de etiquetas.
El siguiente ejemplo utiliza una imagen de ciprés/base que no contiene navegadores. Utilizará el navegador de electrones incluido con Cypress. Para ejecutar el contenedor Docker, ejecute lo siguiente:
docker run -it --rm -v .:/e2e -w /e2e cypress/base:latestCuando aparezca la solicitud de contenedor, ingrese:
npx cypress install # install Cypress binary
npm run test:ci # start server and run tests in Electron browser
exit Con una imagen de ciprés/navegadores, tiene la elección adicional de los navegadores Chrome, Edge y Firefox. Ejecutar lo siguiente:
docker run -it --rm -v .:/e2e -w /e2e cypress/browsers:latestCuando aparezca la solicitud de contenedor, ingrese:
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 Las imágenes de Cypress/incluidas agregan una instalación completa de Cypress en comparación con Cypress/Browsers. Ejecute lo siguiente para ejecutar el contenedor con un comando de una línea, probando con el navegador 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 Reemplace la latest etiqueta en el comando de arriba utilizando la versión de Cypress del paquete de repo.json, si este repositorio aún no se ha actualizado a la última versión de Cypress lanzada. Tenga en cuenta que las versiones no coincidentes causarán errores.
Nota
Los navegadores adicionales Chrome, Edge y Firefox solo se instalan en imágenes de arquitectura linux/amd64 cypress/browsers y cypress/included . Los navegadores no están disponibles preinstalados para las imágenes de arquitectura linux/arm64 . El navegador Electron, que está integrado en Cypress, está disponible en todas las imágenes y arquitecturas.
Si desea probar las pruebas de ejecución en un proveedor de integración continua (CI), primero debe desembolsar el repositorio para que tenga su propia copia. Consulte la documentación de GitHub para configurar los alias para remote upstream (a este repositorio) y remote origin (a su bifurcación) correctamente. También deberá tener una cuenta con el proveedor de CI con el que desea probar.
Echa un vistazo a la guía contribuyente.
Ver lanzamientos.
