【自动化】使用puppeteer实现自动化测试

用于通过 Headless Chrome 或 Chromium 控制浏览器进行自动化测试和网页抓取

相关文章

• 自动化解决方案
• 使用Jenkins实现自动化部署
• 使用jsdoc实现自动生成文档
• 使用puppeteer实现自动化测试

使用puppeteer实现自动化测试

---

一、Puppeteer 是什么

Puppeteer 是一个由 Google 开发的 Node.js 库，用于通过 Headless Chrome 或 Chromium 控制浏览器进行自动化测试和网页抓取。Puppeteer 提供了简单易用的 API，支持各种浏览器操作和页面交互，并且可以生成页面的截图和 PDF。

二、功能体验

模拟登录

三、安装方式

强烈推荐使用cnpm, 避免各种不通的问题

cnpm i puppeteer

四、常用API

页面操作：

page.goto(url, [options])：

• 描述：加载指定的 URL。
• 参数：url：要加载的 URL；options：可选参数，用于配置导航行为。
• 返回值：Promise，当页面加载完成时解析为 Response。

page.waitForSelector(selector, [options])：

• 描述：等待指定的选择器出现在页面中。
• 参数：selector：要等待的选择器；options：可选参数，用于配置等待条件。
• 返回值：Promise，当选择器出现在页面中时解析为 ElementHandle。

page.click(selector, [options])：

• 描述：在页面中点击指定的选择器。
• 参数：selector：要点击的选择器；options：可选参数，用于配置点击操作。
• 返回值：Promise，当点击完成时解析为 void。

page.type(selector, text, [options])：

• 描述：在指定的输入框中输入文本。
• 参数：selector：要输入文本的选择器；text：要输入的文本；options：可选参数，用于配置输入操作。
• 返回值：Promise，当输入完成时解析为 void。

page.evaluate(pageFunction, […args])：

• 描述：在页面上下文中执行 JavaScript 代码。
• 参数：pageFunction：要在页面上下文中执行的函数；args：要传递给函数的参数。
• 返回值：Promise，解析为函数的返回值。

page.screenshot([options])：

• 描述：对当前页面进行截图。
• 参数：options：可选参数，用于配置截图操作。
• 返回值：Promise，解析为截图的 Buffer 数据。

page.waitForNavigation([options])：

• 描述：等待页面导航完成。
• 参数：options：可选参数，用于配置等待条件。
• 返回值：Promise，解析为 Response。

page.evaluateHandle(pageFunction, […args])：

• 描述：在页面上下文中执行 JavaScript 代码，并返回一个句柄。
• 参数：pageFunction：要在页面上下文中执行的函数；args：要传递给函数的参数。
• 返回值：Promise，解析为 JSHandle 对象。

page.setContent(html, [options])：

• 描述：设置页面的 HTML 内容。
• 参数：html：要设置的 HTML 内容；options：可选参数，用于配置设置操作。
• 返回值：Promise，解析为 void。

浏览器操作：

puppeteer.launch([options])：

• 描述：启动一个浏览器实例。
• 参数：options：可选参数，用于配置浏览器实例。
• 返回值：Promise，解析为 Browser 实例。

browser.newPage()：

• 描述：创建一个新的页面。
• 参数：无。
• 返回值：Promise，解析为 Page 实例。

browser.close()：

• 描述：关闭浏览器实例。
• 参数：无。
• 返回值：Promise，解析为 void。

browser.pages()：

• 描述：获取所有打开的页面。
• 参数：无。
• 返回值：Promise，解析为一个 Array，包含所有打开的页面。

browser.newContext([options])：

• 描述：创建一个新的浏览器上下文。
• 参数：options：可选参数，用于配置上下文。
• 返回值：Promise，解析为一个新的 BrowserContext 实例。

其他操作：

page.waitForTimeout(milliseconds)：

• 描述：等待指定的时间。
• 参数：milliseconds：要等待的时间（毫秒）。
• 返回值：Promise，解析为 void。

page.on(event, listener)：

• 描述：监听页面的事件。
• 参数：event：要监听的事件名称；listener：事件处理函数。
• 返回值：无。

puppeteer.connect([options])：

• 描述：连接到一个现有的浏览器实例。
• 参数：options：可选参数，用于配置连接选项。
• 返回值：Promise，解析为 Browser 实例。

puppeteer.devices：

• 描述：预定义的设备模式列表，用于模拟不同的设备。
• 参数：无。
• 返回值：对象，包含各种预定义设备的配置。

四、示例代码

const puppeteer = require("puppeteer");

let mainBrowser = null;
let mainPage = null;

const sleep = (ms) => new Promise((res) => setTimeout(res, ms));

async function initBrowser({ indexURL }) {
  // 设置启动浏览器的选项
  const launchOpt = {
    // 设置是否以无头模式（headless）启动浏览器。
    headless: false,
    // 设置传递给浏览器实例的命令行参数的数组。
    args: ["--start-maximized", `--proxy-server=http://127.0.0.1:7890`],
    // 设置浏览器窗口的默认视口大小。如果设置为 null，则使用浏览器的默认视口大小。
    defaultViewport: null,
  };

  // 启动浏览器实例
  mainBrowser = await puppeteer.launch(launchOpt);

  mainPage = await mainBrowser.newPage();

  // 导航到指定页面
  await mainPage.goto(indexURL, { timeout: 0 });
  await sleep(500);

  // 输入用户名和密码
  await mainPage.type("input[type=text]", "jeffrey");
  await mainPage.type("input[type=password]", "123456");
  await sleep(500);

  // 点击登录按钮
  await mainPage.click("button.el-button--success");

  // 等待页面导航完成
  await mainPage.waitForNavigation({ timeout: 0 });
}

async function run() {
  await initBrowser({ indexURL: "https://visual.cccccl.com/#/login" });
}

run();

五、常见问题

• page.setViewport(viewport) 设置视窗大小无效

改为

// 表示启动浏览器时，将其最大化显示。这是 Chromium 浏览器的一个命令行参数，指示浏览器在启动时最大化窗口。
args: ["--start-maximized"]
// null 表示不设置默认视口大小，浏览器会使用默认的视口大小。
defaultViewport: null,