测试必学：UI 自动化最值得掌握的两个Skills，几乎能覆盖所有UI测试场景！

# Windows
chrome.exe --remote-debugging-port=9222 --user-data-dir=c:/chrome_data

# Mac/Linux
/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222 --user-data-dir=/tmp/chrome_data

# Linux服务器无头模式
google-chrome-stable --headless=new --remote-debugging-port=9222 --no-sandbox

class PerformanceTester:
    def __init__(self, cdp: CDPController):
        self.cdp = cdp
    
    def measure_page_load(self, url: str):
        """测量页面加载性能"""
        # 启用性能监控
        self.cdp.send("Performance.enable")
        self.cdp.send("Network.enable")
        
        # 清除缓存（模拟首次访问）
        self.cdp.send("Network.clearBrowserCache")
        
        # 记录开始时间
        start_time = time.time()
        
        # 导航到页面
        self.cdp.send("Page.navigate", {"url": url})
        self.cdp.wait_event("Page.loadEventFired", timeout_s=30)
        
        # 获取Performance API数据
        timing_result = self.cdp.eval("""
            JSON.stringify(performance.timing)
        """)
        timing = json.loads(timing_result)
        
        # 计算关键指标
        navigation_start = timing["navigationStart"]
        metrics = {
            "DNS查询": timing["domainLookupEnd"] - timing["domainLookupStart"],
            "TCP连接": timing["connectEnd"] - timing["connectStart"],
            "首字节时间(TTFB)": timing["responseStart"] - navigation_start,
            "DOM解析": timing["domContentLoadedEventEnd"] - timing["domInteractive"],
            "完整加载": timing["loadEventEnd"] - navigation_start,
            "总耗时": time.time() - start_time
        }
        
        # 获取资源加载详情
        entries_result = self.cdp.eval("""
            JSON.stringify(performance.getEntriesByType('resource').map(r => ({
                name: r.name,
                duration: r.duration,
                size: r.transferSize
            })))
        """)
        resources = json.loads(entries_result)
        
        return {
            "页面": url,
            "指标(ms)": metrics,
            "资源数": len(resources),
            "慢资源": [r for r in resources if r["duration"] > 1000][:5]  # Top5慢资源
        }

# 批量性能测试
def test_batch_performance(urls: list):
    cdp = CDPController(ws_url)
    tester = PerformanceTester(cdp)
    
    results = []
    for url in urls:
        result = tester.measure_page_load(url)
        results.append(result)
        print(f"📊 {url}: 加载耗时 {result['指标(ms)']['完整加载']}ms")
    
    # 生成性能报告
    with open("performance_report.json", "w") as f:
        json.dump(results, f, indent=2, ensure_ascii=False)
    
    return results

from selenium import webdriver
from selenium.webdriver.chrome.service import Service
from selenium.webdriver.common.by import By

# 启动浏览器
driver = webdriver.Chrome(service=Service("./chromedriver"))

# 获取CDP会话
dev_tools = driver.devtools

# 创建CDP会话
dev_tools.create_session()

# ===== 示例1：模拟地理位置 =====
def test_geo_location():
    # 设置地理位置为上海
    driver.execute_cdp_cmd("Emulation.setGeolocationOverride", {
        "latitude": 31.2304,
        "longitude": 121.4737,
        "accuracy": 100
    })
    
    driver.get("https://map.baidu.com")
    # 验证地图是否定位到上海

# ===== 示例2：模拟弱网环境 =====
def test_slow_network():
    # 启用网络监控
    dev_tools.send(dev_tools.network.enable())
    
    # 模拟3G网络
    driver.execute_cdp_cmd("Network.emulateNetworkConditions", {
        "offline": False,
        "latency": 200,  # 200ms延迟
        "downloadThroughput": 780 * 1024 / 8,  # 780 Kbps
        "uploadThroughput": 330 * 1024 / 8     # 330 Kbps
    })
    
    driver.get("https://your-app.com")
    # 测试在弱网下的加载表现

# ===== 示例3：拦截并修改请求 =====
def test_request_interception():
    # 启用Fetch域
    driver.execute_cdp_cmd("Fetch.enable", {
        "patterns": [{"urlPattern": "*api*", "requestStage": "Request"}]
    })
    
    # 添加监听器（需要通过WebSocket或Selenium的EventListener）
    driver.get("https://your-app.com")
    
    # 验证特定API请求是否携带了正确参数

# ===== 示例4：性能指标采集 =====
def test_performance_metrics():
    # 启用性能监控
    driver.execute_cdp_cmd("Performance.enable")
    
    driver.get("https://your-app.com")
    
    # 获取性能指标
    metrics = driver.execute_cdp_cmd("Performance.getMetrics", {})
    print("性能指标:", metrics)
    
    # 获取页面加载时间
    timing = driver.execute_script("""
        return JSON.stringify(performance.timing)
    """)

from playwright.sync_api import sync_playwright

