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

نوشته های مرتبط

آموزش JMeter-قسمت یازدهم: Test Plan و Controllerها(بخش اول)

شهریور ۳, ۱۳۹۸

آموزش Selenium-قسمت نوزدهم: آموزش کامل XPath در Selenium WebDriver(بخش اول)

اردیبهشت ۱۳, ۱۳۹۸

آموزش Selenium-قسمت هجدهم: نحوه آپلود و دانلود فایل با استفاده از Selenium Webdriver

اردیبهشت ۱۲, ۱۳۹۸

 

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

موقعیت‌یابی بوسیله CSS Selector – تگ و ID

باز هم می‌خواهیم در این مثال از Text Box مربوط به Facebook Email استفاده نماییم. همانطور که می‌توانید به خاطر بیاورید، این قسمت یک ID از”Email” داشت، و ما قبلا آن را در قسمت “موقعیت یابی با ID”(قسمت هفتم آموزش) مشاهده کردیم. اکنون می‌خواهیم، از CSS Selector با ID به همان عنصر دسترسی پیدا کنیم.

سینتکس	شرح
css=tag#id	* tag = عبارتست از HTML Tag از یک عنصری که قابل دسترسیست * # = همان Hash Sign است. این علامت همیشه باید زمانیکه از یک CSS Selector به همراه ID استفاده می‌کنید نمایش داده شود * id = عبارتست از ID عنصری که قابل دسترسیست

مرحله ۱- به www.facebook.com بروید. با استفاده از Firebug، تکست باکس “Email or Phone” را بررسی کنید.

در این مرحله توجه داشته باشید که HTML Tag شما “input” است و ID آن “Email” است. بنابراین سینتکس ما چنین “css=input#email” خواهد شد.

مرحله ۲- “css=input#email” را در باکس مربوط به Selenium IDE وارد کرده و روی دکمه Find کلیک کنید. Selenium IDE باید بتواند این عنصر را هایلایت کند.

موقعیت‌یابی بوسیله CSS Selector – تگ و Class

موقعیت‌یابی بوسیله CSS Selector با استفاده از یک HTML Tag و Class Name مشابه استفاده از Tag و ID است، اما در این مورد، به جای Hash Sign از یک علامت Dot یا “.” استفاده می‌شود.

سینتکس	شرح
css=tag.class	* tag = عبارتست از HTML Tag از یک عنصری که قابل دسترسیست * . = همان Dot Sign است. این علامت همیشه باید زمانیکه از یک CSS Selector به همراه Class استفاده می‌کنید نمایش داده شود * class = عبارتست از کلاس عنصری که قابل دسترسیست

مرحله ۱- به صفحه دمو به این آدرس بروید و از فایرفاکس برای بررسی تکست باکس “Email or Phone” استفاده کنید. توجه داشته باشید که HTML Tag آن “input” بوده و کلاس آن “inputtext” است.

مرحله ۲- در Selenium IDE، و در Text Box مربوطه “css=input.inputtext” وارد کرده و روی Find کلیک کنید. Selenium IDE باید قادر باشد تکست باکس “Email or Phone” را شناسایی کند.

توجه داشته باشید که وقتی عناصر چندگانه همان HTML Tag و نام را دارند، تنها عنصر اول در Source Code شناسایی خواهند شد. با استفاده از Firebug، تکست باکس مربوط به Password را در Facebook بازبینی کنید و دقت داشته باشید که دارای نام برابر با تکست باکس “Email or Phone” می‌باشد.

دلیل اینکه چرا فقط تکست باکس “Email or Phone” در تصویر قبلی هیلایت شد این است که آن را برای اولین بار در منبع صفحه Facebook می‌آید.

موقعیت‌یابی بوسیله CSS Selector – تگ و Attribute

این استراتژی با استفاده از HTML Tag و Attribute خاصی از عنصر، قابل دسترسی است.

