当前位置：首页 > news >正文

Playwright自动化测试进阶：网络拦截、模拟登录与文件上传实战

news 2026/6/30 20:12:49

1. 项目概述：为什么我们需要这些“高级技巧”？

如果你已经用Playwright写过一些基础的自动化脚本，比如点点按钮、填填表单，那你可能已经感受到了它的便捷。但当你真正想把自动化应用到复杂的业务场景，比如测试一个需要登录的Web应用、验证文件上传功能是否安全、或者模拟特定的网络请求时，光靠page.click()和page.fill()就显得力不从心了。这时，所谓的“高级技巧”就不再是锦上添花，而是解决问题的必需品。

我最近在为一个电商后台系统做自动化回归测试，就深刻体会到了这一点。系统有严格的登录态校验，测试数据依赖特定的API返回，还有一堆商品图片、Excel报表的上传功能需要验证。如果只会录制回放，这些场景一个都搞不定。网络拦截让我能精准控制请求与响应，构造测试数据；模拟登录帮我绕过繁琐的UI登录流程，直接获取有效会话；而文件上传的稳健处理，则是确保自动化流程不卡壳的关键。这三个技巧组合起来，才真正把Playwright从一个“浏览器操控工具”升级为“业务流程自动化利器”。接下来，我就结合实战中的坑和收获，把这套组合拳的详细打法拆解给你看。

2. 核心思路与方案选型：从“能跑”到“跑得好”

在动手写代码之前，我们先得想清楚要用什么方式来实现这些功能。Playwright提供了多种途径，选对了路，事半功倍；选错了，可能就得在坑里挣扎半天。

2.1 网络拦截：`page.route()`是唯一主角

对于网络请求的干预，Playwright主要提供了page.route()方法。有些人可能会想到用page.on('request')和page.on('response')事件监听器，但那只能“看”，不能“改”。page.route()才是那个能让你在请求发出前或响应返回后，进行拦截并修改的“关卡”。

为什么是page.route()？因为它提供了最细粒度的控制。你可以在请求阶段(route.continue()、route.fulfill()、route.abort())决定请求的命运，也可以在响应阶段通过route.fulfill()直接模拟一个响应。这对于模拟API接口返回、屏蔽不必要的资源（如图片、广告）以提升测试速度、或者注入测试数据来说，是核心手段。在我的项目中，为了测试商品列表页在不同数据状态下的UI表现，我就大量使用了route.fulfill()来返回预先准备好的JSON数据，完全绕开了后端服务的不稳定性。

2.2 模拟登录：持久化Context胜过一切

模拟登录的目标不仅仅是“登上去”，更是“以登录状态高效地执行后续操作”。这里有两个主流方案：

UI操作登录：用脚本模拟输入用户名、密码、点击登录按钮。这是最直观但也是最脆弱的方法。验证码、动态令牌、登录接口防刷机制，任何一个都能让脚本瞬间失效。
Cookie/Storage注入：先通过一次手动或API登录，获取到有效的认证Cookie或LocalStorage/SessionStorage数据，然后在启动浏览器上下文（BrowserContext）时直接注入。

毫不犹豫地选择方案2。Playwright的browser.newContext()方法允许你直接传入storageState参数，这是一个包含了cookies和local storage的JSON文件。一旦生成，这个文件就像一把“万能钥匙”，可以在任何时间、任何机器上快速创建一个已登录的浏览器会话，完全跳过UI登录流程。这不仅是速度快，更重要的是稳定性和可移植性极强。我的自动化测试流水线就是靠这个storageState.json文件，在每次构建时快速初始化测试环境的。

2.3 文件上传：告别`input[type=file]`的思维定式

一提到文件上传，很多人的第一反应是找到<input type="file">元素，然后使用setInputFiles()方法。这没错，但对于现代Web应用，这常常行不通。

