ERRO 404: Not Found ao chamar a rota "http://localhost:8080/auth/login"

Fiz um teste logando diretamente pelo frontend e ele demorou bastante até que finalmente logou, mas ao observar as requisições a de login também apresentou status code 404, conforme abaixo:

Olá Renato! Tudo bem?

O erro 404 indica que a rota /auth/login não está sendo encontrada no seu servidor. Aqui estão algumas sugestões para solucionar esse problema:

1. Verifique as Rotas do Servidor: Certifique-se de que a rota /auth/login está definida corretamente no seu servidor. Pode ser que a rota esteja com um caminho diferente ou não esteja implementada.

2. Método HTTP Correto: A imagem mostra que você está tentando acessar a rota com um método GET, mas a autenticação geralmente é feita com POST. Verifique se o método HTTP está correto.

3. Configurações de Ambiente: Verifique se as variáveis de ambiente (como email e senha) estão configuradas corretamente no seu arquivo .env e se estão sendo carregadas no seu projeto.

Se após essas verificações o problema persistir, recomendo que compartilhe todo o seu projeto de teste. Assim poderei analisar tanto o código quanto as configurações que você aplicou no projeto.

Espero ter ajudado e bons estudos!

Olá, tudo bem e você ? Me desculpe, eu não sei como verificar essas questões! Eu estou usando o projeto que foi fornecido na aula e fiz exatamente como ela fez. A diferença é que no decorrer da aula deu certo e comigo não. Acredito que este curso esteja precisando de atualização, pois eu spo consegui chegar até esse ponto pq eu ainda tenho um certo conhecimento, porque o curso está bem confuso principalmente para quem não tem algum conhecimento.

Boa tarde, Renato! Peço perdão pela demora em responder.

Pegando a versão do projeto que você disponibilizou no seu repositório, na branch "testes", identifiquei que estavam faltando algumas partes de configuração e até mesmo o teste de login feito na aula. Então, vamos passo a passo.

Para corrigir: Use o projeto que está na branch "main" como base para aplicar os passos que deixarei abaixo. Faça o clone dele com:

git clone https://github.com/NatoFernandes/voll_cypress.git

Agora, faça a instalação das dependências e inicialização para cada projeto como mostrado na aula Configurando uma URL base.

1. Na pasta raiz do projeto crie o arquivo "cypress.env.json". Esse arquivo terá as informações de login, como email, senha e url do login.

   Imagem que ilustra a raiz do projeto onde o arquivo deve ser criado:

   

   Estrutura Json que deve ser colada dentro do arquivo "cypress.env.json", o arquivo recem criado:

   {
       "email": "clinica@gmail.com",
       "senha": "4321",
       "api_login": "http://localhost:8080/auth/login"
   }
   

2. No arquivo "cypress.config.js", você tem que adicionar a url base para o projeto Frontend. Então adicione a propriedade baseUrl: 'http://localhost:3000/', depois do objeto e2e. Abaixo segue um exemplo de como o seu código deve ficar, para caso queira apenas copiar e colar dentro do arquivo:

   const { defineConfig } = require("cypress");
   module.exports = defineConfig({
     e2e: {
            setupNodeEvents(on, config) {
         // implement node event listeners here
       },
       baseUrl: 'http://localhost:3000/',
       video: true,
         reporter: 'mochawesome',
         reporterOptions: {
           reportDir: 'cypress/results',
           overwrite: false,
           html: true,
           json: false,
           timestamp: "mmddyyyy_HHMMss"
       },
     }
   });
   

