Selenium có hoạt động với HTML không?
|
Làm việc với Danh sách trong HTML bằng WebDriver là một chủ đề quan trọng để tự động hóa loại dự án thương mại điện tử Show
Danh sách là gì?Danh sách là tập hợp các loại dữ liệu tương tự và làm cho mọi thứ có thể hiển thị và dễ đọc trên Trang web. Có hai loại danh sách trong HTML
Ví dụ
Ví dụ
Hãy cho chúng tôi hiểu làm thế nào để lặp qua một danh sách. Nó sẽ giống nhau cho cả hai loại Danh sách có thứ tự và không có thứ tự. Hãy để chúng tôi xem xét kịch bản tìm kiếm bên dưới trên bất kỳ trang web thương mại điện tử nào nói eBay. Trong
Đây là Mã mẫu package day4;
import java.util.List;
import org.openqa.selenium.By;
import org.openqa.selenium.WebDriver;
import org.openqa.selenium.WebElement;
import org.openqa.selenium.chrome.ChromeDriver;
import org.openqa.selenium.support.ui.Select;
public class EbayProject {
WebDriver Driver;
public void invokeBrowser(){
/*Setting property of a system variable used by chrome driver*/
System.setProperty("webdriver.chrome.driver", "C:\\Users\\sdhingra\\workspace\\libs\\chromedriver.exe");
Driver = new ChromeDriver();
String url = "http://www.ebay.in";
//To maximise the browser
Driver.manage().window().maximize();
// Driver.manage().deleteAllCookies();
Driver.get(url);
}
public void searchProduct(String product, String category){
Driver.findElement(By.id("gh-ac")).sendKeys(product);
WebElement dropElement = Driver.findElement(By.id("gh-cat"));
Select dropdown = new Select(dropElement);
dropdown.selectByVisibleText("Watches");
Driver.findElement(By.id("gh-btn")).click();
String result = Driver.findElement(By.className("listingscnt")).getText();
System.out.println("Result is : "+ result);
}
public void searchAllProduct(){
ListVí dụ này là phần tiếp theo của hướng dẫn trước. Phần giải thích chi tiết từ bước 1 đến bước 6 có trong Làm việc với DropDowns. Hãy tập trung vào Bước 7 và 8 7. Tìm nạp tất cả các WebElements từ Danh sách và lưu trữ trong Cấu trúc dữ liệu List Bất cứ khi nào chúng tôi phải tìm nạp nhiều hơn một WebElement, chúng tôi sẽ sử dụng Danh sách (Cấu trúc dữ liệu) từ Java. đồ dùng. Ở đây, chúng tôi đã khai báo Danh sách loại WebElement và vì chúng tôi phải định vị nhiều phần tử nên chúng tôi sẽ sử dụng phương thức findElements(). Đoạn mã trên sẽ tìm thấy danh sách đầy đủ. Tham khảo Ảnh chụp màn hình bên dưới- Tìm nạp danh sách bằng trình định vị XPath 8. Lặp lại Danh sách bằng cách sử dụng vòng lặp for (for-each) nâng cao cho (Sản phẩm WebElement. tất cảSản phẩm){ Hệ thống. ngoài. println(sản phẩm. getText()); Hệ thống. ngoài. println(“************************************************ Mã này đang tìm nạp tất cả các sản phẩm từ danh sách trong "sản phẩm" của WebElement và sau đó sẽ in từng sản phẩm từ toàn bộ danh sách. Phương thức được sử dụng để tìm nạp văn bản là getText() Tương tự, bạn có thể sử dụng đoạn mã trên để đạt được bất kỳ điều gì bạn muốn từ danh sách. Nếu tôi phải tóm tắt đoạn mã trên. Nó sẽ là
Hy vọng bạn thích bài viết trên Đối với bất kỳ câu hỏi, thắc mắc hoặc ý kiến. Vui lòng viết thư cho chúng tôi tại amrita@qatechhub. com hoặc support@qatechhub. com. Học vui vẻ 🙂 Selenium là một công cụ để tự động hóa trình duyệt. Nó có thể thực hiện các hành động như nhấp vào nút hoặc liên kết, nhập văn bản vào trường nhập liệu và bất kỳ thao tác nào mà người dùng thực có thể thực hiện thủ công. Selenium được sử dụng để kiểm tra tự động và hơn thế nữa. Bạn làm gì với Selenium là tùy thuộc vào bạn và trong bài đăng này, bạn sẽ tìm hiểu cách chọn các phần tử từ menu thả xuống và cách sử dụng thẻ chọn HTML trong Selenium điều kiện tiên quyếtTrước khi chúng ta bắt đầu, bạn cần có
thủ tụcBây giờ, hãy xem qua các bước từ cài đặt Selenium đến viết mã JavaScript điều khiển trình duyệt. Sau đó, chúng ta sẽ xem xét ba ví dụ sử dụng Selenium, được liệt kê bên dưới
Nhưng trước tiên, bạn phải hoàn thành bốn bước sau 1. Tạo một thư mục làm việc cho dự án của bạnĐể cho phép bạn theo dõi, chúng tôi sẽ bắt đầu bằng cách thiết lập một thư mục nơi bạn sẽ lưu trữ mã và tệp của mình. Để thực hiện việc này, hãy tạo một thư mục mới ở đâu đó trên máy tính của bạn. Đối với ví dụ này, đường dẫn đầy đủ cho thư mục là. “/Người dùng/tên người dùng/phát triển/ví dụ thả xuống“ 2. Cài đặt SeleniumNếu nó chưa được cài đặt, bạn sẽ cần cài đặt Selenium trên máy của mình. Để cài đặt Selenium, hãy mở dấu nhắc lệnh hoặc thiết bị đầu cuối và đặt thư mục làm việc vào thư mục bạn đã tạo trước đó bằng cách gõ lệnh sau cd /Người dùng/tên người dùng/phát triển/ví dụ thả xuống Thay thế “/Users/username/Development/dropdown-example” bằng đường dẫn đầy đủ đến thư mục của bạn Sau đó, nhập lệnh sau tại dấu nhắc lệnh hoặc trong terminal để cài đặt Selenium Node. gói js npm cài đặt selen-webdriver Chạy lệnh sau để tạo gói. json cho thư mục dự án của bạn Mở rộng phạm vi thử nghiệm của bạnTác giả nhanh chóng và linh hoạt của các bài kiểm tra đầu cuối được hỗ trợ bởi AI — được xây dựng để mở rộng quy mô Bắt đầu thử nghiệm miễn phí3. Thiết lập WebDriverĐể kiểm soát trình duyệt của bạn và chạy mã tự động hóa của bạn, Selenium yêu cầu WebDriver. Truy cập các url sau tại đây để tải xuống phiên bản WebDriver chính xác cho hệ điều hành và trình duyệt cụ thể của bạn Ảnh chụp màn hình từ trang tải xuống WebDriver hiển thị các trình duyệt và hệ điều hành được hỗ trợ Quy trình thiết lập WebDriver cho Chrome và Firefox trên Mac OS và Windows được giải thích bên dưới Trích xuất nội dung của tệp zip đã tải xuống vào một thư mục trên máy tính của bạn. Ví dụ của chúng tôi, chúng tôi sẽ trích xuất nội dung vào /Users/username/Development/WebDrive Tiếp theo, bạn sẽ cần thêm tệp thực thi WebDriver vào đường dẫn hệ thống của mình Để làm điều đó trên Mac OS, hãy nhập lệnh sau vào terminal xuất PATH=$PATH. /Người dùng/ea/phát triển/webDriver >> ~. Hồ sơ Đối với người dùng Windows, hãy mở dấu nhắc lệnh và chạy lệnh sau đường dẫn setx /m "%path%;C. \webDriver\bin\" Hãy nhớ thay đổi đường dẫn thành đường dẫn chính xác cho nơi bạn đã trích xuất tệp nhị phân WebDriver Để kiểm tra những gì chúng tôi đã làm cho đến nay, hãy tạo một tệp mới trong thư mục làm việc của dự án mà bạn đã tạo trước đó, dán đoạn mã sau vào tệp và lưu tệp dưới dạng chỉ mục. js const {Trình tạo, Bởi, Khóa, cho đến khi} = require('Selenium-webdriver'); hãy để trình điều khiển = đang chờ Trình tạo mới (). forBrowser('firefox'). xây dựng(); đợi tài xế. nhận ('https. //www. Google. com'); // Nhập văn bản "Testim" vào trường nhập tìm kiếm đợi tài xế. findElement(By. tên('q')). sendKeys('Kiểm tra', Khóa. ĐI VÀO); let firstResult = đang chờ trình điều khiển. đợi đến khi. phần tửLocation(By. css('h3>div')), 10000); bảng điều khiển. nhật ký (chờ kết quả đầu tiên. getAttribute('textContent')); Sau đó nhập lệnh sau vào cửa sổ đầu cuối của bạn để chạy chỉ mục. js Các hành vi mong đợi như sau
Tại thời điểm này, chúng tôi đã thiết lập tất cả Selenium và WebDriver và chúng tôi đã sẵn sàng bắt đầu viết mã sẽ tương tác với danh sách thả xuống. Bây giờ Hãy xem xét ba ví dụ được liệt kê trước đó ví dụ 1. Chọn Tùy chọn Từ HTML Chọn ThẻĐể đạt được điều này, bạn sẽ tạo một tài liệu HTML chứa thẻ chọn với một số tùy chọn. Trong thư mục làm việc của dự án, hãy tạo một tệp HTML mới, dán đoạn mã sau vào tệp và lưu dưới dạng trang. html
mở chỉ mục. js trong trình soạn thảo văn bản và cập nhật nội dung (xóa nội dung trước đó) thành nội dung sau const {Trình tạo, Bởi, Khóa, cho đến khi} = require('Selenium-webdriver'); hãy để trình điều khiển = đang chờ Trình tạo mới (). forBrowser('firefox'). xây dựng(); đợi tài xế. có được file. ///Người dùng/ea/phát triển/ví dụ thả xuống/trang. html'); đợi tài xế. findElement(By. tên ('số')). nhấp chuột(); đợi tài xế. findElement(By. xpath("//*[@id=\"số\"]/tùy chọn[4]")). nhấp chuột(); Mẫu mã ở trên khởi chạy Firefox và tải trang. html mà chúng tôi đã tạo trước đó, định vị thẻ chọn số từ trang của bạn và mô phỏng thao tác nhấp vào phần tử. Dòng mã thứ ba trong khối thử định vị tùy chọn thứ tư bên trong thẻ chọn và thực hiện nhấp chuột vào phần tử đó ví dụ 2. Chọn nhiều tùy chọn từ một thẻ chọnTrong ví dụ trước, chúng ta đã xem cách chọn một tùy chọn từ thẻ chọn HTML. Bây giờ, hãy xem cách chúng ta có thể chọn nhiều tùy chọn từ thẻ nhiều lựa chọn Chúng tôi đã bao gồm mã HTML cần thiết cho ví dụ này trong trang. html. Phần tử chọn thứ hai trong tài liệu HTML đã bật tính năng đa lựa chọn. Bạn có thể thấy điều này trong dòng sau từ mã Thuộc tính mới trong đoạn mã trên là nhiều. Bạn có thể thử tải tài liệu theo cách thủ công trong trình duyệt để xem hoạt động của phần tử đa lựa chọn Để chọn các tùy chọn từ phần tử đã chọn, hãy mở chỉ mục. js và tìm dòng sau đợi tài xế. findElement(By. xpath("//*[@id=\"số\"]/tùy chọn[4]")). nhấp chuột(); Thêm mẫu mã bên dưới ngay sau dòng đó đợi tài xế. findElement(By. xpath("//*[@id=\"city\"]/option[1]")). nhấp chuột(); đợi tài xế. findElement(By. xpath("//*[@id=\"city\"]/option[4]")). nhấp chuột(); Lưu tệp và chạy chỉ mục. js sử dụng chỉ mục nút. lệnh js một lần nữa Bạn sẽ thấy các tùy chọn đầu tiên và thứ tư được chọn Để bỏ chọn một tùy chọn trong thẻ chọn nhiều lần, hãy thực hiện thao tác nhấp khác trên một tùy chọn đã chọn. Ví dụ: thêm đoạn mã sau vào bên dưới các dòng chúng tôi đã thêm ở bước trước đợi tài xế. findElement(By. xpath("//*[@id=\"city\"]/option[1]")). nhấp chuột(); Đoạn mã trên sẽ khiến trình duyệt bỏ chọn tùy chọn 1 ví dụ 3. Chọn một mục menu thả xuốngThủ thuật cuối cùng của chúng ta với Selenium là nhấp và chọn một mục từ menu thả xuống. Mã ví dụ của chúng tôi sử dụng Bootstrap 4 Dropdown. Mã cho ví dụ này đã được bao gồm trong trang. tệp html mở chỉ mục. js trong trình soạn thảo văn bản và tìm dòng sau đợi tài xế. findElement(By. xpath("//*[@id=\"city\"]/option[4]")). nhấp chuột(); Ngay bên dưới dòng đó, chèn một dòng mới với mã sau đợi tài xế. findElement(By. xpath("//*[@id=\"dropdownMenuButton\"]")). nhấp chuột(); đợi tài xế. findElement(By. xpath("/html/body/div/div[3]/div/a[2]")). nhấp chuột(); Khi bạn đã hoàn tất, hãy lưu tệp và chạy chỉ mục. js sử dụng chỉ mục nút. lệnh js một lần nữa Selenium sẽ thực hiện nhấp chuột vào nút menu thả xuống và chọn mục menu thứ hai GIF bên dưới ghi lại cả 3 ví dụ đang hoạt động XPathTrong cả ba ví dụ, chúng tôi đã sử dụng XPath để định vị các phần tử HTML cụ thể. XPath là viết tắt của Đường dẫn XML. Nó cung cấp một cú pháp để định vị các thành phần trong trang web hoặc tài liệu XML. Ví dụ: XPath sau đây trỏ đến thẻ tùy chọn được lồng bên trong thẻ chọn //*[@id=\"số\"]/tùy chọn[4] Trong trường hợp này, phần tử cụ thể là thẻ tùy chọn thứ tư bên trong thẻ chọn có số id Để lấy giá trị XPath cho một phần tử trên trang web bằng Chrome, hãy nhấp chuột phải vào bất kỳ đâu trên trang web và chọn Kiểm tra để mở cửa sổ trình kiểm tra. Điều hướng đến phần tử bạn muốn lấy XPath, nhấp chuột phải vào phần tử đó và chọn Sao chép > Sao chép XPath. Quá trình cho Firefox là tương tự Selenium có thể định vị các phần tử HTML bằng cách sử dụng By. phương thức xpath(). Khi phần tử được định vị, Selenium có thể thực hiện các hành động như nhấp vào liên kết hoặc nút và nhập văn bản vào trường nhập liệu Tóm tắt mọi thứChúng tôi đã hoàn thành mục tiêu chọn các phần tử trong các thẻ được chọn và trong danh sách thả xuống bằng Selenium. Chúng tôi đã đạt được mục tiêu này bằng cách sử dụng một trang web mẫu chứa hai loại thẻ chọn riêng biệt và danh sách thả xuống Trong phần đầu tiên của bài đăng này, chúng tôi đã thiết lập Selenium và WebDriver. Nếu không thiết lập ban đầu, mã JavaScript của bạn sẽ không chạy như mong muốn. Nhưng có một cách dễ dàng hơn. Nếu mối quan tâm chính của bạn là tự động hóa các thử nghiệm liên quan đến trình đơn thả xuống và chọn thẻ trên trang web, bạn nên thử Testim. Testim cho phép bạn thực hiện tất cả các hành động được đề cập trong bài đăng này mà không cần phải thiết lập Selenium theo cách thủ công Selenium có hỗ trợ HTML không?Kiến thức HTML cơ bản về Selenium, Selenium dùng để tự động hóa các ứng dụng web, HTML dùng để thiết kế trang web, vì vậy Các phần tử web và Trình định vị phần tử như kiến thức HTML là bắt buộc đối với Selenium. Selenium WebDriver identifies the elements which are there on the application using HTML tags of that application.
Làm cách nào để lấy HTML bằng Selenium?Để lấy mã nguồn HTML của một WebElement trong Selenium WebDriver, chúng ta có thể sử dụng phương thức get_attribute của Selenium Python WebDriver . Trước tiên, chúng tôi lấy HTML WebElement bằng cách sử dụng các phương pháp định vị phần tử trình điều khiển như (find_element_by_xpath hoặc find_element_by_css_selector).
Selenium WebDriver có hỗ trợ HTML5 không?Chúng tôi có thể mô phỏng kéo và thả HTML5 bằng trình quản trị web Selenium . Đây là một tính năng được triển khai nếu một phần tử được kéo từ vị trí của nó và rơi vào một phần tử khác ở vị trí khác. Lớp Actions trong Selenium được sử dụng để đảm nhiệm chức năng này.
HTML có được sử dụng trong Selenium như một công nghệ trình duyệt không?Selenium RC tương tác với các trình duyệt bằng Máy chủ Selenium RC . Nó đưa chức năng JavaScript vào trình duyệt khi trang web được tải. RC có một lợi thế vì nó cung cấp cho người dùng tệp kết quả kiểm tra HTML tự động trong khi tính năng này không có trong Trình điều khiển web. |
