前提

書籍URL
https://www.shoeisha.co.jp/book/detail/9784798172354

サンプルアプリリポジトリ
https://github.com/tsuemura/fastify-webapp-sample

サンプルアプリ
https://fastify-webapp-sample.takuyasuemura.dev/items

第1章

第2章

第３章

第4章：E2Eテストとは何か

E2E テストのアップサイド・ダウンサイド，想定される利用方法について解説している．
まだ座学の範囲ではあるものの，E2Eテストについての解像度が上がった．
すでにE2Eテストをお仕事で描いたことある人も改めて読み物として学びあると思う．^[1]

また，E2Eテストの価値と，時間・金銭的コストについても言及されているので，Bizサイドへの知見の章でもある．

ユースケースの数とE2Eテストの数が、正比例するのが最良だと考えます。（中略）ビジネスの成長とともにE2Eテストが順次増えていく形が理想的でしょう。

余談

• アイスクリームコーン は初めて知った．テストピラミッド の逆のパターン（もちろんバッドプラクティス）なのね．
• 個人的にはまず E2Eテストでななく，まずはユニットテスト（単体テスト）から自動テストを導入するケースのほうが多かったし，何ならE2Eテスト書いていないプロジェクトの方が多かった．

第5章：サンプルアプリケーションのセットアップ

架空のお弁当注文アプリ
環境は以下を想定

• エディタ（VSCode や IDE）
• git
• nodejs
• docker（docker-compose）
• github（cli も含む）

環境構築

それぞれの準備ができたら筆者のリポジトリをフォーク．インポートでも良いが，特にprivateにする理由もなし．EJS とか懐かしい！

フォークできたので，ローカルにクローン．あとは書籍にもあるが，リポジトリの README にも手順が書いてあるのでその通りに．^[1]自分は npm ではなく pnpm を使っているのでこっちで．無事にローカルでも起動できた．このあたりでコケると，その瞬間進めることへのハードルが格段に上がり，諦める人も少なくないと思うので，サクッと動くのはさすが 👏

デプロイ

デプロイ先は Railway　というサービス．昔は Heroku を使っていたが，やはり今は新しいサービスが生まれてるんだな．フロントエンドばかりやっているので，ホスティングだけあれば事足りるため，Vercel，Firebase Hosting，GitHub Pages を使ってきた自分としては，新しいもの使うのは新鮮だ．また，Railway はローカルでもセットアップを可能にするように，cli も提供されている．このあたり現代風だな．

⚠20240820時点 エラー発生⚠
実際にデプロイ試したが，書籍の画面キャプチャとはちょっと UI が異なるが，これは書籍あるあるで，執筆時と本が世に出るまでのラグでアップデートが入ったんだろう．各種環境変数もセットしたらデプロイはうまく行ったが，ブラウザからアクセスしたらエラーで見れず…

{
  "statusCode": 500,
  "code": "42P01",
  "error": "Internal Server Error",
  "message": "relation \"session\" does not exist"
}

筆者の方も補足済みで，対応待ち状態だが，取り急ぎの対処法も記載されていた．

※ちなみにデプロイ失敗しても問題なく，なんならデプロイしなくても良さそう．筆者のデプロイ環境に対してテストをすることも可能なので．

第6章：最小限のテストをデプロイする

本章から自動テストに入っていく．
最初に自動テストの機構を用意し，ミニマムに実装・テスト・デプロイすることの大事さは自分も何度も経験してきた．あとから導入するコストとリスクが大きいのよねぇ．自動テストがあることの安心感よ．

技術選定

自分の経験でいうと，最近のテスティングフレームワークの進化や，エコシステムの充実度から，大は小を兼ねる的な観点で技術選定をすることが多い気がする．大体僕らが想定するユースケースの機能や API を兼ね備えているものが増えた感触．とはいえ，ざっくりユニットテストとE2Eテストで使うライブラリは個別に選択して使っているけど．

本書では，帯にも書いてあった（はず）ように

• CodeceptJS （ワシこの子大好き）
• Playwright

