Cypress forMagento 2Reacticon 4October 11th, 2021

Peter [email protected] @ elgentos (Groningen, NL)

What is Cypress?- Testing framework- Javascript-based- Lives right in your browser-Knows about the DOMCan hook into just about everythingRetry-abilityAutomatic waiting on XHR’s, animations, etc - no more weird timing issues- This all means; it’s fast!- MFTF is a pain to work with

What kind of testing can Cypress do?-End to end testing; frontend & backendIntegration testing; test how your code functions with third party codeUnit testing; test a very specific part of your code in isolationLoad testing; testing how your store handles a large influx of usersWe’ll focus on the first two and let’s write some code.

Cypress installation & first test

CommandsMost often used;

Parent / child commandsParent commandsChild commandsChild commands are chained off parent commands, like this;

Configure baseUrlAdjust test, which will now always succeed;

Let’s cy.get() an element

Asserting equalityThis tests whether the content of the element exactly matches the string. But HTML is messy!Another option is to trim the whitespace and then assert equality;Looks good, right?

Cypress yields instead of returnsLooks good, but it isn’t. Cypress is asynchronous, so it yields. We’ll need a callback;Looks familiar? Cypress comes with jQuery by default. You can even access it directlythrough Cypress.

Wait what, video?!Cypress automatically records videos and stores them in cypress/videos.But, there’s realtime too!

Cypress Test Runner

Cypress Test Runner

Selector Playground

Time TravelLet’s navigate somewhere;

Time TravelAnd travel through time by hovering;

Cypress StudioSome configuration:

Cypress Studio

Cypress Studio- Terrible test code- Useful to quickly generate a test- Always abstract the extremely specific selectors

Cypress DashboardConfigure Cypress through cypress.jsonSet an environment variable with your dashboard key in your CI

Cypress Dashboard

Cypress Dashboard

Cypress Dashboard

Cypress in an agency environmentThree ways how we use Cypress;- Generic testing suite- Specific regression tests- Scheduled tests on production

Usage 1 - Generic testing suite-Main goal; gain confidence nothing broke!You know immediately what brokeExtremely useful after upgradesCopy into project & adjust where necessaryPre-deploy and post-deploy

Usage 1 - Generic testing suiteTests the following areas in Magento:-HomepageProduct pageCategory pageCartCheckoutMy AccountContact formNewsletter subscription

Usage 1 - Generic testing suite - example test

Usage 1 - Generic testing suite - example test

Usage 2 - Specific regression tests- Main goal: customer never sees a bug twice- Bugfixing-Step 1; write a Cypress test to reproduce errorStep 2; fix bugStep 3; invert assertion in test- Company-wide policy- Massive time-saver

Usage 2 - Specific regression tests - write reproduction test

Usage 2 - Specific regression tests - invert test

Usage 3 - Scheduled tests on production-Main goal: gather information / notificationsWe use Gitlab CI scheduled pipelines & Slack notificationsMake 100% sure these are read-only testsAdd a user-agent to identify the tests to exclude them in Google Analytics

Usage 3 - Scheduled tests - example testTests whether certain categories still contain at least 10 products

Magento-specific tricks- Tag tests in groups for local, review & production- We are experimenting with a Magento extension that makes fixtures like testableproduct URLs configurable- Test the UI once, then use the REST API to speed up tests

Magento 2 REST API support class

Accompanying test

Visual testing- works in perfect tandem with Cypress- SaaS offering with a dashboard- Easy to install-- Easy to use

Visual testing- Visual diffs- Configurable notificationthresholdSome alternatives to Percy:- Applitools Eyes- Micoo (open source)

Plugins- The previously shown Percy package is actually a Cypress plugin- There are over a 100 plugins available- Some useful plugins I saurcy-viewtag tests to group them into local, review, productionadd file upload supportadd drag & drop support{tab}, like {enter}extends base commands and adds a fewto test outgoing mailrun specific tests against different viewports

Thanks for watching!Stay tuned:- We will open-source the generic testing suitefor Magento 2 - sponsored by elgentos- I am creating a video course on Cypress testing fore-commerce - planning to launch Q1 2022

- cypress-file-upload add file upload support - cypress-drag-drop add drag & drop support - cypress-plugin-tab {tab}, like {enter} - cypress-commands extends base commands and adds a few - cypress-mailosaur to test outgoing mail - cy-view run specific tests against different viewports Plugins