vitest-midscene-e2e
Enhances Vitest with Midscene for AI-powered UI testing across Web (Playwright), Android (ADB), and iOS (WDA). Scaffolds new projects, converts existing projects, and creates/updates/debugs/runs E2E tests using natural-language UI interactions. Triggers: write test, add test, create test, update tes
By web-infra-dev · 1,893 installs
npx skills add web-infra-dev/midscene-skills --skill vitest-midscene-e2e
Source repository · Upstream listing
Vitest Midscene E2E
Modules
Module Role
Vitest TypeScript test framework. Provides describe / it / expect /hooks for test organization, assertions, and lifecycle.
Midscene AI driven UI automation. Interacts with UI elements via natural language — no fragile selectors. Core API: aiAct .
Supported platforms:
Web — WebTest (Playwright Chromium): ctx.agent + ctx.page
Android — AndroidTest (ADB + scrcpy): ctx.agent only
iOS — IOSTest (WebDriverAgent): ctx.agent only
Workflow
Step 1: Clone boilerplate & ensure project ready
The boilerplate at ~/.midscene/boilerplate/vitest all platforms demo/ is the canonical reference for project structure, configs, platform context classes, and test conventions. Compare the current project against it. If anything is missing, ask the user which platform(s) they need (Web / Android / iOS), then fill in what's missing using the boilerplate as the target state. Only include files for the requested platform(s). Do NOT overwrite existing configs or files. Copy .env.example from the boilerplate as .env if it doesn't exist, and prompt the user to fill in the env vars.
Step 2: Read the Midscene Agent API section below before writing tests
It contains mandatory rules for using aiAct — the primary API for all UI operations. Do NOT skip this step.
Step 3: Create, update, or run tests
Use the boilerplate's e2e/ directory and src/context/ as reference for patterns and conventions. Before running tests, ensure dependencies are installed and .env is configured. When debugging failures, check [troubleshooting.md](./references/troubleshooting.md).
Midscene Agent API
ctx.agent is a platform specific agent instance. All methods return Promises.
Web : PlaywrightAgent from @midscene/web/playwright
Android : AndroidAgent from @midscene/android
iOS : IOSAgent from @midscene/ios
All three agents share the same AI methods below.
Mandatory Rule: Use aiAct for User Described Steps
When the user describes a UI action or state confirmation in natural language, you MUST use aiAct to implement it. Do NOT decompose user instructions into aiTap / aiInput / aiAssert or other fine grained APIs. Pass the user's intent directly to aiAct and let Midscene's AI handle the planning and execution.
Assertions, data extraction, and waiting should also be done via aiAct — it handles all of these. Do NOT use aiAssert , aiQuery , aiWaitFor , aiTap , or aiInput separately.
aiAct(taskPrompt, opt?) — Primary API
aiAct is the primary API for all UI operations and state confirmations. It accepts natural language instructions and autonomously plans and executes multi step interactions.
Prompt driven File Uploads (Web only)
When an aiAct prompt asks Midscene to upload files, pass fileChooserAllowedDir explicitly. Use the smallest directory containing that test case's fixtures, and refer to files relative to it in the prompt. Do not use the project root or a home directory. Replace ./fixtures below with the fixture directory relative to the test process working directory.
Phase splitting: If the task prompt is too long or covers multiple distinct stages, split it into separate aiAct calls — one per phase. Each phase should be a self contained logical step, and all phases combined must match the user's original intent.
aiAction is deprecated. Use aiAct or ai instead.
Common Mistakes
Vague locators — 'button' is ambiguous; use 'the blue "Submit" button at the top of the page'
Deprecated aiAction — use aiAct instead
Ambiguous multi element targets — specify row/position: 'the delete button in the first product row'
Agent Configuration — aiActionContext
aiActionContext is a system prompt string appended to all AI actions performed by the agent. Use it to define the AI's role and expertise.
Good examples:
'You are a Web UI testing expert.'
'You are an Android app testing expert who is familiar with Chinese UI.'
Bad examples:
'Click the login button.' — specific actions belong in aiAct() , not aiActionContext
'The page is in Chinese.' — this is page description, not a system prompt
How to Look Up More
1. In node modules/@midscene/web , node modules/@midscene/android , and node modules/@midscene/ios , find the type definitions for the agent classes
2. If types are not enough, follow the source references in the .d.ts files to read the implementation code in node modules
3. Download https://midscenejs.com/llms.txt, then use grep to search for the API or concept you need (the file is large, do not read it in full)