Configuração do VS Code para Playwright: Extensões, Configurações e Produtividade

A extensão oficial do Playwright para VS Code tem um botão "Pick locator" que resolve o locator certo clicando em um elemento num browser em execução. Elimina a maior parte do tempo gasto escrevendo seletores manualmente. Ela também conecta o debugger para você pausar num breakpoint e digitar await page.title() ou await page.locator('...').isVisible() diretamente no Debug Console sem reexecutar o teste.

Extensões essenciais

1. Playwright Test for VS Code (Oficial)

Essa é a extensão inegociável. Ela adiciona:

• Painel Test Explorer: visualize todos os seus testes organizados por arquivo, execute com um clique
• Executar testes individuais: clique no botão play ao lado de qualquer bloco test(...)
• Depurar testes: defina breakpoints, avance pelo código, inspecione o estado da page
• Gravar novos testes: inicie o Playwright Codegen de dentro do VS Code
• Mostrar browser: execute testes com o browser visível
• Pick locator: clique em um elemento no browser, receba o locator Playwright correto

Após instalar, procure o ícone do Playwright na barra lateral esquerda (parece uma máscara de teatro). Seus testes devem aparecer automaticamente se você tiver um playwright.config.ts na raiz do projeto.

1. Abra o painel Testing (Ctrl+Shift+P → "Show Testing")

2. Expanda seus arquivos de teste

3. Clique em ▶ para executar, ou no ícone de bug para depurar

2. ESLint

Destaca problemas de código enquanto você digita. Para projetos TypeScript/Playwright, configure com:

npm install -D eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin

Crie .eslintrc.json:

{
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint"],
  "extends": ["eslint:recommended", "plugin:@typescript-eslint/recommended"],
  "rules": {
    "no-unused-vars": "warn",
    "@typescript-eslint/no-explicit-any": "warn"
  }
}

3. Prettier

Formata o código automaticamente ao salvar. Essencial para estilo de código consistente. Instale:

npm install -D prettier

Crie .prettierrc:

{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5",
  "printWidth": 100
}

Nas configurações do VS Code, habilite format on save:

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

4. GitLens

Mostra quem alterou cada linha por último, histórico completo do git, comparação de branches. Não é específico do Playwright, mas é indispensável em qualquer projeto de time. Especialmente útil ao depurar: "quem mudou esse teste e por quê?"

5. Error Lens

Exibe erros de TypeScript/ESLint inline na linha onde ocorrem, em vez de apenas no painel Problems. Detecta erros mais rápido.

Configurações do VS Code para projetos Playwright

Abra o JSON de configurações (Ctrl+Shift+P → "Open User Settings JSON") e adicione:

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "typescript.tsdk": "node_modules/typescript/lib",
  "typescript.enablePromptUseWorkspaceTsdk": true,
  "typescript.suggest.autoImports": true,
  "editor.minimap.enabled": false,
  "editor.wordWrap": "on",
  "editor.rulers": [100],
  "files.associations": {
    "*.spec.ts": "typescript"
  },
  "terminal.integrated.defaultProfile.windows": "Git Bash",
  "explorer.confirmDelete": false
}

Fluxos de trabalho Playwright no VS Code

Executando testes pelo editor

Você tem três formas de executar um teste:

1. Painel Test Explorer: lista completa de testes, execute todos, por arquivo ou por tag

2. Botão play verde: passe o mouse sobre uma linha test(, clique em ▶

3. Terminal: npx playwright test (use flags como --headed, --debug)

O Test Explorer é ideal para rodar a suite completa. O botão inline é ideal para executar um único teste rapidamente.

Depurando um teste com falha

1. Defina um breakpoint na linha que está falhando (clique na margem esquerda)

2. No Test Explorer, clique com o botão direito no teste → "Debug Test"

3. O VS Code pausa no breakpoint

4. No Debug Console, você pode digitar comandos Playwright:

- await page.title() — veja o título da página atual

- await page.locator('[data-testid="btn"]').isVisible() — verifique o estado do elemento

- page.url() — veja onde o Playwright está

Isso é muito mais eficiente do que adicionar console.log e reexecutar.

Usando o Playwright Inspector pelo VS Code

1. Clique com o botão direito em um teste → "Debug Test"

2. Ou execute PWDEBUG=1 npx playwright test no terminal

O Playwright Inspector abre ao lado do browser. Você pode:

• Avançar pelas ações uma a uma
• Ver em tempo real para o que o locator resolve
• Selecionar novos locators clicando nos elementos

Gravando um novo teste

1. Na barra lateral da extensão Playwright, clique em "Record new"

2. Um browser abre

3. Faça as ações que quer automatizar

4. Clique em "Copy" para obter o código gerado

5. Cole no arquivo de teste e refine os seletores

Bom para conseguir um ponto de partida, mas sempre refine os seletores gerados para usar atributos data-testid.

Estrutura de projeto no VS Code

Um layout limpo de projeto Playwright que o VS Code gerencia bem:

my-playwright-project/
├── tests/
│   ├── e2e/
│   │   ├── login.spec.ts
│   │   ├── checkout.spec.ts
│   ├── api/
│   │   ├── users-api.spec.ts
│   ├── fixtures/
│   │   ├── auth.fixture.ts
│   │   └── index.ts
├── pages/
│   ├── LoginPage.ts
│   ├── DashboardPage.ts
├── playwright.config.ts
├── tsconfig.json
├── package.json
└── .env

O explorer do VS Code recolhe pastas bem, então essa estrutura é fácil de navegar.

Atalhos de teclado que valem conhecer

| Atalho | O que faz |

|--------|-----------|

| Ctrl+Shift+P | Paleta de comandos (busque qualquer comando) |

| Ctrl+P | Abrir arquivo rapidamente |

| Ctrl+Shift+F | Buscar em todos os arquivos |

| Ctrl+\ | Alternar terminal |

| F2 | Renomear símbolo (renomeia uma variável em todo o projeto) |

| F12 | Ir para definição |

| Alt+F12 | Visualizar definição (inline, sem navegar para outro lugar) |

| Ctrl+D | Selecionar próxima ocorrência da seleção |

| Alt+Shift+F | Formatar documento |

| Ctrl+/ | Alternar comentário de linha |

Os mais importantes para depuração no Playwright: F5 inicia a depuração, F10 avança, F11 entra na função, F5 novamente continua até o próximo breakpoint.

Nunca faça commit de segredos. Crie .env para variáveis de ambiente locais:

BASE_URL=https://staging.yourapp.com
ADMIN_EMAIL=admin@test.com
ADMIN_PASSWORD=TestAdmin1
API_KEY=your-test-api-key

Adicione ao .gitignore:

.env
.env.local
.env.*.local

import { defineConfig } from '@playwright/test';
import dotenv from 'dotenv';

dotenv.config();

export default defineConfig({
  use: {
    baseURL: process.env.BASE_URL || 'http://localhost:3000',
  },
});

Instale dotenv: npm install -D dotenv

A configuração certa do VS Code remove atrito do trabalho diário de automação de testes. Instale a extensão do Playwright primeiro, o resto pode vir incrementalmente conforme você descobre o que precisa.