اصلاح سرصفحه ها در درخواست های HTTP در تست اتوماسیون رابط کاربری – مجله Smashing

روش های مختلفی برای اصلاح هدرها وجود دارد. می‌توانید سرصفحه‌ها را با استفاده از برنامه‌های افزودنی مرورگر یا برنامه‌های پراکسی (مانند چارلز و پروکسیمن) تغییر دهید که درخواست را قطع می‌کنند و به شما اجازه می‌دهند پاسخ را با اضافه کردن سرصفحه‌ها تغییر دهید.

اما ابتدا اجازه دهید از ابتدا شروع کنیم.

هدرهای HTTP جفت های کلید-مقدار هستند که می توانند توسط کلاینت یا سرور برای ارسال اطلاعات اضافی به همراه درخواست یا پاسخ HTTP استفاده شوند. آنها اطلاعات بیشتری در مورد داده های ارسال شده در اختیار دارند. هدر HTTP (ها) از یک نام حساس به حروف کوچک و بزرگ و به دنبال آن یک دونقطه تشکیل شده است (:) سپس با ارزش آن. نام فیلدها به حروف بزرگ و کوچک حساس هستند اما مقادیر فیلدها به حروف بزرگ و کوچک حساس هستند. یک هدر می تواند چندین مقدار داشته باشد که با کاما از هم جدا می شوند.

من روی برنامه‌ای کار می‌کردم که صفحه وب ارائه‌شده را باز می‌کرد و سپس به کاربر امکان تغییر عناصر، اضافه کردن رویدادها، افزودن تجزیه و تحلیل و غیره را می‌داد. بدون نیاز به کدنویسی این کار با بارگذاری صفحه انجام می شد iframe و در بالای آن گزینه های مختلفی به کاربر می دهد. من با تعداد زیادی از وب سایت ها سعی کردم ببینم آنها چگونه رفتار می کنند iframe. مشاهده کردم که اکثر وب سایت ها در آن کار نمی کنند iframe به واسطه x-frame-options و content-security-policy سرصفحه ها

تقریباً همه وب سایت ها دارای سربرگ هستند X-frame-options تنظیم کنید deny یا sameorigin به همین دلیل مرورگر اجازه بارگذاری صفحه وب در یک را نمی دهد iframe یا وقتی هر درخواست متقاطع سعی می کند آن را در یک بارگذاری کند، انجام نمی دهد iframe. همچنین content-security-policy هدر دارد frame-ancestors بخشنامه ای که از این امر جلوگیری می کند.

بارگذاری صفحه در آن بسیار مهم بود iframe، داشتم در اینترنت پرسه می زدم تا راهی برای بارگذاری آن پیدا کنم. بدیهی بود که من باید این را نادیده بگیرم X-frame-options سربرگ به allowall یا کلا حذفش کن آن موقع بود که به طور تصادفی به آن برخورد کردم Requestly برنامه افزودنی که به من این ویژگی را داد تا آن را تغییر دهم X-frame-options هدر با تطبیق URL صفحه و از این رو به من اجازه می دهد تا آن را لغو کنم X-frame-options هدر هنگام اشکال زدایی

این زمانی بود که من برای اولین بار شاهد قدرت هدرهای شبکه بودم. آنها داده های مربوط به داده های در حال انتقال را حمل می کنند. امکان تغییر هدرهای ترافیکی که از مرورگر شما عبور می کند، ابزار بسیار خوبی است. علاوه بر نادیده گرفتن X-frame-options، می توانید هدرها را حذف کنید تا ردیابی آنلاین را به حداقل برسانید content-security-policy هدر، سایت های تست در حال تولید و غیره.

هنگام آزمایش برنامه های وب، اصلاح هدرها یک هک عالی را فراهم می کند:

• برای آزمایش حالت مهمان یک برنامه؛
• می تواند کوکی ها را با استفاده از هدر تنظیم کند.
• برای تست بخش‌های خاصی از یک برنامه که به‌طور پیش‌فرض غیرفعال هستند و می‌توان آن‌ها را با ارسال یک هدر درخواست سفارشی فعال کرد.
• برای تست موارد تست مختلف مرتبط با هدرها.
• برای دور زدن جریان احراز هویت در برنامه خود با عبور از هدر مجوز.

وقتی با آزمایش خودکار برنامه‌های وب آشنا شدم، به ذهنم رسید که به دلیل کاربرد بسیار زیاد آن در آزمایش برنامه‌های وب، تغییر هدرها باید یک ویژگی باشد. بنابراین تصمیم گرفتم این قطعه را بنویسم تا راههای اصلاح هدرها در تست خودکار را روشن کنم.

سلنیوم

سلنیوم به طور گسترده ای به عنوان یک چارچوب اتوماسیون آزمایشی برای آزمایش انتها به انتها برنامه های کاربردی وب استفاده می شود. در سال 2004 توسعه یافت. در ابتدا از Selenium IDE استفاده می شد اما فقط از فایرفاکس پشتیبانی می کرد و سپس Selenium RC برای فعال کردن تست بین مرورگر توسعه یافت. اکنون از Selenium WebDriver استفاده می شود زیرا از تجربه تلفن همراه و وب سایت های پویا پشتیبانی می کند. این یک کاربر واقعی در تعامل با صفحه وب را تقلید می کند.

