在nightwatch.js中运行以下代码:
module.exports = { 'simple test todomvc with angular2' : function (client) { client .url('http://todomvc.com/examples/angular2/') .waitForElementVisible('input.new-todo', 1000) // this works .assert.visible('input.new-todo') // this passes .setValue('input.new-todo', 'task A\r\n') .setValue('input.new-todo', 'task B\r\n') .pause(1000) .assert.visible('ul.todo-list') // this passes .assert.visible('ul.todo-list li:first-child') // this fails .end(); } };
产生以下输出:
Running: simple test todomvc with angular2 ? Element was visible after 724 milliseconds. ? Testing if element is visible. ? Testing if element is visible. ? Testing if element is visible. Element could not be located. - expected "true" but got: null ... ERROR: Unable to locate element: "ul.todo-list li:first-child" using: css selector
为什么todo-list是可见的,但该列表的第一个子元素不可见?
查找和检查待办事项列表中元素的最佳方法是什么?
(请注意,测试中的应用程序是使用AngularJS实现的,但不使用ng-app指令。使用Angular的ng-for指令生成todo-list,该指令通过某种自举角度导入 - 如果我理解正确的话。)
答案 0 :(得分:2)
以下是工作测试的代码:
module.exports = { 'simple test todomvc with angular2' : function (client) { client .url('http://todomvc.com/examples/angular2/') .waitForElementVisible('input.new-todo', 1000) .assert.visible('input.new-todo') .setValue('input.new-todo', 'task A\r\n') .setValue('input.new-todo', 'task B\r\n') //.pause(2000) .assert.visible('ul.todo-list') //.assert.visible('ul.todo-list > li:nth-child(2) > div > label') .assert.containsText('ul.todo-list > li:nth-child(2) > div > label', 'task A') .assert.containsText('ul.todo-list > li:nth-child(3) > div > label', 'task B') .end(); } };
正如您所看到的,我需要更多地了解如何指定正确的CSS选择器。