Есть ли способ отключить утверждения скриншотов в драматурге?
Я представляю тестирование скриншотов для проекта, над которым работаю. Из-за различий в скриншотах, созданных локально (macOS) и в CI (Linux), я решил создавать скриншоты с помощью действия Github, запускаемого комментарием к PR. Проблема с этим подходом заключается в том, что локальное выполнение тестов завершается сбоем из-за несоответствия снимков экрана. Чтобы избежать этой ситуации, я хотел бы игнорировать вызовы toHaveScreenshot, чтобы их игнорировали локально.
Я пытался установить maxDiffPixelRatio на 1, но это не сработало... Есть ли другой способ добиться такого поведения? Например, настроить поведение toHaveScreenshot? 🤔
@ggorlen, насколько я понял, существует много причин для этих различий, и время, потраченное на их выяснение, начинает противоречить цели создания снимков экрана. Я уже пытался использовать образы macOS на CI, чтобы они были такими же, как и локально, но это приводило к очень длительным тестам на CI, а скриншоты все равно имели различия (это тоже дорого). Я также пытался настроить свойства шрифта CSS, но это не помогло ни при использовании изображений Linux, ни macOS в CI. Я не пытался изменить настройки своего ноутбука, потому что над этими репозиториями работает много людей.
Хорошо, а как насчет докер-контейнера?
Я также пробовал это локально, но усилия не стоили того, учитывая, что то же самое можно сделать и на CI. По крайней мере, в CI у нас есть все необходимые токены и переменные окружения. На местном уровне нам нужно будет создать много нового, чтобы внедрить его в контейнер, и всем придется привыкнуть запускать тесты в контейнере, а не локально. Мне потребовалось больше дня, чтобы разобраться в этом, поэтому я решил попробовать CI, который мне удалось заставить работать быстрее.
В любом случае, если у вас есть какие-либо подсказки о том, как настроить Docker-контейнер для локального запуска, я внимательно слушаю. Чтобы это работало, мне нужно: - Поместить локальный файл «.npmrc» в контейнер, чтобы он мог читать из нашего частного реестра npm. — Кэшируйте зависимости, чтобы нам не приходилось каждый раз ждать установки Yarn. - Кэшируйте сборку по тем же причинам. - Извлеките снимки экрана на хост, чтобы их можно было зафиксировать, или зафиксируйте их из контейнера, для чего также потребуется доступ к git.
Я знаю о странице, которой вы поделились, но на ней показано только, как запустить контейнер. Чтобы тесты запускались внутри контейнера, нужно сделать еще много всего. А как насчет внедрения токенов, установки deps, сборки приложения, запуска тестов и извлечения снимков экрана? У вас есть пример? До сих пор этот подход казался более подходящим для небольших проектов с открытым исходным кодом, а не для крупномасштабных и частных проектов. Если только я не полный нуб в докере и что-то упускаю.
Я забыл добавить, что мы проводим тесты на локальной сборке, а не на реальной среде. Примеры, которые я вижу на странице, которой вы поделились, предназначены для работы в реальной среде. Кроме того, я до сих пор не понимаю, как извлечь скриншоты из контейнера 🤔
Я не могу дать полное руководство по Docker, но это должно решить ваши жалобы на то, что разные системы вызывают варианты на скриншотах. Если у вас крупномасштабный проект, я удивлен, что он еще не использует Docker. Похоже, у вас будет больше проблем с совместимостью, если 20 человек будут работать в случайных, недокеризованных средах, чем просто тесты скриншотов. Я не уверен, в чем разница между «локальной сборкой» и «живой средой». Драматург просто посещает URL-адрес и автоматизирует его — неважно, как появилась эта страница, она где-то размещена на сервере. Местное или иное не имеет значения.
Ответы 2
Странно, но maxDiffPixelRatio обычно работает. Если вы уверены, что это не так — установите maxDiffPixels в playwright.config.ts на какое-то большое число.
import { defineConfig } from '@playwright/test';
export default defineConfig({
expect: {
toHaveScreenshot: { maxDiffPixels: 100000 },
},
});
Альтернативный вариант — обновить скриншоты с помощью npx playwright test—-update-snapshots и не отправлять их в репозиторий.
Причина, по которой это может быть у вас, заключается в том, что на CI вы используете закрепленный образ Playwright на основе Ubuntu и безголовый браузер. А локальный — это Windows Chrome по умолчанию.
Чтобы игнорировать снимки экрана локально, вы можете добавить в package.json скрипт, например:
"scripts": {
"e2e-local": "npx playwright test --ignore-snapshots"
}
Затем запустите это в терминале: npm run e2e-local или просто запустите команду напрямую.
Однако проблема, с которой я столкнулся при локальном создании базовых снимков экрана, вызывающая проблемы с CI, заключалась просто в том, что мой монитор имел масштаб 125% вместо 100%. Когда я изменил его на 100% и регенерировал базовые скриншоты, они заработали на CI. Возможно, это стоит проверить.
Кажется, «-ignore-snapshots» — это именно то, что мне нужно. Жаль, что этого не появилось, когда я искал про игнорирование скриншотов 🥲
Я проверил масштаб экрана, но он установлен по умолчанию. В любом случае, около 20 человек ежедневно работают над этим репозиторием, поэтому просить их изменить настройки дисплея для запуска тестов, по моему мнению, было бы неосуществимо.
Я не понимаю, почему должна быть какая-то разница в работе в CI и локально. Вы работаете с одним и тем же изображением и используете одни и те же настройки без головы? Просто выбрасывать локальные скриншоты-тесты похоже на лечение перхоти обезглавливанием, но если вам необходимо это сделать, возможно, что-то вроде
test.skip(!process.env.CI), или снова используйте фильтрацию, используя флагprocess.env.CI, чтобы определить, находитесь ли вы в CI или нет.