Forem: Lasitha Wijenayake

Simplify Your Cypress Intercept Assertions: cypress-intercept-search

Lasitha Wijenayake — Sat, 10 May 2025 18:38:46 +0000

When writing end-to-end tests with Cypress, you must often validate that your application sends or receives the correct data. Cypress’s cy.intercept() gives you robust control over network requests. However, digging through nested bodies, headers, and query parameters to find the exact key/value you care about can become repetitive and error-prone.

That’s why I created cypress-intercept-search, a small plugin that lets you recursively search through every part of one or more intercepted requests or responses for a given key and (optionally) a matching value. Then, wrap the results in a chainable Cypress command for easy assertions.

## Why Built cypress-intercept-search
When you’re writing end-to-end tests in Cypress, it’s all too easy to end up with the same boilerplate over and over:

cy.wait('@savePlay').then((i) => {
  const { players } = i.request.body;
  expect(players).to.exist;
  Object.entries(players).forEach(([role, p]) => {
    expect(p.id).to.not.equal('00000000-0000-0000-0000-000000000000');
  });
});

Consider a scenario where your JSON structure contains multiple nested levels or headers, query parameters, request bodies, and response bodies that must be examined simultaneously. Copying and pasting recursive helpers across specifications can rapidly become a significant maintenance challenge.

## Key Advantages

Zero Boilerplate, Maximum Clarity Drop in a single call:

cy.wait('@savePlay')
  .search('playerID', '00000000-0000-0000-0000-000000000000')
  .should('have.length', 1);

No more manual tree-walking. Tests read like plain English: “wait, search for this key/value, assert I found one.”

Chainable & Composable Because .search() wraps its results in a Cypress chainable, you can combine it with any built-in assertion:

cy.wait('@echo')
  .search('foo')             // just look for key presence
  .should('not.be.empty')    // assert at least one hit
  .then((matches) => {
    // inspect where you found it
    expect(matches[0].path.join('.')).to.equal('nested.level1.level2.foo');
  });

Deep & Wide Coverage Under the hood, it scans:

request.query
request.headers
request.body
response.headers
response.body

Your tests no longer need five separate helpers — one command does it all.

Rich Cypress-Log Integration Every .search() call produces a custom entry in the Cypress Command Log, complete with:

the key/value you searched
number of matches
which part of the HTTP cycle they came from
exact property paths
That means you get full visibility without extra cy.log() calls.

Repository & Links

npm package: cypress-intercept-search
GitHub source: lasithdilshan20/cypress-intercept-search

## Contributing & Roadmap
I welcome issues and PRs! Here are a few ideas on the horizon:

Sugar methods like .shouldExist() / .shouldNotExist()
Value‐range matching (e.g. regex or partial matches)
Performance tuning for very large payloads
Type‐safe search with generic key/value types

Feel free to open an issue or submit a pull request on GitHub.

My Experience with Cypress’s UI Coverage: Transforming Test Coverage

Lasitha Wijenayake — Wed, 12 Feb 2025 09:23:13 +0000

This is Cypress's latest feature and will be incredibly helpful for my automation testing. UI Coverage enhances efficiency and ensures comprehensive application testing by providing a user-centric approach to test coverage.

In the fast-paced world of software development, ensuring comprehensive test coverage is crucial for delivering high-quality applications. Traditional code coverage tools often fall short, focusing solely on code execution without considering the user experience. Cypress’s UI Coverage addresses this gap by providing a visual, user-centric approach to test coverage, enhancing efficiency and application quality.

Understanding UI Coverage

Unlike traditional code coverage, which tracks the percentage of code executed during tests, UI Coverage focuses on the elements and interactions that users engage with. It offers a visual map of your application’s test coverage, highlighting which interactive elements have been tested and identifying untested areas. This user-centric perspective thoroughly examines critical user flows, aligning testing efforts with real-world usage.

My Experience with Cypress’s UI Coverage

As a QA engineer, I’ve always strived to deliver the highest quality applications. However, one of the challenges I often faced was ensuring comprehensive coverage of critical user flows. Traditional code coverage tools provided numbers but fell short regarding the real-world user perspective. When I started using Cypress’s UI Coverage, it felt like a game-changer for my testing workflow.

One specific instance stands out. I was working on an application with complex user interactions across multiple pages. Despite thorough testing, I noticed bugs occasionally slipping through because certain interactive elements weren’t being tested. With UI Coverage, I quickly visualized the gaps in our test suite and identified untested elements. This allowed me to refine my tests and ensure those critical flows were fully covered. The visual insights made communicating these findings to my team easy, fostering better collaboration and saving us valuable time.

When I first began using Cypress’s UI Coverage, I didn’t realize how much it would change my testing approach. There was one project where UI bugs had been a recurring issue some user interface elements weren’t being tested consistently, leading to occasional oversight. This tool helped me pinpoint those gaps immediately.

For example, I once missed testing a critical dropdown menu because it wasn’t part of the regular automation flow. UI Coverage visually highlighted this oversight, ensuring I never missed testing an important UI element again. It has also allowed me to help my team by aligning test coverage to real-world user journeys, making our testing process more effective and reliable.

One of the biggest benefits is that it’s now easier to collaborate with developers and product managers. Sharing these visual coverage reports enables better communication, leading to quicker fixes and enhanced collaboration.

Enhanced Collaboration: The visual nature of UI Coverage reports makes them accessible to all team members, fostering better communication and collaboration across development, QA, and product teams.
Data-Driven Decisions: With clear insights into test coverage, teams can make informed decisions about where to focus testing efforts, optimizing resource allocation and improving efficiency.
Improved Application Quality: By ensuring that all critical user interactions are tested, UI Coverage helps prevent regressions and enhances the overall user experience.

Getting Started with UI Coverage

Integrating UI Coverage into your testing workflow is straightforward. If you’re already recording test runs to Cypress Cloud with Test Replay, UI Coverage requires no additional setup. Start a free trial to begin visualizing your test coverage and identifying gaps.

Learn more and start your free trial here.

Conclusion

Cypress’s UI Coverage transforms how teams approach test coverage by focusing on the user interface and real user interactions. Its visual, intuitive reports provide actionable insights that help teams enhance test coverage, reduce redundancies, and deliver higher-quality applications. By adopting UI Coverage, development teams can ensure their testing strategies align with user needs, leading to more reliable and user-friendly software.

Would you be ready to redefine your testing strategy? Explore Cypress UI Coverage today.

[Boost]

Lasitha Wijenayake — Tue, 11 Feb 2025 21:23:32 +0000