を選定されている．クロスブラウザで言えば，TestCafe も選択肢としては有りだとは思う．あとは，名前はずっと知っていたが一度も触れたことなかった Karate も良さそう．BDD という考え方も興味深いし．

テストを書き始める

いざ本書の通りに進めたら，早速エラーが出た 😢

⚠20240821時点 エラー発生⚠

> npx codeceptjs init を叩いたところ，以下のエラーが発生し，smoke_test.js ファイルが生成されなかったので，手動で生成した．

Steps file created at ./steps_file.js
Config created at /path/to/repo/fastify-webapp-sample/e2e/codecept.conf.js
Directory for temporary output files created at './output'
Intellisense enabled in /path/to/repo/fastify-webapp-sample/e2e/jsconfig.json
Installing packages:
npm ERR! Cannot read properties of null (reading 'matches')

npm ERR! A complete log of this run can be found in: /Users/kiyohito.kuwahara/.npm/_logs/2024-08-21T08_48_31_202Z-debug-0.log
Error: npm install --save-dev --loglevel error failed

Please install next packages manually:
npm i  --save-dev

Things to do after missing packages installed:
☑ To get auto-completion support, please generate type definitions: npx codeceptjs def
☑ Create first test: npx codeceptjs gt
Find more information at https://codecept.io

続いて書籍通り記述し，テストを実行すると，そちらでもエラー．

> npx codeceptjs run

CodeceptJS v3.6.5 #StandWithUkraine
Using test root "/path/to/repo/fastify-webapp-sample/e2e"

スモークテスト --
  ✖ "before all" hook: codeceptjs.beforeSuite for "example.comにアクセスする" in 2ms
Error: browserType.launch: Executable doesn't exist at /Users/kiyohito.kuwahara/Library/Caches/ms-playwright/chromium-1129/chrome-mac/Chromium.app/Contents/MacOS/Chromium
╔═════════════════════════════════════════════════════════════════════════╗
║ Looks like Playwright Test or Playwright was just installed or updated. ║
║ Please run the following command to download new browsers:              ║
║                                                                         ║
║     npx playwright install                                              ║
║                                                                         ║
║ <3 Playwright Team                                                      ║
╚═════════════════════════════════════════════════════════════════════════╝

-- FAILURES:
（中略）

  FAIL  | 0 passed, 1 failed   // 4ms
Run with --verbose flag to see complete NodeJS stacktrace

playwright ライブラリそのものはインストール済みなんだが，初期化処理が別途必要そうなので，エラーメッセージ通り > npx playwright init を実行後，再度スモークテストを走らせたら無事完了 👌

インタラクティブシェル ありがたい．まさに，コードとブラウザを言ったり気たりするのがちょっと煩わしかったので 👏体験良き．
ステップ・バイ・ステップでテストを書き始める流れと CodeceptJS の便利さを合わせて説明されていて，これはわかりやすい．

レポート出力

こちらはエラーではないが，自分のローカル環境に Java が入ってなかったため，allure というライブラリが動かなかった．

➜  e2e git:(main) > npx allure-commandline serve
The operation couldn’t be completed. Unable to locate a Java Runtime.
Please visit http://www.java.com for information on installing Java.

公式サイトからインストールすればもちろん動作した👍こちらについても筆者の方がすでに補足済み

その他諸々

husky をインストールするのは良いが，今は husky install, husky add コマンドは使えないのか．ターミナルから言われた．

install command is DEPRECATED
add command is DEPRECATED

ちゅうわけで，シンプルに公式サイトを参考にこんな感じで設定した．

> echo "pnpm test:e2e" > .husky/pre-push

これでも通るようになったし，意図的にテストをコケさせるとちゃんとpushされないようにはなったが，そもそも allure レポートするようにしたら，ターミナル上に各テストシナリオが出力されなくなってしもたな…

余談

• 昔は Mocha とか，Jasmine とか，AAV とかを使ったり，ランナーに Karma を使ってたときもあったなぁ
• スモークテストの語源とか調べたことなかったので豆知識あざます！