مزایای استفاده از Selenium WebDriver

• Selenium WebDriver منبع باز است.
• این اتصالات برای هر زبان برنامه نویسی اصلی ارائه می دهد.
• در چندین سیستم عامل کار می کند. تست نوشته شده در ویندوز به راحتی روی مک کار می کند.
• شبیه سازی صفحه کلید و مکان نما پشتیبانی می شود.
• افزونه ها قابل نصب هستند.

محدودیت های Selenium WebDriver

• بدون پشتیبانی برای تغییر هدر.
• بدون پشتیبانی برای افزودن پارامترهای درخواست.
• نمی توان یک درخواست را مسدود کرد.

همانطور که گفته شد، توانایی تغییر هدرها به آزمایش برنامه ها کمک شایانی می کند، اما Selenium WebDriver از آن پشتیبانی نمی کند. آنها اخیراً قصد ندارند آن را بگنجانند.

این مقاله بر روی رویکردهای مختلف برای اصلاح هدرها در تنظیمات اتوماسیون سلنیوم تمرکز دارد.

رویکرد 1: سیم سلنیوم (پایتون)

سیم سلنیوم اتصالات Selenium Python را گسترش می دهد تا به شما امکان دسترسی به درخواست های اساسی که توسط مرورگر ارائه می شود را بدهد. شما کد خود را به همان روشی که با Selenium انجام می دهید می نویسید، اما API های اضافی برای بررسی درخواست ها و پاسخ ها و ایجاد تغییرات در آنها در لحظه دریافت می کنید.

این اجازه می دهد تا درخواست ها و پاسخ ها را در حال حرکت با استفاده از رهگیرها تغییر دهید. همچنین می‌تواند درخواست‌ها، پاسخ‌های ساختگی، اضافه کردن پارامترهای درخواست در URL را مسدود کند.

استفاده

# interceptor function intercepts the network request
# If one arg is provided, requests are intercepted
# and can be modified
def interceptor(request):
    request.headers['New-Header'] = 'Some Value'
# setting the driver's request_interceptor to equal
# the customised interceptor
driver.request_interceptor = interceptor
driver.get(<URL_where_to_modify_the_header>)

# All requests will now contain New-Header

نام‌های هدر تکراری در درخواست HTTP مجاز است، بنابراین قبل از تنظیم سرصفحه جایگزین، ابتدا باید هدر موجود را با استفاده از آن حذف کنید. del در غیر این صورت دو هدر به همین نام وجود خواهد داشت.

# A response interceptor takes two args which
# then allows to tinker with the response
def interceptor(request, response):  
    if request.url == 'https://server.com/some/path':
        response.headers['New-Header'] = 'Some Value'
driver.response_interceptor = interceptor
driver.get(<URL_where_to_modify_the_header)

# Responses from https://server.com/some/path will now contain 
# the New-Header

یک رهگیر پاسخ باید دو آرگومان را بپذیرد، یکی برای درخواست مبدأ و دیگری برای پاسخ.

محدودیت ها

• این فقط به عنوان یک ماژول پایتون در دسترس است.
• از زبان های دیگر پشتیبانی نمی کند.

ابزارهایی مانند درخواست کنید که یک ابزار یک مرحله ای برای اشکال زدایی و اصلاح درخواست های شبکه است. Requestly به کاربران اجازه می‌دهد تا سرصفحه‌ها را تغییر دهند، آدرس‌های اینترنتی را تغییر دهند، میزبان‌ها را تغییر دهند، پاسخ API ساختگی، درخواست‌های شبکه را به تاخیر بیاندازند، اسکریپت‌های سفارشی را درج کنند، و غیره. این بسته npm آماده به کار را فراهم می‌کند که بسته‌بندی در اطراف افزونه است که امکان استفاده از برنامه افزودنی را در سلنیوم فراهم می‌کند. کروم، فایرفاکس و اج را پشتیبانی می کند.

استفاده از Requestly در سلنیوم

Requestly به شما این امکان را می دهد که کارهای بسیار بیشتری غیر از اصلاح هدرها انجام دهید. همه این موارد را می توان در یک رابط وب تنظیم کرد و لیست مشترک را می توان در برنامه بارگذاری کرد که به کاربر اجازه می دهد تا قوانین را به راحتی در یک برنامه وب ویرایش کند.

برای نصب: npm i @requestly/selenium

استفاده

یک قانون Modify Headers را می توان در آن ایجاد کرد app.requestly.io/rules پس از نصب افزونه

پس از ایجاد URL، بر روی آن کلیک کنید Share دکمه ایجاد پیوند برای URL.

URL برای موارد بالا ایجاد شد sharedList است اینجا.

این URL یک قانون Requestly است که اضافه می کند Access-Control-Allow-Origin سربرگ تمام درخواست ها

