Playwright × CoPilot：UI自动化的超级加速器

在前端测试自动化领域，Playwright已迅速崛起，成为一款强大可靠的工具——在许多关键领域，它甚至超越了Selenium等老牌巨头，甚至Cypress等现代竞争对手。本文探讨了Playwright 如何增强 UI 自动化，以及如何使用CoPilot构建和格式化 Playwright 代码，以实现一致性、可维护性和可扩展性。

普通网友

561人浏览 · 2025-09-10 14:52:06

普通网友 · 2025-09-10 14:52:06 发布

📝 面试求职： 「面试试题小程序」，内容涵盖测试基础、Linux操作系统、MySQL数据库、Web功能测试、接口测试、APPium移动端测试、Python知识、Selenium自动化测试相关、性能测试、性能测试、计算机网络知识、Jmeter、HR面试，命中率杠杠的。（大家刷起来…）

📝 职场经验干货：

软件测试工程师简历上如何编写个人信息（一周8个面试）

软件测试工程师简历上如何编写专业技能（一周8个面试）

软件测试工程师简历上如何编写项目经验（一周8个面试）

软件测试工程师简历上如何编写个人荣誉（一周8个面试）

软件测试行情分享（这些都不了解就别贸然冲了.）

软件测试面试重点，搞清楚这些轻松拿到年薪30W+

软件测试面试刷题小程序免费使用（永久使用）

在前端测试自动化领域，Playwright已迅速崛起，成为一款强大可靠的工具——在许多关键领域，它甚至超越了Selenium等老牌巨头，甚至Cypress等现代竞争对手。本文探讨了Playwright 如何增强 UI 自动化，以及如何使用CoPilot构建和格式化 Playwright 代码，以实现一致性、可维护性和可扩展性。

为什么 Playwright 可以实现 UI 自动化？

Playwright 由微软开发，是一个 Node.js 库，可通过单一 API 实现 Chromium、Firefox 和 WebKit 的自动化控制。Playwright 不仅提供浏览器控制功能，还提供以下功能：

开箱即用的跨浏览器支持

它通过一个统一的 API 支持 Chromium、Firefox 和 WebKit。

自动等待

它等待元素准备就绪后再执行操作，从而减少不稳定性。

并行测试执行

它带有一个内置测试运行器（@playwright/test），支持分片、并行和重试。

无头模式和有头模式

在无头模式下运行测试以提高 CI 管道的速度和效率。
在本地调试或调查失败的测试时切换到有头模式，这样您就可以准确地看到浏览器中发生的情况。

多上下文支持

在隔离的浏览器环境中并行运行测试。

内置跟踪、视频和屏幕截图

测试调试变得非常容易。

为什么 Playwright 优于 Selenium？

按 Enter 键或单击即可查看完整尺寸的

为什么选择 Playwright Over Cypress？

按 Enter 键或单击即可查看完整尺寸的图像

CoPilot 如何帮助格式化和原始PlayWright代码

假设您快速编写了一个 Playwright 脚本。CoPilot可以帮助您重构和构建该脚本，使其：

清洁工
更可重复使用
适合团队阅读
DRY（不要重复自己）

以下是基于最佳实践的代码模板，可以通过CoPilot格式化程序插件自动生成或强制执行：

文件夹结构示例

PlayWright代码（原始且非结构化）

const { 测试，期望 } = require ( '@playwright/test' ) ;

