ARTICLE DETAIL

资讯详情

深耕网站视觉设计与运营推广的一线实战洞察。

谷歌浏览器安装 Selenium IDE:录制回放与 CI 落地指南

谷歌浏览器安装 Selenium IDE:录制回放与 CI 落地指南 1. 谷歌浏览器里装 Selenium IDE解决的是哪一类问题如果你搜「谷歌浏览器安装 Selenium IDE 插件」八成是因为手头有一件重复性的网页操作要处理——每天早上登录后台导三次报表、给几十个账号挨个填同一种表单、上线前把关键流程点一遍确认没坏。Selenium IDE 就是冲这类场景来的它把自己做成一个挂在谷歌浏览器工具栏上的小图标点开就能录下你的点击、输入、跳转动作录完一点回放动作原样重演。插件本身免费装完不需要写一行代码就能跑通一个流程这是它最大的价值也是很多人第一次接触浏览器自动化的入口。但它的边界同样明显。Selenium IDE 是一款录制回放型record playback工具本质上是把你在页面上的操作翻译成一份结构化的 JSON 步骤列表存成.side后缀的文件再由插件内置的引擎逐步执行。它不负责调度、不负责并发、不负责做复杂的数据处理更不适合当成爬虫框架去抓数据。把它放在正确的位置上——快速验证一个流程是否可自动化、给非技术同事做演示、把手工回归用例转成半自动脚本——它非常好用一旦拿它去扛几百条用例的持续集成就会立刻暴露出维护成本问题。我在实际项目里给它定的角色是「原型工具 用例载体」业务同学用录制的方式把操作路径固化下来我拿这份.side文件当需求说明再用导出的代码去写真正能进仓库的自动化脚本。后面几节会完整走一遍从拿到插件、装进谷歌浏览器到录制、回放、导出、上流水线的全过程中间那些官方文档没写清楚的坑也会一并说透。1.1 别把它和爬虫框架混为一谈这是新手最容易产生的第一个误解。Selenium IDE 能定位页面元素、能读取文本看起来好像能把数据抓下来但它的数据交换能力很弱录制过程产生的变量只能存内存步骤之间传递数据要靠store系列命令导出成代码之前你几乎没法把结果落盘或推到接口。想抓数据正确工具是配合 WebDriver 写脚本或者直接用 HTTP 客户端分析接口。真正适合它的是那些「有明确终点、人类看得懂对不对」的流程提交表单后看到成功提示、下单后订单号出现在列表第一行、登录失败要弹红字。这类带判断的操作插件里的assert/verify命令刚好对上回放结果是一份能直接给产品看的通过报告。1.2 它真正擅长的三件事第一件是把口头描述变成可执行的路径。业务方说「先选省份再选城市城市列表会变」这种联动逻辑用文字讲半天容易有歧义录一遍就是最精确的说明书谁都不用争论。第二件是验证环境的可达性。新搭的测试环境能不能登录、验证码是不是挡着、某个按钮在新版谷歌浏览器里位置有没有变用录制加回放跑一遍几十秒就出结论比手点快得多。第三件是给自动化脚本提供选择器参考。插件录制时会同时记录多种定位方式你在它的目标Target栏里能看到css、xpath的候选值。写正式脚本时直接从这些候选里挑最稳的那个复制过去比自己按 F12 猜要靠谱得多。1.3 和 Playwright codegen、Puppeteer Recorder 的定位差异同样是录制三者路线不同。Playwright 的 codegen 直接产出可运行的 TypeScript/Python 代码天生为工程化设计Puppeteer Recorder 偏开发者调试Selenium IDE 则把「录制的中间产物」保留在插件里用一份.side文件承载好处是可读性强、非技术人员能改坏处是必须先导出才能融入代码仓库。选择上的经验法则很简单如果你的目标是一次性验证或交付给非技术同事Selenium IDE 最省事如果一开始就知道要写进 CI那就别绕这一圈直接上手 WebDriver 或 Playwright。插件在这条链路上的价值是「低门槛入口」不是「最终形态」。2. 插件到手的三条路径与各自适用场景装一个扩展这件事在谷歌浏览器上通常只有十秒的操作但实际会卡人的地方在于「能不能连上扩展商店」。所以我把获取方式分成三条按你的网络状态和管控策略挑一条走。在线商店直装是最常规的路线打开谷歌浏览器的扩展管理页在商店里搜索 Selenium IDE点「添加至 Chrome」确认权限后工具栏就会出现图标。整个过程不需要重启浏览器缺点是完全依赖当下的网络状况公司内网或端侧管控机器上经常打不开商店页面。离线扩展包安装适合内网机器或需要固定版本的场景。插件是标准的 Chromium 扩展包拿到.crx文件后注意新版谷歌浏览器不允许直接从文件拖拽安装 crx需要把 crx 当作压缩包解压出目录再在扩展管理页打开右上角的开发者模式选择「加载已解压的扩展程序」指向那个目录。从源码构建加载则面向想改代码或锁死某个提交的人。Selenium IDE 走开源路线仓库里包含完整的扩展工程需要 Node 环境执行构建产出的dist目录就是可以直接加载的解压扩展。这条路折腾程度最高除非你有明确的定制需求否则不推荐。路径前置条件版本可控性适用场景商店直装能访问扩展商店低随商店更新个人机器、快速试用离线解压加载拿到 crx 或解压包高手上有哪个版本就是哪个内网、固定版本回归源码构建Node 环境 构建脚本最高可指向具体提交二次开发、深度定制提示解压加载的扩展在谷歌浏览器启动时会弹「请停用开发者模式扩展程序」的提示条这是浏览器的固定行为不影响功能点关闭即可。如果机器上有统一管控策略扩展可能被自动禁用这种情况先确认本地管理配置再决定是否需要让运维把扩展加入允许列表。2.1 商店直装的正确姿势搜索时注意区分同名扩展。Selenium IDE 的发布者是 SeleniumHQ 相关方图标是一个橙白配色的标志简介里会写明它基于 SideeX 引擎。装之前看一眼「用户数」和「更新日期」长时间没更新的版本可能跟不上新版谷歌浏览器的扩展 API。安装时的权限确认对话框值得留意。它需要读取和更改你在所有网站上的数据、读取浏览记录类的权限这些是录制回放的刚需——不读取页面就无从定位元素。公司机器如果装完发现图标灰掉通常是策略拦截不是插件本身的问题。装完之后建议顺手把它固定到工具栏点击扩展图标旁的图钉否则它会藏进拼图菜单里每次找都要多点两下。2.2 离线加载的两个细节第一解压后的目录里必须存在manifest.json而且要确认版本号是 3 还是 2。新版谷歌浏览器对 manifest v2 的支持逐步收紧如果你手上是旧包可能出现加载后功能残缺的情况这时候优先找官方仓库的新版本重新构建或下载。第二解压目录不要放在临时目录或下载文件夹里谷歌浏览器会记住这个路径一旦目录被清理系统清掉扩展下次启动就失效了。我一般会在固定盘符下建一个browser-extensions/selenium-ide/目录专门放它升级时整个目录替换不影响已保存的.side文件。2.3 从源码构建时的版本选择构建前先看仓库的发布说明挑一个和你当前谷歌浏览器主版本兼容的 tag。克隆代码后安装依赖、执行构建命令产物会落在输出目录。构建过程对 Node 版本有要求太新的 Node 跑老项目容易在依赖编译环节报错遇到这种情况用版本管理工具切到仓库文档标注的 Node 版本比硬调依赖省时间。3. 装完别急着点录制先做这四项初始化插件装好、图标亮起来很多人的第一反应是直接开录。但录制这件事有个特点开头没设置好后面返工的成本远高于事先花两分钟配置。这四项初始化做完能省掉后面一大半重录。3.1 项目与 .side 文件的存放约定Selenium IDE 4.x 的界面里一个「项目」对应一个.side文件文件内部可以包含多条测试用例和测试套件。第一次打开插件它会提示你新建项目或者打开已有项目。我建议的做法是先在本地建好目录再在插件里新建项目并立刻保存到该目录不要等录完再另存为插件在某些版本下未保存状态的会话容易在浏览器重启后丢失。目录结构我一般这样组织一个仓库下分cases/存.side文件、exports/存导出代码、fixtures/存测试数据、reports/存回放结果。.side文件是 JSON 格式可以进版本控制这点很关键——它是纯文本diff 出来能看清哪一步被改了比截图式的用例文档强太多。3.2 编辑器语言与超时参数这是最容易被忽略、但影响最大的设置。打开插件的设置页面有两个值必须调录制时使用的定位器优先级。默认顺序通常是 id、name、css、xpath 这类我通常把># 全局安装运行器 npm install -g selenium-side-runner # 跑单个 .side 文件指定浏览器 selenium-side-runner -c browserNamechrome cases/login.side第一次运行会自动准备驱动注意它会去下载与当前谷歌浏览器匹配的版本所以机器上要有外网出口或者提前配好内部镜像。这一步在纯内网环境是个卡点解决方案是把驱动和浏览器二进制预先放到指定目录通过配置告诉运行器去哪找。6.2 配置文件怎么写命令行参数多了以后不容易维护运行器支持在项目根目录放一个配置文件把常用设置固定下来# .side.yml capabilities: browserName: chrome baseUrl: https://your-test-env.example.com params: username: tester01 password: ${TEST_PASSWORD} output-directory: reportsbaseUrl配合.side文件里写相对路径的目标可以让同一份用例在不同环境间切换不用改文件。params定义参数后在插件的步骤里用表达式引用即可实现数据驱动。6.3 并行、过滤与报告用例一多串行跑就不可接受了。运行器支持指定并发数把互不依赖的用例分发到多个浏览器实例上跑# 4 个 worker 并行 selenium-side-runner -w 4 cases/*.side # 只跑名字匹配的用例 selenium-side-runner --filter 登录 cases/有两个注意点。并行会显著吃内存一台 8G 的机器开到 4 个 worker 基本就到头了再多容易出现浏览器进程被系统杀掉的情况表现出来是「随机某条用例失败」排查半天以为是脚本问题。另外并行执行的用例之间不能共享同一份测试数据否则会出现互相覆盖的连锁失败。我在项目里给每个 worker 分配独立的测试账号前缀这个问题就再没出现过。报告方面运行器底层基于 Jest跑完会在输出目录生成结果文件。要接进流水线的话在 CI 配置里把这条命令挂成一个步骤并设置失败时返回非零退出码这样构建状态就能真实反映用例结果。7. 我在安装和运行阶段踩过的具体坑前面讲的是「应该怎么做」这一节讲「实际会怎么炸」以及每个现象对应的排查路径。7.1 装完图标找不到现象是安装成功但工具栏里看不到。排查顺序先看扩展管理页里插件是否处于启用状态被禁用的话图标不会出现再看是否被折叠进了扩展菜单点拼图图标展开找一下并固定都没有的话可能是加载的解压扩展目录被移动或删除了重新指向正确路径即可。如果扩展管理页显示「已损坏」多半是 crx 文件本身下载不完整换个来源重新获取。7.2 录制时页面空白或点不动有一种情况很典型插件在普通页面上正常切到某个业务系统后就录不到任何操作。原因通常是那个页面运行在受限环境里——比如页面自身有严格的内容安全策略或者是一个套了多层的 iframe 结构。插件的录制能力依赖注入脚本被挡住就没法工作。应对办法有两个方向。一是检查页面结构找到真正承载内容的那个 frame 层级有些系统需要在特定入口页面开始录制才行。二是放弃录制这一步在插件里手动新增命令用打开地址、点击、输入这些基础命令拼出流程。第二种方式慢但可控性高遇到录制失灵的场景值得切换。7.3 回放报元素找不到的完整排查链路这是最高频的问题我通常按下面的顺序逐层排除看截图。插件失败时会保留当时的页面状态先确认页面到底停在哪一步很多时候是上一步点击根本没生效。手动验证定位器。把报错那一步的目标复制出来在浏览器的开发者工具里执行查找看能不能选中元素。选不中说明选择器本身失效了。确认上下文。元素在 iframe 里还是主文档当前窗口是哪一个这两件事没对齐的话定位器再对也找不到。确认时机。定位器能选中但回放时找不到说明执行得太早需要在该步骤前补一个显式等待。确认可见性。元素存在但在视口外或被遮挡插件可能需要先滚动到该元素再操作。这套链路走下来九成以上的「元素找不到」都能定位到具体原因剩下的基本是前端在两次运行之间改了结构。7.4 扩展被自动停用和配置隔离的坑谷歌浏览器对开发者模式加载的扩展比较敏感某些情况下会自动停用表现是昨天还跑得好好的今天图标点开一片空白。手动重新启用即可但如果频繁发生就要考虑换成商店直装的版本或者走统一分发。另一个坑是浏览器配置隔离。一个谷歌浏览器实例可能有多个用户配置profile扩展装在 A 配置里你用 B 配置打开就找不到。多账号测试的机器上尤其容易踩建议把自动化专用的配置固定下来所有操作都在同一个配置里做。8. 什么情况下我不推荐用 Selenium IDE聊了这么多好处也得说说它的适用边界免得你在错误的地方硬磕。电商大促期间的压测、需要模拟上百并发用户的场景插件完全不适合它一次只能跑一个实例。需要处理复杂校验逻辑、要从接口拿数据再驱动页面的场景也不合适这类需求直接用编程式自动化更省事。还有一类容易被忽略的用例数量超过几十条且需要长期维护的项目。.side文件虽然能进版本控制但它的可读性和可重构性远不如代码步骤一多就变成一坨难以审阅的 JSON。到了这个阶段把录制产物当需求文档、把维护工作交给导出后的代码才是可持续的做法。我个人的使用节奏是新流程先用插件录一遍确认可自动化的边界和关键定位器然后导成代码补上断言和等待最后把.side文件本身留下当参考文档只跑代码不跑文件。这样既吃到了录制的效率红利又避开了长期维护的坑。插件的作用是把「从 0 到 0.5」这一段变得极其轻松剩下的「0.5 到 1」还是得靠代码认清这条分界线用起来会很舒服。
返回列表