javascript - 为什么 .text() 函数在 AngularJS e2e 的 ngScenario 中返回 [object Object]？

Question

更新:下面的解决方案!

我是网站开发的新手，但我的任务是为使用 AngularJS 的开发网站开发 e2e(端到端)测试。因此，我一直在寻找使用 AngularJS 的业力运行 ngScenario testing wrapper 的道路。 .

无论如何，刚开始我想确保一个简单的超链接的文本与其 href 地址的一部分相匹配。无需了解此代码片段的结构，但这些是用户配置文件的缩略图，您可以完全单击缩略图对象(第一个“a”)或单击显示其名称的链接(第二个“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's post 得到了提示另一个 Angular e2e 作者关于查询、done() 消息和 promise 的问题。这最终引导我找到了最终的解决方案。

所以我自己做了一个解决方案，本着合作的精神做出了一套范例供大家学习。有四个示例，前两个只是获取文本和 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/"

});

Answer 1

除了 these docs 之外，我正在努力寻找支持这一点或更好地解释的引用资料。没有太多信息。所以这个答案主要是阅读相关代码的内存。

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

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

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

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