Playwright IA: Midscene.js

Automatize fluxos do Playwright usando linguagem natural com Midscene.js e IA.

GitHubExperimente este MCPPatrocinado

Documentação

Playwright IA: Midscene.js

Projeto de automação com Playwright e inteligência artificial (Midscene).

  1. Instale as dependências, execute os testes e visualize o relatório para ter uma primeira visão de como o Midscene opera.

  2. Configure o MCP Server do Midscene para que ele automatize o que você pedir a partir de um prompt.

📥 Instalação

Instalar dependências:

npm install
# o
yarn install

▶️ Execução de testes

Primeiro, exporte sua API_KEY:

#linux
export OPENAI_API_KEY="tu_api_key"

Execute os testes com Playwright e gere um relatório em HTML:

npx playwright test

Se desejar ver o processo de execução:

npx playwright test --headed

📂 Abrir o relatório

Para visualizar o relatório gerado, use o comando:

open midscene_run/report/tu_reporte.html

Uma janela do navegador será aberta automaticamente com o painel de resultados (fluxos do MidSceneJS, capturas e rastros).

📂 MidScene: APIs básicas de operação de IA

Use estas APIs em seus steps para que a IA faça o trabalho.

  • ai ou aiAction – Interação geral com IA
  • aiTap – Operação de clique
  • aiHover – Operação de hover (passar o cursor)
  • aiInput – Operação de entrada de texto
  • aiKeyboardPress – Operação de teclado
  • aiScroll – Operação de rolagem
  • aiQuery – Consulta à IA
  • aiAssert – Asserção de IA
  • aiWaitFor – Espera baseada em IA

Você pode encontrar mais detalhes em midscenejs.com/api

🧠 MidScene: MCP Server

Permite usar linguagem natural para automatizar fluxos e gerar testes com Playwright, utilizando o agente de inteligência artificial MidScene através do seu MCP Server.

✅ Requisitos

  1. Instale Cursor.
  2. Abra este projeto com o Cursor.
  3. Configure o MCP no Cursor.

⚙️ Configuração do MCP no Cursor

  1. Abra o Cursor
  2. Vá para: File > Preferences > Settings
  3. Adicione a seguinte configuração na seção MCP:
{
  "mcpServers": {
    "mcp-midscene": {
      "command": "npx",
      "args": ["-y", "@midscene/mcp"],
      "env": {
        "MIDSCENE_MODEL_NAME": "gpt-4o-mini",
        "OPENAI_API_KEY": "<OPENAI_API_KEY>",
        "MCP_SERVER_REQUEST_TIMEOUT": "800000"
      }
    }
  }
}
  1. Não se esqueça de inserir sua OPENAI_API_KEY no json.

🤖 Enviar prompt no Cursor

Abra um chat no Cursor (Ctrl + N) e escreva seu prompt. Por exemplo:

Usa el MCP de Midscene para:
1. Open page https://practicetestautomation.com/practice-test-login/ 
2. Type username incorrectUser into Username field
3. Type password Password123 into Password field
4. Push Submit button
5. Verify error message is displayed
6. Verify error message text is Your username is invalid!

Al finalizar:
Crea el test case en Playwright con midscene, en la carpeta e2e con nombre login, usa de ejemplo @sauce-demo.spec.ts 
Exporta OPENAI_API_KEY que esta en @mcp.json 
Ejecuta el test npx playwright test e2e/login.spec.ts --headed

Nota: No prompt, forneça contexto (ex: "@mcp.json"). Dessa forma, o Midscene encontra as informações necessárias para cumprir sua solicitação com sucesso (templates, API_KEYS, etc).