What is cypress?

cypress.io

• a tool to test browser based applications
• developed and maintained by cypress.io - currently about 13 employees
• and... by the open source community
• Is a tool made by developers for developers

Why another tool?

Advantages of cypress

• no licence costs (MIT): open source
• great community (9000 stars, 78 contributors)
• extremely robust: no need for waits, scrollIntoView, check for visbility, existence...
• is close to the browser so it can do things like DOM API stubbing, which selenium can not do
• very fast test execution (in headless mode)
• easy to write tests for frontend developers

Advantages of cypress (2)

Great testrunner

Advantages of cypress (3)

• testrunner is awesome for finding selectors, debugging, time travelling or simply watching your tests run
• cypress is independent from any web frameworks -> works with every webapp
• can create screenshots or videos
• runs on ci

Advantages of cypress (4)

Stubbing network requests

                    
                        cy.server();
                        cy.route({
                            method: 'GET',
                            url: '/api/message/**',
                            status: 404,
                            response: {}
                        });
                        cy.get('#openMessage').click();
                        cy.get('#notFoundErrorToast').should('exist');

                        cy.server({enable: false});
                        cy.get('#openMessage').click();
                        cy.get('#notFoundErrorToast').should('not.exist');
                    
                

Advantages of cypress (5)

Easy to write tests, in JavaScript or TypeScript

                    
                        describe('the login', () => {
                            it('should work for a dummy user', () => {
                                cy.visit('myUrl');
                                cy.get('#uNameInput').type('dummy');
                                cy.get('#pwInput').type('dummyPw');
                                cy.get('#btnSubmit').click();
                                cy.get('#customerMenu').click();
                            });
                        });
                    
                

Usage of page object pattern

                    
                        it('should go through in german', () => {
                            const firstPage = app.start()
                                .validateInfotext()
                                .clickNext()
                                .validateRequiredValildationsWorking()
                                .fillRestOfForm();

                            const secondPage = firstPage.proceedToNextPage()
                                .clickNext()
                                .validateRequiredErrors()
                                .enterStreetAndNumber()
                                .enterEmail()
                                .enterPhoneNumber();
                        });
                    
                

Drawbacks / Trade-offs

Browser and CI support

• Currently only chromium based browsers are supported - others are in progress
• needs some packages to run in linux nodes
• there won't be a support for multiple tabs

What cypress is not designed for

• performance testing
• testing 3rd party sites that you do not control
• indexing the web -> crawling
• Testing non browser based apps

Selenium vs. Cypress

Daniel N: "Selenium by itself is pretty dumb - you need to write waits"

Advantages of Selenium

• TAF (using Selenium for web testing) is able to test non browser based apps
• Supports diffrent browsers (Internet Explorer, Chrome, Firefox, Opera, Safari, etc.)
• long history, well established, well known
• supports many different programming languages

important differences

• selenium operates outside of the browser with remote commands in JSON over http (webdriver protocol) -> delay
• cypress runs inside the browser -> has therefore access to the web app itself and can e.g. stub network requests

Live Demo