Page 3 - Testing/E2E

Running Magento and Hyvä stores without reliable end-to-end tests means trusting pure luck at checkout, in product search, and with every deployment instead of solid confidence. This article covers Cypress fundamentals for Magento frontends from the ground up: installation, configuring baseUrl and environment variables for dev, staging, and production, a clean project structure, and your first working test against a real page.

Anyone testing React components that load data faces the same question: mock fetch or test against a real backend. MSW (Mock Service Worker) intercepts network requests at the protocol level, so components execute exactly the code they also run in production, while responses stay fully under control.

A test suite that formally passes with a 99 percent success rate can still hide massive problems, say if the same three tests need manual restarting every week due to genuine flakiness, or if the total runtime has quietly grown from five to forty-five minutes over months. Anyone looking exclusively at the binary green-red display of a single run misses exactly the trends that ultimately determine a test suite's actual usefulness and trustworthiness, which is why a thoughtful set of metrics beyond the pure pass-or-fail signal is necessary.

Integrating custom fields into the customer types, securing resolvers with token validation, exposing extension attributes correctly, and protecting sensitive data at the field level, all in one hands-on practical article.

Many teams rely almost entirely on slow end-to-end tests and manual click-through testing, because a unit test culture never took hold. This ice-cream-cone anti-pattern inverts the classic test pyramid and leads to sluggish CI pipelines, high flakiness, and late bug detection. This article shows how teams can recognize the pattern and find their way back to a fast, reliable test pyramid with a practical migration path.

A test that sometimes passes and sometimes fails is worse than no test at all. It erodes trust in the entire test suite, forces manual re-runs and hides real regressions behind noise. Flaky tests arise from specific root causes, and every single one of them can be fixed for good.

Testing discount and tax calculations with only a handful of hand-picked example values checks nothing but the cases you happened to think of while writing them. Property-based testing lets a library generate hundreds of random inputs, verify a general property such as never negative, automatically surface edge cases, and shrink every failure down to the smallest possible counterexample.

Test databases with a handful of hand-picked rows rarely cover the cases that actually occur in production. Generating seed data systematically instead of maintaining it by hand yields reproducible, referentially correct datasets that capture edge cases and realistic distributions alike.

Automated accessibility testing with axe-core covers only about 30 to 40 percent of all WCAG criteria, but those categories, things like color contrast, missing alt text, and ARIA errors, can be reliably integrated into any Cypress or Playwright pipeline. This article shows how to configure thresholds, block CI builds only on new violations, and catch typical Magento- and Hyvä-specific barriers early.

Mobile storefronts live on touch gestures: swiping through image galleries, tapping filter buttons, dragging off-canvas menus. Testing these interactions with simulated mouse clicks alone misses ghost clicks, blocked scroll directions, and hover menus that are simply unreachable on a touchscreen. This article shows how to reliably simulate real touch events in Cypress and Playwright.