Start projektu z Playwright i TypeScript

Tworzenie projektu TypeScript

Playwright to framework do testów e2e wspierany przez Microsoft. Założenie jest takie, że ma być niezależnym i utrzymywanym przez społeczeństwo narzędziem, oferującym te same funkcjonalności dla wszystkich popularnych silników przeglądarek.

Wymagania:

• VSCode
• NodeJS 18+

sudo apt update
sudo apt install nodejs

Stwórz projekt:

npm init

W rezultacie utworzony został plik package.json zawierający wszystkie wprowadzone przez Ciebie informacje.

Projekt Playwright

Playwright'a możesz zainstalować przy pomocy polecenia npm init playwright@latest. Dzięki temu wszystko będzie przebiegać automatycznie.

Jeżeli chcesz zrobić toręcznie, możesz zainstalować przeglądarki oraz zależności niezbędne do testowania poleceniami:

npx playwright install-deps
npm install -D @playwright/test

Dbanie o jakość kodu

Następne kroki nie są obowiązkowe, ale zaczynając pracę nad nowym projektem, zwłaszcza pracując w zespole, warto zainstalować narzędzia pomagające utrzymać odpowiednią jakość kodu. Najpopularniejszymi są: Eslint, Prettier i Husky.

• Eslint to linter dla języka JavaScript, który zmusza użytkownika do przestrzegania narzuconych zasad pisania kodu.
• Prettier to narzędzie do automatycznego formatowania kodu.
• Husky pozwala na automatyczne uruchamianie skryptów podczas tworzenia commita, dzięki czemu Eslint i Prettier będą się uruchamiały przed dodaniem kodu do repozytorium.

Eslint

Zainstaluj Eslint:

npm install eslint --save-dev

Skonfiguruj go:

npm init @eslint/config

Stwórz plik eslintrc.json.

{
  "overrides": [],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module"
  },
  "plugins": ["@typescript-eslint"],
  "rules": {
    "semi": [2, "always"],
    "@typescript-eslint/ban-ts-comment": "off"
  }
}

Prettier

Zainstaluj Prettier.

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

Skonfigurujesz go tworząc plilk .prettierrc, a w nim:

{
  "bracketSpacing": true,
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,`
  "endOfLine": "lf"
}

Możesz powiedzieć Prettierowi, których plików nie powinien sprawdzać przy pomocy pliku .prettierignore:

package.json
package-lock.json
yarn.lock
dist
node_modules

Prettier + Eslint

Skonfiguruj Prettiera z Eslintem:

npm install --save-dev eslint-config-prettier

W pliku .eslintr.json dodaj linijkę:

"extends": ["prettier"]

Dzięki czemu wygląda on tak:

{
  "extends": ["prettier"],
  "overrides": [],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module"
  },
  "plugins": ["@typescript-eslint"],
  "rules": {
    "semi": [2, "always"],
    "@typescript-eslint/ban-ts-comment": "off"
  }
}

Dodaj odpowiednie skrypty w package.json:

"scripts": {
                ... // other scripts you have
        "lint": "eslint . --fix --max-warnings=0"
        "format": "prettier . --write"
    },

Husky

Husky to narzędzie, które pozwala nam pracować z hookami gita, dzięki czemu podczas tworzenia commita sprawdzi on składnię kodu oraz odpowiednio sformatuje co się da.

Konfigurowanie Huskiego możę być wyzwaniem, ale instalujac narzędzie lint-staged możesz pominąć kilka kroków.

npx mrm@2 lint-staged

W twoim projekcie powstanie katalog o nazwie husky, a w nim plik pre-commit z npx lint-staged.

Oznacza to, że podczas tworzenia commita Husky uruchomi skrypt lint-staged z pliku package.json. Otwierając go powinieneś tam znaleźć linijkę:

"lint-staged": {
"**/*": "prettier --write --ignore-unknown --no-stash"
},

Pierwszy commit

Pora na testowy commit.

Warto wiedzieć, że VSCode ma dostępne wtyczki do Eslinta i Prettiera, które również będą korzystać z twojej konfiguracji.

Dla porównania, użyty kod znajdziesz w repozytorium, a cały proces pokazałem na filmie.