为什么？因为很多网站为了美化上传按钮，会用<div>或<button>元素覆盖掉原生的input，然后通过JavaScript监听拖拽或点击事件，用FormData或XMLHttpRequest/Fetch API来上传。此时，页面上根本找不到那个原生的input元素。

因此，我们的方案必须升级：

优先寻找原生input元素：如果存在，setInputFiles()是最简单的。
应对隐藏或美化过的上传：使用page.on('filechooser')事件监听器。当用户点击触发文件选择的行为时（无论UI是什么），Playwright会触发这个事件，你可以在回调中指定要上传的文件路径。
终极方案：模拟API上传：对于极其复杂或自定义的上传逻辑，直接分析其网络请求，然后用page.request.post()或拦截route.continue()并修改请求体的方式，模拟整个文件上传的HTTP请求。这需要一定的逆向工程能力，但一劳永逸。

在我的实战中，三种情况都遇到过。一个后台管理系统使用了Ant Design的上传组件（方案2），而另一个图床网站则使用了分片上传的API（方案3）。掌握多套打法，才能应对自如。

3. 网络拦截实战：从屏蔽广告到篡改API

理论说完了，我们进入实战。网络拦截的API看似简单，但用好的关键在于理解其生命周期和适用场景。

3.1 基础拦截：屏蔽资源与模拟响应

假设我们要测试的页面加载了很多第三方分析脚本和广告，拖慢了速度。我们可以启动时就拦截这些请求。

