Teste de ponta a ponta: seu primeiro teste com Cypress |Documentação do Cypress (2024)

Adicione um arquivo de teste​

Assumindo que você tem sucessocipreste instaladoeCippress aberto, agora é hora de addyour primeiro teste.Nós vamos fazer isso com oCrie novo vaziobotão.

Ao clicar nele, você deve ver uma caixa de diálogo na qual você pode inserir o nome do seu Newspec.Basta aceitar o nome padrão por enquanto.

A especificação recém-gerada é exibida em uma caixa de diálogo de confirmação.Basta ir em frente e feche -o com o botão ✕.

Depois de criarmos esse arquivo, você deve vê-lo imediatamente exibido na lista de especificações de ponta a ponta.O Cypress monitora seus arquivos de especificações para quaisquer alterações e exibe automaticamente quaisquer alterações.

Embora ainda não tenhamos escrito nenhum código - tudo bem - vamos clicar em sua especificação e assistir o Cypress iniciá -lo.Alerta de spoiler: provavelmente vaiFALHAR.Não se preocupe, é só porque você ainda não configurou o Cypress para visitar o Apage em seu aplicativo!Vamos tentar algo diferente.

Escreva seu primeiro teste​

Agora é hora de escrever seu primeiro teste.Estava indo para:

1. Escreva seu primeiro teste de passagem.
2. Atualize -o para que falhe.
3. Assista ao Cypress Reload em tempo real.

Abra seu IDE favorito e substitua o conteúdo da sua especificação pelo CodeBelAw.

descrever('Meu primeiro teste', Assim, () => {
 isto('Não faz muito!', Assim, () => {
 esperar(verdadeiro).para.igual(verdadeiro)
 })
})

Depois de salvar essa alteração, você deve ver o navegador recarregar.

Embora não faça nada útil, este é o nosso primeiro teste de passagem!✅

NoLog de comandoVocê verá o cipreste exibir a suíte, o teste e sua primeira afirmação (que devem passar em verde).

Agora vamos escrever nosso primeiro teste de falha.

descrever('Meu primeiro teste', Assim, () => {
 isto('Não faz muito!', Assim, () => {
 esperar(verdadeiro).para.igual(falso)
 })
})

Depois de economizar novamente, você verá o Cypress exibir o teste de falha em vermelho desdeverdadeironão é igualfalso.

O CYPRESS também exibe o rastreamento da pilha e o quadro de código onde a assertionFailed (quando disponível).Você pode clicar no link do arquivo azul para abrir o arquivo onde ocorreu o erro emSeu abridor de arquivos preferido.Para ler mais sobre a tela do erro, leia sobreErros de depuração.

Ciprestefornece uma estrutura visual de supostos, testes e afirmações.Em breve, você também verá comandos, eventos de página, solicitações de rede e muito mais.

Escreva arealteste​

Um teste sólido geralmente abrange 3 fases:

1. Configure o estado do aplicativo.
2. Tomar uma ação.
3. Faça uma afirmação sobre o estado de aplicação resultante.

Você também pode ver isso formalista como "dado, quando, depois" ou "organize, agir, afirmar".Mas a idéia é: primeiro você coloca o aplicativo em um estado específico, depois toma alguma ação no aplicativo que faz com que ele mude e, finalmente, verifica o estado de aplicativo resultante.

Hoje, teremos uma visão estreita dessas etapas e as mapearemos de maneira limpa para o CypressCommands:

1. Visite uma página da web.
2. Consulta para um elemento.
3. Interagir com esse elemento.
4. Afirme sobre o conteúdo na página.

Etapa 1: Visite uma página​

Primeiro, vamos visitar uma página da web.Vamos visitar nossoPia da cozinhaAplicação neste exemplo, para que você possa tentar o Cypress sem precisar se preocupar em encontrar uma página para testar.

Podemos passar no URL que queremos visitar paracy.visit (). Vamos substituir nosso teste anterior pelo abaixo que realmente visita uma página:

descrever('Meu primeiro teste', Assim, () => {
 isto('Visita a pia da cozinha', Assim, () => {
cy.Visita('https://example.cypress.io')
 })
})

Salve o arquivo e mude novamente para o Cypress Test Runner.Você pode notar algumas coisas:

1. OLog de comandoagora mostra o novoVISITAAção.
2. A aplicação da pia da cozinha foi carregada noVisualização do aplicativoPaine.
3. O teste é verde, apesar de não fazermos afirmações.
4. OVISITAexibe aEstado azul pendenteaté que a página termine de carregar.

Se esse pedido voltou com um não2xxcódigo de status como404ou500, ou se houve um erro de JavaScript no código do aplicativo, o teste falharia.

Etapa 2: Consulta para um elemento​

Agora que temos uma página carregada, precisamos tomar alguma ação sobre ela.Por que não clicamos em um link na página?Parece fácil o suficiente, vamos procurar um Welike ... que taltipo?

Para encontrar este elemento por seu conteúdo, usaremoscy.contains ().

Vamos adicioná -lo ao nosso teste e ver o que acontece:

