Puppeteer在21世纪绘本大赛测试初次体验

我们是Puppeteer 幕后控制人

前端Web UI自动化测试，一直是个难点，需要针对不同的设备，但是大部分的WebUi测试，我们还是可以模拟的，之前有PhantomJS 用于前端UI无渲染测试，可以进行图像的对比，但是Puppeteer的横空出世直接宣告PhantomJS的的死刑。Puppeterr的具体信息，见官网

我们碰到的需求是，在21世纪大赛中的分享页面，如果某一个作品的在三分钟内点赞超过400次，那么给于点赞过于频繁的提示，虽然在测试环境测试通过，但是在线上回归测试的，怎么模拟这个现象。一种使用脚本调用点赞接口，但是这种情况，我们无法看到真实的界面，怎么截图看到提示，另一种就是我们利用Puppeteer来模拟的用户的操作，这种情况下，不需要自己调用接口。

python编写调用脚本

这种事情，最适合python去干，示例代码如下

import json
import requests

headers = {
    "Content-Type": "application/json; charset=UTF-8",
    "Referer": "https://mobile.vipkid.com.cn/",
    "User-Agent": "Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.87 Safari/537.36",
    }
url = "https://mobile.vipkid.com.cn/rest/pd-activity/api/activity/user/like/wx"
pyload = {"openId": "omEhct2H0-mwnwdf9kDbhIDQ", "resourceId": 13438, "partitionId":114}

for num in range(0,401):
    response =  (requests.post(url, data=json.dumps(pyload), headers=headers)).text
    print(response)
     

输出结果见如下视频

上述的方式只能够去测试返回的数据是否正确，但是我们要直观的看到现象，能够捕获对应的图片，或能够录制对应的视频，这个是一件不错的事情。Puppeterr能够帮助我们完成对应的功能.

直接上代码

(async () => {
	const puppeteer = require('puppeteer');
	const devices = require('puppeteer/DeviceDescriptors')
	const iPhone = devices['iPhone 6'];
	const browser = await puppeteer.launch({
		headless: false,
	})
	const page = await browser.newPage()
	const cookie = {
		name: "mbopenid",
		value: "omEhct2H0-mwnH8kPwdf9kDbhIDQ",
		domain: ".vipkid.com.cn",
		path: "/",
	}
	await page.emulate(iPhone);
	await page.setCookie(cookie)
	await page.goto('https://mobile.vipkid.com.cn/learning-effect/prd/VideoInfo?resourceId=25503&activityId=59');

	for (let i = 0; i < 300; i++) {
		setTimeout(() => {
			page.tap(".video-like-heart-default")
			if (i == 3) {
				setTimeout(async () => {
					await page.screenshot({
						path: 'digg.png'
					})
					await page.close()
				}, 3000)
			}
		}, i * 100)
	}
})()

在上面的代码中，进行了以下工作

• 模拟手机下的view
• 添加cookie
• 对点赞按钮，每隔100ms进行一次点赞，操作三百次，然后 间隔3000ms 进行截图

这个测试基本能够模拟线上场景

视频如下

这个只是一个小体验，我们可以结合图像识别，人工智能，让UI自动化更加顺手