پنج شنبه , ۹ فروردین ۱۴۰۳

آموزش Selenium-قسمت دوازدهم: Web Element یک فرم در سلنیوم

Selenium
Selenium

فرم‌ها، عناصر پایه‌ای و اصلی در وب هستند که مسئولیت اصلی آنها نیز دریافت اطلاعات از بازدیدکنندگان وبسایت است. فرم‌ها وب دارای عناصر متفاوتی در سطح GUI هستند مانند:

  • Text Boxها
  • Password Fieldها
  • CheckBoxها
  • Radio Buttonها
  • Dropdown
  • File Inputها و غیره

ما چگونگی دسترسی به این عناصر مختلف روی فرم را توسط Selenium Web Driver(به همراه جاوا) خواهیم دید. سلنیوم هر عنصر فرم را به عنوان یک Object از WebElement کپی می‌کند. سلنیوم APIای فراهم می‌کند تا عناصر را پیدا نموده و Action را روی آنها دریافت نماید(مانند ورود متن به یک Text Box)، کلیک کردن روی دکمه‌ها و غیره. ما متدهایی را که برای دسترسی به هر عنصر از فرم وجود دارند را خواهیم دید.

مقدمه‌ای بر WebElement و ()findElements و  ()findElement

Selenium Web Driver یک Form Element ساده را به عنوان یک Object از WebElement کپسوله(Encapsulate) می‌کند.

تکنیک‌های مختلفی وجود دارد که WebDriver با استفاده از آن عناصر فرم را بر اساس Propertyهای مختلف عناصر وب(مانند Link Text,ID, Name, Class, XPath, Tagname, CSS Selector و غیره) شناسایی می‌کند.

Web Driver دو متد برای یافتن عناصر فراهم می‌کند.

  • ()findElement: یک عنصر وب را یافته و به عنوان یک Object از WebElement باز می‌گردد.
  • ()findElements: یک لیست از Objectهای WebElement را مطابق با معیارهای Locator باز می‌گرداند.

بیایید یک قطعه کد که ویژه دریافت یک عنصر منفرد است را با هم ببینیم(Text Field در یک صفحه وب به عنوان یک Object از WebElement با استفاده از متد ()findElement). ما متد ()findElements را که برای یافتن عناصر متعدد به کار می‌آید، در آموزش‌های بعدی پوشش می‌دهیم.

مرحله ۱: ما باید این بسته را برای ایجاد Objectهای عناصر وب Import کنیم

Selenium Figure 12-1
Selenium Figure 12-1

مرحله ۲: ما باید متد ()findElement را به صورت در دسترس در کلاس WebDriver فراخوانی نموده و یک Object از WebElement را بدست آوریم.

در ادامه همین مطلب نحوه انجام این کار ارائه می‌شود.

Input Box

Input Boxها به یکی از این دو نوع ارجاع می‌شوند:

۱- Text Fieldها: Text Boxهایی که مقادیر تایپ شده را قبول کرده و آنها را همانطور که هستند نشان می‌دهند.

۲- Password Fieldها: Text Boxهایی که که مقادیر تایپ شده را قبول می‌کنند اما آنها را به صورت یک رشته متشکل از کاراکترهای ویژه(معمولا نقطه و ستاره) ماسک می‌کند تا این مقادیر حساس نمایش داده نوشند.

Selenium Figure 12-2
Selenium Figure 12-2

Locatorها(موقعیت‌یاب‌ها)

متد ()findElement یک پارامتر دریافت می‌کند که یک Locator برای عنصر است. Locatorهای متفاوت مانند:

  • ()By.id
  • ()By.name
  • ()By.xpath
  • ()By.CSSSelector و غیره

این عناصر را در صفحه با استفاده از Propertyهای آن مانند ID، Name یا Path موقعیت‌یابی نمایید.

شما می‌توانید پلاگین‌هایی مانند Fire path را برای دریافت ID یا xpath یا دیگر Propertyهای عناصر استفاده کنید.

