Playwright: Полное руководство по исправлению пустой страницы после навигации

Проблемы с пустыми белыми страницами в Playwright после навигации обычно связаны с конфликтами времени работы сети, несоответствиями конфигурации браузера или различиями в выполнении JavaScript между автоматизированным и ручным浏览ением. Эти проблемы часто проявляются в том, что страница кратко загружается, а затем становится пустой, часто сопровождаясь ошибками в консоли и сети, которые не появляются при ручном тестировании, что указывает на специфические для автоматизации проблемы.

Содержание

• Общие причины пустых страниц
• Исследование ошибок сети и консоли
• Решения для конфигурации браузера
• Аутентификация и обработка контекста
• Продвинутые методы устранения неполадок
• Решения, специфичные для CI

Общие причины пустых страниц

Явление пустых белых страниц, с которым вы сталкиваетесь, является хорошо задокументированной проблемой в автоматизации с Playwright с несколькими потенциальными корневыми причинами. На основе сообщений сообщества и проблем на GitHub, вот наиболее частые виновники:

Проблемы с таймингом сети
Быстрое выполнение Playwright иногда может обгонять загрузку страницы, вызывая навигацию браузера до полной загрузки всех ресурсов. Это приводит к частичной загрузке, за которой следует пустой экран. Как отметил один разработчик: “Ошибка неточна, реальная причина заключалась в том, что на целевом сайте была включена базовая аутентификация. Playwright не смог открыть страницу и просто завис с ‘Target closed’” [источник].

Конфликты контекста браузера
При работе с несколькими страницами или контекстами определенные конфигурации могут вызывать пустые страницы. Проблема на GitHub описывает этот паттерн: “если вы добавляете фикстуру страницы вместе с фикстурой браузера, открывается пустая страница, без фикстуры страницы и только с браузером, все работает нормально” [источник]. Это указывает на конфликты между фикстурами браузера и страницы в настройке вашего теста.

Различия в выполнении JavaScript
Автоматизированные браузеры могут обрабатывать JavaScript иначе, чем ручное浏览ение, что приводит к ошибкам выполнения, вызывающим сбой страницы. Один отчет показывает: “Навигация не удалась, потому что страница упала” с журналами, указывающими, что браузер попытался выполнить навигацию, но не смог загрузить целевую страницу [источник].

Ограничения аутентификации и безопасности
Многие сайты реализуют меры безопасности, которые обнаруживают автоматизированное浏览ение и отвечают пустыми страницами или ошибками 404. Проблема на GitHub #28364 specifically упоминает “пустой экран и ошибку 404 в консоли браузера” при запуске тестов в UI режиме [источник].

Исследование ошибок сети и консоли

Поскольку вы наблюдаете ошибки в сети и консоли, которые не появляются при ручном тестировании, внедрение правильного мониторинга ошибок имеет решающее значение для диагностики корневой причины.

Мониторинг ошибок консоли
Настройте комплексный отслеживание ошибок консоли для захвата проблем, невидимых при ручном тестировании:

// Пример настройки мониторинга ошибок консоли
const logs = [];
const errorMsgs = [];

test.beforeEach(async ({ page }) => {
    // Захват ошибок консоли
    page.on('console', (msg) => {
        if (msg.type() === 'error') {
            logs.push({ message: msg.text(), type: msg.type() });
        }
    });
    
    // Захват ошибок страницы
    page.on('pageerror', (error) => {
        errorMsgs.push({ name: error.name, message: error.message });
    });
});

test('Навигация с мониторингом ошибок', async ({ page }) => {
    await page.goto('ваш-url');
    // Ваша логика навигации здесь
    
    // Прикрепить журналы ошибок для отладки
    if (logs.length > 0) {
        console.log('Обнаружены ошибки консоли:', logs);
    }
});

Как объясняется в статье на Medium о мониторинге ошибок Playwright, этот подход помогает “автоматически собирать ошибки с помощью Playwright путем запуска скрипта автоматизации браузера” и обеспечивает видимость проблем, которые в противном случае могли бы остаться незамеченными.

Анализ сетевых запросов
Мониторьте сетевые запросы для выявления неудачных ресурсов или проблем с таймингом:

// Мониторинг сетевых запросов
page.on('requestfailed', (request) => {
    console.log('Неудачный запрос:', request.url(), request.failure().errorText);
});

