https://alonhero.oss-cn-qingdao.aliyuncs.com/wordpress/web/WX20181024-105911.png
我们是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自动化更加顺手

发表评论

电子邮件地址不会被公开。 必填项已用*标注