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
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