Esse erro não está relacionado ao Cypress em si ele acontece antes, na comunicação entre o front-end e a API. Vamos por partes.
A mensagem indica um bloqueio de CORS (Cross-Origin Resource Sharing):
O front-end (adopet-frontend-cypress.vercel.app) está tentando acessar a API (adopet-api-i8qu.onrender.com), mas a API não está permitindo requisições vindas dessa origem.
O navegador faz primeiro uma requisição de preflight (OPTIONS) e, como a API não retorna o header Access-Control-Allow-Origin, o browser bloqueia a chamada.
Por isso:
- Não funciona no Cypress
- Não funciona manualmente no navegador
Ou seja, não é problema do teste.
Por que isso acontece no curso
No projeto do Adopet, a API precisa estar configurada para aceitar requisições do domínio do front-end. Se isso não estiver feito, qualquer tentativa de login ou cadastro vai falhar por CORS.
Em ambiente real, isso é resolvido no back-end, nunca no front-end ou no Cypress.
Como resolver corretamente
A solução é configurar o CORS na API. Alguns exemplos comuns:
Se a API for Node.js com Express
Usar o middleware cors:
const cors = require('cors');
app.use(cors({
origin: 'https://adopet-frontend-cypress.vercel.app',
methods: ['GET', 'POST', 'PUT', 'DELETE'],
credentials: true
}));
Ou, para testes/estudo:
app.use(cors());
Se a API estiver no Render
Verifique se:
- A versão publicada da API contém essa configuração
- O deploy foi feito após adicionar o CORS
- Não há erro no log da aplicação no Render
E no contexto do Cypress
O Cypress não ignora CORS, porque o problema acontece no navegador.
Então:
- Não adianta configurar nada no Cypress
- Não adianta desabilitar segurança do browser
- Se dá erro manualmente, vai dar erro no teste também
Esse tipo de dúvida é bem comum em testes E2E e, na prática, é até um ponto positivo: mostra que o teste está revelando um problema real de integração.