Nó Web Flow

O nó Web Flow permite automatizar interações com páginas web usando seletores CSS, XPath, data-testid e texto. É ideal quando você precisa de seletores tradicionais e controle detalhado sobre a localização de elementos.

Dica: Se preferir localizadores semânticos baseados em acessibilidade (getByRole, getByLabel, etc.), use o nó Smart Locators.

Visão Geral

Configuração Geral

Browser

Firefox e WebKit são baixados automaticamente na primeira execução, caso não estejam instalados.

Dispositivo — Desktop

Presets de viewport disponíveis:

Dispositivo — Mobile

Usa perfis reais do Playwright (viewport, user agent, escala de pixels, touch). Modelos disponíveis:

iOS: iPhone SE, iPhone 12, iPhone 13, iPhone 14, iPhone 14 Pro, iPhone 15, iPhone 15 Pro, iPad Mini, iPad (gen 9), iPad Pro 11

Android: Pixel 5, Pixel 7, Galaxy S8, Galaxy S9+, Galaxy Tab S4

No modo Mobile com Firefox, as opções isMobile e hasTouch são removidas automaticamente (não suportadas pelo Firefox no Playwright). O viewport e o user agent do dispositivo continuam aplicados normalmente.

Modo de Sessão

• Nova Sessão (new): Abre um novo navegador para cada execução. Ideal para testes isolados.
• Reutilizar Sessão (reuse): Usa uma sessão de navegador já aberta por outro nó Web Flow/Smart Locators. Útil para dividir testes longos em múltiplos nós mantendo o mesmo navegador e cookies.

Estratégia de Storage

• Em Memória (inMemory): Cookies e localStorage são descartados ao final da execução
• Persistido (persisted): Cookies e localStorage são salvos com uma chave e podem ser reutilizados em execuções futuras. Ideal para manter sessões de login entre execuções.

Auditoria de Performance

Quando Auditoria de performance está habilitada, o Web Flow passa a monitorar a sessão Playwright e gerar evidências visuais de performance por tela.

O recurso coleta:

• Page Load da tela
• FCP (First Contentful Paint)
• LCP (Largest Contentful Paint)
• quantidade total de requests
• quantidade de requests de API
• erros de request/API
• APIs lentas por tela

Além do resumo global, o QANode gera checkpoints por tela navegada, com:

• nome da tela
• URL
• passo que originou a navegação
• gráfico das APIs mais lentas
• gráfico separado para erros de API quando existirem

Outputs de Performance

Quando a auditoria está ligada, o nó expõe:

• performancePassed
• performanceRequestCount
• performanceApiRequestCount
• performanceErrorCount
• performanceSlowRequestCount
• performance

O objeto performance contém um resumo estruturado da execução, incluindo os checkpoints por tela.

Passos (Web Steps)

O nó Web Flow executa uma sequência de passos configuráveis. Cada passo representa uma ação no navegador.

Ações Disponíveis

Estratégias de Seletor

O Web Flow usa estratégias de seletor para localizar elementos na página. Cada passo pode ter múltiplas estratégias ordenadas por prioridade — se a primeira não encontrar o elemento, a próxima é tentada.

Prioridade recomendada:

1. dataTestId — Mais estável, não muda com layout
2. css com ID — Geralmente único na página
3. role — Baseado em acessibilidade
4. text — Pode mudar com traduções
5. xpath — Último recurso, mais frágil

Detalhes das Ações

navigate

Navega para uma URL específica.

Exemplo:

URL: https://meusite.com/login
URL: {{ variables.BASE_URL }}/dashboard

click

Clica em um elemento da página.

O click tenta localizar o elemento usando cada estratégia na ordem. Se falhar, aguarda e tenta novamente (até o número de tentativas).

type

Digita texto em um campo de entrada.

Nota: A ação type usa fill() do Playwright, que substitui o valor do campo instantaneamente. Para simular digitação caractere por caractere, use o nó Smart Locators com a ação type (pressSequentially).

wait

Aguarda uma condição antes de prosseguir.

Modos:

assert

Verifica uma condição na página. Se a condição falhar, o passo é marcado como falha.

Modos:

Os resultados das asserções ficam disponíveis nos outputs:

{{ steps["web-flow"].outputs.asserts.nomeAsserção }}  →  true ou false

extract

Extrai dados de um elemento da página.

Atributos:

Os dados extraídos ficam disponíveis nos outputs:

{{ steps["web-flow"].outputs.extracts.nomeExtracao }}

hover

Passa o mouse sobre um elemento.

scroll

Rola a página ou até um elemento.

Modos:

refresh

Recarrega a página atual.

Eventos:

select

Seleciona uma opção de um elemento <select> (dropdown).

Critérios:

press-key

Pressiona uma tecla no teclado.

frame

Alterna o contexto para um iframe.

Modos:

Evidências (Screenshots)

Cada passo pode ter configuração de evidência individual:

Teste de Acessibilidade

O Web Flow suporta escaneamento automático de acessibilidade com axe-core integrado. Quando ativado, o nó audita a página após cada passo que captura screenshot, identificando violações WCAG/ARIA e marcando visualmente os elementos problemáticos.

