Скриншоты (Screenshots)

Playwright позволяет делать скриншоты страниц и отдельных элементов. Это полезно для визуального тестирования, отладки и документации.

Базовый скриншот страницы

Метод page.screenshot делает снимок всей страницы (видимой области).

from playwright.sync_api import sync_playwright

with sync_playwright() as p:
    browser = p.chromium.launch()
    page = browser.new_page()
    page.goto("https://example.com")
    page.screenshot(path="screenshot.png")
    browser.close()

Полностраничный скриншот

Флаг full_page=True делает скриншот всей страницы, включая область за пределами viewport.

page.screenshot(path="full.png", full_page=True)

Скриншот области

Параметр clip задаёт прямоугольную область для снимка.

page.screenshot(path="clip.png",
    clip={"x": 10, "y": 20,
           "width": 200, "height": 100})

Скриншот элемента

Метод locator.screenshot делает снимок конкретного элемента.

page.goto("https://example.com")
loc = page.locator("h1")
loc.screenshot(path="element.png")

JPEG с настройкой качества

Формат JPEG поддерживает параметр quality (0–100). PNG используется по умолчанию.

page.screenshot(path="photo.jpg",
    type="jpeg", quality=80)

Прозрачный фон

Параметр omit_background=True делает фон прозрачным (только PNG).

page.screenshot(path="nobg.png",
    omit_background=True)

Скриншот в буфер (bytes)

Если не указывать path, метод возвращает бинарные данные. Удобно для сравнения пикселей.

screenshot_bytes = page.screenshot()
# screenshot_bytes — объект bytes
# можно передать в библиотеку pixel-diff

Сравнение с эталоном (to_have_screenshot)

Матчер to_have_screenshot сравнивает текущий скриншот с сохранённым эталоном.

from playwright.sync_api import expect

expect(page).to_have_screenshot(
    "etalon.png")

Сравнение скриншота элемента

expect(locator).to_have_screenshot(
    "element-etalon.png")

Отключение анимаций

Параметр animations="disabled" останавливает CSS-анимации и переходы перед снимком.

page.screenshot(path="no-anim.png",
    animations="disabled")

Маскирование элементов

Маски скрывают указанные локаторы (заливают цветом).

page.screenshot(path="masked.png",
    mask=[page.locator(".ads")],
    mask_color="red")