#Get started: Web · Midscene Test · Model API Key

These are the setup steps for Midscene on Web with Midscene Test and a Model API Key. To choose another combination, change the answers below or see all setup paths.

Step 1

#Install Node.js

Install Node.js ^20.19.0 || ^22.12.0 || >=24.0.0, then check that node -v works in your terminal.

The commands below use pnpm. If it is not installed yet, run npm install -g pnpm.

Step 2

#Create a test project

pnpm dlx @midscene/test create my-tests \
  --platform web \
  --package-manager pnpm
cd my-tests

The command generates the project files, installs dependencies, and generates the Node Spec. It does not run tests. For the generated files, see Project structure.

Step 3

#Configure a model

In the my-tests directory, copy .env.example to .env:

cp .env.example .env

Choose a model below. Its configuration has four values. Open Get API key to create a key with the provider, then replace ...... in MIDSCENE_MODEL_API_KEY with it.

MIDSCENE_MODEL_BASE_URL="https://ark.cn-beijing.volces.com/api/v3"
MIDSCENE_MODEL_API_KEY="......"
MIDSCENE_MODEL_NAME="doubao-seed-2-1-turbo-260628"
MIDSCENE_MODEL_FAMILY="doubao-seed"

For other versions and usage notes, see Doubao Seed series.

To compare models, see the Model selection guide. For compatible models such as UI-TARS, see Use a model API key.

Fill in the four MIDSCENE_MODEL_* values in .env with this configuration.

Step 4

#Verify the model and finish setup

Verify model connectivity and Midscene compatibility. The command reads .env from the current directory and does not need a browser or device:

pnpm exec midscene-test model verify

If the check fails, see Verify model connectivity.

Install Chromium for Playwright:

pnpm exec playwright install chromium

Step 5

#Run the example and inspect the report

The example opens React TodoMVC in Chromium, seeds three todos, and changes them with aiAct and aiAssert.

pnpm test

The terminal prints the results and a Report: path. Open the HTML report, then select a case and a step to inspect screenshots, inputs, outputs, and errors. Reports are written to midscene_run/report/ by default.

When the case passes, your model, environment, and project are all working. For execution options, see Run tests.

Step 6

#Next steps

• Explore more examples: Showcases includes demo videos and full execution reports across platforms.

• Test your own site: In cases/todo.yaml, replace the TodoMVC setup in beforeEach with a gotoUrl Node for your URL, then describe the steps with aiAct and aiAssert. See Built-in Nodes across platforms.

• Write and organize cases: Write YAML cases covers inputs, variables, tags, and hooks.
• Run in CI: Run in GitHub Actions.

Want to try another platform or way to use Midscene? Back to top to change your selections.