JavaScript para QA Engineers: O Mínimo para Começar a Automatizar

Os testes do Playwright usam uma fatia estreita do JavaScript: variáveis, funções, objetos, arrays, destructuring e async/await. A maioria dos iniciantes ou pula a linguagem completamente e não consegue debugar quando algo quebra, ou tenta aprender JavaScript inteiro primeiro e nunca chega a escrever testes.

Por que JavaScript especificamente para QA

Testes do Playwright são arquivos JavaScript (ou TypeScript). Quando você escreve:

await page.click('.submit-button');

Aquele await, aquela arrow function, aquele argumento string são todos JavaScript. Se você não entende o que await faz, não consegue debugar um teste que trava. Se não entende variáveis, não consegue extrair um valor da página e verificá-lo.

A boa notícia: automação de QA usa uma fatia pequena e previsível do JavaScript. Você não está construindo aplicações web. Está escrevendo scripts que interagem com elas. Os padrões de código se repetem.

Variáveis: let e const

Duas formas de armazenar valores:

// const: o valor não muda após a atribuição
const baseUrl = 'https://lab.becomeqa.com';
const timeout = 5000;

// let: o valor pode mudar
let tentativasLogin = 0;
tentativasLogin = tentativasLogin + 1;

No código de testes, use const por padrão. Só recorra ao let quando precisar reatribuir.

Você também vai ver var em código mais antigo. Ignore. Tem comportamento de escopo que causa bugs. const e let o substituíram.

Tipos de dados

Os tipos que você vai usar de verdade no código de testes:

// String — texto
const username = 'admin@becomeqa.com';
const password = 'testpass123';

// Number — para timeouts, contagens, verificações de preço
const timeout = 30000; // 30 segundos em ms
const quantidadeItens = 5;

// Boolean — para condições
const estaLogado = true;
const temErro = false;

// null / undefined — ausência de valor
// Você vai ver esses em assertions
const tituloItem = null; // intencionalmente vazio

Em testes do Playwright, strings e números aparecem em todo lugar. Booleans aparecem em condições. null aparece quando algo não é encontrado.

Funções

Funções empacotam código para que você possa reutilizá-lo. Dois estilos que você vai ver:

// Função regular (estilo mais antigo, ainda comum)
function gerarEmail() {
  return `user_${Date.now()}@teste.com`;
}

// Arrow function (moderna, comum no código Playwright)
const gerarEmail = () => `user_${Date.now()}@teste.com`;

// Arrow function com corpo (múltiplas linhas)
const login = async (page, email, password) => {
  await page.getByRole('button', { name: 'Login' }).click();
  await page.getByLabel('Email').fill(email);
  await page.getByLabel('Password').fill(password);
  await page.getByRole('button', { name: 'Submit' }).click();
};

Arrow functions são o padrão no código Playwright moderno. async antes da função significa que ela usa await internamente, coberto no Async/Await em Português Simples (para Testadores que se Perdem com Promises).

Objetos

Objetos agrupam dados relacionados:

// Um objeto com propriedades
const usuario = {
  email: 'admin@becomeqa.com',
  password: 'testpass123',
  role: 'admin',
};

// Acessar uma propriedade com notação de ponto
console.log(usuario.email);  // 'admin@becomeqa.com'

// Ou notação de colchetes
console.log(usuario['email']);  // mesmo resultado

No Playwright, objetos aparecem constantemente como opções passadas para funções:

// { name: 'Login' } é um objeto
await page.getByRole('button', { name: 'Login' }).click();

// { data: { title: 'Tokyo' } } é um objeto aninhado
await request.post('/api/items', { data: { title: 'Tokyo' } });

Arrays

Arrays armazenam listas de valores:

const status = ['Planejado', 'Em andamento', 'Concluído'];
const precos = [9.99, 14.99, 29.99];

// Acessar pelo índice (começa em 0)
console.log(status[0]);  // 'Planejado'
console.log(status[2]);  // 'Concluído'

// Tamanho
console.log(status.length);  // 3

Em testes, arrays aparecem quando você pega múltiplos elementos da página:

// Pegar todos os textos de linhas de uma tabela
const linhas = await page.getByRole('row').allTextContents();
// linhas é agora um array: ['Tokyo', 'Paris', 'London']
expect(linhas).toContain('Tokyo');

if / else: tomando decisões

// Condição básica
if (usuario.role === 'admin') {
  await page.goto('/admin');
} else {
  await page.goto('/dashboard');
}

// Verificando algo ausente
const mensagemErro = await page.getByText('Credenciais inválidas').isVisible();
if (mensagemErro) {
  console.log('Login falhou como esperado');
}

A comparação === (três iguais) verifica tanto o valor quanto o tipo. Sempre use === em vez de == no JavaScript.

Template literals: construindo strings

Forma antiga (confusa com muitas variáveis):

const url = 'https://' + ambiente + '.lab.becomeqa.com/item/' + itemId;

Forma moderna com backticks:

const url = `https://${ambiente}.lab.becomeqa.com/item/${itemId}`;

Template literals (strings com backtick) permitem embutir variáveis com ${}. Você vai vê-los constantemente no código de testes para construir URLs, mensagens e dados de teste.

Destructuring: extraindo de objetos e arrays

Esse padrão aparece em todo lugar no código de fixtures do Playwright e Page Object Model:

// Em vez disso:
const email = usuario.email;
const password = usuario.password;

// Você pode fazer isso (destructuring):
const { email, password } = usuario;

Com arrays:

