如何从 Angular e2e 测试范围执行 jQuery？答案

【问题标题】：How to execute jQuery from Angular e2e test scope?如何从 Angular e2e 测试范围执行 jQuery？
【发布时间】：2013-05-06 14:18:06
【问题描述】：

是否可以从 Angular e2e 场景执行 jQuery 命令？

例如，如果我想执行：$('.picker-col-id-id').attr('class'); 我收到一个错误：

TypeError: 对象 [object Object] 的属性“$”不是函数

【问题讨论】：

因为 jQuery 不存在。你确定你正确引用了它吗？
试试jQuery('.picker-col-id-id')...
解决方案没有帮助，在 e2e 范围内无法识别 jQuery

标签： jquery angularjs

【解决方案1】：

这里的问题是 AngularJs Scenario Test Runner 在 iframe 中运行您的应用程序。 runner 本身没有加载 jQuery。

最好使用角度场景 dsl。来自e2e testing docs：

元素（选择器，标签）。{方法}（键，值）

在元素匹配上执行传入key和value的方法给定的 jQuery 选择器，其中方法可以是以下任何一种 jQuery 方法：attr、prop、css。标签用于测试输出。

虽然从文档中不清楚，但您也可以使用只有 1 个参数的 'attr' 方法来获取属性的值。

element('.picker-col-id-id').attr('class');

如果你需要其他 jQuery 功能，比如 focus()，你可以这样做：

element('.picker-col-id-id').query(function(elements, done) {
    elements.focus();
    done();
});

或者扩展 angular dsl

angular.scenario.dsl('jQueryFunction', function() {
    return function(selector, functionName /*, args */) {
        var args = Array.prototype.slice.call(arguments, 2);
        return this.addFutureAction(functionName, function($window, $document, done) {
            var $ = $window.$; // jQuery inside the iframe
            var elem = $(selector);
            if (!elem.length) {
                return done('Selector ' + selector + ' did not match any elements.');
            }
            done(null, elem[functionName].apply(elem, args));
        });
    };
});

并以这种方式使用它：

jQueryFunction('.picker-col-id-id', 'focus');

或者一般来说：

jQueryFunction(selector, jQueryFunctionName, arg1, arg2, ...);

【讨论】：

【解决方案2】：

如 cmets 中所述，jQuery 似乎丢失了。您需要将其添加到您的 karma 配置文件或直接添加到 runner.html。

如果你想将它添加到你的 karma 配置文件中，请增加 files 条目以添加对 jQuery 的引用，例如，

files = [
  ANGULAR_SCENARIO,
  ANGULAR_SCENARIO_ADAPTER,
  'app/components/jquery/jquery.js', // <== This should point to jQuery
  'test/e2e/**/*.js'
];

或者，如果您从runner.html 运行您的 e2e 测试，您可以在 angular 之后和脚本之前加载它，例如：

<!doctype html>
<html lang="en">
   <head>
      <title>End2end Test Runner</title>
      <script src="../lib/angular/angular-scenario.js" ng-autotest></script>
      <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
      <script src="scenarios.js"></script>
   </head>
   <body>
   </body>
</html>

【讨论】：