在 Angular e2e（量角器）测试期间记录浏览器错误和网络流量答案

【问题标题】：Log browser errors and network traffic during Angular e2e (protractor) tests在 Angular e2e（量角器）测试期间记录浏览器错误和网络流量
【发布时间】：2019-01-03 13:35:00
【问题描述】：

我有两个相当大的 Angular 7 CLI 应用程序，具有良好的 e2e 覆盖率。大约在同一时间，两个应用程序在测试开始时开始间歇性超时，最可靠的是在 AppVeyor 构建服务器上。顺便说一句，我也可以让它在本地复制。

基本日志只是说测试在某个步骤超时，这并不是真正有用。我想目前某种 API 调用或 Angular 功能不可靠，但我不知道是哪一种。

如何将ng e2e 的详细程度提高到最大？此时输出越多越好，但至少我正在寻找：

浏览器的网络流量（例如，某些 API 是否提供 500 秒？还是无法访问？）
浏览器错误（即您会在控制台中看到的内容）

理想情况下，我会增加详细程度并启用额外的日志记录，只需在命令行上使用一个标志，或者在例如protractor.conf 文件 - 但此时我也愿意在需要时安装其他软件包。

我已经检查了the Angular CLI e2e docs，但它没有提到“冗长”或“日志”。我浏览了量角器网站上链接的the protractor example (?) config 作为参考，但也找不到任何东西。

【问题讨论】：

标签： angular testing protractor

【解决方案1】：

以下示例使用 Chrome 浏览器。它将从浏览器控制台获取错误和资源故障。

量角器配置：

config.multiCapabilities = [{
    browserName: 'chrome',
    shardTestFiles: true,
    maxInstances: process.env.RUN_ON === 'local' ? 1 : 18,
    'chromeOptions': {
        'args': ['disable-infobars',
                 '--start-maximized',
                 'window-size=1920,1080'
                ]
    },
    loggingPrefs: {
        "browser": "SEVERE"
    },
    verboseMultiSessions: true
}];

获取浏览器日志：

browser.manage().logs().get('browser').then((browserLogs) => {
    if (browserLogs.length > 0) {
        console.log(browserLogs);
        let whitelistResources = new Set(['/static/', '/subscribable-resource-types/', '/Thumbnail/', '/picture/']);
        JSON.parse(JSON.stringify(browserLogs)).forEach((browserLog) => {
            let lstBrowser = browserLog.message.split('/');
            let intersection = new Set([...lstBrowser].filter(x => whitelistResources.has('/' + x + '/')));
            if (intersection.size === 0) {
                // Validate Network Failure: If URL part does not exists in the whitelistresource
                expect(browserLog.message).toEqual('');
            }
        });
    }
});

【讨论】：