Nas “pitadas de Cypress” de hoje, aprenda como testar APIs com Cypress
Para exemplificar, vou usar o ServeRest, um projeto criado pelo Paulo Gonçalves para ajudar em estudos de testes de APIs.
Neste post, vou focar somente em requisições do tipo GET, ok?
Algumas das funcionalidades do ServeRest são a busca por usuários, produtos e carrinhos.
Vamos começar com uma busca por usuários.
describe('GET usuarios', () => { it('busca usuários corretamente', () => { cy.request({ method: 'GET', url: 'http://localhost:3000/usuarios' }).then((response) => { expect(response.status).to.equal(200); expect(response.body.usuarios[0].nome).to.equal('Fulano da Silva') expect(response.body.usuarios[0].email).to.equal('fulano@qa.com') }) }) })
Como você pode verificar no snippet de código acima, além de fazer uma verificação de que o status da resposta é de sucesso (200), também realizo verificações na estrutura do body da resposta, para garantir que o nome e email do primeiro usuário retornado estão de acordo com o esperado.
Vejamos agora uma busca por produtos, onde quero verificar mais de um produto, não somente o primeiro.
describe('GET produtos', () => { it('busca produtos corretamente', () => { const expectedResult = [ { nome: 'Logitech MX Vertical', descricao: 'Mouse', preco: 470, quantidade: 382 }, { nome: 'Samsung 60 polegadas', descricao: 'TV', preco: 5240, quantidade: 49977 } ] cy.request({ method: 'GET', url: 'http://localhost:3000/produtos' }).then((response) => { expect(response.status).to.equal(200); response.body.produtos.forEach((produto, indice) => { expect(produto.nome).to.equal(expectedResult[indice].nome) expect(produto.descricao).to.equal(expectedResult[indice].descricao) expect(produto.preco).to.equal(expectedResult[indice].preco) expect(produto.quantidade).to.equal(expectedResult[indice].quantidade) }) }) }) })
No exemplo acima, antes de tudo defino um array com o resultado esperado (o qual poderia até mesmo vir de uma fixture, mas vou falar disso em outro post).
O array contém dois objetos, ambos com as propriedades nome, descricao, preco e quantidade.
Por fim, faço uma requisição do tipo GET para o endpoint /produtos, e com o retorno da requisição, verifico o status de sucesso da resposta, além de iterar por todos os produtos retornados no body da resposta (usando a funcionalidade forEach do JavaScript) para verificar que o nome, descricao, preco e quantidade estão de acordo com o resultado esperado.
No último exemplo, vejamos um teste onde busco por carrinhos, passando como queryString uma quantidade total específica.
describe('GET carrinhos', () => { it('busca carrinhos por quantidade corretamente', () => { cy.request({ method: 'GET', url: 'http://localhost:3000/carrinhos?quantidadeTotal=3' }).then((response) => { expect(response.status).to.equal(200); expect(response.body.carrinhos.length).to.equal(1) }) }) })
No teste acima, verifico que somente um carrinho foi retornado no array de carrinhos a partir do body da resposta (utilizando a propriedade length), além do status de sucesso, é claro. 😉
Executando os três testes acima localmente, todos passaram, e em apenas 146ms. 🚀
Continuo coletando feedback e criando um backlog para os próximos posts. Deixa um comentário com o que gostaria que eu abordasse em um conteúdo futuro.
Este conteúdo foi traduzido para inglês e pode ser encontrado no DEV Community.
Quer aprender automação de testes com Cypress na prática? Conheça meus cursos na Escola Talking About Testing, ou no Udemy.
Como podemos garantir que um elemento não exista na tela, por exemplo um botão ou opção de um menu.
Obrigado pela pergunta Anderson! Já estou colocando no backlog para outro post.
Tá lá Anderson. https://talkingabouttesting.com/2021/02/08/como-verificar-que-um-elemento-nao-existe-na-tela-com-cypress/