Blog Details

Proxy của Playwright là gì? Về cơ bản Playwright là một phiên bản mở rộng của Puppeteer. Đó là API đầu cuối cho phép bạn tự động hóa cả trình duyệt không có đầu và có đầu, chẳng hạn như Chrome, Firefox và IE thông qua Webkit. Nó cho phép bạn tự động hóa các ứng dụng web, chức năng kiểm tra và quét web. Bạn có thể sử dụng Playwright trong Javascript, Python, C# và Java. Một số tính năng của nó làm cho nó linh hoạt và tương thích cao với proxy. Vì vậy, làm cách nào để thiết lập proxy Playwright? Hãy cùng tìm hiểu trong blog này cùng ZingProxy!

Playwright được sử dụng để làm gì?

Là một công cụ tự động hóa thử nghiệm toàn diện, các nhà phát triển tại Microsoft đã phát hành Playwright vào năm 2020 để thực hiện thử nghiệm các dự án phức tạp một cách hiệu quả hơn. Nó được coi là một phiên bản mở rộng của Puppeteer. Tốc độ của Playwright khiến nó đặc biệt hữu ích khi thử nghiệm các dự án lớn hơn nhưng nó cũng có thể được sử dụng để quét web bằng proxy.

Linh hoạt, kiên cường và mạnh mẽ, Playwright có nhiều tính năng giúp nó rất phù hợp để thử nghiệm tự động hóa. Khả năng của nó có thể mang lại một số lợi ích cho dự án quét web của bạn. Dưới đây là các tính năng và lợi ích của Playwright.

Tính linh hoạt

Playwright chạy trên mọi nền tảng và mọi trình duyệt từ một API duy nhất. Nó có khả năng tương thích cao với mọi môi trường mà nó tương tác:

• Trình duyệt. Cho dù đó là Google Chrome, WebKit, Mozilla Firefox hay Edge, Playwright đều hoạt động với mọi trình duyệt có đầu hoặc không có đầu.
• Nền tảng. Playwright có thể kiểm tra phần mềm của bạn trên các máy chủ Linux, Windows hoặc MacOS, và có thể hoạt động cục bộ hoặc trên CI.
• Ngôn ngữ. Playwright có thể được sử dụng với JavaScript, TypeScript, Python, .NET và Java. Vì vậy, nó có thể được điều chỉnh cho phù hợp với bất kỳ ngôn ngữ nào mà phần mềm của bạn sử dụng.
• Tính di động. Playwright có thể mô phỏng nguyên bản Google Chrome dành cho Android hoặc Mobile Safari và công cụ kết xuất của nó hoạt động cả trên máy tính để bàn và trên đám mây.

Tính linh hoạt của Playwright cho phép bạn chạy các dự án kiểm tra phần mềm hoặc quét web trong nhiều điều kiện khác nhau. Dù môi trường thử nghiệm của bạn như thế nào, Playwright đều cung cấp giải pháp tự động hóa thử nghiệm toàn diện cho mọi cấu hình, và Playwright với việc sử dụng proxy là sự kết hợp tuyệt vời để thực hiện web scraping.

Khả năng khôi phục

Với nhu cầu cao như vậy được đặt ra đối với một số ứng dụng phần mềm ngày nay, khả năng chạy của chúng trong một loạt điều kiện đầy thách thức là rất quan trọng. Playwright có nhiều tính năng cho phép bạn thực hiện các bài kiểm tra khả năng khôi phục của mình, chẳng hạn như:

• Tự động chờ. Các bài kiểm tra bị lỗi thường do thời gian chờ nhân tạo gây ra và Playwright được thiết kế để giữ những điều này ở mức tối thiểu. Nó có các chức năng để hực thiện các hành động cho đến khi các yếu tố cần thiết có thể thực hiện được. Điều đó làm giảm thời gian chờ và mang lại kết quả kiểm tra chính xác hơn.
• Xác nhận đầu tiên trên web. Các xác nhận của nó được thiết kế dành riêng cho web động và các bước kiểm tra sẽ tự động được thử lại cho đến khi đáp ứng các điều kiện cần thiết. Điều đó đảm bảo bạn sẽ luôn nhận được kết quả cho mọi điều kiện bạn đang kiểm tra.
• Truy tìm. Playwright có nhiều tính năng cho phép bạn xác định phần mềm của bạn gặp trục trặc ở đâu. Một số trong số chúng bao gồm ghi lại dấu vết thực thi của bạn cũng như quay video và ảnh chụp màn hình để mô tả lỗi xảy ra.

