Nó Smart Web Flow

O nó Smart Web Flow é o nó recomendado para automação web no QANode. Ele combina gravação pela extensão Chrome, localizadores semânticos, seletores CSS/XPath, contexto visual da página, validações de efeito esperado e mecanismos conservadores de recuperação para executar cenários em aplicações web modernas.

Ele foi criado para lidar melhor com sistemas enterprise e páginas dinâmicas, como CRMs, ERPs, ServiceNow, Salesforce, SAP, Jira, portais internos, aplicações com iframes, menus, grids, kanban, componentes ricos e interfaces que mudam pequenas partes do DOM entre uma execução e outra.

Recomendação: Para novos cenários web, prefira Smart Web Flow. Os nós Web Flow e Smart Locators continuam disponíveis para compatibilidade e casos específicos.

Visão Geral

Quando Usar

Use o Smart Web Flow quando:

• o fluxo será gravado pela extensão Chrome;
• a tela possui menus, dropdowns, modais, iframes, listas, tabelas, grids ou cards;
• os elementos podem mudar de posição entre execuções;
• você precisa de screenshots por passo;
• você quer validações automáticas após ações importantes;
• você quer receber sugestões de melhoria após execuções bem-sucedidas;
• o mesmo fluxo precisa rodar com dados variáveis, como número de chamado, nome de cliente, card, item ou registro.

Considere usar outro nó quando:

• você já possui um fluxo legado simples em Web Flow e ele está estável;
• você precisa de um seletor CSS/XPath manual muito específico e não quer usar os metadados do Smart Web;
• você está automatizando algo que não é web, como API, banco de dados ou mobile nativo.

Configuração Geral

Storage e Sessão

Para fluxos que exigem login, MFA ou SSO, use a extensão Chrome para salvar a sessão e configure o nó com storage persistido. Assim, o QANode pode reutilizar cookies e localStorage em execuções futuras sem refazer o login manualmente.

Use inMemory para testes isolados e persisted para aplicações que precisam manter autenticação entre execuções.

Como o Smart Web Flow Encontra Elementos

Cada passo pode ter mais de uma pista para encontrar o alvo correto. Em vez de depender de um único seletor, o Smart Web Flow combina sinais diferentes:

O objetivo é ser resiliente sem clicar em qualquer coisa parecida. Quando a tela fica ambígua, o Smart Web Flow tende a falhar e mostrar diagnóstico em vez de escolher um alvo incerto.

Texto do Escopo

O campo Texto do escopo aparece quando o passo foi gravado dentro de um item repetido, como:

• linha de tabela;
• card de kanban;
• item de lista;
• bloco de resultado;
• container com vários botões iguais.

Ele informa ao QANode em qual linha/card/lista procurar o alvo.

Exemplo

Imagine uma tabela com vários botões Abrir:

Se o alvo é o botão Abrir da linha INC0010002, o localizador do botão sozinho não é suficiente. O Texto do escopo pode ser:

INC0010002

Assim, o QANode procura primeiro a linha/card que contém esse texto e só depois resolve o elemento dentro desse escopo.

Usando Variáveis

O texto do escopo aceita expressões:

{{ variables.numeroChamado }}
{{ steps["Criar chamado"].outputs.extracts.numero }}

Isso é útil quando o dado muda a cada execução, mas a intenção permanece a mesma: agir no card, linha ou item correspondente ao valor daquele teste.

Boas Práticas

• Use um texto curto e único dentro do item, como número, código, nome ou título.
• Evite usar o texto completo de um card grande se uma parte menor já identifica o item.
• Para dados variáveis, use {{ }} em vez de deixar o valor gravado fixo.
• Se vários itens possuem textos parecidos, complemente o fluxo com asserts ou extrações para confirmar o item correto.
• Quando possível, peça ao time de desenvolvimento para expor data-testid, data-qa, labels ou nomes acessíveis.

Estratégias e Ordem de Tentativa

Em uma execução normal, o Smart Web Flow tenta resolver o passo usando as estratégias gravadas e os metadados disponíveis. Em termos práticos:

1. tenta a estratégia preferida quando ela já foi validada em execuções anteriores;
2. tenta localizadores semânticos, quando aplicáveis;
3. tenta seletores CSS/XPath registrados;
4. usa contexto de linha/card/controle quando o alvo é repetido ou customizado;
5. se Self Healing estiver habilitado, tenta recuperação conservadora;
6. se não houver confiança suficiente, o passo falha com diagnóstico.

O usuário não precisa configurar essa ordem manualmente na maioria dos casos. O importante é revisar se o passo gravado representa a intenção correta: elemento, texto, escopo, ação e efeito esperado.

Efeitos Esperados

Alguns passos gravados possuem Efeitos esperados gerados automaticamente pela extensão ou pelo motor. Eles descrevem o que o QANode observou como resultado provável de uma ação, por exemplo:

Como Interpretar

Na UI, o usuário não configura cada efeito individualmente. O controle disponível é a chave Usar efeitos esperados, que liga ou desliga a validação automática daquele passo.

Mantenha Usar efeitos esperados ligado quando a ação precisa provar que a tela mudou. Exemplos:

• clique que abre menu;
• botão que abre modal;
• ação que navega para outra página;
• ação que abre nova aba;
• hover que revela submenu;
• clique que precisa deixar o próximo campo visível.

Desligue Usar efeitos esperados naquele passo quando:

• a página é muito dinâmica e o efeito aponta para um item volátil;
• o efeito depende de dados que mudam sempre;
• a tela abre o mesmo container, mas o próximo alvo real depende de outro passo;
• o passo já possui uma espera explícita mais adequada.

Quando precisar de controle manual, use ações como wait e assert. Elas são mais indicadas para esperas e validações definidas diretamente pelo usuário.

Promoção Gradual

Efeitos esperados gravados pelo Smart Web Flow começam de forma conservadora. Quando o QANode observa o mesmo cenário rodando com sucesso e o mesmo alvo sendo confirmado repetidas vezes, ele pode transformar essa pista em uma validação mais forte.

Isso evita que um efeito criado por timing, mudança momentânea de DOM ou item dinâmico quebre cenários logo na primeira execução.

Self Healing

Quando Self Healing está habilitado, o Smart Web Flow tenta recuperar o alvo caso as estratégias gravadas não encontrem mais o elemento.

Ele pode ajudar quando:

• o texto mudou levemente;
• um botão mudou de posição;
• um ID deixou de existir, mas o elemento continua com o mesmo papel;
• um link mudou o texto, mas manteve contexto e destino semelhantes;
• um campo foi renderizado por outro componente visual.

Ele evita aplicar recuperação quando:

• existem muitos candidatos parecidos;
• a ação pode ser destrutiva e o alvo não está claro;
• o contexto mudou de forma incompatível;
• o melhor candidato não é claramente melhor que o segundo.

Quando uma recuperação é usada, a execução mostra o item em Self-healing aplicado. O usuário pode revisar e aplicar ao fluxo quando fizer sentido.

Importante: Self Healing não substitui uma boa gravação. Ele é uma rede de segurança para mudanças comuns de UI, não uma garantia de que qualquer tela alterada será interpretada corretamente.

Otimizações Após Execução

Depois de execuções bem-sucedidas, o QANode pode sugerir melhorias para o Smart Web Flow.

As sugestões mais comuns são:

• promover uma estratégia que funcionou melhor;
• adicionar espera antes de um alvo que apareceu tarde;
• registrar um frame/iframe detectado automaticamente;
• remover hover opcional que não foi necessário para a execução passar;
• ajustar validações de efeito esperado que foram confirmadas.

Essas otimizações aparecem nos detalhes da execução. Revise antes de aplicar.

O QANode evita mostrar a mesma sugestão repetidamente quando a definição do fluxo não mudou. Se você alterar passos, seletores ou dados relevantes da UI, novas sugestões podem aparecer.

Ações Disponíveis

Detalhes das Ações

navigate

Navega para uma URL.

Use navigate no início do fluxo ou quando desejar ir diretamente para uma rota específica.

switchPage

