Playwright自动化测试：富文本编辑器图片上传流程解析

在做内容发布类 RPA 或自动化测试时富文本编辑器通常是最容易出问题的环节。它不像普通表单只有 input 和 textarea很多平台会使用 iframe、CKEditor、隐藏的文件选择框和异步上传接口。本文记录一个使用 Playwright 完成富文本图片上传的实现思路。图Playwright 还原登录态、打开编辑器、上传图片和发布校验的基本流程。一、先还原登录态自动化发布不建议每次都重新登录。更稳定的方式是保存浏览器的 storage_state并在创建上下文时传入。这样可以把 Cookie、LocalStorage 等状态恢复到新的浏览器上下文中。context await browser.new_context(storage_statestorage_state)在实际项目里还需要检查关键 Cookie 是否存在。例如平台需要的登录 Cookie 缺失时应直接提示重新授权而不是继续打开一个未登录的页面。二、定位富文本编辑器富文本编辑器经常会把正文区域放进 iframe或者挂载到全局编辑器实例中。定位时可以先检查页面 frames再判断是否存在 CKEDITOR、CodeMirror 或 contenteditable 区域。instances await page.evaluate(() Object.keys(window.CKEDITOR.instances))如果能拿到编辑器实例可以通过编辑器 API 写入 HTML如果拿不到再退回到鼠标点击和键盘输入。三、上传本地图片多数平台的“图片”按钮最终都会创建一个隐藏的 input[typefile]。Playwright 可以直接对这个 input 调用 set_input_files把本地图片交给浏览器上传。await page.locator(input[typefile]).last.set_input_files(image_path)上传后不要只判断文件选择动作是否成功还要检查编辑器里是否出现了 img 标签并记录平台返回的 CDN 图片地址。四、发布后做结果校验点击发布按钮后应读取当前页面标题、URL 和页面提示。如果平台进入“发布成功”页可以继续进入后台内容管理页确认文章是否处于已发布、审核中或审核未通过状态。这套流程的重点不是模拟人工点击越多越好而是每一步都有可观测结果账号状态可检查、编辑器可写入、图片地址可确认、发布结果可回溯。