使用 Devtool 的录制功能和 Puppeteer 来搭建 Electron 自动化测试搭建流程

升级 Electron 版本

我们需要使用到 Devtool 中的操作录制功能，操作录制功能可以快速的生成 Puppeteer 脚本，方便我们快速的搭建起来 Electron 自测流程。

但是操作录制功能是 chromium 116 版本才加入的功能，Electron 对应的版本是 26，因此我们需要把 Electron 升级到 26 以上。

考虑到国产龙芯系统，可以在龙芯开发者社区查看到龙芯系统能支持的 Electron 版本，正好是有 v26.4.3，因此我们选择将 Electron 升级到 v26.4.3 的版本。

录制操作&导出脚本

接着我们就可以使用 Devtool 来录制操作。

然后将Puppeteer脚本导出放置在test文件夹中，通过一个main.js的文件，来调用执行。

const child_process = require('child_process');
const puppeteer = require("puppeteer-core");
const local_user_login = require("./local_user_login");
const waitPort  = require('wait-port');

const port = 1106;

(async () => {
    child_process.exec(`npm run start -- --remote-debugging-port=${ port }`);

    console.log("Waiting for debug service run", new Date().getTime());
    await waitPort({
        host: 'localhost',
        port
    });

    console.log("Start to auto test", new Date().getTime());
    let app = await puppeteer.connect({
        browserURL: `http://localhost:${port}`,
    });
    console.log("Connect to electron", new Date().getTime());

    const pages = await app.pages();
    const [page] = pages;

    await local_user_login(page);

    console.log("End to auto test", new Date().getTime());

    setTimeout(async () => await app.close(), 5000)
})()

这里我们通过 --remote-debugging-port 命令开放出了远程调试端口，有关 --remote-debugging-port 的详细内容可以参考 这篇文档

接着使用了一个 wait-port 的模块包来等待客户端启动，在这个时候记录了一下启动用时。

之后使用 Puppeteer 获取到 Electron 中的 Browser 对象，从中拿到 Page 对象，并在调用实现录制好的脚本方法时传入。

因此我们还需要对录制好的脚本做一些修改：

const puppeteer = require("puppeteer-core");

/**
 * 本地用户登录
 * @param {puppeteer.Page} page 
 */
module.exports = async (page) => {
    // const browser = await puppeteer.launch();
    // const page = await browser.newPage();
    const timeout = 5000;
    // page.setDefaultTimeout(timeout);

    {
        const targetPage = page;
        await targetPage.setViewport({
            width: 1000,
            height: 640
        })
    }

    ...

}

在这个脚本中就不需要自己获取 Page 对象了，而是直接使用传入的 Page 对象。

总结

虽然通过 Devtool 导出的 Puppeteer 脚本不太好直接使用，但也可以简化自动化测试流程的搭建。