Nightwatch.js Introduction

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: 'god@heaven.org',
    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