AngularJS：E2E 测试中的访问范围答案

【问题标题】：AngularJS: Accessing scope in E2E testAngularJS：E2E 测试中的访问范围
【发布时间】：2013-06-30 17:45:32
【问题描述】：

我正在尝试在 E2E 测试中访问 $scope，但没有成功...

作为测试，我尝试了这个：（我的网站不使用 JQuery..）

跑步者将我的网站放在一个嵌套的 iframe 中，所以我直接访问它，然后获取所有 ng-scopes 并在它们上尝试 .scope()，如下面的this 帖子和代码...

var frameDocument = document.getElementById('test-frames').children[0].contentDocument;
var scopeElements = frameDocument.getElementsByClassName('ng-scope');
var scopes = [].map.call(scopeElements, function (e) {
return angular.element(e).scope();
});

上面的代码找到了正确的元素，但是对它们调用 scope() 会为每个元素返回 undefined ......

有人可以确认或否认我们可以访问 E2E 中的范围吗？我想有办法吗？

谢谢

【问题讨论】：

标签： angularjs karma-runner

【解决方案1】：

这是我根据之前回答的技巧。

您可以将其扩展到动态范围。主要部分是从 addFutureAction 获取对 appWindow 的引用。

//HTML CODE

<body id="main-controller" ng-controller="mainCtrl" ng-init="__init__()">


//Scenario helper.

/*
Run `callback` with scope from `selector`.
*/
angular.scenario.dsl('scope', function() {
    return function(selector, callback) {
        return this.addFutureAction(
            'Executing scope at ' + selector,
            function(appWindow, $document, done) {
                var body = appWindow.document.getElementById(selector)
                var scope = appWindow.angular.element(body).scope()
                callback(scope)
                scope.$apply()
                done(null, 'OK');
            })
    }
})

//Actual test.

it(
'When alerts are defined, they are displayed.',
function() {
    scope('main-controller', function(scope) {
        scope.alerts.push({'type': 'error', 'msg': 'Some error.'})
    })

    expect(element('#alerts').css('display')).toEqual('block')
})

【讨论】：

【解决方案2】：

在 E2E 测试中，以这种方式访问范围并不是一个好的选择。相反，您可以使用element() 等辅助函数来选择页面中的元素，并使用expect() 来检查模型数据。

您可能需要的是单元测试。您可以在单元测试中轻松访问$scope。

这里有一个很好的指南：http://www.yearofmoo.com/2013/01/full-spectrum-testing-with-angularjs-and-testacular.html

这也可能是时间问题，我可以像这样到达睾丸跑步者的范围。它在 iframe 中运行测试。要使其工作，您需要将sleep(3) 添加到您的测试中。但这是非常脆弱的。

    setTimeout(function () {
        console.log('try to reach frames');
        var frame = window.frames[0].window.frames['senario_frame'];
        if (!frame) {
            console.log('too late');
        } else {

            var scopeElements = frame.document.getElementsByClassName('ng-scope');
            var scopes = [].map.call(scopeElements, function (e) {
                return frame.angular.element(e).scope();
            });
            console.log(scopes);
        }
    }, 2000);

【讨论】：

感谢您的回复，我明白这是不好的做法。但是，在一个特定的情况下，我试图绕过期货的使用。所以知道这不是一个好选择，我仍然不确定是否有“方法”可以访问 $scope...
我编辑了答案。我尝试用 testacular runner 来做，它也使用 iframe 来运行测试。