Puppeteer + opencv.js 自动化脚本实践经验总结(part 1)

·  阅读 1653
Puppeteer + opencv.js 自动化脚本实践经验总结(part 1)

2021 年 12 月到 2022 年 6 月期间,我一直在开发维护一个大型的 JavaScript 自动化脚本,在此项目中用到了 puppeteer 来自动操作网页,用 opencv.js 识别特定的页面元素。在此记录从项目中获得的一些经验。

image.png 内容可能过长,我将分两篇帖子来介绍:

Puppeteer + opencv.js 自动化脚本实践经验总结(part 1)

Puppeteer + opencv.js 自动化脚本实践经验总结(part 2)

Puppeteer 常用连接配置

另外,这是我发布在 bilibili 上的相关视频 手把手带您实操 puppeteer,如果您是 puppeteer 的新手,这个系列视频将很适合您。

使用 puppeteer 遇到的问题

  • 浏览器会弹出"是否允许通知"的弹出框,这将阻断我的页面操作。
  • 如何调节浏览器窗口大小。
  • 如何调节页面视口大小。
  • 本地调试时,开启的浏览器窗口遮住了我的代码编辑器。
  • 设置 UA。
  • 如何禁止图片加载,节省流量和带宽开销。
  • 查找元素。
  • 元素滚动到视口内。
  • 点击元素。
  • 元素截图。
  • 如何防止键盘输入内容时触发了快捷键。
  • 如何判定我的脚本执行成功了。我的脚本是否准确完成了点击某个按钮,是否准确的提交了某条评论,是否真的删除了一条内容?
  • 网站给页面元素做了复杂的变种,让我无法使用 css 选择器定位元素。
  • 我想观察我的鼠标指针跑到哪里了。

使用 opencv 识别页面元素遇到的问题

  • 如何将 opencv 引入到 node 项目。
  • 如何识别页面元素。
  • 如何获取目标元素的坐标。
  • 如何提高识别准确率,选用那种识别算法。

我的程序被浏览器通知提示阻断了!

image.png 假设您正在使用 puppeteer 操作页面滚动,此时浏览器弹出通知提示框,那么您的滚动操作大概率将会被阻断,这时就需要禁止浏览器通知功能。puppeteer 提供了接口来关闭通知功能,下面是示例代码:

puppeteer.launch({ args: [ `--disable-notifications=true`, ], })
复制代码

args 还可传入更多其他选项来设置您的浏览器,您可以 在这 找到 Chromium 标志列表。

调节浏览器窗口尺寸

注意这里所说的是窗口大小,不是网页视口大小,以下是对于窗口和视口的解释:

image.png 以下是窗口大小设置相关示例代码:


puppeteer.launch({
	args: [
		`--window-size=1920,1080`,
    	],
})
复制代码

调节视口尺寸

在调节窗口尺寸章节中对视口概念有解释,以下是调节视口尺寸示例代码:


puppeteer.launch({
	defaultViewport: { width: 1440, height: 780 },
	args: [
		`--window-size=1920,1080`,
    	],
})
复制代码

本地调试时,浏览器窗口遮住了我的代码编辑器

使用双屏开发时,puppeteer 开启的浏览器实例将会展示在你聚焦的屏幕,如果此时您正在编辑代码,开起来的浏览器实例会获得聚焦,这会打断手头的工作。您可以设置浏览器打开时的位置,让它默认显示在第二块屏幕内,以下是示例代码:


puppeteer.launch({
	defaultViewport: { width: 1440, height: 780 },
	args: [
		"--window-position=1921,0",
    	],
})
复制代码

另外,我暂时还未解决浏览器实例占据焦点的问题!

设置 UA

User-Agent 首部包含了一个特征字符串,用来让网络协议的对端来识别发起请求的用户代理软件的应用类型、操作系统、软件开发商以及版本号。如果您需要使用 puppeteer 对某网站执行大量自动化操作,使用固定 UA 很有可能会被识别为机器人。另外,有一些网站会根据不同 UA 返回不同布局的页面内容,您需要留意您的脚本是否能够适配不同布局的页面。以下是设置 user-agent 的示例代码:


puppeteer.launch({
	defaultViewport: { width: 1440, height: 780 },
	args: [
		`--user-agent=${your user agent}`
    	],
})
复制代码

