Отладка (Debug)

Обзор инструментов отладки

Playwright предоставляет набор мощных инструментов для отладки тестов: от встроенного Inspector до программных методов логирования и трассировки. Ниже описаны все основные подходы.

page.pause() — Пауза с открытием Inspector

Вызов page.pause() приостанавливает выполнение теста и открывает Playwright Inspector. Это позволяет вручную исследовать состояние страницы, выполнять действия и продолжать выполнение пошагово.

def test_login(page):
    page.goto("https://example.com/login")
    page.get_by_label("Email").fill("user@example.com")

    # Пауза: откроется Inspector для ручного исследования
    page.pause()

    # Выполнение продолжится после нажатия "Resume"
    page.get_by_role("button", name="Submit").click()
    page.get_by_text("Dashboard").is_visible()

pytest — headed и slowmo

Видимый браузер (headed)

По умолчанию Playwright запускает браузер в headless-режиме. Для отладки удобно видеть, что происходит в браузере:

# Запуск с видимым браузером и выводом stdout
pytest --headed -s

# -s включает вывод print() в консоль
# --headed показывает окно браузера

Замедление выполнения (slowmo)

Замедление каждого действия на заданное количество миллисекунд. Полезно для наблюдения за последовательностью действий:

# Замедление всех действий на 1000 мс (1 секунда)
pytest --slowmo 1000

# Замедление на 500 мс с видимым браузером
pytest --headed --slowmo 500

Логирование событий

Playwright позволяет подписаться на события браузера и страницы для получения отладочной информации.

Консоль браузера

Перехват всех сообщений из console.log() и других методов консоли JavaScript:

def test_console_log(page):
    def on_console(msg):
        print(f"Console: {msg.type}: {msg.text}")

    page.on("console", on_console)

    page.goto("https://example.com")

    # Все console.log из браузера будут выведены в терминал

Ошибки JavaScript на странице

Перехват необработанных ошибок JavaScript:

def test_js_errors(page):
    errors = []

    def on_page_error(err):
        errors.append(err)
        print(f"Page error: {err}")

    page.on("pageerror", on_page_error)

    page.goto("https://example.com")

    assert len(errors) == 0, f"Найдены ошибки: {errors}"

Сетевые запросы

Мониторинг всех HTTP-запросов и ответов:

def test_network_log(page):
    def on_request(request):
        print(f"Request: {request.method} {request.url}")

    def on_response(response):
        print(f"Response: {response.status} {response.url}")

    page.on("request", on_request)
    page.on("response", on_response)

    page.goto("https://example.com")

    # Вывод:
    # Request: GET https://example.com
    # Response: 200 https://example.com
    # Request: GET https://example.com/style.css
    # Response: 200 https://example.com/style.css

Настройка браузера для отладки

Параметры запуска браузера для отладки:

from playwright.sync_api import sync_playwright

def run(playwright):
    # Видимый браузер с замедлением 500 мс
    browser = playwright.chromium.launch(
        headless=False,
        slow_mo=500
    )

    context = browser.new_context(viewport={ "width": 1280, "height": 720 })
    page = context.new_page()
    page.goto("https://example.com")

    # Действия будут выполняться медленно, с задержкой 500 мс
    page.get_by_role("button", name="Submit").click()

    browser.close()

with sync_playwright() as playwright:
    run(playwright)

Playwright Inspector

Playwright Inspector — это графический интерфейс для отладки и записи тестов. Он предоставляет следующие возможности:

• Пошаговое выполнение — кнопка "Resume" для продолжения выполнения до следующей точки останова (page.pause())
• Просмотр состояния — DOM-дерево, скриншоты, консоль
• Pick Locator — выбор элемента на странице для получения оптимального локатора
• Редактирование локаторов — тестирование различных селекторов в реальном времени

Кнопка "Resume"

Когда выполнение доходит до page.pause(), Inspector приостанавливает тест и ждёт нажатия "Resume". При каждом нажатии выполняется одно действие, после чего Inspector снова приостанавливается. Это позволяет пройти тест пошагово.

Pick Locator в Inspector

В Inspector есть режим "Pick Locator", который позволяет навести курсор на любой элемент страницы и мгновенно получить рекомендуемый Playwright локатор для него. Это упрощает поиск правильных селекторов при отладке.

