Webองค์ประกอบใน Selenium

แบบฟอร์มเป็นองค์ประกอบพื้นฐานบนเว็บที่ใช้รับข้อมูลจากผู้เยี่ยมชมเว็บไซต์ แบบฟอร์มบนเว็บมีองค์ประกอบ GUI ต่างๆ เช่น กล่องข้อความ ช่องรหัสผ่าน ช่องกาเครื่องหมาย ปุ่มตัวเลือก เมนูแบบดรอปดาวน์ อินพุตไฟล์ เป็นต้น

เราจะดูวิธีเข้าถึงองค์ประกอบแบบฟอร์มต่างๆ เหล่านี้โดยใช้ Selenium เว็บไดร์เวอร์ด้วย Java. Selenium สรุปองค์ประกอบทุกรูปแบบเป็นวัตถุของ WebElement มี API เพื่อค้นหาองค์ประกอบและดำเนินการกับองค์ประกอบเหล่านั้น เช่น การป้อนข้อความลงในกล่องข้อความ การคลิกปุ่ม ฯลฯ เราจะดูวิธีการที่ใช้ได้ในการเข้าถึงองค์ประกอบแบบฟอร์มแต่ละองค์ประกอบ

ข้อมูลเบื้องต้นเกี่ยวกับ WebElement, findElement(), findElements()

Selenium Web Driver สรุปองค์ประกอบแบบฟอร์มอย่างง่ายเป็นวัตถุของ Webองค์ประกอบ

มีเทคนิคต่างๆ มากมายที่ WebDriver ระบุองค์ประกอบของฟอร์มตามคุณสมบัติที่แตกต่างกันขององค์ประกอบเว็บ เช่น ID, ชื่อ, คลาส, XPath, ชื่อแท็ก, ตัวเลือก CSS, ข้อความลิงก์ ฯลฯ

Web Driver มีวิธีการ WebElement สองวิธีต่อไปนี้เพื่อค้นหาองค์ประกอบ

ค้นหาองค์ประกอบ() – ค้นหาองค์ประกอบเว็บเดียวและส่งกลับเป็น WebElement Selenium วัตถุ.
ค้นหาองค์ประกอบ() – ส่งคืนรายการวัตถุ WebElement ที่ตรงกับเกณฑ์ตัวระบุตำแหน่ง

มาดูตัวอย่างโค้ดเพื่อรับองค์ประกอบเดียว - ฟิลด์ข้อความในหน้าเว็บเป็นออบเจ็กต์ของ WebElement โดยใช้เมธอด findElement() เราจะกล่าวถึงวิธีการ findElements() ในการค้นหาองค์ประกอบต่างๆ ในบทช่วยสอนครั้งต่อไป

ขั้นตอน 1) เราจำเป็นต้องนำเข้าแพ็คเกจนี้เพื่อสร้างออบเจ็กต์ของ Web Elements

ขั้นตอน 2) เราจำเป็นต้องเรียกใช้เมธอด findElement() ที่มีอยู่ในคลาส WebDriver และรับอ็อบเจ็กต์ของ WebElement

ดูด้านล่างเพื่อดูว่ามันเสร็จสิ้นอย่างไร

Selenium ป้อนข้อความ

กล่องอินพุตจะอ้างอิงถึงประเภทใดประเภทหนึ่งจากสองประเภทนี้:

ช่องข้อความ- Selenium กล่องข้อความอินพุตที่ยอมรับค่าที่พิมพ์และแสดงตามที่เป็น
ช่องรหัสผ่าน– กล่องข้อความที่ยอมรับค่าที่พิมพ์ แต่ปกปิดไว้ด้วยชุดอักขระพิเศษ (โดยทั่วไปคือจุดและดอกจัน) เพื่อหลีกเลี่ยงการแสดงค่าละเอียดอ่อน

ตัวระบุตำแหน่ง

เมธอด findElement() รับพารามิเตอร์หนึ่งตัวซึ่งเป็นตัวระบุตำแหน่งไปยังองค์ประกอบ ตัวระบุตำแหน่งต่างๆ เช่น By.id(), By.name(), By.xpath(), By.CSSSelector() ฯลฯ ค้นหาองค์ประกอบในเพจโดยใช้คุณสมบัติ เช่น“““ id ชื่อหรือเส้นทาง เป็นต้น

คุณสามารถใช้ปลั๊กอิน เช่น Fire path เพื่อรับความช่วยเหลือในการรับ ID, xpath ฯลฯ ขององค์ประกอบต่างๆ

การใช้ไซต์ตัวอย่าง https://demo.guru99.com/test/login.html ด้านล่างนี้คือโค้ดสำหรับค้นหาช่องข้อความ “ที่อยู่อีเมล” โดยใช้ตัวระบุตำแหน่ง ID และช่อง “รหัสผ่าน” โดยใช้ตัวระบุตำแหน่งชื่อ

ช่องข้อความอีเมล์จะอยู่ที่รหัส
ฟิลด์รหัสผ่านตั้งอยู่ตามชื่อ

ส่งคีย์เข้า Selenium

sendkeys() ใน Selenium เป็นวิธีที่ใช้ในการป้อนเนื้อหาที่แก้ไขได้ในช่องข้อความและรหัสผ่านระหว่างการดำเนินการทดสอบ โดยช่องเหล่านี้จะถูกระบุโดยใช้ตัวระบุตำแหน่ง เช่น ชื่อ คลาส ไอดี เป็นต้น เป็นวิธีการที่มีให้ใช้งานในองค์ประกอบบนเว็บ ไม่เหมือนกับวิธีการประเภท วิธีการ sendkeys() จะไม่แทนที่ข้อความที่มีอยู่ในกล่องข้อความใดๆ

