https://0fuzimaru0.dev/posts/ Recent content in Posts on 0fuzimaru0 Blog Hugo ja Sat, 18 Apr 2026 17:41:42 +0900 https://0fuzimaru0.dev/posts/create-e2e-test-for-web/ Sat, 18 Apr 2026 17:41:42 +0900 https://0fuzimaru0.dev/posts/create-e2e-test-for-web/ <h1 id="使うもの">使うもの</h1> <ul> <li><code>playwright</code></li> <li><code>biome</code>（リンター兼フォーマッター）</li> <li><code>tsgo</code>（型チェック）</li> <li><code>valibot</code>（スキーマ）</li> </ul> <h1 id="手順">手順</h1> <ol> <li> <p>環境のセットアップ 環境構築は割愛</p> </li> <li> <p>Playwrightで操作の録画を行う <code>playwright codegen</code>で録画環境を起動し、1シナリオ分のテスト動作を録画する 録画中に行った動作はPlaywrightコードとして生成されているのでこれを下書きにする</p> </li> <li> <p>録画結果の修正 余分な動作や不安定そうなセレクターの手動修正を行う 複雑なセレクターが多い場合にはフロントの実装にdatatest-idを付与することも検討</p> </li> <li> <p>ひたすら実行 目標となる動きが完成するまでひたすら try &amp; error この時の失敗とその解消方法はClaudeでまとめさせてskillsとして保存しておく</p> </li> <li> <p>他のシナリオにも着手 2と3の操作をシナリオの数分行う。 4の作業に入るまえに5で作成したskillsを走らせておく</p> </li> <li> <p>コードベースを綺麗にする</p> </li> </ol> <ul> <li>テストデータや期待値のObjectに対して型を宣言し、静的型付けを進める</li> <li>decribeとtestを正しく使い分けを行う</li> <li>共通のヘルパー関数への切り出し</li> <li>fixtureの整理</li> </ul> <ol start="7"> <li>長期的な運用に耐えうるかチェック</li> </ol> <ul> <li>新規のテストが追加しやすいか</li> <li>何度か実行してフレーキーテストになっていないか</li> <li>待機ステップの見直し（極力「1秒待機」などの待機ステップは避ける）</li> </ul> https://0fuzimaru0.dev/posts/first-post-test/ Thu, 16 Apr 2026 02:48:06 +0900 https://0fuzimaru0.dev/posts/first-post-test/ <h1 id="test-post">test post</h1> <div class="highlight"><pre tabindex="0" style="color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-ts" data-lang="ts"><span style="display:flex;"><span><span style="color:#66d9ef">import</span> { <span style="color:#a6e22e">test</span> } <span style="color:#66d9ef">from</span> <span style="color:#e6db74">&#34;test&#34;</span> </span></span></code></pre></div>