Các chức năng mà Playwright cung cấp rất lý tưởng để không chỉ đảm bảo rằng các bài kiểm tra của bạn tránh được những cạm bẫy phổ biến nhất mà còn giúp bạn xác định các bài kiểm tra bị lỗi nếu chúng xảy ra và giữ chúng ở mức tối thiểu. Bằng cách đó, bạn có thể xây dựng một sản phẩm có thể chịu được các điều kiện phần mềm khắc nghiệt nhất.

Công cụ

Playwright có một số công cụ khác nhau cho phép bạn thử nghiệm sản phẩm của mình hiệu quả hơn:

• Codegen, cho phép bạn tạo các bài kiểm tra bằng cách ghi lại hành động của mình, và nó hoạt động với tất cả các ngôn ngữ.

• Playwright inspector, cho phép bạn tạo chu trình, điều hướng quá trình thực hiện thử nghiệm, xem các điểm nhấp chuột, kiểm tra các trang và khám phá nhật ký thực hiện.

• Trace Viewer, cho phép bạn lấy tất cả dữ liệu xung quanh mã kiểm tra của mình. Các khả năng bao gồm ảnh chụp nhanh DOM trực tiếp, ghi lại màn hình thực hiện thử nghiệm,…

Những công cụ này cung cấp chức năng mà người kiểm tra cần để đảm bảo phần mềm của họ có thể hoạt động như mong muốn, và chúng cũng có tác dụng tốt trong việc quét web.

Định cấu hình cài đặt proxy Playwright của bạn

Khi bạn đã quyết định rằng Playwright là công cụ bạn cần, bạn có thể bắt đầu mua proxy và định cấu hình proxy Playwright của mình. Chúng tôi sẽ chỉ cho bạn cách thiết lập proxy Playwright trước tiên bằng Node.js và sau đó bằng Python.

Node.js

Nếu bạn đang sử dụng Node.js, bạn có thể tạo một dự án mới và cài đặt thư viện Playwright bằng hai lệnh sau:

npm init -y

npm install playwright

Nếu bạn đang thu thập một trang web động để phân tích tài chính trên một trang thương mại điện tử như Amazon, một tập lệnh cơ bản có thể trông giống như sau:

const playwright = require(“playwright”)