3. Acesse a pasta "cypress" e depois "suport", nela você vai entrar no arquivo "commands.js", ele por padrão vai estar apenas com comentários, então você deve apagar eles e adicionar todo o código que deixarei abaixo:

   Cypress.Commands.add('login', (email, senha) => {
       cy.session([email, senha], () => {
           cy.visit('/login')
           cy.get('[data-test="inputLoginEmail"]').type(email)
           cy.get('[data-test="inputLoginSenha"]').type(senha, { log: false })
           cy.get('[data-test="botaoTeste"]').should('be.visible').click()
           cy.location('pathname').should('eq', '/dashboard')
       })
   })
   
   Cypress.Commands.add('cadastraEspecialista', (nome, email, senha, especialidade, crm, imagem, cep, rua, numero, complemento, estado) => {
       cy.visit('/dashboard')
       cy.contains('Cadastrar especialista').should('be.visible').click()
       cy.get('[data-test="inputEspecialistaNome"]').type(nome)
       cy.get('[data-test="inputEspecialistaEmail"]').type(email)
       cy.get('[data-test="inputEspecialistaSenha"]').type(senha)
       cy.get('[data-test="inputEspecialistaSenhaVerificada"]').type(senha)
       cy.get('[data-test="inputEspecialistaEspecialidade"]').type(especialidade)
       cy.get('[data-test="inputEspecialistaCRM"]').type(crm)
       cy.get('[data-test="inputEspecialistaImagem"]').type(imagem)
       cy.get('[data-test="inputEspecialistaCEP"]').type(cep)
       cy.get('[data-test="inputEspecialistaRua"]').type(rua)
       cy.get('[data-test="inputEspecialistaNumero"]').type(numero)
       cy.get('[data-test="inputEspecialistaComplemento"]').type(complemento)
       cy.get('[data-test="inputEspecialistaEstado"]').type(estado)
   })
   
   Cypress.Commands.add('loginApi', (email, senha) => {
       cy.request({
           method: 'POST',
           url: Cypress.env('api_login'),
           body: {
               email: email,
               senha: senha
           }
       }).then(response => {
           expect(response.status).to.eq(200);
           expect(response.body.auth).to.be.true;
           expect(response.body.rota).to.eq('/clinica');
           expect(response.body.token).to.exist;
           cy.wrap(response.body.token).as('token');
       })
   })
   

4. Ainda dentro da pasta "cypress" acesse agora a pasta "e2e" e crie o arquivo "login-api.cy.js", nele você vai colar o código que deixarei abaixo, que é o responsável por realizar o teste:

   describe('Testes em API', () => {
       //caminho feliz
       context('Testes em rotas com usuário autorizado', () => {
           beforeEach(() => {
               cy.loginApi(Cypress.env('email'), Cypress.env('senha'))
           })
           it('GET via url front para teste em resposta da home', () => {
               cy.request("GET", "/").should((response) => {
                   expect(response.status).to.eq(200);
               });
           });
           it('Deve verificar se o token de autenticação é retornado após login via POST na API', () => {
               cy.get('@token').should('exist');
           });    
       });
   })
   

A resposta vai continuar na próxima postagem..

1. Por fim, voltando para a raiz do projeto, você tem que acessar a pasta "server" e dentro dela você deve criar o arquivo com o nome ".env", é importante que tenha o "." (ponto) no início do nome para que o arquivo esteja correto. Dentro do arquivo você deve por as configurações que deixarei abaixo. Essas são configurações de ambiente, serão utilizadas para definir onde e como os dados serão salvos e acessados, como o de login por exemplo.

   Configurações para colocar dentro do arquivo:

   DB_HOST="localhost"
   DB_PORT=3306
   DB_USER=root
   DB_PASSWORD=root
   DB_DATABASE=testemed
   SERVER_PORT=8080
   SECRET=qualquercoisa
   SECRET_KEY="qualquertextoaqui" 
   

   Segue uma imagem para mostrar a sequência para chegar na pasta "server" e onde o ".env" deve ficar:

   

Após todos esses passos, com o server e web rodando em seus respectivos terminais, ao rodar o cypress com o comando "npx cypress open" você deve conseguir rodar o seu teste sem mais problemas.

Fico à disposição!