ĐẠI HỌC ĐÀ NẴNG

KHOA CÔNG NGHỆ THÔNG TIN VÀ TRUYỀN THƠNG

ĐỒ ÁN CƠ SỞ 4
ĐỀ TÀI : Tìm hiểu về API chrome puppeteer và
headless browser để ứng dụng vào cào dữ liệu và kiểm
thử
Sinh viên thực hiện
: LÊ VĂN ÁNH
Giảng viên hướng dẫn : ThS. NGUYỄN VĂN BÌNH
Lớp
: 17IT2

Đà Nẵng, Tháng 12 năm 2019

MỞ ĐẦU


Thế kỉ 21 là một kỷ nguyên toàn cầu , với sự phát minh ra internet trái đất đã
khơng cịn hình trịn mà đã là một đường thẳng kết nối những ý nghĩ của con
người.Cùng với q trình tồn cầu hố , nhu cầu chia sẽ thơng tin , kết nối bạn
bè ngày càng phát triển thúc đẩy sự ra đời của mạng xã hội.

Trong vài năm trở lại đây ,nhu cầu con người ngày càng cao và đa dạng chính vì
vậy e xin giới thiệu đến mọi người API puppeteer có thể hỗ trợ một số vấn đề
trong cuộc sống .

LỜI CẢM ƠN

Trong thời gian làm đồ án tốt nghiệp, em đã nhận được nhiều sự giúp đỡ, đóng góp ý kiến
và chỉ bảo nhiệt tình của thầy cơ và bạn bè.
Em xin gửi lời cảm ơn chân thành đến Th.S Nguyễn Văn Bình, người đã tận tình hướng
dẫn, trực tiếp chỉ bảo và tạo mọi điều kiện giúp đỡ em trong suốt quá trình làm đồ án.
Em cũng xin chân thành cảm ơn các thầy cô trong khoa Công Nghệ Thông Tin Và Truyền
Thông, những người đã dạy dỗ và trang bị cho em khiến thức đễ hoàn thành đề tài đồ án
này.
Mặc dù trong quá trinh nghiên cứu đề tài , bản thân em có những cố gắng nhất định song
do trình độ và thời gian có hạn nên đề tài khơng tránh khỏi những thiếu sót.vậy kinh
mong các thầy cơ và các bạn đóng góp ý kiến để em được hoàn thiện hơn.


NHẬN XÉT
(Của giảng viên hướng dẫn)

…………………………………………………………………………………………
…………………………………………………………………………………………
…………………………………………………………………………………………
…………………………………………………………………………………………
…………………………………………………………………………………………
…………………………………………………………………………………………
…………………………………………………………………………………………
…………………………………………………………………………………………
…………………………………………………………………………………………


MỤC LỤC
Trang
Chương 1 Giới thiệu...................................................................................................6
1.1 Tổng quan.........................................................................................................6

1.2 Phương pháp, kết quả.......................................................................................6
1.3 Cấu trúc đồ án..................................................................................................6
Chương 2 Nghiên cứu tổng quan................................................................................7
2.1 Các ứng dụng, thư viện tương tự......................................................................7
2.1.1 Thư viện Html agility pack .......................................................................7
2.1.2 Thư viện Jsoup ..........................................................................................7
2.1.3 Kết luận.....................................................................................................7
2.2 Các công nghệ hỗ trợ cho việc vận dụng các chức năng của puppeteer............8
2.2.1 Atom text editor........................................................................................8
2.2.2 Nodejs........................................................................................................9
2.2.3 Testing framework Jest..............................................................................9
Chương 3 Triển Khai Xây Dựng...............................................................................11
3.1 Tổng quan của hệ thống nghiên cứu...............................................................11
3.2 Triển khai xây dựng và thực hiện các chức năng ..........................................11
3.2.1 Khởi tạo môi trường để làm việc ............................................................11
3.2.2 Xây Dựng Chức Năng..............................................................................11
3.2.2.1 Chức năng chụp ảnh màn hình :........................................................11
3.2.2.2 Chức năng tạo file PDF :...................................................................12
3.2.2.3 Cào dữ liệu : lời 20 bài hát từ trang web nhaccuatui.com :...............13
3.2.2.4 Cào dữ liệu : tải truyện từ web đọc truyện sachvui.com....................14
3.2.2.5 Automation test sử dụng testing framework Jest...............................16
3.3 Kết quả sau khi thực hiện ..............................................................................19
Chương 4 Kết luận và Hướng phát triển...................................................................20
4.1 Kết Luận.........................................................................................................20
4.2 Hướng Phát Triển...........................................................................................20


Chương 1

Giới thiệu


1.1 Tổng quan.
Sự phát triển của cuộc cách mạng công nghiệp 4.0 cùng với sự phổ biến rộng rải
của điện thoại di động và internet. Kèm theo đó là nhu cầu về mọi mặt của con người
ngày càng tăng cao.
Áp dụng kiến thức đã tìm hiểu được em xin được giới thiệu đến mọi người API
puppeteer , giúp hỗ trợ các nhu cầu cơ bản như thu thập lời bài hát, tìm kiếm giá cả các
sản phẩm và so sánh chúng. Công cụ hỗ trợ trong ngành công nghệ thông tin như kiểm
thử tự động, kiểm thử các các tiện ích mở rộng của trình duyệt ( extension) , phân tích
các vấn đề về hiệu năng.

1.2 Phương pháp, kết quả.
Phương pháp xây dựng sản phẩm sẽ bao gồm các bước sau:
- Tìm hiểu thơng tin về API puppeteer và các lĩnh vực đã và đang sử dụng
puppeteer.
-

Tìm hiểu các ứng dụng hoặc thư viện có chức năng tương tự và từ đó
đứa ra các phân tích và so sánh.

-

Tiếp đến, em bắt đầu ứng dụng các chức năng và các hàm của api vào
việc xây dựng các tiện ích từ chúng.

-

Cuối cùng đưa ra các kết quả dựa trên sự nghiên cứu và vận dụng từ
trước .


1.3 Cấu trúc đồ án.
Phần tiếp theo của báo cáo bao gồm:
Chương 2: Nghiên cứu tổng quan.
Trong chương này, chúng em sẽ giới thiệu về các lĩnh vực, chức năng đã có sẵn
tương tự với puppeteer. Tiếp theo em sẽ giới thiệu tổng quát về puppeteer và nhưng
điều nó có thể làm được.
Chương 3: Triển khai xây dựng.
Trong chương này, em sẽ trình bày về các chức năng chính và giới thiệu về cách
triển khai xây dựng ứng dụng chat thời gian thực.
Chương 4: Kết luận và hướng phát triển.
Trong chương này, em sẽ chia thành 2 phần. Phần 1 kết luận sẽ giới thiệu về
những gì mà ứng dụng đã được và hạn chế của nó. Phần 2 hướng phát triển sẽ đưa
ra những hướng đi sau này của ứng dụng.


Chương 2

Nghiên cứu tổng quan

