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

На чтение 3 мин Опубликовано 21.09.2024

Вопрос или проблема

Lighthouse по умолчанию использует мобильный макет. Я передаю файл lighthouseDesktopConfig, расположенный по пути lighthouse/core/config/lr-desktop-config из node_modules, чтобы настроить тесты для настольного макета. Однако отчёты по-прежнему отражают мобильный макет. Даже при передаче конфигурации для настольного режима появляется ошибка, сообщающая о превышении времени ожидания теста в 30000 мс, когда я пытаюсь запустить тестовые случаи. Установленные версии:

"playwright-lighthouse": "^3.2.6",
 "lighthouse": "^10.4.0"

import {test } from '@playwright/test';
import{
    SLOW_3G_CONFIG
} from './constants.js'
import { checkWebVitals } from './webVitalsUtils.js';
import lighthouseDesktopConfig from 'lighthouse/core/config/lr-desktop-config.js';
import lighthouseMobileConfig from  'lighthouse/core/config/lr-mobile-config.js';

test('Показатели производительности для медленной сети 3G',async({playwright,browserName})=>{
    test.skip(browserName !== 'chromium','Запуск только на chrome');
    const browser=await playwright.chromium.launch({
        args:['--remote-debugging-port=9223'],
    });
    

    const page = await browser.newPage();

    await page.goto(HOME_PAGE_URL,{waitUntil:'networkidle'});

    await checkWebVitals({
        lighthouseConfig:lighthouseDesktopConfig,
        lightHouseNetworkOpts:SLOW_3G_CONFIG,
        portNumber:9223,
        page:page,
        reportName: 'lh-report-slow-3g-desktop',
    });
});

Ответ или решение

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

Проверьте правильность импорта и вызова конфигурации:
Убедитесь, что вы правильно импортируете конфигурацию для десктопа. Ваш код показывает корректный импорт, но важно также проверить, что передаваемая конфигурация действительно используется в функции checkWebVitals.
Параметры при запуске Lighthouse:
Убедитесь, что в функции checkWebVitals вы передаете lighthouseConfig как lighthouseDesktopConfig. Возможно, стоит просмотреть саму реализацию функции, чтобы гарантировать, что конфигурация используется именно там.
Использование режима десктопа:
Для тестирования десктопной версии также следует установить размеры окна браузера, соответствующие десктопу. Это можно сделать, добавив следующие строки кода после создания страницы:
```
await page.setViewportSize({ width: 1366, height: 768 });
```
Проблема с тайм-аутом:
Ошибка о превышении времени выполнения теста (timeout) может быть вызвана несколькими причинами, включая медленную загрузку страницы или ресурсы, требующие более длительной обработки. Вы можете увеличить время ожидания, добавив параметр timeout в тест, например:
```
test('Performance metrics for Slow 3g network', { timeout: 60000 }, async ({ playwright, browserName }) => {
```
Конфигурация сети:
Убедитесь, что конфигурация сети SLOW_3G_CONFIG настроена правильно. Учитывайте, что при использовании медленных соединений время загрузки страниц может быть значительно увеличено.

Пример вашего теста с внесёнными изменениями может выглядеть так:

import { test } from '@playwright/test';
import { SLOW_3G_CONFIG } from './constants.js';
import { checkWebVitals } from './webVitalsUtils.js';
import lighthouseDesktopConfig from 'lighthouse/core/config/lr-desktop-config.js';

test('Performance metrics for Slow 3g network', { timeout: 60000 }, async ({ playwright, browserName }) => {
    test.skip(browserName !== 'chromium', 'Running only on chrome');
    const browser = await playwright.chromium.launch({
        args: ['--remote-debugging-port=9223'],
    });

    const page = await browser.newPage();
    await page.setViewportSize({ width: 1366, height: 768 });

    await page.goto(HOME_PAGE_URL, { waitUntil: 'networkidle' });

    await checkWebVitals({
        lighthouseConfig: lighthouseDesktopConfig,
        lightHouseNetworkOpts: SLOW_3G_CONFIG,
        portNumber: 9223,
        page: page,
        reportName: 'lh-report-slow-3g-desktop',
    });
});

Если вы внесли все эти изменения и тесты по-прежнему отображают мобильную версию, рекомендуется проверить зависимости и работу версии библиотек на предмет известных ошибок. Возможно, обновление версий lighthouse или playwright-lighthouse может помочь решить проблему.