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
AI駆動開発で苦労した話 〜笑えないけど笑うしかない日々〜 はじめに ※本記事で使用している画像はAIツール（DALL-E）を使用して生成したものです。 略歴と、SecureNaviにおけるAI駆動開発の導入の経緯 2002年にお茶の水のジュンク堂でXP本に出合い強烈な衝撃を受けました。2005年にはSeleniumに出合いさらに大きな衝撃を受けました。 以降、テストの自動化、コードやテストの自動生成をライフワークとしてエンジニア人生を送っているしがないエンジニアです。 前々職の富士通時代は、頑固な職人的なエンジニアの理想である「ダース・ベイダー」(ピープルウエアで有名の受け売り)になることを目指して日々精進していました。「ダース・ベイダー」って富士通じゃ・・・ 変な前置きはこれぐらいにして、プログラミング言語を切り替える毎に統合開発環境を切り替えるのはストレスが大きいです。 そのため数年
【Claude】Playwright-MCPで変わるテスト自動化の世界！初心者でも使えるE2Eテスト入門 - Qiita
はじめに 私は新米プログラマーとして、テスト自動化の複雑さに頭を悩ませていたんですが、Playwright MCPと出会って目から鱗が落ちる体験をしました。今日はその魅力を皆さんと共有したいと思います！ テスト自動化の悩みから解放されるPlaywright MCP アプリ開発をしていると、「ユーザーが実際に使うときにちゃんと動くかな？」という不安がつきまといますよね。エンドツーエンドテスト（E2Eテスト）は、UIからAPIまで全体の流れをテストできる素晴らしい方法なんですが、正直言って、従来のやり方はめちゃくちゃ大変でした。 複雑なコードを書いたり、テストシナリオを考えたり...。特に私のような新米プログラマーにとっては、高い壁だったんです。でも、Playwright MCPの登場で、この状況が劇的に変わりました！ Playwright MCPの最大の魅力は、自然な日本語のコマンドでブラウ
はじめに ウェブブラウザの自動操作は長い間、テスト自動化やスクレイピングの重要な分野でしたが、大規模言語モデル（LLM）の台頭により、まったく新しい可能性が開かれつつあります。マイクロソフトの最新プロジェクト「Playwright MCP（Model Context Protocol）」は、LLMとブラウザの間に革新的な橋を架け、AIがより効率的かつ確実にウェブと対話できる世界を実現しています。 本記事では、Playwright MCPの技術概要、主要機能、そして実際のビジネスにおける活用事例について探っていきます。 Playwright MCPとは？ Playwright MCPは、マイクロソフトが開発したModel Context Protocol（MCP）サーバーで、Playwrightのブラウザ自動化機能をLLMに提供します。従来の画像認識やスクリーンショットベースのアプローチとは
GitHub - microsoft/playwright-mcp: Playwright MCP server
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
QA・品質保証の仮説検証・価値探索を行い、QA領域の組織を立ち上げる過程の話 - MonotaRO Tech Blog
もしあなたが様々なシステムの品質保証を担ってきた QA エンジニアとして、QA 組織がない・QA エンジニアがいない会社に「入りたい」と思いますか？ もしあなたがエンジニアリングマネージャーとして、QA 組織がない・QA エンジニアがいない中 CTO から「QA エンジニアを採用・オファーするか？（面倒を見れるか？QA 領域で活動していく覚悟はあるか？）」と言われて「はい」と答えますか？ もしどちらも「Yes」となり、1年後にどうなったと思いますか？ はじめに QA領域の組織を立ち上げたい発端 QA領域の活動の方向・方針を考える CTOとの議論（1回目） テストプロセスの学習と実践 CTOとの議論（2回目） テストプロセスの課題・価値探索と仮説検証 システム開発・プロダクト開発におけるQA CTOとの議論（3回目） 今後 はじめに こんにちは。 プラットフォームエンジニアリング部門 Dev
🔍Microsoftが発表したPlaywright MCPとは？― AIとウェブ自動化の“次の一手”をわかりやすく解説！｜Kyutaro
🔍Microsoftが発表したPlaywright MCPとは？― AIとウェブ自動化の“次の一手”をわかりやすく解説！ みなさん、「AIがウェブページを自分で操作する」技術で新たな展開がありました。Microsoftが新しく発表した「Playwright MCP」という技術。 この記事では、 🧠 Playwright MCPって何？ 🤖 何ができるの？ ☁️ なぜ注目されてるの？ という点を、エンジニアではない方にも分かりやすく、やさしい言葉とイメージで解説していきます！ 🧠 Playwright MCPって何？まず名前にある「Playwright」は、Microsoftが開発しているブラウザ自動化のツールです。もともとは、開発者がWebサイトの操作を自動でテストしたり、繰り返し作業を楽にするためのものでした。 そこに今回追加されたのが「MCP（Model Context Pro
Model Context Protocol（MCP）は、AI（LLM）の能力を拡張するためのプロトコルです。このブログ記事では、以下について書きます。 MCPの概要 MCPを使ってみた MCPを作ってみた MCPとは何か？ Model Context Protocolは、AI（GPTやClaudeなどのLLM）が外部システムやAPIと通信するための標準化されたプロトコルでAnthropic社が定めたものです。MCPを使用することで、AIアシスタントは以下のようなことが可能になります： インターネット上の情報にアクセスする データベースを検索する ファイルシステムを操作する 外部APIを呼び出す GitやGitHubなどの開発ツールを操作する MCPの公式サイトの紹介文には以下のような概念図があります。 modelcontextprotocol.io introductionより引用 また
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 1. はじめに C-RISEの村井です。 当社はクラウドBOTというブラウザ自動化サービスを提供しています。 クラウドBOTは、ブラウザ操作の自動化をよりシンプルに、そして多くの人にとって身近なものにするため開発してきました。 プログラミング不要で誰でも業務自動化ができることを目指し、これまで数多くのアップデートを重ねてきました。 そして、今月プレビュー版として公開したCloud BOT Operatorは、RPAによる定型操作ロボットという枠組みから一歩踏み出し、AIによる自動操作ロボットとしての可能性に挑戦しました。 エージェントが
なるべくWindows側の環境には手を加えずにClaude Desktopからplaywright-mcpを使えるように設定する備忘録 環境 Windows 11 WSL v2.5.4.0 (Ubuntu 24.04.1) Claude Desktop for Windows v0.9.0 WSL側でNode.js環境は整備済みとする 手順 WSL側で npx playwright install-deps する WSL側で npx playwright install chrome する WSL側で npm install --global @playwright/mcp@latest する WSL側で which mcp-server-playwright でパスを確認して控えておく WSL側で which node でNode.jsのフルパスも控えておく Windows側でClaud
社内勉強会が1年で5倍に！サポートエンジニアの学習文化と成長の軌跡 - RAKUS Developers Blog | ラクス エンジニアブログ
はじめに こんにちは。楽楽精算のサポートエンジニアを担当している梅田です。 サポートエンジニアの役割は、楽楽精算の仕様や技術を理解するだけでなく、問い合わせ対応時に適切な調査を行い、開発チームやインフラチームと連携しながら迅速に解決策を導くことです。そのため、テスト技法や業務知識を学び、最新の技術動向を把握することが大切です。 ラクスでは「学習し成長し続ける」ことを行動指針のひとつとして掲げており、私たちサポートエンジニアもこの指針を大切にしています。 お客様により良いサポートを提供するためには、製品知識に加えて、技術や法制度の変化を理解し、常に最新の情報に対応していくことが不可欠です。 そこで、実務に役立つスキルを学び、サポートエンジニアチーム内や所属している課の単位で勉強会を開催・実施しています。本記事では、これらの勉強会の取り組みを通じて得られた成果をご紹介します。 はじめに なぜ勉
参加してみたら結構面白かったので、フロントエンド/Node.js エンジニアはやってみてほしい。 あれこれ盛り上がりたいので。 (自分は作問担当でも中の人でもなんでもない。ハッカソン参加者) 自分の最終結果はスコア上は 365/1200 で 12位だったが、レギュレーション失格で落ちた、というかレギュレーションを通せた人が上位16人で1人だけ。 結果から言えばレギュレーション守って300点以上とるゲームだった。 学べること クライアントサイド ランタイム負荷の計測 静的解析によるバンドル解析 やばいアセットの発見 CSSの静的抽出による(CLS改善) サーバーサイド sqlite のチューニング SSR実装 動画配信のプロトコル とにかく大量のライブラリツールチェインを乗り越える力(現場っぽい) 富豪的な実装のライブラリを自分で置き換える力(時間内無理) 環境構築 node.js / pn
1. Computer use「Computer use」は、「CUA」(Computer-Using Agent)の実用的な応用であり、「GPT-4o」の視覚機能と高度な推論を組み合わせて、コンピューターインターフェースの操作やタスクの実行をシミュレートします。 2. Computer use のしくみ「Computer use」は、連続ループで動作します。このツールは click(x, y) や type(text) のようなコンピュータ操作を送信し、ユーザーのコードがそれをコンピュータやブラウザ環境で実行します。その後、結果のスクリーンショットがモデルに返されます。 このしくみにより、ユーザーのコードは人間がコンピュータインターフェースを操作する動作をシミュレートし、モデルはスクリーンショットを分析して環境の状態を理解し、次のアクションを提案します。 このループを活用することで、クリ
Vercel AI SDK で MCP クライアントをツールとして利用する MCP（Model Context Protocol）は LLM に追加のコンテキストを提供するための標準化されたプロトコルです。Vercel AI SDK は v4.2 から MCP をサポートしており、MCP クライアントをツールとして利用できます。この記事では Vercel AI SDK を使って MCP ツールを使用する方法を紹介します。 MCP（Model Context Protocol）は、LLM（大規模言語モデル）に追加のコンテキストや機能を提供するための標準化されたプロトコルであり、AI アプリケーション開発において注目を集めています。MCP を利用することで、LLM は外部ツールやデータソースと連携し、より高度なタスクを実行できるようになります。 MCP サーバーの例としては、以下のようなものが
価値創造を加速させるための革新！ リリースフローをGitHubに完結＆仕組み化して劇的な効率化へ！ - LIFULL Creators Blog
こんにちは、LIFULLでシニアエンジニアをしている渡邉です。普段はLIFULL HOME'Sの流通領域のエンジニアチームにて、マネジメントをしています。好きなE2EライブラリはPlaywrightです。 今回は、LIFULLで取り組んでいるリリース承認の仕組みを変更し、自動化を図った取り組みについてお伝えします。 はじめに 皆さんは、普段の開発フローを一度俯瞰してみたことはあるでしょうか？ 開発からリリースまでを通して見直してみると、思いがけないフローがボトルネックになっていることはありませんか？ 普段やっている決まった手順が「会社の規定だから」「昔からやってきた習慣だから」と、そのまま受け継いでいるプロセスほど、意外な手間やムダが潜んでいるものです。 そこで今回は、LIFULLにおける課題感を踏まえつつ、私たちが開発フロー全体を見返す中で明らかになったリリースフローの課題に注目し、我々
はじめに 従来のブラウザ操作MCPの主な課題は、大量のコンテキスト消費でした。AI エージェントがブラウザを操作する際、ブラウザのスクリーンショットを base64 エンコードしてコンテキストに渡していたためです。このため、一度の操作でも膨大なトークン数を消費してしまい、処理効率が大幅に低下していました。 このため、数回の操作を必要とする程度の簡単な操作さえ、エージェント上で完了することはできませんでした。 つまり、従来のブラウザ操作系MCPは実用レベルに達していませんでした。 結論 以下の動画を見てください。 自然言語による指示によって、ローカル環境でログイン処理を行う様子 データの追加と結果の確認を行う様子 Microsoft 製の ブラウザ操作 MCP = Playwright MCP は実用レベルに達していました！ おわり。 おまけ コンテキスト長問題の解決 Playwright
はじめまして！OpenAI の Developer Experience チームに加わった瀬良（@seratch）と申します。 前職の Slack では公式 SDK の開発と Developer Relations の活動を担当していました。OpenAI でも開発者の皆さんのお役に立てるよう幅広く活動していきますので、よろしくお願いします！ エージェント開発のための新たなツール OpenAI は、日本時間の 3/12 未明にエージェント型のアプリケーション開発のための新しい API セットと Agents SDK を発表しました。 公式発表も日本語化されていますので、ぜひそちらもお読みください。この記事では実際に利用する上での技術的なポイントを整理してご紹介します。 tl;dr （要点だけ知りたい方向けのまとめ） 後半ではコード例も交えて、詳しく解説していきますが、まずは、すでに Open
EM観点から見た生成AIプロダクト開発におけるQAエンジニアの役割とおもしろさ - LayerX エンジニアブログ
こんにちは、LayerX AI・LLM事業部の篠塚(@shinofumijp)です。エンジニアリングマネージャーとして生成AIプラットフォーム「Ai Workforce」の開発に携わっております。 Ai Workforceはすでにお客様にもご導入いただき、実際の業務にてご利用いただいています。 getaiworkforce.com 現在Ai Workforceの開発はスケール期を迎え、プロダクト開発のスピードと安定性を両立させ、プロダクトの品質を向上させることが重要なフェーズになってきました。そのため、このミッションを牽引するQAエンジニアの募集を始めました。 open.talentio.com 生成AIを活用したSaaSプロダクトであるAi Workforceに関わるQAエンジニアは非常にエキサイティングなロールと個人的には考えています。本記事では、Ai WorkforceのQAエンジニ
Next.js や BaaSを使うときのセキュリティ対策の覚書。RLS、DOMPurify、クリックジャッキングやXSS対策、クロスオリジン、CSPの設定など。 個人開発向け。認証系のアプリケーション開発時における現時点での BaaS やウェブアプリケーション（Next.js など）のセキュリティ対策の覚書。チェックリストなので深くは掘り下げない。更新、追加、修正予定あり。 データセキュリティ RLS の有効化とポリシー設定 例えば、Supabase を使う場合、RLS を有効にしてポリシーを適切に作成。各ユーザーがアクセスできるデータを厳密に制御する。 RLS（Row-Level Security）はデータベースのテーブルでユーザーごとに異なるアクセス制限を設定する仕組み。例えば、自分の投稿だけが見えるようにするなど、柔軟な制御が可能。 ポリシーとは、各ユーザーがどのデータにアクセスでき
JSer.info #728 - React Aria March 5, 2025リリースされました March 5, 2025 Release – React Spectrum Releases Toast/Tree/Virtualizerコンポーネントを追加、AutocompleteをMenu/Selectなどと組み合わせて利用できるようになりました。 また、<Pressable>/<Focusable>の追加、usePressのリファクタリングなどが含まれています。 その他には、ドキュメントをTailwind v4に対応など Firefox 136.0リリースされました Firefox 136.0, See All New Features, Updates and Fixes Firefox 136 for developers - Mozilla | MDN HTMLのautoc
Claude DesktopとMCPを使って学習ログを作る
やりたいこと 日々の学習を効率化するために、参考になったwebページの内容を振り返る仕組みが欲しい 最近はMCPの開発が盛んなのと、ClaudeDesktopからだと定額で利用できるため、これらを使って簡単な学習ログの仕組みを構築する 参考にした記事 必要なもの Claude Desktop Claude Pro アカウント fetch MCP サーバ URLを投げつけると中身を読んでくれる ページにあるLinkの先とかまで読んでほしいときはPlaywrightMCPを使うと良さそう Claude Code MCPサーバとして動かすとファイルの読み書きができる 作り方 ClaudeProに課金したアカウントであれば、ファイル>設定>開発者>構成を編集 とすると、 claude_desktop_config.jsonがあるディレクトリが開く。 claude_desktop_config.js
はじめに WindowsでClaude Desktopを使ってPlaywright MCPを使う際に少しハマったので、その解決方法をまとめます。 Playwright MCPについての詳細は他の記事を参考にしてくださると幸いです。 Claude Desktopのインストール まずはClaude Desktopをインストールします。 Claude Desktopをインストールしたら、起動します。アカウントが必要なので適宜登録してください。 Playwright MCPの準備 初めにPlaywright MCPを使うための準備をします。 リポジトリのクローン まずはPlaywright MCPのリポジトリをクローンします。ついでに、リポジトリに移動します。
【Browser Useの代わり？】Playwright MCP とはなにかを解説します｜まさお@未経験からプロまでAI活用
Playwright MCPは、Microsoft Playwrightの技術を活用し、ウェブブラウザの自動化を行うためのサーバーです。従来のスクリーンショットベースのアプローチとは異なり、アクセシビリティツリー（Accessibility Snapshot） を用いることで、ウェブページを構造的かつ決定論的に操作できる点が大きな特徴です。 とくに、大規模言語モデル（LLM）との連携を想定しており、LLMが視覚情報（スクリーンショット）に依存せずにウェブページを理解し、操作できるようなツールセットやインターフェースを提供しています。 YouTube動画でも丁寧めに解説したのでよろしければどうぞ。 主な特徴高速かつ軽量 従来のスクリーンショットベースの操作は、画像解析や座標指定が必要になるため遅く、処理が重くなりがちでした。 しかし、Playwright MCPでは、ピクセル情報ではなくアク
フューチャー株式会社（フューチャーアーキテクト株式会社）の講演では、シニアアーキテクト渋川氏と若手コンサルタント大岩氏が、IT業界の現状と未来について語りました。Python歴20年の渋川氏は、生成AIの台頭や若手エンジニアの活躍を踏まえながら、2064年までITで仕事を続けるためのキャリアプランを提示。特にドメイン知識とプログラミング知識という2つの観点から、今後のIT技術者に求められるスキルと生存戦略について具体的に解説しました。 Python歴20年のシニアアーキテクトと若手コンサルタント渋川よしき氏（以下、渋川）：はい。それでは始めたいと思います。私からは「2064年もITで仕事をし続けるためのキャリアプラン」というタイトルで発表します。私はフューチャーの渋川と申します。 まず、お前誰よということですけれども。現在、社会人歴20年ぐらいですかね。大学は電気電子の専門だったんですけど
Form Control Styling Level 1 など: Cybozu Frontend Weekly (2025-03-25号)
Form Control Styling Level 1 など: Cybozu Frontend Weekly (2025-03-25号) こんにちは！サイボウズ株式会社フロントエンドエンジニアのsaku (@sakupi01)です。 はじめに サイボウズ社内では毎週火曜日にFrontend Weeklyと題し「一週間の間にあったフロントエンドニュースを共有する会」を開催しています。 今回は、2025/03/25のFrontend Weeklyで取り上げた記事や話題を紹介します。 取り上げた記事・話題 CSS Form Control Styling Level 1 First Public Working Draft CSS Form Control Styling Level 1 の First Public Working Draft が公開されました。 長年OSやブラウザ間で一貫し
はじめに AIによるプログラミング支援ツールの進化は目覚ましく、特にClineとSonnet 3.7の組み合わせは、プログラミングのパラダイムを大きく変えつつあります。本記事では、これらのツールがどのようにプログラミングの方法論を変革し、開発者の役割を再定義しているかについて、実践的な知見を共有します。 Sonnet 3.7: 『真似プログラミングの天才』 Sonnet 3.7の現在の個人的評価は、『真似プログラミングの天才』と表現できます。これは、すでにインターネット上に存在する類似コードを微調整して作成することが非常に得意という意味です。特にフロントエンドやゲーム開発が得意なのは、これらの分野のコードが学習データに豊富に含まれているからでしょう。 例えば、「C#のバックエンドで、フロントエンドがBlazorのシステムを作って」と指示すると、すぐに実用的なシステムを構築してくれます。しか
Hello, Playwright!! 〜プログラミング初心者2人が取り組みを振り返る〜 - SmartHR Tech Blog
こんにちは！QAエンジニアのetoとshibachokuです。本記事は品質保証部連載第11弾です。今回はプログラミング初心者である私たちがPlaywrightにチャレンジし、実施してきた取り組みについて語った内容をブログにしました。初心者あるあるな話が結構出たのではないかと思います。 インタビューアーは品質保証部マネージャーのtarappoさんです。 ※tarappoさんについては以下の記事をぜひご覧ください。 tech.smarthr.jp 自己紹介 tarappo：品質保証部のtarappoです。今回は労務ユニットBのメンバーが最近すすめていたPlaywight周りのことについてお二人と話せればと思います。 eto：品質保証部労務ユニットBに所属しているetoです。よろしくお願いします。 shibachoku：同じく労務ユニットBに所属しているshibachokuです。よろしくお願いし
GitHub - executeautomation/mcp-playwright: Playwright Model Context Protocol Server - Tool to automate Browsers and APIs in Claude Desktop, Cline, Cursor IDE and More 🔌
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
【clinerulesの書き方】Cline x Next.js での AI駆動開発に使っているテンプレートと使い方を紹介してみる - Qiita
はじめに みなさん、AI 駆動開発してますか？ 最近、いろんな AI エージェントが登場してきて、AI 駆動開発が盛り上がってきていますね。 私はこれまで、業務やプライベートの両方で、生成 AI や AI エージェントを使って開発をしてきました。 生成 AI 系 ChatGPT Gemini Claude AI エージェント GitHub Copilot Cursor Cline この中で、個人的には Cline が一番使いやすく、特に Next.js との相性が良いと感じています。 今回は、最近特に話題の AI エージェント Cline と Next.js を組み合わせて開発する際に、私が使っている設定ファイルを紹介してみたいと思います。 一応、数行を書き換えれば他の技術スタックでも使えると思いますが、今回は Next.js を例にして紹介していきます。 Cline とは Cline は
1. はじめに 日本時間2025年3月25日、Microsoftが自社開発のブラウザ自動化ツールPlaywrightがModel Context Protocol (MCP)に対応したと発表しました。この発表は一見すると技術的なアップデートの一つに過ぎないように思えますが、実は生成AIとブラウザ自動化の融合という観点から見ると、ビジネス現場に大きな変革をもたらす可能性を秘めています。 これまで生成AIは主に情報提供や内容生成が中心でしたが、MCPに対応することで、AIがブラウザやデスクトップアプリケーションを直接操作できるようになります。つまり、AIが「考える」だけでなく「行動する」能力を手に入れたといえるでしょう。本記事では、PlaywrightのMCP対応の概要と技術的背景、そしてこれによって可能になる新たなビジネスユースケースについて解説します。 また、後半で試しにClaude fo
nicar-2025-scraping/README.md at main · simonw/nicar-2025-scraping
Interested in new and effective advanced web scraping techniques? Join this session to learn about: Video scraping: a new technique where you take a screen capture video and feed it into Google's Gemini models to turn it into structured data. Using image models such as Gemini, GPT-4o and Claude 3.7 Sonnet are also extremely effective. It's possible to extract structured data from images, or poorly
Playwright MCPとは？Playwright MCPとMastraを連携する方法もご紹介｜ChatGPT研究所
はじめに先日発表され注目を浴びている、Playwright MCP。 Playwright MCPを使うと、ブラウザの操作を外部から簡潔な指示で実行できるようになります。 さらに、Mastraと組み合わせることで、AIが自然言語の指示を解析し、Playwright MCPを介してブラウザを操作する流れを構築できます。 実際の動作の様子： 実際の動作イメージとしては、今回ご紹介する方法を使えば、以下のようにブラウザを自在に操作するAIエージェントを構築できます。 今回の記事では、Playwright MCPとは何か、そして、今話題のMastraと連携する方法を解説します。 Playwright MCPとは1. Playwrightとはまず、Playwrightはブラウザを自動操作するためのツールです。 通常、何かのウェブ操作を自動化するには「Chromeを起動してページを開き、ボタンをクリッ
第二版 VSCode の Rules for AI 全体のルール設定 翻訳 GitHub Copilot - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 注意: この記事はGitHub Copilotの指示書の自分なりの使い方です。 GitHub Copilotに新しい機能が追加されたので、その機能と自分なりの使い方がメインとなります。 翻訳部分は、第一版に相当するSCode の Rules for AI 全体のルール設定 翻訳 GitHub Copilotを御覧ください。 まとめて１ファイル 複数ファイルに分割 どのような形だろうとGitHub Copilotには伝わります。 この記事は、 GitHub Copilotに正確な情報を伝えつつ、 人間とAIとのギャップを埋めるための指示書
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
こんにちは！アルダグラムでエンジニアをしているshige_sです 今回、Magicpodに新しくリリースされた「繰り返し処理」機能についてご紹介します。また、弊社でのE2E自動テストの取り組みについても触れながら、この機能の活用方法をお伝えします。 繰り返し処理とは 「繰り返し処理」は、特定の条件が満たされるまで処理を繰り返すことができる新機能です。例えば、以下のようなケースで活用できます。 カレンダーUIで特定の年月が表示されるまで「月送りボタン」を押下する 弊社では、カレンダーUIを操作するシナリオが多く存在していました。これまでは、毎月「特定の日付」をクリックする際に、ロケーターを修正する作業が必要でした。 当初はシナリオ数が少なかったため問題ありませんでしたが、昨年にはシナリオ数が約70に増加し、メンテナンスコストが課題となっていました。 そんな中で、「繰り返し処理」機能がリリース
こんにちは、SmartHR プロダクトエンジニアの chanMisa と ushiboy です。 この記事では、SmartHR に入社したフロントエンドエンジニアの視点から、日々の業務や取り組み、開発体験を通して感じたギャップや魅力をお伝えします。 共同執筆者である私たち 2 人の掛け合いを通して、よりリアルな開発現場の様子をお届けします。 SmartHR で働くフロントエンドエンジニアの仕事について参考になれば幸いです。 多様なチームとフロントエンドエンジニアの役割 チームの構成 フロントエンドエンジニアの役割 開発環境・ライブラリなどの技術スタック 開発環境と技術スタック チーム横断の情報共有とアクセシビリティへの取り組み フロントエンド定例会と「フロントエンドこれだけはやっておけリスト」 アクセシビリティへの取り組み 開発体験 SmartHR UI ESLint ボイラープレート ま
少し前にComputer Useというというものが出ました。これは仮想のブラウザを生成AIが操作することで自動で作業を行うというものです。 とは言っても自分の環境ではないため、速度ももっさり、スクショも取るので料金もすごく高い。ということでした。以下をご確認ください。 「Computer Use」Anthropic社のClaudeがPCを操作する新機能を使ってみた Anthropicは現地時間の2024年10月22日に生成AIがPCを操作することができる機能「Computer Use」をパブリックベータ版として公開しま… そこで実際にローカル上のブラウザを動かしてしまおうというのがBrowser Useです。Computer Useの場合にはClaude専用の技術だったのでそこをほかのLLMでも使えるように。というところもポイントです。 ただ、操作するのにコードがいたのでそれではものたりな
はじめに 最近、多くのサービスがサブスクリプション方式になっていますよね。Netflix、Spotify、Amazon Prime、各種SaaSツールなど、私たちの生活や仕事を便利にするサービスが月額や年額で提供されています。これらは確かに便利である一方、気づかないうちに毎月の固定費が増えてしまい、「これ、何の支払いだったっけ？」と明細を見て驚くことも少なくありません。 さらに厄介なのが解約手続きです。サービスごとに解約方法が異なり、以下のような問題が生じています： 「解約ページがどこにあるのか見つからない」 「解約手順が複雑で、途中で諦めてしまう」 「解約しようと思っても後回しにしてしまい、無駄な出費が続いてしまう」 「解約ページに辿り着いても、引き止めの策略に引っかかってしまう」 このような悩みをAIの力と最新の自動化技術を使って完全に解決したいと考え、本プロジェクトを立ち上げました。
はじめに Playwright MCP を使って、自然言語から E2E テストを実行できるかどうかを試してみました。今回は、デスクトップ版の Claude を利用して、プロンプトを入力してテストを実行してみます。テスト対象のアプリケーションは、ブラウザベースで操作可能な TODO を管理するサンプルアプリを対象としました。 Playwright MCP の詳細については、公式のドキュメントを確認してください。 実行環境 Claude for Mac: 0.9.1 Claude Pro プラン（Free プランでも制限内で、実行はできます） @playwright/mcp: 0.0.9 テスト対象のサンプルアプリについて テストを実行するサンプルアプリケーションは TODO タスクを CRUD できるようなシンプルな WEB アプリです。以下のような機能があります。 タスクを新規作成、編集、
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
AI駆動開発で苦労した話 〜笑えないけど笑うしかない日々〜
Microsoft Playwright MCPが切り拓くLLMとブラウザの新たな統合
Model Context Protocol (MCP) サーバを使ってみた・作ってみた
Playwright MCP技術解説 〜次世代ブラウザ自動化の可能性〜 - Qiita
なるべくWSL側に寄せつつplaywright-mcpをClaude Desktopで使えるようにする
WebSpeedHackathon2025 をやってみよう
OpenAI Responses API 入門 (11) - Computer use｜npaka
Vercel AI SDK で MCP クライアントをツールとして利用する
Microsoft 製の ブラウザ操作 MCP が実用レベルだった件
OpenAI Responses API と Agents SDK リリースのまとめ
個人開発：Next.js はじめてのセキュリティ対策覚書 - izanami
2025-03-12のJS: React Aria March 5, 2025、Firefox 136.0、TypeScriptコンパイラをGoに移植
ClaudeでPlaywright MCPを使う（Windows）
Günther Brunner (グンタ) on X: "【朗報】マイクロソフトが「Playwright MCP」をリリース！ブラウザ自動化の常識を覆す Browser Useなど他ツールと比較した圧倒的メリット： ✅ スクリーンショット不要のアクセシビリティ構造解析 ✅ 軽量・低コスト・高速な処理で開発効率化 ✅ ビジョンモデル不要でLLMと直接連携 ✅"
2064年もエンジニアで稼ぎ続けるには Python歴20年のベテランが語る、生成AI時代のキャリア戦略 | ログミーBusiness
『真似プログラミングの天才』が切り開く – Cline & Sonnetによるプログラミング革命
PlaywrightのMCP対応で広がるビジネス自動化
Release v1.51.0 · microsoft/playwright
Magicpodで繰り返し処理が使えるようになりました！
入社してわかったSmartHRのフロントエンドエンジニア - SmartHR Tech Blog
Browser Use WebUI のWindows環境でのインストールから使い方までを解説
Computer useでサブスクの解約をほぼ自動化してみた話
Playwright MCP を使って、自然言語で E2E テストを実行してみた - Qiita