Tìm hiểu về Headless Browser trong Selenium Webdriver

Bài viết được sự cho phép của tác giả Vân Anh

Hôm nay sẽ cùng các bạn tìm hiểu về một dạng trình duyệt kỳ lạ được sử dụng trong automation, trong tiếng Việt nôm na nó là “trình duyệt không đầu” nhưng được biết đến rộng rãi hơn với cái tên quốc tế khá là trừu tượng giống như sự hiện diện của nó, đó là “headless browser” :v

Và không làm mất thời gian thêm nữa, cùng đi vào nội dung chính thôi nào.

1. Headless Browsers trong Selenium Webdriver

Headless browser là chương trình giả lập một trình duyệt nhưng không có giao diện người dùng (UI less).

Cơ chế hoạt động của Headless browser tương tự như các trình duyệt thông thường khác, chỉ có điều là nó sẽ không xuất hiện hay hiển thị bất kì giao diện tương tác người dùng nào. Do đó, Selenium sẽ thực thi việc test với trình duyệt này ở chế độ nền (background).

Hiện nay có khá là nhiều các loại Headless browser, được biết đến nhiều hơn cả đó là:

• Chrome
• Firefox
• HTMLUnit driver
• PhantomJS
• SlimerJS
• TrifleJS

2. Headless testing là gì?

Việc thực hiện kiểm thử giao diện của ứng dụng web mà không cần mở ứng dụng trên giao diện người dùng của trình duyệt thì được gọi là headless testing. Một headless browser hoạt động giống như một trình duyệt web thông thường. Các tester có thể toàn quyền điều khiển các trang web được tải trên headless browser. Chỉ có một điều khác biệt là khi đó bạn sẽ không thể nhìn thấy bấy kì một giao diện đồ họa người dùng nào – giống như kiểu bạn đang đi trong đêm tối hoàn toàn không có ánh sáng nhưng mà bạn vẫn có thể đi những bước đi chính xác qua những đoạn cong queo, ngoằn nghoèo để đến được đích =))

3. Khi nào thì sử dụng headless browser testing?

Ta có thể sử dụng headless testing sau khi đã hoàn thành việc kiểm thử trên các trình duyệt thông thường khác và khi cần thực hiện việc kiểm thử hồi quy trong các phiên bản phát hành hoặc phát triển tích hợp liên tục sau đó.

Hoặc trong trường hợp máy test của bạn không thể cài đặt hay sử dụng trình duyệt GUI, thì headless browser testing có lẽ là lựa chọn ổn hơn cả. Ví dụ khi test trên Unix chẳng hạn. 

Bạn cũng nên sử dụng headless browser testing khi thực thi song song nhiều test cùng lúc, lúc này với các trình duyệt giao diện sẽ tiêu tốn nhiều bộ nhớ và tài nguyên. Headless browser testing có thể được sử dụng để kiểm tra hiệu năng của server (máy chủ).

Headless browser cũng có thể sử dụng khi bạn thực hiện smoke test ngay khi được bàn giao phiên bản mới, sẽ nhanh chóng kiểm tra và từ chối bàn giao nếu phát hiện vấn đề.

4. Một số nhược điểm của headless browser testing

Nhìn chung, headless browser không phải là một ý tưởng thực sự tốt. Nó có thể thực hiện các công việc tương tự nhưng một điều quan trọng là nó không mang được sự trực quan giống như một người dùng thực sự sẽ nhìn thấy và tương tác. Headless browser có thể che dấu những vấn đề mà chỉ khi sử dụng những trình duyệt thông thường bạn mới gặp phải.

Với headless browser sẽ khó debug để xác định các phần tử có vấn đề do page load quá nhanh.

Với trình duyệt thông thường, các chức năng được thực thi hoạt động ngay trước mắt, do đó ta có thể dễ dàng tương tác và phán hiện các điểm sai sót, cũng sẽ dễ dàng debug hơn nếu như có một vấn đề nào đó xảy ra.

Các mã code cho các headless browser không đảm bảo sẽ hoạt động bình thường khi chúng ta chuyển từ một headless browser nào đó sang HTMLUnit, ví dụ như bạn code cho Headless Chrome hay Firefox, và sau đó lại muốn thay đổi để code chạy cho Headless HTMLUnit, việc này đôi khi có thể làm cho code của chúng ta hoạt động không đúng nữa, nên hoặc là bạn không chuyển nữa hoặc là ngồi sửa code những đoạn nào không tương thích  . Tuy nhiên giữa Chrome và Firefox thì lại khá là tương đồng, nên sẽ dễ dàng hơn nhiều nếu muốn nhảy từ cái này sang cái kia.

Tương tác trên Headless browser không thể đại diện cho một người dùng thật sự, vì chẳng người dùng nào lại có thể tương tác các tác vụ mà không nhìn thấy bất cứ một giao diện hay hình ảnh nào cả, và vì vậy ta sẽ không thể phát hiện ra vấn đề nếu như vấn đề đó liên quan đến các hình ảnh trên ứng dụng.

Trên thực tế headless brower không nhanh hơn trình duyệt thực, bởi vì phần lớn thời gian vẫn để tải dữ liệu phụ thuộc vào tốc độ mạng, htlm, Javascript, hình ảnh và CSS. Headless browser chỉ không cần tải màu cho màn hình mà thôi.

Việc quản lý và chụp ảnh màn hình khá là khó đối với Headless browser.

5. Headless browser automation trong Selenium Java

Chúng ta có thể thực hiện automation với headless browser, và chỉ có automation mới có thể thực thi được trên headless browser.

