Headless browsers là gì?

Theo Wikipedia, headless browser là một trình duyệt web không có giao diện đồ họa người. Các headless browser cung cấp tương tác tự động một trang web trong một môi trường giống như các trình duyệt web phổ biến khác, nhưng nó được thực hiện thông qua giao diện dòng lệnh hoặc qua một mạng truyền thông. Chúng đặc biệt hữu ích cho việc kiểm thử các trang web vì chúng có thể hiển thị và hiểu HTML giống như các trình duyệt thông thường, bao gồm các cả styling như bố cục trang, màu sắc, font chữ và thực thi Javascript và AJAX mà thường không có sẵn khi sử dụng các phương pháp kiểm thử khác.

PhantomJS

PhantomJS là một headless browser nên nó không có giao diện đồ họa người dùng (GUI). Có một câu hỏi chúng ta sẽ đặt ra rằng: Sẽ sử dụng gì, sử dụng như nào với một trình duyệt mà lại không có một GUI? Nếu một trình duyệt web không có giao diện đồ họa người dùng khá là vô ích. Nhưng vì PhantomJS cung cấp một API Javascript, nên điều này mới làm cho trình duyệt trở nên hữu ích.

Cài đặt PhantomJS

Trước khi chúng ta tìm hiểu thêm về PhantomJS, trước tiên bạn cần phải cài đặt nó trên máy tính của bạn. Để cài đặt PhantomJS, hãy truy cập trang web chính thức và tải xuống bản cài đặt phù hợp với thiết bị của bạn. Sau khi tải xuống bản cài đặt, bạn cần phải thêm tệp thực thi vào biến môi trường PATH. Đối với người dùng Linux (bao gồm Mac), bạn có thể đặt tệp nhị phân đã tải xuống trong thư mục usr/bin. Trong khi người dùng Windows có thể đặt các tập tin thực thi trong C:\Windows. Sau khi thực hiện điều đó, bạn sẽ có thể mở cửa sổ dòng lệnh lên và gõ phantomjs --help và thấy một màn hình như thế này.

PhantomJS Core Concepts

Vì PhantomJS không thể sử dụng được để lướt web như các trình duyệt khác, nó có một bộ các tính năng mà các nhà phát triển yêu thích và sử dụng cho nhiều mục đích.

• Screen capture
• Page automation
• Network monitoring
• Testing
• And more...

Screen Capture

PhantomJS có thể được sử dụng để chụp màn hình của các trang web, những ảnh chụp màn hình có thể được xuất trong các định dạng khác nhau cũng có. Chúng ta hãy quay lại một kịch bản javascript cơ bản để chụp ảnh màn hình của một trang web.

var webpage = require('webpage').create();

webpage.open('https://viblo.asia/', function() {
    webpage.render('viblo.png');
    phantom.exit();
});

Chạy đoạn mã này từ một trình duyệt web sẽ không hoạt động, chúng ta cần tải tập lệnh này bằng PhantomJS. Vì vậy, chúng ta lưu đoạn mã này trong tệp screenshot.js, có thể là bất cứ điều gì bạn muốn đặt tên. Sau đó từ dòng lệnh, chạy.

phantomjs screenshot.js

Hãy cho nó một vài giây để chạy và bạn sẽ thấy một tệp trong cùng một đường dẫn như screenshot.js tên viblo.png, mở nó và bạn sẽ thấy một ảnh chụp màn hình đầy đủ của viblo.asia.

Page Automation

Bởi vì chúng ta có thể sử dụng PhantomJS để tải và thao tác một trang web, nó là hoàn hảo để thực hiện tự động hóa trang. Điều này giúp các nhà phát triển chạy một loạt các bài test mà không bao giờ phải mở một trình duyệt web, giúp bạn tiết kiệm rất nhiều thời gian.

var webpage = require('webpage').create();

// open viblo.asia
webpage.open('https://viblo.asia', function(status) {
    if (status !== 'success') {
        console.log('Unable to access network');
    } else {
        var title = webpage.evaluate(function() {
            return document.title;
        });

     // log the title
        console.log(title === 'Viblo | Free service for technical knowledge sharing.');
    }

    phantom.exit();
});

Trong phương thức evaluation(), đó là nơi chúng ta viết javascript mà chúng ta muốn chạy trên trang được nạp. Chúng ta có thể lưu đoạn mã ở trên trong một file và chạy phantomjs <filename>.js.

Network Monitoring

Bởi vì PhantomJS cho phép việc kiểm tra lưu lượng mạng, nó là thích hợp để xây dựng nhiều kiểu phân tích khác nhau về hành vi mạng và hiệu suất.

Chúng ta có thể nối vào PhantomJS trong một chu trình request - response và thu thập dữ liệu về trang web. Dữ liệu này có thể được định dạng lại và cho phép chúng ta kiểm tra hiệu suất của một trang web.

var page = require('webpage').create();

// hook into initial request
page.onResourceRequested = function(request) {
    console.log('Request ' + JSON.stringify(request, undefined, 4));
};

// hook to response
page.onResourceReceived = function(response) {
    console.log('Receive ' + JSON.stringify(response, undefined, 4));
};

page.open(url);

Chúng ta có thể sử dụng các công cụ như confess.js (a PhantomJS script) và YSlow để phân tích sâu hơn về mạng. Điều này hữu ích theo nghĩa là chúng ta có thể phát hiện hồi quy trong việc thực hiện trang web của chúng ta trước push code.

Testing

Đây là một khía cạnh quan trọng của phát triển phần mềm, nhưng các nhà phát triển hiếm khi nói đến. PhantomJS đã được phổ biến như là một công cụ để chạy unit test. Nó có thể chạy nhiều bài test và hiển thị cho người dùng kết quả trong command line. Các công cụ test như Mocha, Casper là một số ít các ví dụ tốt về testing với PhantomJS.

Tổng kết

Bài viết này chỉ mang tính chất giới thiệu tổng quan về PhantomJS. Giúp chúng ta hiểu được PhantomJS là gì và một số ứng dụng của PhantomJS vào website.

Chúng ta còn có thể dùng PhantomJS để kiểm tra xem trang web có đáp ứng và hiển thị bản xem trước của trang web sử dụng các kích thước màn hình khác nhau hay không. Các trang web đã được thực hiện có thể nhờ PhantomJS như:

• A Spanish Life sử dụng PhantomJS để tạo quảng cáo dựa trên nội dung người dùng.
• Twitter sử dụng PhantomJS để chạy kiểm tra QUnit trên trang web của họ.
• Và sắp có thể là chính sản phẩm của các bạn...

Nếu thấy nội dung này bổ ích, hãy mời tôi một tách cà phê nha! https://kimyvgy.webee.asia