Powrót do: Praktyczne wprowadzenie do testów automatycznych z Playwright

Formatowanie kodu z Prettier

TIP: Ta lekcja jest częścią rozwijanego Programu Testy Automatyczne z Playwright 🎭

Dodatkowe materiały

W tej lekcji integrujemy nasz projekt testów z Prettier po to abyś mógł:

  • Formatować kod w całym projekcie za pomocą jednego polecenia.
  • Ustalić standard formatowania dla całego projektu.
  • Dodać własne reguły z formatowaniem kodu.
  • Sprawić aby kod był czytelniejszy (np. poprawić długie linie i ujednolicić odstępy).

Instalacja projektu do testów

Przejdź do repozytorium lekcji na GitHub. Pobierz i rozpakuj repozytorium. Następnie przejdź do SB01_bonusy i przenieś katalog L06_formatowanie_kodu_z_prettier do katalogu z projektami . Otwórz katalog z tą lekcją w VSC.

W terminalu uruchom polecenie:

npm install

Uruchom testy

npx playwright test

Jeżeli otrzymasz błąd związany z nieaktualnymi przeglądarkami to wykonaj plecenie:

npx playwright install

Włącz śledzenie zmian

Przejdź do zakładki Source Control i kliknij Initialize Repository. Dodaj wszystkie pliki do commita.

Dedykowana lekcja o tym jak dodać narzędzie Git do projektu: Wersjonowanie projektu z Git.

Instalacja Prettier

Wszystkie polecenia z tej lekcji znajdziesz w końcowej części pliku README w projekcie na którym pracujesz.

Zainstalowanie paczki Prettier:

npm install --save-dev --save-exact prettier

Uruchomienie formatowania z Prettier

npx prettier --write .

Ignorowanie plików w Prettier

Dodaj plik do projektu: .prettierignore

Zignoruj m. in. pliki raportów z Playwright:

package-lock.json
playwright-report

Dodanie reguły Prettier

Dodaj plik do projektu: .prettierrc.json

Przykładowo zastosujmy zgodne z domyślnym formatowaniem Playwright, pojedyncze apostrofy::

{
    "singleQuote": true
}

Więcej reguł formatowania znajdziesz na: https://prettier.io/docs/en/options.html.

TIP:Zalecamy weryfikację formatowania poprzez podgląd w widoku kontroli wersji (zakładka Source Code).

Rozszerzenie do VSC – Prettier

Zainstaluj rozszerzenie Prettier korzystając z panelu Extensions znajdującego się po lewej stronie.

Zwróć uwagę na nazwę i zweryfikowanego dostawcę wtyczki.

Po instalacji zmień coś w pliku testów. Uruchom formatowanie używając prawego klawisza myszki w oknie edytora i wybierz opcję Format Dokument.

Zostaniesz poproszony o wybór domyślnego formatera. Wybierz oczywiście Prettier.

Od teraz gdy będziesz używał opcji Format Dokument w edytorze zostaną zaaplikowane reguły ustawione dla Prettier

Repozytorium z projektem testów automatycznych

Cały kod do tego kursu znajdziesz w dedykowanym repozytorium na GitHub.

