PSSLの佐々木です。 E2Eテストは重要だとわかっていても、Playwrightのコードを書くのが面倒で後回しにしていませんか？ 本記事では、 Markdownファイルに日本語で操作手順を書くだけで、Playwrightが自動実行してくれるE2Eテストフレームワーク の作り方を、実際のプロダクション事例をもとに解説します。 この記事でわかること Markdownシナリオ駆動のE2Eテストの全体アーキテクチャ 自然言語ステップをPlaywrightアクションに変換する仕組み フォーム入力の多段フォールバッ

ども！最近Playwrightの話をいろんな文脈で聞くようになって、ちょっと混乱していた龍ちゃんです。 この記事を読むと: Playwright の3パッケージ（テストランナー / MCP / CLI）の使い分けがわかる コマンド3つで CLI が動くようになる chromium vs chrome のハマりポイントを踏まずに済む 「Playwright MCP」「Playwright CLI」「Playwright テスト」…全部Playwrightなんですけど、 それぞれ別パッケージで用途が違う んで

急成長を遂げるメガベンチャー企業のQAマネージャーにとって、組織の拡大は誇らしい反面、深刻な「品質管理の分断」という課題を突きつけてきます。 プロダクト数が増え、マイクロサービス化が進むなかで、チームごとにテスト方針や運用ルールがバラバラになり、全体像が見えないまま障害や手戻りが増えていく。 そんな状況に限界を感じている方は少なくないはずです。 個別最適の改善では、もはやスピードと品質を両立させることはできません。 今求められているのは、テスト管理ツールを軸としたAPI連携による「品質データの民主化」と「

ども！最近は仕様書×AIの文脈で図解まわりの検証をやってる龍ちゃんです。 Draw.io の開発元である jgraph 社が、公式の MCP サーバーを出しました。 jgraph/drawio-mcp リポジトリで Apache 2.0 ライセンスで公開されています。 コミュニティ実装の MCP サーバーはいくつかありましたが、公式となると話が変わってきます。draw.io 本体と同じ開発元が直接メンテしてくれるので、コミュニティ版よりも長くメンテされやすいんですよね。 MCP の基本的な仕組みについては

はじめに こんにちは。Musubi Insightチームでエンジニアをしている中村です。 Musubi Insightでは、SaaS型のE2Eテストツール mabl で14のテストを運用していましたが、認証の安定性やコード管理の面でいくつか課題がありました。 昨今のフロントエンド開発では Claude Code などのAIエージェントと Playwright MCP を組み合わせ、コード修正から動作確認までをPlaywrightベースで回すワークフローが選択肢として広がりつつあります。こうした背景もあり、

Mermaidの見た目、もうちょっとなんとかならんか ども！Mermaidで図を作るたびに「構造は最高なんだけど、見た目がなぁ…」と思ってた龍ちゃんです。 「 Claude CodeでMermaid図を作成する 」でMermaid図の自動生成について書きました。Mermaidはコードで構造を書けるから、フローチャートやシーケンス図がサクッと作れます。AIに「こういう図作って」って言えば一発で出てくるんですよね。 ただ、デフォルトのデザインがシンプルすぎるんですよね。設計書やブログに貼るにはちょっと素朴。

テキストベースの図、もっと表現力が欲しい ども！ PlantUML × VS Codeの記事 を書いた龍ちゃんです。 Claude Codeを使って爆速でPlantUMLを書けるようになりました。でも！実際に設計書やブログに貼るとなると「もうちょっと見た目をなんとかしたい」ってなるんですよね。図の横に設計ポイントを添えたり、色を揃えて見やすくしたり。 そこで今回は、PlantUMLの図にTailwind CSSの装飾を組み合わせます。1つのHTMLファイルにPlantUML図 + 注釈パネルをまとめて、P

PlantUMLもClaude Codeで書きたい ども！Claude Codeで仕様書を書く方法を模索している龍ちゃんです。 以前、 ClaudeでMermaid図作成を自動化する記事 を書きました。あの記事のおかげで図解作成がめちゃくちゃ楽になったんですが、しばらく使ってるうちに壁にぶつかりました。 アクティビティ図が作れない。ユースケース図も作れない。 PlantUMLなら作れる。確認はVS Code上のMarkdown Previewで完結する。今回はその設定方法と実践例を紹介します。 Merma

本ブログは、三菱電機株式会社 電力システム製作所 電力ICTセンター 小森様と、アマゾン ウェブ サービス ジャパン合同会社 ソリューションアーキテクト稲田、GitLab 合同会社 ソリューションアーキテクトの小松原様の共著です。三菱電機 電力ICTセンターにおける Kiro と GitLab を組み合わせたソフトウェア開発効率化の取り組みについてご紹介します。 電力ICTセンターについて 三菱電機 電力システム製作所 電力ICTセンターは、再生可能エネルギーの拡大や電力自由化に対応する電力×ICTの専門

「あの調査どこだっけ」で済む世界がほしかった ども！ドキュメントが70件を超えて検索がカオスになっている龍ちゃんです。 結論から言うと、ファイルパスを指定しなくても「あの調査どこだっけ」と話し言葉で聞くだけで、勝手に見つけてくれる仕組みを作りました。ファイルの作り方を工夫して、検索専用の Haiku サブエージェントを .claude/agents/ に置いただけ。今回はその仕組みの話です。 僕は Claude Code への指示を極力さぼりたい んですよね。ドキュメントのパスを毎回共有するようなことはし

Figmaの手作業から脱却したい ども！最近は図解の自動化にハマっている龍ちゃんです。 技術ブログの図解、みんなどうしてますか？ 僕は以前、Figmaで人力で図を作ってたんですよね。アーキテクチャ図とかフロー図とか、1つ作るのに結構な時間がかかる。ブログの本数が増えるほど、だんだん図を作るのが億劫になってきて。 で、 SVG図解自動生成 、 HTML図解自動生成 と試行錯誤を重ねてきました。過去記事を読んでなくても今回の記事だけで完結するので、安心してください。 やっていることはシンプルで、Claude

Claude CodeのSkillsがCopilotで発火しない・読み込まれない原因は発火メカニズムの違い。description強化、トークン予算、Instructionsルーティングで解決。 はじめに ども！GitHub Copilotが徐々に育ってきて、ニコニコな龍ちゃんです。1月後半から2月にかけてGitHub Copilot関連のブログが多めに出ています。ブログが出ているということは育っている証拠ですね。 今回は、前回紹介していた Agent Skills の話題です。「 網羅5種ブログ 」と「

はじめに こんにちは、株式会社 AI Shift でフロントエンドエンジニアをしている久保 (@he ...

5秒でわかる：この記事の内容 やったこと ： MCPを使って挫折した経験を共有 代替手段としてCLI + Skillsパターンを実践 トークン消費を 65%削減 しつつ、同等の機能を実現 得られるもの ： MCPが向いているケース/向いていないケースの判断基準 CLI + Skillsの具体的な実装例（html-screenshot、blog-scraper） 段階的アプローチ「最初はCLI、複雑になったらMCP」 対象読者 ： Claude Codeを使って開発している人 MCPを導入したけどイマイチだ

本ブログは株式会社 Works Human Intelligence 様と Amazon Web Services Japan 合同会社が共同で執筆しました。 Works Human Intelligence (以下、WHI) は「人に真価を。」をコーポレートブランドに掲げ、日本の大手企業および公共・公益法人向け統合型人事システム COMPANY の開発・販売・サポートの他、HR 関連サービスの提供を行っています。WHI は人事部門が定型業務ではなく戦略的な業務に取り組めるよう尽力しており、今回は AWS