Galen: فریمورک تست رابط کاربری سایت‌های ریسپانسیو

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

Galen Framework برای این مسئله راه‌حلی بسیار ساده دارد که همان تست کردن مکان آبجکت‌ها به صورت نسبی در مقایسه با یکدیگر بر روی صفحه است. با استفاده از سینتکس‌های مشخص و قوانینی جامع و مفصل، شما قادر خواهید بود هر قالبی که تصور می‌کنید را تعریف کنید. برای آشنایی بیشتر با قابلیت‌های گالن فریمورک، در ادامه با سکان آکادمی همراه باشید.

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

قابل اجرا در Selenium Grid
یکی از ویژگی‌های Galen Framework آن است که به راحتی و بدون هیچ مشکلی در سلنیوم گرید (Selenum Grid) اجرا می‌شود. بنابراین می‌توانید این تست را در یک فضای ابری مانند Sauce Labs یا BrowserStack اجرا کنید تا علاوه بر تست قالب، ریسپانسیو بودن وب‌سایت در دستگاه‌های مختلف موبایل را هم بیازمایید. همچنین Galen می‌تواند به صورت موازی چندین تست را اجرا کند که از این جهت به جلوگیری از هدر رفت زمان شما کمک می‌کند.

سینتکس بسیار خوانا
با استفاده از Galen Specs Language می‌توانید قالب‌های پیچیده (مثلاً قالب‌هایی با اندازه‌های مختلف برای صفحه یا مرورگر) توصیف کنید. به این صورت، برنامه‌نویسی نه فقط بسیار ساده‌تر می‌شود، بلکه خواندن آن هم برای کسانی که با این فریمورک آشنایی ندارند خیلی راحت‌تر خواهد بود. سینتکش پایهٔ این فریمورک به صورت زیر است:

@objects
    comments            #comments
    article-content     div.article

= Main section =
    @on mobile, tablet 
        comments:
            width 300px 
            inside screen 10 to 30px top right 
            near article-content > 10px right 

    @on desktop
        comments:
            width ~ 100% of screen/width 
            below article-content > 20px 

از سینتکس پیشرفتهٔ این فریمورک هم به راحتی می‌توان استفاده نمود؛ این روش‌ها در کنار Galen Framework قابلیت‌های زیادی را برای تست چشمی (مانند مقایسه تصاویر و ترکیب رنگ) در اختیار شما قرار می‌دهد. سینتکس پیشرفتهٔ این فریمورک به صورت زیر است:

@objects
    menu-item-*   css  #menu li
    header-logo   id   logo
    button-login  xpath //button[@id='login']  

= Menu =
    @forEach [ menu-item-* ] as itemName, next as nextItem
        ${itemName}:
            left-of ${nextItem} 10px 

    header-logo:
        image file imgs/header-logo.png, error 4% 

    button-login:
        color-scheme 5% #ffefd0, 87 to 90% #ae32ef 

تست حرفه‌ای
در Galen ramework شما می‌توانید اکسپرشن‌های مخصوص خود را برای تست کردن چندین عنصر در یک خط ایجاد کنید. همچنین به این صورت می‌توانید کدهای قابل اعتماد، قابل نگهداری و با خصوصیات مشخص بنویسید. نمونه کد تست نوشته شده با استفاده از این فریمورک به صورت زیر است:

= Login box =
    login_box:
        | at the top inside content with ${content_vertical_margin} margin
        centered horizontally inside content 1px 

    | every &login_box_element is more or less readable
    | every &login_box_textfield has height ${form_textfield_height}
    | every &login_box_button is tapable

    @on desktop, tablet
        | &login_box_form_elements are aligned vertically above each other with ${login_box_elements_vertical_margin} margin
        | first &login_box_form_element is inside login_box ${login_box_elements_side_margin} top
        | last &login_box_form_element is above login_button ${login_box_elements_vertical_margin}
        | &login_box_buttons are aligned horizontally next to each other with 0 to 5px margin
    @on mobile
        | &login_box_elements are aligned vertically above each other with ${login_box_elements_vertical_margin} margin
        | &login_box_elements sides are vertically inside login_box with ${login_box_elements_side_margin} margin