Это может помочь определить, какие конкретные ресурсы (CSS, JavaScript, шрифты) не загружаются и вызывают проблему с пустой страницей.

Решения для конфигурации браузера

Корректировка параметров запуска браузера и параметров навигации часто решает проблемы с пустыми страницами.

Стратегии ожидания навигации
Модифицируйте вызовы page.goto() для включения правильных условий ожидания:

// Добавить ожидание сетевого простоя
await page.goto('ваш-url', { 
    waitUntil: 'networkidle',
    timeout: 60000 
});

// Альтернатива: ожидание конкретных условий
await page.goto('ваш-url', { 
    waitUntil: 'domcontentloaded',
    timeout: 60000 
});

Как предложено в ответе на Stack Overflow, добавление { waitUntil: "networkidle" } означает, что “будет ожидаться, пока на веб-странице не будет 500мс сетевого простоя”, что может предотвратить преждевременную навигацию [источник].

Конфигурация запуска браузера
Попробуйте разные конфигурации запуска браузера:

// С конкретными настройками браузера
const browser = await chromium.launch({
    headless: false, // Попробуйте оба режима: headless и headed
    args: [
        '--no-sandbox',
        '--disable-setuid-sandbox',
        '--disable-dev-shm-usage',
        '--disable-accelerated-2d-canvas',
        '--no-first-run',
        '--no-zygote',
        '--disable-gpu'
    ]
});

Логика таймаута и повторных попыток
Реализуйте механизмы повторных попыток для навигации:

async function navigateWithRetry(page, url, maxRetries = 3) {
    for (let i = 0; i < maxRetries; i++) {
        try {
            await page.goto(url, { 
                waitUntil: 'networkidle',
                timeout: 30000 
            });
            return true;
        } catch (error) {
            console.log(`Попытка навигации ${i + 1} не удалась:`, error.message);
            if (i === maxRetries - 1) throw error;
            await page.waitForTimeout(2000);
        }
    }
}

Аутентификация и обработка контекста

Пустые страницы часто возникают, когда аутентификация или управление контекстом не обрабатываются должным образом в автоматизированных сценариях.

Проблемы управления контекстом
Проблема на GitHub #24134 выделяет конкретный паттерн: “Playwright открывает пустую страницу при повторном использовании аутентификации для нескольких пользователей с использованием контекста браузера”. Это указывает на конфликты при управлении несколькими контекстами или пользовательскими сессиями.

Обходные пути для аутентификации
Попробуйте разные подходы к аутентификации:

// Метод 1: Глобальная аутентификация
const context = await browser.newContext({
    httpCredentials: {
        username: 'ваш-пользователь',
        password: 'ваш-пароль'
    }
});

// Метод 2: Аутентификация, специфичная для страницы
await page.authenticate({
    username: 'ваш-пользователь',
    password: 'ваш-пароль'
});

// Метод 3: Изоляция контекста
const context = await browser.newContext();
const page = await context.newPage();
// Установить аутентификацию на контекст

Управление состоянием
Рассмотрите использование управления состоянием Playwright вместо аутентификации на каждый тест:

// Сохранение и восстановление состояния аутентификации
await context.storageState({ path: 'auth.json' });
// Позже, повторно использовать состояние
const context = await browser.newContext({ storageState: 'auth.json' });

Продвинутые методы устранения неполадок

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

Анализ с помощью Trace Viewer
Генерируйте подробные трейсы для понимания того, что происходит во время навигации:

// Генерация трейса
await context.tracing.start({ screenshots: true, snapshots: true });
// Ваш код навигации здесь
await context.tracing.stop({ path: 'trace.zip' });

Полученный файл трейса можно открыть в UI Playwright для анализа точного момента, когда страница становится пустой, и выявления любых неудачных сетевых запросов или ошибок JavaScript.

Логирование консоли браузера
Включите подробное логирование браузера для захвата проблем на низком уровне:

const browser = await chromium.launch({
    headless: false,
    args: ['--enable-logging', '--v=1']
});

// Мониторинг вывода консоли браузера
const logs = [];
page.on('console', msg => logs.push(msg.text()));

Перехват сети
Перехватывайте и анализируйте сетевые запросы для выявления проблемных ресурсов:

