はてぶ・Qiita・Zennのトレンド記事を紹介
PlaywrightはWebアプリの自動テストツールです。複数のブラウザで動作確認ができ、E2Eテストの自動化に役立ちます。
あるべき場所に帰ろう！ReActに立ち返りClaude Code + Playwright MCP + Figma MCPでデザインを反映 🔖 37
VTeacher所属のSatokoです！ 普段はフロントエンドをメインとして、QA的なことや進捗管理など、いろいろやっています。 最近の趣味はAIとのおしゃべりです！ FigmaのMCPサーバーさん ところで！ せっかくFigmaにMCPサーバーがあるのに、生成されたコードがいま
Cursor + 社内汎用MCP + Playwright MCPによるテスト実行実験 🔖 2
1. はじめにナレッジワークでQAエンジニアをしているguncha(@gun_chari)です。この記事は、「KNOWLEDGE WORK Blog Sprint」13日目の記事になります。 https://zenn.dev/knowledgework/articles/
Playwright MCPを使ってE2Eテストを楽に書く 🔖 235
ナレッジワークでは、お客様に安定したサービスを提供するため、E2Eテストを活用した品質保証に取り組んでいます。ただし、E2Eテストの開発・保守には多くの時間と労力が必要で、正直なところ手間だと感じる場面も少なくありません。本記事では、そうした課題を Playwright MCP
Playwright MCPを使ってE2Eテストを楽に書く 🔖 235
!この記事は、「KNOWLEDGE WORK Blog Sprint」10日目の記事ですナレッジワークでは、お客様に安定したサービスを提供するため、E2Eテストを活用した品質保証に取り組んでいます。ただし、E2Eテストの開発・保守には多くの時間と労力が必要で、正直なところ手
Playwright MCPを使ってE2Eテストを楽に書く 🔖 235
!この記事は、「KNOWLEDGE WORK Blog Sprint」10日目の記事ですナレッジワークでは、お客様に安定したサービスを提供するため、E2Eテストを活用した品質保証に取り組んでいます。ただし、E2Eテストの開発・保守には多くの時間と労力が必要で、正直なところ手
ECS on EC2 でスケールする Playwright の実行基盤を構築した - LayerX エンジニアブログ 🔖 22
こんにちは! バクラク事業部 Platform Engineering 部 SRE グループにインターンとして参加している xpadev です。 この記事ではインターン期間中に開発を行っていた Playwright 実行基盤を紹介します。 経緯 構成 具体的な処理フロー 技術選定
Claude CodeでE2Eテストを自動化！Playwright MCPで実現する対話型ブラウザテスト 🔖 7
こんにちは、とまだです。Claude Codeで開発していて、毎回手動でブラウザ確認するのが面倒だと感じたことはありませんか？フォームの動作確認や、ボタンクリックのテスト、レスポンシブデザインのチェック。AIがコードを書いてくれても、結局最後は自分の目で確認しなきゃい...
ECS on EC2 でスケールする Playwright の実行基盤を構築した 🔖 22
こんにちは! バクラク事業部 Platform Engineering 部 SRE グループにインターンとして参加している xpadev です。 この記事ではインターン期間中に開発を行っていた Playwright 実行基盤を紹介します。 経緯 構成 具体的な処理フロー 技術選定
CursorとPlaywright MCP Serverを活用したJMeterの負荷シナリオ生成 🔖 4
導入 こんにちは！名刺アプリ「Eight」のSREエンジニアの藤原です。SREは日々プロダクトの信頼性向上に向き合っています。私は2024年の8月に入社し、すでに入社から1年経ったことに驚きを隠せない今日この頃です。遅ればせながらドラゴンクエストIIIリメイクを始めたので、残暑を
非エンジニアもMarkdownでテストを書ける — PlaywrightとGaugeによる自動テスト - エムスリーテックブログ 🔖 127
はじめに エムスリーテクノロジーズの永江 (@yukinagae)です。 2025年7月からエムスリーテクノロジーズに入社し、グループ会社への技術支援をしています。詳しい業務内容は、前回の記事でも紹介しました。 支援内容は、各グループ会社の状況や参画するエンジニアのスキルによって
非エンジニアもMarkdownでテストを書ける — PlaywrightとGaugeによる自動テスト 🔖 127
はじめに エムスリーテクノロジーズの永江 (@yukinagae)です。 2025年7月からエムスリーテクノロジーズに入社し、グループ会社への技術支援をしています。詳しい業務内容は、前回の記事でも紹介しました。 支援内容は、各グループ会社の状況や参画するエンジニアのスキルによって
Figma + Storybook + PlaywrightのMCPを使ったフロントエンド開発 🔖 236
2022ランキング圏外から2023ランキング入りを実現したテックブログ運営について / 2023-07-28-QiitaEngineerFesta
Computer-useとBrowser-useとPlaywright-MCPを比較 🔖 1
ブラウザ操作系のAIエージェントが複数出てきたので、実装方法と動作の振る舞いを比較してみました。 computer-useについて※紹介するのはAzureから提供されているcomputer-useモデルです。2025年3月に登場した新しい生成AIモデルで、視覚要素を解釈し
Playwright × 生成AI でVRTのバグ報告を自然言語化してみたら実用的だった話 🔖 51
こんにちは！IVRyのQAエンジニアの関(@IvryQa)です。 IVRyでは2024年12月から Playwright[1] を用いた Visual Regression Testing（以下、VRT）[2] を導入し、約半年間運用してきました。 ピクセル差分は拾えても これっ
mabl CLIでエクスポートしたテストをPlaywrightで動かすときの注意点 🔖 1
はじめにmablのテストを実行回数を気にせず高頻度に回したいと思ったことはありませんか？私はあります。この記事では、mabl CLIでエクスポートしたPlaywrightテストを実際に動作させるまでにハマったポイントをまとめます。mabl CLIについては公式のヘルプをご確
mabl CLIでエクスポートしたテストをPlaywrightで動かすときの注意点 🔖 1
はじめにmablのテストを実行回数を気にせず高頻度に回したいと思ったことはありませんか？私はあります。この記事では、mabl CLIでエクスポートしたPlaywrightテストを実際に動作させるまでにハマったポイントをまとめます。mabl CLIについては公式のヘルプをご確
Playwright × 生成AI でVRTのバグ報告を自然言語化してみたら実用的だった話 🔖 51
こんにちは！IVRyのQAエンジニアの関(@IvryQa)です。IVRyでは2024年12月から Playwright[1] を用いた Visual Regression Testing（以下、VRT）[2] を導入し、約半年間運用してきました。ピクセル差分は拾えても これ
はじめに初めまして！皆さん、テストの必要性をご存知ですか？私は配属先で仕事をするまでテストの必要性や重要性を全くわかっていませんでした。さらにいうと、テストにもいろんな種類があることも初めて知りました。これはまずいと色々調べていくうちに、今回の題材である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