گزارش خطا
Galen Framework گزارش‌های HTML ایجاد می‌کند و شما می‌توانید تمام آبجکت‌های تست شده را بر روی صفحه ببینید.

اسکرین‌شات
به طور خودکار، عناصر غیر هم‌تراز (Misaligned) را هایلایت می‌کند تا به راحتی مشکلی که در صفحه به وجود آمده است را تشخیص دهید.

مقایسهٔ تصاویر
پیش از این گفتیم که Galen Framework به شما این امکان را می‌دهد تا بررسی چشمی انجام دهید. همچنین بخش‌های نامتناسب را هم به شما نمایش می‌دهد.

تست برنامه
شما می‌توانید مرورگرهای مختلف مانند فایرفاکس، کروم و اینترنت اکسپلورر را انتخاب کنید یا آنکه تست خود را در Slenium Grid انجام دهید. در صورتی که صفحه به راحتی قابل دسترس نباشد، شما می‌توانید کدهای جاوااسکریپت دلخواه خود را به Client-side اضافه کنید یا یک اَکشن جاوااسکریپت را در Test-side اجرا کنید تا به این شکل صفحهٔ خود را برای بررسی قالب آماده کنید. به عنوان نمونه تست نوشته شده داریم:

@@ Table devices
    | deviceName  | size     | tags     |
    | mobile      | 450x700  | mobile   |
    | tablet      | 600x800  | tablet   |
    | desktop     | 1024x768 | desktop  |

@@ Parameterized using devices
Home page on ${deviceName}
    http://example.com ${size}
        inject custom-cookies.js
        check homepage.spec --include ${tags}

@@ Parameterized using devices
User profile page on ${deviceName}
    http://example.com ${size}
        run loginAsTestUser.js
        wait 1m until visible "css: #login-button"
        check userProfile.spec --include ${tags}

تست‌های جاوااسکریپت
با استفاده از تست‌های جاوااسکریپت، شما به راحتی می‌توانید تست‌های خود را طراحی کرده و چیزهایی پیچیده اجرا کنید. همچنین Galen می‌تواند ویژگی‌های زیر را نیز در تست‌های JavaScript ارائه کند:
- اصلاح و پرداخت پیش و و پس از رویدادها
- فیلتر کردن و رکورد کردن توالی تست‌ها
- تست‌های پارامتری با آرایه‌ها 

نمونه تست نوشته شده با استفاده از زبان جاوااسکریپت به صورت زیر است:

function Device(deviceName, size, tags) {
    this.deviceName = deviceName;
    this.size = size;
    this.tags = tags;
}
var devices = {
    mobile:  new Device("mobile", "450x700", ["mobile"]),
    tablet:  new Device("tablet", "600x800", ["tablet"]),
    desktop: new Device("dekstop", "1024x768", ["desktop"])
};

forAll(devices, function () {
    test("Home page on ${deviceName}", function (device){
        var driver = createDriver("http://example.com", 
            device.size);
        checkLayout(driver, "homepage.spec", device.tags);
        driver.quit();
    });
});

API جاوا
API اختصاصی این فریمورک برای زبان برنامه‌نویسی جاوا همیشه برای تست‌های جاوا در دسترس خواهد بود. Galen بر روی Sonatype Central Repository عرضه شده است به این معنی که شما می‌توانید آن را به عنوان یک ریپازیتوری به پروژهٔ Maven خود اضافه کنید:

public class WelcomePageTest extends GalenTestNgTestBase {

    @Override
    public WebDriver createDriver(Object[] args) {
        return new FirefoxDriver();
    }

    @Test
    public void welcomePage_shouldLookGood_onDesktopDevice() {
        load("http://example.com", 1024, 768);
        checkLayout("/specs/welcomePage.spec", asList("mobile"));
    }

}

Galen اپن‌سورس است
Galen Framework تحت لیسانس Apache License 2 توزیع شده و سورس آن در GitHub در دسترس است.