Trong quá trình tự động hóa, đôi khi chúng ta không thể xử lý một số điều kiện hoặc sự cố với Webdriver, các điều khiển web không phản ứng tốt với các lệnh Selenium. Trong các tình huống này, chúng ta sẽ sử dụng JavascriptExecutor.
JavascriptExecutor là gì?
JavascriptExecutor là một Interface của Selenium, nó cho chúng ta tương tác với HTML DOM của trang web một cách trực tiếp – nghĩa là chúng ta có thể dùng nó để tự động hóa các tương tác người dùng thậm chí khi trang web chưa được load hoàn toàn và các phần tử không được phép tương tác trực tiếp. Nó rất hữu ích để xác định và tương tác với các phần tử bị ẩn và bị vô hiệu hóa trên trang web.
JavascriptExecutor có hai phương thức trừu tượng (abstract method) dùng để chạy javascript trên cửa sổ đã chọn hoặc trang hiện tại, đó là:
- executeScript() –
- executeAsyncScript()
Cả hai phương thức đều được dùng để thực thi một đoạn JavaScript không đồng bộ trong frame hoặc cửa sổ window đang được chọn.Script sẽ được thực thi dưới dạng phần thân của hàm ẩn danh. Chúng ta cũng có thể truyền các đối số phức tạp cho nó.
Điểm khác nhau là:
- Phương pháp executeAsyncScript() này thực thi một đoạn mã JavaScript không đồng bộ trong ngữ cảnh của cửa sổ hoặc khung hiện được chọn trong Selenium. Tập lệnh được gọi bằng executeAsyncScript phải báo hiệu về việc hoàn thành thực thi bằng hàm callback.
- Các phương thức gọi bằng executeAsyncScript được sử dụng chủ yếu ở chế độ ngủ và phải được thực hiện trong trình duyệt đang được thử nghiệm hoặc khi các thử nghiệm phải được đồng bộ hóa trong ứng dụng AJAX.
Các cú pháp cơ bản của JavaScriptExecutor trong Selenium
Import the package
JavascriptExecutor thuộc package org.openqa.selenium nên đầu tiên chúng ta cần import nó như sau
import org.openqa.selenium.JavascriptExecutor;
Tạo một tham chiếu cho interface
Vì JavaScriptExecutor là một interface, nên chúng ta không thể tạo một đối tượng (object) cho nó, vì vậy chúng ta sẽ tạo tham chiếu cho interface và gán nó cho WebDriver instance bằng cú pháp bên dưới:
JavascriptExecutor js = (JavascriptExecutor) driver;
- Bây giờ chúng ta sẽ gọi phương thức executeScript()/executeAsyncScript() để thực thi javascript.
Cách gọi phương thức executeScript()/executeAsyncScript()
Cú pháp:
js.executeScript(Script,Arguments);
Hoặc
<strong>js.executeAsyncScript(Script,Arguments);
- Script – Đây là đoạn mã JavaScript cần được thưc thi.
- Arguments – Các đối số của script. Có thể để trống.
- Kết quả trả về là Boolean, Long, Double, String, List, Map, WebElement. hoặc null theo quy tắc sau
| Đối với .. | Kết quả trả về | Ghi chú |
| Phần tử HTML | WebElement | |
| Số thập phân | Doubhle | |
| Không là số thập phân | Long | |
| boolean | boolean | |
| Tất cả các trường hợp các trên | String | |
| Array | List<Object> | Trong đó mỗi đối tượng sẽ tuân theo các quy tắc ở trên |
| map | Map<String, Object> | Trong đó giá trị sẽ tuân theo quy tắc ở trên |
| null hoặc empty | Null |
Các trường hợp sử dụng JavascriptExecutor trong Selenium
Đối với Window/Browser
Tạo Alert Pop-up trong Selenium Webdriver
js.executeScript("alert('Welcome To devopsify - Automation Test');");Có thể tạo các loại pop-up khác sử dung phương thức sau:
- confirm() – Ví dụ: alert(“Are you sure you want to close this page?”)
- prompt() – Ví dụ: prompt(“Please enter your fullname”, “Huyen”)
Lấy Height và Width của một trang web
String height = js.executeScript(“return window.innerHeight;”).toString(); String width = js.executeScript(“return window.innerWidth;”).toString();
Navigate tới trang web khác
js.executeScript("window.location = 'https://devopsify.co/');Refresh browser window dùng javascript
js.executeScript("history.go(0)");JavaScript: Đối tượng history chứa các URL được người dùng truy cập (trong cửa sổ trình duyệt). Nó có các thuộc tính/ phương thức sau
- go() – Tải một trang cụ thể từ danh sách đã truy cập.
history.go(0)– Tải lại tranghistory.go(-1)– giống vớihistory.back()hay Nhấp vào nút Back của trình duyệthistory.go(1)– giống vớihistory.forward()hay Nhấp vào nút Next của trình duyệt
- back() – Tải một trang trước đó từ danh sách đã truy cập trước đó
- forward() – Tải một trang kế tiếp từ danh sách đã truy cập trước đó
- length() – Trả về số lượng URLs (trang) đã truy cập
Thực hiện Scroll (dọc/ngang) trên ứng dụng
Để thực hiện cuộn trang, chúng ta sẽ sử dụng phương thức scrollBy() của đối tượng window trong javaScript
Syntax:
js.executeScript(“window.scrollBy(x,y)”);
hoặc
js.executeScript(“scrollBy(x,y)”);
- scrollBy() được dùng để cuộn trang theo chỉ số pixel đã chỉ định.
- x – bắt buộc nhập, là số pixel để cuộn (theo chiều ngang). Giá trị dương cuộn sang phải, giá trị âm cuộn sang trái.
- y – bắt buộc nhập, là số pixel để cuộn (theo chiều dọc). Giá trị dương cuộn xuống, giá trị âm cuộn lên.
Ví dụ
1 – Cuộn trang theo chiều dọc cho 500px
js.executeScript(“window.scrollBy(0,500)”);
2 – Cuộn trang theo chiều dọc cho đến hết
js.executeScript(“window.scrollBy(0,document.body.scrollHeight)”);
3 – Thực hiện cuộn trang theo chiều ngang 1000px
js.executeScript(“window.scrollBy(1000,0)”);
4 – Cuộn trang theo chiều ngang cho đến hết
js.executeScript(“window.scrollBy(0,document.body.scrollWidth)”);Phóng to/thu nhỏ trang
js.executeScript(“document.body.style.zoom = '50%'”);Lấy URL của webpage
String urlTxt = js.executeScript("return document.URL;").toString();Script: return document.URL-> lấy URL của webpage và trả về kiểu String
Lấy thuộc baseURI của webpage
String baseURI = js.executeScript("return document.baseURI;").toString();Lấy Title của webpage
String titleTxt = js.executeScript("return document.title;").toString();Lấy cookie
String cookie = js.executeScript("return document.cookie;").toString(); To get the domain name
String domainName= js.executeScript("return document.domain;").toString();Các hoạt động của webElement
Nhập dữ liệu vào ô nhập liệu (textbox) dùng javascript
Thông thường chúng ta sẽ sử dụng phương thức element.sendKeys(“text”) để nhập dữ liệu vào ô nhập liệu. Nhưng ở đây chúng ta sẽ dùng javascript để thay thế.
js.executeScript("document.getElementById('element ID').value='enter text';");- document.getElementById(“ID’) – Lấy element dựa vào ID cụ thể
- HTML DOM value attribute được dùng để lấy hoặc thiết lập giá trị của một thuộc tính
- attribute.value – Lấy giá trị của thuộc tính
- attribute.value = ‘value’ – Thiết lập giá trị cho thuộc tính
Lưu ý:
- ID nên là duy nhất
- Nếu có hai hay nhiều element có cùng ID, thì getElementById() sẽ trả về cái đầu tiên
- Ngoài Id, chúng ta có thể sử dung các phương thức sau
- document.getElementsByTagName()
- document.getElementsByClassName()
- document.querySelector()
- document.querySelectorAll()
Lấy innertext của một element
String innerText = js.executeScript(" return document.documentElement.innerText;").toString();Thực hiện nhấp (Click) vào một Button
js.executeScript("document.getElementById('element ID').click();");Hoặc
WebElement webElement = driver.findElement(By.xpath("xpath_element"));
JavascriptExecutor js= (JavascriptExecutor)driver;
js.executeScript("arguments[0].click();", webElement);Xử lý Checkbox bằng cách thiết lập giá trị ‘true’ hoặc ‘false’
Checkbox được chọn – true
js.executeScript("document.getElementById('element ID').checked=true;");Checkbox bỏ chọn – false
js.executeScript("document.getElementById( 'element ID').checked=false;");Thay đổi màu nền (background color) của phần tử web
WebElement webElement = driver.findElement(By.xpath("xpath_element"));
JavascriptExecutor js= (JavascriptExecutor)driver;
js.executeScript("arguments[0].style.backgroundColor = '" + color + "'", element);Tô viền phần tử web
WebElement webElement = driver.findElement(By.xpath("xpath_element"));
JavascriptExecutor js= (JavascriptExecutor)driver;
js.executeScript("arguments[0].style.border='3px solid red'", webElement);Các bạn có thể thực thi bất kỳ lệnh JavaScript nào sử dụng Selenium với cấu trúc giống với những ví dụ trên nhé!
Good luck!
