Zrzut ekranu Marketing as Code: Automation Laravel

Twój zespół od miesięcy pracuje nad Twoim nowym projektem (oczywiście z Laravelem) i jesteś gotowy do wprowadzenia pięknego produktu, który stworzyłeś. Rozpoczynając projektowanie witryny marketingowej, z pewnością staniesz przed trudnym zadaniem przygotowania i zrobienia zrzutów ekranu, aby pokazać wszystkie fajne funkcje i wrażenia użytkownika, które stworzyłeś.

Zrzuty ekranu to doskonały sposób na zakomunikowanie użytkownikom możliwości Twojego produktu (nie oszukujmy się, nikt już nie czyta długich tekstów marketingowych). Ale ich przygotowanie może być zaskakująco trudne i czasochłonne:

• Powinieneś wymyślić przykładową treść, która jest starannie przygotowana i świetna
• Czasami ważne jest, aby usunąć pewne elementy, zaktualizować style i ukryć zawartość, aby wszystko było jasne
• Być może trzeba będzie zmienić rozmiar przeglądarki do określonego rozmiaru, aby pasował do układu witryny
• A potem musisz robić zrzuty ekranu, zmieniać nazwy plików, przechowywać je w repozytorium itp.

Potem są aktualizacje. Czy chcesz zmienić wygląd paska nawigacyjnego aplikacji? Zaimplementować aktualizację kolorów? Chcesz dodać ważną funkcję, która ma wpływ na wiele obszarów aplikacji? Musisz ponownie wykonać wszystkie zrzuty ekranu lub zaakceptować fakt, że Twoja witryna powoli traci synchronizację (a klienci tracą wszystkie nowe rzeczy, nad którymi pracowałeś).

do naszej strony internetowej Narzędzie do zarządzania testami Testmo Szukaliśmy lepszego sposobu na konfigurowanie, przechwytywanie i utrzymywanie marketingowych zrzutów ekranu. Mamy dziesiątki złożonych zrzutów ekranu na naszej stronie, a ręczne robienie i aktualizowanie zrzutów ekranu nie było dla nas opcją. Nawet automatyzacja na ratunek!

Automatyzacja zrzutów ekranu z Laravel Dusk

Już teraz intensywnie używamy Laravel Dusk dla Testmo jako część naszego Automatyzacja testów Pakiety do sprawdzania i weryfikowania funkcjonalności poprzez automatyzację przeglądarki. Dlaczego więc nie użyć Dusk do automatycznego konfigurowania i przechwytywania marketingowych zrzutów ekranu? Kiedy zaczęliśmy eksperymentować z tym pomysłem, zalety stały się widoczne dość szybko:

• Generowanie przykładowych treści jest niesamowite bardzo Łatwiejsze niż kod: Zwłaszcza jeśli masz złożony interfejs użytkownika z wykresami, pulpitami nawigacyjnymi itp., Ręczne konfigurowanie zrzutów ekranu może być bardzo trudne. Z naszego kodu Laravel Dusk możemy łatwo wykorzystać wewnętrzne formularze aplikacji do przygotowania i dodania świetnie wyglądających przykładowych danych.
• Udoskonal interfejs użytkownika za pomocą arkuszy stylów i zmian DOM: Wiele razy trzeba usunąć pewne elementy lub zmienić rozmiar niektórych szczegółów, aby zrzuty ekranu były wyraźniejsze. Zamiast korzystać z programu Photoshop po zrobieniu zrzutu ekranu w celu ulepszenia, możesz teraz używać arkuszy stylów lub wprowadzać niewielkie zmiany w modelu DOM. To jest to bardzo Łatwiejsze i bardziej elastyczne.
• Dodaj symbole zastępcze i paski tekstu: Chcesz, aby zrzuty ekranu były łatwe do zrozumienia dla odwiedzających Twoją witrynę. Dlatego wiele witryn marketingowych dodaje do zrzutów ekranu symbole zastępcze i nakładki z szarymi paskami, aby ukryć bardzo szczegółowe elementy tekstowe. To znowu jest o wiele łatwiejsze do zrobienia za pomocą kodu i oszczędza dużo czasu w przetwarzaniu końcowym.
• Spójne rozmiary dla przeglądarki i zrzutów ekranu: Jeśli musisz regularnie aktualizować zrzuty ekranu, próba ponownego dopasowania tych samych rozmiarów zrzutów ekranu może być bardzo irytująca. Ustawienie rozmiaru przeglądarki z Laravel Dusk jest trywialne, więc możesz mieć spójne rozmiary zrzutów ekranu zdefiniowane w kodzie.
• Przytnij elementy przy użyciu dynamicznej zmiany rozmiaru: Alternatywnie, jeśli chcesz robić zrzuty ekranu tylko niektórych elementów interfejsu użytkownika, możesz łatwo przyciąć zrzuty ekranu do określonych elementów DOM (w oparciu o ich współrzędne i rozmiar obliczone przez Dusk). Teraz, jeśli zaktualizujesz swój interfejs w przyszłości (i zmienisz rozmiar lub położenie elementów), Twoje zrzuty ekranu zawsze będą pasować do Twojego nowego projektu.

Więcej przykładów zrzutów ekranu Laravel i wskazówek

Każdy zrzut ekranu na naszej stronie został teraz zautomatyzowany za pomocą Laravel Dusk, więc możemy po prostu aktualizować nasze zrzuty ekranu, kiedy tylko chcemy, za pomocą kilku naciśnięć klawiszy. Więcej przykładów znajdziesz na naszej stronie internetowej Test zarządzania sprawami I Test eksploracyjny Strony z wycieczkami, które opisują i podkreślają kluczowe cechy naszego produktu.

Opublikowaliśmy również bardziej szczegółowy artykuł z dodatkowymi przykładami kodu i wskazówkami na temat tego, czego nauczyliśmy się dzięki naszej automatyzacji zrzutów ekranu:

Zautomatyzuj ujęcia marketingowe oprogramowania za pomocą Code →

Ten gościnny wpis został napisany przez Dennisa Gourocka, współzałożyciela Testmo. Testmo jest zbudowane z Laravel i pomaga zespołom zarządzać wszystkimi testami oprogramowania na jednej nowoczesnej platformie. Jeśli nie jesteś zaznajomiony z narzędziami kontroli jakości, Testmo opublikowało ostatnio różne przewodniki po narzędziach, które pomogą Ci zacząć: