nightwatch css选择器可以在由bootstrapped angularjs创建的无序列表中找到项目吗?

时间:2015-12-01 19:45:35

标签: nightwatch.js

在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,该指令通过某种自举角度导入 - 如果我理解正确的话。)

1 个答案:

答案 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选择器。