سینتکس	شرح
[css=tag[attribute=value	* tag = عبارتست از HTML Tag از یک عنصری که قابل دسترسیست * [ ] = براکت‌ها که در آن یک Attribute خاص و مقدار متناظر آن قرار داده می شود * attribute = عبارتست از Attribute مورد استفاده. توصیه می شود از Attributeهایی استفاده کنید که برای عنصر حالت یکتایی دارند، مانند name یا ID * value = عبارتست از مقدار متناظر با Attribute انتخابی

مرحله ۱- عملیات را به سمت صفحه ثبت نام Mercury Tours در اینجا هدایت نموده و تکسن باکس “Last Name” را بررسی کنید. توجه داشته باشید که HTML Tag آن در این مورد “input” و name آن نیز “lastName”  است.

مرحله ۲- در Selenium IDE، در Text Box مربوطه  را وارد کرده و روی Find کلیک کنید. Selenium IDE باید بتواند باکس مربوط به Last Name را با موفقیت پیدا کند.

هنگامی که عناصر چندگانه HTML Tag و Attribute یکسان دارند، تنها اولین عنصر به رسمیت شناخته می‌شود. این رفتار شبیه موقعیت‌یابی عناصر با استفاده از CSS Selectorها با همان Tag و Class است.

موقعیت‌یابی بوسیله CSS Selector – تگ، Class و Attribute

سینتکس

شرح

[css=tag.class[attribute=valueue

* tag = عبارتست از HTML Tag از یک عنصری که قابل دسترسیست * . = همان Dot Sign است. این علامت همیشه باید زمانیکه از یک CSS Selector به همراه Class استفاده می‌کنید نمایش داده شود * class = عبارتست از کلاس عنصری که قابل دسترسیست * [ ] = براکت‌ها که در آن یک Attribute خاص و مقدار متناظر آن قرار داده می شود * attribute = عبارتست از Attribute مورد استفاده. توصیه می شود از Attributeهایی استفاده کنید که برای عنصر حالت یکتایی دارند، مانند name یا ID * value = عبارتست از مقدار متناظر با Attribute انتخابی

مرحله ۱- به صفحه نسخه دمو در اینجا بروید و از Firebug برای بازرسی Input Boxهای “‘Email or Phone” و “Password” استفاده کنید. HTML Tag، Class و Attributeهای خود را در نظر بگیرید. برای این مثال، ما Attributeهای “tabindex” خود را انتخاب خواهیم کرد.

مرحله ۲- ما می‌خواهیم ابتدا به تکست باکس “Email or Phone” دسترسی پیدا کنیم. بنابراین، ما از tabindex value با مقدار ۱ استفاده خواهیم کرد.  را در باکس مورد نظر از Selenium IDE وارد کرده و روی Find کلیک کنید. باید Input Box مربوط به ‘Email or Phone’ هایلایت شود.

مرحله ۳- برای دسترسی به Password  Input Box، به سادگی مقدار tabindex attribute را جایگزین کنید.  را در باکس مورد نظر وارد کرده و روی دکمه Find کلیک کنید. Selenium IDE باید بتواند Password Text Box را با موفقیت شناسایی کند.

موقعیت‌یابی بوسیله CSS Selector – متن داخلی(Inner Text)

همانطور که احتمالا متوجه شده‌اید، HTML Labelها به ندرت دارای Attributeهای id، name و Class هستند. پس ما چگونه به آنها دسترسی پیدا می‌کنیم؟ پاسخ این است: “از طریق استفاده از Inner Text آنها”. Inner Text یا متن داخلی، الگوهای رشته‌ای واقعی هستند که HTML Label روی صفحه نشان می‌دهد.

سینتکس	شرح
("css=tag:contains("inner text	* tag = عبارتست از HTML Tag از یک عنصری که قابل دسترسیست * inner text = عبارتست از متن داخلی عنصر

مرحله ۱- به صفحه اصلی Mercury Tours در اینجا بروید و از Firebug برای بررسی Password” Label” استفاده کنید. به HTML Tag آن (که در این مورد “font” است) توجه کنید و دقت کنید که آن فاقد Attributeهای id، name و Class است.

مرحله ۲- در Text Box مورد نظر از Selenium IDE، رشته (“:css=font:contains(“Password را تایپ کرده و Find را کلیک کنید. Selenium IDE باید آنچنانکه در تصویر زیر نشان داده دشه است بتواند به Password Label دسترسی پیدا کند.

مرحله ۳- این بار، Inner Text را با “Boston” جایگزین کنید تا هدف شما “(“css=font:contains(“Boston” شود. روی Find کلیک کنید. اکنون شما متوجه خواهید شد که لِیبِل “Boston to San Francisco” هایلایت می‌شود. این نشان می‌دهد که Selenium IDE می‌تواند به یک برچسب طولانی دسترسی پیدا کند، حتی اگر شما فقط به قسمت اول Inner Text خود اشاره کنید.

 

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