วิธีใส่ข้อความ Selenium

หากต้องการป้อนข้อความลงในฟิลด์ข้อความและฟิลด์รหัสผ่าน sendKeys() เป็นวิธีการที่มีอยู่ใน WebElement ใน Selenium.

โดยใช้ตัวอย่างเดียวกันของ https://demo.guru99.com/test/login.html ต่อไปนี้คือวิธีที่เราค้นหาช่องข้อความและช่องรหัสผ่านและป้อนข้อความ Selenium.

ค้นหาช่องข้อความ “ที่อยู่อีเมล” โดยใช้ตัวระบุ ID
ค้นหาช่อง "รหัสผ่าน" โดยใช้ตัวระบุชื่อ
ป้อนข้อความลงใน “ที่อยู่อีเมล” โดยใช้ Selenium วิธีการ sendkeys
ป้อนรหัสผ่านในช่อง "รหัสผ่าน" โดยใช้เมธอด sendKeys()

การลบค่าในอินพุต Boxes

การขอ ชัดเจน() วิธีนี้ใช้ในการลบข้อความในกล่องอินพุต วิธีการนี้ไม่จำเป็นต้องมีพารามิเตอร์โค้ดสั้นๆ ด้านล่างนี้จะล้างข้อความจากช่องอีเมลหรือรหัสผ่าน

Selenium คลิกปุ่ม

การขอ Selenium สามารถเข้าถึงปุ่มคลิกได้โดยใช้เมธอด click()

ในตัวอย่างข้างต้น

ค้นหาปุ่มเพื่อลงชื่อเข้าใช้
คลิกที่ปุ่ม "ลงชื่อเข้าใช้" ในหน้าเข้าสู่ระบบของเว็บไซต์เพื่อเข้าสู่ระบบเว็บไซต์

Selenium ปุ่มส่ง

ปุ่มส่งใช้เพื่อส่งแบบฟอร์มทั้งหมดไปยังเซิร์ฟเวอร์ เราสามารถใช้วิธีคลิก () บนองค์ประกอบเว็บเหมือนปุ่มปกติดังที่เราได้ดำเนินการข้างต้น หรือใช้วิธีส่ง () บนองค์ประกอบเว็บใดๆ ในแบบฟอร์มหรือบนปุ่มส่งเอง

เมื่อใช้ send() WebDriver จะค้นหา DOM เพื่อทราบว่าองค์ประกอบอยู่ในรูปแบบใด จากนั้นจึงทริกเกอร์ฟังก์ชัน send

กรอกรหัส

นี่คือรหัสการทำงานที่สมบูรณ์

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 = "https://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();		
        		
    }		
}

การแก้ไขปัญหา

หากคุณพบ NoSuchElementException() ขณะค้นหาองค์ประกอบ แสดงว่าไม่พบองค์ประกอบนั้นในเพจ ณ จุดที่ไดรเวอร์เว็บเข้าถึงเพจ

ตรวจสอบเครื่องระบุตำแหน่งของคุณอีกครั้งโดยใช้ Firepath หรือ Inspect Element ใน Chrome
ตรวจสอบว่าค่าที่คุณใช้ในโค้ดแตกต่างจากค่าสำหรับองค์ประกอบใน Firepath ทันทีหรือไม่
คุณสมบัติบางอย่างเป็นแบบไดนามิกสำหรับองค์ประกอบบางส่วน ในกรณีที่คุณพบว่าค่าแตกต่างกันและเปลี่ยนแปลงแบบไดนามิก ให้พิจารณาใช้ By.xpath() หรือ By.cssSelector() ซึ่งเป็นวิธีที่เชื่อถือได้มากกว่าแต่ซับซ้อนกว่า
บางครั้งอาจเป็นปัญหาเรื่องการรอเช่นกัน เช่น เว็บไดรเวอร์รันโค้ดของคุณก่อนที่เพจจะโหลดเสร็จสมบูรณ์ เป็นต้น
เพิ่มการรอก่อน findElement() โดยใช้การรอโดยนัยหรือชัดเจน

สรุป

ตารางด้านล่างสรุปคำสั่งในการเข้าถึงองค์ประกอบแต่ละประเภทที่กล่าวถึงข้างต้น

ธาตุ	คำสั่ง	Descriptไอออน
อินพุต Box	sendKeys()	ใช้ในการป้อนค่าลงในกล่องข้อความ
อินพุต Box	ชัดเจน()	ใช้เพื่อล้างกล่องข้อความของค่าปัจจุบัน
การเชื่อมโยง	คลิก()	ใช้ในการคลิกลิงค์และรอให้โหลดเพจเสร็จก่อนจึงจะดำเนินการคำสั่งถัดไป
ส่งปุ่ม	ส่ง()

WebDriver อนุญาตให้เลือกตัวเลือกมากกว่าหนึ่งตัวเลือกในองค์ประกอบ SELECT หลายรายการ
คุณสามารถใช้เมธอด send() กับองค์ประกอบใดๆ ภายในแบบฟอร์มได้ WebDriver จะทริกเกอร์ฟังก์ชันส่งของแบบฟอร์มที่เป็นขององค์ประกอบนั้นโดยอัตโนมัติ