const [primeiro, segundo] = ['Tokyo', 'Paris', 'London'];
// primeiro = 'Tokyo', segundo = 'Paris'

No Playwright, você vai ver isso constantemente nos parâmetros de teste:

// O { page, request } aqui é destructuring do objeto de fixture
test('deve funcionar', async ({ page, request }) => {
  // page e request estão disponíveis diretamente
});

Módulos: import e export

Arquivos de teste do Playwright importam do framework e do seu próprio código:

// Importar do pacote Playwright
import { test, expect } from '@playwright/test';

// Importar seu page object
import { LoginPage } from '../pages/LoginPage';

// Importar dados de teste
import { usuariosTeste } from '../data/users';

Quando você cria um arquivo auxiliar, exporta dele:

// Em utils/helpers.ts
export const baseUrl = 'https://lab.becomeqa.com';

export function gerarEmailDeTeste() {
  return `teste_${Date.now()}@exemplo.com`;
}

E os loops?

Você vai precisar de loops no código de testes às vezes, mas menos do que esperaria. Os casos principais:

// Loop por um array de dados de teste
const destinos = ['Tokyo', 'Paris', 'London'];

for (const destino of destinos) {
  await page.getByLabel('Destino').fill(destino);
  await page.getByRole('button', { name: 'Salvar' }).click();
}

O loop for...of é o mais claro para iterar arrays. forEach, map, filter são cobertos em um artigo separado sobre métodos de array.

O que confunde todo mundo: async/await

Quase toda linha de código Playwright tem await na frente:

await page.goto('https://lab.becomeqa.com');
await page.getByRole('button', { name: 'Login' }).click();
await expect(page.getByText('Dashboard')).toBeVisible();

A regra é simples: qualquer método do Playwright que interage com o navegador retorna uma Promise, e você precisa de await para esperar ela terminar.

Se você esquecer o await, o teste geralmente roda a próxima linha antes de a ação atual terminar, causando falhas confusas e intermitentes.

Isso é importante o suficiente para ter Async/Await em Português Simples (para Testadores que se Perdem com Promises). A versão curta: sempre coloque await antes das chamadas do Playwright. O TypeScript vai avisar se você esquecer.

O que você não precisa (ainda)

Coisas que engenheiros de QA frequentemente tentam aprender antes de precisar, criando confusão desnecessária:

• Classes: úteis para Page Object Model, mas você pode entender POM sem saber classes profundamente primeiro
• Promises/then/catch: async/await é a substituição moderna; aprenda await primeiro
• Closures, protótipos, o event loop: internos do JavaScript que raramente afetam o código de testes
• Manipulação de DOM: você está usando o Playwright para interagir com o DOM; não o manipula diretamente

Aprenda essas coisas quando um problema específico exigir. Não antes.

Um teste completo usando tudo acima

Um teste Playwright que usa todos os conceitos deste artigo:

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

// Objeto: dados do usuário
const usuarioTeste = {
  email: 'admin@becomeqa.com',
  password: 'testpass123',
};

// Template literal: URL dinâmica
const baseUrl = 'https://lab.becomeqa.com';

test('usuário consegue adicionar um item de viagem', async ({ page }) => {
  // Destructuring: extrai email e password do objeto
  const { email, password } = usuarioTeste;

  // Funções (métodos do Playwright) com await
  await page.goto(baseUrl);
  await page.getByRole('button', { name: 'Login' }).click();
  await page.getByLabel('Username').fill(email);
  await page.getByLabel('Password').fill(password);
  await page.getByRole('button', { name: 'Submit' }).click();

  // Variável string
  const destino = 'Tokyo';
  
  await page.getByRole('button', { name: 'Add Item' }).click();
  await page.getByLabel('Destination').fill(destino);

  // Boolean: verificando se algo está visível
  const botaoSalvar = page.getByRole('button', { name: 'Save' });
  
  // Condicional
  if (await botaoSalvar.isVisible()) {
    await botaoSalvar.click();
  }

  // Array: allTextContents retorna um array
  const linhas = await page.getByRole('row').allTextContents();
  
  // expect no array
  expect(linhas.some(linha => linha.includes(destino))).toBeTruthy();
});

Esse é um teste real e completo. O JavaScript que ele usa é exatamente o que foi abordado neste artigo. Nada mais.

FAQ

Não. Aprenda conceitos do JavaScript conforme precisar deles. Comece a escrever testes Playwright imediatamente usando os padrões acima e pesquise quando ficar confuso. "Aprenda JS primeiro, depois Playwright" leva muita gente a aprender JS por meses e nunca chegar ao Playwright.

TypeScript. A documentação oficial do Playwright usa TypeScript. TypeScript adiciona tipos ao JavaScript, o que significa que seu editor pega erros antes de você rodar os testes. A diferença é pequena para iniciantes. Veja TypeScript para QA: Por que os Tipos Estáticos Melhoram Seus Testes para os detalhes.

Pesquise. MDN Web Docs (developer.mozilla.org) é a melhor referência para recursos da linguagem JavaScript. A documentação do Playwright (playwright.dev) cobre as APIs específicas do Playwright. Entre essas duas fontes, toda pergunta sobre código de testes tem uma resposta.

2 a 4 semanas de prática diária costuma ser suficiente para ser produtivo. Você vai continuar aprendendo coisas específicas conforme as encontrar, mas 2 a 4 semanas de trabalho focado nos conceitos deste artigo já te deixa escrevendo e entendendo testes reais.

O conceito que mais trava os iniciantes é async/await. Ele está por baixo de toda interação do Playwright. Entendê-lo desbloqueia o debug.