Cypress para Iniciantes - e2e tests em frontend apps
ฝัง
- เผยแพร่เมื่อ 4 มิ.ย. 2024
- Cypress, uma das ferramentas mais populares do mundo e incrível para testar aplicações Web.
Nesse video vou te mostrar como testar uma aplicação web do ponto de vista de usuários, inserindo valores, clicando em botões, disparando teclas e mais
De quebra, vou te mostrar como configurar um ambiente de integração contínua no GitHub Actions para que qualquer alteração no repositório faça com que a bateria de testes validade se o projeto continua funcionando
E para fechar, preparei desafios para você praticar e sair aplicando por toda a parte no seu trabalho
E aí, bora ver?
✅ MÉTODO TAJS
📌 Oportunidade TAJS: bit.ly/tajs-oportunidade0411
✅ CÓDIGO FONTE DA AULA
- Aplicação a ser testada: github.com/ErickWendel/vanill...
- Código fonte completo: bit.ly/cypress-for-begginers-...
✅ CHAPTERS
00:00 - O que você vai ver neste video
00:43 - Porque você deveria começar criar testes automatizados hoje mesmo
01:09 - O que você vai ver nesta aula
01:25 - Dicas de conteúdo sobre testes automatizados
01:55- Inicio da demo
02:10 - Versão do node.js usada no projeto
02:20 - Conheça o repositório do projeto base
03:24 - Inicializando um projeto node.js
04:11 - O arquivo da especificação de cenário de testes
04:48 - O desafio desta aula
05:23 - Versão do cypress utilizada e configuração básica
06:47 - Baixando o NTL para ver os scripts no package.json
07:18 - Configurando os testes e2e no cypress
09:05 - Adicionando configurações no cypress.config
10:41 - Testando o outro script
12:00 - Definindo a url do site na configuração
12:39 - Checando a especificação e criando as suites de testes
15:26 - Interagindo com o form de imagens
17:48 - Criando o primeiro teste, para verificar titulo e URL
19:19 - Testando as alterações
19:52 - Replicando o primeiro teste para o segundo teste
20:25 - Usando a linha do tempo de execução do Cypress
20:56 - Criando o teste para o click submit
21:45 - Validando se os campos estão corretos
22:28 - Funções do Cypress para validar objetos
23:04 - Testando alterações e corrigindo teste
23:47 - Como inspecionar os valores com debugger
24:51 - Replicando o teste para validar a URL
25:26 - Validando a cor do title input (vermelho para erro e verdade para sucesso)
27:54 - Buscando a cor da borda do title input
29:46 - Validando o campo de cor da borda com o assert
31:09 - Limpando o localStorage, para um teste não sujar o outro
32:00 - Adicionando uma Github Action para rodar os testes do projeto a cada git push
36:18 - Alguns detalhes do projeto completo
37:10 - Considerações finais sobre esta aula
37:59 - Erros de gravação
38:24 - Se inscreva no canal e compartilhe esse video! - วิทยาศาสตร์และเทคโนโลยี
Mano, você não é desse planeta 'c é loko'... Por isso o projeto em aliens kkkk ... Que explosão de mente! Like dado.
Hahahahahah dahora ne? O que mais curtiu do video?
Aulão! Já vou aplicar amanhã no trabalho.
O Playwright é muito bom tbm, indico dms!
Parabens pela aula! Grande Erick, mestre demais
Parabens pelo trabalho Erick! Gostei da abstracao do controle do form dentro da classe.
conteúdo bom demais, chegou bem na hora que eu precisava!!!
Animal mano, vai ajudar muito no meu dia a dia,
mais massa foi o final do vídeo com os erros de gravação.
Ah porra kkk!!
Muito TOP o conteúdo!
ahhahaahhahahahahh da raiva hahahahah valeuzaooo tmjjjj
Erick serial legal você apresentar o a Ferramenta de teste Playwright da microsoft
boaaaaaaaa
O problema é que a maioria dos testadores focam muito num framework mais "fácil" e não aprende programação e nem padrões de testes, aí fica uma "beleza" pra dar manutenção, às vezes é melhor apagar e fazer do zero com uma estrutura decente
eh fogo né? Por isso a ideia é escrever certo de primeira para nao sofrer depois
Muito legal esse approach feito na separação dos testes, uso cypress há anos e nunca tinha pensado em fazer desta forma!
Como foi que vc pensou em usar este tipo de separação? Queria entender melhor o que te levou a sair de um it maior pra um mais detalhado. Ele ajuda a clarificar melhor o erro quando der um problema?
Abraço!!!
Opaaaaa, ja usei o cucumber js e lá a divisão eh parecida com essa, então quis reproduzir a mesma organização, achei que fica bem mais fácil de ler e manter dessa forma 😍🤘🏻
Queria saber mais sobre o funcionamento da Lambda Layer com o Serverless Framework. Poderia criar um vídeo explicando?
Antes de começar o video já é o like e comentário, sei que será foda demais.
opaaaaaaa valeu demais manoooooooo
daora Erick estava precisando de um conteudo assim :D, eu estou com um problema cypress + bs5, modal nunca ta pronto pra ser clicado pelo cypress ai tem que ficar clicando varias vezes até o modal estar pronto, o cy.wait(1000) funciona mas de acordo com o cypress é um bad pattern
Algumas vezes tem que esperar mesmo, o que recomendam nesses casos?x
Excelente trabajo Erick! aprendi muy bien la palabra Beleza, jejeje saludos
hahahahahha hmuchas gracias amigo!
muito bom!
divo!!!!!!!!!!!!! mt obg
Tri afude, podia fazer um pra mobile tbm talvez usando o maestro, ai fecha a triade back front e mobile
Opaaaaa esse nao conheco! Vou pesquisar hehe
Vou utilizar isso no meu próximo hackathon!
Ai simmmmm validar antes pra nao quebrar na cara dos jurados!! Hahhaha
@@ErickWendelTraining Se eu ganhar eu te marco no LinkedIn falando tudo.👍🏽
Demaaaaaais
Ooorraaaa muito showww
Playwright ou Cypress ? to precisando usar um deles no trabalho, nunca vi nenhum dos dois, qual voce recomenda ?
Boa noite Erick. Para seguir o conteudo e fazendo local, devo partir do repo da aplicação ou começar um repo totalmente novo ? pq a pasta do in-class-project do repo dos testes, já esta com as implementações do video...fiquei meio perdido....e Parabéns pelo contéudo
Já entendi como que vai funcionar...estava acreditando que os testes deveriam ficar no proprio repo da aplicação, mas acho que já entendi como cypress trabalha... seria tipo selenium...massa demais !
esperando o cartão virar pra conseguir me matricular no TAS 😂😂
Pra uma aplicação que bate em API, eu teria que ter uma API rodando dedicada ao teste ou tem algo semelhante playwright que é possivel interceptar o request e mockar o retorno?
Testes e2e validam sua aplicação do ponto de vista de usuários, entao nesse caso sim, a aplicação deveria estar conectada na API normalmente e a automação iria direto no site completo
sobre o ntl, prefiro instalar npm i -D ntl, para que o projeto tenha tudo que gosto de usar. Existe alguma forma mais polida dos aplicativos instalados -D fiquem disponível no terminal, sem ser algo como export PATH="./node_modules/.bin:$PATH" ?
Você pode usar o npx pra ele mirar nos módulos do projeto. O ntl por ser um ferramental que lista as tarefas do seu package.json, pra mim ele eh um que não faz sentido adicionar nas deps de dev
waiting for english content ..
This video has subs in English friend😜
:)
gente, desculpa pq eu sou leiga Mas qual terminal é esse ?
:D
Tmjjjj
Não estou conseguindo acesso a lista vip do tajs
Opaa qual o erro?
qual extensão você usa pra melhorar a leitura dos cenários de teste?
Nenhuma!
@@ErickWendelTraining aqui pra mim aparece como texto normal em branco, não tem diferenciação de cores por exemplo das ações GIVEN, WHEN, THEN no arquivo app.feature
Why are you not creating content in english ? I love your content . But now you creating more content in our native language I don't understand it.
soorry my friend! I'll be back soon! In meanwhile doesn't the subs help to watch it?
Porra trampo com cypress os devs ficam puto com qa rsrs
Hahaha mostra o TAJS pra eles, que eles nunca mais vao passar vergonha com QAs haha
E eu achando que sabia fazer testes kkkkk