test('应用折扣码', async ({ page }) => { 
  await page.goto('https://yourapp.com'); 
  await page.getByTestId('username-input').fill('admin'); 
  await page.getByTestId('password-input').fill('password123'); 
  await page.getByTestId('login-btn').click(); 
  await page.getByTestId('namespace-dropdown').selectOption('marketing');  等待页面.getByTestId（'折扣名称输入'）。填充（'50OFF'）；
  等待页面.getByTestId（'应用折扣按钮'）。点击（）；
  const result = 等待页面.getByTestId（'结果横幅'）。innerText（）；  期望（结果）.toContain（'已应用折扣'）; 
}）;

您可以使用的 CoPilot 提示

创建一个带有构造函数的类，该构造函数仅用于初始化页面对象。
在类之前，在文件开头声明所有定位器。
使用上述定位器创建方法。
确保不要重复添加定位器，而是
使用在页面开头声明的变量。
示例：await this.page.getByTestId(discountNameInputLoc).Click() 
，其中 discountNameInputLoc 是变量名，Click 是导入的方法。
确保为所有方法添加作者块。
将导航、登录和 selectNamespace 等常用逻辑移至辅助 js 文件。

CoPilot 重构版本（遵循指南）

定位器（定义一次）

// locators.js
模块. export = { 
usernameInputLoc : '用户名输入' , 
passwordInputLoc : '密码输入' , 
loginButtonLoc : '登录按钮' , 
namespaceDropdownLoc : '命名空间下拉' , 
discountNameInputLoc : '折扣名称输入' , 
applyButtonLoc : '应用折扣按钮' , 
resultBannerLoc : '结果横幅'
 };

页面对象（DiscountPage.js）

// 页面/DiscountPage.js 
const { 
  discountNameInputLoc，
  applyButtonLoc，
  resultBannerLoc 
} = require（'../locators'）;

类 DiscountPage {
  构造函数（page）{ 
    this.page = page; 
  }  /** @author rohit pandey */ 
  async applyDiscount(code) { 
    await this.page.getByTestId(discountNameInputLoc).fill(code); 
    await this.page.getByTestId(applyButtonLoc).click(); 
  }  /** @author rohit pandey */ 
  async getResultText() { 
    return await this.page.getByTestId(resultBannerLoc).innerText(); 
  } 
}模块.exports = 折扣页面;

通用助手（commonHelpers.js）

// helpers/commonHelpers.js 
const { 
  usernameInputLoc，
  passwordInputLoc，
  loginButtonLoc，
  namespaceDropdownLoc 
} = require ( '../locators' ) ;

/** @author rohit pandey */
异步函数 navigateTo(page, url) { 
  await page.goto(url); 
}/** @author rohit pandey */
异步函数登录（页面，用户名，密码）{
  等待页面.getByTestId（usernameInputLoc）。填充（用户名）；
  等待页面.getByTestId（passwordInputLoc）。填充（密码）；
  等待页面.getByTestId（loginButtonLoc）。点击（）；
}/** @author rohit pandey */
异步函数 selectNamespace(page, namespace) { 
  await page.getByTestId(namespaceDropdownLoc).selectOption(namespace); 
}模块.exports = { 
  navigateTo, 
  login, 
  selectNamespace 
};

最终测试用例（discount.test.js）

const { test，expect } = require（'@playwright/test'）; 
const DiscountPage = require（'../pages/DiscountPage'）; 
const { navigateTo，login，selectNamespace } = require（'../helpers/commonHelpers'）;

test('应用折扣码并验证成功', async ({ page }) => { 
  await navigateTo(page, 'https://yourapp.com'); 
  await login(page, 'admin', 'password123'); 
  await selectNamespace(page, 'marketing');  const discountPage = new DiscountPage(page); 
  await discountPage.applyDiscount('50OFF');  const resultText = await discountPage.getResultText(); 
  expect(resultText).toContain('已应用折扣'); 
});

CoPilot 重构摘要

| 之前（原始）| 之后（由 CoPilot 重构）| 
| ------------------------- | ---------------------------------- | 
| 到处都是混合逻辑 | 清晰的关注点分离 | 
| 重复的定位器 | 集中的定位器文件 | 
| 没有代码重用 | 可重复使用的助手 | 
| 难以维护 | 易于更新，可扩展的结构 | 
| 没有作者或元数据 | 用于可追溯性的作者块 |