Módulo 0 (bônus): montar o projeto do zero

Numa pasta separada da trilha (não dentro de trilha-7/ nem do repositório do QA Learning, pra não misturar com nada), crie uma pasta nova e entre nela:

mkdir meu-projeto-playwright
cd meu-projeto-playwright

Agora inicie um projeto Node:

npm init -y

Isso cria um package.json: o arquivo que descreve o projeto (nome, versão) e vai guardar a lista de dependências instaladas. É o mesmo arquivo que já existe pronto em trilha-7/package.json — só que lá ele já veio preenchido.

Um comando de cada vez:

npm install -D @playwright/test

O -D significa "dependência de desenvolvimento": o Playwright é uma ferramenta pra testar o projeto, não faz parte dele quando ele vai pra produção. Depois de rodar, repare que o package.json ganhou uma seção devDependencies com o Playwright listado.

Agora instale o navegador que ele vai controlar:

npx playwright install chromium

São dois passos separados de propósito: instalar a ferramenta (npm) é diferente de instalar o navegador que ela controla (um download à parte, de uns 150 MB, só na primeira vez).

Crie um arquivo chamado playwright.config.js na raiz do projeto, com este conteúdo (digite ou copie, mas leia cada linha):

// @ts-check
const { defineConfig, devices } = require("@playwright/test");

module.exports = defineConfig({
  testDir: "./tests",
  use: {
    baseURL: "https://qa-learning-treino-production.up.railway.app",
  },
  projects: [
    { name: "chromium", use: { ...devices["Desktop Chrome"] } },
  ],
});

testDir diz onde o Playwright procura arquivos de teste. baseURL é o alvo padrão (o mesmo QA Treino que o resto da trilha usa, já publicado): assim os testes podem usar page.goto("/login.html") em vez da URL inteira toda vez. projects define em qual navegador os testes rodam; aqui só o Chromium, pra ficar leve.

Esse é o arquivo mínimo. O trilha-7/playwright.config.js tem mais algumas opções (relatório em JSON pro corretor ler, captura de trace em caso de falha) — dá uma olhada nele depois de terminar aqui, pra comparar.

Mais uma opção que existe, embora a gente não precise mexer nela: testIdAttribute. É ela que diz pro page.getByTestId(...) em qual atributo HTML procurar. O padrão do Playwright já é data-testid — exatamente o atributo que o QA Treino usa em todo elemento, por isso tudo funcionou sem configurar nada extra. Se um dia você testar um site que usa outro nome, tipo data-test ou data-cy, é aqui que você avisa o Playwright:

use: {
  baseURL: "...",
  testIdAttribute: "data-test", // só se o site NÃO usar data-testid
},

Depois dos passos acima, é assim que a pasta meu-projeto-playwright/ fica por dentro. Repare de onde veio cada item:

meu-projeto-playwright/
├── package.json          ← criado pelo "npm init -y" (passo 1)
├── package-lock.json     ← criado pelo "npm install" (passo 2, trava as versões)
├── node_modules/         ← criado pelo "npm install" (passo 2, o código do Playwright em si)
├── playwright.config.js  ← você criou na mão (passo 3)
├── tests/
│   └── exemplo.spec.js   ← você criou na mão (passo 4)
└── test-results/         ← o Playwright cria sozinho ao rodar (passo 5), guarda prints/vídeos de falha

node_modules/ e package-lock.json não existiam antes do npm install: é ali que o código de verdade do Playwright fica guardado (geralmente uma pasta pesada, por isso ela nunca é commitada no Git — só o package.json descreve o que precisa ser reinstalado). Compare essa árvore com a de trilha-7/, que você já viu nos módulos anteriores: é a mesma ideia, só que com mais Page Objects dentro de tests/ e pages/.

Não existe uma pasta playwright-report/ aqui: ela só aparece se você configurar um reporter específico pra isso (reporter: "html"). O trilha-7/playwright.config.js usa outra combinação, reporter: [["list"], ["json", ...]], que mostra o resultado direto no terminal e grava um resultado.json (é esse arquivo que verificar.py lê pra conferir seu exercício).

Crie a pasta tests/ e, dentro dela, um arquivo exemplo.spec.js:

mkdir tests

Conteúdo de tests/exemplo.spec.js:

const { test, expect } = require("@playwright/test");

test("a pagina de login carrega", async ({ page }) => {
  await page.goto("/login.html");
  await expect(page.getByTestId("login-form")).toBeVisible();
});

Repare que não existe Page Object nem nada "escondido" aqui: é o teste mais simples possível, só pra provar que a configuração está certa. A partir do Módulo 1, você vai ver esse mesmo teste (e outros) já escritos dentro de trilha-7/.

De dentro da pasta do projeto:

npx playwright test

Se aparecer 1 passed, o projeto está montado e funcionando, do zero, sem nada pronto. Esse é exatamente o resultado que trilha-7/ já te dá de cara — agora você sabe o que tem por trás.

Olhar de QA

Entender a configuração não é perda de tempo: quando um teste falha de um jeito estranho (não acha o navegador certo, não resolve a URL, não lê o relatório), saber o que cada peça do playwright.config.js faz é o que separa "reiniciar tudo e torcer" de "ler a mensagem de erro e saber exatamente onde olhar". Guarde essa pasta como referência; a partir daqui a trilha usa o projeto já pronto em trilha-7/, pra não repetir esse setup a cada módulo.