ua 应及时更新并随机化,关于采集 ua 的问题可参考这一篇 获取市面上主流的 UA

如何禁止图片加载,节省流量和带宽开销

我的这个项目每小时都有上万次的页面请求,并且每个页面上都有大量的图片,这些图片对我的主要业务是无关紧要的,加载它们甚至会严重占用带宽,导致我的正常业务无法运行。好在 puppeteer 提供接口可设置禁止图片加载,但这并不是万无一失的!通过观察线上截取回来的图片来看,有时页面仍然能够加载出来图片,浏览器设置禁用图片不一定全都生效,因此您可能还需要在代码里添加禁用图片的操作,这里列出两种方案的示例代码:

  • 浏览器层面禁用

puppeteer.launch({
	defaultViewport: { width: 1440, height: 780 },
	args: [
		'--blink-settings=imagesEnabled=false'
    	],
})
复制代码
  • 代码层面禁用

await page.setRequestInterception(true);
page.on('request', (request) => {
    if (request.resourceType() === 'image') request.abort();
    else request.continue();
});

复制代码

查找元素

puppeteer 提供多种获取元素的 API,但您可能需要留意它们之间的区别!在不同场景使用更适合的查找元素方式。

  • page.$(selector)

page.$(selector) 没有匹配到元素时返回 null,如果您的页面还没有完全渲染好,使用此种方式查找元素将得不到任何结果!您可能会想到:延时等待页面加载一段时间后,再使用 page.$(selector) 查找元素。我并不推荐这种做法,网络延迟是不可控因素,我们无法得知页面什么时候渲染完成。如果能够断定此时页面已经完全渲染好,您可大胆这种方式查找元素。


await delay(ms("5s")); // 延时等待 5 秒

const element = await page.$("[id='my_target']")

复制代码
  • page.waitForSelector(selector)

page.waitForSelector(selector) 在规定时间内没有匹配到元素会抛错,注意做好错误处理,否则可能阻塞您之后的代码。通常,我会在对页面执行某种操作之前,先等待必须的元素,如果没能找到必须的元素则断定此次任务失败,终止执行。下面是示例代码:

await page.goto("https://google.com", {
	timeout: ms('60s')
});

// 等待关键元素,如果超过 60 秒还没找到,断定此次任务失败,终止执行
try {
	await page.waitForSelector(".target", {
    	timeout: ms('60s')
    })
} catch(err){
	logger.error("意外终止,未找到页面关键元素", {err});
    	throw err;
}

复制代码

将元素滚动到视口内

这是一个很常见的需求,点击某个元素时您需要先将它移到到视口内,对元素截图也同样如此。 page.hover(selector) 具有将元素滚动到可视区的能力,但它不稳定,有时执行它后毫无反应,您需要尝试使用另外一种方式:

let css = ".target";

page.evaluate((selector)=> {
	const target = document.querySelector(selector);
    
    if(target){
    	target.scrollIntoView()
    }
}, css);
复制代码

如果还是无法将目标元素滚动到视口内,您可能需要将 css 选择器指向目标元素的某个父元素!

点击元素

page.click(selector) 、 page.mouse.click() 、 page.evaluate() 都能够实现点击操作。

page.click(selector) 最方便,你只需要传入目标元素的 css 选择器,但 page.click(selector) 并不稳定,有时点击没有反应,另外还经常报错说元素不可点击或出现以下错误:

Error: Node is either not visible or not an HTMLElement
复制代码

使用 page.mouse.click() 需要您提前获得目标元素的坐标。您需要先将目标元素滚动到可视区内,等待滚动稳定后,最后获取目标元素的坐标,以下是示例代码:

// 获取目标元素坐标
const css = ".target";

const position = await page.evaluate((selector)=> {
	const target = document.querySelector(selector);
    
    if(!target){
    	return null;
    }
    
    const recet = target.getBoundingClientRect()
    
    return {
    	x: recet.x,
        y: recet.y,
    }
}, css)

await page.mouse.click(position.x, position.y);
复制代码

当然您也可以直接用原生 Dom 点击操作,但最好用拟人化的方式点击,以免被识别出来是机器人。

const css = ".target";

const position = await page.evaluate((selector)=> {
	const target = document.querySelector(selector);
    
    if(!target){
    	return null;
    }
    
    targrt.click();
}, css)
复制代码

