cypress example kitchensink
v3.1.2
이것은 Cypress.io 엔드 투 엔드 (E2E) 테스트를 보여주는 데 사용되는 예제 앱입니다. 응용 프로그램은 대부분의 Cypress API 명령의 사용을 보여줍니다. 또한이 예제 앱은 다양한 CI 플랫폼에서 E2E 테스트를 실행하도록 구성되었습니다. 몇몇 워크 플로우는 사이프러스를위한 편리하고 사전 구성된 호환 환경을 제공하는 Cypress Docker 이미지의 CI 사용을 보여줍니다. 테스트도 크게 댓글을 달았습니다.
주방 싱크 응용 프로그램을보고 앱에서 시연 한 Cypress API 명령을 보려면 example.cypress.io를 방문하십시오.
문서에 대한 전체 참조를 보려면 Docs.Cypress.io를 방문하십시오.
예를 들어 Cypress.io 엔드 투 엔드 (E2E) 테스트의 실제 사용을 보여주는 지불 애플리케이션은 Cypress-IO/Cypress-RealWorld-App Repository로 이동하십시오.
다음 표에는 다양한 CI 제공 업체의 라이브 워크 플로가 나와 있습니다. 이것들은 각각이 예제 저장소의 내용을 독립적으로 테스트합니다. Cypress Cloud ProjectID 4b7344 에 중앙에서 결과를 표시하여 Cypress Cloud를 사용하여 실행하고 기록합니다. 각 CI 제공 업체는 자체 사이트에서 빌드 상태를 보여줍니다.
| CI 제공 업체 | 워크 플로 | 상태 빌드 상태 | 도커 예 |
|---|---|---|---|
| 앱베이어 | appveyor.yml | ||
| Circleci | .circleci/config.yml | ✅ | |
| Cypress-IO/Github- 액션 | 사용 -action.yml | ||
| Github 동작 | Single.yml | ||
| Github 동작 | 병렬 .ml |
Cypress Cloud에 기록 된 모든 CI 결과를 찾을 수 있습니다.
이 표는 CI 워크 플로의 추가 예를 보여줍니다. GitHub 작업 워크 플로를 제외하고는 위의 표에서와 같이 실시간 예제가 아니며 사용하기 전에 수정이 필요할 수 있습니다. GitHub Actions 워크 플로우는 라이브이며 Cypress Cloud에 녹음하지 않고 실행됩니다.
| CI 제공 업체 | 기본 구성 | 전체 병렬 구성 | 도커 예 |
|---|---|---|---|
| AWS 증폭 | Amplify.yml | ||
| AWS CodeBuild | 기본/buildspec.yml | buildspec.yml | |
| Azure 파이프 라인 | BASIC/AZURE-CI.YML | azure-ci.yml | |
| 친구 | 버디. yml | ✅ | |
| BuildKite | .buildkite/pipeline.yml | ||
| Circleci | BASIC/.CIRCLECI/CONFIG.YML | ✅ | |
| Cloudbees Codeship Pro | BASIC/CODESHIP-PRO | Codeship-Services.yml | ✅ |
| Github 동작 | Chrome.yml | ||
| Github 동작 | Chrome-Docker.yml | ✅ | |
| gitlab | 기본/.gitlab-ci.yml | .gitlab-ci.yml | ✅ |
| 젠킨스 | 기본/Jenkinsfile | Jenkinsfile | ✅ |
| 세마포어 2.0 | 기본/.semaphore.yml | .semaphore/semaphore.yml | |
| 트래비스 CI | Basic/.travis.yml | .travis.yml |
Cypress Documentation Page CI 제공 업체 예제는 가장 인기있는 CI 제공 업체와 Cypress를 사용하기위한 광범위한 가이드와 함께 몇 가지 예제를 제공합니다.
로컬 컴퓨터 에서이 repo에서 테스트를 실행하려면 먼저 .Node-Version 파일에 지정된 버전에 따라 Node.js 설치를 포함하여 시스템이 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 로컬 웹 서버를 시작한 다음 사이프러스 런을 사용하여 사이프러스 실행을 헤드리스로 실행하는 package.json 스크립트입니다. Cypress Tests를 대화식으로 실행하려면 Cypress Open을 사용하여 Cypress를 제목 모드로 실행하는 다음 명령을 실행하십시오. 개별 테스트를 선택하여 실행할 수 있습니다.
npm run local:open local:open 및 local:run 대한 대안으로 한 단계로 서버를 시작한 다음 두 번째 단계에서 Cypress를 실행할 수도 있습니다.
npm start # start server on port 8080 웹 브라우저를 열고 http://localhost:8080 으로 이동하면 서버가 실행 중인지 확인할 수 있습니다.
그런 다음 별도의 터미널 창에서도 실행됩니다
npx cypress run # for headless mode또는
npx cypress open # for headed interactive mode Scripts local:run 및 local:open NPM 모듈 START-SERVER-ANTESTS의 start-test 별명을 사용하여 RUN ./Scripts/start.js는 웹 서버를 시작한 다음 준비가되기를 기다렸다가 준비합니다. Cypress를 시작합니다.
start 스크립트는 NPM 모듈 서빙을 사용하여 웹 서버를 스폰하고 포트 8080 에 주방 싱크 앱을 표시합니다.
Docker가 로컬로 설치 한 경우, 예를 들어 Docker Desktop을 사용하여 Docker 컨테이너에서 대화식 으로이 리도록 테스트를 실행할 수 있습니다. Cypress Docker 이미지를 사용하여 Cypress를 실행하기위한 모든 전제 조건으로 구축되었습니다. 기본, 브라우저로 제공되며 Docker Hub 및 Amazon ECR (Elastic Container Registry) 공개 갤러리의 옵션이 포함되어 있습니다.
위와 같이, Repo를 복제하고 종속성을 설치하는 것으로 시작하십시오.
git clone https://github.com/cypress-io/cypress-example-kitchensink
cd cypress-example-kitchensink
npm ci메모
단순화를 위해 아래 Docker 예제는 latest 버전 태그가있는 cypress/base 와 같은 저장소 참조를 사용합니다. 이전 버전을 선택하려면 명시 적 태그 (예 : cypress/base:20.15.1 로 latest 를 바꾸십시오. 생산에는 명시 적 버전 태그가 권장됩니다. TAG 선택에 사용법이 자세히 설명되어 있습니다.
다음 예제는 브라우저가 포함 된 사이프러스/기본 이미지를 사용합니다. 대신 Cypress와 함께 번들 된 전자 브라우저를 사용합니다. Docker 컨테이너를 실행하려면 다음을 실행하십시오.
docker run -it --rm -v .:/e2e -w /e2e cypress/base:latest컨테이너 프롬프트가 나타나면 다음을 입력하십시오.
npx cypress install # install Cypress binary
npm run test:ci # start server and run tests in Electron browser
exit Cypress/Browsers 이미지를 사용하면 Chrome, Edge 및 Firefox 브라우저를 추가로 선택할 수 있습니다. 다음을 실행하십시오.
docker run -it --rm -v .:/e2e -w /e2e cypress/browsers:latest컨테이너 프롬프트가 나타나면 다음을 입력하십시오.
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 사이프러스/포함 된 이미지는 사이프러스/브라우저에 비해 전체 사이프러스 설치를 추가합니다. 크롬 브라우저로 테스트하는 한 줄 명령으로 컨테이너를 실행하려면 다음을 실행하십시오.
docker run -it --rm -v .:/e2e -w /e2e --entrypoint bash cypress/included:latest -c ' npm run test:ci:chrome ' # use for matching Cypress versions 이 저장소가 아직 최신 릴리스 Cypress 버전으로 업데이트되지 않은 경우 Repo 's Package.json의 Cypress 버전을 사용하여 위 명령의 latest 태그를 교체하십시오. 불일치 한 버전은 오류가 발생합니다.
메모
추가 브라우저 Chrome, Edge 및 Firefox는 linux/amd64 Architecture Images cypress/browsers 및 cypress/included 에만 설치됩니다. 브라우저는 linux/arm64 아키텍처 이미지 용으로 사전 설치할 수 없습니다. Cypress에 내장 된 Electron Browser는 모든 이미지 및 아키텍처에서 제공됩니다.
CI (Continuous Integration) 공급 업체에서 실행 테스트를 시도하려면 먼저 자신의 사본을 갖도록 저장소를 포크해야합니다. remote upstream (이 리포지트) 및 remote origin (포크)에 대한 별명을 올바르게 설정하려면 GitHub 문서를 참조하십시오. 또한 테스트하려는 CI 제공 업체와 계정이 있어야합니다.
기고 가이드 라인을 확인하십시오.
릴리스를 참조하십시오.
