Check for Console Logs and Exceptions with Puppeteer

Instructor: [00:00] It is generally good practice to only write end to end tests on application features and not implementation details. However, it can be useful to know how to test and log console warnings and or thrown exceptions. There are times when new features might pass their tests, however cause an untested to throw an exception.

[00:20] Let's write let logs as an array and let errors, then we'll do page it on console. An arrow function logs that push. C.text. Then, we'll to page it on page error with an arrow function. Arrows.push, E.text. Throw out our test. We'll do a test that we don't have any console logs. We'll expect our logs.length to be zero. We'll test that we don't have any exceptions. We'll expect that our errors.length is also zero.

[01:01] We're able to capture any console or page errors by the use of the page.on method. Where the first parameter is the event type we're listening for and the second parameter is a callback function. Here, we're just going to push the text into the corresponding array. As we look into our apps console, we can see that we don't have any exceptions or logs, we can assume that our tests are going to pass.

[01:24] If we try it out in our terminal, we can see that we actually do have a test that's failing. We do have a console log. As we can see that we expected zero, but we did receive one for our logs.length. However, we did not have any exceptions. This is a good reminder that what we see in our browser is not exactly the same as what we're testing against with Puppeteer. Let's see what the console log is that we're getting.

[01:50] Inside of our console callback, let's add a console.log C.text. Now, we've run our test script again, we can see what log we are getting. It looks like it's this download React dev tools. For kicks and grands, if we wanted to get this test to pass, we could just filter out this console.log. We can use just the filter method on the logs array and check for that React dev tools log.

[02:21] Perfect. Not only do we have tests for catching console logs and exceptions, but we can log these out to our terminal. If we wanted to test that our exceptions test was working we could simply throw an exception inside of our app.js.

[02:35] Instead of our handle and submit, the last thing we'll do is throw a new error with whoops as a string. Before we save this change, if we test our tests as they are now, we can see that they do pass. If we save this and re-run our tests, it looks like our exceptions test is failing as we are getting an exception.