Playwright中使用ghost-cursor调用click报TypeError的解决方法

• 包引用错误：误将面向Puppeteer设计的原版ghost-cursor库在Playwright环境中使用，二者底层CDP调用的返回结构、元素句柄属性不匹配，库内部读取元素objectId属性时拿到undefined触发报错。
• 调用时序错误：刚通过context.newPage()创建的空白页未导航到目标地址、无有效DOM执行上下文时，就初始化cursor实例或调用点击方法，CDP接口无法解析到有效页面上下文，返回空值触发错误。
• 元素定位失败：调用cursor.click()时传入的选择器对应元素尚未渲染完成、或元素位于iframe内未指定对应frame上下文，库内部无法获取到有效元素句柄。

1. 先卸载不兼容的原版ghost-cursor，安装官方适配Playwright的版本：

npm uninstall ghost-cursor
npm install @ghost-cursor/playwright

2. 调整代码逻辑，确保页面完成导航、DOM加载完成后再初始化cursor、执行点击操作，同时提前等待目标元素渲染，修正后代码如下：

const { createCursor } = require('@ghost-cursor/playwright');

// 业务逻辑中按如下顺序调用
const page = await context.newPage();
// 先导航到目标页面，等待DOM加载完成
await page.goto('目标页面地址', { waitUntil: 'domcontentloaded' });
// 页面就绪后再初始化cursor
const cursor = await createCursor(page);
// 等待目标元素渲染完成后再触发点击
await page.waitForSelector(buttonSelector);
await cursor.click(buttonSelector);

3. 如果目标元素在iframe内，需要先定位到对应frame，将frame对象传入createCursor初始化后再执行点击，不能直接在主page上下文查找iframe内的元素。

如果使用适配版本仍偶发该报错，可以在初始化cursor时开启自动等待元素配置，规避时序问题：

const cursor = await createCursor(page, { waitForElement: true });

内容的提问来源于stack exchange，提问作者Amr Tawfik