دوشنبه , ۱۰ اردیبهشت ۱۴۰۳

آموزش Selenium-قسمت هفتم: Locatorها در Selenium IDE شامل CSS Locator، DOM، XPath، Link Text، ID(بخش اول)

Selenium
Selenium

 

بحث Locatorها طولانیست، لذا طی سه یا چهار قسمت تقدیم خوانندگان خواهد شد

Locatorها چی هستند؟

Locator یک Command است که به Selenium IDE می‌گوید کدام عناصر GUI(مثلا می‌گوید Text Box، Buttonها، چک‌باکس‌ها و …) نیاز دارند روی آنها عملیات انجام شود. شناسایی عناصر گرافیکی صحیح یک پیش‌شرط برای ایجاد یک اسکریپت اتوماسیون است. اما شناسایی دقیق عناصر GUI مشکلتر از آن است که به نظر می‌رسد. گاهی اوقات شما کار را با عناصر گرافیکی نادرست انجام داده و یا با هیچ عنصری کار نمی‌کنید! از این رو، Selenium تعدادی از Locatorها را فراهم کرده تا دقیقا یک عنصر GUI را پیدا کنید.

انواع مختلف Locators در Selenium IDE

  • ID
  • Name
  • Link Text
  • CSS Selector
    • Tag and ID
    • Tag and class
    • Tag and attribute
    • Tag, class, and attribute
    • Inner text
  • DOM-Document Object Model
    • getElementById
    • getElementsByName
    • dom:name
    • dom: index
  • XPath

Commandهایی وجود دارد که نیازی به Locator ندارند (مانند دستور “open”). با این حال، اکثر آنها به Locator نیاز دارند.

انتخاب Locator به شدت به اپلیکیشن تحت تست شما بستگی دارد. در این آموزش، میان فیسبوک و  tours.demoaut جدید بر مبنای Locatorهایی که از این برنامه‌ها پشتیبانی می‌کنند، تعویض عملیات خواهیم کرد. به همین ترتیب در پروژه تست خود، هر یک از Locatorهای فوق را بر اساس پشتیبانی از نرم‌افزارتان انتخاب کنید.

Locating(موقعیت‌یابی) بوسیله ID

این شایع‌ترین روش برای موقعیت‌یابی عناصر است زیرا IDها برای هر عنصر منحصر به فرد هستند.

فرمت هدف:  id=id of the element

برای این مثال، از فیسبوک به عنوان Test App خود استفاده خواهیم کرد، زیرا Mercury Tours از ویژگی‌های ID استفاده نمی‌کند.

مرحله ۱- از آنجا که این مطالب برای آموزش ایجاد شده است، لذا فیسبوک طراحی لاگین به سیستم خود را تغییر داده است. برای تست از این صفحه دمو استفاده نمایید. جعبه متن “Email or Phone” را با استفاده از Firebug بازبینی کنید و از ID آن مطلع شوید. در این مورد، ID شما “Email” است.

Selenium Figure 7-1
Selenium Figure 7-1

مرحله ۲- Selenium IDE را راه‌اندازی کرده و “id=email” را در جعبه هدف(Target box) وارد نمایید. روی دکمه Find کلیک کنید، در این صورت خواهید دید که Tex Box مذبور یعنی “Email or Phone” با رنگ زرد و با سبز مشخص می‌شود، و این به این معناست که Selenium IDE قادر است این عنصر را به درستی موقعیت‌یابی کند.

Selenium Figure 7-2
Selenium Figure 7-2

Locating(موقعیت‌یابی) بوسیله نام

موقعیت‌یابی عناصر بوسیله نام(Name) بسیار شبیه موقعیت‌یابی توسط ID است، به جز اینکه ما به جای آن از پیشوند “=name” استفاده می‌کنیم.

فرمت هدف:  name=name of the element

در نمایش زیر، از Mercury Tours استفاده خواهیم کرد زیرا تمام عناصر مهم نام دارند.

مرحله ۱– به این آدرس بروید و از کادر Firebug برای بازبینی کادر متن “User Name” استفاده کنید. از ویژگی name آن مطلع شوید.

Selenium Figure 7-3
Selenium Figure 7-3

در اینجا می‌بینیم که نام عنصر “userName” است.

مرحله ۲– در Selenium IDE، در Target Box(جعبه هدف) “name=userName” را وارد نمایید و روی دکمه Find کلیک کنید. Selenium IDE باید بتواند User Name text box را با برجسته‌سازی(روشن کردن) آن تعیین کند.

Selenium Figure 7-4
Selenium Figure 7-4

Locating(موقعیت‌یابی) بوسیله نام با استفاده از فیلترها

فیلترها را می‌توان هنگامی که عناصر چندگانه با همان نام استفاده می‌شوند به کار گرفت. فیلترها ویژگی‌های(Attribute) اضافی مورد استفاده برای تشخیص عناصر با همان نام هستند.

فرمت هدف:  name=name_of_the_element filter=value_of_filter

اجازه دهید یک مثال ببینیم

مرحله ۱– با استفاده از Username و Password به Mercury Tours لاگان(Log On) نمایید. این کار باید شما را به صفحه Flight Finder که در زیر نشان داده شده است هدایت نماید.

