テストケースをコードで書かないE2Eテスト ── Claude CodeとPlaywright CLIで実現する自然言語テスト自動化 - ZOZO TECH BLOG
はじめに こんにちは、カート決済部カート決済サービスAブロックの道場です。ZOZOTOWN内のカート機能や決済機能の開発、保守運用を担当しています。 現在、ZOZOTOWNのカート決済画面はリプレイスが進行中です。既存システムとリプレイス後のシステムが並行して開発される中、既存システムへのさまざまな機能改修を、リプレイス側にも取り込む必要があります。その際、条件の組み合わせが膨大になるテストを手動で網羅的に実施することが現実的でなく、特に注文金額の計算結果の正確性を人間が1件ずつ確認するには大きなコストがかかっていました。 本記事では、Claude CodeとPlaywright CLIを組み合わせて、自然言語によるE2Eテストを自動化した仕組みをご紹介します。Confluence（Atlassian社が提供するナレッジ共有ツール）に自然言語でテスト手順を記述することでAIが自律的にブラウ
Playwright + OWASP ZAP + Claude Code で E2E テストから脆弱性診断まで一気通貫でできるかやってみた
はじめに 最近、他チームのエンジニアが「Playwright で書いた E2E テストを OWASP ZAP に通して脆弱性診断をやってみた」という話を聞きました。 「E2E のシナリオってそのまま脆弱性診断にも使えるの？」 気になったので自分でも試してみました。その記録です。 やったこと（全体像） シンプルな Todo アプリを題材に、以下の流れで試しました。 1. Next.js で Todo アプリを構築 2. Playwright で E2E テスト（12シナリオ）を作成 3. バックエンドを FastAPI + MySQL に変更（Docker） 4. E2E シナリオを ZAP プロキシ経由で実行 → 脆弱性診断
I'm Building Agents That Run While I Sleep
I'm Building Agents That Run While I Sleep I Have No Idea If What They Ship Is Any Good I've been building agents that write code while I sleep. Tools like Gastown run for hours without me watching. Changes land in branches I haven't read. A few weeks ago I realized I had no reliable way to know if any of it was correct: whether it actually does what I said it should do. I've run Claude Code works
Playwright CLIとClaude Code Skillsで効率的なブラウザテストを実現する
はじめに Playwright MCPを使いブラウザテストのシナリオについて実装しておりましたがMCP経由だとツール定義のロード等でコンテキストが約8%増加するという以下の記事を受けて 自分でもPlaywright CLIとClaude CodeのSkills（カスタムコマンド） を組み合わせることでコンテキストを抑えつつブラウザ自動化を行うことをやってみようとおもいました。 Playwright CLIとは Playwright MCPリポジトリから、v0.0.58（2026/1/24）で追加されたトークン効率的なCLIモードです。 リリースノートでは以下のように紹介されています We are adding a new token-efficient CLI mode of operation to Playwright. This brings the long-awaited off
個人開発でClaudeCodeに画面操作付きPR動画を生成させてXに自動投稿してる話 - Qiita
実際の投稿例 このパイプラインで自動生成・自動投稿されたXの投稿がこちらです。 https://x.com/aiteacher37681/status/2026187321477931407?s=20 生成手順 PlanモードでClaude Codeに「Remotion + Playwrightで〇〇機能のPR動画作成」を依頼 生成された台本を確認 問題なければPR動画の生成を依頼 生成後の品質確認 気になる点があれば指摘・修正依頼 問題なければpush → GitHub Actionsが台本の内容を読み取り、PR動画を添付してXに自動投稿 人間がやるのは台本と動画の品質チェックだけで、それ以外はすべて自動化されています。将来的にはクオリティが担保できるようになれば、新機能追加の時点で台本確認すら不要な完全自動化を目指しています。 きっかけ 個人開発で教員向けAI校務支援サービスを作ってい
Claude CodeとPlaywright MCPで実現する対話型UI自動テスト構築 | DevelopersIO
はじめに UIテストを書くとき、 「セレクタを探す → 失敗する → ブラウザを見直す」 という往復に時間を取られていませんか？ 本記事では、Claude Code と Playwright MCP を組み合わせて、 実際のブラウザ操作を確認しながら対話的にUIテストを構築する方法を紹介します。 テストコードをあとから書くのではなく、 確認作業そのものをテスト生成につなげる のがこの方法の良いところです。 本記事は、Claude CodeとPlaywrightを利用したことがある方向けに書いています。 各サービスについて詳しく知りたい方は、こちらをご覧ください。 Claude CodeとPlaywrightの参考ブログ 動画で動きを紹介 モバイル表示時のハンバーガーメニューのテストを対話的に作成している例です。 こんなことができます。 生成したテストコードの詳細 この記事で作成したテストコ
フルVibe Codingでも仕事が進むようになってきた2025年
（フルVibe Codingできたとは言ってない） ご無沙汰しております。 今年の後半から大学の講師(情報学部)もするようになって、すっかり時間がなくなっていたkazuphです。 基本的にすべての仕事が副業みたいになった昨今、細切れの中でなんとしても進捗を出す必要があり模索してきました。私は15年程度エンジニアをやっていますが、Claudeの性能が上がってからはコードを読むのをほぼやめています（自分が得意で好きな部分だけ見ますが）。 特に今年傾倒したのがPlanモードや仕様駆動開発（SDD）です。 Claude CodeのAgentに対応したSDDは神がかっており、こっちは要件を言うだけでどんどん別のagentがフェーズごとに立ち上がってアウトプットを出してくれます。Agentの文言を改変して、作成した仕様やtasks等を実行する前に自動でCodexにレビューさせたりすると更に威力が高まり
Claude Skills でエージェントに専門的なタスクを実行させる
Claude Skills は Claude が特定のタスクを実行するためのカスタムスキルを作成・共有できる新しい機能です。この記事では、Claude Skills の仕組みと作成方法、MCP ツールとの違いについて解説します。 Claude ではスプレッドシートやスライドを作成するためにスキルと呼ばれる機能を利用します。例えば「以下のマークダウンを元にスライドを作成してください」という指示を与えると、pptx スキル・html2pptx.md ファイルを読み込みスライドの作成方法を確認したうえで、アーティファクトとして pptx ファイルを生成します。 このスキルではスライドの元になる HTML ファイルを作成し、PptxGenJS ライブラリを使用して pptx ファイルを生成する JavaScript コードをサンドボックス内で実行している様子が確認できます。 2025/10/17
Playwright Agents によるテストの自動生成を試してみた
Playwright Agents のセットアップ Playwright Agents は Playwright v1.56 以降で利用可能です。以下のコマンドで Playwright のエージェントの定義を追加します。--loop オプションは使用している AI エージェントの種類に応じて変更してください。 npx playwright init-agents --loop=claude コマンドを実行すると以下のファイルが生成されます。 .claude/agents/playwright-test-generator.md: Claude Code の SubAgents として Playwright Generator エージェントを定義 .claude/agents/playwright-test-healer.md .claude/agents/playwright-test-p
Chrome DevTools MCPでWeb開発のチェックを自動化！Playwright MCPとの違いは？ - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? こんにちは、とまだです。 フロントエンド開発でコンソールエラーをいちいちコピーしたり、スクリーンショットを撮ってAIに渡したりするの、地味に面倒ですよね。 実は私も、ローカル環境でのテストでエラーが出るたびに、DevToolsを開いてエラーメッセージをコピーして、Claude Codeに貼り付けて...という作業を繰り返していました。 そこで以前ご紹介したPlaywright MCPでかなり楽になったのですが、さらに便利なツールが登場しました。 結論から言いますと、Chromeだけを対象にしたウェブ開発であれば、Chrome DevTo
Claude Code: A Highly Agentic Coding Assistant
💻 Accessing Utils File and Helper Functions In each notebook on the top menu: 1: Click on "File" 2: Then, click on "Open" You will be able to see all the notebook files for the lesson, including any helper functions used in the notebook on the left sidebar. See the following image for the steps above. 🔄 Reset User Workspace If you need to reset your workspace to its original state, follo
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://x.com/i/status/2037520290474025416