def test_with_cdp_session():
    with sync_playwright() as p:
        browser = p.chromium.launch()
        context = browser.new_context()
        page = context.new_page()
        
        # 创建CDP会话（直接访问Chrome DevTools Protocol）
        cdp_session = context.new_cdp_session(page)
        
        # ===== 高级网络控制 =====
        # 启用网络监控
        cdp_session.send("Network.enable")
        
        # 模拟特定网络条件
        cdp_session.send("Network.emulateNetworkConditions", {
            "offline": False,
            "downloadThroughput": 1.5 * 1024 * 1024 / 8,  # 1.5 Mbps
            "uploadThroughput": 750 * 1024 / 8,            # 750 Kbps
            "latency": 150                                 # 150ms延迟
        })
        
        # ===== 性能监控 =====
        cdp_session.send("Performance.enable")
        
        page.goto("https://example.com")
        
        # 获取性能指标
        metrics = cdp_session.send("Performance.getMetrics")
        print("Chrome性能指标:", metrics)
        
        # ===== 模拟设备 =====
        cdp_session.send("Emulation.setDeviceMetricsOverride", {
            "width": 390,
            "height": 844,
            "deviceScaleFactor": 3,
            "mobile": True,
            "screenOrientation": {"angle": 0, "type": "portraitPrimary"}
        })
        
        # 截图验证移动端渲染
        page.screenshot(path="mobile_view.png", full_page=True)
        
        browser.close()

class VisualRegressionTester:
    def __init__(self, cdp: CDPController):
        self.cdp = cdp
        self.baseline_dir = "./visual_baselines"
        self.current_dir = "./visual_current"
    
    def capture_full_page(self, name: str):
        """捕获完整页面截图（包含视口外内容）"""
        # 获取页面完整尺寸
        metrics = self.cdp.send("Page.getLayoutMetrics")
        content_width = metrics["contentSize"]["width"]
        content_height = metrics["contentSize"]["height"]
        
        # 设置视口为页面完整尺寸
        self.cdp.send("Emulation.setDeviceMetricsOverride", {
            "width": content_width,
            "height": content_height,
            "deviceScaleFactor": 1,
            "mobile": False
        })
        
        # 截图
        self.cdp.screenshot(f"{self.current_dir}/{name}.png")
        
        # 恢复默认视口
        self.cdp.send("Emulation.clearDeviceMetricsOverride")
    
    def compare_with_baseline(self, name: str):
        """对比当前截图与基线"""
        from PIL import Image
        import pixelmatch
        
        baseline = Image.open(f"{self.baseline_dir}/{name}.png")
        current = Image.open(f"{self.current_dir}/{name}.png")
        
        diff = pixelmatch(baseline, current, threshold=0.1)
        if diff > 100:  # 差异像素数阈值
            raise AssertionError(f"❌ 视觉回归测试失败: {name}, 差异像素: {diff}")
        print(f"✅ 视觉测试通过: {name}")

# 使用示例
def test_ui_regression():
    cdp = CDPController(ws_url)
    tester = VisualRegressionTester(cdp)
    
    # 测试关键页面
    pages = [
        ("首页", "https://app.com/home"),
        ("商品详情", "https://app.com/product/123"),
        ("购物车", "https://app.com/cart")
    ]
    
    for name, url in pages:
        cdp.send("Page.navigate", {"url": url})
        cdp.wait_event("Page.loadEventFired")
        time.sleep(2)  # 等待动画完成
        
        tester.capture_full_page(name)
        tester.compare_with_baseline(name)

# 1. 安装Playwright CLI
npm install -g @playwright/cli@latest
npx playwright install  # 安装浏览器

# 2. 体验UI模式（强烈推荐）
npx playwright test --ui

# 3. 录制你的第一个测试
npx playwright codegen https://testfather.cn

# 开启UI模式，像看视频一样看测试执行
npx playwright test --ui

# Playwright CLI直接执行JS获取元素
playwright-cli eval "document.querySelector('#app').innerText"

# 同时跑三个浏览器
npx playwright test --project=chromium --project=firefox --project=webkit

# 生成性能追踪文件
npx playwright test --trace=on
npx playwright show-trace trace.zip

# 1. 录制操作生成代码
npx playwright codegen https://your-app.com/login

# 2. 直接在命令行执行测试
npx playwright test --headed --grep "login"

# 用户输入："打开百度，搜索'UI自动化'，截图保存"
# AI自动生成并执行：

playwright-cli open https://www.baidu.com
playwright-cli type "#kw" "UI自动化"
playwright-cli click "#su"
playwright-cli screenshot --full-page

// 通过CDP监听网络请求
const CDP = require('chrome-remote-interface');

async function testErrorReporting() {
  const client = await CDP();
  const { Network, Page } = client;
  
  // 开启网络监控
  await Network.enable();
  
  // 拦截所有请求
  Network.requestWillBeSent((params) => {
    if (params.request.url.includes('error-report')) {
      console.log('✅ 错误上报请求已捕获:', params.request);
    }
  });
  
  // 导航到测试页面
  await Page.navigate({ url: 'https://your-app.com' });
}

# Playwright CLI调整视口模拟iPhone
playwright-cli resize 375 667  # iPhone SE尺寸
playwright-cli screenshot --full-page mobile-view.png

# 或者使用内置设备配置
npx playwright test --project="Mobile Safari"

# 无头模式运行，生成HTML报告
npx playwright test --reporter=html

# 查看报告
npx playwright show-report

# 多Worker并行，提速
npx playwright test --workers=4