Đối với vai trò của một người dùng, họ sẽ chẳng quan tâm và cũng không có khái niệm nào về Headless browser hay UI less browser.  Vì với những khái niệm này trên thực tế rõ ràng là không thể trông thấy hay tương tác trực tiếp được.

Trên headless browser, có thể thực thi các test mà được tạo ra dựa trên việc thực hiện trên các trình duyệt UI thông thường, do đó việc debug cũng chỉ có thể thực hiện trên trình duyệt UI thông thường mà thôi.

Trong bài viết này chúng ta sẽ đi qua các Headless browser đó là:

1. Chrome
2. Firefox
3. HtmlUnit browser
4. PhantomJS

5.1. Headless Chrome trong Selenium

Headless Chrome được hỗ trợ bởi Chrome phiên bản 59+. Với Selenium webdriver, ta có thể sử dụng headless browser chrome bằng cách sử dụng class trong org.openqa.selenium.chrome.ChromeOptions

Với Mac và Linux từ Chrome 59 cũng đã có hỗ trợ headless browser mode, hệ điều hành Windows cũng đã hỗ trợ đến version 60.

Các bước để tạo headless Chrome:

1. Set path cho Chrome driver server sử dụng System.setProperty:

System.setProperty("webdriver.chrome.driver", 
                                "C:/Users/user/Pictures/chromedriver.exe");

2. Tạo một đối tượng cho ChromeOptions thuộc packet org.openqa.selenium.chrome.ChromeOptions: 

ChromeOptions options = new ChromeOptions ();

3. Tạo một method setHeadless từ đối tượng ChromeOptions, đặt paramenter = true. Medthod này sẽ tạo ra một trình duyệt chrome mà không có giao diện người dùng, chính là cái headless Chrome browser mà ta cần:

// set chrome as Headless
options.setHeadless(true);

Ta cũng có thể sử dụng method addArguments có sẵn trong đối tượng ChromeOption để tạo một headless chrome browser, ở đây ta cần thêm giá trị của parameter là “—headless” để khởi tạo trình duyệt không có UI với cú pháp như sau:

options.addArguments("--headless");

4. Bây giờ bạn sẽ tạo một đối tượng cho ChromeDriver và đừng quên truyền vào đó option vừa tạo bên trên vào hàm khởi tạo ChromDirver.

WebDriver driver = new ChromeDriver(options);

Sử dụng class Option chúng ta có thể thiết lập các tính năng theo yêu cầu cho một trình duyệt (như Chrome hay Firefox)

5.2. Headless Firefox Browser in Selenium

Với headless Firefox browser ta cũng thực hiện các tương tự các bước như khởi tạo một headless Chrome browser tóm tắt nhanh các cú pháp như sau:

//set driver server exe path
System.setProperty("webdriver.gecko.driver", 
                            "C:/Users/user/Pictures/geckodriver.exe"); 
//Khởi tạo đối tượng options thuộc FirefoxOptions:
FirefoxOptions options = new FirefoxOptions(); 

//Tạo trình duyệt headless với method setHeadless với parameter = true: 
options.setHeadless(true); 

//khởi tạo trình Web Driver
WebDriver driver = new FirefoxDriver(options);

5.3. HtmlUnitDriver in Selenium

HtmlUnitDriver là một trình duyệt headless được tích hợp sẵn trong Selenium webdriver, HtmlUnitDriver nằm trong package: org.openqa.selenium.htmlunit

Khác với Headless Firefox, Chrome, với HtmlUnitDriver chúng ta chỉ cần tạo một đối tượng của class để tạo một headless browser đó.

Cú pháp chỉ đơn giản như thế này:

HtmlUnitDriver driver = new HtmlUnitDriver();
driver.get("https://www.google.com");

5.4 .PhantomJS Headless browser

Dưới đây là đoạn code mà mình đã sử dụng để khởi tạo một trình duyệt PhantomJS. Tuy nhiên theo mình đọc được đâu đó thì chúng ta nên chuyển sang sử dụng Google chrome hơn là PhantomJS, vì tốc độ và độ ổn định được đánh giá tốt hơn so với PhantomJS.

File file = new File("C:/Program Files/phantomjs-2.1.1-windows/phantomjs-2.1.1-windows/bin/phantomjs.exe");
System.setProperty("phantomjs.binary.path", file.getAbsolutePath());
WebDriver browser = new PhantomJSDriver();

6. Dùng Headless browser nào nhanh hơn?

Để trả lời câu hỏi này không gì chính xác hơn là chính bạn tự kiểm chứng với môi trường thực thế của bạn. Và lựa chọn trình duyệt nào cho dự án của bạn, theo quan điểm của mình thì trước tiên cần cân nhắc đó là sự ổn định của công cụ sau đó mới đến các yếu tố khác như tốc độ hay các khả năng khác, tuy nhiên với độ phổ biến rộng rãi thì mình nghĩ rằng Chrome hay Firefox sẽ là những lựa chọn nên được ưu tiên. 

Hi vọng bài viết này sẽ mang lại chút hữu ích cho các bạn về Headless browser và sử dụng trong automation. Rất mong nhận được những đóng góp và góp ý của các bạn về chủ đề này.

Tham khảo thêm tại link dưới:

https://chercher.tech/java/headless-browsers-selenium-webdriver#headless

Bài viết gốc được đăng tải tại vananhtooo.wordpress.com

Có thể bạn quan tâm:

• Các kiểu “đợi chờ” trong Selenium Webdriver: Implicit wait, Explicit wait và Fluent wait
• Viết 1 Test Case Đơn Giản Với Python Selenium WebDriver
• Selenium là gì? Một số kinh nghiệm làm việc với Selenium

Xem thêm Việc làm Developer hấp dẫn trên TopDev