سیده آمین ارمان
کاربر نگاه دانلود
تست رابط کاربری سایت همیشه چالش های زیادی به همراه دارد. در همین راستا، برخی توسعه دهندگان دور هم جمع شده و فریم ورکی تحت عنوان 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 گزارش های اچ تی ام ال ایجاد می کند و شما می توانید تمام اشیاء قابل تست را بر روی صفحه ببینید.
اسکرین شات
به طور خود کار عناصر غیر هم تراز (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}
${size}
inject custom-cookies.js
check homepage.spec --include ${tags}
@@ Parameterized using devices
User profile page on ${deviceName}
${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("",
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("", 1024, 768);
checkLayout("/specs/welcomePage.spec", asList("mobile"));
}
}
Galen اپن سورس است
Galen Framework تحت Apache License 2 توزیع شده و سورس آن در GitHub در دسترس است. نکته ی جالب این که حتی صفحه خود وب سایت 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 گزارش های اچ تی ام ال ایجاد می کند و شما می توانید تمام اشیاء قابل تست را بر روی صفحه ببینید.
اسکرین شات
به طور خود کار عناصر غیر هم تراز (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}
${size}
inject custom-cookies.js
check homepage.spec --include ${tags}
@@ Parameterized using devices
User profile page on ${deviceName}
${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("",
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("", 1024, 768);
checkLayout("/specs/welcomePage.spec", asList("mobile"));
}
}
Galen اپن سورس است
Galen Framework تحت Apache License 2 توزیع شده و سورس آن در GitHub در دسترس است. نکته ی جالب این که حتی صفحه خود وب سایت Galen Framework هم خود اپن سورس است که در گیت هاب قرار داده شده و همه می توانند به بهبود آن کمک کنند.
