Question

背景：我希望能够为给定路线排列Angular2屏幕的所有可能配置，并使用Protractor截取它们：http://www.protractortest.org/#/debugging。

问题：在e2e测试期间，我似乎无法找到一种方法来访问指令（例如ng-if）。

是否可以在e2e测试中访问ng-if指令？
- 如果是：是否有办法操纵指令？通过操作，我的意思是影响指令的评估，而不改变指令所依赖的输入。

可能的解决方案路径：以下是我如何访问路由器以便能够导航到特定路线的示例：

it('should get the router', () => {
browser.executeScript(() => {
  const ng = window['ng'];
  const root = document.getElementsByTagName('app-root')[0];
  const router = ng.probe(root)
    .injector.get(ng.coreTokens.Router);
  const routes = router.config;
  ...
  ...
  return [];
}).then(ret=> console.log(ret));
});

思想：

也许有可能以某种方式使用ng.probe

我会对我的问题提出任何暗示。

Answer 1

您可以按照以下方式执行此操作：

HTML

<button id="find">Find ngIf directives and show all</button>

脚本

var findComments = function(el) {
    var arr = [];
    for(var i = 0; i < el.childNodes.length; i++) {
        var node = el.childNodes[i];
        if(node.nodeType === 8) {
            arr.push(node);
        } else {
            arr.push.apply(arr, findComments(node));
        }
    }
    return arr;
};


function findNgIfDirectives() {
  var commentNodes = findComments(document);
  const ng = window['ng'];
  commentNodes.forEach(function(node) {
    var debugNode = ng.probe(node);
    var ngIf = (debugNode.providerTokens[0]);
    var ngIfInstance = debugNode.injector.get(ngIf);

    ngIfInstance.ngIf = true;
  });

}
document.getElementById('find').addEventListener('click', findNgIfDirectives)

<强> Plunker Example

如何在e2e测试期间访问和操作结构指令

1 个答案: