$30 off During Our Annual Pro Sale. View Details »

Nightwatch.js Introduction

Nightwatch.js Introduction

Liang Bin Hsueh

November 18, 2016
Tweet

More Decks by Liang Bin Hsueh

Other Decks in Programming

Transcript

  1. View Slide

  2. End-to-End (E2E) testing
    End-to-end testing involves ensuring that that integrated components
    of an application function as expected. For example, a simplified end-
    to-end testing of an email application might involve:
    • Logging in to the application
    • Accessing the inbox
    • Opening and closing the mailbox
    • Composing, forwarding or replying to email
    • Checking the sent items
    • Logging out of the application

    View Slide

  3. Move Fast & Don't Break Things – Ankit Mehta, Google, 2014 GTAC

    View Slide

  4. Move Fast & Don't Break Things – Ankit Mehta, Google, 2014 GTAC

    View Slide

  5. ֩৺ྲྀఔ
    爛了了就會接到電話的

    View Slide

  6. Manually…
    IT WORKS™

    View Slide


  7. ⼯工程師的美德
    https://github.com/NARKOZ/hacker-scripts

    View Slide

  8. Nightwatch.js
    Browser automated testing done easy.

    View Slide

  9. View Slide

  10. ᐽՍ
    幫你把惡惡魔藏起來來,簡化世界

    View Slide

  11. Good Parts
    • Clear Syntax
    • Controls the Selenium standalone server for you
    • BrowserStacks / SauceLabs support
    • Page Objects
    • Global Objects
    • Customizable

    View Slide

  12. Good Syntax
    driver.get('http://www.google.com/ncr');
    driver.findElement(By.name('q')).sendKeys('webdriver');
    driver.findElement(By.name('btnG')).click();
    WebDriver

    View Slide

  13. Good Syntax
    Nightwatch
    client
    .url('http://www.google.com/ncr')
    .setValue('[name=q]', 'webdriver')
    .click('[name=btnG]')

    View Slide

  14. Page Object
    module.exports = {
    url: function() { return this.api.launchUrl; },
    elements: {
    account: { selector: 'input[name="account"]' },
    password: { selector: 'input[name="password"]' },
    submit: { selector: 'button[type="submit"]' }
    },
    commands: [commands]
    };
    page-objects/login.js

    View Slide

  15. Usage
    var loginPage = this.page.login();
    loginPage
    .navigate()
    .setValue('@account', account.email)
    .setValue('@password', account.password)
    .click('@submit')

    View Slide

  16. Global Objects
    const ACCOUNTS = {
    'USER': {
    email: '[email protected]',
    password: '…'
    },
    };
    module.exports = {
    LOAD_SPEED: 1000,
    ACCOUNTS: ACCOUNTS
    };

    View Slide

  17. Custom Command
    page-objects/changePassword.js
    const commands = {
    changePassword: function(password, confirmPassword) {
    this
    .navigate()
    .setValue('@password', password)
    .setValue('@confirmPassword', confirmPassword)
    .click('@submit');
    return this;
    }
    };

    View Slide

  18. Usage
    var changePasswordPage = client.page.changePassword();
    var newPassword = 'loremipsum';
    changePasswordPage
    .navigate()
    .wait()
    .changePassword(newPassword, newPassword);

    View Slide

  19. Drawbacks
    • Setup takes time http://nightwatchjs.org/getingstarted
    • 拿我的安裝包~
    • No promise support
    • Use not-so-well-documented perform command http://
    nightwatchjs.org/api/perform.html

    View Slide

  20. DEMO

    View Slide