在Angular Protractor Jasmine测试中查看console.log输出

Question

如何在angularjs protractor jasmine测试中查看console.log输出？目前，浏览器关闭得太快了。

更多信息-我正在使用angularjs教程的第8步。我正在尝试将e2e测试更改为protractor。我使用的protractor配置文件基于%appdata%\npm\node_modules\protractor\referenceConf.js。在由配置文件引用的spec js文件中，我有console.log的实例。但是，在执行protractor e2e测试期间，网站在chrome中打开，我看到一些东西在浏览器中发生，然后浏览器在我检查任何console.log输出之前关闭了。我认为我需要以某种方式保持chrome开启。怎么做？

- Bill Swartz

---

也许我没有理解你的问题，但是如果在你的规范中设置了console.log()，你应该在终端看到它。 - glepretre

@glepretre - OP说他有console.log()的输出，但浏览器关闭得太快，以至于他无法查看它。 - JESii

Answer 1

使用browser.manage().logs().get('browser')

browser.manage().logs().get('browser').then(function(browserLogs) {
   // browserLogs is an array of objects with level and message fields
   browserLogs.forEach(function(log){
      if (log.level.value > 900) { // it's an error log
        console.log('Browser console error!');
        console.log(log.message);
      }
   });
});

- Mohsen

---

由于这会读取浏览器日志的当前状态，因此最好将其放在“afterEach（）”或测试后块中。 - Andy

我应该在哪里添加这个代码块？在规范文件还是配置文件中？更多细节会有所帮助。 - Divyanth Jayaraj

最新的Protractor v3和Firefox似乎无法正常工作。 - Artjom Kurapov

对我来说，这个答案中缺失的部分是我需要根据https://github.com/angular/protractor/blob/master/docs/faq.md#how-can-i-get-hold-of-the-browsers-console在配置文件中添加loggingPrefs部分，例如： capabilities: { loggingPrefs: { browser: "ALL" }
}。 - Paul Lynch

我在protractor.conf.ts中使用了以下capabilities: { loggingPrefs: { browser: "ALL" } }，并将其放入cucumber.After中，它可以正常工作。 - tschumann

Answer 2

一个普遍的误解是console.log会在你的浏览器中记录内容，这是不正确的。当你运行测试时，除了测试结果，你还应该在终端中看到console.log()的值。浏览器控制台与此完全不同。

一个常见的例子：

it('get name as John', function(){
        element(by.id('name')).getText().then(function(value){
        console.log(value);
    })
});

终端中的结果：

John
get name as John - pass

希望这能帮到你。

- Sandy

Answer 3

现在可以通过插件来实现，而不需要编写任何特殊的代码:

• 官方提供的protractor-console-plugin（仅支持Chrome浏览器）
• 第三方提供的protractor-console

- alecxe

Answer 4

为了保持浏览器窗口的打开状态，您应该尝试以调试模式运行Protractor：

$ <route-to-protractor> debug <route-to-conf-file>

然后在您的规范文件中添加此行，以指定执行停止的位置：

browser.debugger();

在 Protractor 调试器控制台中，您可以通过输入 c 或 cont 来跳过断点。

更多信息请参见： https://github.com/angular/protractor/blob/master/docs/debugging.md 现在，为了获取控制台内容，您可以查看如何在Protractor常见问题解答中执行此操作： https://github.com/angular/protractor/blob/master/docs/faq.md#how-can-i-get-hold-of-the-browsers-console 类似于：

browser.manage().logs().get('browser').then(function(browserLog) {
  console.log('log: ' + require('util').inspect(browserLog));
})

- pacog

---

默认情况下，Chrome 日志级别为 WARNING，因此无法捕获 console.log 中的数据。那么，有什么方法可以使用 webdriver 或设置浏览器日志级别为 ALL 来启动测试呢？ - pulkitsinghal

@pulkitsinghal 我已经弄清楚了。你需要更改浏览器能力 loggingPrefs: { browser: 'ALL' }。 - Joe Heyming

Answer 5

你可能还想要更改日志记录级别以查看其他类型的控制台输出。

请查看我的建议更新protractor faq，以进行此操作这里。

- user1337489

Answer 6

你可以在测试中覆盖console.log :)

logMessages = [];

console.log = function(message) {
    logMessages.push(message);
}

你也可以使用 $log 替代 console.log，并使用类似这样的解决方案来将一些钩子放入日志消息中：https://gist.github.com/lrvick/6938531

- rob

Answer 7

一个简单的选择是使用:

browser.pause(); protractor/api/browser.pause

例如:

it('should .. test stuff', function() {
    browser.pause(); //--->the automation will pause here - follow the instructions in your terminal to continue 
    //--->your broken testing magic here...
});

将该方法调用放在规范体的第一项，以便您查看浏览器控制台。

当浏览器暂停时，您将控制自动化。然后，您可以像平常一样与浏览器交互，检查不同状态下的元素，检查浏览器控制台等。

在终端中输入 c 以继续测试 - 将有等待您输入的提示和说明。

- MCGRAW

Answer 8

如果你要进行以下操作：

• 安装protractor-console
• 将此内容添加到配置文件中

    plugins: [
        {
            package: 'protractor-console',
            logLevels: ['severe'],
        },
    ],

这将把所有浏览器错误日志记录到您运行Protractor的命令行中

- Sergey Pleshakov