const { chromium } = require('playwright'); (async () => { const browser = await chromium.launch({ headless: false }); const page = await browser.newPage(); // 拦截并中止对特定URL模式的请求 await page.route('**/*.{png,jpg,jpeg,gif,svg}', route => route.abort()); await page.route('**/ads/*', route => route.abort()); await page.route('**/analytics.js', route => route.abort()); await page.goto('https://example.com'); // 页面加载会更快，因为图片和广告请求被中止了 await browser.close(); })();

更常见的是模拟API响应。比如，我们需要测试前端在“商品库存为0”时的展示逻辑，但后端一时无法提供这个状态。

await page.route('**/api/product/123', async route => { // 构造一个模拟的JSON响应 const mockResponse = { id: 123, name: '测试商品', stock: 0, // 模拟库存为0 price: 99.9 }; // 使用fulfill直接返回模拟数据，不发送真实请求 await route.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify(mockResponse), }); }); await page.goto('https://shop.com/product/123'); // 此时页面展示的将是“缺货”状态，尽管后端商品可能实际有库存

注意：route.fulfill()和route.continue()是互斥的。调用了fulfill，就意味着拦截并返回自定义响应，请求不会继续发往服务器。如果你需要修改请求头或请求体后再放行，则应使用route.continue()。

3.2 高级技巧：修改请求与响应

有时我们不需要完全模拟，而是要对真实的请求或响应做一点“手脚”。

修改请求头：例如，给所有请求加上一个特定的追踪ID。

await page.route('**/*', async route => { const headers = { ...route.request().headers(), 'X-Trace-Id': 'my-automated-test-123', }; await route.continue({ headers }); });

修改请求体（POST请求）：这在测试表单提交边界值时非常有用。

await page.route('**/api/submit', async route => { const request = route.request(); // 只处理POST请求 if (request.method() === 'POST') { const postData = request.postData(); let modifiedData; if (postData) { // 假设是JSON格式 const data = JSON.parse(postData); data.amount = 999999; // 修改为一个极大的数值，测试边界 modifiedData = JSON.stringify(data); } await route.continue({ postData: modifiedData }); } else { await route.continue(); } });

修改响应体：这是最强大的功能之一。比如，你想测试前端对某个API返回错误码时的容错UI，但让后端真的报错可能很麻烦。

await page.route('**/api/user/profile', async route => { const response = await route.fetch(); // 先发起真实请求 const originalBody = await response.text(); let modifiedBody = originalBody; // 如果原响应是成功的，我们可以把它改成失败的 if (response.status() === 200) { const bodyObj = JSON.parse(originalBody); // 模拟一个服务端错误响应 modifiedBody = JSON.stringify({ code: 500, message: 'Internal Server Error: Database connection failed.', data: null }); } await route.fulfill({ response, body: modifiedBody, // 如果需要，也可以修改状态码 // status: 500, }); });

这里用到了route.fetch()，它代表“先执行真实的网络请求，拿到结果后再处理”。这比纯粹的fulfill更接近真实场景，因为你是在真实响应的基础上进行修改。

3.3 实战心得与避坑指南

拦截的作用域：page.route()只对当前page对象生效。如果你通过page.click()打开了一个新标签页（popup），需要在新page对象上重新设置路由。而browserContext.route()则对该上下文下的所有页面生效。
匹配模式（Glob Pattern）：**/*.js会匹配所有JS文件。**/api/*会匹配所有包含/api/路径的请求。使用要精确，避免过度拦截影响正常功能。建议先从具体的URL开始测试。
顺序问题：如果对同一个URL注册了多个路由处理器，它们会按照注册的相反顺序执行（后注册的先执行）。第一个调用route.fulfill()或route.continue()的处理器会终止链。
性能影响：拦截所有请求（**/*）会带来额外的性能开销，在非必要情况下不要使用。尽量缩小拦截范围。
await的重要性：在路由处理函数中，几乎所有操作都是异步的。别忘了await，否则会导致请求挂起或页面行为异常。

我踩过的一个坑是试图在路由处理函数中调用page.evaluate()。这会造成死锁，因为page.evaluate需要页面暂停执行来运行你的脚本，而页面正在等待路由处理函数完成。如果必须在路由中操作DOM，应该使用route.fulfill()返回一个修改过的HTML，或者通过其他事件来触发。

4. 模拟登录实战：获取并复用认证状态

让我们彻底告别在自动化脚本里输入密码的日子。我们的目标是：一次认证，永久（或一段时间内）使用。

4.1 生成存储状态文件

首先，我们需要手动（或通过API）登录一次，把这次登录的“状态”保存下来。

const { chromium } = require('playwright'); (async () => { const browser = await chromium.launch({ headless: false }); const context = await browser.newContext(); const page = await context.newPage(); await page.goto('https://your-app.com/login'); // 方式1：UI登录（如果无验证码等障碍） await page.fill('#username', 'testuser'); await page.fill('#password', 'testpass'); await page.click('button[type="submit"]'); // 等待登录成功，例如跳转到首页或出现用户菜单 await page.waitForURL('https://your-app.com/dashboard'); // 或者等待某个登录后特有的元素出现 await page.waitForSelector('.user-avatar'); // 关键步骤：将当前上下文的存储状态保存到文件 await context.storageState({ path: 'auth.json' }); await browser.close(); console.log('认证状态已保存至 auth.json'); })();

生成的auth.json文件内容大致如下，包含了该域名下的所有cookies和localStorage：

{ "cookies": [ { "name": "sessionid", "value": "a1b2c3d4...", "domain": ".your-app.com", "path": "/", "expires": 1741234567.123456, "httpOnly": true, "secure": true, "sameSite": "Lax" } // ... 其他cookies ], "origins": [ { "origin": "https://your-app.com", "localStorage": [ {"name": "user_token", "value": "xyz789"}, {"name": "theme", "value": "dark"} ] } ] }

4.2 使用存储状态文件快速登录

有了这个文件，后续所有测试脚本都可以直接“无登录”进入系统。

const { chromium } = require('playwright'); (async () => { const browser = await chromium.launch({ headless: false }); // 启动时直接加载存储状态，创建已登录的上下文 const context = await browser.newContext({ storageState: 'auth.json' }); const page = await context.newPage(); // 直接打开需要登录才能访问的页面 await page.goto('https://your-app.com/dashboard'); // 此时页面应该直接显示登录后的内容，无需再输入密码 await page.screenshot({ path: 'dashboard.png' }); await browser.close(); })();

4.3 处理登录态过期与更新

auth.json不是永久的。Cookie有过期时间，服务器也可能主动让会话失效。因此，我们需要一套更新机制。

方案一：定期重新生成。在CI/CD流水线中，可以设置一个定时任务，比如每天凌晨，运行一次“生成auth.json”的脚本，覆盖旧文件。方案二：在测试脚本中增加校验。每次使用auth.json前，先访问一个需要登录的接口或页面，检查是否返回401或跳转到登录页。如果失效，则调用一个专门的登录函数（可以是UI登录，更推荐是调用登录API获取新token并更新auth.json）。

async function ensureLogin(context, page) { // 尝试访问一个受保护的API const response = await page.goto('https://your-app.com/api/user/info'); if (response.status() === 401 || page.url().includes('/login')) { console.log('会话已过期，正在重新登录...'); // 调用你的登录逻辑，这里简化表示 await doLogin(page); // 重新保存状态 await context.storageState({ path: 'auth.json' }); console.log('登录状态已更新。'); } else { console.log('会话有效。'); } }

4.4 实战心得与避坑指南

storageState的作用域：storageState是绑定到BrowserContext的。每个隔离的上下文（如无痕模式）都需要单独注入状态。如果你用browser.newPage()，它使用的是默认上下文，同样需要先给那个上下文设置状态。
LocalStorage和SessionStorage：storageState会保存localStorage，但不会保存sessionStorage，因为sessionStorage的生命周期仅限于单个标签页。如果你的应用登录态依赖于sessionStorage，这个方法可能不适用，你需要考虑其他方案，比如通过page.evaluate()手动注入。
跨域问题：auth.json里保存的cookies和storage都是有明确域名（domain）和路径（path）限制的。你不能用your-app.com的登录状态去直接访问api.your-app.com，除非cookie的domain设置正确（如.your-app.com）。有时需要检查并调整cookie的domain属性。
安全警告：auth.json包含了敏感的会话信息！绝对不要将它提交到版本控制系统（如Git）。一定要将它添加到.gitignore文件中。在CI/CD环境中，可以考虑使用秘密管理服务（如GitHub Secrets, AWS Secrets Manager）来存储或动态生成它。

我曾经因为忘了加.gitignore，不小心把测试环境的auth.json传到了GitHub上，虽然及时删除，但也惊出一身冷汗。现在我的项目模板里，第一件事就是把auth.json和*.state.json这类文件加入忽略列表。

5. 文件上传实战：攻克各种上传组件

文件上传是UI自动化中最令人头疼的环节之一，因为实现方式五花八门。我们分场景攻克。

5.1 标准Input上传：最简单的情况

如果页面上就是一个原生的<input type="file">元素，那是最简单的。

// 假设HTML为：<input type="file" id="file-upload"> await page.locator('input#file-upload').setInputFiles('/path/to/your/file.jpg'); // 如果要上传多个文件 await page.locator('input#file-upload').setInputFiles([ '/path/to/file1.jpg', '/path/to/file2.png', ]);

setInputFiles()方法会触发文件选择，并自动将文件路径填入。但正如前文所述，很多网站会隐藏这个input。

5.2 监听文件选择事件：应对美化组件

当点击一个漂亮的按钮或拖拽区域时，底层可能仍然会触发一个文件选择对话框。Playwright可以监听这个时刻。

// 启动文件选择监听（必须在打开页面和触发操作之前设置） page.once('filechooser', async (fileChooser) => { // 当文件选择对话框被触发时，这里设置要上传的文件 await fileChooser.setFiles('/path/to/your/file.pdf'); }); // 然后，执行触发文件选择的操作，比如点击那个“上传”按钮 await page.click('.ant-upload-select button'); // 例如Ant Design的上传按钮 // 或者触发拖放区域 const uploadArea = page.locator('.drop-zone'); await uploadArea.dispatchEvent('drop', { dataTransfer: { files: [file] } }); // 注意，这里需要构造DataTransfer对象，通常用`setInputFiles`或`filechooser`更简单 // 更通用的做法：直接点击触发元素 await page.click('.upload-button');

关键点：page.on('filechooser', ...)必须在触发点击操作之前设置。因为这是一个事件监听器，你需要先挂上钩子，再去触发事件。使用page.once可以确保监听器只触发一次，避免干扰后续操作。

5.3 模拟拖放上传

有些现代界面使用HTML5的拖放API。Playwright可以模拟这一过程，但步骤稍复杂。

// 1. 准备要上传的文件路径 const filePath = '/path/to/your/file.zip'; // 2. 创建DataTransfer对象（在浏览器环境中） await page.evaluate((path) => { // 这是一个在浏览器页面内执行的函数 const dataTransfer = new DataTransfer(); // 这里需要将文件路径转换为File对象，但在Playwright的page.evaluate中无法直接访问Node.js的fs模块。 // 因此，更实用的方法是：我们通常不直接模拟复杂的DataTransfer构造，而是... }, filePath); // 更实用的方法：如果拖放区域最终也是触发一个input或filechooser，那么回到方法2。 // 先监听filechooser page.once('filechooser', async (fc) => await fc.setFiles(filePath)); // 然后找到拖放区域元素，将文件“拖”进去 const dropZone = page.locator('.drop-area'); // 模拟拖拽事件序列：dragenter, dragover, drop await dropZone.dispatchEvent('dragenter'); await dropZone.dispatchEvent('dragover'); await dropZone.dispatchEvent('drop'); // 如果该区域设计正确，上述事件会触发底层的文件选择逻辑，从而被我们的filechooser监听器捕获。

实际上，对于大多数基于拖放的上传组件，直接触发drop事件并配合filechooser监听是最高效的方式。如果不行，可能需要查看组件源码，看它是否监听特定的数据格式。

5.4 终极方案：直接模拟HTTP请求

当UI操作过于复杂或不稳定时，直接模拟上传接口是最可靠的方法。这需要你先用浏览器开发者工具（F12 -> Network）分析文件上传时的网络请求。

观察请求：选择一个文件上传，查看产生的网络请求。通常是POST请求，Content-Type可能是multipart/form-data或application/octet-stream。
分析参数：查看请求的Form Data部分，除了文件本身（file），通常还有其他的参数（如token,folderId等）。
用Playwright模拟：

const fs = require('fs'); const { chromium } = require('playwright'); (async () => { const browser = await chromium.launch(); const context = await browser.newContext(); const page = await context.newPage(); // 首先，可能需要先导航到页面获取一些必要的token或cookie await page.goto('https://file-upload-site.com'); // 假设从页面中获取一个CSRF token const csrfToken = await page.locator('meta[name="csrf-token"]').getAttribute('content'); // 使用context.request或page.request发起独立的API请求 const apiContext = await request.newContext({ // 可以共享cookie，也可以单独设置headers extraHTTPHeaders: { 'X-CSRF-Token': csrfToken, }, }); const fileBuffer = fs.readFileSync('/path/to/your/file.pdf'); const response = await apiContext.post('https://file-upload-site.com/api/upload', { multipart: { // 字段名根据实际接口定义 'file': { name: 'myfile.pdf', // 文件名 mimeType: 'application/pdf', buffer: fileBuffer, }, 'description': '这是一个测试文件', 'folder': '123' }, // 或者，如果接口是binary流 // data: fileBuffer, // headers: { 'Content-Type': 'application/octet-stream' } }); console.log(`上传结果: ${response.status()} - ${await response.text()}`); // 上传成功后，你可能需要刷新页面或进行其他操作 await page.reload(); // ... 验证文件是否出现在列表中 await browser.close(); })();

这种方法完全绕过了浏览器UI，速度快且稳定。缺点是脱离了真实的用户交互流程，如果上传功能与页面JavaScript强绑定（比如上传前预览、进度条显示），则无法测试到这部分UI逻辑。

5.5 实战心得与避坑指南

文件路径：使用绝对路径最保险。相对路径是相对于当前Node.js进程的工作目录，在复杂的项目结构中容易出错。
文件权限：确保自动化脚本有权限读取你要上传的文件。

等待上传完成：setInputFiles()或fileChooser.setFiles()只是选择了文件，真正的上传可能在后台异步进行。之后一定要等待上传完成的指示，比如等待某个“上传成功”的提示元素出现，或者等待一个特定的网络请求完成。

await page.locator('input#file-upload').setInputFiles('file.jpg'); // 等待上传成功的提示 await page.waitForSelector('.upload-success-toast', { timeout: 30000 }); // 或者等待上传接口的响应 await page.waitForResponse(response => response.url().includes('/api/upload') && response.status() === 200 );

大文件上传：对于大文件，UI上传可能超时。考虑使用分片上传的API模拟，或者增加超时时间。Playwright的默认操作超时是30秒，可以通过setDefaultTimeout调整。
隐藏的Input：有时input[type=file]被设置为display: none或opacity: 0，但它仍然在DOM中。你可以直接用CSS选择器找到它并操作，无需触发点击事件。
动态生成的Input：有些组件会在点击按钮时，动态在DOM中创建一个临时的input元素。对于这种情况，用filechooser事件监听是最佳实践，因为你不知道它什么时候创建、选择器是什么。

我遇到过最棘手的情况是一个使用第三方库的上传组件，它监听拖放事件，但构造的DataTransfer对象格式非常特殊，直接模拟drop事件无效。最后是通过page.exposeFunction向页面注入一个函数，直接调用该组件内部的上传方法才解决的。这说明，有时候需要一些“黑客”精神，深入组件的实现。

6. 组合实战：一个完整的端到端测试案例

让我们把这三个技巧串联起来，完成一个真实的测试场景：“测试一个内容管理系统（CMS）的文章发布功能，该功能需要登录，且发布文章时需要上传封面图。”

测试目标：

使用存储状态快速登录CMS后台。
拦截文章列表API，模拟返回空数据，测试“暂无文章”的UI展示。
完成发布文章操作，包括填写表单和上传图片。
验证文章发布成功后，列表能正确更新。

const { chromium } = require('playwright'); const fs = require('fs'); const path = require('path'); (async () => { // 1. 启动浏览器，加载已登录状态 const browser = await chromium.launch({ headless: false, slowMo: 500 }); // slowMo方便观察 const context = await browser.newContext({ storageState: 'cms_auth.json' // 预先准备好的登录状态文件 }); const page = await context.newPage(); // 2. 拦截文章列表API，模拟空数据 await page.route('**/api/articles*', async route => { const mockEmptyList = { code: 200, data: { list: [], total: 0 } }; await route.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify(mockEmptyList), }); }); console.log('已设置API拦截，将返回空文章列表。'); // 3. 进入文章管理页 await page.goto('https://cms.example.com/admin/articles'); // 等待并验证“暂无数据”的提示出现 await page.waitForSelector('.ant-empty-description:has-text("暂无数据")'); console.log('成功验证空状态UI。'); // 4. 关闭拦截，恢复真实数据（或者导航到新页面，新页面的请求不会被旧路由影响） // 这里我们选择取消所有路由（更精确的做法是只取消特定路由） await page.unroute('**/api/articles*'); // 5. 点击“新建文章”按钮 await page.click('button:has-text("新建文章")'); await page.waitForURL('**/admin/article/create'); // 6. 填写文章表单 await page.fill('input[name="title"]', 'Playwright实战测试文章'); await page.fill('div[contenteditable="true"].editor', '这是一篇由Playwright自动化脚本创建的文章内容。'); // 7. 处理封面图片上传（假设是美化过的上传组件） console.log('开始处理文件上传...'); // 预先监听文件选择事件 const fileChooserPromise = page.waitForEvent('filechooser'); // waitForEvent比on('filechooser')更适用于已知的单个操作 // 触发上传操作 await page.click('.cover-upload-area'); // 等待文件选择对话框被触发 const fileChooser = await fileChooserPromise; // 设置要上传的文件（准备一个测试图片） const testImagePath = path.join(__dirname, 'test-cover.jpg'); await fileChooser.setFiles(testImagePath); console.log('文件已选择。'); // 等待上传完成（假设上传成功后会显示预览图） await page.waitForSelector('.cover-preview img', { timeout: 10000 }); console.log('封面图片上传成功。'); // 8. 选择分类（假设是下拉选择框） await page.click('.category-selector'); await page.click('.ant-select-item:has-text("技术博客")'); // 9. 点击发布按钮 await page.click('button:has-text("发布文章")'); // 10. 等待发布成功（可能是跳转，也可能是成功提示） // 方案A：等待跳转到列表页 await page.waitForURL('**/admin/articles'); // 方案B：等待成功Toast // await page.waitForSelector('.ant-message-success'); console.log('文章发布成功！'); // 11. 验证新文章出现在列表中（第一条） // 注意：这里我们取消了拦截，所以看到的是真实数据 const firstArticleTitle = await page.locator('.article-list tbody tr:first-child td.title').textContent(); if (firstArticleTitle.includes('Playwright实战测试文章')) { console.log('验证成功：新文章已出现在列表首位。'); } else { console.error('验证失败：未找到新文章。'); } // 12. 可选：进行一些清理工作，比如删除测试文章（通过调用API） // ... await page.close(); await browser.close(); console.log('测试流程执行完毕。'); })();

这个案例融合了三大技巧：

模拟登录：通过storageState无缝进入系统。
网络拦截：在测试特定UI状态（空列表）时，屏蔽真实API。
文件上传：使用waitForEvent('filechooser')处理非标准上传组件。

7. 常见问题与排查技巧实录

即使掌握了所有技巧，在实际运行中还是会遇到各种问题。下面是我总结的一些常见“坑”和解决方法。

7.1 网络拦截不生效

症状：设置了page.route()，但请求没有被拦截，还是走了真实网络。
排查：
1. 检查URL模式：是否写错了？用console.log(route.request().url())在处理器里打印一下，看看拦截到的URL是什么。Glob模式**/api/*和正则表达式是有区别的。
2. 检查注册时机：必须在请求发起之前注册路由。通常需要在page.goto()之前就设置好。对于SPA（单页应用）后续的API调用，也需要在调用发生前确保路由已注册。
3. 作用域问题：你是否在正确的page或context上注册的？如果页面中有iframe，iframe内的请求需要单独在iframe的frame对象上拦截。
4. 冲突的路由：是否有多个路由匹配同一个请求？记住执行顺序是后注册的先执行，并且一旦某个处理器调用了fulfill或continue，后面的处理器就不会执行了。

7.2 模拟登录后页面仍显示未登录

症状：加载了storageState，但打开页面还是跳转到登录页。
排查：
1. 检查auth.json内容：确认里面包含的cookies的domain和path属性是否覆盖了你正在访问的页面URL。对于主域登录，cookie的domain通常是.example.com（前面有点）。
2. 检查Cookie有效期：auth.json里的expires字段是否已经过期？如果是-1或一个过去的时间戳，Cookie就失效了。
3. SessionStorage：如前所述，storageState不保存sessionStorage。如果你的应用用sessionStorage存token，需要手动注入：
```
await page.addInitScript(storage => { for (const [key, value] of Object.entries(storage)) { window.sessionStorage.setItem(key, value); } }, yourSessionStorageObj);
```
1. 登录态依赖其他机制：除了Cookie和Web Storage，有些应用可能用httpOnly的Cookie（Playwright可以保存）、或认证信息放在内存中（难以持久化）。对于后者，模拟登录可能更困难。

7.3 文件上传事件不触发

症状：点击了上传按钮，但filechooser事件没有触发。
排查：
1. 监听时机：确保page.on('filechooser', ...)或page.waitForEvent('filechooser')在点击操作之前执行。waitForEvent是一个Promise，需要在触发事件前await它。
2. 元素是否正确：你点击的元素真的是触发文件选择对话框的元素吗？有些组件可能把事件绑定在父元素或一个隐藏的input上。试试用page.click('input[type=file]', { force: true })强制点击隐藏的input。
3. 组件库特殊性：一些复杂的组件（如react-dropzone）可能使用了自己的事件系统。尝试直接使用组件库提供的API（如果暴露的话），或者用更底层的page.evaluate模拟其内部的事件分发。
4. 使用input选择器直接设置：如果最终能找到隐藏的input元素，直接setInputFiles是最可靠的。

7.4 脚本在CI/CD环境中运行失败

症状：本地运行完美，一到Jenkins/GitHub Actions上就报错，特别是关于上传、截图或布局问题。
排查与解决：
1. 无头模式（Headless）：CI环境通常以无头模式运行。有些网站会对无头浏览器进行检测并返回不同内容。尝试添加headless: false看看是否解决问题。如果必须无头，可以尝试添加args: ['--disable-blink-features=AutomationControlled']来避免被检测。
2. 视口大小：CI服务器的屏幕分辨率可能和本地不同，导致元素不可见或布局错乱。始终在脚本中设置一致的视口：
```
const context = await browser.newContext({ viewport: { width: 1920, height: 1080 } });
```
1. 文件路径：CI环境的工作目录和文件路径可能与本地不同。使用path.join(__dirname, 'filename')来构造绝对路径。
2. 浏览器安装：确保CI环境中Playwright的浏览器已正确安装。可以使用npx playwright install chromium在CI脚本中显式安装。
3. 资源与超时：CI环境可能网络较慢或资源受限。增加超时时间：
```
page.setDefaultTimeout(60000); // 设置为60秒 page.setDefaultNavigationTimeout(60000);
```

7.5 异步操作导致的状态竞争

症状：脚本时好时坏，经常报“元素不可见”、“元素已分离”或“超时”错误。
解决：Playwright的API大多是异步的，并且自动等待元素可操作。但某些复杂交互仍需手动等待正确的状态。
- 遵循“定位-操作”模式：尽量使用page.locator(selector).click()而不是page.click(selector)，因为Locator API的自动等待更智能。
- 明确等待导航：在点击一个会导致页面跳转的链接后，使用await page.waitForURL('**/target-page')或await page.waitForNavigation()。
- 等待网络请求：在触发一个会发起API调用的操作后，使用page.waitForResponse()来确保后端操作完成。
- 避免page.$和page.$$：这些方法不自动等待，尽量使用page.locator。

// 好的做法 await page.locator('button.submit').click(); await page.waitForURL('**/success'); // 等待跳转 // 或者等待某个API响应 await page.waitForResponse(resp => resp.url().includes('/api/submit') && resp.status() === 200); await page.locator('.success-message').waitFor(); // 等待UI更新

把这些技巧和排查方法装进你的工具箱，大部分Playwright自动化过程中遇到的障碍都能被顺利清除。记住，调试自动化脚本时，多用headless: false模式观察浏览器行为，配合page.pause()方法让脚本暂停，再用开发者工具检查元素和网络请求，是最高效的定位问题的方式。

查看全文

http://www.cnnetsun.cn/news/3072034.html