我正在构建一个 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>
谢谢你的帮助
最佳答案
您可以找到所有具有(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 .
关于javascript - Protractor 测试 Angular 2 和点击事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37838110/