前言
在前端自动化测试中，模拟用户行为已经是很常见的手段，而 Puppeteer 是一个基于 Chrome DevTools 协议的高层面 API 库，使得开发者可以通过 Node.js 的方式控制 Chrome 浏览器。但是，Puppeteer 的官方文档中的示例使用方式可能较为复杂，此时我们可以使用第三方库 @ianwalter/puppeteer-helper 来简化 Puppeteer 的使用。
安装
使用 npm 安装该库：
npm install @ianwalter/puppeteer-helper
功能
该库主要包含以下几个功能：
- 打开一个新页面并跳转到指定 url 的方法
goto(url: string, page: Page): Promise<boolean>; - 点击指定元素的方法
click(selector: string, page: Page): Promise<ElementHandle<Element> | null>; - 输入指定文本到指定元素的方法
type(text: string, selector: string, page: Page): Promise<ElementHandle<Element> | null>; - 获取指定元素的值或属性值的方法
get(selector: string, page: Page, attribute?: string | null | undefined): Promise<string | null>; - 使用指定的选项进行搜索并返回页面是否成功加载的方法
searchFor(searchText: string, searchOptions?: SearchOptions, page?: Page): Promise<boolean>; - 使用指定的方法调用指定的函数并返回指定元素的方法
evaluate<T = any>(fn: Function, selector: string, page: Page): Promise<T | null>; - 获取指定元素的所有层级的文本的方法
getText(selector: string, page: Page): Promise<string | null>;
使用示例
下面将以搜索百度为例，阐述该库的使用方法。
- 使用
launch方法启动浏览器并创建一个新页面：
const puppeteerHelper = require('@ianwalter/puppeteer-helper');
(async () => {
const browser = await puppeteerHelper.launch();
const page = await browser.newPage();
await browser.close();
})();- 使用
goto方法跳转到需要搜索的页面：
-- -------------------- ---- ------- ----- --------------- - --------------------------------------- ------ -- -- - ----- ------- - ----- ------------------------- ----- ---- - ----- ------------------ ----- ---------------------------------------------- ------ ----- ---------------- -----
- 使用
type方法输入搜索内容并使用submit提交：
-- -------------------- ---- ------- ----- --------------- - --------------------------------------- ------ -- -- - ----- ------- - ----- ------------------------- ----- ---- - ----- ------------------ ----- ---------------------------------------------- ------ ----- --------------------------------- ------------------- ------ ----- ------------------ ---- -- --------------- ----- ---------------- -----
- 在搜索结果中获取指定元素信息：
-- -------------------- ---- ------- ----- --------------- - --------------------------------------- ------ -- -- - ----- ------- - ----- ------------------------- ----- ---- - ----- ------------------ ----- ---------------------------------------------- ------ ----- --------------------------------- ------------------- ------ ----- ------------------ ---- -- --------------- ----- ------ - ----- ------------------------------------ ------ -------------------- ----- ---------------- -----
总结
@ianwalter/puppeteer-helper 可以有效地简化 Puppeteer 的使用，使得开发者可以更加快速高效地完成前端自动化测试。此外，该库的很多 API 都具有很好的扩展性，开发者可以根据自己的需求对其进行修改和扩充。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671cc30d092702382281b