Alterna a execução para outra aba/janela aberta pelo navegador.

Use quando um clique abre uma nova aba e os próximos passos devem continuar nela.

frame

Alterna o contexto para um iframe ou volta para a página principal.

Use quando a aplicação renderiza campos ou botões dentro de iframes.

O Smart Web pode detectar iframe automaticamente em alguns casos e sugerir a inclusão de um passo frame para tornar futuras execuções mais rápidas.

click e dblclick

Executam clique ou duplo clique em um elemento.

Mantenha Usar efeitos esperados ligado para cliques que abrem menu, modal, página, dropdown ou próximo campo.

fill

Preenche um campo de texto, input, textarea ou componente editável.

Para editores ricos, como campos com contenteditable, prefira gravar pelo Smart Web Flow e revise se o alvo gravado representa a área real de edição.

check e uncheck

Marca ou desmarca checkboxes, radios e controles equivalentes.

O Smart Web Flow tenta lidar com controles estilizados, quando o input real está oculto mas existe um label ou container clicável.

selectOption

Seleciona uma opção em um <select> ou dropdown compatível.

Para dropdowns customizados que não são <select>, a extensão normalmente grava uma sequência de click/press/wait em vez de selectOption.

hover

Passa o mouse sobre um elemento.

Use quando um menu ou submenu aparece apenas ao passar o mouse.

O Smart Web Flow trata hover como uma ação curta e objetiva. Se o próximo alvo já estiver visível sem hover, a execução pode sugerir remover o hover opcional para reduzir ruído no fluxo.

focus

Coloca foco em um elemento.

É útil antes de press, em campos que reagem ao foco, ou em componentes customizados que só aceitam teclado depois de focados.

press

Pressiona uma tecla ou combinação.

Exemplos:

Enter
Escape
Tab
Control+A
Meta+S
ArrowDown

Use press para confirmar formulários, navegar em menus, selecionar opções por teclado ou acionar atalhos da aplicação.

setSlider

Ajusta um slider/range.

drag and drop

Arrasta um elemento de origem para um destino.

O Smart Web Flow grava e executa drag/drop usando uma combinação de:

• localizador da origem;
• localizador ou contexto do destino;
• identidade do card/item;
• coordenadas como fallback;
• ajustes de movimento para componentes customizados.

Dicas para drag/drop

• Prefira gravar a ação real pela extensão.
• Quando o destino é uma coluna, lista ou lane, revise se o alvo gravado representa o container e não apenas outro card.
• Para cards dinâmicos, use texto de escopo ou variáveis para identificar o card correto.
• Se a aplicação precisa de tempo para estabilizar depois do drop, adicione waitAfter ou uma espera explícita.

scroll

Rola a página ou um container.

refresh

Recarrega a página atual.

clock

Controla o relógio JavaScript do navegador usando a API de clock do Playwright.

Use em cenários que dependem de datas, timers, expiração, contagem regressiva ou regras por horário.

O clock controla o tempo JavaScript observado pela página. Ele não altera o horário do servidor nem respostas de APIs externas.

wait

Aguarda uma condição antes de continuar.

Modos comuns:

• tempo fixo;
• elemento visível;
• elemento oculto;
• elemento habilitado;
• texto presente;
• URL ou título esperado.

Use waits para estabilizar páginas lentas, pós-navegação, grids que carregam por API ou componentes que aparecem depois de animações.

assert

Valida uma condição e registra o resultado.

Modos disponíveis incluem:

• visível / oculto;
• texto contém / texto igual;
• quantidade esperada;
• habilitado / desabilitado;
• marcado;
• valor esperado;
• atributo esperado;
• URL;
• título.

Asserts são importantes para transformar uma automação em teste: eles provam que o resultado esperado apareceu.

extract

Extrai um valor único da página.

O valor extraído fica disponível em:

{{ steps["Nome do Nó"].outputs.extracts.nome }}

extractList

Extrai dados de elementos repetidos, como cards, linhas, resultados ou itens de uma lista.

Configure:

• seletor do item repetido;
• campos dentro de cada item;
• nome e atributo de cada campo;
• limite máximo de itens.

extractTable

Extrai dados tabulares de uma tabela ou grid.

Use quando a tela possui uma tabela HTML, grid estruturado ou lista tabular que deve virar saída estruturada.

O resultado pode ser usado em nós posteriores, asserts, relatórios ou expressões.

Evidências por Passo

Cada passo pode capturar screenshot.

Use screenshots em ações críticas, validações, transições de tela e pontos que precisam aparecer no relatório.

Auditoria de Performance

Quando habilitada, a auditoria de performance coleta informações por tela:

• tempo de carregamento;
• FCP e LCP;
• quantidade de requests;
• APIs lentas;
• erros de rede/API;
• gráficos e relatório de performance.

O Smart Web Flow cria checkpoints por navegação, refresh, troca de aba e ações que recarregam a página.

Acessibilidade

Quando a varredura de acessibilidade está habilitada, o QANode executa uma análise da página e gera evidências com os problemas encontrados.

Use esse recurso para complementar testes funcionais com checks básicos de acessibilidade, especialmente em telas críticas.

Gravando com a Extensão Chrome

O jeito mais simples de criar um Smart Web Flow é usar o QANode Recorder no Chrome.

1. Instale a extensão: QANode Recorder na Chrome Web Store
2. Abra a página que deseja testar.
3. Selecione o modo Smart Web Flow no popup da extensão.
4. Escolha o modo de captura:
   • Touch mode para gravar interagindo normalmente com a página;
   • Inspect mode para selecionar elementos, revisar ações sugeridas e gravar passos com mais controle.
5. Clique em Start.
6. Execute o fluxo manualmente no site ou use os painéis do Inspect mode para montar as ações.
7. Use os atalhos de gravação quando precisar:
   • Ctrl+A para assert;
   • Ctrl+E para extract;
   • Ctrl+Shift+E para extract list;
   • Ctrl+Alt+W para wait;
   • Ctrl+Alt+T para extract table.
8. Clique em Stop ou finalize pelo painel do Inspect mode.
9. Copie o JSON.
10. Cole no canvas do QANode com Ctrl+V.

A extensão grava:

• passos executados;
• screenshots, quando configurado;
• localizadores e seletores alternativos;
• contexto de escopo;
• identidade do alvo;
• iframes;
• sessão/storage, quando habilitado;
• efeitos esperados para menus, overlays, navegação e próximos alvos.

Dicas de Estabilidade

Prefira intenção a posição

Evite depender apenas de nth ou de coordenadas. Quando houver elementos repetidos, use texto de escopo, variáveis, labels ou atributos estáveis.

Use waits nos lugares certos

Se uma tela demora para carregar, adicione wait antes do alvo que aparece tarde. Evite aumentar timeouts em todos os passos sem necessidade.

Revise efeitos esperados

Efeitos esperados são úteis, mas devem representar o resultado real da ação. Se a validação automática daquele passo ficar instável, desligue Usar efeitos esperados e use um wait ou assert explícito para validar o ponto correto.

Dê bons nomes aos passos

Labels claras ajudam a ler logs, entender falhas e usar expressões depois.

Use variáveis para dados dinâmicos

Se o card, chamado, cliente ou registro muda por execução, substitua o valor gravado por {{ variables... }} ou output de passo anterior.

Melhore a aplicação quando possível

Quando você controla a aplicação testada, adicionar data-testid, aria-label, labels reais e roles corretos melhora muito a estabilidade da automação.

Limitações

• O Smart Web Flow automatiza o navegador; ele não valida regras de servidor sozinho.
• O clock altera o relógio JavaScript da página, não o horário de APIs externas.
• Sites com CSP muito restritivo, iframes cross-origin ou componentes fechados podem limitar a gravação.
• Interfaces extremamente ambíguas podem exigir ajuste manual de escopo, seletor ou espera.
• Self Healing não deve ser usado como substituto para seletores, labels e dados de teste bem definidos.

Próximos Passos

• Extensão Chrome — Como gravar cenários web
• Execução e Depuração — Como analisar falhas e evidências
• Expressões — Como usar variáveis e outputs nos passos