🎭 Playwright UI 自动化测试平台

在线运行和查看测试结果

下载本地测试包 (13KB)

🎮 测试控制台

0
✅ 通过
0
❌ 失败
0
⚠️ 警告
0
📊 总计

📋 测试日志

等待运行测试...

📚 测试代码

// Playwright 基础测试示例
const { chromium } = require('playwright');

async function runBasicTests() {
  const browser = await chromium.launch();
  const page = await browser.newPage();
  
  // 测试1: 页面加载
  await page.goto('https://nexu.powerformer.net');
  console.log('✅ 页面加载成功');
  
  // 测试2: 元素定位
  const title = await page.title();
  console.log('✅ 页面标题:', title);
  
  // 测试3: 表单交互
  await page.fill('input[type="email"]', '[email protected]');
  await page.fill('input[type="password"]', 'password123');
  console.log('✅ 表单填写完成');
  
  await browser.close();
}

runBasicTests();
// Playwright 扩展测试套件
class UITestSuite {
  async testEmailValidation() {
    // 邮箱格式验证
    const invalidEmails = [
      'notanemail',
      'missing@domain',
      '@nodomain.com'
    ];
    
    for (const email of invalidEmails) {
      await page.fill('input[type="email"]', email);
      const isValid = await page.evaluate(() => {
        return document.querySelector('input[type="email"]')
          .checkValidity();
      });
      console.log(`${email}: ${isValid ? '❌' : '✅'}`);
    }
  }
  
  async testResponsive() {
    // 响应式布局测试
    const viewports = [
      { width: 375, height: 667 },   // 手机
      { width: 768, height: 1024 },  // 平板
      { width: 1920, height: 1080 }  // 桌面
    ];
    
    for (const vp of viewports) {
      await page.setViewportSize(vp);
      const visible = await page.isVisible('.main-content');
      console.log(`${vp.width}x${vp.height}: ${visible ? '✅' : '❌'}`);
    }
  }
  
  async testPerformance() {
    // 性能测试
    const startTime = Date.now();
    await page.goto('https://nexu.powerformer.net');
    const loadTime = Date.now() - startTime;
    console.log(`⏱️ 加载时间: ${loadTime}ms`);
    return loadTime < 2000 ? '✅ 优秀' : '⚠️ 需优化';
  }
}

🚀 快速开始

  1. 安装 Playwright: npm install playwright
  2. 创建测试文件: test.js
  3. 粘贴左侧代码
  4. 运行: node test.js

📖 核心概念

  • Browser: 浏览器实例
  • Page: 页面对象
  • Locator: 元素定位器
  • Actions: 点击、输入、导航
  • Assertions: 断言验证

🎯 测试场景

本平台包含:

  • ✅ 页面加载和导航
  • ✅ 表单输入验证
  • ✅ 邮箱密码格式检查
  • ✅ SQL注入防护测试
  • ✅ 响应式布局验证
  • ✅ 键盘导航测试
  • ✅ 性能指标监控
  • ✅ 无障碍访问检查

📊 Nexu Powerformer 测试报告

基于真实测试运行生成的完整报告

21
✅ 测试通过
2
⚠️ 警告
0
❌ 失败
91.3%
📈 通过率
760ms
⚡ 加载速度