mcpField
W
webapp-testing

webapp-testing

github.com/moizibnyousaf测试与质量1.2k162 次安装6 周前更新
代码仓库

关于 webapp-testing

使用 Playwright 测试 Web 应用的技能，涵盖页面操作、断言、截图、控制台与页面错误、网络拦截及测试执行。

主要功能

  1. 01浏览并操作页面
  2. 02填写和勾选表单控件
  3. 03断言页面和元素状态
  4. 04截取整页或元素图像
  5. 05监控日志并拦截请求
  6. 06运行 Playwright 测试

适用场景

  1. 01测试页面导航和表单
  2. 02验证内容及界面状态
  3. 03截取截图以供审查
  4. 04在测试中模拟 API 响应

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/moizibnyousaf/ai-agent-skills --skill webapp-testing

安装后在 Claude Code 中输入/webapp-testing确认已加载。

详细介绍

使用 Playwright 测试 Web 应用

设置

npm init playwright@latest

基本测试结构

import { test, expect } from '@playwright/test';

test('homepage has title', async ({ page }) => {
  await page.goto('http://localhost:3000');
  await expect(page).toHaveTitle(/My App/);
});

test('can navigate to about page', async ({ page }) => {
  await page.goto('http://localhost:3000');
  await page.click('text=About');
  await expect(page).toHaveURL(/.*about/);
});

常见操作

导航
await page.goto('http://localhost:3000');
await page.goBack();
await page.reload();
点击
await page.click('button');
await page.click('text=Submit');
await page.click('#submit-btn');
await page.click('[data-testid="submit"]');
表单输入
await page.fill('input[name="email"]', '[email protected]');
await page.fill('#password', 'secret123');
await page.selectOption('select#country', 'USA');
await page.check('input[type="checkbox"]');
等待
await page.waitForSelector('.loaded');
await page.waitForURL('**/dashboard');
await page.waitForResponse('**/api/data');
await page.waitForTimeout(1000); // Avoid if possible

断言

await expect(page.locator('h1')).toHaveText('Welcome');
await expect(page.locator('.items')).toHaveCount(5);
await expect(page.locator('button')).toBeEnabled();
await expect(page.locator('.modal')).toBeVisible();
await expect(page.locator('input')).toHaveValue('test');

截图

// Full page
await page.screenshot({ path: 'screenshot.png', fullPage: true });

// Element only
await page.locator('.chart').screenshot({ path: 'chart.png' });

控制台日志

page.on('console', msg => console.log(msg.text()));
page.on('pageerror', err => console.error(err.message));

网络拦截

await page.route('**/api/data', route => {
  route.fulfill({
    status: 200,
    body: JSON.stringify({ items: [] })
  });
});

运行测试

# Run all tests
npx playwright test

# Run specific file
npx playwright test tests/login.spec.ts

# Run in headed mode
npx playwright test --headed

# Run with UI
npx playwright test --ui

评论

支持 Markdown