(async() =>{

for (const browserType of [‘chromium’, ‘firefox’,  ‘webkit’]){

const browser = await playwright[browserType].launch()

const context = await browser.newContext()

const page = await context.newPage()

await page.goto(“https://amazon.com”)

await page.wait_for_timeout(1000)

await browser.close()

}

})

Có một số nhận xét cần đưa ra về văn bản này. Dòng đầu tiên nhập thư viện Playwright và sau đó khởi chạy nhiều phiên bản trình duyệt (Chrome, Firefox và WebKit). Tệp Playwright.config cho phép bạn định cấu hình nó sẽ chạy trên trình duyệt nào, nhưng nó sẽ hoạt động trên cả ba trình duyệt theo mặc định. Một trang trình duyệt mới sẽ mở ra sau khi ngữ cảnh được thiết lập và hàm page.goto() sẽ mở trang mong muốn, trong trường hợp này là Amazon. Sau khi hiển thị thời gian chờ một giây, cửa sổ trình duyệt sẽ đóng lại.

Nếu bạn cần tạo nhiều ngữ cảnh trình duyệt, bạn có thể tạo nhiều đối tượng ngữ cảnh với nhiều trang trong mỗi đối tượng. Mã cho việc này sẽ trông như sau:

const context = await browser.newContext()

const page1 = await context.newPage()

const page2 = await context.newPage()

…

Python

Nếu bạn đang làm việc bằng Python, trước tiên hãy cài đặt thư viện Python bằng lệnh “pip”, cùng với mọi trình duyệt cần thiết có lệnh “install”. Sau đó, mã chỉ đơn giản là:

python -m pip install playwright

playwright install

Sau đó, một tập lệnh mẫu sẽ là:

from playwright.async_api import async_playwright

import asyncio

async def main():

async with async_playwright() as p:

browser = await p.chromium.launch(headless=False)

page = await browser.new_page()

await page.goto(‘https://amazon.com’)

await page.wait_for_timeout(1000)

await browser.close()

Mặc dù tương tự như mã Node.js nhưng vẫn tồn tại một số khác biệt quan trọng. Trước tiên, hãy nhớ rằng Playwright có thể hỗ trợ các chức năng đồng bộ và không đồng bộ, một phần nhờ tốc độ và khả năng phục hồi vượt trội của nó. Mã Python này sử dụng thư viện “asyncio” cho các khung không đồng bộ.

Phiên bản trình duyệt cũng dành cho Chrome có tiêu đề, được biểu thị bằng “headless=false”. Bạn có thể chuyển sang chế độ không đầu bằng cách thay đổi chế độ này thành “headless=true”. Bạn có thể sử dụng hàm “page.context()” để lấy ngữ cảnh trình duyệt trong mã của mình.

=>> Cách sử dụng Proxy trong Puppeteer

IP máy chủ, tên người dùng và mật khẩu

Sau khi cài đặt khung Playwright, bạn sẽ cần chỉnh sửa một số mã trong tệp Playwright.config.ts và cách bạn chỉnh sửa mã sẽ tùy thuộc vào loại proxy bạn sử dụng.

Trước tiên, bạn sẽ cần chỉnh sửa trường máy chủ có địa chỉ IP và cổng tương ứng với proxy mà bạn sẽ sử dụng với Playwright. Địa chỉ IP và cổng phải được phân tách bằng dấu hai chấm. Tiếp theo, nhập tên người dùng và mật khẩu mà proxy yêu cầu. Trường máy chủ cũng sẽ khác nhau tùy thuộc vào việc bạn chọn mua proxy dân cư hay trung tâm dữ liệu.

Một kịch bản ví dụ sẽ là:

const playwright = require(‘playwright’);

(async () => {

for (const browserType of [‘chromium’, ‘firefox’, ‘webkit’]) {

const browser = await playwright[browserType].launch({

headless: false,

proxy: {

server: “123.45.67.89:54321”,

username: ‘USERNAME’,

password: ‘PASSWORD’

},

});

const context = await browser.newContext();

const page = await context.newPage();

await page.goto(WEBADDRESS);

await page.screenshot({ path: `${browserType}.png` });

await browser.close();

}

})();

Sử dụng Proxy Playwright 

Với proxy Playwright được định cấu hình, bạn có thể bắt đầu sử dụng nó cho dự án thu thập dữ liệu của mình. Chúng ta sẽ tiếp tục với ví dụ về proxy Playwright về việc thu thập một trang web thương mại điện tử để hiển thị một số ứng dụng.

Xác định các thành phần

Trước khi có thể quét một trang web, trước tiên bạn phải xác định vị trí các thành phần của nó. Điều này liên quan đến việc sử dụng bộ chọn XPath và CSS. Bạn có thể xác định số lượng phần tử trong trang thông qua chức năng “div”. Bạn sẽ phải chạy một vòng lặp trên các phần tử “div” để làm điều đó.

Khi bạn đã xác định được số lượng phần tử, Node.js có một số hàm mà bạn có thể sử dụng để thao tác trên các bộ chọn – mặc dù các hàm của Python hoạt động hơi khác một chút. Một số hàm Node.js phổ biến nhất là:

• querySelector(selector), trả về phần tử đầu tiên.
• querySelectorAll(selector), trả về từng phần tử.
• $eval(selector, function), chọn phần tử đầu tiên, gửi nó đến hàm và trả về kết quả của hàm.
• $$eval(selector, function), chọn từng phần tử, gửi tất cả chúng đến hàm và trả về kết quả cho từng phần tử.

Đối với ví dụ về Amazon, một số thành phần có thể bao gồm hình ảnh của các sản phẩm phổ biến nhất, trong khi những thành phần khác có thể là văn bản như dữ liệu giá cả hoặc xếp hạng. Loại phần tử sẽ quyết định nó sẽ được loại bỏ như thế nào.

Quét văn bản

Khi bạn đã xác định được thành phần mình đang tìm kiếm, bạn có thể loại bỏ văn bản hoặc hình ảnh cho phù hợp. Tuy nhiên, cách bạn loại bỏ chúng có thể khác nhau tùy thuộc vào việc bạn đang sử dụng Node.js hay Python. Ví dụ của Amazon có thể cho thấy sự khác biệt.

Node.js

Nếu bạn cần trích xuất dữ liệu từ văn bản của các sản phẩm trên trang web, bạn có thể sử dụng các hàm $eval hoặc $$eval để làm điều đó. Một kịch bản ví dụ sẽ trông như sau:

const products = await page.$$eval(‘.a-spacing-base’, all_products => {

// run a loop here

})

Để trích xuất các phần tử trong một vòng lặp, một tập lệnh ví dụ là:

all_products.forEach(product => {

const title = product.querySelector(‘span.a-size-base-plus’).innerText

})

Sau đó, bạn có thể sử dụng thuộc tính “InnerText” để trích xuất dữ liệu văn bản của mình từ mỗi điểm dữ liệu, với mẫu mã Node.js cuối cùng là:

const playwright = require(“playwright”)

(async() =>{

for (const browserType of [‘chromium’, ‘firefox’,  ‘webkit’]){

const launchOptions = {

headless: false,

proxy: {

server: “IPADDRESS”,

username: “USERNAME”,

password: “PASSWORD”

}

}

const browser = await playwright[browserType].launch(launchOptions)

const context = await browser.newContext()

const page = await context.newPage()

await page.goto(‘https://www.amazon.com/b?node=17938598011’);

const products = await page.$$eval(‘.a-spacing-base’, all_products => {

const data = []

all_products.forEach(product => {

const title = product.querySelector(‘span.a-size-base-plus’).innerText

const price = product.querySelector(‘span.a-price’).innerText

const rating = product.querySelector(‘span.a-icon-alt’).innerText

data.push({ title, price, rating})

});

return data

})

console.log(products)

await browser.close()

}

})

Python

Thay vì $eval và $$eval của Node.js, các hàm của Python là “query_selector” và “query_selector_all”. Chúng phục vụ cùng mục đích như các hàm Node.js tương ứng bằng cách trả về một phần tử hoặc danh sách các phần tử tương ứng. Một kịch bản ví dụ sẽ là:

import asyncio

from playwright.async_api import async_playwright

async def main():

async with async_playwright() as pw:

browser = await pw.chromium.launch(

proxy={

‘server’: ‘IPADDRESS’,

‘username’: ‘USERNAME’,

‘password’: ‘PASSWORD’

},

headless=False

)

page = await browser.new_page()

await page.goto(‘https://www.amazon.com/b?node=17938598011’)

await page.wait_for_timeout(5000)

all_products = await page.query_selector_all(‘.a-spacing-base’)

data = []

for product in all_products:

result = dict()

title_el = await product.query_selector(‘span.a-size-base-plus’)

result[‘title’] = await title_el.inner_text()

price_el = await product.query_selector(‘span.a-price’)

result[‘price’] = await price_el.inner_text()

rating_el = await product.query_selector(‘span.a-icon-alt’)

result[‘rating’] = await rating_el.inner_text()

data.append(result)

print(data)

await browser.close()

if __name__ == ‘__main__’:

asyncio.run(main())

Đầu ra của cả mã Node.js và Python phải giống nhau.

Quét hình ảnh

Cả hai đều yêu cầu sử dụng Playwright wrapper, nhưng cho dù bạn đang sử dụng Node.js hay Python, thì vẫn có một số khác biệt giữa việc sao chép văn bản và việc sao chép hình ảnh.

Node.js

Có nhiều phương pháp để trích xuất hình ảnh bằng Playwright wrapper, nhưng có hai thư viện hoạt động đặc biệt tốt: https và fs. Chúng cho phép bạn thực hiện các yêu cầu trên web. Vì vậy, bạn có thể tải xuống hình ảnh và lưu trữ chúng trong thư mục hiện tại của mình. Một mã mẫu sẽ là:

const playwright = require(“playwright”)

const https = require(‘https’)

const fs = require(‘fs’)

(async() =>{

const launchOptions = {

headless: false,

proxy: {

server: “IPADDRESS”,

username: “USERNAME”,

password: “PASSWORD”

}

}

const browser = await playwright[“chromium”].launch(launchOptions)

const context = await browser.newContext()

const page = await context.newPage()

await page.goto(‘webpage’);

const images = await page.$$eval(‘img’, all_images => {

const image_links = []

all_images.forEach((image, index) => {

const path = `image_${index}.svg`

const file = fs.createWriteStream(path)

https.get(image.href, function(response) {

response.pipe(file);

})

image_links.push(image.href)

})

return image_links

})

console.log(images)

await browser.close()

})

Sau khi sử dụng hàm $$eval để trích xuất từng phần tử hình ảnh, bạn có thể sử dụng hàm “forEach” để lặp lại từng phần tử. Trong vòng lặp này, đường dẫn chỉ mục và hình ảnh cho phép bạn tạo tên hình ảnh. Sau đó, bạn có thể gọi phương thức “createWriteStream” trong thư viện fs để khởi tạo một đối tượng tệp và bạn có thể sử dụng thư viện https để gửi yêu cầu “GET” tải xuống các thành phần hình ảnh.

Khi mã được thực thi, tập lệnh sẽ lặp qua từng hình ảnh trên trang và tải nó xuống thư mục của bạn. Mã ví dụ là:

all_images.forEach((image, index) => {

const path = `image_${index}.svg`

const file = fs.createWriteStream(path)

https.get(image.src, function(response) {

response.pipe(file);

})

Python

Hỗ trợ I/O tích hợp của Python giúp công việc thu thập hình ảnh dễ dàng hơn nhiều so với trong Node.js. Bạn có thể sử dụng Playwright wrapper giống như với Node.js và hàm “query_selector_all” hoạt động với các thành phần hình ảnh giống như với văn bản.

Sau khi trích xuất tất cả các thành phần hình ảnh, tập lệnh sẽ gửi lệnh “GET” tới từng URL nguồn nơi nó sẽ lưu trữ phản hồi trong thư mục hiện tại. Một kịch bản mẫu là:

from playwright.async_api import async_playwright

import asyncio

import requests

async def main():

async with async_playwright() as pw:

browser = await pw.chromium.launch(

proxy={

“server”: “IPADDRESS”,

“username”: “USERNAME”,

“password”: “PASSWORD”

},

headless=False

)

page = await browser.new_page()

await page.goto(‘webpage’)

await page.wait_for_timeout(5000)

all_images = await page.query_selector_all(‘img’)

images = []

for i, img in enumerate(all_images):

image_url = await img.get_attribute(“src”)

content = requests.get(image_url).content

with open(“image_{}.svg”.format(i), “wb”) as f:

f.write(content)

images.append(image_url)

print(images)

await browser.close()

if __name__ == ‘__main__’:

asyncio.run(main())

Playwright là một công cụ mạnh mẽ cho cả dự án thử nghiệm tự động và quét web đặc biệt khi được sử dụng với các proxy có nguồn gốc hợp pháp. Khi bạn biết cách định cấu hình cài đặt proxy Playwright của mình, bạn có thể sử dụng proxy để kiểm tra, định vị các phần tử, trích xuất văn bản, hình ảnh,.. Điều quan trọng là phải có proxy chất lượng.

Tại ZingProxy, chúng tôi cung cấp proxy chất lượng cao để có thể hỗ trợ các dự án của bạn. Chúng có thể giúp bạn vượt qua CAPTCHA và tránh bị cấm, giúp bạn dễ dàng lấy được dữ liệu mà doanh nghiệp của bạn cần để phát triển. Hãy liên hệ với chúng tôi ngay hôm nay để sở hữu proxy nâng cao hiệu suất các dự án của bạn!