در استفاده از یک سایت مثالی، می‌توانید موقعیت‌یابی فیلد متنیِ “Email address” با استفاده از id locator و همچنین موقعیت‌یابیِ فیلد “Password” با استفاده از name locator را با کدی به صورت زیر تولید نمایید.

Selenium Figure 12-3
Selenium Figure 12-3

۱- Email Text Field با استفاده از ID موقعیت‌یابی می‌شود

۲- Password Field با استفاده از Name موقعیت‌یابی می‌شود

ورود مقادیر در Input Boxها

برای وارد کردن متن در Text Fieldها و Password Fieldها، ()sendKeys یک متد در دسترس  روی WebElement است.

در استفاده از همان سایت مثالی، این بار می‌توانید چگونگی یافتن Text Field و Password Field و وارد کردن مقادیر در آنها را با کدی به صورت زیر تولید نمایید.

Selenium Figure 12-4
Selenium Figure 12-4

۱- فیلد متنی “Email Address” با استفاده از id locator بیابد.

۲- فیلد “Password” را با استفاده از name locator بیابید.

۳- متن را با استفاده از متد ()sendKeys در “Email Address” وارد کنید.

۴- یک Password را با استفاده از متد ()sendKeys در فیلد “Password” وارد کنید.

پاک کردن مقادیر از Input Boxها

متد ()clear برای پاک کردن متن موجود در Input Box استفاده می‌شود. این متد نیازی به پاررامتر ندارد. قطعه کد زیر متن را از فیلدهای Email یا Password حذف می‌کند.

Selenium Figure 12-5
Selenium Figure 12-5

Buttonها

دکمه‌ها می‌توانند با استفاده از متد ()click قابل دسترسی باشند.

۱- Button  مربوطه را برای Sign in بیابید.

۲- برای ورود به سایت، روی دکمه “Sign-in” در صفحه login به سایت کلیک کنید.

Selenium Figure 12-6
Selenium Figure 12-6

Submit Buttonها

Submit Buttonها یا دکمه‌های ارسال برای ارسال کل فرم(کل اطلاعات فرم) به سرور مورد استفاده قرار می‌گیرند. ما می‌توانیم همانطور که در بالا هم انجام دادیم از متد ()click به صورت یک دکمه عادی بر روی این Web Element استفاده کنیم،  یا از متد ()submit روی هر Web Element موجود در فرم یا روی خود Submit Button استفاده کنیم.

Selenium Figure 12-7
Selenium Figure 12-7

هنگامیکه از ()submit بهره می‌گیرید، WebDriver به DOM نگاه می‌کند تا ببیند کدام عنصر متعلق به آن است و سپس Submit Function آنرا اجرا می‌کند.

کد کامل

در اینجا یک کد کامل عملیاتی وجود دارد:


import org.openqa.selenium.By;		
import org.openqa.selenium.WebDriver;		
import org.openqa.selenium.chrome.ChromeDriver;		
import org.openqa.selenium.*;		

public class Form {				
    public static void main(String[] args) {									
    		
    	// declaration and instantiation of objects/variables		
        System.setProperty("webdriver.chrome.driver","G:\\chromedriver.exe");					
        WebDriver driver = new ChromeDriver();					
        		
        String baseUrl = "http://demo.guru99.com/test/login.html";					
        driver.get(baseUrl);					

        // Get the WebElement corresponding to the Email Address(TextField)		
        WebElement email = driver.findElement(By.id("email"));							

        // Get the WebElement corresponding to the Password Field		
        WebElement password = driver.findElement(By.name("passwd"));							

        email.sendKeys("abcd@gmail.com");					
        password.sendKeys("abcdefghlkjl");					
        System.out.println("Text Field Set");					
         
        // Deleting values in the text box		
        email.clear();			
        password.clear();			
        System.out.println("Text Field Cleared");					

        // Find the submit button		
        WebElement login = driver.findElement(By.id("SubmitLogin"));							
                    		
        // Using click method to submit form		
        email.sendKeys("abcd@gmail.com");					
        password.sendKeys("abcdefghlkjl");					
        login.click();			
        System.out.println("Login Done with Click");					
        		
        //using submit method to submit the form. Submit used on password field		
        driver.get(baseUrl);					
        driver.findElement(By.id("email")).sendKeys("abcd@gmail.com");							
        driver.findElement(By.name("passwd")).sendKeys("abcdefghlkjl");							
        driver.findElement(By.id("SubmitLogin")).submit();					
        System.out.println("Login Done with Submit");					
         
		//driver.close();		
        		
    }		
}

