Skip to content

mcp.md

Latest commit

 

History

History
132 lines (115 loc) · 4.35 KB

mcp.md

File metadata and controls

132 lines (115 loc) · 4.35 KB
Raw

WebTestPilot MCP Server

Table of Contents

Demo example of feedback loop from WTP MCP to drive development, video link

Instructions

1. Add GUI test cases to your project

Setup testcases in your own project folder.

  • Run source setup.sh or powershell -ExecutionPolicy Bypass -File setup.ps1 again.
  • Start the browser by running: source browser.sh or powershell -ExecutionPolicy Bypass -File browser.ps1.
  • Open your project (CTrip, 12306 clone) in VSCode / Trae.
  • Move the folder ./sample/.webtestpilot from this repo to your project folder cp -r ./sample/.webtestpilot/ .../path/to/ctrip-clone/. Your project should now look something like:
ctrip-cs3604/
├── .webtestpilot/
│   ├── .test/
│   ├── .fixture/
│   └── .environment/
├── frontend/
│   ├── package.json
│   └── ...
├── backend/
│   ├── package.json
│   └── ...
├── README.md
├── .gitignore
└── ...
  • Update your .env file with latest keys.
  • If you use VSCode, read from 2. VSCode, if Trae, read from 3. Trae

2. VSCode

🎥 Video tutorial: VSCode Install WebTestPilot MCP Server.

2.1. Add MCP to VSCode

Steps to add MCP Server to vscode:

  1. Ctrl + Shift + P, Search for "MCP: Add server"
  2. Choose stdio.
  3. Input command as below: (NOTE: Modify --env-file path to your computer.)
uvx --refresh --env-file "/path/to/folder/WebTestPilot-extension/.env" --from "git+https://github.com/code-philia/WebTestPilot@parallel#subdirectory=webtestpilot" webtestpilot-mcp
  1. Input Name: "WebTestPilot".
  2. Choose "Workspace" option.

For more details: Use MCP servers in VSCode.

⚠️ Common errors: If VSCode can't find uvx:

  1. Use which uvx to get the path and copy it.
which uvx
> /Users/your-name/.local/bin/uvx
> C://Users/your-name/uvx
  1. Create or open file .vscode/mcp.json, edit command to match.
{
	"servers": {
		"WebTestPilot": {
			"type": "stdio",
			"command": "/Users/your-name/.local/bin/uvx",   <--------- `which uvx` output here.
			"args": [
				"--refresh",
				"--env-file",
				"/path/to/.../WebTestPilot-extension/.env", <--------- make sure .env file is correct.
				"--from",
				"git+https://github.com/code-philia/WebTestPilot@parallel#subdirectory=webtestpilot",
				"webtestpilot-mcp"
			]
		}
	},
	"inputs": []
}

2.2. Test it out

  • Check if MCP tools are available in Copilot, if yes, good to go!. image

  • Try asking "list gui tests" or "run test invalid phone number on prod".

  • When encounter "Allow" prompt, choose "Always allow tools from WebTestPilot ᕦ(ò_óˇ)ᕤ". image

3. Trae

🎥 Video tutorial: Trae Install WebTestPilot MCP Server.

3.1 Add MCP Server to Trae

  1. Go to Trae Settings.
  2. Click MCP
  3. Add -> Add Manually
  4. Input the following json (NOTE: Make sure to update .env paths accordingly)
{
  "mcpServers": {
    "WebTestPilot": {
      "command": "uvx",
      "args": [
        "--refresh",
        "--env-file",
        "/path/to/.../Cophi/WebTestPilot-extension/.env",
        "--from",
        "git+https://github.com/code-philia/WebTestPilot@parallel#subdirectory=webtestpilot",
        "webtestpilot-mcp"
      ]
    }
  }
}
  1. Click start button if needed.
  2. Once started and can see list of tools. Good to go!

3.2 Test it out

  • Choose agent: "Builder with MCP".
  • Sample questions:
    • "list out gui tests i have"
    • "run test invalid phone number on prod"