Optics Framework: Como Usar o Agente de IA para Testes de UI Sem Modelo
Trabalho no Optics Framework, então leve isso em conta. Este texto é a versão em português de um artigo em inglês no optics-framework.org, onde também estão os vídeos. Muitas ferramentas de teste de UI com IA colocam um modelo no controle de cada execução. Cada execução tem custo de modelo, e o modelo pode seguir um caminho diferente pelo app a cada vez. O Optics Framework usa o modelo em outro ponto. O seu agente de IA navega pelo app uma vez, pelo servidor MCP do Optics, e escreve uma suíte de testes em CSV. Depois disso, cada execução só reproduz a suíte e não chama nenhum modelo.
Fiz isso no saucedemo.com, um site público de demonstração. O agente foi o Claude Code com claude-opus-5-5, e o servidor foi o Optics Framework 1.11.0. O promptDei ao Claude Code um prompt e um servidor MCP. Skills e configurações de usuário estavam desligadas, então o agente só tinha as informações que vêm do Optics. Use o Optics tools para abrir https://www.saucedemo.com em Playwright com headless false. Sign in as standard_user / secret_sauce, add the Sauce Labs Backpack to the cart, open the cart, check out as Ava Birch with postcode 560001, finish the order, and check that "Thank you for your order!" appears. Então, escreva isso como uma suíte em Optics no./checkout, execute optics dry_run e diga-me como executá-lo.
O que o servidor MCP entrega ao agente
O Optics MCP é um servidor Model Context Protocol. Na versão 1.11.0 ele tem 41 ferramentas: 3 controlam a sessão e 38 são keywords do Optics, como press_element, enter_text e assert_presence. O agente também lê estes recursos:
- optics://session/{id}/elements: uma lista curta dos elementos da tela, cada um com rótulo, ações permitidas e posição.
- optics://session/{id}/screenshot e optics://session/{id}/source: a tela como imagem e a árvore de UI completa.
- optics://project-format: as regras dos arquivos da suíte.
- optics://keywords: a lista de keywords.
Uma página web pode ter um item da lista com um valor loc. É um seletor CSS que o Optics gera no navegador, e o Optics confere que ele encontra só aquele elemento. Este é o item do botão Login:
``json``
{
"i": 3,
"label": "Login",
"cls": "input",
"bounds": [100, 100, 200, 50],
"loc": "//button[@class='input']"
}
A sessão
A sessão levou 71 segundos e 32 turnos do modelo. O agente fez 21 chamadas de ferramentas do Optics, leu o formato do projeto uma vez e leu a lista de elementos 6 vezes, uma por página.
Os arquivos
O caso de teste chama cinco módulos em sequência. O arquivo de módulos tem uma linha por ação, e todos os valores são variáveis:
``json``
{
"module_name": "Open Site",
"module_step": "Launch App",
"param_1": "${site_url}",
"param_2": ""
}
``json``
{
"module_name": "Login",
"module_step": "Enter Text",
"param_1": "${username_field}",
"param_2": "${username}",
"param_3": ""
}
``json``
{
"module_name": "Login",
"module_step": "Enter Text",
"param_1": "${password_field}",
"param_2": "${password}",
"param_3": ""
}
``json``
{
"module_name": "Login",
"module_step": "Press Element",
"param_1": "${login_button}",
"param_2": ""
}
``json``
{
"module_name": "Add Backpack To Cart",
"module_step": "Press Element",
"param_1": "${add_backpack_button}",
"param_2": ""
}
```json
{
"module_name": "Add Backpack To Cart",
"module