Angular中Playwright的事件发布订阅方法及page.on含义解析

page.on的含义 #

page是Playwright中代表浏览器标签页的核心操作对象，page.on是框架提供的事件订阅API，作用是为当前页面绑定指定事件的监听器。绑定完成后，只要对应事件在页面生命周期内触发，你预先定义的回调函数就会自动执行，无需主动轮询检测事件状态。

官方示例代码详解 #

官方给出的示例主要演示事件绑定、解绑的基础用法，代码逻辑拆解如下：

// 绑定request事件监听器：页面每次发起网络请求时，自动打印请求URL
page.on('request', request => console.log(`请求已发送：${request.url()}`));

// 定义请求完成事件的回调函数
const listener = request => console.log(`请求已完成：${request.url()}`);
// 绑定requestfinished事件监听器，使用上面定义的函数作为回调
page.on('requestfinished', listener);

// 跳转至维基百科，跳转过程中页面产生的所有请求、请求完成事件都会触发对应的监听器
await page.goto('https://wikipedia.org');

// 解绑requestfinished事件的指定监听器，必须传入和绑定时完全一致的函数引用才能解绑成功
page.off('requestfinished', listener);
// 跳转至OpenStreetMap，此时只有request事件的监听器会生效，requestfinished的回调不再执行
await page.goto('https://www.openstreetmap.org/');

示例涉及的两个核心API规则：

• page.on(事件名称, 回调函数)：同一个事件可以绑定多个不同的回调函数，触发时会按绑定顺序依次执行
• page.off(事件名称, 对应回调函数)：仅能解绑传入的指定回调，匿名函数绑定后无法用该方法单独解绑

手动触发/发布事件的方法 #

根据触发的事件类型不同，有两种常用实现方式：

1. 触发浏览器页面内的DOM事件（包括原生事件、自定义事件）：使用page.dispatchEvent方法

// 给指定DOM元素触发原生点击事件
await page.dispatchEvent('#submit-button', 'click');
// 给window对象触发自定义事件，可传递自定义参数
await page.dispatchEvent('window', 'my-custom-event', { detail: { userId: 123 } });

2. 触发Playwright page对象本身的Node层内置事件：直接调用emit方法

// 手动触发page内置的request事件，可传入模拟的request对象
page.emit('request', mockRequestObj);

内容的提问来源于stack exchange，提问作者Honey Barsainya