// Перехват сетевых запросов
await page.route('**/*', route => {
    console.log('Перехваченный запрос:', route.request().url());
    route.continue();
});

// Блокировка конкретных ресурсов, которые могут вызвать проблемы
await page.route('**/*.css', route => route.abort());
// Затем тестирование без CSS для изоляции проблемы

Решения, специфичные для CI

Если ваша проблема возникает в основном в средах CI, эти решения могут помочь ее решить.

Проблемы конфигурации контейнера
Проблема на GitHub #23751 упоминает пустые страницы “в CI большую часть времени (работающий docker образ playwright:v1.35.0-jammy, пробовал также с 1.34 и 1.33)”. Это указывает на специфические для контейнера вызовы.

Конфигурация браузера для CI
Настройте параметры браузера для сред CI:

const browser = await chromium.launch({
    headless: true,
    args: [
        '--no-sandbox',
        '--disable-setuid-sandbox',
        '--disable-dev-shm-usage',
        '--disable-accelerated-2d-canvas',
        '--no-first-run',
        '--no-zygote',
        '--disable-gpu',
        '--disable-software-rasterizer',
        '--disable-background-timer-throttling',
        '--disable-backgrounding-occluded-windows',
        '--disable-renderer-backgrounding'
    ]
});

Конфигурация сети
Обрабатывайте сетевые проблемы CI, добавляя задержки и логику повторных попыток:

// Добавление задержек для сред CI
await page.waitForTimeout(3000); // Начальное ожидание
await page.goto(url, { 
    waitUntil: 'networkidle',
    timeout: 120000 // Расширенный таймаут для CI
});

Управление ресурсами
Обеспечьте правильную очистку ресурсов в CI:

// Правильная очистка ресурсов
afterAll(async () => {
    await browser.close();
    // Очистка временных файлов и т.д.
});

Источники

1. GitHub Issue #28364 - Только пустой экран в UI Mode
2. GitHub Issue #31050 - Playwright застрял на about:blank
3. GitHub Issue #22759 - Пустая страница при открытии в playwright
4. Stack Overflow - Playwright ошибка (Target closed) после навигации
5. Stack Overflow - Playwright тест не загружает локальный url
6. GitHub Issue #24134 - Пустая страница при повторном использовании аутентификации
7. Medium - Playwright: Мониторинг консоли и ошибок страницы
8. GitHub - playwright-errors: Автоматический сбор ошибок
9. GitHub Issue #23751 - Пустая страница после page.goto (только в CI)
10. Stack Overflow - Webkit браузер отображает пустую страницу

Заключение

На основе исследований и опыта сообщества, вот ключевые выводы для решения проблем с пустыми страницами в Playwright:

1. Реализуйте комплексный мониторинг ошибок - Ошибки в консоли и сети предоставляют важные подсказки о том, почему страницы становятся пустыми в автоматизации, но не при ручном тестировании. Настройте правильное отслеживание ошибок для захвата этих различий.

2. Корректируйте стратегии ожидания навигации - Используйте waitUntil: 'networkidle' или расширенные таймауты для обеспечения полной загрузки страниц перед продолжением шагов автоматизации. Это наиболее распространенное решение для проблем с пустыми страницами, связанных с таймингом.

3. Тестируйте разные конфигурации браузера - Экспериментируйте как с headless, так и с headed режимами, и пробуйте разные аргументы запуска браузера. Среды CI часто требуют конкретных корректировок конфигурации.

4. Правильно обрабатывайте аутентификацию - Управление контекстом и состояние аутентификации могут вызывать пустые страницы. Рассмотрите использование встроенных функций аутентификации Playwright или управления состоянием вместо ручных потоков входа.

5. Изолируйте проблему - Используйте трейс-вьювер, перехват сети и контролируемую блокировку ресурсов для точного определения, какие элементы или запросы вызывают проблему с пустой страницей.

Ключевая идея из сообщений сообщества заключается в том, что пустые страницы в Playwright редко вызваны неправильными локаторами (как вы уже убедились), а скорее фундаментальными различиями между контекстами автоматизированного и ручного浏览ения. Систематически решая эти различия через правильную конфигурацию, мониторинг ошибок и стратегии навигации, вы можете обычно решать проблемы с пустыми страницами и создавать надежные автоматизированные тесты.