QR Send

スマホとPCのChrome間で、URLやテキストをQRコード1回のペアリングで送り合える自作Chrome拡張。アカウント不要・無料。

使ってみる →

テスト自動化

テスト自動化

「テストは通るけど遅い」を可視化する:PlaywrightのSpeedboardとタイムラインで原因を突き止める

全部緑なのにCIが終わらない。そんな時に頼りになるのが、HTMLレポートのSpeedboardタブとタイムラインです。どのテストが遅いか、そのテストのどこで時間を使っているかを、コードを1行も足さずに見られる仕組みを試しました。
テスト自動化

toBeTruthyを卒業する:Playwrightのexpectで意味のあるマッチャーを選ぶ

とりあえずtoBeTruthy()で通していませんか。web-firstマッチャーへの乗り換えと、expect.extendで自作マッチャーを作る一歩目をまとめました。
AI活用

AIにPlaywrightテストを書かせると実際いくらかかるのか:MCP経由とCLI経由でトークンが4倍違うという話

「AIに任せれば無料でしょ」と言われがちですが、実際はモデルのトークン代がかかっています。MCP経由とCLI経由でトークン消費が約4倍違うという2026年の複数の記事を照らし合わせて調べました。
テスト自動化

テストが落ちた時、ブラウザUIを開かずCLIだけで追う:npx playwright traceとVideo Receipts

トレースビューアを毎回開くのが面倒。AIエージェントに直させた結果を人間がどう検証するか。npx playwright traceのopen/merge/infoと、動画で証跡を残すVideo Receiptsを試しました。
AI活用

AIにテストを書かせる:codegenの録画をgetByRole/getByLabelへ書き換えてもらう(Generator)

playwright codegenで録画したテストがCSSセレクタだらけで壊れやすい、という悩みをAIエージェント(Generator)に書き換えさせる方法をまとめました。codegen自体もrole系ロケータを優先しますが、実際のアプリでは限界があります。その先をAIにどう任せるか、実例のコードとともに正直に書いています。
AI活用

AIが生成したPlaywrightテスト、そのまま信じていい?レビューの落とし穴

Playwright MCPやAIエージェントに書かせたテストは、パスしたからといって中身が正しいとは限りません。弱いアサーション・幻覚セレクタ・ハードコード待機・テスト名と中身の不一致という4つの落とし穴を、悪い例と直した例のコードで具体的にまとめました。
AI活用

自己修復(Healer)を試す:壊れたテストをAIが直す

ロケータが変わるたびにテストが赤くなる。Playwrightの公式テストエージェント「Healer」を使うと、失敗したテストの修復案をAIが提案してくれます。仕組みと使い方、そして任せてはいけない部分を実演しながら整理しました。
AI活用

【初心者向け】Playwright MCP入門:AIにブラウザを触らせてテストを書いてもらう

Playwrightのテストコードを自分で書き続けるのではなく、AIにブラウザを触らせながら書いてもらう「Playwright MCP」を実際に手元で動かしてみた入門記事です。MCPの仕組み、なぜスクリーンショットではなくアクセシビリティツリーを見るのか、手元での立ち上げ方、できること・まだ苦手なことを正直にまとめました。
テスト自動化

Playwright の expect マッチャー完全リファレンス【初心者向け・保存版】

Playwright(TypeScript)のexpectで使えるアサーション(マッチャー)を全部まとめた保存版リファレンスです。「この場面ではどれを使えばいいか」が早見表と具体例ですぐ分かるように、LocatorAssertions・PageAssertions・APIResponseAssertions・汎用マッチャー・修飾子までを網羅しました。
テスト自動化

Seleniumでselect・日付ピッカーを確実に操作する:Selectクラスとカレンダー操作、選択後の検証

Seleniumのselect要素はSupport::Selectで、JS描画のカスタムドロップダウンや日付ピッカーはクリック操作で、選択後は値を検証する、という確実な操作方法をRubyで解説します。