Now that we have seen all the concepts of Protractor in the previous chapters, let us understand the debugging concepts in detail in this chapter.
Introduction
End-to-end (e2e) tests are very difficult to debug because they depend on the whole ecosystem of that application. We have seen that they depend upon various actions or particularly we can say that on prior actions like login and sometimes they depend on the permission. Another difficulty in debugging e2e tests is its dependency on WebDriver because it acts differently with different operating systems and browsers. Finally, debugging e2e tests also generates long error messages and makes it difficult to separate browser-related issues and test process errors.
Types of Failure
There can be various reasons for the failure of test suites and following are some well-known failure types â
WebDriver failure
When a command cannot be completed, an error is thrown by WebDriver. For example, a browser cannot get the defined address, or an element is not found as expected.
WebDriver unexpected failure
An unexpected browser and OS-related failure happen when it fails to update the web driver manager.
Protractor failure for Angular
The failure of Protractor for Angular happens when Protractor didnât find Angular in the library as expected.
Protractor Angular2 failure
In this kind of failure, Protractor will fail when the useAllAngular2AppRoots parameter is not found in the configuration. It happens because, without this, the test process will look at one single root element while expecting more than one element in the process.
Protractor failure for timeout
This kind of failure happens when the test specification hits a loop or a long pool and fails to return the data in time.
Expectation failure
One of the most common test failures shows what a normal expectation failure looks like.
Why debugging is important in Protractor?
Suppose, if you have written test cases and they got failed then it is very important to know how to debug those test cases because it would be very hard to find the exact place where the error has occurred. While working with Protractor, you will get some long errors in a red color font in the command line.
Pausing and Debugging the Test
The ways to debug in Protractor are explained here &miuns;
Pause Method
Using the pause method to debug the test cases in Protractor is one of the easiest ways. We can type the following command at the place we want to pause our test code &miuns;
browser.pause();
When the running code hits the above command, it will pause the running program at that point. After that, we can give the following commands according to our preference â
Type C for Moving Forward
Whenever a command has exhausted, we must type C to move forward. If you will not type C, the test will not run the full code and it will fail due to Jasmine’s time-out error.
Type repl for entering interactive mode
The benefit of interactive mode is that we can send the WebDriver commands to our browser. If we want to enter into the interactive mode, then type a reply.
Type Ctrl-C for exiting and continuing the tests
For exiting the test from pause state and continuing the test from where it has stopped, we need to type Ctrl-C.
Example
In this example, we are having the below specification file named example_debug.js, protractor tries to identify an element with locator by.binding(âmmmmâ) but the URL(https://angularjs.org/ page has no element with specified locator.
describe('Suite for protractor debugger',function(){
it('Failing spec',function(){
browser.get("http://angularjs.org");
element(by.model('yourName')).sendKeys('Vijay');
//Element doesn't exist
var welcomeText =
element(by.binding('mmmm')).getText();
expect('Hello '+welcomeText+'!').toEqual('Hello Ram!')
});
});
Now, for executing the above test we need to add browser.pause() code, where you want to pause the test, in the above specification file. It will look as follows â
describe('Suite for protractor debugger',function(){
it('Failing spec',function(){
browser.get("http://angularjs.org");
browser.pause();
element(by.model('yourName')).sendKeys('Vijay');
//Element doesn't exist
var welcomeText =
element(by.binding('mmmm')).getText();
expect('Hello '+welcomeText+'!').toEqual('Hello Ram!')
});
});
But before executing, we need to do some changes in the configuration file also. We are doing the following changes in the earlier used configuration file, named example_configuration.js in the previous chapter â
// An example configuration file.
exports.config = {
directConnect: true,
// Capabilities to be passed to the webdriver instance.
capabilities: {
'browserName': 'chrome'
},
// Framework to use. Jasmine is recommended.
framework: 'jasmine',
// Spec patterns are relative to the current working directory when
// protractor is called.
specs: ['example_debug.js'],
allScriptsTimeout: 999999,
jasmineNodeOpts: {
defaultTimeoutInterval: 999999
},
onPrepare: function () {
browser.manage().window().maximize();
browser.manage().timeouts().implicitlyWait(5000);
}
};
Now, run the following command â
protractor example_configuration.js
The debugger will start after the above command.
Debugger Method
Using the pause method to debug the test cases in Protractor is a bit advanced way. We can type the following command at the place we want to break our test code â
browser.debugger();
It uses the node debugger to debug the test code. For running the above command, we must type the following command in a separate command prompt which has opened from the test project location â
protractor debug protractor.conf.js
In this method, we also need to type C in the terminal for continuing the test code. But opposite to the pause method, in this method, it is to be typed for only one time.
Example
In this example, we are using the same specification file named bexample_debug.js, used above. The only difference is that instead of the browser.pause(), we need to use the browser.debugger() where we want to break the test code. It will look as follows â
describe('Suite for protractor debugger',function(){
it('Failing spec',function(){
browser.get("http://angularjs.org");
browser.debugger();
element(by.model('yourName')).sendKeys('Vijay');
//Element doesn't exist
var welcomeText = element(by.binding('mmmm')).getText();
expect('Hello '+welcomeText+'!').toEqual('Hello Ram!')
});
});
We are using the same configuration file, example_configuration.js, used in the above example.
Now, run the protractor test with the following debug command-line option
protractor debug example_configuration.js
The debugger will start after the above command.
