پنج شنبه , ۶ اردیبهشت ۱۴۰۳

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

Selenium
Selenium

موقعیت‌یابی بوسیله DOM و dom:name

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

سینتکس

شرح

document.forms["name of the form"].elements["name of the element"]




* name of the form = مقدار name Attribute مربوط به form tag که دربرگیرنده عنصریست که شما می‌خواهید بدان دسترسی داشته باشید.
* name of the element = مقدار name Attribute مربوط عنصری که شما می‌خواهید بدان دسترسی داشته باشید.

مرحله ۱- به Mercury Tours homepage بروید و از Firebug برای بازرسی Text Box مربوط به User Name استفاده کنید. توجه داشته باشید که این Text Box در یک فرم به نام “home” قرار گرفته است.

Selenium Figure 10-1
Selenium Figure 10-1

مرحله ۲- در Selenium IDE مورد زیر را تایپ کرده و سپس کلید Find را کلیک نمایید:

document.forms[“home”].elements[“userName”]

Selenium IDE باید بتواند با موفقیت به این عنصر دسترسی پیدا کند.

Selenium Figure 10-2
Selenium Figure 10-2

موقعیت‌یابی بوسیله DOM و dom:index

این متد حتی وقتیکه عنصر مد نظر در یک فرم فاقد نام وجود داشته باشد کار می‌کند، چرا که به جای نام مربوط به فرم از Index آن استفاده می‌کند.

سینتکس

شرح

document.forms[index of the form].elements[index of the element]


* index of the form = شماره ایندکس(آغاز از صفر) فرم با توجه به کل صفحه
* index of the element = شماره ایندکس(آغاز از صفر) عنصر با توجه به کل فرمی که آنرا شامل می‌شود

ما باید به Text Box مربوط به Phone در صفحه Mercury Tours Registration دسترسی پیدا کنیم. فرم مربوط به این صفحه فاقد Attributeهای name و ID است، بنابراین این مثال خوبی خواهد بود.

مرحله ۱- به صفحه Mercury Tours Registration رفته و Phone Text Box را بازرسی نمایید. توجه داشته باشید که فرمی که این Text Box در آن قرار گرفته است، فاقد Attributeهای name و ID است.

Selenium Figure 10-3
Selenium Figure 10-3

مرحله ۲- در Selenium IDE Target box عبارت زیر را تایپ کرده و کلید Find را کلیک کنید:

document.forms[0].elements[3]

Selenium IDE باید بتواند به درستی به Phone Text Box دسترسی پیدا کند.

Selenium Figure 10-4
Selenium Figure 10-4

مرحله ۳- همچنین شما می توانید از نام(name) عنصر به جای Index آن استفاده کنید و نتایج مشابهی به دست آورید. در Selenium IDE Target box عبارت زیر را تایپ کنید:

document.forms[0].elements[“phone”]

Text Box مربوط به Phone باید هایلایت شود.

Selenium Figure 10-5
Selenium Figure 10-5

موقعیت‌یابی بوسیله XPath

XPath زبان مورد استفاده در هنگام موقعیت‌یابی XML Nodeهاست(XML=Extensible Markup Language) است. از آنجا که HTML را می‌توان به عنوان یک پیاده‌سازی از XML در نظر گرفت، می‌توان از XPath برای موقعیت‌یابی عناصر HTML استفاده کنیم.

  • مزیت: می‌تواند تقریبا به هر عنصر(حتی آنهایی که فاقد Class، name و یا ID هستند) دسترسی پیدا کند.
  • عیب: این متد به دلیل برخورداری از قوانین و ملاحظات مختلف پیچیده‌ترین متد برای شناسایی عناصر به شمار می‌رود.

خوشبختانه، Firebug می‌تواند به طور خودکار XPath Locatorها را ایجاد کند. در مثال زیر ما به یک تصویر دسترسی پیدا می‌کنیم که از طریق روش‌هایی که قبلا مورد بحث قرار گرفته است نمی‌توان به آن دسترسی یافت.

مرحله ۱- به وب سایت Mercury Tours بروید و از Firebug برای بازرسی مستطیل نارنجی در سمت راست باکس زرد رنگ Links استفاده نمایید. به تصویر زیر مراجعه کنید.

Selenium Figure 10-6
Selenium Figure 10-6

مرحله ۲- بر روی کد HTML آن عنصر راست کلیک کرده و سپس گزینه “Copy XPath” را انتخاب کنید.

Selenium Figure 10-7
Selenium Figure 10-7

مرحله ۳- در Selenium IDE، در Target Box علامت “/” را تایپ کرده و سپس XPath را که در مرحله قبلی کپی کردیم در ادامه Paste کنید. این ورودی در Target Box اکنون باید با “//” شروع شود.

Selenium Figure 10-8
Selenium Figure 10-8

مرحله ۴- بر روی دکمه Find کلیک کنید. Selenium IDE باید بتواند جعبه نارنجی را همانند شکل زیر هایلایت کند.

Selenium Figure 10-9
Selenium Figure 10-9

Method

سینتکس مورد نظر

مثال

By ID

id= id_of_the_element

id=email

By Name

name=name_of_the_element

name=userName

By Name Using Filters

name=name_of_the_element
filter=value_of_filter

name=tripType value=oneway

By Link Text

link=link_text

link=REGISTER

Tag and ID

css=tag#id

css=input#email

Tag and Class

css=tag.class

css=input.inputtext

Tag and Attribute

css=tag[attribute=value]

css=input[name=lastName]

Tag, Class, and Attribute

css=tag.class[attribute=value]

css=input.inputtext[tabindex=1]

 

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

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

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

Selenium

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

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

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

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