Selenium Figure 7-5
Selenium Figure 7-5

مرحله ۲– با استفاده از Firebug، خواهید دید که دکمه‌های رادیویی(رادیوباتِن) Round Trip و One Way دارای یک نام یکسان با عنوان “tripType” هستند. با این حال، آنها دارای Attributeهای VALUE متفاوت هستند، بنابراین ما می‌توانیم هر یک از آنها را به عنوان فیلتر خود استفاده کنیم.

Selenium Figure 7-6
Selenium Figure 7-6

مرحله ۳

  • ما ابتدا به رادیوی One Way دسترسی پیدا می‌کنیم. روی خط اول ویرایشگر کلیک کنید.
  • در Command box مربوط به Selenium IDE، دستور “click” را وارد کنید.
  • در جعبه هدف، “name=tripType value=oneway” را وارد نمایید. قسمت “value=oneway” فیلتر ما محسوب می‌شود.
Selenium Figure 7-7
Selenium Figure 7-7

مرحله ۴– بر روی دکمه Find کلیک کنید. در اینجا خواهید دید که Selenium IDE قادر به برجسته کردن دکمه رادیویی One Way با رنگ سبز است. این کار به این معنی است که ما با استفاده از ویژگی VALUE، می‌توانیم به عنصر دسترسی داشته باشیم.

Selenium Figure 7-8
Selenium Figure 7-8

مرحله ۵– کلید “X” را در صفحه کلید خود فشار دهید تا دستور click را اجرا نمایید. توجه داشته باشید که دکمه رادیویی One Way انتخاب می‌شود.

Selenium Figure 7-9
Selenium Figure 7-9

شما می‌توانید این بار با استفاده از “name=tripType value=roundtrip” به عنوان Target خود همین کار را با دکمه رادیویی Round Trip انجام دهید.

Locating(موقعیت‌یابی) بوسیله Link Text

این نوع موقعیت‌یاب تنها به Hyperlink Textها اِعمال می‌شود. ما با استفاده از Prefix کردن Target خود با “=link” و آوردن Hyperlink Text در ادامه به این لینک دسترسی پیدا می‌کنیم.

فرمت هدف: link=link_text

در این مثال، ما باید به لینک “REGISTER” یافته شده روی صفحه Home مربوط به Mercury Tours دسترسی پیدا کنیم.

مرحله ۱

  • ابتدا، مطمئن شوید که از Mercury Tours لاگاف کرده‌اید.
  • به صفحه Home مربوط به Mercury Tours بروید.

مرحله ۲

  • با استفاده از Firebug، لینک “REGISTER” را بررسی نمایید. Link Text به صورت زیر پیدا می‌شود.
  • در این مورد Link Text ما “REGISTER” است. این Link Text را کپی کنید.
Selenium Figure 7-10
Selenium Figure 7-10

مرحله ۳– Link Text را در Firebug کپی کرده و آن را بر روی جعبه هدف Selenium IDE پِیست(Paste) کنید. آنرا با “=link”پیشوند(Prefix) نمایید.

Selenium Figure 7-11
Selenium Figure 7-11

مرحله ۴– بر روی دکمه Find کلیک نمایید تا ببینید که Selenium IDE قادر است REGISTER link را به درستی برجسته‌ کند.

Selenium Figure 7-12
Selenium Figure 7-12

مرحله ۵– برای Verify بیشتر، “clickAndWait” را در Command Box وارد کرده و آن را اجرا کنید. Selenium IDE باید بتواند روی REGISTER link کلیک کرده و شما را به صفحه ثبت نام در زیر هدایت نماید.

Selenium Figure 7-13
Selenium Figure 7-13

Locating(موقعیت‌یابی) بوسیله CSS Selector

CSS Selectorها الگوهای رشته‌ای هستند که برای شناسایی عنصر، ترکیبی از HTML tag، ID، Class و Attributeها را استفاده می‌کنند. موقعیت‌یابی با استفاده از CSS Selector پیچیده‌تر از متدهای قبلیست، اما با این حال عموومی‌ترین راهبرد موقعیت‌یابی برای کاربران پیشرفته و حرفه‌ای در سلنیوم است، زیرا می‌تواند حتی به آن دسته از عناصر که فاقد ID یا Name هستند نیز دسترسی پیدا کند.

CSS Selectorها دارای فرمت‌های متعددی هستند، اما ما فقط روی رایج‌ترین آنها تمرکز خواهیم کرد.

  • Tag و ID
  • Tag و Class
  • Tag و Attribute
  • Tag، Class و Attribute
  • Inner Text(متن داخلی)

هنگام استفاده از این استراتژی، همیشه Target Box را با “=css” پیشوند(Prefix) می‌کنیم، آنچنانکه در نمونه‌های آتی ارائه شده است.

 

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

ابوالفضل خواجه دیزجی

همچنین ببینید

Selenium

آموزش Selenium-قسمت هفدهم: Mouse Click Event و Keyboard Event و موضوع Action Class در Selenium WebDriver

در این بخش، ما رویداد کیبورد(Keyboard Event) و ماوس(Mouse Event) را در Selenium Webdriver آموزش …

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *