Перейти к основному содержимому

ManagerConfig

Конфигурация для менеджера storyshots. Используется при запуске в режимах UI и CI.

devices​

Описывает список устройств, в рамках которых запускаются истории.

примечание

Первый объект в списке devices становится устройством по умолчанию.

export default {
  devices: [
    {
      name: 'desktop',
      width: 1480,
      height: 920,
    },
    {
      name: 'mobile',
      userAgent:
        'Mozilla/5.0 (iPhone; CPU iPhone OS 12_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/12.0 Mobile/15E148 Safari/604.1',
      width: 414,
      height: 896,
    },
  ],
  /* ... */
};

preview​

Принимает сервер preview.

import { createExecPreview } from '@storyshots/exec-preview';

export default {
  preview: createExecPreview(/* конфигурация */),
  /* ... */
};

runner​

Объект обработчик тестовых заданий. Чаще всего представляет собой кластер из нескольких экземпляров браузера. Реализация по умолчанию позволяет контролировать их количество:

export default {
  runner: RUNNER.pool({ agentsCount: 4 }),
  /* ... */
};
примечание

Нет чёткой формулы определяющей рекомендуемое количество агентов. Подходящее значение стоит определять опытным путём.

capture​

Функция снятия снимка страницы в стабильном состоянии.

примечание

Страница считается стабильной, если её визуальное представление не изменяется, то есть она "замирает".

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

export default {
  /**
   * Выполняет мнговенный снимок экрана, минуя стадию стабилизации.
   * (Не рекомендуется для большинства сценариев)
   */
  capture: CAPTURE.instantly,
  /* ... */
};

paths​

Содержит описание путей для артефактов storyshots.

export default {
  paths: {
    // Путь до папки с журналами
    records: path.join(process.cwd(), 'records'),
    // Путь до папки со снимками экрана
    screenshots: path.join(process.cwd(), 'screenshots')
  },
  /* ... */
};

agentsCount​

Задаёт количество экземпляров playwright, напрямую влияет на время выполнения историй:

export default {
  agentsCount: 4,
  /* ... */
};
примечание

Нет чёткой формулы определяющей рекомендуемое количество агентов. Подходящее значение стоит определять опытным путём.

compare​

Описывает алгоритм сравнения двух изображений.

примечание

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

withPlaywright​

Делегирует сравнение снимков playwright:

export default {
  compare: Compare.withPlaywright(options),
  /* ... */
};

comparator​

Алгоритм сравнения пикселей:

threshold​

Погрешность при сравнении (от 0 до 1, где 0 это максимальная строгость). Работает только для pixelmatch

maxDiffPixels​

Максимально допустимая разница в пикселях. 0 по умолчанию

maxDiffPixelRatio​

Максимально допустимая разница в пикселях (отношение: от 0 до 1). 0 по умолчанию

withLooksSame​

Использует looks-same.

export default {
  compare: Compare.withLooksSame(options),
  /* ... */
};
примечание

Доступны все основные опции за исключением createDiffImage (diff создаётся всегда так как является обязательным для storyshots)

Оптимальный алгоритм​

Не смотря на то, что библиотека поддерживает из коробки минимально необходимый набор алгоритмов, он может оказаться не подходящим под конкретные задачи проекта.

подсказка

Подходящий алгоритм, это такой алгоритм который обеспечивает минимальное количество ложных срабатываний (хрупких тестов), но при этом не пропускает дефекты (обеспечивает высокую защиту от регресса)

Именно поэтому storyshots позволяет реализовать своё решение:

{
  compare: (actual, expected, story) => Promise<ComparisonResult>;
  /* ... */
}
  • actual снимок актуального поведения
  • expected снимок эталонного поведения
  • story объект истории включая мета атрибуты

Результатом алгоритма является объект ComparisonResult в котором содержится:

  • equal - признак равенства двух снимков
  • explanation - если два снимка не равны, содержит дополнительную информацию
  • diff - ссылается на итоговое diff изображение
подсказка

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