Topic 30: Javascript executor in Selenium

Chào các bạn đã đến với chủ đề tiếp theo của mình. Hôm nay, mình sẽ tiếp tục giới thiệu về Javascript Executor trong Selenium. Như các bạn đã biết, Selenium Webdriver cho phép chúng ta giao tiếp với web browser thông qua các phần tử trong DOM. Tuy nhiên, vẫn có 1 số trường hợp mà Selenium webdriver không hoạt động theo như mong muốn. Lúc này, mình sẽ sử dụng Javascript Executor.

1. Tổng quan về Javascript Executor

Javascript Executor là một interface của Selenium Webdriver, nó có chức năng tương tự như của Java Script và có thể tương tác với các phần tử HTML DOM. Thay vì sử dụng method driver.findElement của Selenium Webdriver thì chúng ta có thể sử dụng JavaScriptExecutor Interface để thực hiện những thao tác tương tự trên web.

Javascript Executor cho phép chúng ta có thể chạy mã Javascript thuần túy bất kể là chúng ta đang sử dụng ngôn ngữ nào với Selenium như Java, C# hay Python…

Thường thì chúng ta sẽ chỉ sử dụng Javascript Executor trong những trường hợp mà khi sử dụng các method thông thường khác với Selenium nó không thể thực thi được như mong muốn.

Như đã nói phía trên, Javascript là một interface thuộc package org.openqa.selenium trong Selenium Webdriver. Có hai abstract method là:

• executeScript()
• executeAsyncScript()

Để sử dụng các method trong Javascript Executor interface, đầu tiên chúng ta phải import thư viện sau:

import org.openqa.selenium.JavascriptExecutor;​

Sau đó, chúng ta sẽ ép đối tượng driver thành kiểu Javascript Executor, theo cú pháp dưới đây:

// chuyển kiểu của đối tượng driver thành JavascriptExecutor
JavascriptExecutor js = (JavascriptExecutor) driver;

// sử dụng các methods
js.executeScript("javascript command");
js.executeAsyncScript("javascript command");

Hầu như là chúng ta sẽ sử dụng method executeScript() trong Selenium. Còn về executeAsyncScript() mình chưa sử dụng lần nào. Nên trong nội dung bài viết này, mình chỉ giới thiệu về method executeScript() thôi nhé.

2. Sử dụng Javascript Executor

2.1. Find Element

Ở ví dụ này, mình sẽ sử dụng ID để tìm một phần tử trên một trang, chúng ta cũng có thể thay bằng các thuộc tính khác tương ứng của phần tử cần tìm như Name, hay CSS. Lưu ý là nó ko có hỗ trợ Xpath nhé.

JavascriptExecutor js = (JavascriptExecutor) driver;
Object searchTextbar = js.executeScript
                       ("return document.getElementById('id_of_element')");
((WebElement) searchTextbar).sendKeys("abc");

2.2. Click vào 1 element nào đó

Khi mà Selenium nó báo là không thể tương tác hay không thể click vào một phần tử web, nghĩa là nó có thể nó đang bị che hoặc chưa load lên UI kịp thời. Khi đó thằng Javascript này nó click dựa vào DOM nên nó không quan tâm bị che hay không. Ví dụ:

JavascriptExecutor js = (JavascriptExecutor) driver;
js.executeScript("document.getElementById('id_of_element').click();");
//hoặc
js.executeScript("arguments[0].click();", buttonLogin);

2.3. Thực hiện sendkey

js.executeScript("document.getElementById('email').setAttribute('value','admin02@mailinator.com');");
js.executeScript("document.getElementById('password').setAttribute('value','123456');");

“value” là thuộc tính trong thẻ input. Ngoài thuộc tính “value” thì có thể dùng các thuộc tính còn lại như “placeholder“, “innerHTML“,…

2.4. Thực hiện get text

String welcomeMessage = jsExecutor.executeScript("return document.getElementsByTagName('h4')[0].innerHTML;").toString();
// hoặc
String welcomeMessage = jsExecutor.executeScript("return document.getElementsByTagName('h4')[0].innerText;").toString();

2.5. Xử lý Checkbox bằng cách chuyển giá trị là true hoặc false

js.executeScript("document.getElementById('id_of_element').checked=false;");
//hoặc
js.executeScript("document.getElementById('id_of_element').checked=true;");

