ĐỀ 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ử . Giảng viên hướng dẫn : ThS. NGUYỄN VĂN BÌNH

ĐẠ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 t

ĐẠ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 quá trình toàn cầu hoá , 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

-(https://archive.codeplex.com/?p=htmlagilitypack)

- 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 hoàn toà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 hoá 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à:

 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

3.2.1 Khởi tạo môi trường để làm việc

1 Tạo 1 thư mục mang tên puppeteer-test

2 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

3 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

4. Sử dụng IDE Atom mở thư mục puppeteer-test , tạo file index.js và bắt đầu làm việc

5. Để 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 toà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 Tạo thư mục mới đặt tên là puppet-test

2. 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ó đuô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 Tìm khung search

2 Gõ iphone, ấn enter

3 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