IE11 и Firefox теперь в Chromatic

Тестирование пользовательского интерфейса в нескольких браузерах и обновление цен

Посмотрим правде в глаза, пользовательский интерфейс может выглядеть идеально в одном браузере, но не работать в другом. Если вы знаете CSS, вы знаете, что ошибки браузера неизбежны. Вот почему я очень рад запустить в Chromatic поддержку IE11 и Firefox, чтобы расширить охват визуального тестирования одним щелчком мыши.

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

Chromatic - это сервис визуального тестирования Storybook, выполняемый сопровождающими Storybook. Он автоматически определяет изменения пользовательского интерфейса в ваших историях, когда вы нажимаете код.

Как включить больше браузеров

Capture Cloud от Chromatic создано основными специалистами по сопровождению Storybook, чтобы стать самой стабильной, масштабируемой и производительной тестовой инфраструктурой для Storybook. Посмотрим, как это использовать.

Примечание. В стандартные планы входит Firefox, в планы Pro - IE11 и Firefox

Включите новый браузер

Перейдите на экран «Управление» и щелкните, чтобы включить другой браузер.

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

Теперь просмотрите и примите новый снимок браузера в рабочем процессе проверки, чтобы установить его в качестве базового.

Отныне Capture Cloud будет запускать столько машин Chrome, Firefox или IE11, сколько вам нужно для тестирования Storybook за минимальное время.

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

Просмотр изменений для нескольких браузеров

Когда Chromatic обнаруживает визуальное изменение истории в любом активном браузере, вы получите уведомление.

🎉 Все готово!

Одним щелчком мыши вы добавили визуальное тестирование для IE11 и Firefox. Никаких ошибок или дополнительных настроек не требуется. Больше нет необходимости вручную тестировать пользовательский интерфейс в нескольких браузерах. Прочтите полную документацию по браузеру.

Больше ценности, та же цена

Команды в Salesforce, Auth0 и Zenefits полагаются на нас, чтобы предоставить инфраструктуру визуального тестирования, которая сочетает в себе комплексное покрытие, быстрое время сборки и удобство разработки. Мы обновили наши планы, чтобы предоставить вам больше возможностей для использования и тестирования по той же цене.

  • Начальный план: 35 000 снимков (вместо 10 000), чтобы дать скромным командам больше возможностей для роста.
  • Стандартный план: доступ к Firefox и 80 000 снимков состояния (по сравнению с 50 000), чтобы помочь опытным командам увеличить охват тестированием. Это популярный план!
  • План Pro: доступ к IE11 + Firefox и 150 000 снимков состояния для профессиональных команд, которым требуется комплексное визуальное тестирование.

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

Хроматика для сборника рассказов

Chromatic - это инструмент тестирования промышленного уровня, созданный разработчиками ядра Storybook. Наша цель - помочь вам с уверенностью поставлять пуленепробиваемые компоненты пользовательского интерфейса.

👉 Попробуйте Chromatic бесплатно в течение 30 дней 👈

Часто задаваемые вопросы

А как насчет всех других браузеров и версий?
В IE11 и Firefox Chromatic теперь охватывает основные механизмы рендеринга (Blink, Gecko и Trident) во всех окнах просмотра. Это устраняет почти все регрессии браузера, которые могут увидеть ваши пользователи, без дополнительных усилий, настроек или времени в вашем рабочем процессе.

Добавление еще большего количества браузеров / устройств приводит к уменьшению отдачи, что добавляет шума в процесс визуального обзора. Мы как основные специалисты по сопровождению Storybook фокусируем наши усилия на повышении скорости и удобства разработки Chromatic.

Могу ли я отказаться от подписки на BrowserStack или Sauce?
Наша цель не в замене таких сервисов, как Browserstack или Sauce. Облачные браузерные сервисы отлично подходят для проверки интерактивного поведения и сквозного тестирования, но не предназначены для визуального тестирования.

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

Сообщает ли Chromatic мне, когда снимки Firefox / IE11 отличаются от снимков Chrome?
Нет. Для большинства команд это имеет серьезные компромиссы. Растущие комбинации движка рендеринга + операционная система (например, Chrome 63 в Linux) делают практически невозможным для команд проверить, что одни и те же пиксели отображаются повсюду.

Команды, которые пытаются проверить согласованность между браузерами, в конечном итоге сталкиваются с ложными срабатываниями из-за внутренних различий браузера / ОС (сглаживание, рендеринг шрифтов и т. Д.). Или потребовать обходные пути, такие как ослабление пороговых значений различий, которые открывают дверь для ложных негативов.

Это различие может быть непросто понять, поэтому вот диаграмма разницы между «тестированием браузеров друг против друга» и «визуальным тестированием с течением времени»:

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