3.4 — Automação de Testes e Interações de Interface com Agentes (UI Automation)

const UI_TOOLS: Anthropic.Tool[] = [

  {

    name: 'navegar_para',

    description: 'Navega para uma URL.',

    input_schema: { type: 'object', properties: { url: { type: 'string' } }, required: ['url'] },

  },

  {

    name: 'clicar_elemento',

    description: 'Clica em um elemento descrito em linguagem natural.',

    // description é o guia: "botão de enviar", "link Sair", "checkbox Aceito os Termos"

  },

  {

    name: 'digitar_texto',

    description: 'Digita texto em um campo de input.',

  },

  {

    name: 'capturar_screenshot',

    description: 'Captura screenshot da página atual.',

  },

  {

    name: 'verificar_elemento',

    description: 'Verifica se um elemento existe e tem o conteúdo esperado.',

  },

]

async function gerarCasosDeTest(userStory: string): Promise<string[]> {

  const response = await client.messages.create({

    model: 'claude-haiku-4-5-20251001',

    max_tokens: 800,

    messages: [{

      role: 'user',

      content: `Dado esta user story, gere uma lista de instruções de teste em linguagem natural.

      

USER STORY: ${userStory}



Retorne JSON: {"casos": ["instrução 1", "instrução 2", ...]}



Cada instrução deve ser clara e acionável para um agente de automação.

Inclua: caminho feliz, validações de campo, casos de erro.

Máximo 8 casos.`,

    }],

  })

  

  try {

    const texto = response.content[0].text

    const i = texto.indexOf('{')

    const f = texto.lastIndexOf('}') + 1

    const parsed = JSON.parse(texto.slice(i, f))

    return parsed.casos || []

  } catch {

    return []

  }

}

{

  "casos": [

    "Navegue para /login e verifique que o formulário de login está visível",

    "Digite email válido 'user@test.com' e senha '123456' e clique em Entrar",

    "Verifique que foi redirecionado para /dashboard após login",

    "Tente fazer login com senha errada e verifique mensagem de erro",

    "Teste com email inválido (sem @) e verifique validação do campo",

    "Clique em 'Esqueci minha senha' e verifique que o formulário de recuperação aparece"

  ]

}

async function verificarMCPContext(url: string): Promise<Record<string, unknown>> {

  // Apps com MCP expõem capabilities em endpoints padrão

  const endpoints = [

    '/.well-known/mcp',

    '/api/mcp',

    '/mcp/tools',

  ]

  

  for (const endpoint of endpoints) {

    try {

      const response = await fetch(`${url}${endpoint}`)

      if (response.ok) {

        const data = await response.json()

        return data

      }

    } catch {

      // endpoint não existe

    }

  }

  

  return {}  // app não expõe MCP context

}

import { chromium, Page } from 'playwright'



let page: Page



async function inicializarBrowser() {

  const browser = await chromium.launch({ headless: false })  // false = visível para debug

  const context = await browser.newContext()

  page = await context.newPage()

}



async function executarToolUI(nome: string, args: Record<string, string>): Promise<string> {

  switch (nome) {

    case 'navegar_para':

      await page.goto(args.url)

      return `Navegado para ${args.url}. Título: "${await page.title()}"`

    

    case 'clicar_elemento':

      // LLM descreve em NL → Playwright usa getByRole/getByText/getByLabel

      try {

        // Tenta por texto primeiro

        await page.getByText(args.descricao).first().click({ timeout: 5000 })

      } catch {

        // Fallback: getByRole

        await page.getByRole('button', { name: args.descricao }).click({ timeout: 5000 })

      }

      return `Clicado: "${args.descricao}"`

    

    case 'digitar_texto':

      await page.getByLabel(args.campo).fill(args.texto)

      return `Digitado "${args.texto}" em "${args.campo}"`

    

    case 'capturar_screenshot':

      await page.screenshot({ path: `screenshots/${args.nome_arquivo}.png` })

      return `Screenshot: screenshots/${args.nome_arquivo}.png`

    

    case 'verificar_elemento':

      const elemento = await page.getByText(args.descricao).first()

      const visivel = await elemento.isVisible()

      return visivel ? `✓ "${args.descricao}" encontrado` : `✗ "${args.descricao}" NÃO encontrado`

  }

}

