はてぶ・Qiita・Zennのトレンド記事を紹介
PlaywrightはWebアプリの自動テストツールです。複数のブラウザで動作確認ができ、E2Eテストの自動化に役立ちます。
はじめに初めまして！皆さん、テストの必要性をご存知ですか？私は配属先で仕事をするまでテストの必要性や重要性を全くわかっていませんでした。さらにいうと、テストにもいろんな種類があることも初めて知りました。これはまずいと色々調べていくうちに、今回の題材であるPlay...
PlaywrightのブラウザバイナリをGitHub Actionsでキャッシュする 🔖 1
はじめにGitHub ActionsでPlaywrightをつかったテストを実行する際、ブラウザバイナリを毎回ダウンロードするのはわすかですが時間がかかります。私の環境だとブラウザバイナリのインストールに数分かかっており、CIにかかる時間を短くしたくて調べたので、Pl...
VS Codeで注目のMCPを実践 「SQLite MCP」「Playwright MCP」でデータとテストコードを生成する方法 🔖 39
VS Codeで注目のMCPを実践 「SQLite MCP」「Playwright MCP」でデータとテストコードを生成する方法：クラウドサービスだけじゃない！ ローカルPCやサーバ、Kubernetesで生成AI（6） 気軽に試せるラップトップ環境で、チャットbotを提供するオ
Playwright MCPとAIでe2eテストを効率化！実践と課題、そして未来 🔖 41
MicrosoftからPlaywright MCPが公開されました。 この記事はPlaywright MCPとAIコードエディタのCursorを使い、e2eテストの効率的な作成と管理を試行した記録です。 インターネット上にある類似の記事を斜め読みしてみると、「これ、本当にPlay
playwright-mcpを拡張するMCPサーバーを作ってレスポンスBodyを観察できるようにしてみました 🔖 2
こんにちは。ダイの大冒険エンジョイ勢のbun913と申します。みなさんはPlaywrightのMCPサーバーを使いながら「どんなAPIリクエスト・レスポンスがあるかBodyも含めてみてほしいな」と思ったことはありませんか？私はあります。PlaywrightのMCPサーバーを使
Playwrightで実際のDBを用いてテストを並列実行し高速化する - hiroppy's site 🔖 79
最近は、LLMによるコード生成が日常的になっています。 それに伴って、テストはコードが正しく実行されているかを保証するために今後更に重要になっていきます。 そこでLLMにとっても人間にとっても、実行速度が重要な要素となりますが、特にe2eは実行速度が遅い点が課題です。 さらに実際
AmazonBedrockとPlayWrightMCPで始める日本語E2Eテスト 🔖 1
はじめにみなさんはE2Eテストをご存じでしょうか？EndtoEndテストの略称であり、ブラウザ上でのシステム全体の動作を確認するためのテスト手法です。E2Eテストを自動化するためのツールとして、PlayWrightが注目されています。PlayWrightは、Webブラウ...
Playwright自動化ツールのPython部分をTypeScriptに移行した話 🔖 1
UbieでQAエンジニアをしている @tmasuhara です。今日はプロダクトのオペレーションに使っているPlaywrightベースのツールにおける技術スタック移行について書きます。 ツールの概要このツールは、YAML設定ファイルに基づいてPlaywrightテストを動
Playwright自動化ツールのPython部分をTypeScriptに移行した話 🔖 1
UbieでQAエンジニアをしている @tmasuhara です。今日はプロダクトのオペレーションに使っているPlaywrightベースのツールにおける技術スタック移行について書きます。 ツールの概要このツールは、YAML設定ファイルに基づいてPlaywrightテストを動
開発経験0のQAエンジニアが、playwrightでE2Eテストを実装するまでの記録 🔖 1
こんにちは。 最近家でパンを焼きまくっているhacomono QAのpiroこと廣田です。 この記事を開いてくれたQAエンジニアのあなた、 もしかすると、なんとなくコードに対しての苦手意識を持っていたりしませんか？ まさに私がそうでした。 開発経験もなく、ホワイトボックステストの
Playwright 全盛のいま、あえて Selenium をのぞき込む 🔖 4
昨今のE2Eテストは、Playwrightを使うのが主流だと思います。Playwrightはテストのレコーディングもできるし、レポートもリッチだし、最近だとMCPもあってAIフレンドリーでもあり、E2Eテストを書くならまずこれを選んでおけば間違いない存在だと思います。そこでふと
最近、らくしふのある画面に対して E2E テストを書いていたのですが、その画面ではレイアウトの見た目がとても重要でした。機能的なテストはすべてパスしていましたが、スタイルの崩れがないか毎回手動で確認する必要がありました。そんなときに見つけたのが、Playwright のスナップ
Playwright移行プロジェクト奮闘記 〜現場で直面した3つの壁と、乗り越えるためのTips集〜 - Nealle Developer's Blog 🔖 45
はじめに 本記事は、前回の記事「Playwrightへの移行 〜ノーコードツールから乗り換えた理由と、その裏側〜」 nealle-dev.hatenablog.com の続編です。 前回は、私がノーコードツールからPlaywrightへの移行を決断した背景や、準備・設計段階での工
Playwright移行プロジェクト奮闘記 〜現場で直面した3つの壁と、乗り越えるためのTips集〜 🔖 45
はじめに 本記事は、前回の記事「Playwrightへの移行 〜ノーコードツールから乗り換えた理由と、その裏側〜」 nealle-dev.hatenablog.com の続編です。 前回は、私がノーコードツールからPlaywrightへの移行を決断した背景や、準備・設計段階での工
Playwrightへの移行 〜ノーコードツールから乗り換えた理由と、その裏側〜 - Nealle Developer's Blog 🔖 61
こんにちは、ニーリーでSET（Software Engineer in Test）を担当している宮内です。 本記事では、私が入社して最初に取り組んだ「E2Eテスト自動化ツールの移行」について、特に「なぜ移行を決断したのか」という背景と、「移行の準備・設計で工夫したこと」を中心に、
Playwrightへの移行 〜ノーコードツールから乗り換えた理由と、その裏側〜 🔖 61
こんにちは、ニーリーでSET（Software Engineer in Test）を担当している宮内です。 本記事では、私が入社して最初に取り組んだ「E2Eテスト自動化ツールの移行」について、特に「なぜ移行を決断したのか」という背景と、「移行の準備・設計で工夫したこと」を中心に、
Claude Codeとplaywright mcpを連携させると開発体験が向上するのでみんなやろう 🔖 310
どうもこんにちは、Claude Codeで遊び始めて2週間くらいが立ちましたがまだまだ模索中です 最近覚えた新しいテクニックが playwright-mcp(https://github.com/microsoft/playwright-mcp) を使ってブラウザ操作を全てcla
頑張りすぎず、PlaywrightのCI実行時間を短縮した話 - カミナシ エンジニアブログ 🔖 139
カミナシのソフトウェアエンジニアisanaです。 カミナシレポートの開発に携わっています。 私たちのチームでは、Webアプリケーションの品質担保のため、Playwrightを用いたブラウザテストを実装し、GitHub Actionsで実行しています。しかし、このCIプロセスにおい
Claude Codeとplaywright mcpを連携させると開発体験が向上するのでみんなやろう 🔖 310
どうもこんにちは、Claude Codeで遊び始めて2週間くらいが立ちましたがまだまだ模索中です最近覚えた新しいテクニックが playwright-mcp(https://github.com/microsoft/playwright-mcp) を使ってブラウザ操作を全てcla
頑張りすぎず、PlaywrightのCI実行時間を短縮した話 🔖 139
カミナシのソフトウェアエンジニアisanaです。 カミナシレポートの開発に携わっています。 私たちのチームでは、Webアプリケーションの品質担保のため、Playwrightを用いたブラウザテストを実装し、GitHub Actionsで実行しています。しかし、このCIプロセスにおい
頑張りすぎず、PlaywrightのCI実行時間を短縮した話 🔖 139
カミナシのソフトウェアエンジニアisanaです。 カミナシレポートの開発に携わっています。 私たちのチームでは、Webアプリケーションの品質担保のため、Playwrightを用いたブラウザテストを実装し、GitHub Actionsで実行しています。しかし、このCIプロセスにおい
Playwrightの自動待機（Auto-waiting）を使いこなし、保守性の高いテストコードを書こう 🔖 4
こんにちは、LayerX バクラク事業部で勤怠プロダクトを担当しているQAエンジニアの matsu です！ Playwrightで書いたE2Eテストが「時々失敗する」「手元では動くのにCIだと落ちる」といった経験はありませんか？ その不安定なテスト（Flaky Test）の原因、
Playwright MCPを使ってNotebookLMに自動でソースを流し込む 🔖 120
NotebookLMは、Googleが提供するAI搭載のノートブック機能で、既に多くの人がさまざまな用途で活用していることでしょう。 しかし、NotebookLMは現時点(2025/06/09)ではAPIが提供されていないため、複数のソースを一括で流し込むことができず、一旦手元で
Playwright MCPを使ってNotebookLMに自動でソースを流し込む 🔖 120
NotebookLMは、Googleが提供するAI搭載のノートブック機能で、既に多くの人がさまざまな用途で活用していることでしょう。しかし、NotebookLMは現時点(2025/06/09)ではAPIが提供されていないため、複数のソースを一括で流し込むことができず、一旦手元で
Playwright Component Testを用いた単体テストでJestで書けなかったテストを実現する - ミツカリ技術ブログ 🔖 36
ミツカリのたなしゅん(@tanashun_dev)です。 弊社で提供しているサービスの一部のアクションでドラッグアンドドロップで画面上の要素の並び替えをする機能があります。 この実装にはdnd-kitというライブラリを使っています。 dndkit.com ライブラリのおかげで実装
Playwright MCPでブラウザのテストをしてみた 🔖 1
はじめにPlaywrightは、Microsoftが開発したブラウザ自動化ツールで、実際のブラウザを動かしたE2Eテストができます。こちらはaiに書いてもらったサンプルコードで、googleでcatと検索したときの挙動をテストするコードです。test('Googleで「c
📝Playwright-mcp を使ったE2Eテストスクリプトの作成を試してみた 🔖 39
こんにちは！アルダグラムでQAエンジニアをしている千葉です！ 最近AIの進化が目覚ましく、画像生成とかコードを書くAIとか何にでもAI使えるようになってきて、技術の進歩が凄まじい勢いだなって感じている今日この頃です。 突然ですが、私が担当している業務として、E2Eテストの自動化が
📝Playwright-mcp を使ったE2Eテストスクリプトの作成を試してみた 🔖 39
こんにちは！アルダグラムでQAエンジニアをしている千葉です！最近AIの進化が目覚ましく、画像生成とかコードを書くAIとか何にでもAI使えるようになってきて、技術の進歩が凄まじい勢いだなって感じている今日この頃です。突然ですが、私が担当している業務として、E2Eテストの自動化が
📝Playwright-mcp を使ったE2Eテストスクリプトの作成を試してみた 🔖 39
こんにちは！アルダグラムでQAエンジニアをしている千葉です！最近AIの進化が目覚ましく、画像生成とかコードを書くAIとか何にでもAI使えるようになってきて、技術の進歩が凄まじい勢いだなって感じている今日この頃です。突然ですが、私が担当している業務として、E2Eテストの自動化が
Playwright MCP Serverを呼び出すMastraをAWS CDKで実装してみた 🔖 2
こんにちは、つくぼし(tsukuboshi0755)です！最近MastraやMCP Serverに関する情報が増えてきており、いよいよAIエージェントの時代が到来したなと感じています。今回はMCP Serverを呼び出すAIエージェントをAWS上で検証してみたかったため、Pl
Playwright MCP を使ってAIにUXを評価してもらう 🔖 195
はじめに 乗り遅れましたが巷ではMCPが流行っていたので、気になっていたPlaywright MCPを使ってみたいと思います。 今回は、AIが画面操作を出来るならUXも評価してくれるのでは？という思い付きを試してみました。 1. MCPとは？ MCPは、Model Context
Playwright MCP を使ってAIにUXを評価してもらう 🔖 195
はじめに乗り遅れましたが巷ではMCPが流行っていたので、気になっていたPlaywright MCPを使ってみたいと思います。今回は、AIが画面操作を出来るならUXも評価してくれるのでは？という思…
Playwright MCPとAWS MCPのクライアントをVercel AI SDKで構築する 🔖 3
はじめに昨今 AI エージェントの流れが本当に激しいですね。特に最近は MCP 関連の話題に溢れているなと感じているところです。先週末には Azure Functions で MCP サーバー…
【Playwright MCP】を利用したエージェントを【LangGraph】で構築する 🔖 6
はじめに最近、MCPがかなり流行っているので、少し遊んでみました。とは言いつつ、私はとことんGUIに弱く、Claude DesktopでPlaywright MCPを実行するとエラーになってしまったので、LangGraphで実装しました。自分用にメモとして残します。 忙
Playwright MCP を使ってAIにブラウザ操作をさせてみる（GitHub Copilot / Cline 環境構築手順付） 🔖 78
はじめに Microsoft が 2025/3/29 に Playwright MCP を発表してから盛り上がっていますね。 「MCP」は「Model Context Protocol」の略です。生成AIにとってのUSBポートのようなもので、様々なデータリソースやツールとつなぐこ
Playwright MCP を使ってAIにブラウザ操作をさせてみる（GitHub Copilot / Cline 環境構築手順付） 🔖 78
はじめにMicrosoft が 2025/3/29 に Playwright MCP を発表してから盛り上がっていますね。「MCP」は「Model Context Protocol」の略です。生…
ARIA Snapshots と Playwright MCP 🔖 9
構成2部構成です。Playwright AIRA SnapshotsPlaywright MCP Playwright ARIA SnapshotsPlaywright v1.49.0 で追加されました。一言でいうと「ページ内のアクセシビリティツリーのスナップショ
ARIA Snapshots と Playwright MCP 🔖 9
構成2部構成です。Playwright AIRA SnapshotsPlaywright MCP Playwright ARIA SnapshotsPlaywright v1.49.0 で追加されました。一言でいうと「ページ内のアクセシビリティツリーのスナップショ
Playwright MCP を使って、自然言語で E2E テストを実行してみた 🔖 27
はじめにPlaywright MCP を使って、自然言語から E2E テストを実行できるかどうかを試してみました。今回は、デスクトップ版の Claude を利用して、プロンプトを入力してテストを実…
なるべくWSL側に寄せつつplaywright-mcpをClaude Desktopで使えるようにする 🔖 59
なるべくWindows側の環境には手を加えずにClaude Desktopからplaywright-mcpを使えるように設定する備忘録 環境 Windows 11 WSL v2.5.4.0 (Ubuntu 24.04.1) Claude Desktop for Windows v
【Claude】Playwright-MCPで変わるテスト自動化の世界！初心者でも使えるE2Eテスト入門 🔖 129
はじめに 私は新米プログラマーとして、テスト自動化の複雑さに頭を悩ませていたんですが、Playwright MCPと出会って目から鱗が落ちる体験をしました。今日はその魅力を皆さんと共有したいと思います！ テスト自動化の悩みから解放されるPlaywright MCP アプリ開発をし
Playwright MCP技術解説 〜次世代ブラウザ自動化の可能性〜 🔖 64
1. はじめにC-RISEの村井です。当社はクラウドBOTというブラウザ自動化サービスを提供しています。クラウドBOTは、ブラウザ操作の自動化をよりシンプルに、そして多くの人にとって身近なもの…
【Claude】Playwright-MCPで変わるテスト自動化の世界！初心者でも使えるE2Eテスト入門 🔖 130
はじめに私は新米プログラマーとして、テスト自動化の複雑さに頭を悩ませていたんですが、Playwright MCPと出会って目から鱗が落ちる体験をしました。今日はその魅力を皆さんと共有したいと思いま…
Playwright MCPとCursorで、E2Eテストを自動生成してみた 〜AI×ブラウザ操作の新アプローチ〜 🔖 297
概要 Playwright MCPとCursorを活用し、E2Eテストをゼロから自動生成してみました。 本記事ではその検証プロセスと得られた知見を紹介します。 この記事で分かること Playwright MCPでE2Eテストを自動生成する方法 Playwright MCPの活用の
Playwright MCPとCursorで、E2Eテストを自動生成してみた 〜AI×ブラウザ操作の新アプローチ〜 🔖 298
概要https://github.com/microsoft/playwright-mcpPlaywright MCPとCursorを活用し、E2Eテストをゼロから自動生成してみました。本記事ではその検証プロセスと得られた知見を紹介します。 この記事で分かることPl
Microsoft Playwright MCPが切り拓くLLMとブラウザの新たな統合 🔖 123
はじめに ウェブブラウザの自動操作は長い間、テスト自動化やスクレイピングの重要な分野でしたが、大規模言語モデル（LLM）の台頭により、まったく新しい可能性が開かれつつあります。マイクロソフトの最新プロジェクト「Playwright MCP（Model Context Protoc
Microsoft Playwright MCPが切り拓くLLMとブラウザの新たな統合 🔖 123
はじめにウェブブラウザの自動操作は長い間、テスト自動化やスクレイピングの重要な分野でしたが、大規模言語モデル（LLM）の台頭により、まったく新しい可能性が開かれつつあります。マイクロソフトの最新プロジェクト「Playwright MCP（Model Context Protoc
🔍Microsoftが発表したPlaywright MCPとは？― AIとウェブ自動化の“次の一手”をわかりやすく解説！｜Kyutaro 🔖 85
🔍Microsoftが発表したPlaywright MCPとは？― AIとウェブ自動化の“次の一手”をわかりやすく解説！ みなさん、「AIがウェブページを自分で操作する」技術で新たな展開がありました。Microsoftが新しく発表した「Playwright MCP」という技術。