如何将Playwright与Perfecto集成，在其云端运行Web及移动端测试？

核心原理 #

Perfecto 支持通过 Playwright 的 Remote Connect 模式对接云端设备/浏览器，无需专门的集成SDK，直接通过Playwright原生的connect()方法或配置文件指定云端端点即可。

前置准备 #

• 已拥有Perfecto云端账号（含可用设备/浏览器资源）
• 本地项目已安装@playwright/test及TypeScript依赖
• 获取Perfecto云端的端点URL、安全令牌（Security Token）或账号密码

Web 场景集成步骤 #

1. 修改Playwright配置文件（playwright.config.ts）
   在use字段中添加远程连接配置，替换为你的Perfecto信息：

   import { defineConfig, devices } from '@playwright/test';
   
   export default defineConfig({
     use: {
       connectOptions: {
         wsEndpoint: 'wss://<your-perfecto-cloud>.perfectomobile.com/playwright/ws?securityToken=<your-token>',
         headers: {
           'Perfecto-Cloud': '<your-cloud-name>'
         }
       },
       browserName: 'chromium', // 可指定firefox/webkit
       viewport: { width: 1280, height: 720 }
     },
     projects: [
       { name: 'perfecto-web-chromium', use: { ...devices['Desktop Chrome'] } }
     ]
   });
   

2. 编写测试用例（示例）
   无需修改原有测试逻辑，直接运行即可：

   import { test, expect } from '@playwright/test';
   
   test('Perfecto云端Web测试', async ({ page }) => {
     await page.goto('https://example.com');
     await expect(page).toHaveTitle('Example Domain');
     await page.getByText('More information').click();
   });
   

3. 运行测试
   执行原有Playwright命令即可：

   npx playwright test
   

移动端场景集成（Web测试） #

针对移动端Web，只需在配置中指定设备能力参数：

1. 更新配置文件
   在projects中添加移动端项目：

   projects: [
     // ... 原有Web项目
     {
       name: 'perfecto-mobile-web',
       use: {
         ...devices['Pixel 5'],
         connectOptions: {
           wsEndpoint: 'wss://<your-perfecto-cloud>.perfectomobile.com/playwright/ws?securityToken=<your-token>',
           headers: {
             'Perfecto-Cloud': '<your-cloud-name>',
             'Perfecto-Device': 'Pixel 5' // 指定云端设备名称
           }
         }
       }
     }
   ]
   

2. 移动端原生应用测试（可选）
   如果需要测试原生App，需在connectOptions中添加App相关参数：

   connectOptions: {
     wsEndpoint: 'wss://<your-perfecto-cloud>.perfectomobile.com/playwright/ws?securityToken=<your-token>',
     headers: {
       'Perfecto-Cloud': '<your-cloud-name>',
       'Perfecto-Device': 'iPhone 14',
       'Perfecto-App': 'storage:filename=your-app.apk' // 云端存储的App路径
     }
   }
   

关键注意事项 #

• 确保Perfecto云端的设备/浏览器处于可用状态
• 安全令牌可在Perfecto控制台的"Profile"页面获取
• 若使用账号密码认证，可将securityToken替换为user=<username>&password=<password>
• 测试运行后，可在Perfecto控制台查看测试报告、录屏及日志

内容的提问来源于stack exchange，提问作者Deepak