ĐỀ 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Ở ĐỀ TÀI : Tìm hiểu API chrome puppeteer headless browser để ứng dụng vào cào liệu kiểm thử Sinh viên thực : 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 kỷ nguyên toàn cầu , với phát minh internet trái đất khơng cịn hình trịn mà đường thẳng kết nối ý nghĩ người.Cùng với q trình tồn cầu hố , nhu cầu chia thông tin , kết nối bạn bè ngày phát triển thúc đẩy đời mạng xã hội Trong vài năm trở lại ,nhu cầu người ngày cao đa dạng e xin giới thiệu đến người API puppeteer hỗ trợ số vấn đề sống LỜI CẢM ƠN Trong thời gian làm đồ án tốt nghiệp, em nhận nhiều giúp đỡ, đóng góp ý kiến bảo nhiệt tình thầy 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 bảo tạo điều kiện giúp đỡ em suốt trình làm đồ án Em xin chân thành cảm ơn thầy cô khoa Công Nghệ Thông Tin Và Truyền Thông, người dạy dỗ trang bị cho em khiến thức đễ hoàn thành đề tài đồ án Mặc dù trinh nghiên cứu đề tài , thân em có cố gắng định song trình độ thời gian có hạn nên đề tài khơng tránh khỏi thiếu sót.vậy kinh mong thầy bạn đóng góp ý kiến để em hồn thiện NHẬN XÉT (Của giảng viên hướng dẫn) ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… ………………………………………………………………………………………… MỤC LỤC Trang Chương Giới thiệu 1.1 Tổng quan .6 1.2 Phương pháp, kết .6 1.3 Cấu trúc đồ án Chương 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 .7 2.1.2 Thư viện Jsoup 2.1.3 Kết luận 2.2 Các công nghệ hỗ trợ cho việc vận dụng chức puppeteer 2.2.1 Atom text editor 2.2.2 Nodejs 2.2.3 Testing framework Jest Chương Triển Khai Xây Dựng .11 3.1 Tổng quan hệ thống nghiên cứu .11 3.2 Triển khai xây dựng thực chức 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 chụp ảnh hình : 11 3.2.2.2 Chức tạo file PDF : 12 3.2.2.3 Cào liệu : lời 20 hát từ trang web nhaccuatui.com : .13 3.2.2.4 Cào 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 sau thực 19 Chương Kết luận 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 Giới thiệu 1.1 Tổng quan Sự phát triển cách mạng công nghiệp 4.0 với phổ biến rộng rải điện thoại di động internet Kèm theo nhu cầu mặt người ngày tăng cao Áp dụng kiến thức tìm hiểu em xin giới thiệu đến người API puppeteer , giúp hỗ trợ nhu cầu thu thập lời hát, tìm kiếm giá sản phẩm so sánh chúng Công cụ hỗ trợ ngành công nghệ thông tin kiểm thử tự động, kiểm thử các tiện ích mở rộng trình duyệt ( extension) , phân tích vấn đề hiệu 1.2 Phương pháp, kết Phương pháp xây dựng sản phẩm bao gồm bước sau: - Tìm hiểu thơng tin API puppeteer lĩnh vực sử dụng puppeteer - Tìm hiểu ứng dụng thư viện có chức tương tự từ đứa phân tích so sánh - Tiếp đến, em bắt đầu ứng dụng chức hàm api vào việc xây dựng tiện ích từ chúng - Cuối đưa kết dựa nghiên cứu vận dụng từ trước 1.3 Cấu trúc đồ án Phần 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 giới thiệu lĩnh vực, chức có sẵn tương tự với puppeteer Tiếp theo em giới thiệu tổng quát puppeteer điều làm Chương 3: Triển khai xây dựng Trong chương này, em trình bày chức giới thiệu 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 hướng phát triển Trong chương này, em chia thành phần Phần kết luận giới thiệu mà ứng dụng hạn chế Phần hướng phát triển đưa hướng sau ứng dụng Chương 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 thư viện parse HTML mạnh, lý phổ biến sử dụng với hầu hết html, valid unvalid (Trong thực tế số lượng website có HTML unvalid nhiều vơ số kể, thư viện khác dễ bị lỗi, HTMLAgilityPack khơng) Kiến thức hữu dụng sau bạn cần trích xuất thơng tin từ website khác 2.1.2 Thư viện Jsoup Jsoup Java HTML Parser Nói cách khac Jsoup thư viện sử dụng để phân tích tài liệu HTML Jsoup cung cấp API dùng để lấy liệu thao tác liệu từ URL từ tập tin HTML Nó sử dụng phương thức giống với DOM, CSS , JQuery để lấy liệu thao tác với liệu 2.1.3 Kết luận - Tuy nhiên, cách có số khuyết điểm sau: Chỉ lấy HTML trang web Ngày xưa ok hầu hết trang dùng JavaScript Ajax để lấy liệu render Lấy HTML ta khơng chơm  Bên server có số biện pháp để chặn HTTP Request đơn ( dựa theo user-agent, …) nên dễ bị chặn  Với số trang phải đăng nhập có liệu, việc quản lý cookie, đăng nhập v…v với HTML Agility Pack rắc rối - Dùng Headless browser puppeteer, ta giải toàn vấn đề trên, khơng ta cịn sử dụng puppeteer vào ứng dụng :   Chụp ảnh file PDF trang web  Crawl liệu trang web Tự động submit form, testing UI, input bàn phím Automated testing trực tiếp phiên Chrome Phân tích vấn đề hiệu Test Chrome extension     2.2 Các công nghệ hỗ trợ cho việc vận dụng chức puppeteer 2.2.1 Atom text editor -Atom text editor đông đảo lập trình viên cộng đồng lập trình đón nhận nhiều tính đáng thử Trong viết giới thiệu tính hữu dụng Atom Text Editor Open Source Atom phần mềm open source, khơng miễn phí để sử dụng người dùng cịn có quyền xem thay đổi source code phần mềm Bạn tự đóng góp vào cộng đồng việc phát triển phần mềm text editor Đa Nền Tảng Tính đa tảng (hay cross platform) giúp Atom cài đặt chạy nhiều tảng hệ điều hành khác bao gồm Windows, MacOS tất distribution phổ biến Linux Điều giúp bạn yên tâm phải làm việc lúc với ngôn ngữ chạy tảng khác Ví dụ bạn phải làm việc với NET hay Java Windows PHP Linux Nhanh Nhẹ Nếu bạn phải làm việc nhiều dự án khác tính tính khơng thể bỏ qua xem xét chọn Atom làm Text Editor để lập trình Package Manager Tương tự Sublime Text, Atom hỗ trợ việc cài gói package để tạo thêm tính cho phần mềm Việc cài đặt quản lý package thực cách đơn giản thông qua package manager Giống mã nguồn phần mềm này, tất gói package miễn phí open source Theme Trong Atom, theme (mẫu) sử dụng để tạo nên màu sắc màu cho text editor Giống mã nguồn Atom, mã nguồn theme xây dựng hoàn toàn công nghệ web HTML, Javascript CSS Sau cài đặt mặc định Atom cung cấp cho bạn mẫu theme có sẵn với màu màu sắc khác Ngồi bạn tìm thấy nhiều mẫu theme xuất cộng đồng phát triển Atom Trong trường hợp bạn muốn tạo riêng theme cho Atom cung cấp cho bạn API giúp bạn dễ dàng làm điều Link download : atom.io 2.2.2 Nodejs - Nodejs tảng (Platform) phát triển độc lập xây dựng Javascript Runtime Chrome mà xây dựng ứng dụng mạng cách nhanh chóng dễ dàng mở rộng - Những ứng dụng nên viết Nodejs  Websocket server: Các máy chủ web socket Online Chat, Game Server…  Fast File Upload Client: 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: ứng dụng mà sử dụng cho ứng dụng khác thông qua API  Any Real-time Data Application: ứng dụng có yêu cầu tốc độ thời gian thực Micro Services: Ý tưởng micro services chia nhỏ ứng dụng lớn thành dịch vụ nhỏ kết nối chúng lại với Nodejs làm tốt điều 2.2.3 Testing framework Jest Jest testing framework xây dựng Facebook cộng đồng React đón nhận Có quan niệm sai lầm Jest thiết kế đặc thù để làm việc với React, nhiên, theo tài liệu Jest: “Dù Jest xem test runner đặc thù cho React, thực tế tảng testing phổ cập, với khả thích nghi cho thư viện framework JavaScript Bạn sử dụng Jest để test mã JavaScript nào.” Ưu điểm Jest so với kiểm thử khác khơng cần phải có cấu hình để bắt đầu viết testing Framework có phần thư viên dựng sẵn hỗ trợ sử dụng việc bắt chước hàm Một số API cần dùng viết automation test Automation test tức ta tự động hố việc làm lúc manual test Vậy lúc test kiểu thủ công Phần lớn việc phải làm là: Đăng nhập  Nhập thông tin vào form form  Click chuột chỗ chỗ  Sau kiểm tra kết Do vậy, API puppeteer mà dùng để làm việc trên:  Chương Triển Khai Xây Dựng 3.1 Tổng quan hệ thống nghiên cứu Vận dụng kiến thức tìm hiểu vận dụng thực chức như: - Chụp hình hình với puppeteer - Tạo file PDF - Cào liệu ( crawl) : lời 20 hát từ trang web : nhaccuatui.com - Thực Automation test với testing framework Jest 3.2 Triển khai xây dựng thực chức 3.2.1 Khởi tạo môi trường để làm việc Tạo thư mục mang tên puppeteer-test Các bạn mở cửa sổ cmd thư mục này, gõ npm init, sau enter ok hết để khởi tạo project nodejs Tiếp tục gõ npm install –save puppeteer để cài puppeteer npm tải Chrome khoảng 100MB Sử dụng IDE Atom mở thư mục puppeteer-test , tạo file index.js 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 chụp ảnh hình : - Thực chức chụp hình với headless : false -> chế độ hữu dụng, ta nhìn xem browser hiển thị & hoạt động có í muốn ta khơng Thay debug console, ta xem tồn browser cách sử dụng headless: false 3.2.2.2 Chức tạo file PDF : - Thực chức : vào trang nettruyen.com sau chụp hình lại tọa thành file PDF với kích thước A4 3.2.2.3 Cào liệu : lời 20 hát từ trang web nhaccuatui.com : - Bước cần truy cập vào trang web nhaccuatui.com chọn playlist 20 hát, sau bấm F12 để xem - Bước ta lấy class ” name_song” tên hát list - Class “ pd_lyric” chứa lời hát - Sau thực chương trình puppeteer cào liệu 20 hát lưu thành file txt 3.2.2.4 Cào liệu : tải truyện từ web đọc truyện sachvui.com - Bước đầu , ta truy cập vào địa trang web , sau nhấn F12 để xem cấu trúc lấy thẻ “ noi_dung_online”(thẻ chứa hình ảnh truyện) - Sau chạy chương trình ta có file jpg chứa nội dung truyện 3.2.2.5 Automation test sử dụng testing framework Jest Cài đặt project automation test - Do Puppeteer chạy NodeJS nên dùng Jest testing framework - Các bước để khởi tạo project : Tạo thư mục đặt tên puppet-test Mở cmd cd vào thư mục Lần lượt gõ lệnh  npm init  npm install –save jest npm install –save puppeteer Tạo file packages.json nhập nội dung đoạn script : - Mặc định, Jest chạy unit test file có đuôi spec.js test.js Do vậy, tạo file tên number.test.js câu lệnh để chạy chương trình :  npm run test - Thực test chức tìm kiếm Iphone Lazada : Để test chức search, ta thực bước sau: Tìm khung search Gõ iphone, ấn enter Sau kiểm tra, ta thấy sản phẩm div có attribute data-qa-locator=product-item Đếm số lượng sản phẩm, đủ 40 (Nhưng cần vào trang Lazada nhấn F12 để xem cấu trúc trang web)  Ta có kết sau run : 3.3 Kết sau thực  Sau thực chức puppeteer ta có : - File ảnh chụp hình với tên : nettruyen.png File PDF với tên : nettruyen.pdf 20 file txt chứa lời hát từ trang web nhaccuatui.com 34 file jpg chứa nội dung truyện Thực kiểm thử chức tìm kiếm iphone Lazada Chương Kết luận Hướng phát triển 4.1 Kết Luận      - Puppeteer Về mặt cào liệu: Puppeteer hỗ trợ cào liệu trang web dung javascript Ajax  Về mặt testing: Với dự án viết 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 Selenium – thư viện mạnh cho phép ta điều khiển trình duyệt Chrome, Firefox, IE So với Selenium Puppeteer cịn thua thiếu số tính (Chưa chạy đồng thời nhiều máy, chưa select xPath) chạy trình duyệt Chrome Pupeteer cịn thua Selenium số khía cạnh Tuy vậy, có chút ưu điểm team Google phát triển, dễ cài đặt, cài xong chạy ngay, cịn chạy headless khơng cần giao diện nên tốc độ chạy nhanh - Bản thân Nhìn chung, sau kết thúc đề tài em đạt điều sau đây: Nắm vững ứng dụng puppeteer vào sống Sử dụng thành thạo ứng dụng puppeteer Bước đầu thành công ứng dụng vào lĩnh vực Automation test Bên cạnh đó, cịn số hạn chế sau: - Chưa thực chức kiểm thử hiệu - Chưa thự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 hướng đến là: - Tìm hiểu sâu thêm - Thực điều chưa làm việc - Tìm hiểu thêm nhiều cách để ứng dụng puppeteer  .. . hình : 11 3.2 . 2.2 Chức tạo file PDF : 12 3.2 . 2.3 Cào liệu : lời 20 hát từ trang web nhaccuatui.com : .1 3 3.2 . 2.4 Cào liệu : tải truyện từ web đọc truyện sachvui.com 14 3.2 . 2.5 .. . false 3.2 . 2.2 Chức tạo file PDF : - Thực chức : vào trang nettruyen.com sau chụp hình lại tọa thành file PDF với kích thước A4 3.2 . 2.3 Cào liệu : lời 20 hát từ trang web nhaccuatui.com : - Bước .. . .7 2.1 .2 Thư viện Jsoup 2.1 .3 Kết luận 2.2 Các công nghệ hỗ trợ cho việc vận dụng chức puppeteer 2.2 .1 Atom text editor 2.2 .2 Nodejs 2.2 .3 Testing