13 komentarzy

  1. Hej mam problem z prettierem, Większość z przedstawionych w lekcji działa poza używaniem prettiera za pomocą wtyczki. Czyli wchodzą na dany plik, klikam prawym i formatuj ale nic się nie dzieje. Mimo, że ustawiłem go jako default i widnieje jako Default Formatter.

    Avatar Franciszek Klocek
    Odpowiedz

    1. Hej! Może być kilka przyczyn tego typu działania.
      1. W pliku są błędy które nie pozwalają na formatowanie. Np. masz niedomknięte nawiasy etc lub nadmiarowe znaki. Wtedy formatowanie nie jest odpalane. Zweryfikuj czy w pliku nie ma błędów.
      2. Może trzeba załadować VSCode ponownie – zdarza się, że restart pomaga.
      3. Ważne aby plik, który chcesz formatować nie był wyłapywany przez .prettierignore (albo folder w którym on jest)
      4. Może plik już jest sformatowany i nie ma co formatować – dokonaj zmian, które wymuszą formatowanie.

      Na koniec polecam prosty plik do formatowania np. test.ts z zawartością:

      {
  "test1";
}

      i sprawdzić czy zostanie on sformatowany.

      Dodatkowo wtyczka Prettier – Code formatter do VSC może pomóc w identyfikacji problemów)

      Daj znaka czy coś zadziałało

      Przemek Przemek
      Odpowiedz

  2. dobrze by było zrobić taki setup, żeby formatowanie przebiegało automatycznie po zapisaniu pliku. A jeszcze lepiej byłoby, gdyby to ustawienie było wspólne dla wszystkich osób które korzystają z danego repo 😉

    Avatar Michał Dudziak
    Odpowiedz

          1. no tak, tylko właśnie to co musiałbym zrobić, to wymusić instalację takiej wtyczki u innych osób z projektu 😉 nie zawsze jest to takie proste.

            Myślę jeszcze żeby zrobić wspólne ustawienia VS code. Ale nie wiem, czy to dobra praktyka, aby plik ustawień dodać do repo

            Avatar Michał Dudziak
            Odpowiedz

            1. Można wrzucić takie ustawienia, ale wtedy to wymusza na wszystkich korzystanie z takich samych settingów – tu może być różnie, jesli każdy ma jakies swoje preferencje i najbardziej efektywne ustawienia.

              Co do setupu – można rozpisać i zadecydować w projekcie, ze do pracy z danym repozytorium/projektem wymagany jest odpowiedni setup i konfiguracja środowiska – ustawiania IDE, wtyczki etc.

              Obecnie w części projektów stosuje połączenie powyższych opcji – w README mamy spisane wymagania konfiguracji środowiska i IDE a w repo mamy tylko częśc ustawień (np. jak pracujemy w IntelliJ to w repo mamy konfiguracje uruchomieniowe) 🙂

              Wszystko to kwestia ustaleń i dogadania w projekcie 🙂

              Krzysiek Kijas Krzysiek Kijas
              Odpowiedz

              1. tak, kwestia dogadania się z zespołem, to jest najważniejsze zadanie na początku 🙂 Zgadzam się w pełni. Myślę, że faktycznie powinno to rozwiązać większość problemów.

                Rozważam już po prostu co mogę zrobić w sytuacjach sporadycznych, gdy część osób po prostu nie będzie miało tego pluginu / nie uruchomi ręcznie komendy / wprowadzi własne reguły. Ale to już szerszy temat i chyba faktycznie główne rozwiązanie to rozmowa 😉

                Avatar Michał Dudziak
                Odpowiedz

  3. Hej, czy polecenie pretter –write . powinno się wykonywać w konkretnym katalogu (którego ścieżka jest w wierszu poleceń terminala)? Ja wykonałem polecenie w całym projekcie (moduły S01, S02, SB01) i wprowadził zmiany w ok. 25 plikach. 😀
    Pliki playwright.config.ts chyba też powinny być ujęte w .prettierignore obok package-lock.json i playwright-report?

    Avatar Slawomir Nowodworski
    Odpowiedz

    1. Hej,
      Polecenie prettier --write . powoduje sformatowanie plików z danego katalogu oraz ze wszystkich podkatalogów 😉 Dlatego jeśli puściłeś je w roocie, który zawierał S01 S02 etc – to pliki z tych podkatalogów również zostały przeformatowanie 😉

      Jeśli chodzi o playwright.config.ts – raczej też bym go uwzględniał przy formatowaniu – to jest również plik ts, w którym wprowadzamy zamiany w konfiguracji, dlatego osobiście też bym go uwzględniał 😉

      Krzysiek Kijas Krzysiek Kijas
      Odpowiedz

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *