Nightwatch.js

Configuración

type ConfigType = {
  'src_folders': Array<string>,
  'output_folder': string,
  'custom_commands_path': Array<string>,
  'custom_assertions_path': Array<string>,
  'page_objects_path': Array<string>,
  'globals_path': string,
  'selenium': SeleniumConfigType,
  'test_settings': Object<string, TestSettingsType>,
}

type SeleniumConfigType = {
  'start_process': boolean,
  'server_path': string,
  'log_path': string,
  'host': string,
  'port': number,
  'cli_args': Object<string, string>,
};

type TestSettingsType = {
  'launch_url': string,
  'selenium_port': number,
  'selenium_host': string,
  'silent': boolean,
  'screenshots': {
    'enabled': boolean,
    'path': string
  },
  'desiredCapabilities': {
    'browserName': string
    'javascriptEnabled': boolean,
    'acceptSslCerts': boolean
  }
}

Nuestra configuración

{
  "src_folders" : ["tests"],
  "output_folder" : "reports",
  "custom_commands_path" : "",
  "custom_assertions_path" : "",
  "page_objects_path" : ["pages"],
  "globals_path" : "",

  "test_settings" : {
    "default" : {
      "launch_url" : "http://platzi-core:8000/",
      "selenium_host": "hub",
      "desiredCapabilities": {
        "browserName": "chrome"
      },
      "globals" : {
        "platzi" : {
          "domain": "http://platzi-core:8000/"
        },
        "otherGlobal": "some other value"
      }
    },
    "production" : {
      "launch_url" : "http://platzi.com/",
      "selenium_host": "hub",
      "desiredCapabilities": {
        "browserName": "chrome"
      },
      "globals" : {
        "platzi" : {
          "domain": "http://platzi.com/"
        },
        "otherGlobal": "some other value"
      }
    }
  }
}

Escribiendo un test

module.exports: Object<string, Function> = {
  '@tags': ['discussions', 'timeline'],
  'Send discussion': function sendDiscussion(browser: Object): void {
    browser
      .url('https://platzi.com/clases/reactjs/')
      .waitForElementVisible('body', 1000)
      .setValue(
        '.DiscussionsForm-textarea',
        'lorem ipsum dolor sit amet.'
      )
      .submitForm('.DiscussionsForm form')
      .pause(100)
      .end();
  },

  'Check created': function checkCreated(browser: Object): void {
    browser
      .expect.element('.Discussion:first-of-type').to.be.present;

    browser
      .expect.element('.DiscussionContent-text').text
      .to.be.equal('lorem ipsum dolor sit amet.')
      .end();
  },
};

before/after hooks

module.exports: Object<string, Function> = {
  before(browser: Object): void {
    console.log('Starting tests...');
  },
  beforeEach(browser: Object, done: ?Function): void {
    console.log('Preparing data for each test...');
    setTimeout(done, 500);
  },
  afterEach(browser: Object, done: ?Function): void {
    console.log('Cleaning test data...');
    setTimeout(done, 1000);
  },
  after(browser: Object): void {
    console.log('Ending tests...');
  },

  'My test': function myTest(browser: Object): void {
    // my test
  }
};

Pages

type PageType = {
  url: string,
  elements: Object<string, string> | Object<string, Object>,
  sections: Object<string, Object>,
  commands: Array<Object<string, Function>>,
};

Ejemplo

const homeCommands = {
  goToLogin: function goToLogin() {
    return this.api.click('a.Header-login.btn-Green');
  }
}

module.exports = {
  url: 'http://platzi.com/',
  elements: {
    header: '#header',
  },
  sections: {
    careerList: {
      selector: '#course_list',
      elements: {
        career: '.Career',
      },
    },
  },
  commands: [homeCommands],
};

Uso

module.exports = {
  '@disabled': true,
  'First step': function firstStep(browser) {
    const home = browser.page.home();

    home.expect.element('@header').to.be.present();

    home.expect.section('@careerList').to.be.present();

    home.section.careerList
      .expect.element('@career').to.be.present();

    home.goToLogin();
  },
};

API

Expects

Asserts

Commands

function myTest(browser) {
  browser.expect.element('selector')...
}
function myTest(browser) {
  browser.assert...
  browser.verify...
}
function myTest(browser) {
  browser.commandName();
}

Expects

  • language chains (to, be, been, is, that, which, and, has, have, with, at, does, of)
  • equal, contains, match
  • not
  • before/after
  • a/an
  • attribute
  • css
  • enabled
  • present
  • selected
  • text
  • value
  • visible

Ejemplo expects

function myTest(browser) {
  const $header = browser.expect.element('#header');
  
  $header.to.be.present.and.to.be.visible
  $header.text.to.contains('Platzi')
  $header.css.to.not.have('display')
  $header.to.have.an.attribute('class')
    .which.contains('Header');

  browser.end();
}

Asserts

  • attributeContains/attributeEquals
  • containsText
  • cssClassPresent/cssClassNotPresent
  • cssProperty
  • elementPresent/elementNotPresent
  • hidden/visible
  • title
  • urlContains/urlEquals
  • value/valueContains

Ejemplo

function myTest(browser) {
  browser.assert.attributeContains('#someElement', 'href', 'google.com');
  browser.assert.attributeEquals("body", "data-attr", "some value");

  browser.assert.containsText("#main", "The Night Watch");

  browser.assert.cssClassPresent("#main", "container");
  browser.assert.cssClassNotPresent("#main", "container");

  browser.assert.cssProperty("#main", "display", "block");

  browser.assert.elementPresent("#main");
  browser.assert.elementNotPresent(".should_not_exist");

  browser.assert.hidden(".should_not_be_visible");
  browser.assert.visible(".should_be_visible");

  browser.assert.value("form.login input[type=text]", "username");
  browser.assert.valueContains("form.login input[type=text]", "username");

  browser.assert.title("Nightwatch.js");

  browser.assert.urlContains('google');
  browser.assert.urlEquals('http://www.google.com');
}

Correr tests

# correr todos los tests
nightwatch

# correr uno
nightwatch tests/file1.js

# correr uno y una carpeta
nightwatch tests/file1.js tests/folder/

# correr grupo
nightwatch --group groupName

# saltarse grupo
nightwatch --skipgroup groupName

# correr tag (o tags)
nightwatch --tag tagName --tag otherTagName

# saltarse tag
nightwatch --skiptag tagName,otherTagName

Nightwatch.js

By Sergio Xalambrí

Nightwatch.js

  • 1,851