手膜手带你入门 Playwright（TS 版本）

致力于用最直接明了的方式分享技术，本文持续更新中，喜欢的点个赞和收藏呗～

1. 安装

• 官方文档（安装）： 官方文档

• 也可以按照以下步骤安装：

  1. 打开 VSCode
  2. 按住 Command + Shift + P （Mac 电脑）
  3. 输入 Install Playwright
     
  4. 按需选择浏览器，点击确定
     

• 推荐安装官方插件
  

• 安装完成后目录如下, 并且点击运行按钮运行 case
  
  

---

2. 运行

• 运行所有case：npx playwright test
• 运行单个测试文件：npx playwright test example.spec.ts (默认无头运行, 可以在 playwright.config.ts 配置文件中的 use 中增加 headless: false)

• 运行多个测试文件(有头)：npx playwright test example.spec.ts example2.spec.ts --headed
• 指定浏览器：npx playwright test test.spec.ts --project=chromium

---

3. 截屏

3.1 截取元素

// 截取元素
const searchBtn = page.locator('input[value="百度一下"]');
searchBtn.screenshot({
    path: 'element.png' });
searchBtn.click();

3.2 截当前屏

await page.screenshot({
    path: 'screenshot.png' });

3.3 截全屏

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

完整代码：

import {
    test, expect, chromium }