こんにちは、株式会社FP16で結構コードを書いている二宮です。 最近Webスクレイピングのコードを色々な方法で書いているので、そこで得た知見をここに残しておこうと思います。 ほぼ毎日なにかのWebスクレイピングコードを書いています。 Webスクレイピング手段 Webスクレイピングには色々な方法があります。 私が最近主に使っているのはこの5つの手段です。 cheerioでHTMLを解析 Playwrightなどで要素指定でデータを取得する APIを見つけて叩く（バックエンドとの通信を再現してデータを取得） LLMでサイト構造を解析してデータを取得する Next.jsからのレスポンスに含まれているデータを解析して取得する これが令和のWebスクレイピングのベストプラクティスだと思っています。 これらの方法を、目標に合わせて使い分けています。 使い分け方 CheerioでHTML解析 JavaS
自分だけの小さなSelenium「Olenium」を作って始める、ブラウザ自動化技術の理論と実践
Kaigi on Rails 2022の登壇資料です！ https://kaigionrails.org/2022/talks/ikumatdkr/
概要 こんにちは、booostのバックエンドエンジニアのma_meです。 今回はこちらの記事から着想を得て、個人開発で AI、DevTools Recorder、playwright-cli の３ツールを組み合わせてe2eテストを書いてみたところ、作成とメンテナンスが楽になる手応えを感じましたので、その方法を紹介します。 全体の流れ ① ブラウザで操作を録画（Chrome DevTools Recorder） ↓ ② 録画JSONをCodexないしClaude Codeに渡す ↓ ③ AIがJSONを読み取り、Playwrightテストコードに変換 ↓ ④ 必要に応じてplaywright-cliで画面のスナップショットを取り、セレクタを補正させる ↓ ⑤ テストファイルが完成 では実際にやっていきましょう。 Step 1: ブラウザ操作を録画する Chrome DevToolsの「Rec
Agents | Playwright
Introduction Playwright comes with three Playwright Test Agents out of the box: 🎭 planner, 🎭 generator and 🎭 healer. These agents can be used independently, sequentially, or as the chained calls in the agentic loop. Using them sequentially will produce test coverage for your product. 🎭 planner explores the app and produces a Markdown test plan 🎭 generator transforms the Markdown plan into th
どうもこんにちは、Claude Codeで遊び始めて2週間くらいが立ちましたがまだまだ模索中です 最近覚えた新しいテクニックが playwright-mcp(https://github.com/microsoft/playwright-mcp) を使ってブラウザ操作を全てclaude code経由でやるというものです playwrightはpuppeteerと同じく、chromeなどのブラウザをjsで操作するやつなのですが、puppeteerよりも使い勝手が良い&更新が超高頻度なのでよく使っています ※ただし、mcpサーバーのplaywrightは本家と比べると機能がイマイチなのでそこは発展を待ちましょう さて、mcpサーバーをclaudeに追加する設定ですが、claude自身に質問すると大嘘をつくので（ここらへんしんどさ感じますよね）原典を当たる必要があります mcpの追加 具体的には
ブラウザ自動操作API入門: WebDriver APIとChrome DevTools Protocol(CDP)
ウェブブラウザを自動操作する際には、WebDriverやChrome DevTools Protocol (CDP) などのAPIが広く利用されています。 これらのAPIを基盤に構築された様々なブラウザ自動操作フレームワークが、テスト自動化の分野で重要な役割を果たしています。 例えば、SeleniumやPlaywrightといったフレームワークを利用して、テストの自動化に取り組まれている方もいらっしゃると思います。 私もテスト自動化フレームワークの便利さを享受する一方で、フレームワークを介さずにブラウザを自動操作する方法についての興味がわいてきました。 そこで、この記事ではWebDriverやCDPが提供するAPIを直接利用してブラウザを操作する方法を基礎から探求してみることにしました。 これにより、私たちが普段利用しているフレームワークの背後にある原理を理解し、より深い知見を得ることを目
Playwright MCPとCursorで、E2Eテストを自動生成してみた 〜AI×ブラウザ操作の新アプローチ〜
概要 playwright-mcpとCursorを活用し、E2Eテストをゼロから自動生成してみました。 本記事ではその検証プロセスと得られた知見を紹介します。 この記事で分かること Playwright MCPでE2Eテストを自動生成する方法 Playwright MCPの活用のヒント はじめに 昨今のMCPブームは収まることを知らず、日々新しいMCP Serverが公開されています。 そんな中、自動化テストツールとして有名なPlaywrightのMCP Serverが公開されました。 Playwrightには、既にユーザーがブラウザを操作しテストを生成できる非常に便利な機能がありますが、今回はそれを超えるために、ユーザーの代わりにCursor（MCP Client）を使用し、ブラウザの自動操作とE2Eテストの自動生成を行えるのかを検証しました。 検証環境 Cursor: claude-s
マイクロソフト、Webアプリのテスト自動化サービス「Microsoft Playwright Testing」プレビュー公開。クロスブラウザ／クロスプラットフォームのテストを並列実行
マイクロソフトは、Webアプリケーションのテスト自動化ライブラリ「Playwright」を用いた、Microsoft Azure上のテスト自動化サービス「Microsoft Playwright Testing」のプレビュー公開を発表しました。 Microsoft Playwright Testingに使われている「Playwright」は、マイクロソフトが中心となってオープンソースで開発しているWebアプリケーション向けテスト自動化ライブラリです。対応環境が幅広く柔軟で、精度の高いテストを特長としています。 具体的には、Chrome、Edge、Firefox、Safariの主要なWebブラウザのすべてを対象にしたテスト自動化が可能で、ヘッドレス、ヘッドありのいずれにも対応。モバイルエミュレーションを用いたAndroid版Google ChromeとMobile Safariのテストも、実
テスト自動化フレームワーク「Playwright」にAIエージェント機能。自動的にテスト計画とテストコードの生成、テストコードのデバッグなど
テスト自動化フレームワーク「Playwright」にAIエージェント機能。自動的にテスト計画とテストコードの生成、テストコードのデバッグなど マイクロソフトが主導して開発しているオープンソースのテスト自動化フレームワーク「Playwright」の新バージョン「Playwright 1.56」がリリースされました。 Playwrightはデスクトップ向けのWebアプリケーションやモバイル向けのWebアプリケーションのテスト自動化が可能で、Chromium、WebKit、Firefoxなどの主要なモダンブラウザのエンジンのヘッドレス、ヘッドありのいずれの環境でも実行可能です。 OSはWindows、macOS、Linuxをサポートします。 テストはJavaScript、TypeScript、Java、Python、C＃などで記述でき、ローカル環境での実行だけでなく、CI（継続的統合）環境での実
はじめに 年末年始でPlaywright MCPを触り直しています。きっかけは、MCPがLinux Foundation傘下のAgentic AI Foundationに移管されたというニュースでした。GitHub Starsは23,000を超え、2024年11月のMCP発表からわずか1年。最初は「また新しいツールか」程度に思っていたのですが、触っているうちに、これまで経験してきたブラウザ自動化とは何か違うと感じ始めました。 その違和感を年末年始で整理してみた結果、自分なりに言語化できたのが「Webページの表現方法」の変化という視点です。 PlaywrightとPlaywright MCPは別物である 最初に混乱したポイントを共有します。 PlaywrightとPlaywright MCPは、関連はあるものの根本的に異なるものです。自分は「PlaywrightのMCP対応版」くらいに思って
マイクロソフト、Webアプリテストの自動化サービス「Microsoft Playwright Testing」プレビューを開始
マイクロソフト、Webアプリテストの自動化サービス「Microsoft Playwright Testing」プレビューを開始 マイクロソフトは、Webアプリケーションのテスト自動化フレームワーク「Playwright」を用いた、Microsoft Azure上のテスト自動化サービス「Microsoft Playwright Testing」のプライベートプレビューを開始すると発表しました。 テスト自動化フレームワーク「Playwright」 Playwrightは、マイクロソフトが中心となって開発しているオープンソースのWebアプリケーション向けテスト自動化フレームワークです。 実行環境、対象ブラウザ、対応言語が幅広く、テスト実行時にはWebブラウザの動作を自動的に待つ機能を備えるなど、柔軟で精度の高いテスト自動化が実現できる点を特長としています。 具体的には、デスクトップ向けのWebア
ナレッジワークでは、お客様に安定したサービスを提供するため、E2Eテストを活用した品質保証に取り組んでいます。ただし、E2Eテストの開発・保守には多くの時間と労力が必要で、正直なところ手間だと感じる場面も少なくありません。本記事では、そうした課題を Playwright MCP を活用して解消した取り組みをご紹介します。 ※ Playwright MCP は Playwright をAIエージェントなどから実行し、ブラウザ操作を行えるようにする MCP（Model Context Provider）です 課題 主に次の3点に課題がありました。 ロケーターの記述に手間がかかる テストケースの記述に手間がかかる テストのデバッグに時間がかかる それぞれ具体的に説明します。 ロケーターの記述に手間がかかる E2Eテストでは、ページ上で行いたい操作に必要なボタンやインプットなどのロケーター（セレク
Figma + Storybook + PlaywrightのMCPを使ったフロントエンド開発
2022ランキング圏外から2023ランキング入りを実現したテックブログ運営について / 2023-07-28-QiitaEngineerFesta
これは はてなエンジニア Advent Calendar 2025 2 日目の記事です。 年の瀬なので振り返りたくなる季節ですね。 今年も AI の話題が非常に多く、コーディングエージェントの普及を始めいろんな変化がありました。新しいモデル、高まる精度、飛び交うビッグマネー、跳ね回る驚き達。そういう景気の良い話はさておき、既存の技術が新しい文脈で再注目されたり、思わぬ用途で広く使われるようになったりすることも起きています。 今日はそんな「以前から存在していたけど AI によって新しい価値を見出された技術やツールを語ろう」のコーナーです。 いくぞ!! Server-Sent Events (SSE) まず出世頭として思いつくのは Server-Sent Events でしょう。 Server-sent events - Web API | MDN 今やチャット AI のレスポンスはほとんど
はじめに 乗り遅れましたが巷ではMCPが流行っていたので、気になっていたPlaywright MCPを使ってみたいと思います。 今回は、AIが画面操作を出来るならUXも評価してくれるのでは？という思い付きを試してみました。 1. MCPとは？ MCPは、Model Context Protocolの略称です。 Protocolとある通り、「AI」と「サービスやリソース」を繋ぐ、共通規格です。 従来の悩み 従来は、AIと他サービスやリソースを連携させる際、それぞれの接続先ごとに個別の実装が必要となり、開発者に大きな負担がかかっていました。 下記ではAIエージェントが利用できるように「ブラウザ操作」「画像生成」など個別に実装する必要があります。 MCPが解決すること 「AI」と「サービスやリソース」を繋ぐ部分を共通規格化することで、開発の負担が減り、手軽にAIとサービス・リソースを接続できるよ
ObsidianをLLM時代のナレッジベースに！ クリッピング→Markdown→CLI連携の実践
2025 年 7 月 20 日に開催された「Obsidian 初学者 勉強会」LT登壇資料 https://currypurin-dojo.connpass.com/event/362610/ https://gist.github.com/srvhat09/659188b9533a566ed8…
Playwright CLI v0.1.8 で普段使いの Chrome にそのまま attach できるようになりました | DevelopersIO
どうも！オペ部の西村祐二です！ Playwright CLI v0.1.8 が 2026-04-14 にリリースされました。今回、 playwright-cli attach --cdp=chrome で普段使っているローカルの Chrome / Edge にそのまま接続できるようになった点です。これまでのようにサンドボックス化された別ブラウザを起動する必要がなく、既存のログイン状態や拡張機能を持った Chrome をそのままエージェントや CLI から操作できます。 何がリリースされたか 概要: attach --cdp=<channel> でローカル起動済みの Chrome / Edge へ接続する Remote debugging mode が追加されました。あわせて CLI 終了後に残る Chrome プロセスの解消と、MCP server registry のクリーンアップ修正も
ログイン済みの Chrome をそのまま Claude Code から操作する — playwright-cli attach
はじめに Claude Code でブラウザを操作するとき、地味につらいことが3つありました。 MCP の設定が面倒。playwright MCP や chrome-devtools MCP を使うには、それぞれ接続設定を書かないといけない。複数の AI コーディングエージェント（Claude Code、Codex、Bob など）を使い分けていると、エージェントごとにも設定が必要になって管理が大変になる。 認証セッションが引き継げない。ログインが必要なサービスは、毎回ログインし直しになる。 ログイン情報を保存したい場合は、ポート 9222 でブラウザを別途起動することになる。--remote-debugging-port=9222 をつけて特定のプロファイルで Chrome を起動するか、常駐させておく必要があり、その分セットアップが増える。 playwright-cli v0.1.8 で
この記事では、Playwright の VSCode 拡張を使って GUI 操作のみでテストの記録や実行する方法について紹介します。 Playwright の VSCode 拡張とは？ Playwright の VSCode 拡張は、Playwright の作成元である Microsoft が公式に提供している拡張機能で、VSCode 内で直接ブラウザテストの記録や実行を支援するための便利なツールです。 GUI 操作を中心に、テストの記録や実行を手軽に行うことが可能となります。 VSCode 拡張のインストールは、以下のリンクから行うことができます。 VSCode 拡張を活用してテストを書く 本記事では、シンプルな ToDo アプリを例にテストの作成方法を説明します。Playwright のインストール方法は、公式ドキュメントをご参照ください。その後、VSCode に Playwright
はじめに Playwright を使うことで比較的簡単に E2E テストを実装することができます。しかし、通常テストコードは実装したら終わりということではなく、継続的にメンテナンス（保守）が必要になります。その際に保守しやすいように実装するため、Playwright の公式ドキュメントに記載されているベストプラクティスの中で参考になりそうな部分を確認しておこうと思います。 テストの独立性を高める 可能な限りテスト間の依存が無いようにして、テストを分離すると良いというプラクティスです。各テストが独立していることで、 １つのテストが失敗しても他のテストに影響しない テストの順序を考慮する必要がない テストをシンプルに保つことができる あたりのメリットがあるかと思います。また、特定の処理（例えば特定の URL に遷移する処理）の繰り返し実装するのを避けるために before and after
Claude CodeとPlaywright MCPで実現する対話型UI自動テスト構築 | DevelopersIO
はじめに UIテストを書くとき、 「セレクタを探す → 失敗する → ブラウザを見直す」 という往復に時間を取られていませんか？ 本記事では、Claude Code と Playwright MCP を組み合わせて、 実際のブラウザ操作を確認しながら対話的にUIテストを構築する方法を紹介します。 テストコードをあとから書くのではなく、 確認作業そのものをテスト生成につなげる のがこの方法の良いところです。 本記事は、Claude CodeとPlaywrightを利用したことがある方向けに書いています。 各サービスについて詳しく知りたい方は、こちらをご覧ください。 Claude CodeとPlaywrightの参考ブログ 動画で動きを紹介 モバイル表示時のハンバーガーメニューのテストを対話的に作成している例です。 こんなことができます。 生成したテストコードの詳細 この記事で作成したテストコ
Playwrightの公式ドキュメントに「Best Practices」というページがあったので翻訳してみました。 原文： Best Practices | Playwright 目次 目次イントロダクションテスト哲学ユーザから見えるふるまいをテストするテストはできるだけ分離するサードパーティの依存関係をテストしないデータベースを使ったテストベストプラクティスロケータを使うメソッドチェーンとフィルタリングの使用XPath や CSS セレクタよりもユーザー向けの属性値を優先するロケータの生成codegen を使ってロケータを生成するVS Code 拡張機能を使用してロケーターを生成するウェブファーストのアサーションを使う手動でアサーションを使わないデバッグの設定ローカル環境でデバッグするCIでのデバッグPlaywrightのツールを使うすべてのブラウザでテストPlaywrig
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 プロキシ経由で実行 → 脆弱性診断
AIに仕様書を読ませるとテストケースを自動生成、テストコードも書いてくれる「Autify Nexus」、Autifyが発表
AIに仕様書を読ませるとテストケースを自動生成、テストコードも書いてくれる「Autify Nexus」、Autifyが発表 テスト自動化ツールなどを提供するAutifyは、仕様書を読み込ませることで仕様に基づいたさまざまなテストケースを自動的に生成するテストデザイン機能や、テストしたい内容を自然言語で指示することで自動的にテストシナリオとテストコードを生成する機能などを備えた新サービス「Autify Nexus」の提供を発表しました。 自然言語からテストコードを生成、仕様書からテストケースの作成も 例えばテストエンジニアがAutify Nexsusに対して「このアプリケーションの入力フォームに値を入力し、OKボタンを押して申し込みを完了してください。値はランダムに生成し、メールアドレスは[email protected]を使って下さい」などと自然言語で指定すると、Autify Nexusは
はじめに ルミナイR&Dチームの宮脇彰梧です。 現在はマルチモーダルAIの研究を行う大学院生として、 生成AIやAIエージェントの技術を実践的に探求しています。 【この記事で学べること】 ローカルVLM（Ollama + Qwen3-VL）を用いたWeb操作の基本概念 Playwrightを用いたスクリーンショットベースの解析手法 API課金やトークン制限を気にしない、自律型エージェントの実装アプローチ 【記事の構成】 なぜこのテーマを選んだのか 関連調査：Browser UseとローカルVLMの可能性 実装・検証：Zennトレンド調査エージェントを作る 筆者の考察：視覚を持つAIがもたらす変化とQwenのクセ まとめ 【結論】 Ollamaを使ってローカルに構築したVLM（Qwen3-VL）を使えば、高額なAPI利用料を一切気にせず、Web画面の解析と自律的な調査が可能です。日本語のOC
フロントエンド開発では、UIの挙動を含めてアプリ全体を検証するE2E（End-to-End）テストが重要になっています。しかし、導入や運用の難しさから、実践に踏み出せていない方もいるのではないでしょうか。 本記事では、前後編に分けて、シンプルなウェブアプリを題材に、Playwrightプレイライトを用いたE2Eテストの導入から活用までの流れを解説します。 前編では、Playwrightの導入方法やテストコードの基本的な書き方、テスト実行の流れについて紹介しました。後編となる今回は、失敗したテストの原因を特定するのに役立つトレース機能について解説します。さらに、CI環境でテストを自動実行する方法も紹介します。 本記事の対象読者 Playwrightの基本的な使い方を理解し、次のステップに進みたい方 Playwrightをチーム開発やCI環境に組み込みたいと考えている方 本記事のゴール トレー
はじめに この記事では、 フロントエンドの開発において意義のあるテストはなにか？ それらをコスパよく実現するためにはどうすればよいか？ について考えて、作った構成を紹介します。 前提 下記の技術スタックを利用していますが、これ以外のスタックでも応用可能な仕組みが多いと思います。 Next.js Storybook playwright msw msw-snapshot （拙作） 注意事項 この記事の構成は、まだまだ実験的な機能だったり怪しい技術が一部採用されています。 msw-snapshot 拙作のライブラリであって、動作が怪しい可能性がめっちゃあります。 Next.js の testmode playwright + msw を実現するために必要でした。 まだまだ全然まともに動かないかもしれません。（サンプルリポジトリの単純なテストは動いた） サンプル 下記のリポジトリにサンプルを用意
はじめに 始業時にSlackを開いたら、昨夜実行したE2Eテストの失敗の分析も、再実行も、修正PRの作成も、ぜんぶ終わっていた。 そんな状態を実現するまでの、QAとAIのお話です。 第1章：QAチームが一手に担っていた時代 私たちのチームでは、PlaywrightでE2Eテストを自動化しています。 私たちは、20以上の診療科を持つクリニックに向けて、オンライン・対面それぞれの診療形式に対応したシステムを提供しています。重要なユーザー体験だけをテストしようとしても、リリースの度に手動でカバーするにはコストが高く、メンバーも限られていたため、自動E2Eテストを導入しました。 また、一連のユーザー体験をテストしようとすると複数の開発チームを横断することになるため、分担が難しく導入にも時間がかかるため、初期段階ではQAチームがまとめて担当することになりました。 以前は、テストの作成・運用保守をQA
Playwright CLI v0.1.9 で追加されたアノテーション機能は AI エージェントに視覚的なフィードバックを与えるために便利な機能です。アノテーション機能を利用すると、ブラウザの要素を選択して、その要素に対するコメントを残すことができます。AI エージェントはこのアノテーションが残された要素を簡単に特定できるため、どのコードを修正すればよいのかを判断しやすくなります。 AI エージェントを使用してフロントエンドを開発する際、どのように視覚的なフィードバックを提供するかはよくある課題です。AI エージェントは自身が書いたコードに対してテストや Lint から得られるフィードバックをもとに改善するというサイクルを繰り返すことによってコードの品質を向上させることができます。しかし、フロントエンドの開発では、例えば CSS が実際にどのように適用されているか、あるいは JavaScr
こんにちは。カミナシにて業務委託としてフロントエンドを担当している田村(@junkboy0315)です。皆さんはフロントエンドのテスト、どのように取り組んでいますか？フロントのテストはなかなか難しいですよね。 バックエンドのテストには、「入力、出力、永続化されたデータ」の3つを検証するという基本セオリーがあります。しかし、フロントエンドのテストは、その粒度や手法が多様で、とっつきにくいと感じる方も多いのではないでしょうか。 カミナシでもフロントエンドのテストは以前は十分とは言えない状態でしたが、これまで継続的に改善を重ねてきました。今回は、その変遷についてお話ししようと思います。 夜明け前 カミナシのコードベースでは、元々ユニットテストがある程度整備されていました。これらは主に複雑な計算処理を行い結果を返す関数などに対して実施されていました。 しかし、画面全体の機能を網羅する包括的なテスト
SafeTest は Playwright と Jest/Vitest を組み合わせた UI テストライブラリです。特定のライブラリに依存せず、React, Vue, Angular, Svelte などのフレームワークに対応しています。SafeTest は単体テストと Playwright を使った E2E テストの手法を組み合わせることで、それぞれの手法が抱える欠点を補うことを目指しています。 SafeTest は Playwright と Jest/Vitest を組み合わせた UI テストライブラリです。特定のライブラリに依存せず、React, Vue, Angular, Svelte などのフレームワークに対応しています。 従来のフロントエンドのテストの手法は Testing Library を使った単体テストと Cypress や Playwright を使った E2E テスト
訂正とお詫び（2025/11/09追記） 記事公開後、Playwright MCPコントリビューターのogadra様より、技術的な誤りをご指摘いただきました。深くお詫び申し上げます。 誤った記述 「Playwright MCPはAIがセレクターを自動生成する」 正しい動作 Playwright MCPもChrome DevTools MCPと同様に、スナップショットに含まれる識別子（ref）を使用して要素を特定します。 LLMはセレクターを生成していません mcp__playwright__browser_fill_formなどの関数呼び出し時、引数としてref（Chrome DevTools MCPのuidに相当）が渡されます 両MCPの要素識別方法に本質的な違いはありません 実際の違い 主な違いは以下の2点です： 操作の実行方法 Chrome DevTools MCP: CDP（Chr
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
頑張りすぎず、PlaywrightのCI実行時間を短縮した話 - カミナシ エンジニアブログ
カミナシのソフトウェアエンジニアisanaです。 カミナシレポートの開発に携わっています。 私たちのチームでは、Webアプリケーションの品質担保のため、Playwrightを用いたブラウザテストを実装し、GitHub Actionsで実行しています。しかし、このCIプロセスにおいていくつかの課題がありました。 他方、ソフトウェア開発においては日々寄せられるVoCに対応したり、新機能の開発を行うなかで、負債や課題を上手くハンドリングしていく必要があります。 本稿では、CIプロセスにおける課題をコスパよく解決するための改善策と、その過程で遭遇した「ハマったポイント」について、具体的な設定例を交えながらご紹介します。 PlaywrightやGitHub Actionsを利用している開発者の方々にとって、少しでも参考になれば幸いです。 前提となる環境 本稿で紹介する事例は、以下の環境を前提としてい
E2Eテストを Playwright で作り直して開発プロセスに組み込む話 - SmartHR Tech Blog
こんにちは。SmartHR プロダクトエンジニアの sasaki (@s_sasaki_0529) です。 今回は、私が開発に携わっている届出書類機能における E2E テストを、Capybara + Selenium の構成から Playwright に移行し、開発プロセスに組み込んだお話をします。 扱う話題 E2Eテスト基盤を移行する具体的な背景と理由 移行における提案から、合意形成までの流れ 移行後の開発プロセスがどう変わったか 扱わない話題 Playwright など、記事内で扱う技術要素自体の詳細説明 移行作業自体の詳細 テストコードの設計・実装に関する具体的なテクニック なお、本記事では便宜上、移行前の E2E テストを「旧テスト基盤」移行後を「新テスト基盤」と呼称します。 届出書類機能について E2Eテストに限らず、テストというのはプロダクトの特性によって最適な手法は大きく変わ
はじめに こんにちは。ソーシャル経済メディア「NewsPicks」の QA/SET チームの海老澤です。 先日 弊社で E2E テスト実行するために Playwright を導入したため紹介させてください。 E2Eテストとは E2Eテスト（エンドツーエンドテスト）とは、ソフトウェア開発におけるテスト手法の一つで、アプリケーションが実際の運用環境と同様の条件下で正しく動作することを確認するためのテストです。 システムの開始点から終了点までを通じて、ユーザーの視点でアプリケーションのフローを追い、機能全体が連携して期待通りに動くかを検証します。具体的には、ユーザーが行うであろう一連の操作をシミュレートして、データがシステムを通じて適切に流れるかや、最終的なアウトプットが正しいかどうかを確認します。E2Eテストにより、部分的な単体テストや統合テストでは見逃されがちな問題を発見することができます。
> まず playwright-cli のヘルプを確認します。 I will run the following command: playwright-cli --help (using tool: shell) Purpose: Check playwright-cli help playwright-cli - run playwright mcp commands from terminal Usage: playwright-cli <command> [args] [options] Core: open <url> open url close close the page type <text> type text into editable element click <ref> [button] perform click on a web page dblclick
E2Eテストにおける要素選択のベストプラクティス
こんにちは。Autifyの品質エバンジェリストの末村です。 もう5年前にもなりますが、なぜE2Eテストでidを使うべきではないのかという記事を書きました。この記事はありがたいことに長い間閲覧されており、弊社ブログの人気コンテンツの一つとなっています。 一方で、5年という歳月はソフトウェア開発のトレンドを変化させるには十分すぎるほどに長いです。テストツールの面では Playwright が新たな選択肢として加わった他、 testing-library によるアクセシビリティ属性を用いた要素探索が新たなベストプラクティスとして登場しています。 この記事では、E2Eテストにおける要素探索の考え方の変遷をおさらいしつつ、ベストプラクティスについて説明します。 要素選択の考え方 まずは、要素選択の考え方についておさらいしておきましょう。要素選択とは、読んで字の如く、Webページ内の特定の要素を探すこ
非エンジニアもMarkdownでテストを書ける — PlaywrightとGaugeによる自動テスト - エムスリーテックブログ
はじめに エムスリーテクノロジーズの永江 (@yukinagae)です。 2025年7月からエムスリーテクノロジーズに入社し、グループ会社への技術支援をしています。詳しい業務内容は、前回の記事でも紹介しました。 支援内容は、各グループ会社の状況や参画するエンジニアのスキルによって変わりますが、共通してCI/CDの強化から始めることが多いです。なかでも特に自動テストの強化は、最初に手がけるべき施策だと考えています。 その理由は、次の3つです。 導入ハードルが低い: 既存のコードに影響を与えずに導入できる 既存コードの理解が深まる: テストを書く過程で自然とコードの動きやドメイン知識が身につく 成功体験を積める: 自動テストは必要だとわかっていても後回しにされがち。テストを強化することで、チームに喜ばれ、小さな成功体験を積み重ねることができる このように大きなメリットがある自動テストですが、個
テストケースをコードで書かないE2Eテスト ── Claude CodeとPlaywright CLIで実現する自然言語テスト自動化 - ZOZO TECH BLOG
はじめに こんにちは、カート決済部カート決済サービスAブロックの道場です。ZOZOTOWN内のカート機能や決済機能の開発、保守運用を担当しています。 現在、ZOZOTOWNのカート決済画面はリプレイスが進行中です。既存システムとリプレイス後のシステムが並行して開発される中、既存システムへのさまざまな機能改修を、リプレイス側にも取り込む必要があります。その際、条件の組み合わせが膨大になるテストを手動で網羅的に実施することが現実的でなく、特に注文金額の計算結果の正確性を人間が1件ずつ確認するには大きなコストがかかっていました。 本記事では、Claude CodeとPlaywright CLIを組み合わせて、自然言語によるE2Eテストを自動化した仕組みをご紹介します。Confluence（Atlassian社が提供するナレッジ共有ツール）に自然言語でテスト手順を記述することでAIが自律的にブラウ
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【令和最新版】令和のWebスクレイピング(クロール)【ベストプラクティス】
ブラウザ操作を録画して、AIにPlaywrightテストを書いてもらう
Claude Codeとplaywright mcpを連携させると開発体験が向上するのでみんなやろう
2026元日、Playwright MCPに触れて気づいた、LLM時代のブラウザ自動化の新しいパラダイム
Playwright MCPを使ってE2Eテストを楽に書く
AI で再注目された技術やツールたち - ぽ靴な缶
Playwright MCP を使ってAIにUXを評価してもらう - Qiita
PlaywrightのVSCode拡張を使って効率的にテストを書く
Playwright を使いこなすためのベストプラクティス - Qiita
Playwrightのベストプラクティスを翻訳してみた
Ollama(Qwen3-VL)×Playwrightで作る完全無料のWeb調査エージェント
PlaywrightではじめるE2Eテスト入門（後編） - ICS MEDIA
フロントエンドのテスト構成について考えてみた in 2023
E2Eテストを民主化したら、朝には失敗の分析も再実行も修正PRも終わっていた
Playwright CLI で AI エージェントに視覚的なフィードバックを与える
理想のフロントエンドテストをたずねて三千里 - カミナシ エンジニアブログ
新しい UI テストの手法を提供するテストライブラリ SafeTest
Chrome DevTools MCP vs Playwright MCP - どちらを選ぶべき？実測で比較
Playwright Agents によるテストの自動生成を試してみた
Playwrightを使ったE2Eテストを導入した話 - Uzabase for Engineers
速報！Playwright CLIがでた！ - Qiita
7-24blog.com
www.itmedia.co.jp
m.youtube.com
news.yahoo.co.jp
rising-spirit.hatenablog.com
www.fsi.co.jp