元素截图

本地调试时,通常会关闭无头模式,此模式下对元素截图会出现截图位置错误的情况,开启无头模式将不会出现这种问题。

值得注意的是,如果您要手动微调截图尺寸或位置,您需要传入截图坐标和尺寸,这里获取坐标的方式有点不同,以下是示例代码:

const css = ".target";

const targetElement = await page.$(css);

const clip = await page.evaluate((selector)=> {
	const target = document.querySelector(selector);
    
    if(!target){
    	return null;
    }
    
    const recet = target.getBoundingClientRect()
    
    return {
    	x: recet.x + document.documentElement.scrollLeft,
        y: recet.y + document.documentElement.scrollTop,
        width: recet.width,
        height: recet.height,
    }
}, css)

if(!clip){
	throw new Error("未获取到目标元素坐标");
}

// 元素截图
await targetElement.screenshot({
	path: "./target.png",
    	clip,
});
复制代码

如何防止键盘输入内容时触发了快捷键

由于我输入的内容是由程序采集的,所以里面包含一些特殊字符,如:\n、 \r 、  @ 等容易触发快捷键的字符。当输入内容里包含换行符时可能直接触发了提交操作,当内容中包含 @ 符时可能会被转换成提醒某个人或关联某个资源。

您可以提前删除这些殊字符,防止触发一些意料之外的事件发生,另外,您可以尝试使用浏览器复制剪切操作,以下是示例代码:

await browserPage.evaluate(
        (element, content) => {
          (() => {
            const dataTransfer = new DataTransfer();
            dataTransfer.setData("text/plain", content);

            element.dispatchEvent(
              new ClipboardEvent("paste", {
                clipboardData: dataTransfer,
                bubbles: true,
                cancelable: true,
              })
            );

            dataTransfer.clearData();
          })();
        },
        inputElement,
        commentTemplate.content
      );
复制代码

它能够有效防止因为输入内容中带有回车而触发了提交。

如何判定我的脚本执行成功了

假设您的脚本是给 bilibili 视频点赞,那么只有监听到点赞接口成功返回后,才能够判定您的点赞操作是成功的,以接口返回结果为判定标准是比较可靠的方式。下面是示例代码:

const apiUrl = "https://example.com/api/like"

try {
	await page.waitForResponse(async(response)=>{
    	if(response.url() !== apiUrl){
        	return false;
        }
        
        const statusCode = response.status();
        
        if(statusCode === 200){
        	return true;
        }
        
        return false;
    }, {
    	timeout: ms("60s")
    })
    
    logger.log("点赞成功", { accountId, userId });
} catch(err){
	logger.log("点赞失败", { accountId, userId, err });
}
复制代码

另外,您可能还需要从接口返回的结果中提取数据。您可以使用 JSON.parse 解析后提取,也可以使用正则表达式截取,但如果返回数据的层级结构太深,或者干脆不能确定数据层级,这时您可以考虑使用 jsonpath-plus 库来提取,您只需要提供大概数据层级即可提取到目标数据。

我想观察我的鼠标指针跑到哪里了

quppeteer 模拟鼠标操作时不会展示鼠标位置,但本地调试时您可能需要观察鼠标位置,puppeteer 暂时未提供此项功能,您需要借助一些额外的代码来标记鼠标此时的位置,以下是相关 issue:

使用图像识别技术来查找页面元素

某些大平台的网页反扒虫手段做的很好,他们会想尽各种手段来阻止非正常用户爬取页面数据。他们可能会在页面内加很多没用的且隐藏起来的元素来误导你,还会故意减少使用具有特征的 css ,如:不使用固定的 id 选择器、大量复用的 className、className 是随机码等。我还遇到过两次访问同一个页面, Dom 结构却不同的情况!

这些反扒手段让我难以使用 css 选择器来获取元素 ,由此我不得不使用图像识别技术来获得元素位置。使用图像识别获取元素坐标而不是 css 选择器给我带来很多好处,当网站 css 样式或 Dom 树变更时,我不需要每次都去做适配,只要主题颜色和元素形状不改变,我都能够很准确的获取元素坐标。

由于内容长度过长,之后的内容将会放在下一篇帖子:

Puppeteer + opencv.js 自动化脚本实践经验总结(part 2)

分类:
前端
收藏成功!
已添加到「」, 点击更改