Cypress: painless web testing

• Front end developer at SaM Solutions
• Working with Angular stack
• Want you to try Cypress tomorrow

• Why should(n't) we test?
• E2E testing tools
• Experience with Cypress
• Downsides

                    npm install cypress --save-dev
                    yarn add cypress --dev
                

                    npm run start
                    npm run cypress:open
                    yarn run cypress:open
                    npx cypress open
                

• Behind Cypress is a Node.js server process
• Cypress is executed in the same run loop as your application.
• Cypress has native access to every single object
• Cypress takes snapshots of your application
• Stubbing network requests
• Spying & Stubbing on DOM API or any JS object

• .blur() - Make a focused DOM element blur.
• .focus() - Focus on a DOM element.
• .viewport(320,240) - Simulate a viewport
• .check() - Check checkbox(es) or radio(s).
• .screenshot() - Make a screenshot of current viewport.
• .dblclick() - Double-click a DOM element.

• Plugins
• Dashboard service
• Screenshots & video
• Continious integration

• Chains of commands
• Command queue
• Timeouts

                    npm run build:prod
                    http-server dist/app -c-1 -p 4200 --silent
                    npx cypress verify
                    npx cypress run
                

• Can't store element in a variable
• Dynamic stubbing of network requests is not allowed
• alert, confirm, file uploading
• Overlay elements

• Cypress is not a general purpose automation tool
• Cross-browser support
• Commands run inside of a browser
• There will never be support for multiple browser tabs
• You cannot use Cypress to drive two browsers at the same time
• Each test is bound to a single origin

• File uploads & downloads (there is a plugin)
• lack of commands like .tab() .hover() command
• iframe support is limited
• cy.route() for fetch (there is a workaround)
• Shadow DOM is not supported (there is a plugin)