2.6. Thực hiện scroll webpage (cuộn trang)

• Cuộn trang theo chiều dọc 500px

js.executeScript("window.scrollTo(0,500)");

• Cuộn xuống cuối trang web

js.executeScript("window.scrollTo(0,document.body.scrollHeight)");

• Cuộn tới 1 phần tử trong trang web (Cái này chúng ta thường sử dụng nhiều)

WebElement element = driver.findElement(By.id("id_of_element"));

js.executeScript("arguments[0].scrollIntoView(true);", WebElement);

2.7. Get title của trang web

String titleText = js.executeScript("return document.title;").toString();
System.out.println(titleText);

2.8. Get url của trang web

String domainName= js.executeScript("return document.URL;").toString();
System.out.println(domainName);

2.9. Get domain của trang web

String domainName= js.executeScript("return document.domain;").toString();
System.out.println(domainName);

2.10. Kiểm tra trạng thái của trang web đã được tải về hay chưa?

js.executeScript("return document.readyState");

2.11. Điều chỉnh mức độ phóng to thu nhỏ hiển thị của nội dung trang web

js.executeScript("document.body.style.zoom='80%'");

2.12. Get chiều cao và chiều rộng của trang web

// Độ cao
js.executeScript("return window.innerHeight;").toString();
// Độ rộng
js.executeScript("return window.innerWidth;").toString();

2.13. Điều hướng đến một địa chỉ URL nào đó

js.executeScript("window.location='https://google.com';");

2.14. Set giá trị vào LocalStorage trên Browser

js.executeScript("window.localStorage.setItem(arguments[0],arguments[1])","key","value");

Ví dụ:

js.executeScript("window.localStorage.setItem(arguments[0],arguments[1])","age","30");

Thì nó sẽ set giá trị 30 vào biến “age” trong browser. Lúc bấy giờ mình sẽ gọi hàm get để lấy nó ra dùng là xong.

2.15. Get giá trị từ LocalStorage trên Browser

(String) js.executeScript("return window.localStorage.getItem(arguments[0])", "key");

Ví dụ: tiếp tục của ví dụ trên thì mình sẽ gọi key “age” ra để lấy giá trị 30:

String localGetVar = (String) js.executeScript("return window.localStorage.getItem(arguments[0])", "age");

2.16. Thêm một phần tử trong DOM

Chúng ta cũng có thể thêm một phần tử trong DOM nếu được yêu cầu.

js.executeScript("var btn=document.createElement('newButton');" + "document.body.appendChild(btn);");

2.17. Remove attribute trong DOM

jsExecutor.executeScript("arguments[0].removeAttribute('type');", element);

2.18. Highlight phần tử trên web

js.executeScript("arguments[0].style.border='3px solid red'", WebElement);

Đoạn code trên sẽ highlight border của Element lên màu đỏ.

2.19. Get toàn bộ nội dung của trang Web

String innerText = js.executeScript("return document.documentElement.innerText;").toString();
System.out.println(innerText);

3. Lưu ý

Đầu tiên phải nhắc lại một lần rằng, Selenium Webdriver hoạt động tương tự như một end user. Selenium Webdriver thực thi những thao tác mà một người dùng thực sự có thể làm đối với một phần tử nào đó trên ứng dụng web.

Nếu như trên thực tế, Selenium Webdriver không thể tương tác với một phần tử nào đó trên trang ứng dụng thì ta cũng cần phải cân nhắc xem liệu rằng đó có phải là một lỗi hay không trước khi sử dụng Javascript Executor để ép buộc nó phải chạy theo ý mình. Biết đâu lỗi thật thì có phải là nguy hiểm không?

Bạn nên kiểm tra kỹ trên tất cả các trình duyệt với code Selenium Webdriver thông thường (các trình duyệt mà ứng dụng được yêu cầu cần phải được test), có thể phần tử đó chỉ có thể hoạt động đúng trên một trình duyệt nào đó – thì có thể cân nhắc sử dụng Javascript Executor, còn nếu như trên tất cả trình duyệt bạn kiểm tra, phần tử đó không hoạt động đúng thì cần đánh False testcase thay vì sử dụng Javascript Executor.

Điều này sẽ đảm bảo rằng bạn không bị lọt bug, trong trường hợp sử dụng Javascript Executor thì có thể chạy ngon lành nhưng trên thực tế thì phần tử đó lại không hiển thị, (do một vài lỗi trong quá trình phát triển) nhưng đối với end user thì không thể thao tác được.

4. Ví dụ

4.1. Ví dụ 1: web browser command

@Test
public void TC_01_js_Browser() throws InterruptedException {
    String url = "https://the-internet.herokuapp.com";
    JavascriptExecutor jsExecutor = (JavascriptExecutor) driver;

    // Navigation to URL
    jsExecutor.executeScript("window.location = '" + url + "'");

    // Get page title/ Domain/ URL using JavascriptExecutor
    String titleText = jsExecutor.executeScript("return document.title;").toString();
    System.out.println("Page Title is: " + titleText);

    String domainName = jsExecutor.executeScript("return document.domain;").toString();
    System.out.println("Domain is: " + domainName);

    String js_url = jsExecutor.executeScript("return document.URL;").toString();
    System.out.println("URL is: " + js_url);

    // Get page height & weight
    String height = jsExecutor.executeScript("return window.innerHeight;").toString();
    System.out.println("Height is: " + height);

    String weight = jsExecutor.executeScript("return window.innerWidth;").toString();
    System.out.println("Weight is: " + weight);

    // Zoom in/out
    jsExecutor.executeScript("document.body.style.zoom='80%'");
    Thread.sleep(3000);
    jsExecutor.executeScript("document.body.style.zoom='100%'");
    Thread.sleep(3000);

    // Get toan bo text trong DOM
    String innerText = jsExecutor.executeScript("return document.documentElement.innerText;").toString();
    System.out.println(innerText);
}

Kết quả:

4.2. Ví dụ 2: login

@Test
public void TC_02_Login() throws InterruptedException {
    String url = "https://the-internet.herokuapp.com/login";
    JavascriptExecutor jsExecutor = (JavascriptExecutor) driver;

    // Navigation to URL
    jsExecutor.executeScript("window.location = '" + url + "'");

    // Input to username & password
    jsExecutor.executeScript("document.getElementById('username').setAttribute('value','tomsmith');");
    jsExecutor.executeScript("document.getElementById('password').setAttribute('value','SuperSecretPassword!');");
    Thread.sleep(3000);

    // Click login button
    jsExecutor.executeScript("document.getElementsByTagName('button')[0].click();");
    Thread.sleep(3000);

    // Get welcome message
    String welcomeMessage = jsExecutor.executeScript("return document.getElementsByTagName('h4')[0].innerHTML;").toString();
    Assert.assertEquals(welcomeMessage, "Welcome to the Secure Area. When you are done click logout below.");
    Thread.sleep(3000);
}

Kết quả:

4.3. Ví dụ 3: Set và Get LocalStorage với Javascript

@Test
public void TC_03_LocalStorage() throws InterruptedException {
    String url = "https://the-internet.herokuapp.com/login";
    JavascriptExecutor jsExecutor = (JavascriptExecutor) driver;

    // Navigation to URL
    jsExecutor.executeScript("window.location = '" + url + "'");

    //Set giá trị
    jsExecutor.executeScript("window.localStorage.setItem(arguments[0],arguments[1])", "age", "30");
    Thread.sleep(3000);

    //Get giá trị
    String localGetVar = (String) jsExecutor.executeScript("return window.localStorage.getItem(arguments[0])", "age");
    System.out.println(localGetVar);
    Thread.sleep(3000);
}

Để xem biến có được store vào localStorage hay không, trong lúc chạy, các bạn hãy mở Developer tool > Application -> Local storage như hình bên dưới:

Kết quả:

5. Lời kết

Như vậy chúng ta đã tìm hiểu qua cách sử dụng Javascript Executor trên Selenium. Cảm ơn các bạn đã theo dõi bài viết của mình.  Chúc các bạn thành công. Hẹn gặp lại các bạn ở những chủ đề tiếp theo.

Nguồn tham khảo:

https://anhtester.com/blog/selenium-java/selenium-java-bai-14-cach-dung-javascript-executor-de-hanh-dong

https://topdev.vn/blog/javascript-executor-trong-selenium-webdriver/