javascript - Protractor 测试 Angular 2 和点击事件

Question

我正在构建一个 Angular 2 应用程序，我需要一些有关使用 Protractor 进行单元测试的信息。

事实上，使用 angular 1，我们可以做一些像这样的东西:

element(by.css('[ng-click="myFunction()"]'))

在我们的测试中，以验证我们在当前页面上有一个 ng-click 属性这一事实。

我用 angular 2 尝试了以下操作:

element(by.css('[(click)="alert(\'test\')"]'))

但是好像不行。

任何人都知道我如何测试我有一个带有 angular 2 和 Protractor 的 clic 事件？

编辑:这是我在 HomeComponent.html 文件中使用的 HTML:

<button (click)="alert('test')">Hello</button>

谢谢你的帮助

Answer 1

您可以找到所有具有(click) 属性的元素并检查.count() :

expect($$("[\(click\)]").count()).toBeGreaterThan(0);

哪里$$是 element.all(by.css()) 的快捷方式。 [\(click\)] CSS 选择器将匹配所有具有 (click) 属性的元素。请注意，您必须转义括号，因为它们在 CSS 选择器中具有特殊含义。

---

另一种选择是使用 .filter() :

var elements = $$("*").filter(function (elm) {
    return elm.getAttribute("(click)").then(function (attributeValue) {
        return !!attributeValue;
    });
});
expect(elements.count()).toBeGreaterThan(0);

---

或者，使用 XPath 来匹配所有具有 (click) 属性的元素:

var elements = element.all(by.xpath('//*[@*[name() = "(click)"]]'))
expect(elements.count()).toBeGreaterThan(0);

---

另一个奇怪的选择是使用新的 by.js()定位器:

var elements = element.all(by.js(function() {
    function getAllElementsWithAttribute(attribute)
    {
      var matchingElements = [];
      var allElements = document.getElementsByTagName('*');
      for (var i = 0, n = allElements.length; i < n; i++)
      {
        if (allElements[i].getAttribute(attribute) !== null)
        {
          // Element exists with attribute. Add to array.
          matchingElements.push(allElements[i]);
        }
      }
      return matchingElements;
    }
    return getAllElementsWithAttribute("(click)");
}));
expect(elements.count()).toBeGreaterThan(0);

getAllElementsWithAttribute() 取自 here .