Search code examples
angularjsprotractorangularjs-e2egulp-protractor

Angular Protractor - How to debug variables

Consider the following code snippet

var allRows = element.all(by.repeater('row in items'))

This returns an array of repeater items. So, how do I debug this variable in console. When I do console.log(allRows), I get the following in console not the array with html.

{ ptor_: { controlFlow: [Function],
 schedule: [Function],
 setFileDetector: [Function],
 getSession: [Function],
 getCapabilities: [Function],
 quit: [Function],
 actions: [Function],
 touchActions: [Function],
 executeScript: [Function],
 executeAsyncScript: [Function],
 call: [Function],
 wait: [Function],
 sleep: [Function],
 getWindowHandle: [Function],
 getAllWindowHandles: [Function],
 getPageSource: [Function],
 close: [Function],
 getCurrentUrl: [Function],
 getTitle: [Function],
 findElementInternal_: [Function],
 findElementsInternal_: [Function],
 takeScreenshot: [Function],
 manage: [Function],
 switchTo: [Function],
 driver: 
  WebDriver {
    session_: [Object],
    executor_: [Object],
    flow_: [Object],
    fileDetector_: null },
 element: { [Function] all: [Function] },
 '$': [Function],
 '$$': [Function],
 baseUrl: '',
 rootEl: 'html',
 ignoreSynchronization: false,
 getPageTimeout: 100000,
 params: {},
 ready: 
  Promise {
    flow_: [Object],
    stack_: null,
    parent_: null,
    callbacks_: null,
    state_: 'fulfilled',
    handled_: true,
    value_: null,
    queue_: null },
 plugins_: 
  { pluginConfs: [],
    pluginObjs: [],
    assertions: {},
    resultsReported: false },
 resetUrl: 'data:text/html,<html></html>',
 trackOutstandingTimeouts_: true,
 mockModules_: [ [Object] ],
 allScriptsTimeout: 100000,
 getProcessedConfig: [Function],
 forkNewDriverInstance: [Function],
 restart: [Function] },

So how do I debug the actual variable which should contain all the html rows. I couldn't find the option for it in the debugging docs.

Any help is greatly appreciated.

Thanks.

UPDATE

allRows have the following markup.

<li>AA</li><li>BB</li><li>CC</li>

I need to view the entire thing in console

Solution

  • I think you are looking for getOuterHtml() -- which will print out the entire element tag (html attributes included) of the specified element. For example,

    it('prints element', function () {
    var el = element(by.model('username'));
    el.getOuterHtml().then(function (val) {
        console.log(val);
    });
});

    This produces:

    this console output

    Source:https://angular.github.io/protractor/#/api?view=webdriver.WebElement.prototype.getOuterHtml