عیب‌یابی(Troubleshooting)

اگر در هنگام یافتن عناصر با ()NoSuchElementException روبرو شدید، بدین معنیست که در این صفحه‌ و در نقطه‌ای که Web Driver به آن دسترسی دارد، عنصر مورد نظر یافت نشده است.

۱- دوباره Locator خود را با استفاده از Firepath یا Inspect Element در Chrome بررسی کنید.

۲- بررسی کنید که آیا مقداری که شما در کد استفاده کرده‌اید متفاوت از عنصر موجود در Firepath است.

۳- برخی از Propertyها برای چند عنصر، داینامیک هستند. در این حالت، شما خواهید دید که مقدار متغیر بوده و به صورت داینامیک در حال تغییر است، به همین دلیل باید از ()By.xpath یا ()By.cssSelector که راه های قابل اطمینان‌تر اما پیچیده‌تر هستند استفاده نمایید.

۴- گاهی اوقات ممکن است با مشکل wait مواجه شوید. مثلا Web Driver کد شما را اجرا می‌کند، اما این در حالیست که هنوز بارگذاری صفحه کامل نشده است.

۵- با استفاده از یک wait را با استفاده از Implicit Wait یا Explicit Wait قبل از ()findElement بیفزایید.

خلاصه

  • در زیر دستورالعمل‌های مناسب برای دسترسی به هر نوع عنصر مورد بحث در بالا به صورت خلاصه ارائه شده است:
    • Input Box: متدها عبارتند از ()sendKeys و ()clear
      • ()sendKeys: استفاده برای ورود مقادیر به Text Boxها
      • ()clear: استفاده برای پاک کردن مقادیر موجود در Text Boxها
    • Links: متد آن ()click است که برای کلیک روی یک Link و انتظار برای بارگذاری کامل صفحه قبل از ادامه عملیات و انتقال به فرمان بعدی استفاده می‌شود.
    • Submit Buttons: متد آن ()submit است
  • WebDriver اجازه انتخاب بیش از یک گزینه در یک SELECT element چندگانه را می‌دهد.
  • شما می‌توانید از متد ()submit برای هر عنصر درون فرم استفاده کنید. WebDriver به طور خودکار Submit Function مربوط به فرم را در جایی که این عنصر به آن تعلق دارد فعال می‌کند.

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

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

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

Selenium

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

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

۲ دیدگاه

  1. سلام وقت بخیر من به تازگی با کتابخانه یseleniumآشنا شدم و برای ساخت یک ربات واتس اپ با این خطا روبه رو میشم ممنون میشم اگر راهنماییم کنید چطوری برطرفش کنم.

    selenium.common.exceptions.NoSuchElementException: Message: Unable to locate element: ._2Ujuu

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

      سلام.
      کاملا مشخصه. اون Elementای که شما باید اون رو پیدا کنید تا با اون تعامل داشته باشید، رو نمیتونه پیدا کنه. یا واقعا چنین Elementای وجود نداره، و یا مکانیسم Locatingای که انتخاب کردید، پارامترهای اشتباه بهش پاس دادید. این یکی از Errorهای بسیار معمول در سلنیوم هست.

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

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