Hướng Dẫn Chụp Ảnh Màn Hình trong Selenium với Python

Selenium là một công cụ mạnh mẽ để tự động hóa các tác vụ trên trình duyệt web, và một trong những tính năng thú vị của nó là khả năng chụp ảnh màn hình. Trong bài viết này, chúng ta sẽ tìm hiểu cách chụp ảnh màn hình của toàn bộ trang web, các phần tử HTML cụ thể, và cả dữ liệu ảnh thô. Hãy bắt đầu!

Mục Lục

1. Chụp ảnh vùng nhìn thấy
2. Chụp ảnh toàn trang
   • Firefox (hỗ trợ gốc)
   • Chrome (sử dụng CDP)
3. Chụp ảnh một phần tử HTML cụ thể
4. Thực tiễn tốt nhất
5. Cạm bẫy thường gặp
6. Mẹo tối ưu hóa hiệu suất
7. Khắc phục sự cố
8. Câu hỏi thường gặp

1. Chụp ảnh vùng nhìn thấy

Cách đơn giản nhất là chụp ảnh những gì đang hiển thị trong cửa sổ trình duyệt.

from selenium import webdriver

driver = webdriver.Chrome()
driver.get("https://www.selenium.dev")

driver.save_screenshot("viewport.png")  # tên tập tin dễ nhớ
# hoặc
driver.get_screenshot_as_file("viewport_file.png")  # tương tự

driver.quit()

Phương pháp này chỉ chụp ảnh vùng nhìn thấy, không phải toàn bộ trang có thể cuộn.

Lưu ý rằng save_screenshot() chỉ là một hàm bọc quanh get_screenshot_as_file(). Cả hai hàm này đều trả về True nếu thành công và False nếu có lỗi I/O.

2. Chụp ảnh toàn trang

Việc chụp ảnh toàn bộ trang phụ thuộc vào trình duyệt.

Firefox (hỗ trợ gốc):

from selenium import webdriver

driver = webdriver.Firefox()
driver.get("https://www.selenium.dev")

driver.get_full_page_screenshot_as_file("fullpage.png")

Chrome (sử dụng CDP):

import base64
from selenium import webdriver

driver = webdriver.Chrome()
driver.get("https://www.selenium.dev")

# Yêu cầu Chrome lấy thông tin về bố cục (kích thước nội dung)
metrics = driver.execute_cdp_cmd("Page.getLayoutMetrics", {})
width = int(metrics["contentSize"]["width"])
height = int(metrics["contentSize"]["height"])

# Thiết lập lại thông số thiết bị để Chrome hiển thị toàn bộ trang
# trong một vùng nhìn "ảo" (chiều rộng x chiều cao).
driver.execute_cdp_cmd(
    "Emulation.setDeviceMetricsOverride",
    {
        "mobile": False,  # mô phỏng máy tính để bàn
        "width": width,  # chiều rộng nội dung đầy đủ
        "height": height,  # chiều cao nội dung đầy đủ
        "deviceScaleFactor": 1,  # 1 = DPI bình thường
    },
)

# Chụp ảnh màn hình của bề mặt mở rộng này
fullpage_screenshot = driver.execute_cdp_cmd(
    "Page.captureScreenshot", {"fromSurface": True}
)

# Xóa thiết lập để khôi phục hành vi trình duyệt bình thường 
driver.execute_cdp_cmd("Emulation.clearDeviceMetricsOverride", {})

# Lưu ảnh toàn trang vào tệp
with open("screenshoot_fullpage_chrome.png", "wb") as f:
    f.write(base64.b64decode(fullpage_screenshot["data"]))

driver.quit()

Tính đến thời điểm viết bài, Chrome không hỗ trợ chụp ảnh toàn trang một cách gốc, vì vậy cần sử dụng phương pháp CDP. Điều này sẽ thay đổi khi giao thức WebDriver BiDi được triển khai hoàn toàn.

Sau khi thiết lập một vùng nhìn tùy chỉnh với Emulation.setDeviceMetricsOverride, một thực tiễn tốt là gọi Emulation.clearDeviceMetricsOverride sau khi chụp ảnh. Bước này không bắt buộc nếu kịch bản của bạn kết thúc ngay sau khi chụp ảnh, vì phiên trình duyệt sẽ đóng lại. Tuy nhiên, nếu để thiết lập này hoạt động, nó có thể ảnh hưởng đến các tương tác sau đó: trang có thể hiển thị như thể nó đang được hiển thị trên một màn hình quá lớn, gây ra các vấn đề về bố cục hoặc hành vi JavaScript không mong đợi.

Xóa thiết lập sẽ khôi phục Chrome về vùng nhìn bình thường, đảm bảo hành vi nhất quán nếu bạn có kế hoạch tiếp tục duyệt, kiểm tra hoặc chụp thêm ảnh trong cùng một phiên.

3. Chụp ảnh một phần tử HTML cụ thể

Đôi khi bạn không cần toàn bộ trang, chỉ cần một phần tử cụ thể. Selenium giúp việc này trở nên dễ dàng với WebElement.screenshot().

from selenium import webdriver
from selenium.webdriver.common.by import By

driver = webdriver.Chrome()
driver.get("https://www.python.org/")

element = driver.find_element(By.ID, "documentation")

element.screenshot(f"screenshot_webelement.png")

driver.quit()

Phương pháp thay thế: Lấy dưới dạng byte PNG

from selenium import webdriver
from selenium.webdriver.common.by import By

driver = webdriver.Chrome()
driver.get("https://www.python.org/")

element = driver.find_element(By.ID, "documentation")

png_bytes = element.screenshot_as_png
with open("screenshot_webelement_bytes.png", "wb") as f:
    f.write(png_bytes)

driver.quit()

4. Thực tiễn tốt nhất

• Luôn kiểm tra xem phần tử có hiển thị trên trang không trước khi chụp ảnh.
• Sử dụng các tên tệp dễ hiểu để tổ chức ảnh chụp màn hình.
• Đảm bảo rằng phiên bản Selenium và trình duyệt của bạn được cập nhật để tránh lỗi.

5. Cạm bẫy thường gặp

• Không thể chụp ảnh một phần tử không nhìn thấy.
• Các vấn đề với kích thước ảnh chụp màn hình không chính xác khi sử dụng CDP.

6. Mẹo tối ưu hóa hiệu suất

• Chỉ chụp ảnh khi cần thiết để tiết kiệm thời gian.
• Sử dụng các chế độ không hiển thị (headless) khi có thể để tăng tốc độ chụp ảnh.

7. Khắc phục sự cố

• Nếu không chụp được ảnh, hãy kiểm tra lại đường dẫn và quyền truy cập tệp.
• Đảm bảo Selenium đang chạy trên phiên bản trình duyệt được hỗ trợ.

8. Câu hỏi thường gặp

Selenium có hỗ trợ chụp ảnh toàn trang không?
Có, nhưng cần sử dụng phương pháp CDP trên Chrome.

Có cách nào khác để chụp ảnh màn hình không?
Có thể sử dụng các công cụ bên ngoài hoặc khai thác các API của trình duyệt.

Hy vọng bài viết này hữu ích cho bạn trong việc chụp ảnh màn hình với Selenium và Python. Nếu bạn có bất kỳ câu hỏi nào, hãy để lại ý kiến dưới bài viết nhé! 💪