Quét web JavaScript

Thưởng. nếu bạn thích nội dung của chúng tôi và hướng dẫn "NodeJS và JavaScript web scraping" này, bạn có thể tham gia cộng đồng Slack tự động hóa trình duyệt web của chúng tôi

Trong gần 30 năm, JavaScript là một trong những ngôn ngữ lập trình phổ biến nhất để phát triển web. Nó được các nhà phát triển yêu thích và sử dụng rộng rãi đến mức nó cũng đã được điều chỉnh để chạy bên ngoài trình duyệt; . Node đã tạo ra một hệ sinh thái khổng lồ và các trường hợp sử dụng khác nhau, từ khoa học dữ liệu, phát triển trò chơi, AI và tất nhiên là tự động hóa web.
Bạn ở đây để tìm hiểu thêm về phần cuối cùng, tự động hóa web, vì vậy chúng tôi đã tạo một hướng dẫn đầy đủ cho bất kỳ ai muốn bắt đầu tự động hóa web vào năm 2022 bằng cách sử dụng nền tảng JavaScript đáng kinh ngạc này.

Nguyên tắc cơ bản về web

Có một số cách khác nhau để thực hiện tự động hóa web trong Node và về cơ bản, mỗi cách đều sử dụng một số thư viện cung cấp API cấp cao để giao tiếp với công cụ cơ bản của trình duyệt. Chúng tôi đã dành nhiều bài viết về cách sử dụng các API khác nhau này. Để trở thành một chuyên gia thực sự, bạn nên hiểu sâu hơn về các khái niệm cốt lõi đằng sau hoạt động của các trang web và cách các thư viện này có thể trích xuất dữ liệu và mô phỏng các hành động cụ thể của người dùng trên trình duyệt web.  

Hầu hết các tác vụ tự động hóa web bao gồm một số loại truy xuất dữ liệu từ các trang web. Chúng tôi có thể muốn trích xuất thông tin về video YouTube yêu thích của mình hoặc tiến hành kiểm tra E2E trên ứng dụng web của mình. Để xử lý những trường hợp đó, chúng tôi dựa vào trình duyệt web để thực hiện tất cả các công việc nặng nhọc (yêu cầu tài nguyên, thực thi các tập lệnh khác nhau và hiển thị trang web). Đôi khi, chúng tôi sử dụng thuật ngữ tự động hóa trình duyệt thay thế cho nhau để biểu thị rằng chúng tôi có thể tận dụng API cơ bản mà mỗi trình duyệt hiển thị và giao tiếp với nó. Nhưng tại sao chúng ta có thể truy vấn một trang web ngay từ đầu?

Các trang web được xây dựng như thế nào

Tất cả các trang web đều bắt đầu bằng một tệp văn bản chứa ngữ nghĩa ở định dạng được gọi là HTML (Ngôn ngữ đánh dấu siêu văn bản), khối xây dựng cơ bản nhất của Web, định nghĩa ý nghĩa và cấu trúc của nội dung trang web. Chúng ta có thể thêm kiểu dáng thông qua CSS (Cascadian Style Sheet) hoặc chức năng/hành vi thông qua JS (JavaScript). Một trang web thường chứa nhiều tệp HTML, CSS và JS.
Trang web sau đó được lưu trong một máy tính từ xa chạy máy chủ web; . Chúng ta thường liên kết một đoạn văn bản có thể đọc được, được gọi là tên miền, với địa chỉ IP đó, để chúng ta không phải gõ các số lạ. Google dễ nhớ hơn. com hơn 2a00. 1450. 4001. 809. 200e.

Trình duyệt truy cập các trang web như thế nào?

Bây giờ chúng ta đã có một trang web đang hoạt động, bước tiếp theo là sử dụng trình duyệt web để truy cập trang web đó. Điều này thật dễ dàng; . g. Google. com, trong thanh địa chỉ và trang đầu tiên của Google được hiển thị sau vài giây. Nhưng những gì xảy ra đằng sau hậu trường?

Nếu chúng tôi kiểm tra kỹ thanh địa chỉ của ảnh chụp màn hình ở trên, chúng tôi có thể thấy rằng tên miền được thêm vào bởi văn bản https. //. Điều này biểu thị giao thức của địa chỉ, trong trường hợp này là HTTP qua SSL. Wow, hai thuật ngữ mới ở đây.  

Giao thức HTTP (Giao thức truyền siêu văn bản) là nền tảng của giao tiếp dữ liệu cho World Wide Web. Đó là cách chúng ta có thể giao tiếp với các thực thể từ xa khác nhau và trao đổi thông tin. Truy cập các trang web luôn cần có hai bên; . HTML, phương tiện, tập lệnh, v.v. ), có thể là trình duyệt web và máy chủ web đáp ứng các yêu cầu đó. Tùy thuộc vào tính khả dụng của tài nguyên, giao thức HTTP xác định khác nhau để thông báo cho khách hàng phù hợp

Hãy đảm nhận vai trò trình duyệt. một người dùng yêu cầu ví dụ tài nguyên. com. Đây là một trang web, vì vậy chúng tôi sẽ tạo một yêu cầu HTTP đến địa chỉ đó (được gọi là máy chủ lưu trữ). Đây là một ví dụ đơn giản của một yêu cầu như vậy

GET / HTTP/1.1
Host: example.com
User-Agent: Mozilla/5.0

Yêu cầu HTTP bao gồm các yếu tố sau

• Dòng đầu tiên bao gồm Phương thức HTTP, thường là một động từ như GET, POST hoặc một danh từ như HEAD xác định thao tác cần được thực hiện. Chúng tôi đang cố gắng tìm nạp tài nguyên, vì vậy chúng tôi đang sử dụng GET.  
• Phương thức HTTP được theo sau bởi Đường dẫn của tài nguyên để tìm nạp. Trong ví dụ của chúng tôi, chúng tôi muốn đường dẫn gốc được biểu thị bằng ký tự gạch chéo. Nếu chúng tôi cố gắng truy cập ví dụ về trang. com/pages/1, chúng tôi sẽ sử dụng /pages/1 làm Đường dẫn
• Phiên bản của giao thức HTTP được sử dụng hoàn thành dòng đầu tiên. Có nhiều phiên bản qua nhiều năm. Hiện tại, HTTP/2 được sử dụng bởi phần lớn các máy chủ web
• Các dòng tiếp theo xác định tiêu đề truyền tải thông tin bổ sung cho máy chủ, chẳng hạn như máy chủ được yêu cầu và phiên bản trình duyệt được sử dụng để thực hiện yêu cầu

Sau khi máy chủ web nhận được yêu cầu, nó sẽ xử lý các tiêu đề khác nhau, đảm bảo rằng tài nguyên tồn tại và trả về phản hồi HTTP thích hợp cho trình duyệt. Giả sử chúng ta thử truy cập một trang HTML và trang đó tồn tại, phản hồi sẽ như thế này

HTTP/1.1 200 OK
Date: Sun, 25 Sep 2022 06:23:57 GMT
Server: Apache
Content-Language: en
Content-Type: text/html; charset=UTF-8
Content-Length: 155
Last-Modified: Wed, 08 Jan 2022 23:11:55 GMT
ETag: "3f80f-1b6-3e1cb03b"
Accept-Ranges: bytes

<html>
  <head>
    <title>An Example Page</title>
  </head>
  <body>
    <p>Hello World, this is a very simple HTML document.</p>
  </body>
</html>

Phản hồi HTTP bao gồm các yếu tố sau

• Ở dòng đầu tiên là phiên bản giao thức HTTP.  
• Phiên bản giao thức được theo sau bởi mã trạng thái phản hồi và thông báo trạng thái tương ứng, mô tả ngắn về mã trạng thái. Có nhiều mã trạng thái được xác định trước
• Các dòng sau chứa tiêu đề phản hồi, giống như tiêu đề cho yêu cầu
• Theo tùy chọn, phần thân chứa tài nguyên đã tìm nạp sẽ hoàn thành phản hồi. Chúng tôi đã yêu cầu một trang HTML, vì vậy nội dung phản hồi tương ứng với dữ liệu đó

Đây là phần trình bày cấp cao về hoạt động giao tiếp đằng sau hậu trường. Sau khi nhận được phản hồi HTTP, trình duyệt phải hiển thị văn bản thuần túy của nội dung phản hồi và tạo một trang tương tác. Phần sau đây giải thích những điều cơ bản của quy trình này, nhưng trước đó, chúng tôi có một vấn đề đang chờ xử lý cần giải quyết.
Hãy nhớ lại rằng khi chúng ta truy cập vào google. com, trình duyệt đã sử dụng giao thức HTTPS mà chúng tôi đã đề cập là HTTP qua SSL. Để bảo mật thông tin liên lạc HTTP, chúng tôi đã tạo một phần mở rộng của giao thức HTTP, được gọi là HTTPS (Bảo mật giao thức truyền siêu văn bản), cho phép giao thức liên lạc được mã hóa bằng TLS (Bảo mật lớp vận chuyển) hoặc trước đây là (Lớp cổng bảo mật). Điều này đảm bảo rằng người dùng độc hại bên thứ ba sẽ không giả mạo dữ liệu được trao đổi.

Trình duyệt hiển thị trang web như thế nào?

Đây là hướng dẫn cho người mới bắt đầu. Nếu bạn biết tất cả những điều này, vui lòng bỏ qua phần tiếp theo

Mặc dù mỗi công cụ kết xuất hoạt động khác nhau, đây là tóm tắt về cách thức hoạt động của hầu hết chúng

Sau khi truy xuất các nội dung tương ứng với một trang web thông qua nhiều yêu cầu HTTP, việc tiếp theo là trình duyệt xây dựng “cây nội dung”; . DOM được chỉ định bởi tổ chức W3C. Nó là một đặc điểm kỹ thuật chung để thao tác tài liệu

Công cụ trình duyệt cũng sẽ phân tích dữ liệu kiểu từ các phần tử kiểu nội tuyến và tệp CSS bên ngoài, để tạo “cây kết xuất”. Đây là một đối tượng khác được xây dựng song song với “cây nội dung”. Cây kết xuất là biểu diễn trực quan của tài liệu và cho phép vẽ nội dung theo đúng thứ tự của chúng. Nó chứa các hình chữ nhật với các thuộc tính trực quan như màu sắc và kích thước, theo đúng thứ tự được hiển thị trên màn hình

Việc tiếp theo là tạo “bố cục”. Điều này có nghĩa là cung cấp cho mỗi nút tọa độ chính xác nơi nó sẽ xuất hiện trên màn hình

Quá trình cuối cùng là "sơn". Trình duyệt sẽ gọi phương thức “paint()” của trình kết xuất để hiển thị nội dung trên màn hình

Chúng tôi truy cập cây DOM khi chúng tôi cố gắng "scape" một trang web, tùy thuộc vào phần mềm chúng tôi sử dụng. DOM có mối quan hệ gần như một đối một với đánh dấu

<html>
  <body>
    <p>
      Hello World
    </p>
    <div> <img src="hello_image.png"/></div>
  </body>
</html>

Ví dụ: đánh dấu này sẽ được dịch sang cây DOM sau

Điều đó kết thúc phần giới thiệu của chúng tôi về các nguyên tắc cơ bản về web. Bây giờ chúng ta đã hiểu sâu hơn về các hoạt động gạch chân được thực thi, chúng ta có thể triển khai một tập lệnh quét web đơn giản

Quét một trang web bằng các yêu cầu HTTP đơn giản và Regex

> Quét web đang trích xuất dữ liệu có giá trị từ một trang web. Có một số cách để làm cạo. truy cập trực tiếp vào World Wide Web bằng HTTP hoặc khung tự động hóa web. Trong ba phần sau, chúng tôi sẽ trình bày các phương pháp quét web khác nhau, bắt đầu bằng cách tiếp cận cấp thấp hơn thông qua các yêu cầu HTTP đơn giản và kết thúc bằng thư viện tự động hóa đầy đủ tính năng với nền tảng tự động hóa từ xa

Trình duyệt không phải là cách duy nhất để truy xuất dữ liệu đánh dấu và HTML của trang web. Nếu chúng tôi biết rằng trang web là tĩnh, nó không dựa vào logic kết xuất phức tạp trong thời gian chạy, chúng tôi có thể sử dụng các yêu cầu HTTP đơn giản để truy xuất dữ liệu đó. Trong Node có tích hợp sẵn HTTP client có thể sử dụng

Trong phần này, chúng tôi sẽ cố gắng truy xuất Mục lục từ một bài viết trên Wikipedia bằng cách sử dụng các yêu cầu HTTP đơn giản để truy cập nội dung trang web và regex để truy xuất dữ liệu được yêu cầu. Đây là một ảnh chụp màn hình từ bài viết chúng tôi sẽ sử dụng

Điều đó kết thúc phần giới thiệu của chúng tôi về các nguyên tắc cơ bản về web. Bây giờ chúng ta đã hiểu sâu hơn về các công việc gạch chân được thực thi, chúng ta có thể triển khai một tập lệnh quét web đơn giản.  

Quét một trang web bằng các yêu cầu HTTP đơn giản và Regex

> Quét web đang trích xuất dữ liệu có giá trị từ một trang web. Có một số cách để làm cạo. truy cập trực tiếp vào World Wide Web bằng HTTP hoặc khung tự động hóa web. Trong ba phần sau, chúng tôi sẽ trình bày các phương pháp quét web khác nhau, bắt đầu bằng cách tiếp cận cấp thấp hơn thông qua các yêu cầu HTTP đơn giản và kết thúc bằng thư viện tự động hóa đầy đủ tính năng với nền tảng tự động hóa từ xa

Trình duyệt không phải là cách duy nhất để truy xuất dữ liệu đánh dấu và HTML của trang web. Nếu chúng tôi biết rằng trang web là tĩnh, nó không dựa vào logic kết xuất phức tạp trong thời gian chạy, chúng tôi có thể sử dụng các yêu cầu HTTP đơn giản để truy xuất dữ liệu đó. Trong Node có tích hợp sẵn HTTP client có thể sử dụng

Trong phần này, chúng tôi sẽ cố gắng truy xuất Mục lục từ một bài viết trên Wikipedia bằng cách sử dụng các yêu cầu HTTP đơn giản để truy cập nội dung trang web và regex để truy xuất dữ liệu được yêu cầu. Đây là một ảnh chụp màn hình từ bài viết chúng tôi sẽ sử dụng

Giới thiệu mô-đun HTTP trong Node

Nút. js đi kèm với cả mô-đun HTTP và HTTPS trong thư viện chuẩn. Các mô-đun đó cho phép chúng tôi thực hiện các yêu cầu HTTP và HTTPS. Nhiệm vụ đầu tiên là nhập mô-đun vào tập lệnh JS, tạo yêu cầu HTTPS bằng URL mong muốn và lưu trang HTML được trả về thành một chuỗi để phân tích cú pháp sau này

import https from 'node:https'
 
const request = https.request({
  hostname: 'en.wikipedia.org',
  port: 443,
  path: '/wiki/World_Wide_Web',
  method: 'GET'
}, result => {
  let html = ''
 
  result.on('data', dataBuffer => {
    const partialHTML = dataBuffer.toString()
    html += partialHTML
  })
 
  result.on('end', () => {
    // DO SOMETHING WITH THE HTML STRING
    console.log(html)
  })
})
 
request.on('error', error => {
  console.error(error)
})
 
request.end()

Hãy xem qua mã. Đầu tiên, chúng tôi nhập mô-đun https. Chúng tôi sử dụng và thêm tên gói với nút. chuỗi; . Chúng tôi đang sử dụng tính năng nhập, có nghĩa là dự án sẽ phải sử dụng thứ gì đó như Babel hoặc đặt thuộc tính loại trên gói. json thành "mô-đun"

import https from 'node:https'

Tiếp theo, chúng tôi gọi phương thức yêu cầu trên phiên bản https. Điều này trả về một đối tượng đại diện cho một yêu cầu đang diễn ra có tiêu đề đã được xếp hàng đợi.  

const request = https.request({

Phương thức yêu cầu chấp nhận hai tham số. một tùy chọn cấu hình và gọi lại với đối tượng phản hồi. Trong cấu hình, chúng tôi xác định tất cả thông tin thích hợp để thực hiện yêu cầu HTTP, chẳng hạn như tên máy chủ, đường dẫn tài nguyên và phương thức HTTP. Chúng tôi cũng xác định thuộc tính cổng được đặt thành 443;

{
  hostname: 'en.wikipedia.org',
  port: 443,
  path: '/wiki/World_Wide_Web',
  method: 'GET'
}

Tham số thứ hai để yêu cầu là gọi lại. Cuộc gọi lại cung cấp một đối tượng kết quả như một tham số. Chúng tôi có thể đăng ký trình xử lý sự kiện dữ liệu trên kết quả và cuộc gọi lại của nó sẽ được gọi nhiều lần với một phần dữ liệu. Để có được chuỗi HTML hoàn chỉnh, chúng tôi đã xác định một biến html sẽ dần dần được tạo sau mỗi lần gọi lại dữ liệu được thực thi. Sau đó, chúng tôi xác định một trình lắng nghe sự kiện khác để lắng nghe sự kiện kết thúc. Cuộc gọi lại của nó sẽ được thực thi khi tất cả dữ liệu được truy xuất thành công. Từ bên trong, chúng ta có thể truy cập biến html, biến này sẽ chứa toàn bộ đánh dấu HTML của trang. Sau đó, chúng tôi sẽ phân tích cú pháp chuỗi này để lấy thông tin thích hợp, nhưng hiện tại, chúng tôi chỉ in nó ra bàn điều khiển

result => {
  let html = ''
 
  result.on('data', dataBuffer => {
    const partialHTML = dataBuffer.toString()
    html += partialHTML
  })
 
  result.on('end', () => {
    // DO SOMETHING WITH THE HTML STRING
    console.log(html)
  })
}

Sau khi khởi tạo một yêu cầu, chúng tôi đăng ký một sự kiện xử lý lỗi. Điều này đảm bảo chúng tôi có thể truy cập bất kỳ lỗi nào có thể xảy ra khi thực hiện yêu cầu. Đối với ví dụ đơn giản này, chúng tôi chỉ in lỗi tiêu chuẩn.  

request.on('error', error => {
  console.error(error)
})

Chúng tôi hoàn thành việc gửi yêu cầu bằng cách gọi phương thức kết thúc trên đối tượng yêu cầu.  

req.end()

Sau khi thực thi tập lệnh hoàn chỉnh, chúng ta sẽ nhận được toàn bộ trang HTML của bài viết Wikipedia mà chúng ta đã yêu cầu.  

Trích xuất dữ liệu từ HTML bằng Biểu thức chính quy

Bây giờ chúng ta đã truy xuất HTML của bài viết dưới dạng giá trị chuỗi, chúng ta có thể tiến hành phần tiếp theo, đó là truy xuất các mục danh sách của bảng nội dung. Chúng tôi đạt được điều này bằng cách sử dụng Biểu thức chính quy (regex), nhưng trước tiên, chúng tôi sẽ phải biết cấu trúc của nội dung. Bằng cách truy cập URL của bài viết và kiểm tra nhanh cây DOM, chúng tôi có thể xác định các phần tử DOM đại diện cho từng mục danh sách tương ứng

Như chúng ta có thể thấy từ ảnh chụp màn hình ở trên, mỗi mục danh sách được bao quanh bởi một thẻ span chứa thuộc tính lớp có giá trị là toctext

HTTP/1.1 200 OK
Date: Sun, 25 Sep 2022 06:23:57 GMT
Server: Apache
Content-Language: en
Content-Type: text/html; charset=UTF-8
Content-Length: 155
Last-Modified: Wed, 08 Jan 2022 23:11:55 GMT
ETag: "3f80f-1b6-3e1cb03b"
Accept-Ranges: bytes

<html>
  <head>
    <title>An Example Page</title>
  </head>
  <body>
    <p>Hello World, this is a very simple HTML document.</p>
  </body>
</html>

Để truy xuất văn bản bên trong các thẻ kèm theo, giải pháp sẽ là một biểu thức chính quy khớp với giá trị bằng chữ của tiêu đề kèm theo và cung cấp một nhóm chụp cho tất cả các ký tự tiềm năng

HTTP/1.1 200 OK
Date: Sun, 25 Sep 2022 06:23:57 GMT
Server: Apache
Content-Language: en
Content-Type: text/html; charset=UTF-8
Content-Length: 155
Last-Modified: Wed, 08 Jan 2022 23:11:55 GMT
ETag: "3f80f-1b6-3e1cb03b"
Accept-Ranges: bytes

<html>
  <head>
    <title>An Example Page</title>
  </head>
  <body>
    <p>Hello World, this is a very simple HTML document.</p>
  </body>
</html>

Chuyển biểu thức chính quy này vào tập lệnh JS của chúng tôi, bên trong cuộc gọi lại của trình lắng nghe sự kiện kết thúc, chúng tôi nhận được kết quả sau

HTTP/1.1 200 OK
Date: Sun, 25 Sep 2022 06:23:57 GMT
Server: Apache
Content-Language: en
Content-Type: text/html; charset=UTF-8
Content-Length: 155
Last-Modified: Wed, 08 Jan 2022 23:11:55 GMT
ETag: "3f80f-1b6-3e1cb03b"
Accept-Ranges: bytes

<html>
  <head>
    <title>An Example Page</title>
  </head>
  <body>
    <p>Hello World, this is a very simple HTML document.</p>
  </body>
</html>

Một cuộc gọi đến phương thức matchAll của biến chuỗi html sẽ dẫn đến một trình vòng lặp được trả về, có thể được chuyển thành một mảng JS bằng cú pháp trải rộng.  

Chạy toàn bộ tập lệnh, chúng ta sẽ thấy một chuỗi các chuỗi. danh sách các mục từ mục lục

HTTP/1.1 200 OK
Date: Sun, 25 Sep 2022 06:23:57 GMT
Server: Apache
Content-Language: en
Content-Type: text/html; charset=UTF-8
Content-Length: 155
Last-Modified: Wed, 08 Jan 2022 23:11:55 GMT
ETag: "3f80f-1b6-3e1cb03b"
Accept-Ranges: bytes

<html>
  <head>
    <title>An Example Page</title>
  </head>
  <body>
    <p>Hello World, this is a very simple HTML document.</p>
  </body>
</html>

Phương pháp này chỉ hoạt động trên các trang web tĩnh có nghĩa là gì?

Bắt đầu sử dụng tự động hóa web Browserless MIỄN PHÍ

Ở phần đầu của phần này, người ta đã đề cập rằng trang web mong muốn để cạo cần phải ở trạng thái tĩnh. Nhiều giao diện người dùng hiện đại được xây dựng bằng các khung và thư viện như Angular và React. Chúng hiển thị nội dung phù hợp một cách linh hoạt sau khi tất cả nội dung JavaScript tương ứng được tải và đánh giá trên trang. Điều này đề cập đến  (Kết xuất phía máy khách). chúng tôi chuyển hướng yêu cầu đến một tệp HTML duy nhất và máy chủ sẽ phân phối yêu cầu đó mà không có bất kỳ nội dung nào (hoặc có màn hình tải) cho đến khi chúng tôi tìm nạp tất cả JavaScript và để trình duyệt biên dịch mọi thứ trước khi hiển thị nội dung

Nếu chúng tôi cố gắng thực hiện một yêu cầu HTTP tới một trang web dựa trên CSR, chúng tôi sẽ không thể nhận được bất kỳ dữ liệu có giá trị nào vì các tập lệnh chưa được đánh giá để xây dựng cây DOM thích hợp

Vấn đề này không xuất hiện với các giải pháp kết xuất phía máy chủ cũ. Khi chúng tôi xây dựng một trang web — chẳng hạn với PHP — máy chủ đã biên dịch mọi thứ, bao gồm dữ liệu và gửi một trang HTML được điền đầy đủ cho máy khách. Có nhiều hơn cho câu chuyện này, nhưng hãy ghi nhớ điều đó ngay bây giờ. Đây là lý do tại sao các giải pháp dựa trên trình duyệt headless đã được phát triển để truy xuất và tương tác thành công với các trang web hiện đại.  

Quét một trang web bằng Axios và Cheerio

Biểu thức chính quy khá mạnh mẽ và cho phép tạo các quy tắc khớp đơn giản. Tuy nhiên, chúng trở nên phức tạp nhanh chóng và không phù hợp với các tác vụ phức tạp (trừ khi bạn không ngại kết thúc bằng một tác vụ xác thực địa chỉ email). Sử dụng mô-đun https tiêu chuẩn cũng không thuận tiện lắm; . Phần này sẽ giới thiệu hai thư viện mạnh mẽ, Axios để thực hiện các yêu cầu HTTP và Cheerio để phân tích cú pháp đánh dấu HTML thành cấu trúc DOM. Chúng ta cần cài đặt các gói NPM thích hợp để sử dụng 2 thư viện đó. Trong dự án của chúng tôi chạy

HTTP/1.1 200 OK
Date: Sun, 25 Sep 2022 06:23:57 GMT
Server: Apache
Content-Language: en
Content-Type: text/html; charset=UTF-8
Content-Length: 155
Last-Modified: Wed, 08 Jan 2022 23:11:55 GMT
ETag: "3f80f-1b6-3e1cb03b"
Accept-Ranges: bytes

<html>
  <head>
    <title>An Example Page</title>
  </head>
  <body>
    <p>Hello World, this is a very simple HTML document.</p>
  </body>
</html>

Hãy viết lại ví dụ trước bằng cách sử dụng hai thư viện đó để hiểu rõ hơn về tính đơn giản của chúng

HTTP/1.1 200 OK
Date: Sun, 25 Sep 2022 06:23:57 GMT
Server: Apache
Content-Language: en
Content-Type: text/html; charset=UTF-8
Content-Length: 155
Last-Modified: Wed, 08 Jan 2022 23:11:55 GMT
ETag: "3f80f-1b6-3e1cb03b"
Accept-Ranges: bytes

<html>
  <head>
    <title>An Example Page</title>
  </head>
  <body>
    <p>Hello World, this is a very simple HTML document.</p>
  </body>
</html>

Hãy xem kịch bản đã trở nên nhỏ gọn như thế nào. Hai dòng đầu tiên chứa các câu lệnh nhập của chúng tôi. Đối với mô-đun Cheerio, chúng tôi chỉ phải nhập chức năng tải

HTTP/1.1 200 OK
Date: Sun, 25 Sep 2022 06:23:57 GMT
Server: Apache
Content-Language: en
Content-Type: text/html; charset=UTF-8
Content-Length: 155
Last-Modified: Wed, 08 Jan 2022 23:11:55 GMT
ETag: "3f80f-1b6-3e1cb03b"
Accept-Ranges: bytes

<html>
  <head>
    <title>An Example Page</title>
  </head>
  <body>
    <p>Hello World, this is a very simple HTML document.</p>
  </body>
</html>

Việc đặt chức năng chính vào một khối thử/bắt đảm bảo rằng mọi lỗi mà câu lệnh của chúng tôi trả về sẽ được xử lý

HTTP/1.1 200 OK
Date: Sun, 25 Sep 2022 06:23:57 GMT
Server: Apache
Content-Language: en
Content-Type: text/html; charset=UTF-8
Content-Length: 155
Last-Modified: Wed, 08 Jan 2022 23:11:55 GMT
ETag: "3f80f-1b6-3e1cb03b"
Accept-Ranges: bytes

<html>
  <head>
    <title>An Example Page</title>
  </head>
  <body>
    <p>Hello World, this is a very simple HTML document.</p>
  </body>
</html>

Bây giờ chúng ta có thể bắt đầu triển khai phần chính của tập lệnh. Đầu tiên, chúng ta phải truy xuất trang HTML từ bài viết trên Wikipedia. Điều này có thể được thực hiện bằng cách gọi phương thức get do Axios cung cấp. Axios là một thư viện dựa trên lời hứa, vì vậy chúng ta có thể tận dụng việc sử dụng async/await. Bắt đầu từ Node v14, cú pháp chờ cấp cao nhất được hỗ trợ bởi ESM. Giá trị kết quả là một đối tượng chứa thuộc tính dữ liệu, chứa dữ liệu tương ứng được truy xuất bởi yêu cầu HTTP. Trong ví dụ này, dữ liệu sẽ giữ biểu diễn chuỗi của trang HTML. Phép gán hủy đối tượng được sử dụng để đổi tên nó thành thứ gì đó phù hợp hơn

HTTP/1.1 200 OK
Date: Sun, 25 Sep 2022 06:23:57 GMT
Server: Apache
Content-Language: en
Content-Type: text/html; charset=UTF-8
Content-Length: 155
Last-Modified: Wed, 08 Jan 2022 23:11:55 GMT
ETag: "3f80f-1b6-3e1cb03b"
Accept-Ranges: bytes

<html>
  <head>
    <title>An Example Page</title>
  </head>
  <body>
    <p>Hello World, this is a very simple HTML document.</p>
  </body>
</html>

Bây giờ chúng ta có thể tạo phiên bản Cheerio bằng cách chuyển đánh dấu HTML vào hàm tải. Cheerio phân tích cú pháp đánh dấu và cung cấp API để duyệt/thao tác cấu trúc dữ liệu kết quả, tương tự như thư viện JQuery

HTTP/1.1 200 OK
Date: Sun, 25 Sep 2022 06:23:57 GMT
Server: Apache
Content-Language: en
Content-Type: text/html; charset=UTF-8
Content-Length: 155
Last-Modified: Wed, 08 Jan 2022 23:11:55 GMT
ETag: "3f80f-1b6-3e1cb03b"
Accept-Ranges: bytes

<html>
  <head>
    <title>An Example Page</title>
  </head>
  <body>
    <p>Hello World, this is a very simple HTML document.</p>
  </body>
</html>

Hãy nhớ từ phần trước rằng mỗi mục danh sách trong bảng nội dung được bao quanh bởi thẻ span chứa thuộc tính lớp có giá trị toctext. Để truy xuất dữ liệu mong muốn, các bộ chọn khớp với tất cả các phần tử có toctext dưới dạng một lớp và sau đó gọi phương thức văn bản trên mỗi phần tử, phương thức này sẽ trả về văn bản bên trong. Gọi get đến giá trị được trả về sẽ truy xuất tất cả các phần tử khớp với đối tượng Cheerio, dưới dạng một mảng JS đơn giản

<html>
  <body>
    <p>
      Hello World
    </p>
    <div> <img src="hello_image.png"/></div>
  </body>
</html>

Cuối cùng, chúng ta có thể in kết quả ra bàn điều khiển

<html>
  <body>
    <p>
      Hello World
    </p>
    <div> <img src="hello_image.png"/></div>
  </body>
</html>

Trình duyệt không đầu với Browserless và Selenium WebDriver

Như chúng tôi đã giải thích, không phải lúc nào cũng có thể truy xuất toàn bộ nội dung của một trang bằng cách thực hiện các yêu cầu HTTP, đặc biệt là trên các trang web sử dụng các thư viện và khung giao diện người dùng như Angular và React. Nhưng đừng sợ – chúng tôi có một con át chủ bài – sử dụng trình duyệt không đầu thông qua các thư viện tự động hóa trình duyệt

Tự động hóa trình duyệt là quá trình mô phỏng các tác vụ dành riêng cho người dùng trên trình duyệt web. Trong những năm gần đây, tầm quan trọng của tự động hóa trình duyệt như một công cụ cốt lõi cho mọi thứ, từ tự động hóa các quy trình nội bộ, quét web, đến kiểm tra E2E, đã dẫn đến sự ra đời của một số thư viện tự động hóa khác nhau. Một trong số đó là Selenium WebDriver, tận dụng khả năng của hầu hết các trình duyệt hiện đại để cung cấp API để kiểm soát trực tiếp chúng

Ngoài thư viện tự động hóa mà chúng tôi chọn, chúng tôi cũng cần một phiên bản trình duyệt cục bộ hoặc từ xa. Mặc dù sử dụng phiên bản trình duyệt cục bộ là phương pháp thuận tiện, nhưng đây không phải là giải pháp hiệu quả nhất. Đối với Selenium, chúng ta nên thực hiện các bước bổ sung để định cấu hình môi trường phát triển của mình. Điều này có thể gây rắc rối nếu chúng ta muốn nhiều phiên bản trình duyệt chạy song song hoặc khi máy của chúng ta có tài nguyên tính toán hạn chế. Để giải quyết vấn đề này, các nền tảng tự động hóa web đã được phát triển để cung cấp các phiên bản trình duyệt từ xa sẵn sàng sử dụng

không có trình duyệt. Một công cụ miễn phí để quét web JavaScript & NodeJS

Bắt đầu sử dụng tự động hóa web Browserless MIỄN PHÍ

Browserless là một nền tảng tự động hóa không đầu trực tuyến cung cấp khả năng tự động hóa trình duyệt web nhanh, có thể mở rộng, đáng tin cậy, lý tưởng cho việc phân tích dữ liệu và quét web. Đó là mã nguồn mở với gần 5 nghìn sao trên GitHub. Một số công ty lớn nhất trên toàn thế giới sử dụng nó hàng ngày cho các nhiệm vụ thu thập dữ liệu và kiểm tra QA. Nó hỗ trợ giao thức WebDriver, cho phép mọi người dễ dàng kết nối với các phiên bản trình duyệt từ xa của họ

Nền tảng này cung cấp các gói miễn phí và gói trả phí nếu chúng tôi cần sức mạnh xử lý mạnh mẽ hơn. Bậc miễn phí cung cấp tối đa 6 giờ sử dụng, quá đủ để đánh giá khả năng của nền tảng hoặc các trường hợp sử dụng đơn giản

Sau khi hoàn tất quá trình đăng ký, nền tảng cung cấp cho chúng tôi khóa API. Chúng tôi sẽ sử dụng khóa này để truy cập các dịch vụ Browserless sau này

Đang khởi tạo một kết nối từ xa đến phiên bản Browserless

Bây giờ chúng ta có quyền truy cập vào Browserless, hãy kết nối với một phiên bản trình duyệt từ xa. Bước đầu tiên là cài đặt các phụ thuộc thích hợp. Nhập lệnh sau bên trong dự án Node của bạn để cài đặt Selenium WebDriver

<html>
  <body>
    <p>
      Hello World
    </p>
    <div> <img src="hello_image.png"/></div>
  </body>
</html>

Tạo tập lệnh Node mới và nối thêm các dòng sau

<html>
  <body>
    <p>
      Hello World
    </p>
    <div> <img src="hello_image.png"/></div>
  </body>
</html>

Selenium WebDriver cung cấp API rất tiện dụng để định cấu hình phiên bản kết nối mới. Hãy phân tích nó.
Như thường lệ, chúng tôi phải nhập các phụ thuộc của mình trước. Chúng tôi phải nhập cả mô-đun WebDriver chính và liên kết trình duyệt thích hợp của nó. Browserless hoạt động trên các máy Chrome, vì vậy chúng tôi nhập mô-đun chrome.

<html>
  <body>
    <p>
      Hello World
    </p>
    <div> <img src="hello_image.png"/></div>
  </body>
</html>

Tiếp theo, chúng tôi xác định một biến cố định chứa khóa API để thiết lập kết nối từ xa với nền tảng Browserless. Đừng quên thay thế giá trị của nó bằng khóa API của bạn

<html>
  <body>
    <p>
      Hello World
    </p>
    <div> <img src="hello_image.png"/></div>
  </body>
</html>

Sau đó, chúng tôi phải đặt một số đối số dành riêng cho trình duyệt. Hầu hết thời gian, chúng ta nên xác định cờ –no-sandbox. Thao tác này sẽ vô hiệu hóa môi trường Hộp cát chịu trách nhiệm thiết lập các đặc quyền trên trình duyệt Chrome vì mục đích bảo mật. Chạy trình duyệt có bật hộp cát là một phương pháp bảo mật tốt, nhưng đối với trường hợp sử dụng quét web, nó hạn chế chúng tôi thực hiện một số hành động. Đặt kích thước cửa sổ ưa thích cũng là bắt buộc để ngăn một số trang hiển thị phiên bản dành cho thiết bị di động

<html>
  <body>
    <p>
      Hello World
    </p>
    <div> <img src="hello_image.png"/></div>
  </body>
</html>

Để kết thúc quá trình khởi tạo, một đối tượng kết nối mới phải được tạo. Các liên kết nút của WebDriver sử dụng mẫu thiết kế trình tạo, tổ chức việc xây dựng đối tượng thành một tập hợp các bước. Để bắt đầu, chúng ta phải khởi tạo một thể hiện Builder()

<html>
  <body>
    <p>
      Hello World
    </p>
    <div> <img src="hello_image.png"/></div>
  </body>
</html>

Bước tiếp theo là đặt URL kết nối.  

<html>
  <body>
    <p>
      Hello World
    </p>
    <div> <img src="hello_image.png"/></div>
  </body>
</html>

Chúng tôi cũng cần cung cấp khóa API để kết nối thành công. Để làm điều này, chúng ta tạo một đối tượng khả năng mới bằng cách sử dụng phương thức withCapabilities(). Selenium Capabilities là một đối tượng cấu hình xác định các yêu cầu cơ bản để điều khiển phiên bản trình duyệt

<html>
  <body>
    <p>
      Hello World
    </p>
    <div> <img src="hello_image.png"/></div>
  </body>
</html>

Tiếp theo, chúng ta phải xác định trình duyệt mục tiêu

import https from 'node:https'
 
const request = https.request({
  hostname: 'en.wikipedia.org',
  port: 443,
  path: '/wiki/World_Wide_Web',
  method: 'GET'
}, result => {
  let html = ''
 
  result.on('data', dataBuffer => {
    const partialHTML = dataBuffer.toString()
    html += partialHTML
  })
 
  result.on('end', () => {
    // DO SOMETHING WITH THE HTML STRING
    console.log(html)
  })
})
 
request.on('error', error => {
  console.error(error)
})
 
request.end()

Cuối cùng, chúng tôi cung cấp đối tượng tùy chọn mà chúng tôi đã xây dựng trước đó

import https from 'node:https'
 
const request = https.request({
  hostname: 'en.wikipedia.org',
  port: 443,
  path: '/wiki/World_Wide_Web',
  method: 'GET'
}, result => {
  let html = ''
 
  result.on('data', dataBuffer => {
    const partialHTML = dataBuffer.toString()
    html += partialHTML
  })
 
  result.on('end', () => {
    // DO SOMETHING WITH THE HTML STRING
    console.log(html)
  })
})
 
request.on('error', error => {
  console.error(error)
})
 
request.end()

Việc gọi phương thức xây dựng sẽ hoàn tất cấu hình của chúng ta và trả về một ứng dụng khách WebDriver mới dựa trên cấu hình hiện tại của trình xây dựng

import https from 'node:https'
 
const request = https.request({
  hostname: 'en.wikipedia.org',
  port: 443,
  path: '/wiki/World_Wide_Web',
  method: 'GET'
}, result => {
  let html = ''
 
  result.on('data', dataBuffer => {
    const partialHTML = dataBuffer.toString()
    html += partialHTML
  })
 
  result.on('end', () => {
    // DO SOMETHING WITH THE HTML STRING
    console.log(html)
  })
})
 
request.on('error', error => {
  console.error(error)
})
 
request.end()

NodeJS quét web của các bài viết trên Wikipedia

Bây giờ chúng tôi đã thiết lập kết nối từ xa với nền tảng Browserless, đã đến lúc triển khai chức năng chính của tập lệnh. Chúng ta sẽ làm theo ví dụ tương tự như các phần trước;

import https from 'node:https'
 
const request = https.request({
  hostname: 'en.wikipedia.org',
  port: 443,
  path: '/wiki/World_Wide_Web',
  method: 'GET'
}, result => {
  let html = ''
 
  result.on('data', dataBuffer => {
    const partialHTML = dataBuffer.toString()
    html += partialHTML
  })
 
  result.on('end', () => {
    // DO SOMETHING WITH THE HTML STRING
    console.log(html)
  })
})
 
request.on('error', error => {
  console.error(error)
})
 
request.end()

Như bạn có thể thấy, quá trình này tương đối đơn giản. Kèm theo tất cả các câu lệnh liên quan đến quá trình cạo vào một khối thử/bắt sẽ xử lý tất cả các lỗi không mong muốn. gọi tài xế. bỏ () trong khối cuối cùng sẽ thoát phiên hiện tại. Điều này sẽ đảm bảo rằng tất cả các tài nguyên được phân bổ sẽ được giải phóng ngay cả khi tập lệnh gặp lỗi. Sau khi gọi thoát, phiên bản kết nối sẽ bị vô hiệu hóa và không còn có thể ra lệnh đối với trình duyệt. Đối với khối try, các bước thực hiện có thể được tóm tắt như sau

Đầu tiên, chúng tôi truy cập URL mong muốn

import https from 'node:https'
 
const request = https.request({
  hostname: 'en.wikipedia.org',
  port: 443,
  path: '/wiki/World_Wide_Web',
  method: 'GET'
}, result => {
  let html = ''
 
  result.on('data', dataBuffer => {
    const partialHTML = dataBuffer.toString()
    html += partialHTML
  })
 
  result.on('end', () => {
    // DO SOMETHING WITH THE HTML STRING
    console.log(html)
  })
})
 
request.on('error', error => {
  console.error(error)
})
 
request.end()

Tiếp theo, chúng ta phải truy xuất tất cả các phần tử chứa bộ định vị tương ứng

import https from 'node:https'
 
const request = https.request({
  hostname: 'en.wikipedia.org',
  port: 443,
  path: '/wiki/World_Wide_Web',
  method: 'GET'
}, result => {
  let html = ''
 
  result.on('data', dataBuffer => {
    const partialHTML = dataBuffer.toString()
    html += partialHTML
  })
 
  result.on('end', () => {
    // DO SOMETHING WITH THE HTML STRING
    console.log(html)
  })
})
 
request.on('error', error => {
  console.error(error)
})
 
request.end()

Cuối cùng, chúng tôi lấy văn bản bên trong bằng cách gọi phương thức getText trên mỗi phần tử phù hợp. Gọi getText dẫn đến một lời hứa, vì vậy chúng tôi sử dụng Promise. tất cả để đợi cho đến khi tất cả các cuộc gọi được giải quyết. Sau đó chúng ta có thể in kết quả trên màn hình

import https from 'node:https'
 
const request = https.request({
  hostname: 'en.wikipedia.org',
  port: 443,
  path: '/wiki/World_Wide_Web',
  method: 'GET'
}, result => {
  let html = ''
 
  result.on('data', dataBuffer => {
    const partialHTML = dataBuffer.toString()
    html += partialHTML
  })
 
  result.on('end', () => {
    // DO SOMETHING WITH THE HTML STRING
    console.log(html)
  })
})
 
request.on('error', error => {
  console.error(error)
})
 
request.end()

Sau đó chúng ta có thể in kết quả trên màn hình

import https from 'node:https'
 
const request = https.request({
  hostname: 'en.wikipedia.org',
  port: 443,
  path: '/wiki/World_Wide_Web',
  method: 'GET'
}, result => {
  let html = ''
 
  result.on('data', dataBuffer => {
    const partialHTML = dataBuffer.toString()
    html += partialHTML
  })
 
  result.on('end', () => {
    // DO SOMETHING WITH THE HTML STRING
    console.log(html)
  })
})
 
request.on('error', error => {
  console.error(error)
})
 
request.end()

Bắt đầu sử dụng tự động hóa web Browserless MIỄN PHÍ

So sánh các kỹ thuật quét web NodeJS & JavaScript khác nhau

Quét web là trường hợp sử dụng hàng ngày khi xử lý tự động hóa web. Trong bài viết này, chúng tôi đã trình bày ba cách tiếp cận, từ việc sử dụng các mô-đun Node gốc và không phụ thuộc bên ngoài, đến việc sử dụng một thư viện tự động hóa hoàn chỉnh như Selenium WebDriver và một nền tảng trực tuyến như Browserless. Các kỹ thuật đó so sánh với nhau như thế nào và bạn nên chọn kỹ thuật nào cho dự án tiếp theo của mình?

Phương pháp 1. Yêu cầu HTTP đơn giản và Biểu thức chính quy

ưu

• Dựa vào mô-đun Node HTTPS gốc, một triển khai mạnh mẽ và đã được thử nghiệm tốt
• Bản chất cấp thấp của mô-đun HTTP/S và các biểu thức chính quy cho phép tăng hiệu suất và tiêu thụ ít bộ nhớ hơn, lý tưởng cho các thiết bị có tài nguyên tính toán thấp
• Nó phục vụ bạn tốt cho các trường hợp đơn giản.  
• Nó có thể được song song hóa dễ dàng bằng cách sử dụng các luồng công nhân.  

Nhược điểm

• Regex không mở rộng tốt để khớp quy tắc phức tạp
• Nó không phù hợp với các quy trình cạo lớn
• Bản chất dựa trên sự kiện của mô-đun HTTP/S phụ thuộc nhiều vào các cuộc gọi lại có thể dẫn đến sự hỗn loạn của cuộc gọi lại.  
• Việc triển khai cuối cùng có thể trở thành một cơ sở mã khá dài dòng.  
• Phương pháp này không phù hợp với các trang web được xây dựng bằng thư viện hoặc khuôn khổ giao diện người dùng
• Phương pháp này chỉ phù hợp với các tác vụ quét web

Phương pháp 2. Axios và Cheerio

ưu

• Axios là một thư viện dựa trên lời hứa. Chuỗi lời hứa phát triển tuyến tính từ trên xuống, làm cho cơ sở mã dễ hiểu hơn. Chúng tôi thậm chí có thể sử dụng async/await để loại bỏ một số nhược điểm của nó
• Axios là một thư viện máy khách HTTP mạnh mẽ, được duy trì tốt và được phát triển tích cực với hơn 33 triệu lượt tải xuống hàng tháng và gần 100 nghìn sao trên GitHub
• Cheerio triển khai một tập hợp con của jQuery lõi, cho phép chúng tôi thực hiện các truy vấn DOM phức tạp
• Cheerio không dựa vào trình duyệt làm tăng hiệu suất của phương pháp của nó
• Giống như Axios, Cheerio là một thư viện mạnh mẽ, được bảo trì tốt và được phát triển tích cực. Nó nhận được hơn 7 triệu lượt tải xuống hàng tháng và có hơn 25 nghìn sao trên GitHub
• Nó có thể được song song hóa dễ dàng bằng cách sử dụng các luồng công nhân.  

Nhược điểm

• Phương pháp này không phù hợp với các trang web được xây dựng bằng thư viện hoặc khuôn khổ giao diện người dùng
• Phương pháp này chỉ phù hợp với việc quét web và không thể xử lý bất kỳ tác vụ tự động hóa web nào khác

Phương pháp 3. Selenium WebDriver và Browserless

ưu

• Selenium WebDriver là một thư viện tự động hóa trình duyệt đầy đủ tính năng. Bạn có thể sử dụng nó cho mọi tác vụ tự động hóa web, từ các tập lệnh quét web đơn giản đến hoàn thành các bộ thử nghiệm E2E
• Các liên kết WebDriver cho Node nhận được gần 3 triệu lượt tải xuống hàng tháng và trang GitHub tương ứng có hơn 24 nghìn sao
• Phần mềm mạnh mẽ với nhiều năm trong môi trường sản xuất thương mại
• Selenium cung cấp IDE hỗ trợ tạo và thực thi thử nghiệm không dùng mã

Nhược điểm

• Cần có cấu hình mở rộng để sử dụng đúng WebDriver, tùy thuộc vào trình duyệt của bạn
• Selenium WebDriver là một nền tảng tự động hóa trình duyệt. nó điều khiển phiên bản trình duyệt được chỉ định. Vì lý do đó, bạn phải cài đặt các trình duyệt tương ứng trên máy của mình
• Nó không thể được song song hóa dễ dàng tại địa phương. Điều này có thể được giải quyết bằng cách sử dụng phiên bản trình duyệt từ xa thông qua nền tảng tự động hóa web như Browserless

Bắt đầu sử dụng tự động hóa web Browserless MIỄN PHÍ

Tóm lược

Trong hướng dẫn này, chúng tôi đã chia sẻ phân tích chuyên sâu về cơ chế hoạt động của web. Chúng tôi đã giới thiệu ba phương pháp khác nhau để quét một trang web bằng Node. js, với phân tích đầy đủ về ưu và nhược điểm của từng kỹ thuật. Vẫn còn những khía cạnh khác của việc cạo và tự động hóa web mà chúng tôi không thể đề cập trong bài đăng này. Để tìm hiểu thêm về tự động hóa web, hãy xem các bài viết khác của chúng tôi và theo dõi chúng tôi trên mạng xã hội

JavaScript có tốt cho việc quét web không?

Làm cách nào để cạo một trang web bằng JavaScript?

Ngôn ngữ nào là tốt nhất để cạo?