nightwatch-commands
A set of Mobify specific custom commands for Nightwatch.js
Download
To begin, clone this repository. cd
into your chosen folder, and run the following:
npm install
Selenium server and Chromedriver will also be downloaded into /selenium
.
Currently Using https://www.npmjs.com/package/selenium-download version: 2.0.10 - selenium chromedriver 2.29 - selenium standalone server 3.4.0
Linting
JavaScript in this tool is linted with ESLint according to our code syntax and style standards here at Mobify.
Linting may be run with the grunt lint
command. Code is also linted automatically on CircleCI.
Use
In order for your project to be able to access these commands and assertions you need to include them in your projects nightwatch.js settings.json
file.
It should look something like this:
"custom_commands_path": "./node_modules/nightwatch-commands/commands",
"custom_assertions_path": "./node_modules/nightwatch-commands/assertions"
Assertions
elementsCount(selector, expected, message, callback)
The elementsCount
assertion checks if the given selector is present the number of times that is expected for that selector to appear.
Parameter Name | Parameter Type | Description |
---|---|---|
selector | String | The CSS/Xpath selector to locate the element. |
expected | Number | The expected number of times for the attribute to appear. |
message | String | optional The message to output. |
callback | Function | optional A function to call after the current command finishes execution. |
this.demoTest = function (browser) {
browser.assert.elementsCount('#x-root', 1);
}
elementsPresent(selector, message, callback)
The elementsPresent
assertion checks if the given selectors are present. It returns a list of the missing selectors.
Parameter Name | Parameter Type | Description |
---|---|---|
selector | String | The CSS/Xpath selector to locate the element. |
message | String | optional The message to output. |
callback | Function | optional A function to call after the current command finishes execution. |
this.demoTest = function (browser) {
browser.assert.elementsPresent('#x-root', '#x-header', '#x-footer');
};
elementsVisible(selector, message, callback)
The elementsVisible
assertion checks if one or more selectors are visible. It returns a list of one or more selectors that are not visible on the page.
Parameter Name | Parameter Type | Description |
---|---|---|
selectors | String | The CSS/Xpath selector to locate the element. |
callback | Function | optional A function to call after the current command finishes execution. |
this.demoTest = function (browser) {
browser.assert.elementsVisible('#x-root', '#x-head');
};
templateName(expected, message, callback)
The templateName
assertion checks if the given template name is correct.
Parameter Name | Parameter Type | Description |
---|---|---|
expected | String | The expected value of the attribute to check. |
message | String | optional A log message to display in the output. If the parameter is not specified, a default message is displayed. |
callback | Function | optional A function to call after the current command finishes execution. |
this.demoTest = function (client) {
browser.assert.templateName('home');
};
Commands
get(url, callback)
The get
command combines the url
and waitUntilMobified
functions. This command uses the browser.execute
function to run code within the client browser. It then waits for the Mobify
or Adaptive
object to be present on the page
Parameter Name | Parameter Type | Description |
---|---|---|
url | String | The URL to load |
callback | Function | optional A function to call after the current command finishes execution. |
this.demoTest = function (browser) {
browser.get('http://www.test.com');
};
getMobifyEvaluatedData(callback)
The getMobifyEvaluatedData
command uses the waitForCondition
method to retrieve the Mobify.evaluatedData
from the client browser.
Input
Parameter Name | Parameter Type | Description |
---|---|---|
callback | Function | optional A function to call after the current command finishes execution. |
Output
Parameter Name | Description |
---|---|
Object | Returns the client object after waitUntilMobified executes on it with the specified parameters. |
this.demoTest = function (browser) {
browser.getMobifyEvaluatedData();
};
htmlCapture(message, callback)
htmlCapture
is a helper command that saves HTML to tests/system/integration/fixtures
. This command was designed to collect and save HTML files for use in integration tests. This command is intended to be run using a Nightwatch environment with a desktop user agent, however, it can still be used to capture any HTML as required.
Parameter Name | Parameter Type | Description |
---|---|---|
fileName | String | camelCased alphanumeric string ending with ".html", representing the name of the fixture |
callback | Function | optional A function to call after the current command finishes execution. |
this.demoTest = function (browser) {
browser.htmlCapture('cart.html');
};
log(message, callback)
The log
command prints a message to the console. Use this command to output messages in a test.
Parameter Name | Parameter Type | Description |
---|---|---|
message | String | The message to log on the console. |
callback | Function | optional A function to call after the current command finishes execution. |
this.demoTest = function (browser) {
browser.log('Testing submitting form');
};
clickAndWaitUntilMobified(selector, callback)
The clickAndWaitUntilMobified
command initiates a click
command on the supplied selector link, navigates to the URL, and then it initiates the waitUntilMobified
function before it continues the chain of tests.
Parameter Name | Parameter Type | Description |
---|---|---|
selector | String | The CSS selector to click on to navigate to the new URL. |
callback | Function | optional A function to call after the current command finishes execution. |
this.demoTest = function (browser) {
browser.clickAndWaitUntilMobified('.myLink');
};
preview(url, bundle, callback)
The preview
command uses http://preview.mobify.com to open a website specified by url
to preview a given bundle specified by bundle
.
Parameter Name | Parameter Type | Description |
---|---|---|
url | String | The URL to preview, equivalent to the Site URL field. |
bundle | String | optional The bundle URL, equivalent to the Bundle Location field. Default is https://localhost:8443/loader.js |
callback | Function | optional A function to call after the current command finishes execution. |
this.demoTest = function (client) {
browser.preview('https://www.merlinspotions.com', 'https://localhost:8443/loader.js', );
};
trigger(selector, type, callback)
The trigger
command simulates a specified event type on the supplied DOM element specified by the selector parameter.
Parameter Name | Parameter Type | Description |
---|---|---|
selector | String | The CSS/Xpath selector to locate the element. |
type | String | The specified event type, for example click in the enabled JSON Wire Protocols. |
callback | Function | optional A function to call after the current command finishes execution. |
this.demoTest = function (browser) {
browser.trigger('.myLink', 'click');
};
triggerClick(selector, callback)
The triggerClick
command uses Javascript's click function on a given selector. Use this when the regular Selenium .click
does not work.
Parameter Name | Parameter Type | Description |
---|---|---|
selector | String | The CSS/Xpath selector to locate the element. |
callback | Function | optional A function to call after the current command finishes execution. |
this.demoTest = function (browser) {
browser.triggerClick('.myLink');
};
triggerTouch(selector, type, callback)
The triggerTouch
command simulates a specified touch type event on the supplied DOM element. Use this command when Selenium's click
does not register.
Parameter Name | Parameter Type | Description |
---|---|---|
selector | String | The CSS/Xpath selector to locate the element. |
type | String | The specified event type, for example click in the enabled JSON Wire Protocols. |
callback | Function | optional A function to call after the current command finishes execution. |
this.demoTest = function (browser) {
browser.triggerTouch('.myLink', 'click');
};
waitForAjaxCompleted(callback)
The waitForAjaxCompleted
command uses the waitForCondition
function to execute code within the client browser. The command checks the value of jQuery.active
to ensure that the number of active connections is 0.
Parameter Name | Parameter Type | Description |
---|---|---|
callback | Function | optional A function to call after the current command finishes execution. |
this.demoTest = function (browser) {
browser.waitForAjaxCompleted();
};
waitForAnimation(milliSeconds, callback)
The waitForAnimation
command suspends the test for the given time in milliseconds while it waits for animation to complete.
Parameter Name | Parameter Type | Description |
---|---|---|
milliSeconds | Number | The number of millliseconds to wait. |
callback | Function | optional A function to call after the current command finishes execution. |
this.demoTest = function (browser) {
browser.waitForAnimation();
};
waitForCondition(condition, milliSeconds, timeout, message, callback)
The waitForCondition
command receives a condition to check for, waits for a maximum time before timing out, and polls at a specified time interval. The condition returns either as a success or a timeout.
Parameter Name | Parameter Type | Description |
---|---|---|
condition | Function | The condition to check against. |
milliSeconds | Number | optional The number of milliseconds to poll before timeout. |
timeout | Number | optional The number of milliseconds between each poll. |
message | String | optional The message to output. |
callback | Function | optional A function to call after the current command finishes execution. |
this.demoTest = function (browser) {
return browser.waitForCondition('return $.active;', 8000, function(result) {
if (typeof callback === 'function') {
callback.call(browser, result);
}
});
};
waitForContextsReady(expectedContextsCount, milliseconds, timeout, messages, callback)
The waitForContextsReady
command receives a number of expected contexts to check for, waits for a maximum time before timing out, and polls at a specified time interval. Used with Appium when testing hybrid mobile web apps. See http://nightwatchjs.org/api/contexts.html
Parameter Name | Parameter Type | Description |
---|---|---|
expectedContextsCount | Number | The condition to check against. |
milliSeconds | Number | optional The number of milliseconds to poll before timeout. |
timeout | Number | optional The number of milliseconds between each poll. |
message | String | optional The message to output. |
callback | Function | optional A function to call after the current command finishes execution. |
this.demoTest = function (browser) {
browser.waitForContextsReady(3, 8000);
// At this point, it is safe to switch the context to either the NATIVE
// context or any of the WEBVIEW_* contexts.
};
waitForUrl(url, milliseconds, timeout, messages, callback)
The waitForUrl
command waits until the page URL is equal to the specified url
.
Parameter Name | Parameter Type | Description |
---|---|---|
url | String | Expected URL |
milliSeconds | Number | optional The number of milliseconds to poll before timeout. |
timeout | Number | optional The number of milliseconds between each poll. |
message | String | optional The message to output. |
callback | Function | optional A function to call after the current command finishes execution. |
this.demoTest = function (browser) {
browser.waitForUrl('http://www.google.ca/');
};
waitForUrlToContain(url, milliseconds, timeout, messages, callback)
The waitForUrlToContain
command waits until the page URL contains the specified url
.
Parameter Name | Parameter Type | Description |
---|---|---|
url | String | A partial URL to match against. |
milliSeconds | Number | optional The number of milliseconds to poll before timeout. |
timeout | Number | optional The number of milliseconds between each poll. |
message | String | optional The message to output. |
callback | Function | optional A function to call after the current command finishes execution. |
this.demoTest = function (browser) {
browser.waitForUrlToContain('google');
};
waitUntilMobified(milliSeconds, callback)
The waitUntilMobified
command will use the waitForCondition
command to poll for the Mobify or Adaptive object on the page to ensure that the adaptation is complete. Use this command to browse to a page or if the page reloads.
Parameter Name | Parameter Type | Description |
---|---|---|
milliSeconds | Number | optional The number of milliseconds to poll before timeout. |
If not specified, the default timeout is 10,000 milliseconds. callback | Function | optional A function to call after the current command finishes execution.
this.demoTest = function (browser) {
browser.waitUntilMobified();
};