getByRole, getByText, getByLabel são os seletores semânticos do Playwright — muito mais robustos que seletores CSS. O LLM usa descrições que mapeiam naturalmente para esses seletores.

async function rodarSuiteQA(app: string, userStories: string[]) {

  const todosResultados = []

  

  for (const story of userStories) {

    console.log(`\n=== Story: ${story.slice(0, 60)} ===`)

    

    // 1. Gerar casos de teste da story

    const casos = await gerarCasosDeTest(story)

    console.log(`  ${casos.length} casos gerados`)

    

    // 2. Executar cada caso

    for (const caso of casos) {

      console.log(`  Executando: ${caso.slice(0, 80)}`)

      try {

        await agenteUI(caso)

        todosResultados.push({ story, caso, status: 'passou' })

      } catch (err) {

        todosResultados.push({ story, caso, status: 'falhou', erro: err.message })

      }

    }

  }

  

  // 3. Relatório

  const passou = todosResultados.filter(r => r.status === 'passou').length

  const falhou = todosResultados.filter(r => r.status === 'falhou').length

  console.log(`\n=== RELATÓRIO: ${passou} passed, ${falhou} failed ===`)

  return todosResultados

}

[AGENTE UI] Instrução: "Faça login com email test@example.com e senha 123456"



[BROWSER] navegar_para({"url": "https://app.exemplo.com/login"})

  ← Navegado para https://app.exemplo.com/login. Título: "Login"



[BROWSER] digitar_texto({"campo": "email", "texto": "test@example.com"})

  ← Digitado "test@example.com" em "email"



[BROWSER] digitar_texto({"campo": "senha", "texto": "123456"})

  ← Digitado "123456" em "senha"



[BROWSER] clicar_elemento({"descricao": "botão Entrar"})

  ← Clicado: "botão Entrar"



[BROWSER] verificar_elemento({"descricao": "dashboard", "conteudo_esperado": "Bem-vindo"})

  ← ✓ "dashboard" encontrado. Conteúdo: "Bem-vindo verificado"



[RESULTADO] Login realizado com sucesso. Dashboard carregado com mensagem de boas-vindas.

const story = 'Como usuário, quero fazer login para acessar minha conta'

const casos = await gerarCasosDeTest(story)

// Resultado:

// [

//   "Navegue para /login e verifique que os campos email e senha estão visíveis",

//   "Digite email válido test@example.com e senha 123456 e clique em Entrar",

//   "Verifique redirecionamento para /dashboard com mensagem de boas-vindas",

//   "Tente login com email não cadastrado e verifique mensagem 'Email não encontrado'",

//   "Tente login com senha errada e verifique mensagem 'Senha incorreta'",

//   "Deixe campos vazios e clique Entrar — verifique mensagens de validação",

// ]



for (const caso of casos) {

  await agenteUI(caso)

}

// Instrução para o agente sempre terminar com verificação

'Ao final, use verificar_elemento para confirmar que a ação foi bem-sucedida.'

// Muito específico (frágil): "botão com classe btn-submit-v2"

// Muito vago: "o botão"

// Correto: "botão Entrar do formulário de login"

await agenteUI('Capture screenshot antes do pagamento, processe pagamento, capture screenshot do recibo')

const i = texto.indexOf('{'), f = texto.lastIndexOf('}') + 1

const data = JSON.parse(texto.slice(i, f))

const headless = process.env.CI === 'true'

const browser = await chromium.launch({ headless })

const response = await client.messages.create({

  model: 'claude-haiku-4-5-20251001',

  max_tokens: 800,

  messages: [{

    role: 'user',

    content: `User story: ${userStory}\nGere casos de teste em JSON: {"casos": ["caso 1", "caso 2", ...]}`,

  }],

})

const texto = response.content[0].text

const i = texto.indexOf('{'), f = texto.lastIndexOf('}') + 1

return JSON.parse(texto.slice(i, f)).casos || []