Angular 量角器 - 如何调试变量

Question

考虑以下代码片段

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

这个 returns 一个 array 的转发器项目。那么，我如何在控制台中调试这个变量。当我执行 console.log(allRows) 时，我在控制台中得到以下内容，而不是带有 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] },

那么我该如何调试应该包含所有 html 行的实际变量。我在调试 docs 中找不到它的选项。

非常感谢任何帮助。

谢谢。

更新

allRows 具有以下标记。

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

我需要在控制台中查看整个内容

Answer 1

请记住几乎每个 Protractor 函数 returns 一个必须在继续之前解决的承诺。如果您想查看变量的内容 allRows

allRows.each(function(row)getInnerHtml().then(function(html) {
     console.log(html);
});

Promises 可以在 expect 方法中解决，因此假设预期结果由变量 myHtmlString 引用，您可以将上面的内容缩短为：

expect(allRows.getInnerHtml()).toBe(myHtmlString);

响应更新：

你要的是父元素的innerHtml。您可以使用 xpath 函数获得它，但它们是最慢的选择方法，因此，只能作为最后的手段使用。如果您可以直接获取 /，那么我提供的代码将起作用。如果因为某种原因，无法直接获取列表元素，那么

var firstItem = allRows.first();
var parent = firstItem.element(by.xpath('..'));
parent.getInnerHtml().then(function(html) {
    console.log(html);
});

应该在控制台中打印所需的结果。

Answer 2

我认为您正在寻找 getOuterHtml() -- 它将打印出指定元素的整个元素标签（包括 html 属性）。例如，

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

这会产生：

this console output

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

Angular 量角器 - 如何调试变量

Angular Protractor - How to debug variables

angularjs

angularjs-e2e

protractor

gulp-protractor