我最近的任务是为我的公司开发的AngularJS应用程序实现一些自动化测试。在对可用的不同测试框架进行了一些研究之后,我决定使用
Protractor
因为它似乎提供了我们需要的所有功能,并且似乎有很好的文档记录;保持。
当我开始设计时;在编写测试时,我注意到代码中的大多数HTML元素都没有被赋予ID属性,所以我开始将ID属性分配给测试中使用的各种元素,这样我就可以使用如下函数访问它们:
element(by.id('abc'));
将它们分配给变量,以便在测试脚本中使用。
然而,我刚刚得知,为了使源代码更容易压缩以分发给我们的客户,不提供HTML元素ID属性是一种深思熟虑的设计选择。这意味着我现在需要重新编写测试,这样它们就不再使用ID属性来获取元素,但我不太确定如何做到这一点。。。
当我在浏览器中检查这些菜单项时,它显示以下HTML结构:
<ul id="nav" class="nav" data-slim-scroll ... >
<li data-ng-mouseenter="setMenuTop($event)" ...
<a href="#/pages" id="pagesMenuBtn" ... >
...
<a href="#/alarms" id="alarmsMenuBtn" ... >
...
...
</li>
...
</ul>
目标是能够删除
id
属性,但仍然能够访问这些HTML元素以对其运行测试。
例如,我之前有:
describe('myApp', function() {
var alarmsMenuBtn = element(by.id('alarmsMenuBtn'));
var chartsMenuBtn = element(by.id('chartsMenuBtn'));
...
it('should navigate to the Charts page', function(){
browser.waitForAngularEnabled(false);
browser.actions().mouseMove(chartsMenuBtn).perform();
chartsMenuBtn.click();
browser.waitForAngularEnabled(true);
browser.call(closeDlg).then(function(){
expect(browser.getCurrentUrl()).toBe('chartsURL');
});
我现在有:
describe('myApp', function() {
var menuItems = $(".slimScrollDiv").$(".nav").$$("li");
var alarmsMenuBtn = menuItems.get(1).$("a");
var chartsMenuBtn = menuItems.get(2).$("a");
但是,当我用相同的测试运行它时,我的测试现在失败了,给了我如下消息:
失败:
1) 应用程序应导航到报警页面
消息:
错误:超时-在jasmine指定的超时内未调用异步回调。默认的超时间隔。
堆栈:
错误:超时-在jasmine指定的超时内未调用异步回调。默认的超时间隔。
在ontimeout(timers.js:386:11)
在tryOnTimeout(timers.js:250:5)
定时。listOnTimeout(timers.js:214:5)
消息:
失败:元素不可见
(会话信息:chrome=61.0.3163.100)
(驱动程序信息:chromedriver=2.33.506120(E3E5343736286C0BC2D2DC9AA4915BA81D9023F),平台=Windows NT 10.0.15063 x86_64)
堆栈:
...
以及:
消息:
失败:元素不可见
(会话信息:chrome=61.0.3163.100)
(驱动程序信息:chromedriver=2.33.506120(E3E5343736286C0BC2D2DC9AA4915BA81D9023F),平台=Windows NT 10.0.15063 x86_64)
这些元素的HTML是:
<li><a href="#/alarms" id="alarmsMenuBtn" target="_self"><i class="ti-alert"></i><span data-i18n="Alarms"></span></a></li>
<li><a href="#/charts" id="chartsMenuBtn" target="_self"><i class="ti-bar-chart"></i><span data-i18n="Charts"></span></a></li>
所以我的问题是,我如何使用ID属性以外的东西来访问这些(或任何其他)HTML元素?
