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

【问题标题】：How to access and manipulate structural directives during an e2e test如何在 e2e 测试期间访问和操作结构指令
【发布时间】：2017-06-08 08:32:36
【问题描述】：

背景：我希望能够为给定路线排列 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 以某种方式获取 ng-if 指令

我会感谢有关我的问题的任何提示。

【问题讨论】：

您想获取页面上的所有ngIf 指令吗？
检查这个 plunker plnkr.co/edit/4TU2iIZmZf410fa09gtW?p=preview（查看 index.html）
我希望能够访问页面上的所有结构指令，所以我认为 ngIf 将是一个好的开始。您的 plunker 看起来很有前途，我会仔细研究一下，并尝试将其调整为我的 e2e 测试。之后我会给你反馈。感谢这篇文章
@yurzui，您的解决方案正是我一直在寻找的。如果您将其作为解决方案发布，我可以接受。

标签： angular typescript protractor angular2-directives e2e-testing

【解决方案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

【讨论】：