# Использование Pick Locator:
# 1. Откройте Inspector (page.pause() или PWDEBUG=1)
# 2. Нажмите кнопку "Pick Locator" (значок прицела)
# 3. Наведитесь на элемент на странице
# 4. Inspector покажет лучший локатор

Трассировка для отладки падений

Трассировка — это полная запись выполнения теста. При падении теста она бесценна для анализа.

# Запуск с трассировкой при падениях
pytest --tracing retain-on-failure

# Просмотр трассировки после падения
playwright show-trace test-results/trace.zip

page.screenshot() — Скриншоты для отладки

Скриншоты — простой и эффективный способ увидеть состояние страницы в любой момент выполнения теста.

def test_screenshot_debug(page):
    page.goto("https://example.com")

    # Скриншот всей страницы
    page.screenshot(path="debug_fullpage.png", full_page=True)

    # Скриншот конкретного элемента
    page.get_by_role("button", name="Submit").screenshot(path="debug_button.png")

    # Скриншот с маской (скрыть конфиденциальные данные)
    page.screenshot(
        path="debug_masked.png",
        mask=[page.get_by_label("Password")]
    )

page.content() — Просмотр DOM

Метод page.content() возвращает полный HTML-код страницы. Полезно для проверки, какие элементы присутствуют в DOM после выполнения действий.

def test_dom_content(page):
    page.goto("https://example.com")
    page.get_by_role("button", name="Load more").click()

    # Получить полный HTML после клика
    html = page.content()
    print(html[:500])  # Вывести первые 500 символов

    # Проверить наличие элемента в DOM
    assert "Новый контент" in html

page.evaluate() — Проверка JavaScript

Исполнение произвольного JavaScript на странице для проверки состояния, которое недоступно через стандартные методы Playwright.

def test_evaluate_debug(page):
    page.goto("https://example.com")

    # Получение заголовка страницы
    title = page.evaluate("document.title")
    print(f"Title: {title}")

    # Проверка состояния localStorage
    token = page.evaluate("localStorage.getItem('auth_token')")
    print(f"Token: {token}")

    # Проверка visibility состояния
    is_visible = page.evaluate("document.querySelector('.spinner').style.display")
    print(f"Spinner display: {is_visible}")

    # Выполнение сложной JS-проверки
    result = page.evaluate("""() => {
        const el = document.querySelector('.status');
        return {
            text: el.textContent,
            class: el.className,
            visible: el.offsetParent !== null
        };
    }""")
    print(result)

PWDEBUG=1 — Автоматическое включение Inspector

Установка переменной окружения PWDEBUG=1 заставляет Playwright автоматически открывать Inspector при запуске любого теста. Это эквивалентно вставке page.pause() в начало каждого теста.

# Windows (CMD)
set PWDEBUG=1
pytest test_example.py

# Windows (PowerShell)
$env:PWDEBUG = "1"
pytest test_example.py

# Linux / macOS
PWDEBUG=1 pytest test_example.py

При установке PWDEBUG=1 Playwright также автоматически включает:

• headless=False — видимый браузер
• slow_mo — замедление для наблюдения

Практический пример: комплексная отладка

def test_debug_complex(page):
    # 1. Логирование всех консольных сообщений
    page.on("console", lambda msg: print(f"[CONSOLE] {msg.type}: {msg.text}"))

    # 2. Логирование всех ошибок
    page.on("pageerror", lambda err: print(f"[ERROR] {err}"))

    # 3. Логирование сетевых запросов
    page.on("request", lambda req: print(f"[REQ] {req.method} {req.url}"))

    page.goto("https://example.com")

    # 4. Скриншот начального состояния
    page.screenshot(path="step1_initial.png")

    page.get_by_role("button", name="Submit").click()

    # 5. Проверка DOM после клика
    print("Title after click:", page.evaluate("document.title"))

    # 6. Скриншот после действия
    page.screenshot(path="step2_after_click.png")

    # 7. Полный HTML для проверки
    html = page.content()
    print("Page HTML (500 chars):", html[:500])

Сводка инструментов отладки

Заключение

Playwright предлагает одни из лучших инструментов отладки среди всех фреймворков для автоматизации тестирования. Комбинируйте разные подходы в зависимости от ситуации: page.pause() для пошагового анализа, --tracing для детальной записи падений, и page.evaluate() для быстрой проверки JavaScript-состояния.