Modern Web Testing with Cypress.io

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

Web Testing Framework Selenium + Dependencies Additional Libraries +

Slide 5

Slide 5 text

Problems

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

Automatic Wait Ƃ

Slide 10

Slide 10 text

Time Travel With Cypress UI Test Runner Ƃ

Slide 11

Slide 11 text

Real Time Reloads Ƃ

Slide 12

Slide 12 text

Network Traffic Control Ƃ Mock Data

Slide 13

Slide 13 text

Dashboard Service Ƃ

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

Documentation https://docs.cypress.io Ƃ

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

Thank You