نحوه پاکسازی گزارش فرمان Cypress با پنهان کردن درخواست‌های شخص ثالث

Summarize this content to 400 words in Persian Lang
Cypress یک ابزار عالی برای آزمایش سرتاسر است، اما زمانی که برنامه شما درخواست‌های XHR شخص ثالث متعددی مانند تبلیغات یا خدمات نظارتی را ارائه می‌کند، گزارش فرمان آن می‌تواند به سرعت درهم و برهم شود. این می تواند اشکال زدایی و عیب یابی را سخت تر کند.

برای رسیدگی به این موضوع، لاگ فرمان Cypress را هک کردم تا فقط درخواست‌هایی را که در باطن برنامه من ارسال می‌شوند، نمایش دهد. نتیجه؟ گزارش فرمان بسیار تمیزتر و متمرکزتر. در این مقاله توضیح خواهم داد که چگونه این کار را انجام دادم و چگونه می توانید آن را پیاده سازی کنید.

چرا درخواست های شخص ثالث را فیلتر کنیم؟

در طول آزمایش، Cypress همه درخواست‌ها، از جمله درخواست‌های خارجی مانند تجزیه و تحلیل و تبلیغات را ثبت می‌کند. در حالی که این درخواست‌ها برای عملکرد برنامه ضروری هستند، اما برای اکثر تست‌های Cypress مرتبط نیستند. فیلتر کردن آنها، گزارش را خوانا و راحت‌تر دنبال می‌کند.

راه حل: هک کردن گزارش فرمان Cypress

من یک اسکریپت ایجاد کردم که به صورت پویا گزارش فرمان Cypress را مشاهده می کند و درخواست های XHR و Fetch شخص ثالث را پنهان می کند. شما می توانید این ویژگی را با استفاده از یک سفارشی تغییر دهید hideThirdPartyRequestsپرچم در پیکربندی Cypress شما.

کد

کد زیر را به خود اضافه کنید e2e.js فایل در پوشه پشتیبانی Cypress شما:

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(“https://dev.to/”)) {
node.style.display = ‘none’;
}
}
}
}
}
});
}
});
});
observer.observe(commandLog, { childList: true, subtree: true });
}
return false;
}

if (document.readyState === ‘complete’ && ${hideThirdPartyRequests}) {
setupObserver();
}
`;

app.head.appendChild(script);

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

چگونه کار می کند؟

1. مشاهده گزارش فرمان:

اسکریپت یک MutationObserver را راه اندازی می کند که به تغییرات در گزارش فرمان Cypress گوش می دهد.

2. منطق فیلترینگ:

هر زمان که یک درخواست جدید ثبت می شود، اسکریپت بررسی می کند که آیا درخواست XHR یا Fetch است.
اگر URL درخواست با / شروع نشود، یک درخواست شخص ثالث در نظر گرفته می شود و پنهان می شود.

3. کنترل را تغییر دهید:

را hideThirdPartyRequests پرچم در cypress.config.js فیلتر را فعال یا غیرفعال می کند.

اضافه کردن پرچم پیکربندی

برای فعال کردن این ویژگی، خط زیر را به خود اضافه کنید cypress.config.js:

module.exports = {
e2e: {
setupNodeEvents(on, config) {
// Your setup here
},
hideThirdPartyRequests: true, // Set to false to disable filtering
}
};

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

نتیجه

با این هک، لاگ فرمان Cypress فقط درخواست های مربوط به باطن شما را نشان می دهد. دیگر نیازی به پیمایش در لاگ‌های نامربوط نخواهید داشت و همین امر باعث می‌شود اشکال‌زدایی به سرعت انجام شود!

افکار نهایی

این هک سریع به طور چشمگیری تجربه آزمایش Cypress من را با تمیز و مرتبط نگه داشتن گزارش فرمان بهبود بخشید. در حالی که این رویکرد برای پروژه های من به خوبی کار می کند، احساس راحتی کنید که منطق را با ساختار درخواست برنامه خود تطبیق دهید.

آیا چیزی مشابه را امتحان کرده اید؟ تجربه خود را در نظرات به اشتراک بگذارید!

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("https://dev.to/")) {
                                                node.style.display = 'none';
                                            }
                                        }
                                    }
                                }
                            }
                        });
                    }
                });
            });
            observer.observe(commandLog, { childList: true, subtree: true });
        }
        return false;
    }

    if (document.readyState === 'complete' && ${hideThirdPartyRequests}) {
    setupObserver();
    }
`;

app.head.appendChild(script);

module.exports = {
  e2e: {
    setupNodeEvents(on, config) {
      // Your setup here
    },
    hideThirdPartyRequests: true,  // Set to false to disable filtering
  }
};