当前位置：首页 > news >正文

使用Playwright MCP探索网站并编写测试

news 2025/8/10 4:46:57

安装Playwright MCP

新建项目

mkdir playwright-mcp-test

使用Cursor打开playwright-mcp-test

打开终端输入命令

mkdir -p .cursor && touch .cursor/mcp.json

{"mcpServers": {"playwright": {"command": "npx","args": ["@playwright/mcp@latest"]}}
}

然后在Cursor Setting打开MCP开关
在这里插入图片描述

编写文档

执行命令

mkdir -p .github && touch .github/generate_tests.prompt.md

---
tools: ['playwright']
mode: 'agent'
---- You are a playwright test generator.
- You are given a scenario and you need to generate a playwright test for it.
- DO NOT generate test code based on the scenario alone. 
- DO run steps one by one using the tools provided by the Playwright MCP.
- When asked to explore a website:1. Navigate to the specified URL2. Explore 1 key functionality of the site and when finished close the browser.3. Implement a Playwright TypeScript test that uses @playwright/test based on message history using Playwright's best practices including role based locators, auto retrying assertions and with no added timeouts unless necessary as Playwright has built in retries and autowaiting if the correct locators and assertions are used.
- Save generated test file in the tests directory
- Execute the test file and iterate until the test passes
- Include appropriate assertions to verify the expected behavior
- Structure tests properly with descriptive test titles and comments

执行测试

在Cursor对话框输入

Explore https://debs-obrien.github.io/playwright-movies-app

在这里插入图片描述

可以看到Cursor使用Playwright MCP导航到网站并使用浏览器像真实用户一样探索应用。

然后继续生成代码进行测试
在这里插入图片描述

第1次执行测试报告
在这里插入图片描述

然后AI会自动修复测试失败的代码，然后生成总结和说明文档，并最终测试通过

在这里插入图片描述

生成的测试代码

import { test, expect } from '@playwright/test';test.describe('Movie App Search Functionality', () => {test('should display popular movies and handle search with no results', async ({ page }) => {// Navigate to the movie appawait page.goto('https://debs-obrien.github.io/playwright-movies-app');// Verify the page loads correctlyawait expect(page).toHaveTitle('Popular Movies');// Verify popular movies section is displayedawait expect(page.getByRole('heading', { name: 'Popular' })).toBeVisible();await expect(page.getByRole('heading', { name: 'movies' })).toBeVisible();// Verify movie grid is present with moviesconst moviesList = page.getByRole('list', { name: 'movies' });await expect(moviesList).toBeVisible();// Verify at least one movie is displayed (check for first movie)const firstMovie = moviesList.getByRole('listitem').first();await expect(firstMovie).toBeVisible();// Test search functionality - click on search area to activate inputconst searchArea = page.getByRole('search');await searchArea.click();const searchInput = page.getByRole('textbox', { name: 'Search Input' });// Search for a term that should have no resultsawait searchInput.fill('Batman');await searchInput.press('Enter');// Verify navigation to search results pageawait expect(page).toHaveURL(/.*\/search\?searchTerm=Batman&page=1/);// Verify "no results" message is displayedawait expect(page.getByRole('heading', { name: 'Sorry!' })).toBeVisible();await expect(page.getByRole('heading', { name: 'There were no results for Batman...' })).toBeVisible();// Verify "Not found!" image is displayedawait expect(page.getByRole('img', { name: 'Not found!' })).toBeVisible();// Verify Home button is present and functionalconst homeButton = page.getByRole('link', { name: 'Home' });await expect(homeButton).toBeVisible();// Click Home button to return to main pageawait homeButton.click();// Verify we're back on the popular movies pageawait expect(page).toHaveURL(/.*\?category=Popular&page=1/);await expect(page).toHaveTitle('Popular Movies');await expect(page.getByRole('heading', { name: 'Popular' })).toBeVisible();});test('should have functional UI components in header', async ({ page }) => {// Navigate to the movie appawait page.goto('https://debs-obrien.github.io/playwright-movies-app');// Verify header components are presentawait expect(page.getByRole('img', { name: 'movie ticket' })).toBeVisible();// Verify theme toggle components are presentawait expect(page.getByRole('button', { name: '☀' })).toBeVisible();await expect(page.getByRole('button', { name: '☾' })).toBeVisible();await expect(page.getByRole('checkbox', { name: 'Toggle Switch' })).toBeVisible();// Verify login button is presentawait expect(page.getByRole('button', { name: 'Log In' })).toBeVisible();// Verify search functionality is accessibleawait expect(page.getByRole('search')).toBeVisible();});
});