descrever('Meu primeiro teste', Assim, () => {
 isto('encontra o conteúdo "Tipo"', Assim, () => {
cy.Visita('https://example.cypress.io')

cy.contém('tipo')
 })
})

Nosso teste agora deve ser exibidoContémnoLog de comandoe ainda ser verde.

Mesmo sem adicionar uma afirmação, sabemos que está tudo bem!Isso ocorre porque muitos dos comandos do Cypress são construídos para falhar se não encontrarem o que esperam encontrar.Isso é conhecido como umAfirmação implícita.

Para verificar isso, substituatipocom algo não na página, comomoda. Você notará que o teste fica vermelho, mas somente depois de cerca de 4 segundos!

Você pode ver o que o Cypress está fazendo sob o capô?Está esperando automaticamente e retirando porque espera que o conteúdoeventualmenteser encontrado no DOM. Não falha imediatamente!

Antes de adicionar outro comando - vamos recuperar esse teste.Substituirmodacomtipo.

Etapa 3: Clique em um elemento​

Ok, agora queremos clicar no link que encontramos.Como fazemos isso?Adicione a.clique()Comando até o final do comando anterior, gosta de:

descrever('Meu primeiro teste', Assim, () => {
 isto('Clique no link "Tipo"', Assim, () => {
cy.Visita('https://example.cypress.io')

cy.contém('tipo').clique()
 })
})

Você quase pode ler como uma pequena história!O Cypress chama isso de "encadeamento" e Wechain juntos comandos para criar testes que realmente expressam o que o aplicativo faz de maneira declarativa.

Observe também que oVisualização do aplicativoO painel se atualizou ainda mais após o clique, seguindo o link e mostrando a página de Odestinação:

Agora podemos afirmar algo sobre esta nova página!

Etapa 4: faça uma afirmação​

Vamos fazer uma afirmação sobre algo na nova página em que clicamos.Perhapswe gostaria de garantir que o novo URL seja o URL esperado.Podemos fazer isso analisando o URL e encadeando uma afirmação com ele com.deve().

Aqui está o que parece:

descrever('Meu primeiro teste', Assim, () => {
 isto('Clicar em "Tipo" navega para um novo URL', Assim, () => {
cy.Visita('https://example.cypress.io')

cy.contém('tipo').clique()

 // deve estar em um novo URL que
 // inclui '/comandos/ações'
cy.url().deve('incluir', Assim, '/Commands/Ações')
 })
})

Adicionando mais comandos e afirmações​

Não estamos limitados a uma única interação e afirmação em um determinado teste.De fato, muitas interações em um aplicativo podem exigir várias etapas e a Areliyly alterar seu estado de aplicação de mais de uma maneira.

Podemos continuar as interações e afirmações neste teste adicionando outra cadeia para interagir e verificar o comportamento dos elementos nesta nova página.

Podemos usarcy.get ()Para selecionar um elemento baseado na classe deles.Então podemos usar o.tipo()comando para inserir textint a entrada selecionada.Finalmente, podemos verificar se o valor do inputReflect o texto que foi digitado com outro.deve().

Em geral, a estrutura do seu teste deve fluir consulta -> consulta -> ORASSERTION (s) comando (s).É uma prática recomendada não encadear nada após um comando de ação; para obter mais detalhes sobre por que isso é, veja nosso guia sobrecapacidade de repetição.

descrever('Meu primeiro teste', Assim, () => {
 isto('Recebe, tipos e afirma', Assim, () => {
cy.Visita('https://example.cypress.io')

cy.contém('tipo').clique()

 // deve estar em um novo URL que
 // inclui '/comandos/ações'
cy.url().deve('incluir', Assim, '/Commands/Ações')

 // Obtenha uma entrada, digite nele
cy.pegar('.Action-email').tipo('[EmailProtected]')

 // Verifique se o valor foi atualizado
cy.pegar('.Action-email').deve('tem.value', Assim, '[EmailProtected]')
 })
})

E aí está: um breve teste em Cypress que visita uma página, encontra e clica em um link, verifica o URL e verifica o comportamento de um elemento na nova página.Se lemos em voz alta, pode parecer:

Ou noDado, Assim,Quando, Assim,Entãosintaxe:

E ei, este é um teste muito limpo!Não tivemos que dizer nada sobrecomoAs coisas funcionam, apenas que gostaríamos de verificar uma série específica de eventos e resultados.

Registre testes com o Cypress Studio​

Se você deseja uma abordagem mínima de código para criar testes, você pode usarCypress StudioPara gravar suas interações de navegação e gerar testes.Visite nossoguiaPara maiores informações.

Próximos passos​

• Pegue nosso grátisTestando seu primeiro aplicativocurso.
• Saiba mais sobre oCYPRESS APPUi.
• Começartestando seu aplicativo.
• ConfigurarConclusão inteligente de códigoPara comandos e afirmações do Cypress.
• Registre seus resultados de teste paraCypress CloudRecursos obscurecidos como paralelização, detecção de flocos e muito mais.
• Confira aApp do mundo real (RWA)Demonstrações adicionais de práticas de teste de cipreste, configuração e estratégias em um projeto do mundo real.
• Pesquise a documentação de Cypress para encontrar rapidamente o que você precisa.