「Playwright本出版記念！Node学園 43時限目」に参加してきました

勉強会メモ

リーダブルなE2Eテストコードのための3つのC

本の紹介

  • テストをなぜ書くのかみたいな内容
  • CodeceptJSでサンプルを作ってる
    • Playwrightなどをラップして単一のAPIを提供するライブラリ
    • I ckick xxxみたいな書き方

E2Eテストの認知負荷

  • 認知負荷
    • コードを読む妨げになること
  • E2Eテストでの認知負荷
    • 今どのページにいるのか
    • どのユーザか
    • どんな操作をしてるのか
    • 何も考えずに作ると手続き的になりがち
    • コメントに頼らずに何をしようとしてるかわかるといい
  • 3つのC
    • Context
      • 状況を表現する
        • どこにいる
        • だれなのか
    • Capability
      • 何が出来るべきか
        • フォームの入力内容の整備などまとめてやっておく
    • Component
      • ページ内のかたまりをコンポーネント化する
        • 目当ての要素を探索しやすく
      • どんな操作をしようとしてるのか

［入門］Webフロントエンド E2E テスト執筆の裏側

  • 渋川よしきさん

執筆の裏側

  • きっかけ
    • 執筆メンバーの一人がCypressの技術ブログ書いたりしてた
    • SoftwareDesignで連載
    • 書籍執筆スタート
    • Cypressで進めてたがPlaywrightは流行ってきたのでテーマを移した
  • なぜCypressやPlaywrightにはまったか
    • ユニットテストだけで全てをカバーするのは難しい
    • E2Eが便利
      • どこで落ちたかとかどんな操作がされたかなど見れる
      • スナップショットとってくれたり
      • どんな通信がされたかも見られる

書籍の紹介

  • テストの価値を説明したような章もある
    • 社内で誰かを説得するような時に使える内容
  • 今のE2Eで足りてないパーツ
    • DBの初期化
      • E2Eでは毎回初期化しないといけない
      • Playwrightではセットアップの手段がHTTPリクエストくらいしかない

最新のPlaywright

  • 毎月バージョンが上がってる
  • 1.43.0
    • クッキー削除API
    • タグ情報をテストの中で取得できるようになった
    • iframeの中のロケーターが取得できるようになった
  • 1.44.0
    • a11y関連のマッチャーが追加
      • アクセシブルネームのチェックとか
    • fetchのmultipartでFormDataを渡せるようになった
    • --last-faild で前回失敗したテストだけ再実行できる
  • 1.45.0
    • ClockAPIで時間を固定できるようになった

パネルトーク

  • テストはどこまで複雑に書くか
    • 過去事例では一筆書きで一通り機能をさわった
    • ユニットテストと使い分けするといい
      • 細かいバリデーションのパターンはそっちで
    • 全画面作り込んだことあった
      • 実行時間がとても長い
      • しかもテスト壊れやすくてメンテ大変
      • 一度破綻すると次やろうと思えなくなる
    • 最初は軽量に始めて育てていくといいかも
    • 一筆書きで最初書いても分割していくといいかも
    • インフラの状況や生成AIの活用で課題感は解決される未来も
  • VRTとE2Eの使い分け
    • E2Eやってるなかでキャプチャとっていく？
      • でもキャプチャ取る場面が違うのでVRT用でまたテスト書く？
    • スナップショットテストで事足りるならそれでいいのでは
      • CSSのテキストが変わってなければUIも壊れてないはず

E2Eテストがない？！pino型テストピラミッドの現状

  • dk-tanioさん

テストピラミッド

  • E2Eがないパターン
    • pinoみたいな形
  • E2Eなくてもある程度担保できる状況はある
    • 技術が進化してきているので負担かけすぎずにテストを作れるようにもなってきてる

strip types と storage について

Nodeの新しい機能

  • strip types
    • 22.6.0から
    • ソースコードから型を引き抜く機能
    • TSをJSに変換して実行できる
    • 型を取り除くだけなのでそれ以外のTSの機能はダメ
    • 型チェックもしてくれない
      • DenoとかBunも一応同じ？
    • tsconfigサポートされてない
      • import時の拡張子周り動かないとか
  • storage
    • 22.4.0から
    • local storage/session storage/sqlite
    • ブラウザで書くコードと同じコードで動く
    • データはsqliteに置かれる
    • 同期で保存されるのでイマイチ
      • ブロッキングなAPI増えてほしくない
      • asyncならまだわかる
      • AsyncStorageというのもすでにある(ファイル保存はできないけど)
    • sessionStorageはただのグローバル変数になる
    • なんかあった時のエスケープハッチ的に使うくらいになりそう
  • まだexperimentalで使ってみて評価するフェーズ

Playwright + reg-suitを使ってみた

  • FUJITO SHIONさん

VRT

  • reg-suit
    • VRTのためのライブラリ
  • テストの流れ