Modern Web Testing with Cypress.io

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

Be4518b119b8eb017625e0ead20f8fe7?s=128

LINE DevDay 2019

November 21, 2019
Tweet

Transcript

  1. 2019 DevDay Modern Web Testing With Cypress.Io > Traitanit Huangsri

    (Nott) > LINE Thailand Quality Management Team Software Engineer in Test
  2. About Me Software Engineer In Test > Founder of Cypress.io

    Thailand Community > medium.com/@nottyo LINE Thailand
  3. Web Application Testing > Open browser > Navigate to your

    web url > Find an element like an user > See if it works ! Unit Integration E2E
  4. Web Testing Framework Selenium + Dependencies Additional Libraries +

  5. Problems

  6. Introducing Cypress Selenium + Dependencies Additional Libraries + Introducing Cypress.io

    •All-in-one testing framework •Fast & Reliable •Not a Selenium Wrapper!
  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) %
  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
  9. Automatic Wait Ƃ

  10. Time Travel With Cypress UI Test Runner Ƃ

  11. Real Time Reloads Ƃ

  12. Network Traffic Control Ƃ Mock Data

  13. Dashboard Service Ƃ

  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
  15. Documentation https://docs.cypress.io Ƃ

  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
  17. Thank You