在页面对象 api 和主守夜人 api 之间切换

Question

我正在使用带有 nightwatch 的页面对象模型进行测试。难以与元素交互，因此被迫执行一些 jquery。 Execute 不是页面对象 api 中可用命令子集的一部分，因此为了使用它，我必须调用完整的 nightwatch 命令 api。（在 https://github.com/nightwatchjs/nightwatch/wiki/Page-Object-API 上查看更多相关信息）我的问题是如何在执行语句后 return 到页面对象 api。

我的页面对象是这样的：

elements: {
  nameInput: 'input[name="name"]',
  billingEmail: 'input[name="billingEmail"]',
  licenseNumber: 'input[name="licenses.total"]',
  licensePrice: 'input[name="subscription.price"]',
  hardwareModel: 'input[name="model"]',
  hardwareQuantity: 'input[name="quantity"]',
  hardwarePrice: 'input[name="price"]',
  customerEmail: 'input[name="customerEmail"]',
  createButton: 'button[name="createAccount"]',
  cancelButton: 'button[name="cancel"]',
},


inputClientDetails (name, email) {
    this
      .waitForElementVisible('body', 10000)
      .setValue('@nameInput', name)
      .setValue('@billingEmail', email)
      .setValue('@licenseNumber', '10')
      .setValue('@licensePrice', '9.99')
      .api.execute(function () {
          $('.datepicker--wrapper').find('input[type=text]').val('2017-08-30').trigger($.Event("keydown", {keyCode: 40}));
      })
      .setValue('@hardwareModel', 'Test model')
      .setValue('@hardwarePrice', '9.99')
      .setValue('@hardwareQuantity', '10')
      .setValue('@customerEmail', email)
      .click('@createButton')
    return this.api;
},

当我运行我的测试我得到错误：错误：无法定位元素：“@hardwareModel”使用：css 选择器

当我在页面对象中没有执行语句时，没有问题。那么是否可以在访问主守夜api后return到页面对象api？我尝试在函数中加入 return 语句，但没有用。

Answer 1

对于这个问题你有两种选择：

1st : api 将 return this.api 而不是 this 页面对象，因此我们只能通过 page[ 调用此页面对象=18=]

inputClientDetails (name, email) {
this
  .waitForElementVisible('body', 10000)
  .setValue('@nameInput', name)
  .setValue('@billingEmail', email)
  .setValue('@licenseNumber', '10')
  .setValue('@licensePrice', '9.99')
  .api.execute(function () {
      $('.datepicker--wrapper').find('input[type=text]').val('2017-08-30').trigger($.Event("keydown", {keyCode: 40}));
  })
  .page.yourPage().setValue('@hardwareModel', 'Test model') 
  .page.yourPage().setValue('@hardwarePrice', '9.99')
  .page.yourPage().setValue('@hardwareQuantity', '10')
  .page.yourPage().setValue('@customerEmail', email)
  .page.yourPage().click('@createButton')
return this.api;

},

第二：你可以拆分你的功能，较小的功能应该 return this 页面对象而不是 this.api

inputClientDetails (name, email) {
    this
      .waitForElementVisible('body', 10000)
      .setValue('@nameInput', name)
      .setValue('@billingEmail', email)
      .setValue('@licenseNumber', '10')
      .setValue('@licensePrice', '9.99')
      .callExecute()
      .setValue('@hardwareModel', 'Test model')
      .setValue('@hardwarePrice', '9.99')
      .setValue('@hardwareQuantity', '10')
      .setValue('@customerEmail', email)
      .click('@createButton')
    return this.api;
},

callExecute(){
      this.api.execute(function () {
          $('.datepicker--wrapper').find('input[type=text]').val('2017-08-30').trigger($.Event("keydown", {keyCode: 40}));
      });
     return this;
}

Answer 2

一旦您致电 .api.whatever()，您通过链接调用的函数也使用 .api（即浏览器）。

更好的方法是将您的函数分成两部分，而不是将整个函数链接起来。

inputClientDetails (name, email) {
var client=this.api;
this
  .waitForElementVisible('body', 10000)
  .setValue('@nameInput', name)
  .setValue('@billingEmail', email)
  .setValue('@licenseNumber', '10')
  .setValue('@licensePrice', '9.99')
//now use client-browser
client.execute(function () {
      $('.datepicker--wrapper').find('input[type=text]').val('2017-08-30').trigger($.Event("keydown", {keyCode: 40}));
  })
//Now back to page object
this.setValue('@hardwareModel', 'Test model')
  .setValue('@hardwarePrice', '9.99')
  .setValue('@hardwareQuantity', '10')
  .setValue('@customerEmail', email)
  .click('@createButton')
return this.api;
//either this.api or this doesn't matter, but this.api if you still have other chained function based on browser.
}

在页面对象 api 和主守夜人 api 之间切换

switch between page object api and main nightwatch api

javascript

selenium-webdriver

nightwatch.js