REFACTR.Tech Cypress Workshop Intro

Transcript

1. Next-Generation Web Application Testing Amir Rustamzadeh @amirrustam REFACTR.TECH 2019
2. Sr. Engineer @amirrustam Amir Rustamzadeh amir@cypress.io
3. @amirrustam ! E2E testing? I spend hours chasing flaky tests! " # Too expensive for project budget. In our last project, E2E tests slowed down development.
4. E2E Integration Unit Visit The Testing Pyramid @amirrustam
5. E2E Integration Unit Visit The Testing Pyramid Easy, developers really like to write these. @amirrustam
6. E2E Integration Unit Visit The Testing Pyramid Easy, developers really like to write these. More Difficult, costly, slower… Often completely ignored @amirrustam
7. E2E Integration Unit Visit The Testing Pyramid Best for users & business @amirrustam
8. Don’t let your users be your first E2E testers. @amirrustam
9. Renaissance of the Web 2005 2006 2014 2013 @amirrustam 2010
10. Renaissance of the Web 2005 2006 2014 2013 More complexity moved from backend to frontend. @amirrustam 2010
11. Stateless Stateful @amirrustam
12. 2005 2006 2014 2013 Renaissance of the Web + Testing Automation 2004 @amirrustam 2010
13. ✋ JSDOM or DOM Emulation JSDOM is not a real browser. Your users don’t run your app with JSDOM. One of the primary reasons for E2E is to simulate real user actions. @amirrustam
14. Fast, easy and reliable testing for anything that runs in a browser. Free. Open Source. MIT License @amirrustam
15. $ npm install -D cypress ☝ All-in-one tool You get everything you need ❤ Familiar tools underneath Mocha, Chia, Sinon @amirrustam
16. @amirrustam
17. @amirrustam
18. @amirrustam Let’s see it in action…. https://github.com/cypress-io/cypress-example-todomvc
19. * Fast Test Runs @amirrustam
20. Cypress Architecture Cypress Test Runner Your App @amirrustam Browser
21. ⚡ Native-access to the DOM and your app. @amirrustam
22. @amirrustam Username Password Login You can mutate state programmatically. There is no need to always manipulate the UI to create the desired state.
23. ⚙ Component Testing cypress-react-unit-testing vue angular angularjs hyper-app svelte cycle https://github.com/bahmutov/cypress-vue-unit-test#test-adapters-for-other-frameworks @amirrustam
24. Component Mounting Cypress Test Runner My Component My Component @amirrustam Browser
25. @amirrustam import mount from 'cypress-vue-unit-test' import MyComponent from './app/components/MyComponent.vue' describe('My Component', () => { beforeEach(mount(MyComponent)) it('loads', () => { cy.get('button').should('be.visible') }) })
26. ⏳ Automatic Waiting Demo @amirrustam
27. 1 Easy stubbing, mocking, and spying. @amirrustam
28. @amirrustam it('starts with zero items', () => { // start Cypress network server // spy on route `GET /todos` // THEN visit the page cy.server() cy.route('GET', '/todos').as('todos') cy.visit('/') cy .wait('@todos') // wait for `GET /todos` response // inspect the server's response .its('response.body') .should('have.length', 0) // then check the DOM cy.get('li.todo').should('have.length', 0) })
29. @amirrustam it('posts new item to the server', () => { cy.server() cy.route('POST', '/todos').as('new-item') cy.visit('/') cy.get(‘.new-todo').type('buy cookies{enter}') cy.wait('@new-item').its('request.body').should('have.contain', { title: 'buy cookies', completed: false }) })
30. @amirrustam it('starts with zero items (stubbed response)', () => { // start Cypress network server // spy on route `GET /todos` // THEN visit the page cy.server() cy.route('GET', '/todos', []).as('todos') cy.visit('/') cy .wait('@todos') // wait for `GET /todos` response // inspect the server's response .its('response.body') .should('have.length', 0) // then check the DOM cy.get('li.todo').should('have.length', 0) })
31. @amirrustam it('starts with zero items (fixture)', () => { // start Cypress network server // stub route `GET /todos`, return data from fixture file // THEN visit the page cy.server() cy.route('GET', '/todos', ‘fixture:sample-todos').as('todos') cy.visit('/') cy .wait('@todos') // wait for `GET /todos` response // inspect the server's response .its('response.body') .should('have.length', 0) // then check the DOM cy.get('li.todo').should('have.length', 0) })
32. Flake-free, consistent, and reliable. @amirrustam
33. @amirrustam How are commands executed? cy.get('.todo-list li’).should(‘not.exist') cy.get(‘.main’).should('not.exist') cy.get('.footer').should('not.exist') 1 2 3 4 5 6
34. Debuggability @amirrustam
35. @amirrustam
36. Cypress Architecture Cypress Test Runner Your App @amirrustam ⚙ Cypress Node Backend Browser
37. @amirrustam Browser Node Backend cy.exec(…) Execute system commands outside of the scope of Cypress. ✅ Seed a database ✅ Running build scripts ✅ Start and kill processes
38. @amirrustam Browser Node Backend cy.exec(…) cy.exec('rake db:seed').its('code').should('eq', 0) cy.exec('npm run my-script’) .its(‘stdout') .should('contain', 'Done running the script')
39. @amirrustam Browser Node Backend cy.task(…) // in test describe('e2e', () => { beforeEach(() => { cy.task('defaults:db') cy.visit('/') }) it('displays article values', () => { cy.get('.article-list') .should('have.length', 10) }) })
40. @amirrustam Browser Node Backend cy.task(…) // in plugins/index.js file // we require some code in our app that // is responsible for seeding our database const db = require('../../server/src/db') module.exports = (on, config) => { on('task', { 'defaults:db': () => { return db.seed('defaults') } }) }
41. 5 cypress open Great for everyday development workflow Cypress + Editor Side-by-Side TDD Nirvana cypress run Testing in CI/CD Pipeline Headless More efficient for running all your tests @amirrustam
42. 5 cypress open Great for everyday development workflow Cypress + Editor Side-by-Side TDD Nirvana w/ Realtime Reloading cypress run --record Record to Cypress Dashboard @amirrustam
43. Dashboard @amirrustam
44. cypress run --record --parallel Parallelization Now available in Cypress 3.1 @amirrustam
45. cypress run --parallel cypress run --parallel cypress run --parallel Your CI Machines 3x parallelism Ready for work signup.spec.js login.spec.js widget.spec.js @amirrustam
46. Previous Spec Test Runs Spec Test Duration History Test Duration (seconds) The Future Automatic Load Balancing of Test Specs Duration Forecast @amirrustam
47. Automatic Load Balancing of Test Specs login.spec.js signup.spec.js widget.spec.js @amirrustam
48. @amirrustam cypress-example-kitchensink
49. @amirrustam cypress-dashboard 83%
50. @amirrustam Parallelization Tips Do not write all tests in one file. Break them up so they can be load balanced on CI machines. Do not write tests that are dependent on each other. Tests should pass in isolation.
51. Cypress Parallelization Easily optimize your CI usage You save a lot of ⏳ time and money @amirrustam
52. cypress run --group frontend Test Run Grouping Now available in Cypress 3.1
53. @amirrustam cypress-example-kitchensink
54. Documentation docs.cypress.io
55. Best Practices docs.cypress.io @amirrustam
56. Roadmap docs.cypress.io @amirrustam
57. @amirrustam Mobile Desktop Cross Browser Support
58. @amirrustam Test Retries ✅ 999 Tests Pass ❌ 1 Test Fails Might just be a CI mishap
59. docs.cypress.io/examples/examples/tutorials.html Tutorial Videos
60. Testing Workshop docs.cypress.io/examples/examples/workshop.html
61. We are trying to drastically improve the status quo of testing on the web. @amirrustam
62. Thank You npm install -D cypress Free. Open Source. MIT License Follow @amirrustam for link to slides.