Midscene.js: um plug-in de código aberto que impulsiona os testes de automação do navegador com IA

Introdução geral

O Midscene.js é uma ferramenta de automação de navegador com tecnologia de IA capaz de controlar páginas da Web, executar asserções e extrair dados por meio de comandos de linguagem natural. Ele é compatível com extensões do Chrome, SDKs JavaScript e scripts YAML, simplificando o processo de criação e manutenção de testes de interface do usuário. Ao aproveitar os modelos multimodais de big language, como o GPT-4o, o Midscene.js oferece uma nova experiência de desenvolvimento automatizado que permite aos usuários interagir intuitivamente com páginas da Web e buscar dados JSON estruturados.

Lista de funções

• interação de linguagem naturalUso de linguagem natural para descrever as etapas, a IA planeja e controla automaticamente a interface do usuário.
• Extração de dados JSONGeração automática de dados de resposta no formato JSON, de acordo com os requisitos do usuário.
• afirmação intuitivaAsserções: as asserções são feitas em linguagem natural, que a IA entende e executa.
• Experiência de extensão do ChromeNão há necessidade de escrever código para iniciar a experiência com extensões.
• Relatório de visualizaçãoForneça relatórios detalhados de implementação para ajudar os usuários a entender e depurar o processo.
• Suporte a vários scriptsJavaScript e YAML: inclui JavaScript e YAML, fornecendo scripts automatizados flexíveis.

Usando a Ajuda

Instalação e configuração

Instale a extensão do Chrome:

1. Visite a Chrome Store e procure por "Midscene".
2. Clique no botão "Adicionar ao Chrome".
3. Confirme a instalação e permita as permissões.

Configurar variáveis de ambiente (para uso do SDK):

• Para o uso da API da OpenAI, você precisa criar um arquivo.envadicione o seguinte:

export OPENAI_API_KEY="Sua chave de API"
export MIDSCENE_MODEL_NAME="gpt-4o"

• Se estiver usando outro serviço de modelo, será necessário ajustar as variáveis de ambiente acima de acordo.

Processo de uso

Usado por meio da extensão do Chrome

• Extensão de lançamentoClique no ícone da extensão para abrir o painel de controle do Midscene: Após a instalação, o ícone da extensão será exibido na barra de ferramentas do navegador. Clique no ícone para abrir o painel de controle do Midscene.
• operação interativaDigite comandos de linguagem natural no painel de controle, como "Clique no botão de login" ou "Extraia todos os cabeçalhos de uma página da Web".
• Exibir resultadosDepois que a operação é concluída, a extensão retorna os resultados da execução, geralmente apresentando os dados extraídos no formato JSON.

Usado via JavaScript SDK

• Apresentando o SDK::

  importar { ai, aiQuery, aiAssert } de '@midscene/web';
  

• operação executável::
  • operação básica: Usoairealiza operações simples em páginas da Web. Exemplo:

    await ai('Digite na caixa de pesquisa "Reagir"');
    

  • extração de dados: UsoaiQuerypara extrair os dados:

    const data = await aiQuery('{title: string, price: number}[]', 'Localize a lista de produtos e extraia o título e o preço');
    

  • verificação de asserçõesUtilizaçãoaiAssertFaça afirmações:

    await aiAssert('Deve haver um botão de login na página');
    

Uso de scripts YAML

• Escrevendo scripts YAMLDefinição de suas tarefas de automação em um arquivo **.yaml**, por exemplo:

  -action:type
  seletor:'input[name="search"]'
  value:'JavaScript'
  -action:click
  seletor:'botão[type="submit"]'
  

• script executávelExecute esses scripts por meio de ferramentas de linha de comando ou da CLI do Midscene.

Detalhes operacionais

• ensino de linguagem naturalInstruções: as instruções podem ser tão simples quanto "clique", "entre" ou tão complexas quanto "encontre todos os produtos marcados como 'em promoção' e registre o preço! ".
• Tratamento de errosSe a operação falhar, o Midscene fornecerá um relatório detalhado indicando o motivo da falha e o ajudará a ajustar as instruções.
• Depuração e reproduçãoA execução de cada teste ou operação pode ser reproduzida com relatórios visuais para ajudá-lo a entender ou depurar seus scripts.

Este guia do usuário detalhado garante que os usuários se familiarizem rapidamente e aproveitem ao máximo os recursos do Midscene.js para testes eficientes de automação do navegador.