こんにちは、株式会社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/
Playwright が昨年１年間で大幅パワーアップしていたので、使い方を確認したときの記録のまとめです。 ブラウザを自動操作できるということは、簡単なスクレイピングやブラウザ側のテスト自動化が簡単にできるようになります。 特に、Python での解説がまだまだ少なかったので、自分の学習を含めてまとめました。 今回は入門編ということで全体像をつかみつつ使用方法の流れを確認していただければありがたいです。 Selenium や Puppeteer を使っている方も、一度試す価値ありと思っています。 選定した理由 ブラウザのテストを Python で自動化したかったんです。 私なりの要件がありまして、非常にわがままな要件でしたが余裕ですべてクリアしました。 Python で書けること。社内で Python を使える方が多いので。pytest と連携してくれるとなおうれしい。 Docker コン
どうもこんにちは、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のテストも、実
マイクロソフト、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
はじめに 乗り遅れましたが巷では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 の VSCode 拡張を使って GUI 操作のみでテストの記録や実行する方法について紹介します。 Playwright の VSCode 拡張とは？ Playwright の VSCode 拡張は、Playwright の作成元である Microsoft が公式に提供している拡張機能で、VSCode 内で直接ブラウザテストの記録や実行を支援するための便利なツールです。 GUI 操作を中心に、テストの記録や実行を手軽に行うことが可能となります。 VSCode 拡張のインストールは、以下のリンクから行うことができます。 VSCode 拡張を活用してテストを書く 本記事では、シンプルな ToDo アプリを例にテストの作成方法を説明します。Playwright のインストール方法は、公式ドキュメントをご参照ください。その後、VSCode に Playwright
はじめに Playwright を使うことで比較的簡単に E2E テストを実装することができます。しかし、通常テストコードは実装したら終わりということではなく、継続的にメンテナンス（保守）が必要になります。その際に保守しやすいように実装するため、Playwright の公式ドキュメントに記載されているベストプラクティスの中で参考になりそうな部分を確認しておこうと思います。 テストの独立性を高める 可能な限りテスト間の依存が無いようにして、テストを分離すると良いというプラクティスです。各テストが独立していることで、 １つのテストが失敗しても他のテストに影響しない テストの順序を考慮する必要がない テストをシンプルに保つことができる あたりのメリットがあるかと思います。また、特定の処理（例えば特定の URL に遷移する処理）の繰り返し実装するのを避けるために before and after
Playwrightの公式ドキュメントに「Best Practices」というページがあったので翻訳してみました。 原文： Best Practices | Playwright 目次 目次イントロダクションテスト哲学ユーザから見えるふるまいをテストするテストはできるだけ分離するサードパーティの依存関係をテストしないデータベースを使ったテストベストプラクティスロケータを使うメソッドチェーンとフィルタリングの使用XPath や CSS セレクタよりもユーザー向けの属性値を優先するロケータの生成codegen を使ってロケータを生成するVS Code 拡張機能を使用してロケーターを生成するウェブファーストのアサーションを使う手動でアサーションを使わないデバッグの設定ローカル環境でデバッグするCIでのデバッグPlaywrightのツールを使うすべてのブラウザでテストPlaywrig
はじめに この記事では、 フロントエンドの開発において意義のあるテストはなにか？ それらをコスパよく実現するためにはどうすればよいか？ について考えて、作った構成を紹介します。 前提 下記の技術スタックを利用していますが、これ以外のスタックでも応用可能な仕組みが多いと思います。 Next.js Storybook playwright msw msw-snapshot （拙作） 注意事項 この記事の構成は、まだまだ実験的な機能だったり怪しい技術が一部採用されています。 msw-snapshot 拙作のライブラリであって、動作が怪しい可能性がめっちゃあります。 Next.js の testmode playwright + msw を実現するために必要でした。 まだまだ全然まともに動かないかもしれません。（サンプルリポジトリの単純なテストは動いた） サンプル 下記のリポジトリにサンプルを用意
こんにちは。カミナシにて業務委託としてフロントエンドを担当している田村(@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 テスト
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のCI実行時間を短縮した話 - カミナシ エンジニアブログ
カミナシのソフトウェアエンジニアisanaです。 カミナシレポートの開発に携わっています。 私たちのチームでは、Webアプリケーションの品質担保のため、Playwrightを用いたブラウザテストを実装し、GitHub Actionsで実行しています。しかし、このCIプロセスにおいていくつかの課題がありました。 他方、ソフトウェア開発においては日々寄せられるVoCに対応したり、新機能の開発を行うなかで、負債や課題を上手くハンドリングしていく必要があります。 本稿では、CIプロセスにおける課題をコスパよく解決するための改善策と、その過程で遭遇した「ハマったポイント」について、具体的な設定例を交えながらご紹介します。 PlaywrightやGitHub Actionsを利用している開発者の方々にとって、少しでも参考になれば幸いです。 前提となる環境 本稿で紹介する事例は、以下の環境を前提としてい
E2Eテストにおける要素選択のベストプラクティス
こんにちは。Autifyの品質エバンジェリストの末村です。 もう5年前にもなりますが、なぜE2Eテストでidを使うべきではないのかという記事を書きました。この記事はありがたいことに長い間閲覧されており、弊社ブログの人気コンテンツの一つとなっています。 一方で、5年という歳月はソフトウェア開発のトレンドを変化させるには十分すぎるほどに長いです。テストツールの面では Playwright が新たな選択肢として加わった他、 testing-library によるアクセシビリティ属性を用いた要素探索が新たなベストプラクティスとして登場しています。 この記事では、E2Eテストにおける要素探索の考え方の変遷をおさらいしつつ、ベストプラクティスについて説明します。 要素選択の考え方 まずは、要素選択の考え方についておさらいしておきましょう。要素選択とは、読んで字の如く、Webページ内の特定の要素を探すこ
非エンジニアもMarkdownでテストを書ける — PlaywrightとGaugeによる自動テスト - エムスリーテックブログ
はじめに エムスリーテクノロジーズの永江 (@yukinagae)です。 2025年7月からエムスリーテクノロジーズに入社し、グループ会社への技術支援をしています。詳しい業務内容は、前回の記事でも紹介しました。 支援内容は、各グループ会社の状況や参画するエンジニアのスキルによって変わりますが、共通してCI/CDの強化から始めることが多いです。なかでも特に自動テストの強化は、最初に手がけるべき施策だと考えています。 その理由は、次の3つです。 導入ハードルが低い: 既存のコードに影響を与えずに導入できる 既存コードの理解が深まる: テストを書く過程で自然とコードの動きやドメイン知識が身につく 成功体験を積める: 自動テストは必要だとわかっていても後回しにされがち。テストを強化することで、チームに喜ばれ、小さな成功体験を積み重ねることができる このように大きなメリットがある自動テストですが、個
【Claude】Playwright-MCPで変わるテスト自動化の世界！初心者でも使えるE2Eテスト入門 - Qiita
テスト自動化の悩みから解放されるPlaywright MCP アプリ開発をしていると、「ユーザーが実際に使うときにちゃんと動くかな？」という不安がつきまといますよね。エンドツーエンドテスト（E2Eテスト）は、UIからAPIまで全体の流れをテストできる素晴らしい方法なんですが、正直言って、従来のやり方はめちゃくちゃ大変でした。 複雑なコードを書いたり、テストシナリオを考えたり...。特に私のような新米プログラマーにとっては、高い壁だったんです。でも、Playwright MCPの登場で、この状況が劇的に変わりました！ Playwright MCPの最大の魅力は、自然な日本語のコマンドでブラウザ操作やAPIテストができること。もう複雑なコードを書く必要はありません。技術に詳しくないチームメンバーでも、簡単にテストを作成できるようになったんです。これは革命的な変化だと思いませんか？ Playwr
Best Practices | Playwright
Introduction This guide should help you to make sure you are following our best practices and writing tests that are more resilient. Testing philosophy Test user-visible behavior Automated tests should verify that the application code works for the end users, and avoid relying on implementation details such as things which users will not typically use, see, or even know about such as the name o
はじめに ウェブブラウザの自動操作は長い間、テスト自動化やスクレイピングの重要な分野でしたが、大規模言語モデル（LLM）の台頭により、まったく新しい可能性が開かれつつあります。マイクロソフトの最新プロジェクト「Playwright MCP（Model Context Protocol）」は、LLMとブラウザの間に革新的な橋を架け、AIがより効率的かつ確実にウェブと対話できる世界を実現しています。 本記事では、Playwright MCPの技術概要、主要機能、そして実際のビジネスにおける活用事例について探っていきます。 Playwright MCPとは？ Playwright MCPは、マイクロソフトが開発したModel Context Protocol（MCP）サーバーで、Playwrightのブラウザ自動化機能をLLMに提供します。従来の画像認識やスクリーンショットベースのアプローチとは
NotebookLMは、Googleが提供するAI搭載のノートブック機能で、既に多くの人がさまざまな用途で活用していることでしょう。 しかし、NotebookLMは現時点(2025/06/09)ではAPIが提供されていないため、複数のソースを一括で流し込むことができず、一旦手元でテキスト化したり、各ソースの手動でのアップロードが必要になってしまい面倒です。 この記事では、Playwright MCPを使ってNotebookLMに自動でソースを流し込む方法を紹介します。 Notion MCPとの連携 今回は、Notion MCPとPlaywright MCPを併せて使うことで、NotionからNotebookLMへのソースの流し込みを実現します。 各種MCPの概要やセットアップは省略するのでこの辺の公式ガイドを参照してください。 今回はCursorでそれぞれのMCPを読み込みました。Play
Developers Summit 2025（2025.02.13-14） - 翔泳社イベント 1日目 13-E-9 あなたのプロダクトが見たい！個人開発リレーセッション で話したときの資料です。 https://event.shoeisha.jp/devsumi/20250213/session/5551
ブラウザ内テキスト探索の高速化というテーマで改善を行いました。公開許可は頂いていますが、先方の希望で社名は伏せさせていただきます。 技術的には「再現性がある木構造のノード探索の条件の生成、その実行の高速化」という少しR&Dっぽいタスクでした。Playwright のコードを参考にしつつ、個別により速いパーツで置き換えていく、というもので非常に興味深いものでした。こういう仕事は楽しいので、いくらでも歓迎です。 今回は最初はドメイン理解に時間をあてて、その後十分にドメイン理解が進んだら計測しつつ改善する、という流れです。 以下、敬称略。 相談内容 ブラウザを自動操作する技術を開発している。技術的には一種のE2Eテストの応用技術で、サーバーに要素の探索条件と、その操作を登録する。 今回の相談では、その要素探索が重くなってしまうケースがあり、これを改善してほしい、という依頼。とくにテキストを条件に
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
Go Conference 2025: Goで体感するMultipath TCP ― Go 1.24 時代の MPTCP Listener を理解する
はじめに Microsoft が 2025/3/29 に Playwright MCP を発表してから盛り上がっていますね。 「MCP」は「Model Context Protocol」の略です。生成AIにとってのUSBポートのようなもので、様々なデータリソースやツールとつなぐことが出来るものだと考えてください。 Playwright はブラウザを操作する E2E テストツールです。E2Eテストコードを人が書いて（またはブラウザ操作を記録して）プログラムがブラウザを操作するツールというものでした。Playwright MCP が登場したことで、 生成AIがブラウザを操作することが出来るようになります。 Cline で Playwright MCP の環境準備 ※環境構築手順は Cline と GitHub Copilot 両方書きました。お好きな方を使ってください。 Playwright
フロントエンド開発の効率化！Nx と Playwright でビジュアルリグレッションテストを賢く実施しよう - Techtouch Developers Blog
はじめに なぜ VRT が必要なのか？ VRTとは？ Nx と Playwright で賢く VRT を実施する どう賢く実施したか 結果 まとめ 参考資料 はじめに 「食べログ ラーメン TOKYO 百名店」の全店舗訪問を目指してラーメン巡りを続けているフロントエンドエンジニアの kenshin です。 フロントエンド開発者の皆さん、新機能を追加したり、ライブラリをアップデートした後に UI が予期せず変更されてしまった経験はありませんか？このような問題を素早く検知し、未然に防ぐ方法として、ビジュアルリグレッションテスト（以下、VRT）があります。 この記事では、Nx と Playwright を用いて VRT を効率的に行う方法をご紹介します！ なぜ VRT が必要なのか？ フロントエンド開発では、新機能の追加やライブラリのアップデートにより、予期せぬ UI 変更が発生することがありま
🔍Microsoftが発表したPlaywright MCPとは？― AIとウェブ自動化の“次の一手”をわかりやすく解説！｜Kyutaro
🔍Microsoftが発表したPlaywright MCPとは？― AIとウェブ自動化の“次の一手”をわかりやすく解説！ みなさん、「AIがウェブページを自分で操作する」技術で新たな展開がありました。Microsoftが新しく発表した「Playwright MCP」という技術。 この記事では、 🧠 Playwright MCPって何？ 🤖 何ができるの？ ☁️ なぜ注目されてるの？ という点を、エンジニアではない方にも分かりやすく、やさしい言葉とイメージで解説していきます！ 🧠 Playwright MCPって何？まず名前にある「Playwright」は、Microsoftが開発しているブラウザ自動化のツールです。もともとは、開発者がWebサイトの操作を自動でテストしたり、繰り返し作業を楽にするためのものでした。 そこに今回追加されたのが「MCP（Model Context Pro
Playwright & Vite ではじめる脱レガシー向け軽量 Visual Regression Test - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちは！フロントエンドエキスパートチームの @mugi_uno です。 みなさんは Visual Regression Test は普段活用していますか？ 昨今では事例もよく耳にするようになった印象です。一度使って手放せなくなった方もいるのではないでしょうか。 今回の記事では、通常のプロダクト新規開発とは異なる “脱レガシー” の文脈で Playwright を用いた簡易的な Visual Regression Test を試してみたので、導入に至る経緯と、どのように実施しているかを紹介します。 フロントエンドリアーキテクチャとサイレントリリース 現在サイボウズでは kintone のフロントエンドリアーキテクチャプロジェクトと称して、Closure Tools から React への脱レガシー作業が進行中です。プロジェクトの詳細については @koba04 が書いた次の記事をご覧くださ
最近は、LLMによるコード生成が日常的になっています。 それに伴って、テストはコードが正しく実行されているかを保証するために今後更に重要になっていきます。 そこでLLMにとっても人間にとっても、実行速度が重要な要素となりますが、特にe2eは実行速度が遅い点が課題です。 さらに実際のDBを用いたテストを行う際、並列に実行した場合にはテスト全体を冪等にすることは難しく、直列実行が一般的です。(GitHub Actionsのmatrixやコンテナで隔離すれば可能) 今回は、実際のDBを用いつつ、並列に実行し、e2e全体の実行時間を大幅に短縮しつつ堅牢にする方法を考えます。 今回使用する技術スタック Next.js NextAuth.js Prisma PostgreSQL Playwright Testcontainers Playwrightの問題点 webserver は、単一のサーバー起動
Playwrightを使ったE2Eテストを導入した話 - インフラ編 Playwright × Allure Report × AWS - Uzabase for Engineers
はじめに こんにちは。ソーシャル経済メディア「NewsPicks」の QA/SET チームの海老澤です。 先日は Playwright を使ったE2Eテストの導入について、紹介させていただきました。 今回は作成したテストをAWS 基盤上で動かす方法を紹介させていただきます。 前回の記事 tech.uzabase.com E2Eテスト実行のタイミング NewsPicksでは 下記のタイミングで E2Eテストを実行させています。 ①リリース時のカナリーデプロイ後 NewsPicks ではカナリーリリースを採用していてカナリーへのデプロイが完了した後、カナリーに向けてE2Eテストが動きます。 ②開発環境デプロイ後 動作確認をしたい場合に feature ブランチなどでデプロイ後 E2Eテストを実行できるようにしています。 本記事では主に 「②開発環境デプロイ後」 を例に紹介します。 実行方法 具
Web アプリケーション開発での VRT 導入は、ちゃんと運用するとなると以下のような多くの検討事項を伴います。 Storybook のストーリーベースで比較するか？それとも実アプリケーションの URL ベースで比較するか？ CI 上でアプリケーションをビルドして dev server を立ち上げるか、それともデプロイ先のアプリケーションにアクセスするか？ スクリーンショットの比較はどのように行うか？比較時の閾値はどのように設定するか？ 比較元のスクリーンショットはどのように用意するか？例えば Amazon S3 などのストレージ や GitHub Actions の actions/cache を使用する場合など コミットハッシュを用いて比較元のスクリーンショットを特定する場合、マージ先のコミットハッシュに紐づくスクリーンショットが存在しない時の対応は？ VRT の結果で差分が出たが、そ
はじめに StorybookとPlaywrightを連携してテストすることで、思っていた以上に良い開発体験が得られたので紹介します。 今回の記事で紹介するテストは以下のリポジトリで公開しています。 具体的には以下の点が最高でした。 独立したコンポーネント開発 Storybookを利用することで、UIコンポーネントを独立して開発・テストできます。これにより、コンポーネントの再利用性が向上し、効率的な開発が可能になります。 シナリオベースのテスト Playwrightを使ってシナリオベースのテストを実行できます。これにより、ユーザーの実際の操作に近い状況でのテストが可能となり、アプリケーションの品質を高めることができます。 クロスブラウザテストの容易さ Playwrightは、複数のブラウザでの自動テストをサポートしています。これにより、異なるブラウザでの動作検証が容易になり、互換性の問題を効
はじめに フロントエンドのテスト手法の 1 つに Visual Regression Testing（以下、VRT）があります。 これは、アプリケーションの画面を画像として保存し、画像の差分比較をすることで意図せぬ変更が生じていないかテストする方法です。 ここ数年で広く普及し、用語としても一般的になったように思います。 私も以前、とある OSS に reg-suit & Storycap を使った VRT を導入したことがあるのですが、その後もいくつか VRT のためのライブラリが登場したもののキャッチアップできていませんでした。 そこで今回は知識のアップデートを目的として、ここ最近登場した（と思われる）VRT のライブラリをいくつかご紹介します。 なお、今回紹介するツールはすべてこちらのリポジトリで試しています。 具体的な設定ファイルや動作結果を確認できるようになっていますので、ご興味が
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【令和最新版】令和のWebスクレイピング(クロール)【ベストプラクティス】
Python と Playwright でブラウザを自動操作させるコードを自動生成したよ - Qiita
Claude Codeとplaywright mcpを連携させると開発体験が向上するのでみんなやろう
Playwright MCPを使ってE2Eテストを楽に書く
Playwright MCP を使ってAIにUXを評価してもらう - Qiita
PlaywrightのVSCode拡張を使って効率的にテストを書く
Playwright を使いこなすためのベストプラクティス - Qiita
Playwrightのベストプラクティスを翻訳してみた
フロントエンドのテスト構成について考えてみた in 2023
理想のフロントエンドテストをたずねて三千里 - カミナシ エンジニアブログ
新しい UI テストの手法を提供するテストライブラリ SafeTest
Playwrightを使ったE2Eテストを導入した話 - Uzabase for Engineers
Microsoft Playwright MCPが切り拓くLLMとブラウザの新たな統合
Playwright MCPを使ってNotebookLMに自動でソースを流し込む
個人開発から公式機能へ: PlaywrightとRailsをつなげた3年の軌跡
Playwrightを参考にブラウザ内テキスト検索を高速化する (事例紹介:サードパーティスクリプト提供会社)
Playwrightはどのようにクロスブラウザをサポートしているのか
Playwright MCP を使ってAIにブラウザ操作をさせてみる（GitHub Copilot / Cline 環境構築手順付） - Qiita
Playwrightで実際のDBを用いてテストを並列実行し高速化する - 技術探し
GitHub Actions のみで、actions/cache も使わない最軽量の VRT
StorybookとPlaywrightがもたらす画期的なUIテスト
2023年にVisual Regression Testingを始めるならどんな選択肢があるか
www.youtube.com
anond.hatelabo.jp
www.asahi.com
kazuki.vp.bex.jp
tomtom1ono.hatenablog.com
sienta-life.com