cypress example kitchensink
v3.1.2
Este é um exemplo de aplicativo usado para mostrar o teste Cypress.io de ponta a ponta (E2E). O aplicativo demonstra o uso da maioria dos comandos da API do CYPRESS. Além disso, este aplicativo de exemplo está configurado para executar testes E2E em várias plataformas de IC. Vários fluxos de trabalho demonstram o uso do IC de imagens do Cypress Docker, que fornecem ambientes compatíveis convenientes e pré-configurados para o cipreste. Os testes também são muito comentados.
Para ver a aplicação da pia da cozinha e para ver os comandos da API do CYPRESS demonstrados pelo aplicativo, visite exemplo.cypress.io.
Para uma referência completa de nossa documentação, acesse docs.cypress.io.
Para um exemplo de aplicação de pagamento que demonstre o uso do mundo real dos testes de ponta a ponta (E2E) Cypress.io, acesse o repositório Cypress-Io/Cypress-Realworld-App.
A tabela a seguir lista fluxos de trabalho ao vivo de vários fornecedores de IC. Cada um deles teste independentemente o conteúdo deste repositório de exemplo. Eles são executados e gravam usando o Cypress Cloud com seus resultados exibindo centralmente no Cypress Cloud ProjectId 4b7344 . Cada provedor de IC mostra seu status de construção em seu próprio site:
| Provedor de CI | Fluxo de trabalho | Construir status | Exemplo do docker |
|---|---|---|---|
| AppVeyor | appyor.yml | ||
| Circleci | .circleci/config.yml | ✅ | |
| CYPRESS-IO/GITHUB-ACTION | Usando-ACTION.yml | ||
| Ações do GitHub | single.yml | ||
| Ações do GitHub | parallel.yml |
Você pode encontrar todos os resultados do IC registrados na nuvem Cypress
Esta tabela mostra exemplos adicionais de fluxos de trabalho de IC. Com exceção dos fluxos de trabalho das ações do GitHub, esses não são exemplos ao vivo, como na tabela acima e podem exigir modificação antes do uso. Os fluxos de trabalho das ações do GitHub estão ativos e são executados sem gravar para o Cypress Cloud.
| Provedor de CI | Config básico | Config paralela completa | Exemplo do docker |
|---|---|---|---|
| AWS Amplify | amplify.yml | ||
| AWS CodeBuild | BASIC/BuildSpec.yml | buildspec.yml | |
| Oleodutos do Azure | BASIC/AZURE-CI.YML | Azure-Ci.yml | |
| Buddy.Works | buddy.yml | ✅ | |
| BuildKite | .buildkite/pipeline.yml | ||
| Circleci | básico/.circleci/config.yml | ✅ | |
| CloudBees Codeship Pro | básico/codeship-pro | Codeship-Services.yml | ✅ |
| Ações do GitHub | Chrome.yml | ||
| Ações do GitHub | Chrome-docker.yml | ✅ | |
| Gitlab | básico/.gitlab-ci.yml | .gitlab-ci.yml | ✅ |
| Jenkins | Basic/Jenkinsfile | Jenkinsfile | ✅ |
| Semphore 2.0 | básico/.Semaphore.yml | .Semaphore/Semaphore.yml | |
| Travis CI | básico/.Travis.yml | .Travis.yml |
Os exemplos de provedores da página de documentação do Cypress fornece mais alguns exemplos com guias extensos para o uso do CYPRESS com alguns dos fornecedores de IC mais populares.
Para executar os testes deste repositório em sua máquina local, primeiro verifique se sua máquina atende aos requisitos do sistema Cypress, incluindo a instalação do Node.js de acordo com a versão especificada no arquivo .Node-Version.
A execução das seguintes instruções clonará o repositório, instalará dependências e executará o 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 é um script package.json que inicia um servidor da web local e depois usa o Cypress Run para executar o Cypress sem cabeça. Se você deseja executar os testes do Cypress interativamente, execute o seguinte comando que usa o Cypress aberto para executar o Cypress no modo de cabeça. Você pode escolher testes individuais para executar.
npm run local:open Como alternativa ao uso do local:open e local:run scripts, você também pode iniciar o servidor em uma etapa e executar o Cypress em uma segunda etapa.
npm start # start server on port 8080 Você pode verificar se o servidor está em execução se você abrir um navegador da web e navegar para http://localhost:8080 .
Então em uma janela de terminal separada executar
npx cypress run # for headless modeou
npx cypress open # for headed interactive mode Os scripts local:run and local:open Use o alias start-test do módulo NPM Start-Server-e-Test para executar ./scripts/start.js, que inicia o servidor da web, espera que se prepare e depois Lança o Cypress.
O script start gera um servidor da web usando o módulo NPM serve e exibe o aplicativo de pia da cozinha na porta 8080 .
Se você instalou o Docker localmente, por exemplo, usando o Docker Desktop, poderá executar os testes a partir deste repositório interativamente em um contêiner do docker. Use imagens do Cypress Docker, que são construídas com todos os pré -requisitos para a execução do cipreste. Eles estão disponíveis como base, navegadores e opções incluídas no Docker Hub e na Galeria Pública do Amazon ECR (Elastic Container Registry).
Como acima, comece clonando o repositório e instalando dependências:
git clone https://github.com/cypress-io/cypress-example-kitchensink
cd cypress-example-kitchensink
npm ciObservação
Para simplificar, os exemplos do Docker abaixo usam uma referência de repositório, como cypress/base com a tag latest da versão. Para selecionar uma versão anterior, substitua latest por uma tag explícita, por exemplo, cypress/base:20.15.1 . As tags de versão explícitas são recomendadas para produção. O uso é explicado ainda mais na seleção de tags.
O exemplo a seguir usa uma imagem de cipreste/base que não contém navegadores. Você usará o navegador de elétrons com cipreste. Para executar o recipiente do docker, execute o seguinte:
docker run -it --rm -v .:/e2e -w /e2e cypress/base:latestQuando o prompt de contêiner aparecer, digite:
npx cypress install # install Cypress binary
npm run test:ci # start server and run tests in Electron browser
exit Com uma imagem Cypress/navegadores, você tem a escolha adicional dos navegadores Chrome, Edge e Firefox. Executar o seguinte:
docker run -it --rm -v .:/e2e -w /e2e cypress/browsers:latestQuando o prompt de contêiner aparecer, digite:
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 As imagens do cipreste/incluídas adicionam uma instalação completa do Cypress em comparação com o Cypress/navegadores. Execute o seguinte para executar o contêiner com um comando de uma linha, testando com o 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 Substitua a tag latest no comando acima usando a versão do Cypress no package.json do repo, se este repositório ainda não tiver sido atualizado para a versão mais recente do Cypress lançada. Observe que as versões incompatíveis causarão erros.
Observação
Navegadores adicionais Chrome, Edge e Firefox são instalados apenas em imagens de arquitetura linux/amd64 cypress/browsers e cypress/included . Os navegadores não estão disponíveis pré-instalados para imagens de arquitetura linux/arm64 . O navegador de elétrons, embutido para o Cypress, está disponível em todas as imagens e arquiteturas.
Se você deseja experimentar os testes de execução em um provedor de integração contínua (IC), precisará primeiro bifurar o repositório para ter sua própria cópia. Consulte a documentação do GitHub para configurar aliases para remote upstream (para este repositório) e remote origin (para o seu garfo) corretamente. Você também precisará ter uma conta com o provedor de IC com o qual deseja testar.
Confira a diretriz contribuinte.
Veja lançamentos.
