Playwright测试不止一种，这些小众技巧geng惊艳

说起 Playwright，咱hen多人第一反应就是“它Neng跑 E2E”。哈哈，其实它的潜力远超你想象。

先跟你唠嗑一下玩玩自动化的朋友们，常常会遇到两难：要是写脚本太死板，页面一改就挂；要是太灵活，又怕不够稳。说实话，这种纠结我也深有体会。

把登录流程抽离成共享模块

Zui常见的坑就是每个用例dou要重复登录。

解决办法？把登录封装进一个单独的 setup 脚本，然后在配置里声明依赖。

代码大概长这样：

import { test as base } from '@playwright/test';
export const test = base.extend({
  // 登录一次复用 session
  context: async  => {
    const context = await browser.newContext;
    const page = await context.newPage;
    await page.goto;
    await page.fill;
    await page.fill;
    await page.click;
    await page.waitForURL;
    // 保存状态
    const storage = await context.storageState;
    // 把状态写入磁盘，下次直接加载
    const fs = require;
    fs.writeFileSync);
    // 
创建带状态的上下文供测试使用
    const authContext = await browser.newContext;
    await use;
  },
});

这么一弄，后面的所有用例douNeng直接复用登录态，省时省力。

网络拦截 + 模拟响应，让后端不再是瓶颈

有时候接口慢得像蜗牛，你等得心烦。别慌，用 route 拦截直接返回假数据。

示例：

await page.route('**/api/pay', async route => {
  // 模拟成功支付
  await route.fulfill({
    status: 200,
    contentType: 'application/json',
    body: JSON.stringify
  });
});

这招在 CI 环境里尤其管用，避免外部服务波动影响测试结果。

多网络条件下的性Neng对比

别只在千兆网测，真实用户常在4G甚至弱网。

Playwright 提供了 emulateNetworkConditions，Ke以轻松切换。

await context.setOffline;
await context.routeFromHAR;
await context.setDefaultTimeout;
await page.emulateNetworkConditions({
  download: 500 * 1024, // 500KB/s
  upload:   200 * 1024,
  latency:   100       // ms
});

跑完后用自研脚本算平均加载时间，你会发现原来还有提升空间呢。

视觉回归检测：像素级对比

页面改版后总怕某个细节被踩到。像素对比帮你抓住每一处差异。

import pixelmatch from 'pixelmatch';
import { PNG } from 'pngjs';
import fs from 'fs';
async function compare {
  const cur = PNG.sync.read);
  const base = PNG.sync.read);
  const { width, height } = cur;
  const diff = new PNG;
  const diffPixels = pixelmatch;
  if  {
    fs.writeFileSync);
    console.log;
  }
}

把这段放进 CI，每次部署自动跑，一出现异常立马告警。咱就是说这比人工检查省了好几个晚上。

移动端模拟：不止改 viewport 那点事儿

hen多同学只改宽高，以为就算移动端了。实际上，还得打开 touch 支持、设置 deviceScaleFactor。

const iPhone12 = playwright.devices;
const context = await browser.newContext({
   ...iPhone12,
   locale: 'zh-CN',
   geolocation: { latitude:31.23, longitude:121.47 },
   permissions:
});
const page = await context.newPage;
await page.goto;

这样跑出来的交互geng贴近真机，比如滑动加载、弹窗键盘弹起，douNeng完整复现。

为什么百度不收录？说说原因和对策

hen多站长抱怨：“我的页面百度根本不收录”。其实原因通常有以下几条：

缺少 robots.txt 或者误写了 disallow；

页面加载太慢，被判定为“低质量”。

内容重复度高，或者标题、meta 没写规范；

服务器返回错误码或频繁出现验证码拦截。

对应措施呢？先检查一下 robots 配置，确保没有误拦；再用 Playwright 的 networkidle 等待策略，把关键资源全加载完再生成快照；Zui后给每篇文章加上唯一的 H1、描述和结构化数据，提升抓取友好度。懂了吗？懂的话记得去试试kan。

爬虫+Playwright：偷懒式抓取 API 数据

AFAIK，大多数前端 SPA dou是通过 XHR/Fetch 拉数据的。我们完全Ke以在浏览器层面直接把这些请求拦下来而不是去解析 DOM。

await page.route('**/api/**', async route => {
   const resp = await route.fetch;
   const json = await resp.json;
   collected.push;
   // 把原始请求继续放行
   await route.continue;
});
await page.goto;
// 收集完毕后写文件
const fs=require;
fs.writeFileSync);

P.S. Ru果遇到 Cloudflare 验证码，那就需要配合 stealth 插件——别问我怎么装，我这儿懒得写教程了你自己 Google 吧，哈哈。

A/B 测试自动化：让实验结果geng可信

A/B 实验往往需要手工打开多个变体，对比转化率。Playwright Neng帮你批量打开变体页面并截图，然后交给统计脚本算出差异率。

for  {
   const url=`https://site.com?var=${variant}`;
   const page=await context.newPage;
   await page.goto;
   await page.screenshot;
}

随后用前面的 pixelmatch 对比工具，一眼kan出 UI 差异，再配合埋点数据，就Neng完整评估实验效果啦！咱就是说这套流程一搭建，以后每次实验只要跑一次脚本就行，不需要再手动点来点去。

Pain Point：什么时候别硬上 Playwright？

- Ru果你的需求只是调用几次 REST 接口，那直接 fetch 就行了不必浪费几百 MB 的 Chromium 启动时间； - 大规模爬虫时用纯 HTTP 客户端geng经济，除非必须渲染 JS 才Neng拿到数据； - 原生 App 自动化肯定不是 Playwright 的强项，用 Appium 或 Maestro geng靠谱。

选工具的时候先问自己：“我到底在操作页面还是接口？”Ru果答案是前者，那 Playwright 拿来恰好。Ru果是后者，那别给自己加负担啦！说实话，我之前也走过弯路，花了半天调试一个根本不需要浏览器的任务，现在回想起来真是哭笑不得。

end of story – 咱们聊聊吧！

文章里提到的代码片段dou是Ke以直接 copy‑paste 的。实际项目里你Ke以把这些技巧拆成独立模块，然后在 CI 中按需引入，保持代码干净整洁。

# 小结

登录复用 + storageState 大幅缩短准备时间；

网络拦截让后端波动不再干扰测试；

多网络条件、多设备模拟让覆盖面geng完整；

PWA / SPA 场景下直接抓 API 是Zui稳妥的方法；

Baidu 不收录往往是技术细节导致，只要排查好 robots、性Neng和内容即可解决。

# Zui后

If you’ve got “一直想自动化但不知道该不该用 Playwright”的场景，留言聊聊呗，我们一起判断到底该不该上浏览器~ 哈哈！你懂的~ 🙌🏻​

---