“ page_objects_path”字段在nightwatch.config.js中不起作用

Question

我在守夜人中使用页面对象，我在nightwatch.conf.js中配置page_objects_path，但是当我引用这些已定义的元素时，出现了错误。我不知道为什么，我使用vue-cli来构建项目。 这是我的配置：

nightwatch.conf.js

...
page_objects_path: 'test/e2e/pages',
...

页面目标文件register.js：

module.exports = {
  elements: {
    genderField: '.common-picker:first-child',
    genderPicker: '.picker',
    genderOptionLast: '.picker-item:last-child',
    genderPickerConfirmButton: '.picker-toolbar span:last-child',
    genderPickerCancelButton: '.picker-toolbar span:first-child'
  }
}

在测试文件中使用页面对象：

'select a gender option': function (browser) {
    browser
      .assert.hidden('@genderPicker')
      .click('@genderField')
      .pause(1000)
      .click('@genderOptionLast')
      .click('@genderPickerConfirmButton')
      .assert.containsText('@genderField', '女士')
      .pause(1000)
      .end()
  }

错误信息：

Answer 1

页面对象文件的每个元素都应具有关键字选择器。

module.exports = {
    elements: {
        genderField: {
            selector: '.common-picker:first-child'
        },
        genderPicker: {
            selector: '.picker'
        },
        genderOptionLast: {
            selector: '.picker-item:last-child'
        },
        genderPickerConfirmButton: {
            selector: '.picker-toolbar span:last-child'
        },
        genderPickerCancelButton: {
            selector: '.picker-toolbar span:first-child'
        }
    }
}

Answer 2

您需要在测试的顶部将页面对象定义为常量，然后从registerPage对象中调用元素：

  'select a gender option': function (browser) {
    const registerPage = browser.page.register();
    registerPage.assert.hidden('@genderPicker')
    registerPage.click('@genderField')
    browser.pause(1000)
    registerPage.click('@genderOptionLast')
    registerPage.click('@genderPickerConfirmButton')
    registerPage.assert.containsText('@genderField', '女士')
    browser.pause(1000)
    browser.end()
  }

如果您对所有内容都使用CSS（看起来像您一样），则在页面对象中不需要选择器。

来源：http://nightwatchjs.org/guide#page-objects