Protractor Tutorial – Better Console Reports
One of the reasons that I love to use Protractor Test for web automation is that it supports a lot of open-source “plugins” that improve what Protractor can do. I will be going over one of my favorite plugins that I use to supplement my Protractor Test framework that will give us better console reports. Follow along to get the most out the Protractor Test Framework.
Note this post contains affiliate links. It doesn’t cost you anything extra to use these links, but it helps to support this blog.
Jasmine Spec Reporter
The first plugin that I will add is the Jasmine Spec Reporter. This plugin will improve the report that is displayed in the console window after your test has run. Here is an example of the report without this plugin. Run your test, the results are displayed in the console like this.
$ protractor conf.js [10:39:57] I/hosted - Using the selenium server at http://localhost:4444/wd/hub [10:39:57] I/launcher - Running 1 instances of WebDriver Started .F Failures: 1) Protractor Demo Page should fail Message: Failed: No element found using locator: By(css selector, *[id="nameFld"]) Stack: NoSuchElementError: No element found using locator: By(css selector, *[id="nameFld"]) at WebDriverError (C:Usersjasonmyers18AppDataRoamingnpmnode_modulesprotractornode_modulesselenium-webdriverliberror.js:27:5) at NoSuchElementError (C:Usersjasonmyers18AppDataRoamingnpmnode_modulesprotractornode_modulesselenium-webdriverliberror.js:168:5) at elementArrayFinder.getWebElements.then (C:Usersjasonmyers18AppDataRoamingnpmnode_modulesprotractorlibelement.ts:819:17) at ManagedPromise.invokeCallback_ (C:Usersjasonmyers18AppDataRoamingnpmnode_modulesprotractornode_modulesselenium-webdriverlibpromise.js:1366:14) at TaskQueue.execute_ (C:Usersjasonmyers18AppDataRoamingnpmnode_modulesprotractornode_modulesselenium-webdriverlibpromise.js:2970:14) at TaskQueue.executeNext_ (C:Usersjasonmyers18AppDataRoamingnpmnode_modulesprotractornode_modulesselenium-webdriverlibpromise.js:2953:27) at asyncRun (C:Usersjasonmyers18AppDataRoamingnpmnode_modulesprotractornode_modulesselenium-webdriverlibpromise.js:2813:27) at C:Usersjasonmyers18AppDataRoamingnpmnode_modulesprotractornode_modulesselenium-webdriverlibpromise.js:676:7 at process._tickCallback (internal/process/next_tick.js:103:7)Error at ElementArrayFinder.applyAction_ (C:Usersjasonmyers18AppDataRoamingnpmnode_modulesprotractorlibelement.ts:463:23) at ElementArrayFinder.(anonymous function) [as sendKeys] (C:Usersjasonmyers18AppDataRoamingnpmnode_modulesprotractorlibelement.ts:95:21) at ElementFinder.(anonymous function) [as sendKeys] (C:Usersjasonmyers18AppDataRoamingnpmnode_modulesprotractorlibelement.ts:841:14) at Object.<anonymous> (c:protractorTesttesttest_spec.js:17:31) at C:Usersjasonmyers18AppDataRoamingnpmnode_modulesprotractornode_modulesjasminewd2index.js:102:25 at new ManagedPromise (C:Usersjasonmyers18AppDataRoamingnpmnode_modulesprotractornode_modulesselenium-webdriverlibpromise.js:1067:7) at controlFlowExecute (C:Usersjasonmyers18AppDataRoamingnpmnode_modulesprotractornode_modulesjasminewd2index.js:87:18) at TaskQueue.execute_ (C:Usersjasonmyers18AppDataRoamingnpmnode_modulesprotractornode_modulesselenium-webdriverlibpromise.js:2970:14) at TaskQueue.executeNext_ (C:Usersjasonmyers18AppDataRoamingnpmnode_modulesprotractornode_modulesselenium-webdriverlibpromise.js:2953:27) at asyncRun (C:Usersjasonmyers18AppDataRoamingnpmnode_modulesprotractornode_modulesselenium-webdriverlibpromise.js:2860:25) From: Task: Run it("should fail") in control flow at Object.<anonymous> (C:Usersjasonmyers18AppDataRoamingnpmnode_modulesprotractornode_modulesjasminewd2index.js:86:14) From asynchronous test:
The default format for the test reporter in Protractor is a dot for a passing test and an “F” for a failing test. The problem with this is you don’t have an easy way to know what tests passed. And you have to look into the failure logs to see which tests failed. This makes it hard to report on what the status of a test run was.
Better Console Reports
Let’s make things better with the Jasmine Spec Reporter. Open up a console window and enter the command:
npm install jasmine-spec-reporter --save-dev
Open up the conf.js file and enter this code:
//Add this to the top of the file let SpecReporter = require('jasmine-spec-reporter').SpecReporter // Add this to "jasmineNodeOpts: {" print: function () {} // Add this to "exports.config = {" onPrepare: function () { jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: false } }))
Run your test again and you should see the new output.
$ protractor conf.js [10:36:06] I/hosted - Using the selenium server at http://localhost:4444/wd/hub [10:36:06] I/launcher - Running 1 instances of WebDriver Jasmine started Protractor Demo Page √ should welcome you × should fail - Failed: No element found using locator: By(css selector, *[id="nameFld"]) ************************************************** * Failures * ************************************************** 1) Protractor Demo Page should fail - Failed: No element found using locator: By(css selector, *[id="nameFld"]) Executed 2 of 2 specs (1 FAILED) in 8 secs. [10:36:16] I/launcher - 0 instance(s) of WebDriver still running [10:36:16] I/launcher - internet explorer #01 failed 1 test(s) [10:36:16] I/launcher - overall: 1 failed spec(s) [10:36:16] E/launcher - Process exited with error code 1
You are now able to see the name of the test suites and which tests passed or failed within each suite.
Visit the npm page for the Jasmine Spec Reporter to get more info here
These posts are an introduction to Protractor for Automated Testing. To learn more with a full hands-on guide, grab our course on Udemy for only $9.99 when you use my link. Website Automation for Beginners with Protractor