Ваша команда работала над вашим новым проектом в течение нескольких месяцев (конечно, с Laravel), и вы готовы запустить хороший продукт, который вы создали. Когда вы начинаете разрабатывать свой маркетинговый веб-сайт, вы неизбежно сталкиваетесь с ужасной задачей подготовки и создания снимков экрана, чтобы продемонстрировать все замечательные функции и UX, которые вы создали.
Скриншоты — идеальный способ донести до пользователей возможности вашего продукта (посмотрим правде в глаза, никто больше не читает длинные маркетинговые тексты). Но они могут быть удивительно сложными и трудоемкими в приготовлении:
- Вы должны придумать тщательно продуманный и великолепно выглядящий образец контента
- Иногда важно удалить определенные элементы, обновить стили и скрыть контент, чтобы сделать вещи более понятными
- Возможно, вам придется изменить размер браузера до определенного размера, чтобы он соответствовал макету вашего веб-сайта
- А затем вам нужно сделать скриншоты, переименовать файлы, сохранить их в репозитории и т. Д.
А еще есть обновления. Меняете дизайн панели навигации приложения? Реализуете обновление цвета? Добавляете важную функцию, которая влияет на многие области приложения? Вы должны переделать все скриншоты или смириться с тем, что ваш сайт медленно рассинхронизируется (и клиенты пропускают все новые вещи, над которыми вы работали).
Для веб-сайта нашего инструмента управления тестированием Testmo мы искали лучший способ подготовить, сделать и поддерживать наши маркетинговые скриншоты. У нас есть много десятков сложных скриншотов на нашем веб-сайте, и ручное создание и обновление скриншотов не было для нас вариантом. Так что автоматика спешит на помощь!
Автоматизация скриншотов с помощью Laravel Dusk Мы уже широко используем Laravel Dusk
для Testmo как часть наших пакетов автоматизации тестирования для проверки и проверки функциональности с помощью автоматизации браузера. Так почему бы также не использовать Dusk для автоматической подготовки и создания наших маркетинговых скриншотов? Когда мы начали экспериментировать с этой идеей, преимущества стали очевидны довольно быстро:
- Создание отличного демонстрационного контента намного проще из кода: Особенно, если у вас сложный пользовательский интерфейс с диаграммами, информационными панелями и т. Д., Может быть очень сложно вручную настроить скриншоты. Из нашего кода Laravel Dusk мы можем легко использовать внутренние модели приложения для подготовки и добавления великолепно выглядящих образцов данных.
- Тонкая настройка пользовательского интерфейса с помощью таблиц стилей и изменений DOM: Часто вам нужно удалить определенные элементы или изменить размер некоторых деталей, чтобы сделать ваши скриншоты более четкими. Вместо того, чтобы использовать Photoshop после создания снимка экрана для улучшения ситуации, теперь вы можете использовать таблицы стилей или вносить небольшие изменения в DOM. Это намного проще и гибче.
- Добавление заполнителей и текстовых панелей: Вы хотите, чтобы скриншоты были простыми для понимания посетителями вашего сайта. Вот почему многие маркетинговые веб-сайты добавляют заполнители и наложения серых полос на скриншоты, чтобы скрыть слишком подробные текстовые элементы. Это опять же намного проще сделать из кода и экономит массу времени на постобработку.
- Согласованные размеры браузера и скриншотов: Если вам регулярно приходится обновлять скриншоты, может быть очень неприятно снова пытаться сопоставить те же размеры скриншотов. Установка размера браузера из Laravel Dusk тривиальна, поэтому вы можете иметь согласованные размеры снимков экрана, определенные в вашем коде.
- Обрезка до элементов с динамическим изменением размера: В качестве альтернативы, если вы хотите делать скриншоты только определенных элементов вашего пользовательского интерфейса, вы также можете легко обрезать свои скриншоты до определенных элементов DOM (на основе их координат и размера, рассчитанных Dusk). Теперь, если вы обновите свой пользовательский интерфейс в будущем (и размер или положение элементов изменится), ваши скриншоты всегда будут идеально соответствовать вашему новому дизайну.
Больше примеров и советов по
скриншотам Laravel Практически любой скриншот на нашем веб-сайте теперь автоматизирован с помощью Laravel Dusk, поэтому мы можем просто обновлять наши скриншоты, когда захотим, с помощью нескольких нажатий клавиш. Для получения дополнительных примеров взгляните на наши страницы управления тестовыми примерами и исследовательского тестирования , которые охватывают и выделяют основные функции нашего продукта.
Мы также опубликовали более подробную статью с дополнительными примерами кода и советами о том, что мы узнали из автоматизации наших скриншотов:
Автоматизация скриншотов маркетинга программного обеспечения с помощью кода →
Этот гостевой пост был написан Деннисом Гуроком, одним из основателей Testmo. Testmo построен с использованием Laravel и помогает командам управлять всеми своими тестами программного обеспечения на одной современной платформе. Если вы не знакомы с инструментами контроля качества, Testmo недавно опубликовал различные руководства по инструментам для начала работы:
