Nightwatch：使用頁面對象內的自定義命令

Question

對於新版本的產品，我決定嘗試一種頁面對象方法，而不是使用視圖，可能我開始錯誤地使用它。

我們有一個簡單地等待一個元素和點擊（waitAndClick.js）的自定義命令：

exports.command = function(selector, callback) { 
    return this 
    .waitForElementPresent(selector, 30000) 
    .click(selector, callback); 
}; 

它完美的測試裏面：

const {client} = require('nightwatch-cucumber'); 
const {defineSupportCode} = require('cucumber'); 

defineSupportCode(({Given, Then, When}) => { 
    Given(/^I enable Dashboard management$/,() => { 
     return client.waitAndClick('[id=enableManagement]'); 
    }); 
}); 

但是，當我試圖在頁面對象內使用它會拋出一個錯誤：

module.exports = { 
    url() { 
    return this.api.launchUrl; 
    }, 
    elements: { 
    username: '[name="_Nitro_Login_username"]', 
    password: '[name="_Nitro_Login_password"]', 
    enter_button: '[title="Enter"]' 
    }, 
    commands: [ 
    { 
     loginAs(username, password) { 
     return this.waitForElementVisible('@username', 50000) 
      .setValue('@username', username) 
      .setValue('@password', password) 
      .waitAndClick('@enter_button') 
      .waitForElementNotPresent('@enter_button', 50000); 
     } 
    } 
    ] 
}; 

我也嘗試過使用.api.waitAndClic k（'@ enter_button'），結果相同。

和錯誤消息：

Error while running click command: Provided locating strategy is not supported: [title="enter"]. It must be one of the following:

class name, css selector, id, name, link text, partial link text, tag name, xpath

at Object.exports.command (/Users/eaflor/dev/jive-next/test/ui/commands/waitAndClick.js:9:63) 

at Object.F.command (/Users/eaflor/dev/jive-next/node_modules/nightwatch/lib/core/api.js:274:31) 

at Object.commandFn (/Users/eaflor/dev/jive-next/node_modules/nightwatch/lib/core/api.js:287:24) 

at AsyncTree.runCommand (/Users/eaflor/dev/jive-next/node_modules/nightwatch/lib/core/queue.js:154:30) 

at AsyncTree.runChildNode (/Users/eaflor/dev/jive-next/node_modules/nightwatch/lib/core/queue.js:114:8) 

at AsyncTree.walkDown (/Users/eaflor/dev/jive-next/node_modules/nightwatch/lib/core/queue.js:80:10) 

at AsyncTree.walkUp (/Users/eaflor/dev/jive-next/node_modules/nightwatch/lib/core/queue.js:97:8) 

at AsyncTree.walkDown (/Users/eaflor/dev/jive-next/node_modules/nightwatch/lib/core/queue.js:90:12) 

at AsyncTree.traverse (/Users/eaflor/dev/jive-next/node_modules/nightwatch/lib/core/queue.js:73:8) 

at F.onCommandComplete (/Users/eaflor/dev/jive-next/node_modules/nightwatch/lib/core/queue.js:131:12) 

at F.g (events.js:291:16) 

at emitNone (events.js:86:13) 

at F.emit (events.js:185:7) 

at /Users/eaflor/dev/jive-next/node_modules/nightwatch/lib/api/client-commands/_locateStrategy.js:18:10 

at _combinedTickCallback (internal/process/next_tick.js:67:7) 

at process._tickCallback (internal/process/next_tick.js:98:9) 

Is it even possible to use custom commands inside the page object?

Answer 1

我找到解決它的辦法。爲了在頁面對象使用自定義命令你必須把它們寫在類風格：http://nightwatchjs.org/guide#writing-custom-commands

這應該什麼樣子：

var util = require('util'); 
var events = require('events'); 

function waitAndClick() { 
    events.EventEmitter.call(this); 
} 

util.inherits(waitAndClick, events.EventEmitter); 

waitAndClick.prototype.command = function(selector) { 
    const api = this.client.api; 

    api 
      .waitForElementPresent(selector) 
      .click(selector,() => { 
       this.emit('complete'); 
      }) 
    ; 

    return this; 
}; 

module.exports = waitAndClick; 

希望它會幫助別人。