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

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

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

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

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

Selenium WebDriver แสดงองค์ประกอบฟอร์มแบบง่ายๆ ในรูปแบบของอ็อบเจ็กต์ เว็บเอเลเมนต์.

WebDriver ระบุองค์ประกอบของฟอร์มโดยใช้คุณสมบัติต่างๆ ขององค์ประกอบเว็บ ได้แก่ ID, Name, Class, XPathรวมถึงชื่อแท็ก ตัวเลือก CSS และข้อความลิงก์

WebDriver มีเมธอด WebElement สองวิธีต่อไปนี้สำหรับค้นหาองค์ประกอบ:

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

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

ขั้นตอน 1) นำเข้าแพ็กเกจที่จำเป็นสำหรับการสร้างอ็อบเจ็กต์ WebElement

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

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

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

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

   

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

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

คุณสามารถใช้ปลั๊กอินอย่าง FirePath เพื่อรับค่า id, xpath และค่าระบุตำแหน่งอื่นๆ สำหรับองค์ประกอบต่างๆ ได้

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

1. ช่องป้อนข้อความอีเมลจะระบุตามรหัสประจำตัว
2. ช่องใส่รหัสผ่านจะอยู่ถัดจากชื่อ

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

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

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

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

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

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

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

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

Selenium คลิกปุ่ม

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

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

1. ค้นหาปุ่มเข้าสู่ระบบ
2. คลิกปุ่ม “เข้าสู่ระบบ” บนหน้าเข้าสู่ระบบของเว็บไซต์เพื่อยืนยันตัวตน

Selenium ปุ่มส่ง

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

เมื่อใช้เมธอด submit() WebDriver จะค้นหาใน DOM เพื่อระบุฟอร์มที่องค์ประกอบนั้นเป็นส่วนหนึ่ง จากนั้นจึงเรียกใช้ฟังก์ชัน submit ของฟอร์มนั้น

สมบูรณ์ Code

นี่คือโค้ดที่ใช้งานได้สมบูรณ์

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() ขณะค้นหาองค์ประกอบ แสดงว่าองค์ประกอบนั้นไม่มีอยู่ในหน้าเว็บในขณะที่ WebDriver เข้าถึง

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

สรุป

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

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

คำถามที่พบบ่อย