Faz alguns meses que venho me dedicando a aprender automação de testes e2e com Cypress. Nesse processo, passei a frequentar um servidor do Discord de um dos cursos que estava fazendo e eis que um dos membros aparece pedindo ajuda para acessar uma string do sistema e utilizá-la para consulta em outra página. Confesso que não sabia exatamente como resolver a questão, mas me propus a ajudar. No final, aprendi a criar uma variável de ambiente com o Cypress (o que me viria a ser bem útil) e ainda ganhei um amigo. 👍
Esse aprendizado me ajudou em diversos testes e é uma dúvida recorrente que continua a aparecer naquele servidor do Discord, então resolvi compartilhar essa solução com vocês:
Para demonstrar todo o processo e também deixar que possam colocar o código em prática (para aqueles que, como eu, entendem melhor fazendo), fiz um site que gera um número aleatório e que precisa ser conferido posteriormente. Basicamente, na página inicial tem um botão que irá gerar um número entre 1000 e 9999, enquanto, na outra página, há um input em que o usuário deverá digitar esse número gerado anteriormente. Se o número digitado estiver correto, o sistema apresenta a mensagem ‘“Parabéns! O número está correto ;)”; se estiver errado, ‘“Oh não! O número está errado ):”
cy.pickNumber( )
(click aqui para acessar a página)
No Cypress, fiz 3 testes para esse site: o primeiro verificando se o número aleatório está sendo gerado e os outros verificando a resposta do sistema que apresenta se o número está correto ou errado. Para mantermos o foco, o que nos interessa neste momento são esses dois últimos testes.
Vamos por partes. Inicialmente, pedi para o Cypress abrir a página inicial “(indexPage.go( ))”, depois gerar o número “(indexPage.button( ))” e pegar o mesmo “(indexPage.pickNumber( ))”. Feito isso, ele irá acessar a segunda página “(indexPage.goVerifyPage( ))”, verificar se ela realmente foi acessada através do título “(indexPage.title( ))”, digitar o número gerado anteriormente “(indexPage.typeNumber(‘correct’))” e então, finalmente, dar o submit para verificar a resposta do sistema “(indexPage.checkResponse(expectedMessage))”.
Agora que sabemos o fluxo do teste, posso mostrar como acessei o número gerado e guardei ele em uma variável de ambiente para ser utilizado posteriormente. O que muitos iniciantes não sabem, é que no Cypress é possível utilizar as funções do JQUERY com o ‘invoke’ e, entre elas, temos a função “text”, a qual nos ajudará aqui. Ao selecionar a tag que contém o texto que precisamos, podemos chamar essa função e, então, pedir para o Cypress realizar determinadas tarefas usando o “then”.
Com isso, o “invoke(‘text’)” nos deixou acessar o nosso texto, enquanto o “then” permitiu utilizarmos esse elemento (o texto) para determinar algumas ações. No exemplo acima, pedi para o Cypress realizar determinada ação caso o texto do campo fosse diferente de “0000” para me assegurar que um número foi, de fato, gerado. Sendo essa sentença verdadeira, determinei que o número ($el) fosse gravado na variável de ambiente “Cypress.env(‘myNumber’)”, que nos permitirá utilizar este mesmo número gerado na nossa página para verificação.
Depois de pegarmos o número não tem segredo, é só acessar o input e mandar o “type” com a nossa variável criada “(Cypress.env(‘myNumber’))”.
Espero que este tutorial possa te ajudar nos seus futuros testes assim como vem sendo útil nos meus. Caso queira verificar todo o teste que fiz, você pode acessar o repositório do cy.pickNumber( ) que contém tanto o site quanto o teste em Cypress.
Seja o primeiro a comentar