2.1 Các ứng dụng, thư viện tương tự.
2.1.1
Thư viện Html agility pack .
-( />- HTMLAgilityPack là một thư viện parse HTML khá mạnh, lý do nó phổ biến là
vì nó sử dụng được với hầu hết html, cả valid và unvalid (Trong thực tế thì số lượng
website có HTML unvalid nhiều vơ số kể, các thư viện khác sẽ dễ bị lỗi,
HTMLAgilityPack thì khơng). Kiến thức ở bài này sẽ khá hữu dụng nếu sau này bạn
cần trích xuất thơng tin từ website khác .
2.1.2 Thư viện Jsoup .
Jsoup là Java HTML Parser. Nói cách khac Jsoup là một thư viện được
sử dụng để phân tích tài liệu HTML. Jsoup cung cấp các API dùng để lấy dữ liệu và

thao tác dữ liệu từ URL hoặc từ tập tin HTML. Nó sử dụng các phương thức giống
với DOM, CSS , JQuery để lấy dữ liệu và thao tác với dữ liệu .
2.1.3 Kết luận.
- Tuy nhiên, 2 cách này có một số khuyết điểm sau:
Chỉ lấy được HTML thuần của trang web. Ngày xưa thì cịn ok chứ bây giờ hầu
hết các trang đều dùng JavaScript và Ajax để lấy dữ liệu và render. Lấy HTML
thuần thì ta khơng chơm được gì cả.

Bên server có một số biện pháp để chặn HTTP Request đơn thuần ( dựa theo
user-agent, …) nên dễ bị chặn.

Với một số trang phải đăng nhập mới có dữ liệu, việc quản lý cookie, đăng
nhập v…v với HTML Agility Pack rất rắc rối.
- Dùng Headless browser puppeteer, ta giải quyết được toàn bộ những vấn đề
trên, khơng những thế ta cịn có thể sử dụng puppeteer vào các ứng dụng như :




Chụp ảnh và file PDF của trang web



Crawl dữ liệu trang web
Tự động submit form, testing UI, input bàn phím
Automated testing trực tiếp trên phiên bản mới nhất của Chrome
Phân tích vấn đề hiệu năng
Test Chrome extension








2.2

Các công nghệ hỗ trợ cho việc vận dụng các chức năng của puppeteer.
2.2.1 Atom text editor.

-Atom là text editor mới ra và đang được đơng đảo các lập trình viên trong cộng
đồng lập trình đón nhận bởi rất nhiều những tính năng đáng thử của nó. Trong bài viết này tơi
sẽ giới thiệu về những tính năng hữu dụng trong Atom Text Editor.
Open Source
Atom là phần mềm open source, khơng chỉ miễn phí để sử dụng người dùng cịn có quyền
xem và thay đổi source code của phần mềm. Bạn cũng có thể tự do đóng góp vào cộng đồng
bằng việc phát triển phần mềm text editor này.
Đa Nền Tảng
Tính năng đa nền tảng (hay cross platform) giúp Atom có thể được cài đặt và chạy trên nhiều
nền tảng hệ điều hành khác nhau bao gồm Windows, MacOS và tất cả các distribution phổ
biến của Linux. Điều này giúp bạn yên tâm khi phải làm việc cùng một lúc với các ngôn ngữ
chạy trên các nền tảng khác nhau. Ví dụ như khi bạn phải làm việc với cả .NET hay Java trên
Windows và PHP trên Linux.
Nhanh và Nhẹ
Nếu bạn phải làm việc trên nhiều dự án khác nhau thì tính năng này là tính năng khơng thể bỏ
qua khi xem xét chọn Atom làm Text Editor để lập trình.
Package Manager
Tương tự như Sublime Text, Atom hỗ trợ việc cài các gói package để tạo thêm tính năng cho
phần mềm này. Việc cài đặt và quản lý các package được thực hiện một cách đơn giản thông
qua package manager. Giống như mã nguồn của phần mềm này, tất cả các gói package cũng

đều miễn phí và open source.
Theme
Trong Atom, các theme (mẫu) được sử dụng để tạo nên màu sắc và màu nền cho text editor.
Giống như mã nguồn của Atom, mã nguồn của các theme này được xây dựng hồn tồn bằng
các cơng nghệ web như HTML, Javascript và CSS.
Sau khi cài đặt thì mặc định Atom cung cấp cho bạn 4 mẫu theme có sẵn với các màu nền và
màu sắc khác nhau. Ngoài ra bạn cũng có thể tìm thấy rất nhiều mẫu theme được xuất bản bởi
cộng đồng phát triển Atom. Trong trường hợp bạn muốn tạo riêng một theme cho mình thì
Atom cung cấp cho bạn một API giúp bạn dễ dàng làm được điều này.

Link download : atom.io


2.2.2 Nodejs.
- Nodejs là một nền tảng (Platform) phát triển độc lập được xây dựng ở trên
Javascript Runtime của Chrome mà chúng ta có thể xây dựng được các ứng dụng
mạng một cách nhanh chóng và dễ dàng mở rộng.
- Những ứng dụng nên viết bằng Nodejs


Websocket server: Các máy chủ web socket như là Online Chat, Game
Server…



Fast File Upload Client: là các chương trình upload file tốc độ cao.



Ad Server: Các máy chủ quảng cáo.




Cloud Services: Các dịch vụ đám mây.



RESTful API: đây là những ứng dụng mà được sử dụng cho các ứng dụng khác
thông qua API.



Any Real-time Data Application: bất kỳ một ứng dụng nào có yêu cầu về tốc
độ thời gian thực. Micro Services: Ý tưởng của micro services là chia nhỏ một
ứng dụng lớn thành các dịch vụ nhỏ và kết nối chúng lại với nhau. Nodejs có thể
làm tốt điều này.

2.2.3

Testing framework Jest

Jest là một testing framework khá mới được xây dựng bởi Facebook và được
cộng đồng React rất đón nhận. Có một quan niệm sai lầm là Jest được thiết kế đặc thù
để làm việc với React, tuy nhiên, theo tài liệu của Jest:
“Dù Jest có thể xem là test runner đặc thù cho React, nhưng thực tế là một nền tảng
testing phổ cập, với khả năng thích nghi cho bất kể thư viện hoặc framework
JavaScript nào. Bạn có thể sử dụng Jest để test bất kỳ mã JavaScript nào.”
Ưu điểm của Jest so với những bộ kiểm thử khác là không cần phải có cấu hình gì để
bắt đầu viết các testing. Framework đã có phần thư viên dựng sẵn và hỗ trợ sử dụng
của việc bắt chước các hàm.



Một số API cần dùng khi viết automation test
Automation test tức là ta tự động hố những việc mình làm lúc manual test. Vậy lúc
test kiểu thủ công .
Phần lớn những việc sẽ phải làm là là:
Đăng nhập

Nhập thông tin vào form này form kia

Click chuột chỗ này chỗ nọ

Sau đó kiểm tra kết quả
Do vậy, đây là những API của puppeteer mà chúng ta sẽ dùng để làm những việc trên:



Chương 3

Triển Khai Xây Dựng

3.1 Tổng quan của hệ thống nghiên cứu.
Vận dụng những kiến thức đã tìm hiểu được và vận dụng thực hiện các chức năng như:
- Chụp hình màn hình với puppeteer
- Tạo file PDF
- Cào dữ liệu ( crawl) : lời 20 bài hát từ trang web : nhaccuatui.com
- Thực hiện Automation test với testing framework Jest

3.2 Triển khai xây dựng và thực hiện các chức năng .
1.

2.
3.
4.
5.

3.2.1 Khởi tạo môi trường để làm việc .
Tạo 1 thư mục mang tên puppeteer-test
Các bạn mở cửa sổ cmd trong thư mục này, gõ npm init, sau đó cứ enter ok
hết để khởi tạo project nodejs
Tiếp tục gõ npm install –save puppeteer để cài puppeteer. npm sẽ tải luôn bản
Chrome mới nhất khoảng 100MB .
Sử dụng IDE Atom mở thư mục puppeteer-test , tạo file index.js và bắt đầu làm
việc.
Để chạy chương trình ta vào cmd gõ node index.js
3.2.2 Xây Dựng Chức Năng.

3.2.2.1 Chức năng chụp ảnh màn hình :
-

Thực hiện chức năng chụp màn hình với headless : false -> chế độ này rất hữu
dụng, ta có thể nhìn xem browser hiển thị & hoạt động có đúng í muốn của ta
khơng. Thay vì chỉ debug trên console, ta có thể xem tồn bộ browser bằng cách sử
dụng headless: false


3.2.2.2 Chức năng tạo file PDF :
-

Thực hiện chức năng : vào trang nettruyen.com sau đó chụp màn hình lại và tọa
thành file PDF với kích thước A4



3.2.2.3 Cào dữ liệu : lời 20 bài hát từ trang web nhaccuatui.com :
-

Bước đầu tiên cần truy cập vào trang web nhaccuatui.com và chọn playlist 20
bài hát, sau đó bấm F12 để xem .

-

Bước tiếp theo ta lấy class ” .name_song” tên các bài hát trong list.

-

Class “ pd_lyric” chứa lời bài hát

-

Sau khi thực hiện chương trình thì puppeteer sẽ cào dữ liệu của 20 bài hát và lưu
thành file .txt.


3.2.2.4 Cào dữ liệu : tải truyện từ web đọc truyện sachvui.com
-

Bước đầu , ta truy cập vào địa chỉ trang web , sau đó nhấn F12 để xem cấu trúc
và lấy thẻ “ .noi_dung_online”(thẻ chứa hình ảnh của truyện)


-


Sau khi chạy chương trình ta có được các file .jpg chứa nội dung bộ truyện


3.2.2.5 Automation test sử dụng testing framework Jest
Cài đặt project automation test
- Do Puppeteer chạy trên nền NodeJS nên chúng ta sẽ dùng Jest testing framework.
- Các bước để khởi tạo project :

1.
2.

Tạo thư mục mới đặt tên là puppet-test
Mở cmd rồi cd vào thư mục này. Lần lượt gõ các lệnh
 npm init
 npm install –save jest
npm install –save puppeteer

3.

Tạo file packages.json và nhập nội dung đoạn script :

- Mặc định, Jest sẽ chạy unit test trong những file có đi .spec.js hoặc .test.js. Do vậy,
chúng ta tạo một file tên number.test.js và câu lệnh để chạy chương trình là :
 npm run test


- Thực hiện test chức năng tìm kiếm Iphone trên Lazada :
Để test chức năng search, ta thực hiện các bước như sau:
1.

2.
3.

Tìm khung search
Gõ iphone, ấn enter
Sau khi kiểm tra, ta thấy sản phẩm là div có attribute là
data-qa-locator=product-item
4.
Đếm số lượng sản phẩm, nếu đủ 40 là được.
5.
(Nhưng cần vào trang Lazada nhấn F12 để xem cấu trúc của trang web)


 Ta có được kết quả sau khi run :


3.3 Kết quả sau khi thực hiện .

 Sau khi thực hiện các chức năng của puppeteer ta có :

-

File ảnh chụp màn hình với tên : nettruyen.png.
File PDF với tên : nettruyen.pdf.
20 file .txt chứa lời bài hát từ trang web nhaccuatui.com.
34 file .jpg chứa nội dung truyện.
Thực hiện kiểm thử chức năng tìm kiếm iphone của Lazada .


Chương 4


Kết luận và Hướng phát triển

4.1 Kết Luận.









- Puppeteer
Về mặt cào dữ liệu:
Puppeteer hỗ trợ cào dữ liệu trên các trang web dung javascript và Ajax
 Về mặt testing:
Với các dự án viết bằng C#, Java, người ta thường chọn JUnit, NUnit để làm
testing framework (viết test case, chạy test case, báo cáo tỉ lệ pass/fail).
Đi kèm với chúng thường là Selenium – một thư viện khá mạnh cho phép ta
điều khiển trình duyệt Chrome, Firefox, IE.
So với Selenium thì Puppeteer vẫn cịn khá thua kém vì thiếu một số tính
năng (Chưa chạy được đồng thời trên nhiều máy, chưa select được xPath) và chỉ
có thể chạy được trên trình duyệt Chrome.
Pupeteer vẫn cịn thua Selenium về một số khía cạnh
Tuy vậy, nó có chút ưu điểm là do chính team của Google phát triển, dễ cài đặt,
cài xong là chạy ngay, cịn có thể chạy headless khơng cần giao diện nên tốc độ
chạy sẽ nhanh hơn.

- Bản thân

Nhìn chung, sau khi kết thúc đề tài em đã đạt được những điều sau đây:
Nắm vững được các ứng dụng của puppeteer vào trong cuộc sống.
Sử dụng thành thạo các ứng dụng của puppeteer
Bước đầu thành công cơ bản ứng dụng vào lĩnh vực Automation test
Bên cạnh đó, nó cịn một số hạn chế như sau:
- Chưa thực hiện được chức năng kiểm thử hiệu năng.
- Chưa thực hiện được kiểm thử tiện ích mở rộng trình duyệt ( extension).

4.2 Hướng Phát Triển.
Các hướng phát triển mà em sẽ hướng đến là:
- Tìm hiểu sâu thêm
- Thực hiện những điều chưa làm việc
- Tìm hiểu thêm nhiều cách để ứng dụng puppeteer.