Test with Nightwatch.js

NHỮNG ĐẶC ĐIỂM CHÍNH

Clean syntax:

- Do được viết bởi Javascript (Node.js) và CSS hay XPath selectors nên cú pháp đơn giản nhưng mạnh mẽ cho phép bạn test một cách nhanh chóng.

Built-in test runner:

- Built-in command-line giúp bạn có thể chạy test tuần tự hoặc song song, theo nhóm, thẻ hoặc duy nhất. Grunt cũng được hỗ trợ Built-in.

Selenium server:

- Máy chủ Selenium độc tự động trong một quá trình con riêng biệt; có thể bị vô hiệu hóa nếu Selenium chạy trên máy chủ khác.

Cloud services support:

- Làm việc với các nhà cung cấp thử nghiệm điện toán đám mây, như SauceLabs và BrowserStack.

CSS & Xpath support:

- CSS hay XPath selectors có thể được sử dụng để xác định vị trí và xác minh các yếu tố trên trang web hoặc thực hiện các lệnh.

Easy to extend:

- Lệnh linh hoạt và assertion framework làm cho nó dễ dàng mở rộng để thực hiện các lệnh ứng dụng cụ thể của bạn.

Continous integration support:

- JUnit XML được xây dựng bên trong nên bạn có thể tích hợp các test trong quá trình xây dựng của bạn với systems như TeamCity, Jenkins, Hudson, vv

CÁCH HOẠT ĐỘNG

Nightwatch hoạt động bằng cách gửi yêu cầu HTTP đến máy chủ Selenium với các thông số đúng và giải thích các phản ứng. Các giao thức API tĩnh được xác định bởi Selenium JsonWireProtocol 

Nightwatch cần gửi ít nhất 2 yêu cầu đến máy chủ Selenium để thực hiện một lệnh hoặc assetion, đầu tiên là yêu cầu để xác định vị trí một yếu tố cho một chọn CSS (hoặc biểu thức XPath) và tiếp theo để thực hiện các lệnh thực tế / khẳng định trên các yếu tố nhất định.

CÀI ĐẶT

trước tiên bạn cần cài đặt node.js tại trang chủ của node.js

Sau đó chạy lệnh để cài nightwatch.js 

$ npm install nightwatch
Bạn chọn trình duyệt mình muốn test và cài đặt selenium vào trình duyệt.

CẤU HÌNH

Bạn cần tạo một thư mục gốc nightwatch.json với config

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

  "selenium"  :  { 
    "start_process"  :  false , 
    "server_path"  :  "" , 
    "log_path"  :  "" , 
    "host"  :  "127.0.0.1" , 
    "port"  :  4444 , 
    "cli_args"  :  { 
      "webdriver.chrome.driver"  :  "" , 
      "webdriver.ie.driver"  :  "" 
    } 
  } ,

  "test_settings"  :  { 
    "default"  :  { 
      "launch_url"  :  "http://localhost" , 
      "selenium_port"   :  4444 , 
      "selenium_host"   :  "localhost" , 
      "silent" :  true , 
      "screenshots"  :  { 
        "enabled"  :  false , 
        "path"  :  "" 
      } , 
      "desiredCapabilities" :  { 
        "browserName" :  "firefox" , 
        "javascriptEnabled" :  true , 
        "acceptSslCerts" :  true 
      } 
    } ,

    "chrome"  :  { 
      "desiredCapabilities" :  { 
        "browserName" :  "chrome" , 
        "javascriptEnabled" :  true , 
        "acceptSslCerts" :  true 
      } 
    } 
  } 
}

SỬ DỤNG NIGHTWATCH

Test với CSS selector

Bạn cần xác định vị trí test bằng CSS selector, để đơn giản chúng ta sẽ thực hành test với trang google.com

module.exports = {
  'Demo test Google' : function (browser) {
    browser
      .url('http://www.google.com')
      .waitForElementVisible('body', 1000)
      .setValue('input[type=text]', 'nightwatch')
      .waitForElementVisible('button[name=btnG]', 1000)
      .click('button[name=btnG]')
      .pause(1000)
      .assert.containsText('#main', 'Night Watch')
      .end();
  }
};

Khi muốn kết thúc bạn gọi phương thức end(). Một test cũng có thể gồm nhiều bước nếu cần:

module.exports = {
  'step one' : function (browser) {
    browser
      .url('http://www.google.com')
      .waitForElementVisible('body', 1000)
      .setValue('input[type=text]', 'nightwatch')
      .waitForElementVisible('button[name=btnG]', 1000)
  },

  'step two' : function (browser) {
    browser
      .click('button[name=btnG]')
      .pause(1000)
      .assert.containsText('#main', 'Night Watch')
      .end();
  }
};

Test với xPath

Để chuyển sang xpath thay vì Selectors css như trên, trong test gọi phương thứcuseXpath (), như đã thấy Để chuyển về CSS, gọiuseCss ().

Để luôn sử dụng xPath bạn cần default "use_xpath": true

this.demoTestGoogle = function (browser) {
  browser
    .useXpath() // every selector now must be xpath
    .click("//tr[@data-recordid]/span[text()='Search Text']")
    .useCss() // we're back to CSS now
    .setValue('input[type=text]', 'nightwatch')
};

Sau đây tôi làm một ví dụ đơn giản với form login 

module.exports = {
  'Login Demo': function( _browser ) {
    _browser
    .url('localhost/nightwatch/login')
    .waitForElementVisible( 'body', 1000 )
    .verify.visible('#username')
    .verify.visible('#password')
    .verify.value( 'input[type=submit]', 'Log In' )
    .verify.elementNotPresent('.error')
  }
}

Qua bài này hy vọng các bạn sẽ hiểu cơ bản về nightwatch.js.Các bạn muốn tìm hiều sâu hơn thì vào trang http://nightwatchjs.org/.