1. 什么是自动化UI测试
自动化UI测试是通过编写自动化脚本来模拟用户行为，自动执行应用程序的UI测试。自动化UI测试的好处是可以快速、准确地执行大量测试用例，同时能够降低人工测试的成本和风险。
常用的npm包：
- Puppeteer：一个谷歌开发的 Node.js 图像测试库，能够通过 Chrome 浏览器实现自动化 UI 测试和高效爬虫。Puppeteer 提供了控制浏览器的方法，可以使用它自动化进行用户操作和模拟屏幕的各种行为，如输入、鼠标点击、元素移动、键盘敲击等。
- WebDriverIO：一个已经广泛应用的自动化测试框架，支持多种浏览器和操作系统，并提供了快速、简单的API，用于执行浏览器操作和用户事件触发，并支持并发测试和远程测试。
- Nightwatch：一个基于 Node.js 和 Selenium WebDriver 的自动化测试框架，可用于 Web 自动化 UI 测试，支持统一的测试用例输入和输出，并能够同时在多个浏览器上进行测试。
- Cypress：是一个用于 Web 自动化UI测试的现代工具，使用 Chrome 浏览器内部的可直接访问 DOM 的 API，提供了交互式的测试体验和无需执行和调试难度的自动化测试。
- TestCafe：一个可用于 Web 自动化 UI 测试的现代化的、简单易用的 Node.js 包，可以通过 Chrome、Safari 和 Internet Explorer 浏览器进行自动化测试，并且不需要额外安装插件。
这些npm包都提供了丰富的自动化测试功能和易用的API，可以实现高效快速、简单易用的自动化UI测试。
2. Puppeteer案例
- 支持分布式爬取
- 实现了深度优先和广度优先算法
- 支持csv和json line格式导出
- 插件式的结果存储，比如支持redis
- 自动插入jquery，可以使用jquery语法进行结果处理
- 支持截图作为爬取证据
- 支持模拟不同的设备
简单案例
const puppeteer = require('puppeteer')
// ;(async () => {
// const browser = await puppeteer.launch() // 启动一个Chrome浏览器实例
// const page = await browser.newPage() // 创建一个新的标签页
// await page.goto('https://www.baidu.com') // 导航到指定的网页
// const screenshotPath = './example.png'
// await page.screenshot({ path: screenshotPath }) // 对当前页面进行截图
// console.log(`Screenshot saved to ${screenshotPath}`)
// await browser.close() // 关闭浏览器实例
// })()
//延迟函数
const sleep = (time) => {
return new Promise((r, j) => {
setTimeout(() => {
r(time)
}, time)
})
}
(async () => {
//通过 launch 生成一个’浏览器‘实例,
//option 中的 headless 是个布尔值，如果是 false 的话你就会看到一个浏览器从打开，到完成 //你整个任务的全过程，
//默认是 true，也就是在后台自动完成你的任务
const browser = await puppeteer.launch({
headless: false,
defaultViewport: null,
args: ['--start-maximized']
})
//打开一个新的标签页
const page = await browser.newPage()
//跳转到对应的页面
await page.goto('https://jd.com')
//获取搜索框的元素
const key = await page.$('#key')
//聚焦
await key?.focus()
//搜索东西
await page.keyboard.sendCharacter('iphone13')
//点击搜索按钮
await page.click('.button')
//延迟一秒钟
await sleep(1000)
//等待元素加载完成
await page.waitForSelector('.gl-item')
//开始自动滚动为了截图全屏有数据
let scrollEnable = true;
let scrollStep = 500
while (scrollEnable) {
scrollEnable = await page.evaluate((scrollStep) => {
let scrollTop = document.scrollingElement?.scrollTop ?? 0;
document.scrollingElement.scrollTop = scrollTop + scrollStep;
return document.body.clientHeight > scrollTop + 1080 ? true : false
}, scrollStep)
//防止滚动过快
await sleep(1000)
}
//截图全屏
await page.screenshot({path:`iphone13.png`,fullPage:true})
})()
上面代码使用 Puppeteer 库实现了自动化搜索商品并截图的功能。代码中的主要步骤包括：
- 启动浏览器实例。设置了选项
headless: false，可以显示浏览器窗口，便于观察和调试。 - 新建标签页并跳转到京东商城首页。
- 通过
page.$()获取搜索框的元素，聚焦后输入商品关键词并搜索。 - 等待页面加载完成，截取滚动截图，并保存到本地。
- 关闭浏览器实例。
此外，代码中使用了 sleep() 函数来模拟延迟，以等待页面加载和元素显示。也使用了 waitForSelector() 函数等待元素加载完成。
值得注意的是，该代码的商品搜索操作是基于京东商城的 DOM 结构实现的，如果要修改为其他网站的搜索功能，就需要根据实际的 DOM 结构和功能接口进行调整。