Configuração

Como Funciona

A cada passo que tira screenshot, o axe-core é injetado na página e analisa o documento em busca de violações. As violações são desenhadas sobre o screenshot com caixas coloridas no elemento afetado e um painel de contagem no canto:

Ao final da execução são gerados automaticamente:

• Screenshots por passo — overlay com caixas coloridas + painel Critical N / Serious N / Moderate N / Minor N + top 2 regras
• Gráfico de severidade — {id}-accessibility-severity-chart.png — distribuição por nível
• Gráfico de regras — {id}-accessibility-rule-chart.png — top 8 regras mais violadas
• Relatório JSON — {id}-accessibility-report.json — dados completos de todas as violações

Critério de Aprovação

O nó falha se houver qualquer violação com severidade igual ou superior ao threshold configurado. Use none para nunca reprovar (coletar métricas sem bloquear o fluxo).

Exemplo: Auditoria de login

Configuração do nó:
  Accessibility Scan: true
  Fail When Severity >= : serious

Passos:
1. navigate → https://meusite.com/login    (sem screenshot = sem scan)
2. type → #email → "{{ variables.EMAIL }}" → screenshot after → scan executado
3. click → button[type="submit"]            → screenshot after → scan executado
4. wait → networkIdle
5. assert → loginOk → hasURL → /dashboard  → screenshot after → scan executado

Se qualquer passo tiver violação serious ou critical, o nó é reprovado com:

"Accessibility findings at or above "serious" were detected."

Outputs

Exemplo Completo

Login em um site

Passos configurados no nó:

1. navigate → https://meusite.com/login
2. type → Seletor: #email, Texto: {{ variables.USER_EMAIL }}
3. type → Seletor: #password, Texto: {{ variables.USER_PASSWORD }}
4. click → Seletor: button[type="submit"]
5. wait → Modo: networkIdle
6. assert → Nome: loginOk, Modo: textContains, Seletor: .welcome, Texto: Bem-vindo
7. extract → Nome: userName, Seletor: .user-name, Atributo: text

Resultado: Após execução, os outputs serão:

{
  "sessionId": "abc-123",
  "extracts": { "userName": "João Silva" },
  "asserts": { "loginOk": true }
}

Integração com Custom JavaScript

Após um nó Web Flow ser executado, a sessão do Playwright fica ativa e pode ser acessada diretamente em um nó Custom JavaScript posterior no mesmo fluxo.

Variáveis disponíveis no Custom JS

page, context e browser são atalhos diretos para a sessão ativa atual. Se não houver sessão ativa, lançam erro ao ser acessados.

Uso direto via page

Acesse a API do Playwright diretamente:

// Ler título e URL da página atual
const title = await page.title();
const url = page.url();

// Extrair texto de elemento
const text = await page.locator('.resultado').textContent();

// Executar JavaScript na página
const valor = await page.evaluate(() => document.querySelector('#campo').value);

// Contar elementos
const itens = await page.locator('li.item').count();

return { title, url, text, valor, itens };

Uso via web.run (com assertions Playwright)

O método web.run injeta o objeto expect do Playwright, permitindo assertions nativas:

return await web.run(async ({ page, expect, assert }) => {
  // Assertions Playwright
  await expect(page.getByRole('heading')).toContainText('Dashboard');
  await expect(page.locator('.status')).toBeVisible();

  // Ação customizada
  await page.keyboard.press('Escape');

  // Retornar dados
  const count = await page.locator('tr.item').count();
  return { count };
});

Namespace web completo

Múltiplas sessões

Quando há mais de um nó Web Flow/Smart Locators aberto no fluxo, cada um tem um sessionId distinto. Use web.session(id) para acessar uma sessão específica:

const sessao1 = web.session(steps["Web Flow 1"].outputs.sessionId);
const sessao2 = web.session(steps["Web Flow 2"].outputs.sessionId);

const url1 = sessao1.url();
const url2 = sessao2.url();

return { url1, url2 };

Exemplo: Validação avançada após login

[Web Flow]
  navigate → https://app.com/login
  type → #email → usuario@email.com
  click → #submit
  wait → networkIdle
    │
    ▼
[Custom JavaScript]
  return await web.run(async ({ page, expect }) => {
    // Assert que redirecionou para o dashboard
    await expect(page).toHaveURL(/\/dashboard/);

    // Extrair dados dinâmicos não alcançáveis pelo Web Flow
    const items = await page.evaluate(() =>
      [...document.querySelectorAll('.item')].map(el => el.dataset.id)
    );

    return { items };
  });

Dicas

• Use data-testid como estratégia principal de seletor — é mais estável
• Configure screenshots nos passos críticos para facilitar a depuração
• Use reutilização de sessão quando múltiplos nós Web Flow/Smart Locators precisam compartilhar o mesmo navegador
• Para formulários com autocomplete ou máscaras, considere usar o nó Smart Locators com a ação type (digitação caractere por caractere)
• O modo headless: false é útil durante o desenvolvimento para visualizar o que o teste está fazendo