Phần tử Web trong Selenium

Phần tử Web trong Selenium

Biểu mẫu là các thành phần web cơ bản dùng để thu thập thông tin từ khách truy cập trang web. Biểu mẫu web bao gồm nhiều thành phần giao diện người dùng khác nhau như hộp văn bản, trường mật khẩu, hộp kiểm, nút chọn, menu thả xuống và ô nhập tệp.

Hướng dẫn này giải thích cách truy cập từng phần tử biểu mẫu bằng cách sử dụng Selenium WebDriver với Java. Selenium đóng gói mọi phần tử biểu mẫu dưới dạng đối tượng của WebElement. Nó cung cấp API để định vị các phần tử và thực hiện các thao tác trên chúng, bao gồm nhập văn bản, nhấp vào nút và gửi biểu mẫu. Các phần bên dưới mô tả các phương thức có sẵn cho từng phần tử biểu mẫu.

Giới thiệu về WebElement, findElement(), findElements()

Selenium WebDriver biểu diễn một phần tử biểu mẫu đơn giản dưới dạng một đối tượng. WebYếu tố.

WebDriver xác định các phần tử biểu mẫu bằng cách sử dụng các thuộc tính khác nhau của phần tử web, bao gồm ID, Tên, Lớp, XpathTên thẻ, bộ chọn CSS và văn bản liên kết.

WebDriver cung cấp hai phương thức WebElement sau để tìm các phần tử:

• tìm phần tử() – Tìm một phần tử web duy nhất và trả về nó dưới dạng WebElement Selenium vật.
• tìmElements() – trả về danh sách các đối tượng WebElement phù hợp với tiêu chí định vị.

Ví dụ dưới đây minh họa cách truy xuất một phần tử đơn lẻ, một trường văn bản trên trang web, dưới dạng đối tượng WebElement bằng phương thức findElement(). Phương thức findElements() để tìm nhiều phần tử sẽ được đề cập trong các bài hướng dẫn tiếp theo.

Bước 1) Nhập gói cần thiết để tạo các đối tượng WebElement.

Bước 2) Gọi phương thức findElement() có sẵn trên lớp WebDriver để truy xuất một đối tượng WebElement, như được hiển thị bên dưới.

Selenium Nhập ký tự

Hộp nhập liệu đề cập đến một trong hai loại sau:

1. Trường văn bản – Selenium Các ô nhập liệu văn bản chấp nhận giá trị được nhập và hiển thị chính xác như đã nhập.
2. Trường mật khẩu – Các hộp văn bản chấp nhận giá trị nhập vào nhưng che giấu chúng bằng một chuỗi ký tự đặc biệt (thường là dấu chấm hoặc dấu sao) để che đi thông tin nhạy cảm.

   

Bộ định vị

Phương thức findElement() nhận một tham số, đó là một bộ định vị trỏ đến phần tử. Các bộ định vị khác nhau, bao gồm By.id(), By.name(), By.xpath() và By.cssSelector(), tìm các phần tử trên trang bằng cách sử dụng các thuộc tính của chúng như id, name hoặc path.

Bạn có thể sử dụng các plugin như FirePath để lấy id, xpath và các giá trị định vị khác cho các phần tử.

Sử dụng trang web mẫu https://demo.guru99.com/test/login.htmlĐoạn mã bên dưới định vị trường văn bản “Địa chỉ email” bằng cách sử dụng bộ định vị id và trường “Mật khẩu” bằng cách sử dụng bộ định vị name.

1. Ô nhập email được định vị theo ID.
2. Ô nhập mật khẩu được đặt theo tên.

phím gửi trong Selenium

sendKeys() trong Selenium Đây là phương thức được sử dụng để nhập nội dung có thể chỉnh sửa vào các trường văn bản và mật khẩu trong quá trình thực thi kiểm thử. Các trường này được xác định thông qua các bộ định vị như tên, lớp và ID. Phương thức này có sẵn trên đối tượng WebElement. Không giống như phương thức kiểu, sendKeys() không thay thế văn bản hiện có trong hộp văn bản.

Cách nhập văn bản vào Selenium

Để nhập văn bản vào các trường văn bản và trường mật khẩu, phương thức sendKeys() có sẵn trên WebElement. Selenium.

Sử dụng cùng một ví dụ về https://demo.guru99.com/test/login.htmlĐoạn mã bên dưới định vị trường văn bản và trường mật khẩu, sau đó nhập văn bản vào. Selenium.

1. Tìm trường văn bản “Địa chỉ email” bằng cách sử dụng công cụ định vị ID.
2. Tìm trường “Mật khẩu” bằng cách sử dụng công cụ định vị tên.
3. Nhập văn bản vào “Địa chỉ email” bằng cách sử dụng Selenium Phương thức sendKeys.
4. Nhập mật khẩu vào trường “Mật khẩu” bằng phương thức sendKeys().

Xóa giá trị trong đầu vào Boxes

thông thoáng() Phương thức này xóa văn bản bên trong ô nhập liệu. Phương pháp này không cần tham số. Đoạn mã bên dưới xóa văn bản khỏi các trường Email hoặc Mật khẩu.

Selenium Bấm vào nút

Selenium Nút bấm được truy cập bằng phương thức click().

Trong ví dụ trên

1. Tìm nút Đăng nhập.
2. Nhấp vào nút “Đăng nhập” trên trang đăng nhập của trang web để xác thực.

Selenium Nút gửi

Nút gửi (Submit) sẽ gửi toàn bộ biểu mẫu đến máy chủ. Bạn có thể gọi phương thức click() trên WebElement, như đã hiển thị ở trên, hoặc sử dụng phương thức submit() trên bất kỳ phần tử nào trong biểu mẫu hoặc trên chính nút gửi.

Khi sử dụng phương thức submit(), WebDriver sẽ tra cứu DOM để xác định biểu mẫu mà phần tử đó thuộc về, sau đó kích hoạt hàm submit của nó.

Hoàn thành Code

Đây là đoạn mã hoàn chỉnh hoạt động được.

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();
    }
}

Xử lý sự cố

Nếu bạn gặp lỗi NoSuchElementException() khi tìm kiếm các phần tử, điều đó có nghĩa là phần tử đó không tồn tại trên trang tại thời điểm WebDriver truy cập.

1. Hãy kiểm tra lại vị trí của bạn bằng FirePath hoặc tùy chọn Kiểm tra phần tử trong Chrome.
2. Kiểm tra xem giá trị được sử dụng trong mã có khác với giá trị hiện tại của phần tử được hiển thị trong FirePath hay không.
3. Một số thuộc tính có tính động đối với một số phần tử nhất định. Nếu giá trị thay đổi động, hãy chuyển sang sử dụng By.xpath() hoặc By.cssSelector(), chúng đáng tin cậy hơn nhưng phức tạp hơn một chút.
4. Đôi khi vấn đề nằm ở điều kiện chờ; WebDriver có thể thực thi mã trước khi trang tải xong.
5. Thêm thời gian chờ trước findElement() bằng cách sử dụng thời gian chờ tiềm ẩn hoặc rõ ràng.

Tổng kết

• Bảng dưới đây tóm tắt các lệnh để truy cập từng loại phần tử đã được đề cập ở trên.

• WebDriver cho phép lựa chọn nhiều tùy chọn trong nhiều phần tử CHỌN.
• Bạn có thể sử dụng phương thức `submit()` trên bất kỳ phần tử nào trong biểu mẫu. WebDriver sẽ tự động kích hoạt chức năng gửi của biểu mẫu mà phần tử đó thuộc về.

Câu Hỏi Thường Gặp