katsulog - RPA関連のニッチな技術ブログ

StorybookのポータブルストーリーがPlaywright Component Testingにそのまま持ち込めるようになった：composeStoriesで「Storybookで書いた話とPlaywrightで書くテストが別物」を終わらせる

Storybookのcompose Storiesでストーリーがそのままplaywright component testingで動くようになった話。jsdomとブラウザ前提のテストの違い、composeStoriesの使い方、ResizeObserver/Canvas/WebGLなどブラウザAPI依存コンポーネントの使い分けまで解説します。

2026.08.16

Selenium・自動化

Playwrightで負荷テストはできるのか：ArtilleryのPlaywrightエンジンとk6の住み分け

「E2Eが書けたなら負荷テストもPlaywrightでいけるのでは」。1年目の頃、私も一度そう思いました。実際に試して分かった限界と、書いたE2Eシナリオを流用するArtillery、CIに常設するk6という2つの逃げ道を整理します。

2026.08.15

Selenium・自動化

Claude CodeのSkillsでPlaywrightを動かす：Planner/Generator/Healerと「自分の手順を覚えさせる」Skillは何が違うのか

MCPでブラウザをAIに触らせ、/playwright init-agentsでPlanner/Generator/Healerを知り、次にClaude CodeのSkillsに出会うと「結局どれを入れればいいのか」で迷います。MCP=口、Agents=役割分担、Skills=手順を覚えさせる箱、の3層で整理しました。

2026.08.14

Selenium・自動化

MCPサーバーは結局何を入れればいいのか：2026年の主要どころ一覧とPlaywright MCPとの位置づけ

Playwright MCPを入れてみて「MCPって便利」とわかった後に必ず来る疑問「他にどんなMCPがあるのか」に、2026年時点の主要サーバーと数字の裏取りをしたうえで答えます。filesystem・GitHub・Postgres・Slack・Notionの現在地と、Playwright MCPがその中でどこに位置するのかを整理しました。

2026.08.13

Selenium・自動化

Planner/Generator/Healerの次に来ているもの：Webアプリを5人がかりで診断するExplorer/Functional/Visual/API/Performanceという構成

PlaywrightのTest Agents（Planner/Generator/Healer）にようやく慣れてきた頃、2026年にはさらにその先を行く「探索・機能・見た目・API・性能の5役に分けて並列でWebアプリを診断する」構成が出てきています。何が違うのか、乗り換えるべきなのかを正直に整理します。

2026.08.12

Selenium・自動化

Playwrightのテストにパスワードをベタ書きしない：.env・storageState・CI secretsの使い分け

ログインテストで一番最初に詰まるのが認証情報の扱いです。page.fill('#password', 'hunter2')とベタ書きしてしまう前に、ローカルは.env・CIはsecretsに逃がす方法、毎回ログインし直さないstorageStateの使い方、そしてstorageState.jsonがCookieの入った鍵そのものだという話を、実際の手順とあわせて正直にまとめました。

2026.08.11

Selenium・自動化

Playwright 1.62でMCPサーバーが本体同梱に：npx playwright mcpだけで動くようになった話

Playwright 1.62でMCPサーバーとplaywright-cliが本体に同梱されました。npx playwright mcpだけで動くようになり、@playwright/mcpを別途インストールしてバージョンを手で合わせる手順はもう要りません。

2026.08.10

Selenium・自動化

【入門】PlaywrightをGitHub Actionsで自動実行する：ワークフローYAML・ブラウザキャッシュ・trace保存まで

手元でPlaywrightのテストが動くようになった次に来るのが「毎回自動で回したい」です。最小のワークフローYAMLから、ブラウザバイナリのキャッシュの罠、落ちた時にtraceとHTMLレポートを取り出すところまで、1年目でつまずきやすい順にまとめました。

2026.08.09

Selenium・自動化

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

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

2026.08.08

Selenium・自動化

Chrome拡張に組み込みAI（Gemini Nano）を積む：サーバーもAPIキーも要らないAI機能の足し方

Chrome拡張にAI機能を足したいがサーバーもAPIキー課金も用意したくない、という個人開発者向けに、ブラウザ同梱のGemini NanoをPrompt APIから呼び出す方法と要件・注意点をまとめました。

2026.08.07

個人開発

ruby + selenium webdriver の tips を中心に、自動化・スクレイピングの実践知を発信。

StorybookのポータブルストーリーがPlaywright Component Testingにそのまま持ち込めるようになった：composeStoriesで「Storybookで書いた話とPlaywrightで書くテストが別物」を終わらせる

Playwrightで負荷テストはできるのか：ArtilleryのPlaywrightエンジンとk6の住み分け

Claude CodeのSkillsでPlaywrightを動かす：Planner/Generator/Healerと「自分の手順を覚えさせる」Skillは何が違うのか

MCPサーバーは結局何を入れればいいのか：2026年の主要どころ一覧とPlaywright MCPとの位置づけ

Planner/Generator/Healerの次に来ているもの：Webアプリを5人がかりで診断するExplorer/Functional/Visual/API/Performanceという構成

Playwrightのテストにパスワードをベタ書きしない：.env・storageState・CI secretsの使い分け

Playwright 1.62でMCPサーバーが本体同梱に：npx playwright mcpだけで動くようになった話

【入門】PlaywrightをGitHub Actionsで自動実行する：ワークフローYAML・ブラウザキャッシュ・trace保存まで

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

Chrome拡張に組み込みAI（Gemini Nano）を積む：サーバーもAPIキーも要らないAI機能の足し方

ruby + selenium webdriver の tips を中心に、
自動化・スクレイピングの実践知を発信。