Como Instalar o Playwright e Escrever seu Primeiro Teste em TypeScript

No artigo anterior vimos por que o Playwright se tornou uma das ferramentas mais utilizadas para automação de testes. Agora chegou a hora de colocar a mão na massa.

Neste guia você vai instalar o Playwright, entender a estrutura básica de um projeto e criar seu primeiro teste utilizando TypeScript.

Ao final do artigo você terá um projeto funcionando e estará pronto para explorar funcionalidades mais avançadas.

Pré-requisitos

Antes de começar, você precisará ter instalado em sua máquina:

Node.js (versão LTS recomendada)
Um editor de código, como o Visual Studio Code
Conhecimentos básicos de JavaScript ou TypeScript (não são obrigatórios, mas ajudam)

Para verificar se o Node.js está instalado, execute:

node --version

Também confira o npm:

npm --version

Se ambos retornarem uma versão, você está pronto para continuar.

Criando um novo projeto

Crie uma pasta para seu projeto:

mkdir playwright-demo

Entre nela:

cd playwright-demo

Agora inicialize um projeto Node.js:

npm init -y

Esse comando criará um arquivo package.json, responsável por gerenciar as dependências e scripts do projeto.

Instalando o Playwright

A maneira mais simples de começar é utilizando o instalador oficial:

npm init playwright@latest

Durante a instalação, algumas perguntas serão exibidas.

Na maioria dos casos, basta aceitar as opções sugeridas.

Ao final do processo, o Playwright instalará:

O framework de testes
Os navegadores necessários
Um projeto inicial
Alguns exemplos de testes

Entendendo a estrutura do projeto

Depois da instalação, sua estrutura será semelhante a esta:

playwright-demo/
│
├── tests/
│   └── example.spec.ts
│
├── playwright.config.ts
├── package.json
└── node_modules/

Os arquivos mais importantes são:

`tests/`

É onde ficarão seus testes automatizados.

Cada arquivo normalmente termina com:

.spec.ts

.test.ts

`playwright.config.ts`

Este arquivo centraliza as configurações do projeto.

É nele que você poderá definir:

URL base
Navegadores utilizados
Timeouts
Retries
Configurações de execução
Relatórios

Conforme seu projeto crescer, você passará bastante tempo configurando esse arquivo.

Criando seu primeiro teste

Dentro da pasta tests, crie um arquivo chamado:

home.spec.ts

Agora escreva o seguinte código:

import { test, expect } from '@playwright/test';

test('A página inicial deve possuir o título correto', async ({ page }) => {
  await page.goto('https://playwright.dev');

  await expect(page).toHaveTitle(/Playwright/);
});

Embora seja um teste simples, ele já demonstra a estrutura básica utilizada em praticamente qualquer projeto de automação.

Entendendo o código

Vamos analisar cada parte.

Importando o Playwright

import { test, expect } from '@playwright/test';

Aqui importamos duas funções principais:

test, responsável por criar um caso de teste.
expect, utilizada para realizar validações.

Criando um teste

test('A página inicial deve possuir o título correto', async ({ page }) => {

O primeiro parâmetro é apenas o nome do teste.

Já o objeto page representa uma aba do navegador, permitindo interagir com qualquer página web.

Navegando até um site

await page.goto('https://playwright.dev');

Esse comando abre a URL informada e aguarda automaticamente até que a navegação seja concluída.

Você não precisa adicionar esperas manuais.

Fazendo uma validação

await expect(page).toHaveTitle(/Playwright/);

Essa assertion verifica se o título da página contém a palavra Playwright.

Caso contrário, o teste falhará automaticamente.

Executando o teste

No terminal execute:

npx playwright test

Você verá uma saída semelhante a esta:

Running 1 test

✓ A página inicial deve possuir o título correto

1 passed

Parabéns!

Você acabou de executar seu primeiro teste automatizado.

Executando em modo visual

Caso queira acompanhar tudo acontecendo no navegador:

npx playwright test --headed

O navegador será aberto durante toda a execução do teste.

Essa opção é muito útil durante o aprendizado.

Conhecendo o UI Mode

Um dos recursos mais interessantes do Playwright é o UI Mode.

Execute:

npx playwright test --ui

A interface gráfica permite:

Executar apenas um teste específico
Filtrar testes
Reexecutar rapidamente
Visualizar falhas
Navegar pelos arquivos
Depurar testes de forma visual

É uma excelente ferramenta para desenvolvimento e aprendizado.

O que aprender depois?

Agora que você conseguiu criar seu primeiro teste, é hora de evoluir.

Os próximos assuntos que todo profissional de QA deveria estudar são:

Locators
Assertions avançadas
Fixtures
Hooks
Page Object Model (POM)
Mocking
API Testing
Network Interception
Execução paralela
GitHub Actions
Boas práticas de arquitetura

Dominar esses tópicos fará uma enorme diferença na qualidade e na escalabilidade das suas automações.

Quer aprender Playwright de forma prática?

Criar o primeiro teste é apenas o começo.

Em projetos reais, existem diversos desafios que não aparecem em exemplos simples: autenticação, organização da arquitetura, testes mais rápidos, manutenção da suíte e integração com pipelines de CI/CD.

Foi justamente pensando nisso que desenvolvi meu curso de Playwright com TypeScript.

Nele você aprenderá, passo a passo:

✅ TypeScript para automação de testes
✅ Arquitetura profissional de projetos
✅ Locators e assertions avançadas
✅ Fixtures e Page Object Model
✅ Mocking e interceptação de requisições
✅ Testes de API
✅ GitHub Actions e integração contínua
✅ Boas práticas utilizadas por equipes de Engenharia de Qualidade

Todo o conteúdo é baseado em situações reais enfrentadas por profissionais de QA, permitindo que você evolua muito mais rápido do que aprendendo apenas com exemplos isolados.

🎓 Conheça o curso completo:
👉 https://learnwithmarcos.com/api/udemy

No próximo artigo da série, veremos como localizar elementos corretamente utilizando Locators, uma das funcionalidades mais importantes para escrever testes robustos e fáceis de manter.