Debug e Testes: Guia Completo de Ferramentas
Introdução às Ferramentas de Debug e Testes
A qualidade do software depende diretamente da capacidade de identificar e corrigir bugs rapidamente, além de garantir que o código funcione conforme esperado. Ferramentas de depuração e testes são essenciais para desenvolvedores modernos, permitindo encontrar problemas antes que cheguem aos usuários finais.
Neste guia completo, você vai conhecer as principais ferramentas do mercado: Chrome DevTools para depuração de aplicações web, Postman para testes de APIs, Jest para testes unitários em JavaScript, e Selenium para automação de testes end-to-end. Aprenderá quando usar cada uma, como configurá-las e as melhores práticas da indústria.
Índice do Guia
1. Chrome DevTools
- Inspector e Console
- Network e Performance
- Debugging JavaScript
2. Postman
- Testes de API REST
- Collections e ambientes
- Automação de testes
3. Jest
- Testes unitários
- Mocks e spies
- Coverage reports
4. Selenium
- Automação de testes
- WebDriver API
- Testes cross-browser
O que Você Precisa Saber
Conhecimentos prévios recomendados:
- JavaScript básico a intermediário
- HTML e CSS fundamentais
- Conceitos de HTTP e APIs REST
- Linha de comando e terminal
- Node.js e npm
- Noções de desenvolvimento web
Dica: Cada ferramenta serve um propósito específico no ciclo de desenvolvimento.
DevTools é para debug em tempo real, Postman para testes de API, Jest para testes unitários
automatizados, e Selenium para testes de interface end-to-end.
1Chrome DevTools
O Chrome DevTools é um conjunto completo de ferramentas de desenvolvimento e depuração integrado ao navegador Chrome. É indispensável para qualquer desenvolvedor web moderno.
Painéis Principais
Painéis de Inspeção
- Elements: Inspeciona e edita HTML/CSS
- Console: Executa JavaScript e visualiza logs
- Sources: Debug de código JavaScript
- Network: Monitora requisições HTTP
- Performance: Analisa performance da aplicação
Recursos Avançados
- Breakpoints condicionais
- Watch expressions
- Lighthouse para auditorias
- Device emulation
- Network throttling
- Memory profiling
Atalhos Essenciais
| Atalho | Função | Descrição |
|---|---|---|
| F12 / Ctrl+Shift+I | Abrir DevTools | Abre as ferramentas de desenvolvedor |
| Ctrl+Shift+C | Inspect Element | Ativa modo de inspeção de elementos |
| Ctrl+P | Quick Open | Busca rápida de arquivos |
| Ctrl+Shift+P | Command Menu | Acessa todos os comandos disponíveis |
| F8 | Resume/Pause | Continua ou pausa execução no debugger |
Debugging JavaScript
// Adicionar breakpoint programático
function calcularTotal(itens) {
debugger; // Execução pausa aqui
return itens.reduce((total, item) => total + item.preco, 0);
}
// Console logging avançado
console.log('Valor simples:', valor);
console.table(arrayDeObjetos);
console.group('Grupo de logs');
console.warn('Aviso importante');
console.error('Erro encontrado');
console.groupEnd();
// Medir performance
console.time('operacao');
// código a ser medido
console.timeEnd('operacao');
function calcularTotal(itens) {
debugger; // Execução pausa aqui
return itens.reduce((total, item) => total + item.preco, 0);
}
// Console logging avançado
console.log('Valor simples:', valor);
console.table(arrayDeObjetos);
console.group('Grupo de logs');
console.warn('Aviso importante');
console.error('Erro encontrado');
console.groupEnd();
// Medir performance
console.time('operacao');
// código a ser medido
console.timeEnd('operacao');
Network Panel - Análise de Requisições
Informações Disponíveis
- Status HTTP
- Tempo de resposta
- Tamanho dos recursos
- Headers da requisição
- Payload de dados
Filtros Úteis
- XHR/Fetch
- JS e CSS
- Imagens
- Fontes
- WebSockets
Recursos Performance
- Waterfall timing
- Cache analysis
- Throttling simulation
- HAR export
Melhor para: Debug em tempo real de aplicações web, análise de performance,
inspeção de requisições HTTP, otimização de CSS/HTML, identificação de memory leaks.
2Postman
Postman é a ferramenta líder para desenvolvimento, teste e documentação de APIs. Oferece uma interface intuitiva para testar endpoints REST, GraphQL, SOAP e WebSocket.
Recursos Principais
Funcionalidades Core
- Envio de requisições HTTP (GET, POST, PUT, DELETE, etc.)
- Gerenciamento de headers e autenticação
- Collections para organizar endpoints
- Ambientes (dev, staging, production)
- Testes automatizados com scripts
- Mock servers
Vantagens
- Interface visual amigável
- Compartilhamento de collections
- Documentação automática
- Integração CI/CD via Newman
- Suporte a variáveis e scripts
- Histórico de requisições
Instalação
# Download do site oficial
https://www.postman.com/downloads/
# Ou via Homebrew (macOS)
brew install --cask postman
# Ou via Snap (Linux)
sudo snap install postman
Exemplo de Teste Automatizado
// Script de teste no Postman (aba Tests)
// Verificar status code
pm.test("Status code é 200", function () {
pm.response.to.have.status(200);
});
// Verificar tempo de resposta
pm.test("Responde em menos de 200ms", function () {
pm.expect(pm.response.responseTime).to.be.below(200);
});
// Validar estrutura JSON
pm.test("Resposta contém dados do usuário", function () {
var jsonData = pm.response.json();
pm.expect(jsonData).to.have.property('id');
pm.expect(jsonData).to.have.property('nome');
pm.expect(jsonData.email).to.include('@');
});
// Salvar variável de ambiente
var token = pm.response.json().token;
pm.environment.set("auth_token", token);
// Verificar status code
pm.test("Status code é 200", function () {
pm.response.to.have.status(200);
});
// Verificar tempo de resposta
pm.test("Responde em menos de 200ms", function () {
pm.expect(pm.response.responseTime).to.be.below(200);
});
// Validar estrutura JSON
pm.test("Resposta contém dados do usuário", function () {
var jsonData = pm.response.json();
pm.expect(jsonData).to.have.property('id');
pm.expect(jsonData).to.have.property('nome');
pm.expect(jsonData.email).to.include('@');
});
// Salvar variável de ambiente
var token = pm.response.json().token;
pm.environment.set("auth_token", token);
Collections e Ambientes
Organizando Collections
- Agrupe por recurso ou funcionalidade
- Use pastas para organizar endpoints
- Adicione descrições detalhadas
- Inclua exemplos de requisições
- Configure pre-request scripts
Usando Ambientes
- Crie ambiente para cada servidor
- Use variáveis para URLs base
- Armazene tokens de autenticação
- Compartilhe ambientes com a equipe
- Versione suas configurações
Newman - CLI do Postman
# Instalar Newman
npm install -g newman
# Executar collection
newman run minha-collection.json
# Com ambiente específico
newman run collection.json -e ambiente-prod.json
# Gerar relatório HTML
newman run collection.json -r html --reporter-html-export relatorio.html
Melhor para: Testes de APIs REST, desenvolvimento de integrações,
documentação de endpoints, automação de testes de API, validação de contratos.
3Jest
Jest é um framework de testes JavaScript completo, desenvolvido pelo Facebook. É a escolha padrão para testes em projetos React, mas funciona perfeitamente com qualquer projeto JavaScript.
Características Principais
Recursos do Jest
- Zero config: Funciona out-of-the-box
- Snapshots: Testa componentes UI
- Mocking: Sistema integrado de mocks
- Coverage: Relatórios de cobertura
- Watch mode: Execução contínua
Vantagens
- Execução paralela de testes
- Mensagens de erro claras
- Integração com Babel e TypeScript
- Suporte a async/await nativo
- Comunidade grande e ativa
Instalação e Configuração
# Instalar Jest
npm install --save-dev jest
# Adicionar script no package.json
{
"scripts": {
"test": "jest",
"test:watch": "jest --watch",
"test:coverage": "jest --coverage"
}
}
# Executar testes
npm test
Exemplos de Testes
// math.test.js - Testes básicos
const { somar, subtrair } = require('./math');
describe('Operações matemáticas', () => {
test('soma 1 + 2 deve ser igual a 3', () => {
expect(somar(1, 2)).toBe(3);
});
test('subtração 5 - 3 deve ser igual a 2', () => {
expect(subtrair(5, 3)).toBe(2);
});
});
// Testes assíncronos
test('buscar dados da API', async () => {
const dados = await buscarDadosAPI();
expect(dados).toHaveProperty('id');
expect(dados.nome).toBeDefined();
});
// Testando arrays e objetos
test('lista contém item específico', () => {
const lista = ['maçã', 'banana', 'laranja'];
expect(lista).toContain('banana');
expect(lista).toHaveLength(3);
});
const { somar, subtrair } = require('./math');
describe('Operações matemáticas', () => {
test('soma 1 + 2 deve ser igual a 3', () => {
expect(somar(1, 2)).toBe(3);
});
test('subtração 5 - 3 deve ser igual a 2', () => {
expect(subtrair(5, 3)).toBe(2);
});
});
// Testes assíncronos
test('buscar dados da API', async () => {
const dados = await buscarDadosAPI();
expect(dados).toHaveProperty('id');
expect(dados.nome).toBeDefined();
});
// Testando arrays e objetos
test('lista contém item específico', () => {
const lista = ['maçã', 'banana', 'laranja'];
expect(lista).toContain('banana');
expect(lista).toHaveLength(3);
});
Mocks e Spies
// Mock de função
const mockCallback = jest.fn(x => x + 1);
[1, 2, 3].forEach(mockCallback);
expect(mockCallback).toHaveBeenCalledTimes(3);
expect(mockCallback).toHaveBeenCalledWith(1);
// Mock de módulo
jest.mock('./api');
const api = require('./api');
api.buscarUsuario.mockResolvedValue({ id: 1, nome: 'João' });
// Spy em método de objeto
const objeto = {
metodo: () => 'original'
};
const spy = jest.spyOn(objeto, 'metodo');
spy.mockReturnValue('mockado');
expect(objeto.metodo()).toBe('mockado');
expect(spy).toHaveBeenCalled();
const mockCallback = jest.fn(x => x + 1);
[1, 2, 3].forEach(mockCallback);
expect(mockCallback).toHaveBeenCalledTimes(3);
expect(mockCallback).toHaveBeenCalledWith(1);
// Mock de módulo
jest.mock('./api');
const api = require('./api');
api.buscarUsuario.mockResolvedValue({ id: 1, nome: 'João' });
// Spy em método de objeto
const objeto = {
metodo: () => 'original'
};
const spy = jest.spyOn(objeto, 'metodo');
spy.mockReturnValue('mockado');
expect(objeto.metodo()).toBe('mockado');
expect(spy).toHaveBeenCalled();
Snapshot Testing
// Component.test.js
import React from 'react';
import renderer from 'react-test-renderer';
import MeuComponente from './MeuComponente';
test('renderiza corretamente', () => {
const tree = renderer
.create(<MeuComponente nome="João" />)
.toJSON();
expect(tree).toMatchSnapshot();
});
import React from 'react';
import renderer from 'react-test-renderer';
import MeuComponente from './MeuComponente';
test('renderiza corretamente', () => {
const tree = renderer
.create(<MeuComponente nome="João" />)
.toJSON();
expect(tree).toMatchSnapshot();
});
Melhor para: Testes unitários JavaScript/TypeScript, testes de componentes React,
TDD (Test-Driven Development), integração contínua, projetos Node.js.
4Selenium
Selenium é o framework líder para automação de testes de interface web. Permite controlar navegadores de forma programática, simulando interações reais de usuários.
Componentes do Ecossistema
Componentes Principais
- WebDriver: API para controlar navegadores
- Selenium Grid: Execução paralela de testes
- Selenium IDE: Gravação de testes
- WebDriver Manager: Gerencia drivers
Navegadores Suportados
- Chrome (ChromeDriver)
- Firefox (GeckoDriver)
- Safari (SafariDriver)
- Edge (EdgeDriver)
- Opera
Instalação - Python
# Instalar Selenium
pip install selenium
# Instalar WebDriver Manager
pip install webdriver-manager
# Instalar ChromeDriver manualmente
brew install chromedriver # macOS
Instalação - JavaScript (Node.js)
# Instalar Selenium WebDriver
npm install selenium-webdriver
# Instalar ChromeDriver
npm install chromedriver
Exemplo Básico - Python
# test_exemplo.py
from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.common.keys import Keys
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC
# Inicializar driver
driver = webdriver.Chrome()
try:
# Navegar para página
driver.get("https://exemplo.com")
# Encontrar elemento
campo_busca = driver.find_element(By.NAME, "q")
# Interagir com elemento
campo_busca.send_keys("Selenium Python")
campo_busca.send_keys(Keys.RETURN)
# Esperar elemento aparecer
WebDriverWait(driver, 10).until(
EC.presence_of_element_located((By.ID, "resultado"))
)
# Assert
assert "Selenium" in driver.title
finally:
driver.quit()
from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.common.keys import Keys
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC
# Inicializar driver
driver = webdriver.Chrome()
try:
# Navegar para página
driver.get("https://exemplo.com")
# Encontrar elemento
campo_busca = driver.find_element(By.NAME, "q")
# Interagir com elemento
campo_busca.send_keys("Selenium Python")
campo_busca.send_keys(Keys.RETURN)
# Esperar elemento aparecer
WebDriverWait(driver, 10).until(
EC.presence_of_element_located((By.ID, "resultado"))
)
# Assert
assert "Selenium" in driver.title
finally:
driver.quit()
Exemplo JavaScript
// test.js
const { Builder, By, Key, until } = require('selenium-webdriver');
async function exemploTeste() {
let driver = await new Builder().forBrowser('chrome').build();
try {
// Navegar
await driver.get('https://exemplo.com');
// Encontrar e interagir
await driver.findElement(By.name('q')).sendKeys('webdriver', Key.RETURN);
// Esperar
await driver.wait(until.titleContains('webdriver'), 1000);
// Verificar
const titulo = await driver.getTitle();
console.log('Título:', titulo);
} finally {
await driver.quit();
}
}
exemploTeste();
const { Builder, By, Key, until } = require('selenium-webdriver');
async function exemploTeste() {
let driver = await new Builder().forBrowser('chrome').build();
try {
// Navegar
await driver.get('https://exemplo.com');
// Encontrar e interagir
await driver.findElement(By.name('q')).sendKeys('webdriver', Key.RETURN);
// Esperar
await driver.wait(until.titleContains('webdriver'), 1000);
// Verificar
const titulo = await driver.getTitle();
console.log('Título:', titulo);
} finally {
await driver.quit();
}
}
exemploTeste();
Localizadores de Elementos
| Localizador | Descrição | Exemplo Python |
|---|---|---|
| ID | Por atributo ID | By.ID, "meu-id" |
| NAME | Por atributo name | By.NAME, "username" |
| CLASS_NAME | Por classe CSS | By.CLASS_NAME, "btn" |
| CSS_SELECTOR | Seletor CSS | By.CSS_SELECTOR, ".classe" |
| XPATH | Expressão XPath | By.XPATH, "//div[@id='x']" |
Waits - Esperas Inteligentes
# Implicit Wait - Espera global
driver.implicitly_wait(10) # segundos
# Explicit Wait - Espera específica
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC
elemento = WebDriverWait(driver, 10).until(
EC.presence_of_element_located((By.ID, "meu-elemento"))
)
# Condições comuns
EC.title_contains("texto")
EC.element_to_be_clickable((By.ID, "botao"))
EC.visibility_of_element_located((By.CSS_SELECTOR, ".classe"))
EC.text_to_be_present_in_element((By.ID, "msg"), "Sucesso")
driver.implicitly_wait(10) # segundos
# Explicit Wait - Espera específica
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC
elemento = WebDriverWait(driver, 10).until(
EC.presence_of_element_located((By.ID, "meu-elemento"))
)
# Condições comuns
EC.title_contains("texto")
EC.element_to_be_clickable((By.ID, "botao"))
EC.visibility_of_element_located((By.CSS_SELECTOR, ".classe"))
EC.text_to_be_present_in_element((By.ID, "msg"), "Sucesso")
Melhor para: Testes end-to-end, automação de tarefas web, testes de regressão,
testes cross-browser, web scraping com interação complexa.
Comparativo das Ferramentas
Tabela Comparativa
| Critério | DevTools | Postman | Jest | Selenium |
|---|---|---|---|---|
| Tipo | Debug Tool | API Testing | Unit Testing | E2E Testing |
| Curva Aprendizado | Baixa | Baixa | Média | Média-Alta |
| Automação | Limitada | Alta (Newman) | Total | Total |
| CI/CD | Não | Sim | Sim | Sim |
| Velocidade | Instantânea | Rápida | Muito Rápida | Lenta |
| Custo | Gratuito | Freemium | Gratuito | Gratuito |
Recomendações por Cenário
Debug Frontend
Use DevTools
Perfeito para debug em tempo real, análise de CSS e performance
API Testing
Use Postman
Ideal para testar endpoints, validar contratos e documentar APIs
Testes Unitários
Use Jest
Melhor para TDD, cobertura de código e testes rápidos
Testes E2E
Use Selenium
Essencial para validar fluxos completos e interações de usuário
Melhores Práticas e Dicas
Estratégia de Testes
Pirâmide de Testes
Base: Testes Unitários (70%)
- Rápidos e baratos
- Alta cobertura
- Fácil manutenção
- Use Jest ou similar
Meio: Testes de Integração (20%)
- Testam interações entre componentes
- Validam APIs
- Use Postman + Newman
Topo: Testes E2E (10%)
- Mais lentos e complexos
- Testam fluxos críticos
- Use Selenium
Boas Práticas Gerais
Escrita de Testes
- Testes devem ser independentes
- Use nomes descritivos
- Siga padrão AAA (Arrange, Act, Assert)
- Evite testes frágeis
- Mantenha testes simples
Organização
- Estruture testes por funcionalidade
- Use helpers e fixtures
- Mantenha dados de teste separados
- Documente casos complexos
- Versionize configurações
CI/CD
- Execute testes em cada commit
- Configure relatórios automáticos
- Use paralelização quando possível
- Defina threshold de cobertura
- Monitore tempo de execução
Exemplo de package.json com Scripts
// package.json
{
"scripts": {
// Jest
"test": "jest",
"test:watch": "jest --watch",
"test:coverage": "jest --coverage",
"test:ci": "jest --ci --coverage --maxWorkers=2",
// Postman via Newman
"test:api": "newman run collection.json -e ambiente.json",
// Selenium
"test:e2e": "node selenium-tests/run-all.js",
// Todos os testes
"test:all": "npm run test && npm run test:api && npm run test:e2e"
}
}
Atenção: Testes não substituem code review e análise de segurança.
Use-os como parte de uma estratégia completa de qualidade de software.
Resolução de Problemas Comuns
Chrome DevTools
Problema: DevTools não abre ou trava
Solução:
- Limpe cache e cookies do navegador
- Desative extensões que podem causar conflito
- Atualize o Chrome para última versão
- Reinicie o navegador em modo anônimo para testar
- Verifique se há conflitos com outras ferramentas de desenvolvedor
Postman
Problema: Requisições retornam erro de CORS
Solução:
- CORS é uma restrição do navegador, não afeta Postman Desktop
- Use Postman Desktop em vez da versão web
- Desative "Interceptor" se estiver habilitado
- Configure o servidor para aceitar requisições do Postman
- Adicione headers CORS necessários manualmente
Jest
Problema: Testes passam localmente mas falham no CI
Solução:
- Verifique diferenças de timezone entre ambientes
- Garanta que todas as dependências estão instaladas no CI
- Use --maxWorkers=2 para evitar problemas de concorrência
- Adicione --forceExit se houver processos pendentes
- Configure variáveis de ambiente corretamente
Selenium
Problema: ElementNotInteractableException
Solução:
- Use explicit waits antes de interagir com elementos
- Verifique se o elemento está visível na tela
- Scroll até o elemento antes de clicar
- Aguarde animações CSS terminarem
- Use JavaScript executor como alternativa: driver.execute_script("arguments[0].click()", elemento)
Ferramentas Complementares
Alternatives ao Jest
- Mocha: Framework flexível e minimalista
- Jasmine: BDD framework independente
- AVA: Runner de testes concorrente
- Vitest: Alternativa moderna e rápida
Alternatives ao Selenium
- Cypress: Testes E2E modernos e rápidos
- Playwright: Automação cross-browser da Microsoft
- Puppeteer: Controle headless do Chrome
- TestCafe: Sem WebDriver, mais estável
Ferramentas de Cobertura
- Istanbul/NYC: Cobertura de código
- Codecov: Plataforma de análise
- Coveralls: Tracking de cobertura
- SonarQube: Análise de qualidade completa
Debugging Avançado
- React DevTools: Debug componentes React
- Vue DevTools: Inspetor para Vue.js
- Redux DevTools: Debug state management
- Charles Proxy: Proxy HTTP para análise
Recursos e Links Úteis
Chrome DevTools
Selenium
Cursos e Tutoriais Recomendados
Plataformas de Ensino
- Udemy - Cursos práticos
- Pluralsight - Conteúdo profissional
- Test Automation University - Gratuito
- Ministry of Testing
Recursos Gratuitos
- YouTube - Tutoriais variados
- freeCodeCamp
- Testing Library
- Martin Fowler - Testing
Integração com CI/CD
Exemplo GitHub Actions
# .github/workflows/test.yml
name: Tests
on: [push, pull_request]
jobs:
test:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- name: Setup Node.js
uses: actions/setup-node@v2
with:
node-version: '18'
- name: Install dependencies
run: npm ci
- name: Run unit tests
run: npm run test:ci
- name: Run API tests
run: npm run test:api
- name: Upload coverage
uses: codecov/codecov-action@v2
name: Tests
on: [push, pull_request]
jobs:
test:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- name: Setup Node.js
uses: actions/setup-node@v2
with:
node-version: '18'
- name: Install dependencies
run: npm ci
- name: Run unit tests
run: npm run test:ci
- name: Run API tests
run: npm run test:api
- name: Upload coverage
uses: codecov/codecov-action@v2
Exemplo GitLab CI
# .gitlab-ci.yml
image: node:18
stages:
- test
unit-tests:
stage: test
script:
- npm ci
- npm run test:coverage
coverage: /All files[^|]*\|[^|]*\s+([\d\.]+)/
artifacts:
reports:
coverage_report:
coverage_format: cobertura
path: coverage/cobertura-coverage.xml
e2e-tests:
stage: test
image: selenium/standalone-chrome
script:
- npm ci
- npm run test:e2e
image: node:18
stages:
- test
unit-tests:
stage: test
script:
- npm ci
- npm run test:coverage
coverage: /All files[^|]*\|[^|]*\s+([\d\.]+)/
artifacts:
reports:
coverage_report:
coverage_format: cobertura
path: coverage/cobertura-coverage.xml
e2e-tests:
stage: test
image: selenium/standalone-chrome
script:
- npm ci
- npm run test:e2e
Conclusão
Ferramentas de debug e testes são fundamentais para garantir a qualidade e confiabilidade do software moderno. Cada ferramenta tem seu papel específico no ciclo de desenvolvimento, e usá-las em conjunto cria uma estratégia robusta de qualidade.
Resumo das Recomendações
- Chrome DevTools: Sua primeira linha de defesa para debug em tempo real. Essencial para todo desenvolvedor web, oferece insights instantâneos sobre HTML, CSS, JavaScript e performance
- Postman: A ferramenta definitiva para desenvolvimento e teste de APIs. Simplifica validação de endpoints, documentação e automação de testes de integração
- Jest: O padrão da indústria para testes unitários JavaScript. Rápido, confiável e com excelente experiência de desenvolvedor, perfeito para TDD
- Selenium: Quando você precisa garantir que fluxos críticos funcionam de ponta a ponta. Indispensável para testes de regressão e validação cross-browser
O investimento em testes e debug não é opcional no desenvolvimento profissional. Código bem testado é mais fácil de manter, refatorar e escalar. Além disso, detectar bugs cedo no ciclo de desenvolvimento é exponencialmente mais barato do que corrigir problemas em produção.
Comece com testes unitários usando Jest, adicione testes de API com Postman, e complemente com testes E2E usando Selenium para fluxos críticos. Use Chrome DevTools diariamente para debug e otimização. Essa combinação oferece cobertura completa e confiança no código.
Próximo Passo: Escolha um projeto existente e comece adicionando testes
unitários básicos com Jest. Depois, experimente automatizar testes de API com Postman.
A prática consistente é a chave para dominar essas ferramentas essenciais.