Nightwatch tips and tricks

section-commands.js

/* eslint-disable no-console */

const CHECK = "CHECK";
const WHEN = "WHEN";
const THEN = "THEN";
const DEFAULT_INDENT = "  ";
const DEFAULT_STEP_PAUSE = 50;

const DEFAULT_LOG_VALUE_MSG_FORMATTER_FN = (selector, result) =>
  `${DEFAULT_INDENT}${selector} value is "${result.value}"
  ${DEFAULT_INDENT}${DEFAULT_INDENT}Details: ${JSON.stringify(result)}`;

const defaultTestProgressMsgFormatter = (whenOrThen, msg) =>
  `${whenOrThen}: ${msg}`;

export const formCommands = {
  /* See https://github.com/nightwatchjs/nightwatch/issues/1132 */
  betterClearValue(selector) {
    const { RIGHT_ARROW, BACK_SPACE } = this.api.Keys;
    this.getValue(selector, result => {
      const chars = result.value.split("");
      // Make sure we are at the end of the input
      chars.forEach(() => this.setValue(selector, RIGHT_ARROW));
      // Delete all the existing characters
      chars.forEach(() => this.setValue(selector, BACK_SPACE));
    });
    return this;
  },
  clearAndSetValue(selector, newValue, stepPause = DEFAULT_STEP_PAUSE) {
    this.log(`Calling clearAndSetValue on ${selector}. Setting value to ${newValue}`);
    this.log(`Clicking selector ${selector}`);
    this.click(selector);
    this.logValue(selector);
    this.api.pause(stepPause);

    this.log(`Clearing value on ${selector}`);
    this.betterClearValue(selector);
    this.logValue(selector);
    this.api.pause(stepPause);
    this.assert.value(selector, "");

    this.log(`Setting value on ${selector} to ${newValue}`);
    this.setValue(selector, newValue);
    this.logValue(selector);
    this.api.pause(stepPause);

    this.then(`expect new value of ${selector} to be ${newValue} (clearAndSetValue)`);
    this.assert.value(selector, newValue);
    this.logValue(selector);

    //Note: assert.value(...)
    return this;
  },
  /**
   * Log the value of the input at the given selector, formatting with logMsgFormatterFn
   * @param {string} selector - Selector to find in document
   * @param {function} logMsgFormatterFn - Takes params of (selector, result)
   * @return {formCommands} chaining return
   */
  logValue(selector, logMsgFormatterFn = DEFAULT_LOG_VALUE_MSG_FORMATTER_FN) {
    this.getValue(selector, result =>
      console.log(logMsgFormatterFn(selector, result)));
    return this;
  },
  log(msg) {
    this.api.perform(() => console.log(`${DEFAULT_INDENT}${msg}`));
  },
  checking(msg) {
    this.api.perform(() => console.log(defaultTestProgressMsgFormatter(CHECK, msg)));
  },
  when(msg) {
    this.api.perform(() => console.log(defaultTestProgressMsgFormatter(WHEN, msg)));
  },
  then(msg) {
    this.api.perform(() => console.log(defaultTestProgressMsgFormatter(THEN, msg)));
  }
};