Modern Web Testing with Cypress.io

Traitanit Huangsri (Nott)
LINE Thailand Quality Management Team Software Engineer in Test
https://linedevday.linecorp.com/jp/2019/sessions/S2-7

Transcript

1. 2019 DevDay
   Modern Web Testing With
   Cypress.Io
   > Traitanit Huangsri (Nott)
   > LINE Thailand Quality Management Team Software
   Engineer in Test
   

   View Slide

2. About Me
   Software Engineer In Test
   > Founder of Cypress.io Thailand Community
   > medium.com/@nottyo
   LINE Thailand
   

   View Slide

3. Web Application Testing
   > Open browser
   > Navigate to your web url
   > Find an element like an user
   > See if it works !
   Unit
   Integration
   E2E
   

   View Slide

4. Web Testing Framework
   Selenium + Dependencies
   Additional Libraries
   +
   

   View Slide

5. Problems
   

   View Slide

6. Introducing Cypress
   Selenium + Dependencies
   Additional Libraries
   +
   Introducing Cypress.io
   •All-in-one testing framework
   •Fast & Reliable
   •Not a Selenium Wrapper!
   

   View Slide

7. Why Developers Should Consider Cypress
   Fast, Flaky Free, Works on any front-end framework "
   Documentation #
   GUI Test Runner, Test Recordings, Time Travel $
   Developer Friendly (Javascript / Typescript) %
   

   View Slide

8. Writing Test With Cypress
   describe('Automatic Wait', () => {
   before(() => {
   cy.visit('http://localhost:8080')
   })
   it('cypress automatic wait example', () => {
   cy.get('button[data-at="clickToAlert"]').click()
   

   cy.get('p[data-at="element"]').should('be.visible')
   .and('have.text', 'Hello World!')
   })
   Find View View Action
   View Assertion
   

   View Slide

9. Automatic Wait
   Ƃ
   

   View Slide

10. Time Travel
    With Cypress UI Test Runner
    Ƃ
    

    View Slide

11. Real Time Reloads
    Ƃ
    

    View Slide

12. Network Traffic Control
    Ƃ
    Mock Data
    

    View Slide

13. Dashboard Service
    Ƃ
    

    View Slide

14. And Many More Features
    Debuggability
    Screenshots
    Video Recorded on Failure
    Parallelization
    Network Request
    Plugins
    Multiple Environment Configuration
    Custom Assertion
    Commands
    Typescript
    Continuous Integration
    Reporters
    Code Coverage
    Visual Testing
    Custom Test Runner
    Aliasing
    Mobile Viewport jQuery Bundled
    MomentJS Bundled
    Blob Utils
    Stub & Spy Objects
    Fixtures
    Testing React Redux Store Testing Vuex Store LocalStorage / Session Storage Injection
    Cookie API Testing
    Unit Testing
    Automatic Retry Tests
    

    View Slide

15. Documentation
    https://docs.cypress.io
    Ƃ
    

    View Slide

16. Key Takeaways
    > All in one End to End Javascript Testing Framework
    > Windows / macOS / Linux
    > npm install -D cypress
    > MIT / OSS github.com/cypress-io/cypress
    > Written in Javascript / Typescript
    > Google Chrome / ElectronJS
    

    View Slide

17. Thank You
    

    View Slide