Cypress is an excellent tool for end-to-end testing, but its command log can quickly become cluttered when your application makes numerous third-party XHR requests, such as ads or monitoring services. This can make debugging and troubleshooting harder.
To address this, I hacked Cypress’s command log to display only the requests directed at my application backend. The result? A much cleaner and more focused command log. In this article, I’ll explain how I did it and how you can implement it too.
Why Filter Third-Party Requests?
During testing, Cypress logs every request, including external ones like analytics and ads. While these requests are essential for the app's functionality, they aren't relevant for most Cypress tests. Filtering them out keeps the log readable and easier to follow.
The Solution: Hacking the Cypress Command Log
I created a script that dynamically observes the Cypress command log and hides third-party XHR and Fetch requests. You can toggle this feature using a custom hideThirdPartyRequestsflag in your Cypress configuration.
The Code
Add the following code to your e2e.js file in your Cypress support folder:
const app = window.top.document
const script = app.createElement('script');
const hideThirdPartyRequests = Cypress.config('hideThirdPartyRequests');
script.textContent = `
function setupObserver(autoHideConsents, hideThirdPartyRequests) {
const commandLog = app.querySelector('.reporter').querySelector('.container');
if (commandLog) {
const observer = new MutationObserver((mutations) => {
mutations.forEach((mutation) => {
if (mutation.type === 'childList' && mutation.addedNodes.length > 0) {
mutation.addedNodes.forEach((node) => {
if (node instanceof Element) {
const commandInfo = node.querySelector('.command-info');
if (commandInfo) {
const commandType=commandInfo.querySelector('.command-method').querySelector('span').textContent;
if(commandType === '(xhr)' || commandType === '(fetch)'){
const commandMessageText = commandInfo.querySelector('.command-message-text');
const messageParts = commandMessageText.textContent.split(' ');
const myUrl = messageParts[messageParts.length - 1];
if(commandMessageText && myUrl){
if (!myUrl.startsWith('/')) {
node.style.display = 'none';
}
}
}
}
}
});
}
});
});
observer.observe(commandLog, { childList: true, subtree: true });
}
return false;
}
if (document.readyState === 'complete' && ${hideThirdPartyRequests}) {
setupObserver();
}
`;
app.head.appendChild(script);
How it Works?
1. Command Log Observation:
- The script sets up a MutationObserver that listens for changes in the Cypress command log.
2. Filtering Logic:
- Whenever a new request is logged, the script checks if it’s an XHR or Fetch request.
- If the request URL does not start with /, it is considered a third-party request and gets hidden.
3. Toggle Control:
- The
hideThirdPartyRequestsflag incypress.config.jsenables or disables the filtering.
Adding the Config Flag
To enable the feature, add the following line to your cypress.config.js:
module.exports = {
e2e: {
setupNodeEvents(on, config) {
// Your setup here
},
hideThirdPartyRequests: true, // Set to false to disable filtering
}
};
The Result
With this hack in place, Cypress’s command log shows only the requests related to your backend. You’ll no longer have to scroll through irrelevant logs, making debugging a breeze!
Final Thoughts
This quick hack dramatically improved my Cypress testing experience by keeping the command log clean and relevant. While this approach works well for my projects, feel free to adapt the logic to fit your app’s request structure.
Have you tried something similar? Share your experience in the comments!
Top comments (0)