2

更新：下面的解决方案！

我对网站开发相当陌生，但我的任务是为使用 AngularJS 的开发网站开发 e2e（端到端）测试。因此，我一直在寻找使用 AngularJS 的 karma-run ngScenario testing wrapper的道路。

无论如何，刚开始我想确保一个简单的超链接的文本匹配它的 href 地址的一部分。无需知道此代码段的结构，但这些是用户配置文件的缩略图，您可以完全单击缩略图对象（第一个“a”），也可以单击显示其姓名的链接（第二个“一个'）。

一页上有几十个。

这是加载了用户“PurplePenguin”的页面的一部分。

<div class="thumbnail__section">
    <a href="/profile/PurplePenguin">
    <div class="thumbnail__bottom">
        <div class="thumbnail__rating ng-binding"> </div>
            <div class="thumbnail__info">
                <div class="thumbnail__name">
                    <a class="ng-binding" href="/profile/PurplePenguin">PurplePenguin</a>
                </div>
    [...]

本质上，我想要一个测试，它将获取第二个 'a' 元素的文本并根据 href 属性检查它：“断言 href '/profile/PurplePenguin' 等于 '/profile/' + 'PurplePenguin'”

这就是我所做的，只是想测试第一个缩略图的'a'，（在我写“PurplePengiun”的时候，每次都是第一个用户，所以我可以硬编码它）。

it('should have the performer\'s name match the link', function() {
    // "eq(n)" gets the nth instance of the element; 
    // "> a:eq(0)" grabs its first child a
    var nameElement = element('.thumbnail__name:eq(0) > a:eq(0)');

    // These work and pass
    expect(nameElement.text()).toBe('PurplePenguin');
    expect(nameElement.attr('href')).toBe('/profile/PurplePenguin');

    // This does not
    var textString = nameElement.text(); // textString == "[object Object]"
    expect(nameElement.attr('href')).toBe('/profile/' + textString);

这被返回：

expect element '.thumbnail__name:eq(0) > a:eq(0)' get attr 'href' toEqual "/profile/[object Object]"
expected "/profile/[object Object]" but was "/profile/PurplePenguin"

所以我想出了如何在页面上找到我需要的特定元素，但是试图操纵一个简单的“a”元素的文本只会给我[object Object]。

我用我对 JS 的基本知识尝试过的一些事情：

nameElement.text().toString(), nameElement.text().value(), nameElement[0].text()

尝试除 text() 以外的东西

nameElement.html() and nameElement.val()

当试图将它们用作字符串时，它们也会返回 [object Object]。

似乎只有在使用非常特定的 API 函数（如 .toBe 或 .toEqual）时，查看这些元素的值和属性才有效，但我想断言创建了一个特别格式化的字符串。

感谢您的任何帮助！

解决方案

感谢 Andyrooger 的那一点洞察力，在发布我的问题之前，我实际上已经尝试了查询功能，但放弃得太快了。您的解释让我有了开始深入研究官方文档中发布的示例的想法。我最终从Adi Roiban 的帖子中得到了一个提示，另一个 Angular e2e 作家的问题是关于查询、done() 消息和承诺。这最终导致我找到了最终的解决方案。

所以我给自己做了一个解决方案，并本着合作的精神做了一套例子供其他人学习。有四个示例，前两个只是获取文本和 href 并将它们与硬编码值进行比较。第三个使用 indexOf 进行简单的比较。第四个展示了如何创建自己的更具体的通过/失败条件（比 Jasmine 提供的匹配器更多）。

数字 1：用户名文本与硬编码值

it('should have the user\'s name be \'PurplePenguin\'', function() {

  var textPromise = element('.thumbnail__name:eq(0) > a:eq(0)').query(function (nameElement, done) {
    var text = nameElement.text(); // Can finally access this guy!

    // The first param null indicates a nominal execution, the second param is a return of sorts
    done(null, text); 
  });

  // Passes
  expect(textPromise).toBe('PurplePenguin')
});

数字 2：配置文件 href 值与硬编码值

it('should have the user\'s link be \'/profile/PurplePenguin\'', function() {

  var textPromise = element('.thumbnail__name:eq(0) > a:eq(0)').query(function (nameElement, done) {
    var href = nameElement.attr('href');

    // The first param null indicates a nominal execution, the second param is a return of sorts
    done(null, href); 
  });

  // Passes
  expect(textPromise).toBe('/profile/PurplePenguin')
});

数字 3：简单的字符串比较

it('should have the user\'s name match the link', function() {

  var textPromise = element('.thumbnail__name:eq(0) > a:eq(0)').query(function (nameElement, done) {
    var text = nameElement.text();
    var href = nameElement.attr('href');

    // The first param null indicates a clean pass, the second param is a return of sorts
    done(null, href.indexOf(text)); // indexOf returns -1 if text is _not_ a sub-string of href 

  });

  expect(textPromise).toBeGreaterThan(-1);

  // In the case of failure reports this in the console (if using Karma):
  //    expect element .thumbnail__name:eq(0) > a:eq(0) custom query toBeGreaterThan -1
  //    expected -1 but was -1

  // In the runner.html page for the test simply reports this useless/misleading log:
  //    expected -1 but was -1

});

第 4 点：以您自己的方式进行更详细的字符串比较以及更好的错误消息

it('should have the user\'s name match the link', function() {

  var nameStringPromise = element('.thumbnail__name:eq(0) > a:eq(0)').query(function (nameElement, done) {
    var text = nameElement.text();
    var href = nameElement.attr('href');

    var message;
    if (href.indexOf(text) == -1)
      message = 'Did not find "' + text + '" in "' + href + '"';

    done(message, href.indexOf(text));
  });

  expect(nameStringPromise);

  // An expect() with no Jasmine matcher means that it only uses the done message to determine 
  //   a pass or fail for the test. So I wrote that if my conditions weren't met it would print
  //   an informative message in the case of failure
  // Example failure output with a broken url generator:
  //     Did not find "PurplePenguin" in "/profile/"

});
4

1 回答 1

0

除了这些没有太多信息的文档之外，我正在努力寻找支持这一点的参考资料或更好地解释一下。因此这个答案主要来自阅读相关代码的记忆。

当您在 中编写测试时ngScenario，您不会像在单元测试中那样编写一系列即时操作。当测试开始时，你实际上在做什么排队要执行的命令列表。

看起来像普通 jQuery 函数的方法，例如text()或attr()实际上是ngScenarioDSL 的一部分并返回未来对象（这意味着它们将在某些时候执行并获得您想要的调用结果。）

expect()已经知道这一点，因此在与您的预期值进行比较之前等待结果。在您的示例中，下面的代码正在直接读取，因此将看到未来的对象。

如果您确实需要以这种方式阅读元素，我建议您查看query应该允许它的功能。另一方面，如果您只需要检查可以使用的字符串的格式，也可以使用toMatch它。ngScenario

于 2013-12-19T21:59:48.740 回答