این قانون را می توان در Selenium WebDriver با استفاده از sharedList URL که در زیر توضیح داده شده است:

require("chromedriver");
const { Builder } = require("selenium-webdriver");
const chrome = require("selenium-webdriver/chrome");
const { getRequestlyExtension, importRequestlySharedList } = require("@requestly/selenium");

const options = new chrome.Options().addExtensions(getRequestlyExtension("chrome"));
const driver = new Builder()
    .forBrowser("chrome")
    .setChromeOptions(options)
    .build();

// Imports Rules in Selenium using Requestly sharedList feature
// importRequestlySharedList(driver, <sharedList_URL>);

importRequestlySharedList(driver, 'https://app.requestly.io/rules/#sharedList/1626984924247-Adding-Headers-Example');

اطلاعات بیشتر را می توان یافت اینجا.

محدودیت ها

• این یک بسته npm ارائه می دهد که ماژول را فقط به جاوا اسکریپت محدود می کند.
• برای استفاده از قوانین در سلنیوم، فهرست‌های مشترک باید به صورت دستی ایجاد شوند، بنابراین قوانین را نمی‌توان از طریق کد نوشته شده برای تست اتوماسیون سلنیوم کنترل کرد.

رویکرد 3: استفاده از Puppeteer

عروسک گردان یک کتابخانه Node است که توسط Google ایجاد شده است که یک API سطح بالا برای کنترل Chrome یا Chromium بدون هد بر روی پروتکل DevTools ارائه می دهد. همچنین می‌توان آن را برای استفاده کامل (غیر هد) Chrome یا Chromium پیکربندی کرد.

وقتی صحبت از راه اندازی اتوماسیون مرورگر می شود، سلنیوم به طور خودکار به ذهن خطور می کند، اما از زمان ظهور Puppeteer به طور گسترده برای خراش دادن وب استفاده می شود. احتمالاً به دلیل پشتیبانی گوگل از آن، کنترل بیشتری بر روی کروم نسبت به سلنیوم ارائه می دهد. همچنین به همین دلیل، نیاز به درایور خارجی برای اجرای مرورگر را رد می کند.

استفاده

const puppeteer = require('puppeteer');

(async () => {
    const browser = await puppeteer.launch();
    const page = await browser.newPage();
    await page.goto('<https://example.com>');
    await page.screenshot({ path: 'example.png' });
    await browser.close();
})();

در page.setExtraHTTPHeaders(headers) روش را می توان برای تنظیم هدر استفاده کرد.

همچنین می تواند هدرهای موجود را اصلاح و حذف کند. هنگامی که درخواست ها با استفاده از ترکیبی از page.setRequestInterception(true) و page.on().

await page.setRequestInterception(true);
page.on('request', request => {
// Override headers
    const headers = Object.assign({}, request.headers(), {
    foo: 'bar', // set "foo" header
    origin: undefined, // remove "origin" header
});

request.continue({headers});

});

منبع کد

محدودیت ها

• Puppeteer در حال حاضر به کروم محدود شده است. نمی توان از آن برای آزمایش بین مرورگر استفاده کرد.
• در مقایسه با سلنیوم جامعه کوچک تری دارد. به نظر می رسد حمایت بیشتری از سلنیوم در جامعه وجود دارد.
• این فقط از جاوا اسکریپت پشتیبانی می کند.

نتیجه

اصلاح هدرهای شبکه ابزار بسیار قدرتمندی در یک محیط آزمایشی است. چیزهای بیشتری نسبت به آنچه که در این مقاله می توان به آن پرداخته شده است. من سعی کرده‌ام برخی از ساده‌ترین روش‌ها را برای اصلاح هدرها در تست اتوماسیون UI پوشش دهم.

هر روشی بر اساس کاربرد و زبانی که استفاده می کنید دارای مزایایی است. در اینجا برخی از ترجیحات وجود دارد:

• اگر می خواهید از سلنیوم در پایتون استفاده کنید، Selenium-Wire را ترجیح دهید زیرا ویژگی های زیادی را در بالای Selenium-Webdriver ارائه می دهد.
• اگر می‌خواهید فقط روی کروم تست کنید، Puppeteer را به دلیل پشتیبانی گوگل و پشتیبانی خارج از جعبه از همه ویژگی‌ها از جمله اصلاح هدرها ترجیح دهید.
• اگر با سلنیوم کار می‌کنید و می‌خواهید آزمایش بین مرورگر انجام دهید، ترجیح می‌دهید پسوندها را برای شبیه‌سازی آزمایش در Selenium-Webdriver اضافه کنید. اگر مورد استفاده شما نیاز به تزریق اسکریپت یا تغییر مسیر منابع شبکه در زمان اجرا دارد (علاوه بر اصلاح هدرها)، پس Requestly یک انتخاب ایده آل است.

امیدواریم این مقاله به شما بینشی در مورد اصلاح هدرها در یک تنظیم خودکار تست برنامه کاربردی وب بدهد.

منابع بیشتر

(vf، yk، او)