Twój zespół pracuje nad Twoim nowym projektem od miesięcy (oczywiście z Laravelem) i jesteś gotowy do uruchomienia fajnego produktu, który zbudowałeś. Gdy zaczynasz projektować swoją witrynę marketingową, nieuchronnie stoisz przed przerażającym zadaniem przygotowania i zrobienia zrzutów ekranu, aby zaprezentować wszystkie wspaniałe funkcje i UX, które zbudowałeś.
Zrzuty ekranu to idealny sposób na przekazanie użytkownikom możliwości produktu (spójrzmy prawdzie w oczy, nikt już nie czyta długich tekstów marketingowych). Ale mogą być zaskakująco trudne i czasochłonne w przygotowaniu:
- Musisz wymyślić starannie przygotowaną i świetnie wyglądającą przykładową treść
- Czasami ważne jest, aby usunąć pewne elementy, zaktualizować style i ukryć zawartość, aby wszystko było jaśniejsze
- Może być konieczna zmiana rozmiaru przeglądarki do określonego rozmiaru, aby dopasować ją do układu witryny
- Następnie musisz zrobić zrzuty ekranu, zmienić nazwy plików, zapisać je w repozytorium itp.
A potem są aktualizacje. Zmieniasz wygląd paska nawigacyjnego aplikacji? Implementujesz odświeżanie 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ć, że Twoja witryna powoli traci synchronizację (a klienci tracą wszystkie nowe rzeczy, nad którymi pracowałeś).
Na stronie internetowej naszego narzędzia do zarządzania testami Testmo szukaliśmy lepszego sposobu na przygotowanie, wykonanie i utrzymanie naszych marketingowych zrzutów ekranu. Mamy wiele dziesiątek złożonych zrzutów ekranu na naszej stronie internetowej, a ręczne robienie i aktualizowanie zrzutów ekranu nie było dla nas opcją. A więc automatyzacja na ratunek!
Automatyzacja zrzutów ekranu z Laravel Dusk Używamy już Laravel Dusk
szeroko dla Testmo w ramach naszych pakietów automatyzacji testów, aby zweryfikować i sprawdzić funkcjonalność za pomocą automatyzacji przeglądarki. Dlaczego więc nie wykorzystać Dusk do automatycznego przygotowania i zrobienia naszych marketingowych zrzutów ekranu? Kiedy zaczęliśmy eksperymentować z tym pomysłem, zalety stały się oczywiste dość szybko:
- Generowanie doskonałej przykładowej zawartości jest znacznie łatwiejsze z kodu: Zwłaszcza jeśli masz złożony interfejs użytkownika z wykresami, pulpitami nawigacyjnymi itp., Ręczne skonfigurowanie zrzutów ekranu może być bardzo trudne. Z naszego kodu Laravel Dusk możemy łatwo wykorzystać wewnętrzne modele aplikacji do przygotowania i dodania świetnie wyglądających przykładowych danych.
- Dostrajanie interfejsu użytkownika za pomocą arkuszy stylów i zmian DOM: Często trzeba usunąć niektóre elementy lub zmienić rozmiar niektórych szczegółów, aby zrzuty ekranu były wyraźniejsze. Zamiast używać Photoshopa po zrobieniu zrzutu ekranu, aby poprawić sytuację, możesz teraz użyć arkuszy stylów lub wprowadzić niewielkie zmiany w DOM. Jest to znacznie łatwiejsze i bardziej elastyczne.
- Dodawanie symboli zastępczych i pasków tekstowych: Chcesz, aby zrzuty ekranu były łatwe do zrozumienia dla odwiedzających Twoją witrynę. Dlatego wiele marketingowych witryn sieci Web dodaje do zrzutów ekranu symbole zastępcze i nakładki szarych pasków, aby ukryć zbyt szczegółowe elementy tekstowe. Jest to znacznie łatwiejsze do zrobienia z kodu i oszczędza mnóstwo czasu w przetwarzaniu końcowym.
- Spójne rozmiary przeglądarki i zrzutów ekranu: Jeśli regularnie musisz aktualizować zrzuty ekranu, próba ponownego dopasowania tych samych rozmiarów zrzutów ekranu może być bardzo denerwująca. Ustawienie rozmiaru przeglądarki z Laravel Dusk jest trywialne, dzięki czemu możesz mieć spójne rozmiary zrzutów ekranu zdefiniowane w kodzie.
- Kadrowanie do elementów z dynamiczną zmianą rozmiaru: Alternatywnie, jeśli chcesz robić zrzuty ekranu tylko niektórych elementów interfejsu użytkownika, możesz również łatwo przyciąć zrzuty ekranu do określonych elementów DOM (na podstawie ich współrzędnych i rozmiaru obliczonego przez Zmierzch). Teraz, jeśli zaktualizujesz interfejs użytkownika w przyszłości (a rozmiar lub położenie elementów ulegną zmianie), zrzuty ekranu zawsze będą idealnie pasować do nowego projektu.
Więcej przykładów i wskazówki
dotyczące zrzutów ekranu Laravel Prawie każdy zrzut ekranu na naszej stronie został zautomatyzowany za pomocą Laravel Dusk, więc możemy po prostu zaktualizować nasze zrzuty ekranu, kiedy tylko chcemy, za pomocą kilku naciśnięć. Aby uzyskać więcej przykładów, zapoznaj się z naszym zarządzaniem przypadkami testowymi i stronami przewodnika po testach eksploracyjnych , które obejmują i podkreślają główne 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ę z automatyzacji naszych zrzutów ekranu:
Automatyzacja zrzutów ekranu marketingu oprogramowania za pomocą kodu →
Ten post gościnny został napisany przez Dennisa Gurocka, jednego z założycieli Testmo. Testmo jest zbudowany przy użyciu Laravel i pomaga zespołom zarządzać wszystkimi testami oprogramowania na jednej nowoczesnej platformie. Jeśli nie znasz narzędzi QA, Testmo opublikowało ostatnio różne przewodniki po narzędziach, aby rozpocząć:
