Quando o navegador oferece o papel e o nome acessível de um controle, comece por eles. Leia uma parte do DOM se precisar identificar um registro. Faça uma captura atual se a informação estiver na imagem, como o ponto selecionado em um gráfico ou o que está cobrindo um botão.
Em um tópico da comunidade Playwright, um desenvolvedor relatou que um agente escolhia o nono botão Add to Cart. Faltava relacionar o botão ao produto certo. O título do cartão ou um identificador estável dá ao agente um critério que continua válido se a ordem mudar. Tabbit Browser permite aplicar a mesma lógica em uma aba.
Pontos principais
Use papel e nome para procurar a ação na linha, no formulário ou no diálogo certo.
Atributos do DOM ajudam a identificar registros. Um nó encontrado pode estar oculto, desativado ou coberto.
A visão interpreta a captura e pode devolver a ação a um localizador semântico.
Observe de novo quando o estado mudar e confira o resultado separadamente do clique.
O que cada entrada mostra
| Entrada | Informação | Limite comum | Primeiro uso |
|---|---|---|---|
| Trecho do DOM | Nós, texto e atributos atuais | Pode conter elementos ocultos | Achar uma linha pelo ID |
| Snapshot de acessibilidade | Papéis, nomes e alguns estados | Pode omitir identificadores do aplicativo | Achar um campo ou botão com nome |
| Captura interpretada por visão | Posição, cor e relações visuais | Depende da janela e do momento | Ver uma sobreposição ou marca no canvas |
O DOM muda quando JavaScript altera o documento. Um snapshot de acessibilidade mantém informações como títulos e estados e pode deixar classes CSS de fora. A entrada é independente do modo de executar a ação. Uma ferramenta de uso do computador também pode operar fora da aba, conforme a implementação. Snapshots ARIA · Localizadores
Identifique o registro antes de clicar
Se duas faturas têm um botão Salvar, localize primeiro a fatura pelo número ou por um atributo estável. Procure o botão dentro dela e confirme que existe uma única correspondência. Em outro tópico de Playwright, uma pessoa encontrou menus personalizados sem papéis úteis e considerou IDs de teste. Se você mantém o aplicativo, confira rótulo e operação por teclado. Em um site de terceiros, examine o controle e o menu que ele abre.
Uma caixa de diálogo pode interceptar um clique mesmo quando a busca encontra o botão certo. Playwright verifica se o alvo está visível, estável, habilitado e recebe eventos. Veja o diagnóstico de botões bloqueados. Condições de ação do Playwright
Veja o que foi desenhado e confirme a posição
O DOM pode mostrar um canvas enquanto a captura distingue duas séries do gráfico. Veja se o aplicativo oferece legenda acessível, teclado ou exportação. Canvas admite conteúdo alternativo, conforme a implementação. Se a captura mostra qual menu está aberto, o agente pode escolher a opção pelo papel. Para um objeto desenhado sem controle semântico, talvez precise usar um gesto. O mouse do Playwright usa pixels CSS da área visível. Considere o recorte e a escala e atualize a imagem se um banner deslocar o gráfico. Referência de canvas · API do mouse
Combine as observações em uma aba do Tabbit
Para gravar um código de item e selecionar uma cor, procure Item code e Save item pelos nomes. Confira o código salvo. Depois tire uma captura atual do seletor desenhado e verifique a cor exibida após a ação.
O guia oficial do Tabbit CLI explica o acesso às abas e o guia de tarefas do CLI cobre os comprovantes. Para MCP, consulte o projeto Playwright MCP e o tutorial de configuração. A visão geral do controle de navegador explica as opções de conexão.
Decida o próximo passo
| Situação | Próximo passo | O que confirmar |
|---|---|---|
| Ações iguais em vários registros | Limitar a busca ao registro | Uma correspondência no registro correto |
| O snapshot omite um controle visível | Ler o DOM local e capturar se necessário | Um alvo identificável |
| O layout mudou após a captura | Observar de novo | Posição atual e objeto correto |
| O clique terminou sem mudança | Consultar o estado antes de repetir | Resultado confirmado, falha conhecida ou revisão |
Uma observação focada reduz o volume de entrada. Para tarefas recorrentes, inclua repetição e revisão no custo por sucesso confirmado. Se a meta for consultar dados, veja se há uma API ou ferramenta MCP. Informe o registro e o resultado esperado no prompt e defina quando parar com a lista da primeira tarefa. Tabbit é uma opção quando essas ações acontecem na aba em que você já trabalha.
Perguntas frequentes
Um snapshot de acessibilidade é igual ao DOM?
O DOM contém nós e atributos. O snapshot apresenta funções, nomes e estados calculados e pode omitir identificadores ou posições.
Um agente baseado em DOM pode operar um canvas?
Ele consegue localizar o canvas e usar os controles semânticos expostos pelo aplicativo. Se um alvo existir apenas no desenho, use uma imagem ou uma interface do aplicativo.
Quando devo refazer a captura?
Depois de rolar, aplicar zoom, redimensionar ou abrir uma caixa de diálogo se a próxima ação depender da posição. Se o resultado for visual, examine a imagem depois da ação.
Visão sempre usa coordenadas?
A visão interpreta a imagem. Uma ferramenta híbrida pode usar um localizador semântico ou o teclado. As coordenadas ajudam quando o alvo não tem uma identidade utilizável.
O que conferir depois de clicar em Salvar?
Confira o estado, o valor persistido ou o comprovante do registro correto. Se o resultado estiver indefinido, leia o registro antes de repetir o envio.
Qual abordagem usar primeiro em um site novo?
Comece pelo papel e pelo nome do controle. Consulte o DOM local para distinguir registros e acrescente uma captura quando a aparência for relevante.