Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

LINE DevDay 2019

November 21, 2019
Tweet

More Decks by LINE DevDay 2019

Other Decks in Technology

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. Introducing Cypress Selenium + Dependencies Additional Libraries + Introducing Cypress.io

    •All-in-one testing framework •Fast & Reliable •Not a Selenium Wrapper!
  5. 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) %
  6. 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
  7. 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
  8. 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