如何在Karma运行的SAPUI5 Opa5测试中获取Puppeteer的Page对象

第一步：调整Karma配置开启远程调试端口 #

修改karma.conf.js中的自定义启动器配置，给Chrome增加远程调试端口启动参数：

process.env.CHROME_BIN = require( 'puppeteer' ).executablePath();
config.customLaunchers = {
    'ChromeHeadlessNoSandbox': {
        base: 'ChromeHeadless',
        flags: [ 
            '--no-sandbox',
            // 新增远程调试端口配置，可自定义未被占用的端口
            '--remote-debugging-port=9222'
        ]
    }
};
config.browsers = [ 'ChromeHeadlessNoSandbox' ];

第二步：封装获取当前测试页面的方法 #

无需调用puppeteer.launch启动新浏览器，直接通过调试端口连接Karma已经启动的Chrome实例，再过滤出运行测试的目标页面即可：

const puppeteer = require('puppeteer');

async function getCurrentTestPage() {
    // 连接到已启动的Chrome实例
    const browser = await puppeteer.connect({
        browserURL: 'http://localhost:9222',
        // 保留原有窗口尺寸，不自动修改视口
        defaultViewport: null
    });
    // 获取所有已打开的页面对象
    const pages = await browser.pages();
    // 过滤出Karma测试运行的上下文页面，可根据实际场景调整匹配规则
    return pages.find(page => page.url().includes('/context'));
}

第三步：在测试中调用截图能力 #

在Opa5测试用例中直接调用封装好的方法获取Page对象，再执行截图操作：

// Opa5测试用例示例
iTakeScreenshotOfCurrentPage: async function() {
    const testPage = await getCurrentTestPage();
    await testPage.screenshot({
        path: './screenshots/test-page.png',
        fullPage: true
    });
}

注意事项 #

• 确保9222端口未被其他进程占用，若占用可更换为其他空闲端口，同步修改配置和连接地址即可
• 若测试页面存在iframe、多标签页等场景，可调整pages.find的匹配规则，通过URL、页面标题等特征精准定位目标页面
• 项目依赖中需已安装对应版本的puppeteer，保证和配置中使用的Chrome版本兼容

内容的提问来源于stack exchange，提问作者Graeme Perrow