Ваша команда працювала над вашим новим проектом місяцями (звичайно, з Laravel), і ви готові запустити хороший продукт, який ви створили. Коли ви починаєте розробляти свій маркетинговий веб-сайт, ви неминуче стикаєтеся зі страшним завданням підготовки та створення скріншотів, щоб продемонструвати всі чудові функції та UX, які ви створили.
Скріншоти – це ідеальний спосіб повідомити користувачам про можливості вашого продукту (давайте подивимося правді в очі, ніхто більше не читає довгі маркетингові копії). Але їх приготування може бути дивно складним і трудомістким:
- Ви повинні придумати ретельно розроблений і чудовий на вигляд зразок вмісту
- Іноді важливо видалити певні елементи, оновити стилі та приховати вміст, щоб зробити речі зрозумілішими
- Можливо, знадобиться змінити розмір веб-переглядача до певного розміру, щоб він відповідав макету веб-сайту
- А потім потрібно зробити скріншоти, перейменувати файли, зберегти їх у своєму сховищі тощо.
А ще є оновлення. Змінення структури панелі переходів програми? Реалізуєте оновлення кольору? Додаєте важливу функцію, яка впливає на багато областей програми? Вам доведеться повторно зробити всі скріншоти або прийняти, що ваш веб-сайт повільно виходить із синхронізації (і клієнти пропускають усі нові речі, над якими ви працювали).
Для веб-сайту нашого інструменту управління тестами Testmo ми шукали кращий спосіб підготуватися, зробити та підтримувати наші маркетингові скріншоти. На нашому веб-сайті є багато десятків складних скріншотів, і вручну робити та оновлювати скріншоти для нас не було варіантом. Так що автоматика на допомогу!
Автоматизація скріншоту з Laravel Dusk Ми вже широко використовуємо Laravel Dusk
для Testmo як частину наших пакетів автоматизації тестування для перевірки та перевірки функціональності за допомогою автоматизації браузера. Так чому б також не використовувати Dusk для автоматичної підготовки та створення наших маркетингових скріншотів? Коли ми почали експериментувати з цією ідеєю, переваги стали очевидними досить швидко:
- Створення чудових зразків вмісту набагато простіше з коду: Особливо, якщо у вас складний інтерфейс користувача з діаграмами, інформаційними панелями тощо, налаштувати скріншоти вручну може бути дуже важко. З нашого коду Laravel Dusk ми можемо легко використовувати внутрішні моделі програми для підготовки та додавання чудових зразків даних.
- Тонке налаштування інтерфейсу користувача за допомогою таблиць стилів і змін DOM: Часто вам потрібно видалити певні елементи або змінити розмір деяких деталей, щоб зробити скріншоти чіткішими. Замість того, щоб використовувати Photoshop після створення знімка екрана для покращення, тепер можна використовувати таблиці стилів або вносити невеликі зміни до DOM. Це набагато простіше і гнучкіше.
- Додавання заповнювачів і текстових рядків: Ви хочете, щоб скріншоти були простими для розуміння відвідувачами вашого веб-сайту. Ось чому багато маркетингових веб-сайтів додають заповнювачі та сірі накладення смуг до знімків екрана, щоб приховати занадто деталізовані текстові елементи. Це знову ж таки набагато простіше зробити з коду і економить масу часу на постобробку.
- Послідовний розмір браузера та скріншотів: Якщо вам регулярно доводиться оновлювати скріншоти, може бути дуже дратує спроба знову відповідати тим самим розмірам знімків екрана. Налаштування розміру браузера з Laravel Dusk є тривіальним, тому ви можете мати послідовні розміри скріншотів, визначені у вашому коді.
- Кадрування елементів з динамічною зміною розміру: Крім того, якщо ви хочете зробити знімки екрана лише певних елементів вашого інтерфейсу користувача, ви також можете легко обрізати свої знімки екрана до певних елементів DOM (на основі їхніх координат і розміру, обчислених у сутінках). Тепер, якщо ви оновите інтерфейс користувача в майбутньому (і розмір або розташування елементів зміниться), ваші скріншоти завжди будуть ідеально відповідати вашому новому дизайну.
Більше прикладів & Поради щодо
скріншотів Laravel Майже будь-який скріншот на нашому веб-сайті тепер автоматизовано за допомогою Laravel Dusk, тому ми можемо просто оновити наші скріншоти, коли захочемо, кількома натисканнями клавіш. Щоб отримати більше прикладів, перегляньте наші сторінки управління тестовими прикладами та дослідницького тестового туру, які охоплюють та висвітлюють основні особливості нашого продукту.
Ми також опублікували більш детальну статтю з додатковими зразками коду та порадами щодо того, що ми дізналися від автоматизації наших скріншотів:
Автоматизація скріншотів програмного забезпечення з кодом →
Ця гостьова публікація була написана Деннісом Гуроком, одним із засновників Testmo. Testmo побудований за допомогою Laravel і допомагає командам керувати всіма тестами програмного забезпечення на одній сучасній платформі. Якщо ви не знайомі з інструментами контролю якості, Testmo нещодавно опублікував різні посібники з інструментів для початку:
