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テストにより、部分的な単体テストや統合テストでは見逃されがちな問題を発見することができます。
NextAuth (Auth.js) で認証させているWebアプリをPlaywrightなどでE2Eテストする際に、認証をどうやってさせるか、あるいは回避するかが悩ましい部分です。 もし採用している認証方式が、単純なID/パスワード認証であればテストユーザを作成し、Playwrightにパスワードを入力させれば認証できるので問題はありません。 しかし、Google認証などの外部のプロバイダを経由するような場合は、E2Eテストをすることが難しくなります。そこでこの記事では、NextAuthの認証済み状態をPlaywrightで再現させる方法を紹介します。 やり方は大きく2つ NextAuthの設定に依存してやり方は大きく2つあります。 セッションデータを database で管理している場合 セッションデータを jwt で管理している場合 データベースの場合 セッションデータをデータベースに
はじめに こんにちは。QCの佐藤です。 月日が経つのは早いもので、QCメンバーも増え、多くのメンバーがブログを書いてくださっており嬉しい限りです😊*1 ANDPADで韻を踏む - ANDPAD Tech Blog アンドパッドラップの作り方 - ANDPAD Tech Blog QAがGoで始めるテストデータ作成の自動化 - ANDPAD Tech Blog ANDPADのQualityControlを紹介します！2023 - ANDPAD Tech Blog 私がブログを書いたのはもう2年前...（徐々に間隔が長くなっている...） 今回は私の担当しているプロジェクトでの、E2Eテスト管理・運用方法についてお話します。 以下のような課題ってE2Eテストあるあるですよね (´;ω;｀) E2Eテストの運用が属人化してしまっている... むか～しに作ってからはただ回しているだけ... テス
WEBアプリのE2Eテストを自動化 ~ Playwrightの機能紹介とコード例 | DevelopersIO
npm init playwright@latest 実行すると @playwright/testがインストール playwrightの設定ファイル(playwright.config.ts)が追加 サンプル用のテストコードが追加 が行われます。 テストコード自動生成 playwrightにはブラウザ操作でテストコードを生成する機能があります。 package.jsonのscriptsに以下を追加してnpm run test:genするか、 "test:gen" : "playwright codegen" npxでも実行できます。引数のURLは任意です。 npx playwright codegen http://localhost:3000/
ウェブサイトやモバイルアプリの、エンドユーザーからみた動作を確認するテストはE2Eテスト（End-to-End Test）と呼ばれ、このE2Eテストの自動化ツールは、アジャイル開発の普及もあって、今では多くの開発現場で活用されるようになりました。ブラウザ操作の自動化ツールSelenium（セレニウム）は日本でも有名になり、ご存じの読者も多いでしょう。しかし近年、E2Eテスト自動化の世界では、Seleniumに代わる新たなツールがたくさん登場し、急速に利用者を増やしています。この記事では、これらの新しいE2Eテスト自動化ツールのトレンドについて紹介します。 E2Eテスト自動化トレンドの変遷 筆者はテスト自動化ツールを作る仕事にもう15年近く関わっていますが、これまでのトレンドを見ていくと、「非OSS（非オープンソースソフトウェア）の時代」「Seleniumの時代」「多極化の時代」の3つに分け
E2Eテスト自動化変遷 〜ノーコードからCypress、そしてPlaywrightへ〜 - estie inside blog
こんにちは！estieでQAエンジニアをしているかすや（macho | きんにQA💪🏾 (@ma_cho29) / X）です。 今回ブログを書くにあたり、前回書いたのはいつだったかなー？と見返すと1年が経過していたことに気がつきました。 歳を重ねると体感時間が短くなると聞いたことがありますがそれでしょうか・・・ 入社3年目になる今年もやり残しがないように過ごしたいところです。 さて、今回はQA未経験だった私が1人目のQAエンジニアとしてestieに入社し現在までおこなってきたE2Eテスト自動化の変遷について語っていきたいと思います。 私がメインで関わっているプロダクト「estie マーケット調査」は約2年間でテストフレームワーク移行を2度おこないました。 当時の意思決定やその際に個人的に感じたフレームワークごとのメリット・デメリットなど含めて話したいと思います。 （あくまで僕の所属する
この記事は、Magic Moment Advent Calendar 2023 19日目の記事です。 こんにちは、 Magic Moment の一人だけ QAE の yano です。 一人だけの QAE が GUI を用いた E2E 自動テスト(以降、自動テストと表記)を書いて運用していくことは、自動テストの新規作成やメンテナンスを行うには限界がありますし、他の QA 活動が進まなくなるという問題が出てきてしまいます。 そこで今回は QAE ではなく開発メンバが主体となって自動テストの運用をできるように仕組みを整える必要がありました。 本記事では自動テストを開発メンバに布教していく際に感じた5つの壁と、壁に対して打ち込んできた楔について書かせていただこうと思います。 1の壁 : 何のための自動テストか分からない ユニットテストはあるけど自動テストはないという現場ですと、漠然と自動テストもあ
はじめに 2023年にZennチームにJoinしたdyoshikawaです。 このたびZennのE2Eテスト基盤をリプレイスしました。このような下回りの改善はユーザへの価値提供との距離が近い機能開発と比べてどうしても後回しになりがちな中、Publication Proという大きなリリースを迎えて少し開発が落ち着いたタイミングであり、E2Eテストを拡充できる土台を整えることで今後より安心して機能を追加していけるようにするために必要だということで実施しました。 各テストを独立実行可能にすることによる開発体験向上、CI（GitHub Actions）の実行時間短縮、そして将来を見据えてのCypressからPlaywrightへの移行を行いました。 本記事ではリプレイス前に抱えていた課題、それに対して打ち出した解決方針、そして具体的にどんなことをやったのかを紹介します。 抱えていた課題 前提として
モバイルのE2Eテストでのリトライ自動化とリリース完全自動化を作った話 - Uzabase for Engineers
NewsPicks Androidエンジニアの sefwgweo です。 今回はモバイルチームで取り入れているE2Eテストでのリトライ自動化とリリース完全自動化を作った話を紹介します。 モバイルチームでは品質担保のために毎晩定時にBitriseでE2Eテストを実行していますが、 端末やクラウドのネットワーク状態など、本来グリーンになるはずのテストでもエラーになることで余計な確認が必要でした。 自動リトライとリリース完全自動化を入れる前後では以下な違いがありました。 Before After 毎朝Slackで失敗したテストを目視後、BitriseのWebコンソールでPassするまで手動でRetryを実行し、テスト結果が正しいかわからないため3回以上失敗した場合にBitriseでエラーログをみて対処 テスト結果が正しい。失敗していた場合は、ほぼ確実にデグレが起きてるので、Bitriseで確認す
なぜテスト自動化に挑戦するのか？ ビットキーの取り組みを紹介 まずセッションの冒頭で、おだしょー氏がmablの特長について説明した。 mabl株式会社 Quality Advocate / Product Marketing おだしょー（小田祥平）氏 「mablは“めいぶる”と読みます。現在ではGoogle Cloud Operationsと呼ばれている『Stackdriver』の創業者であるIzzyとDanが2017年ボストンで創業しました」（おだしょー氏） 同社が提供している同名のサービス「mabl」は、DevOpsに適したテスト自動化プラットフォームである。ノーコードでUIテスト・APIテスト・ネイティブのモバイルアプリテスト（現在は早期アクセス）に対応しており、単一プラットフォーム上でアクセシビリティやパフォーマンステストも実行できるといった多くの特徴を備えているという。 DevO
tl;dr ChatGPT の画像入力でラフスケッチから簡単なマークアップを生成させることができる 生HTML はプロンプトとして弱い。 typescript(tsx) や headless-ui でコンテキスト情報を足すといい感じになる。 ChatGPT にスクリーンショットを入力し、 ChatGPT に puppeteer に操作させれて E2E 生成を自動化したり無限の猿BOT が作れるのでは。 マークアップエンジニアではなく、プログラマ視点でCSSを生成させたい。ロジックはこちらが考えるから、それに合わせたものを作ってくれ、という感じ。 まだ figma 連携とかは考えておらず、雑なラフを食わせたり、一般的なパターンを生成してもらえれば良いと思って試している。 とか考えてるうちに、うちの ChatGPT に画像入力が来た。まだAPIが来てないが、これが来ることを前提にマークアップ補
実はOffersMGRでもDatadog Synthetic Test を用いてテストを行っていました。 しかし、シナリオが2つしか無くカバー範囲も狭く、デグレが起こっても検知出来ない状況でした。 今回のPlaywrightを使ったE2Eテストの導入では既存シナリオの移行とOffersMGRの全ページが健全に動作しているかのチェックを目的としました。 今後を見据えた設計と運用 BtoCももちろんですが、BtoBのプロダクトは特に成長していくとともに安定したサービス提供が求められるのでテストの重要度は高くなります。 そのため、E2Eテストや結合テストの拡充は必然的に実施していくことになります。 一応、特定のComponentに対象を絞る事によってE2Eテストでも結合テストが出来ます。 しかし、E2Eテストは結合テストと比べ実行速度が遅く、最終的なテスト量はE2Eテスト < 結合テストが理想で
GitHub - stackframe-projects/pgmock: In-memory Postgres for unit/E2E tests
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
これからわかる通り、ステップの追加購入が必要です。 「CI/CD ツールと連携してたくさん回せますよ」というテストサービスも多いですが、計算したらステップ数足りないことに気づくことも同じくらい多いです。 どうせステップ数で制限がかけられているので、テストサービスは日次実行さえできれば良いのでは、とさえ思っています。 MagicPod 検討したプラン: ブラウザテストプラン・スタンダード Autify と BugBug は Chrome のシークレットモードで、 mabl はネイティブアプリでテストを作成するツールですが、 MagicPod は違います。 MagicPod でテスト作成をするときはリモートの VM を立ち上げ、その GUI をブラウザの iframe に映して操作します。 そのため、テストしたい自社のウェブアプリがブラウザの中に小さく表示されます。超独特です。 SALESCO
Kaigi on Rails 2023 現地参加して "E2E testing on Rails 2023" というお話をしてきた - YusukeIwakiのブログ
幸いに登壇のチャンスがいただけたので、Kaigi on Rails 2023に現地参加してきました。 E2E testing on Rails 2023 by Yusuke Iwaki - Kaigi on Rails 2023 2年前の「システムテスト解剖学」という発表の続編的な位置づけで、RailsのE2Eテストを取り巻く技術の解説に徹する発表でした。 自分の発表のスタイルとして、「◯◯したらいいよ」「△△ライブラリ使うといいよ」系の発表にはしたくないというちょっとしたこだわりがあり、とはいえ今回の発表は手を抜くと「Playwright最高だよ、めっちゃいいよ」になってしまうので、注意深くストーリー展開を練って本番に望みました。 Node.jsベースのテストランナーを話す必然性 Railsで何をしたら幸せになれそうか？の定義 じつはあれもこれもしなくても、1個だけ仕組みを作ればいいんだ
GitHub - ardatan/feTS: TypeScript HTTP Framework focusing on e2e type-safety, easy setup, performance & great developer experience
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
私が「WEB+DB PRESS, Vol.134」の特集1「実践API設計」の中で使っている用語「E2Eテスト」は、一般的な書籍で述べられているE2Eテストとは若干異なります。 どのように違うのかをウェブサービスのバックエンドのサービスで説明します。新たに図を起こすのが面倒なので、すでにある記事「マイクロサービスの開発とテストファースト／テスト駆動開発」からそのまま引用します。 この図では、「加盟店管理用APIマイクロサービス」が複数のマイクロサービスに依存しています。 一般的なE2Eテストとは一般的な書籍では、テストピラミッドにおける頂点にあるE2E（End-To-End）テストは、「加盟店管理用APIマイクロサービス」およびそれが依存するすべてのマイクロサービスを何らかの環境（たとえば、Docker、あるいは開発用のクラウド環境）にデプロイして「加盟店管理用APIマイクロサービス」をテ
PlaywrightとはPlaywrightはMicrosoftが開発している、オープンソースのWebテストフレームワークです。 v1.32から追加された新機能、UI Mode が業務でかなり重宝したので、これを使って実際にE2Eテストを書きつつ紹介していきます。 デモプロジェクトを作成適当なディレクトリでデモプロジェクトを作成します。 いくつか質問されますが全て Enter で OK です。 npm init playwright@latest実行が終わると以下のようなディレクトリ構造になっているはずです。 . ├── node_modules/ ├── package-lock.json ├── package.json ├── playwright.config.ts ├── tests │ └── example.spec.ts └── tests-examples └── dem
株式会社シャペロンのsrkwです。 シャペロンでは昨年、Playwrightを使ったE2Eテストによる各種機能の検証の自動化を導入しました。 E2Eテスト導入の背景や、チームへの浸透に向けた取り組みと反省等については別の記事で紹介しているので、興味のある方はこちらも併せてご覧ください。 この記事では、シャペロンの日次のE2Eテスト実行を支えるインフラ構成と、PlaywrightによるE2Eテスト導入によって溜まったtipsをご紹介したいと思います。同じようにPlaywrightを使ったE2Eテスト導入を検討している、あるいは導入済みで格闘している方にとって、少しでもお役に立てると嬉しいです。 日次のE2Eテスト実行を支えるインフラ構成 前提:Shaperonのテナント構成 シャペロンは製薬企業向けのコミュニケーション用SaaS、Shaperonを提供しており、Shaperonは利用テナント
コンテナでサーバーを動かして、それに対するリクエストをするE2Eテストを GitHub Actions 上で動かすことに苦労したので書く。 成果物repo: https://github.com/sadnessOjisan/e2e-gha お題となるサーバー コンテナに固めるから別に何言語でも良いので、まずはちょっとしたエコーサーバーを書いてみよう。 import Fastify from "fastify"; const fastify = Fastify({ logger: true, }); fastify.get("/", async function handler(req, res) { const q = req.query["q"]; res .status(200) .headers({ "content-type": "application/json", }) .se
はじめに初めての方ははじめまして、そうでない方はこんにちは。 タクシーアプリ『GO』のGO株式会社、QAエンジニアの松見です。 『GO』のプロダクトでもご多分に漏れずテスト自動化に取り組んでおりますが、『GO』をE2Eでテストするには少なくとも2つ以上の異なるアプリを連携した自動テストを構築する必要がありました。これは筆者にとって未知の経験でしたので、概要レベルでまとめたいと思います。 E2Eテスト自動化の背景まずそもそも何故わざわざE2Eでのテストを自動化するのか？という点はここでは割愛することにします。アプリ単体での自動テストは既に部分的に実現されていますが、今はE2Eでの自動テストが必要でした。 『GO』サービスE2Eテストの課題プロダクト間連携『GO』のサービスは複数のプロダクトが互いに連携して成立しています。 このため、E2Eで自動テストするにはそれぞれをいい感じに連携させる必要
FlutterアプリをE2Eテスト可能にするための実装ガイドラインをMagicPodが公開MagicPodによるFlutterアプリの正式サポートも同時に開始 株式会社MagicPod（本社：東京都中央区、代表取締役：伊藤 望）は、モバイルアプリの自動テストフレームワークAppium及び、Appiumを内部で利用する各種E2Eテスト自動化ツールに対し適用可能な、「E2EテストのためのFlutterアプリ実装ガイドライン」を公開したことをお知らせします。尚、このガイドラインは、MagicPod以外の自動テストツールでも使える汎用的な内容となっています。 背景 Flutterは、2018年にGoogleからリリースされたオープンソースのモバイルアプリ開発フレームワークです。1つのコードベースからiOS、Android、Web、デスクトップ、その他のプラットフォーム向けに高品質なネイティブアプリ
こんにちは、DRAWER Enabling QAチームの猿渡です。 この記事ではDRAWER QAチームで進めているE2Eテスト自動化についてご紹介します。 課題 CADDi DRAWERにはQAチームがあります。品質保証業務は、開発エンジニアや外部パートナーなど様々な方と連携し行っています。 現在QAが行っているテストは、システム全体をスコープにしたエンドツーエンド（E2E）テストです。。 CADDi DRAWERでは、DRAWER Product Testing Guidelineにより、以下のテストカテゴリを定義しており、E2Eテストでは、Test Size: Largeの「Story Tests」と「Scenario Tests」のCategoryに対してソフトウェアテストライフサイクル（STLC）を行っています。 [DRAWER Product Testing Guideline
Kaigi on Rails 2023 発表スライド
複数サーバーでE2Eテストを並列実行してみた - RAKUS Developers Blog | ラクス エンジニアブログ
noriharu3 です。 E2Eテストの実行時間短縮を目指して、複数サーバーでテストを並列実行してみましたのでご紹介します。 複数のサーバーでE2Eテストを実行する方法 E2Eテストを並列実行させる E2Eテストを複数のサーバーで並列実行させる 結果 Before After 最後に 複数のサーバーでE2Eテストを実行する方法 元々E2Eテストは以下の構成で実装されていました。 Java Gradle Selenium Gradleを使用していたので並列実行するだけなら、パラメーターを設定するのみ。 なのですが、今回はE2Eテストを1つのサーバーで並列実行するのではなく、複数サーバーでE2Eテストを並列実行できないか模索しました。 理由としては、E2Eのテストケース毎にDBのロールバックが必要となっていたため、 1つのサーバーで並列実行することがそもそもできなかったからです。 E2Eテス
【QAチームブログリレー4日目】 こんにちは！ エムスリーエンジニアリンググループ QAチームの城本（@yuki_shiro_823）です。普段は担当しているBIR（Business Intelligence and Research）チームで品質向上のためにあれこれしています。 今回はE2Eテスト自動化サービスmablを利用してテストケースを作成・運用していく際に、レビュールールを作った話を紹介します。 前提 ルールの必要性 ルールの作成プロセス ルールの詳細解説 命名規則 作成上のルール レビューフローのルール ルールの運用と効果 まとめ We're hiring！ 最近撮った雨の日のアジサイ。スマホカメラにしてはうまく撮れて気に入ってます 前提 エムスリーではテスト自動化にローコード自動化サービスmablを利用しています。 mablとはブラウザの操作を記録することにより、ローコードで
9/7に行われた技育CAMPアカデミアというイベントでPlaywrightについて話をしてきました。テストというと、設計手法であるところのテスト駆動開発は別としてちょっと業務っぽい感じがして学生さんにはちょっと響かないかな、というのも心配でしたが、アンケートを見る限り、わかりやすかったという声も多くてほっとしました。 次のスライドが今回の資料です。スライドの内容の多くはPlaywright連載始まりますに掲載されている記事にもぼつぼつある内容も多い（APIテストはないですが）のですが、本エントリーでは発表の最後に触れたChatGPTなどの生成AIを使ったE2Eテストの生成について説明していきます。 ChatGPTが話題を席巻してしばらく経ちます。とはいえ、内製開発での利用以外はソースコード開発にばりばり使う、みたいな宣言はあまり聞かない気がします。利用を制限している会社も数多くあります。
本ガイドラインについて このページでは、「E2EテストのためのFlutterアプリ実装ガイドライン」をダウンロードできます。（登録不要、無料） このガイドラインに準拠してFlutterアプリを作成することで、AppiumやAppiumを内部で利用するE2Eテスト自動化ツールでアプリのテストを自動化できるようになります。 「E2EテストのためのFlutterアプリ実装ガイドライン」（2023年7月31日版）のダウンロード
FlutterにおけるE2Eテスト導入について | CyberAgent Developers Blog
はじめに こんにちは、Amebaマンガでモバイルエンジニアをしている内定者バイトの成尾 嘉貴（@naruogram）です。Amebaマンガの取り組みの一環として、E2Eテストの導入しました。 本記事では、FlutterアプリにおいてのE2Eテスト導入までの流れについてご紹介させていただきます。 ※ 本記事では、個人的見解であり、特定のサービスを優遇するものではありません 目次 1. なぜE2Eテストを導入検討をしたのか 2. FlutterアプリでのE2Eテストの選択肢について 3. チームに最適なツール選定について 4. AutifyとMagicPod検証 5. E2Eテストを運用開始するために 1. なぜE2Eテストを導入検討をしたのか 弊チームがE2Eテスト導入する理由は大きく二つあります。 1. 手動テストによる時間とコストの負担を軽減 大規模なリリースや中規模のリリースの度に手動
pytest で E2E テスト
pytest で E2E テストが本当に便利です。 実際どう使っているかを紹介しておきます。 なぜ Python でテストなのか 自分が Python に慣れている 自分にとって pytest を超えるテストランナーが今のところない SpaceX がテストを Python で書いてて、じゃぁ Python でいいかとなった https://old.reddit.com/r/spacex/comments/gxb7j1/we_are_the_spacex_software_team_ask_us_anything/ft0bz35/ We use C & C++ for flight software, HTML, JavaScript & CSS for displays and python for testing. Rye のおかげで Python の環境構築が苦にならなくなった htt
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Playwrightを使ったE2Eテストを導入した話 - Uzabase for Engineers
E2EテストでNextAuth認証(OAuthなど)を突破する方法
E2Eテストの運用を属人化しないための3つの取り組み - ANDPAD Tech Blog
E2Eテスト自動化ツールの最新トレンド──Playwright？ ノーコード？ Seleniumから多極化の時代へ！
E2E 自動テストの布教に立ち塞がる5つの壁と打ち込んだ楔
ZennのE2Eテスト基盤をリプレイスしました（開発体験向上、CI時間の短縮、Playwright移行）
E2Eテスト工数を月46時間も削減！ 「mabl」で始めるテスト自動化
ChatGPTの画像入力を使ったマークアップの自動生成とE2E自動化に関する考察
E2Eテストを導入した時に考えた設計と実装と運用について | Offers Tech Blog
モダンな自動E2Eテストサービスを調べてみた(2023年クリスマス版)
E2Eテスト vs E2Eテスト: 柴田 芳樹 (Yoshiki Shibata)
PlaywrightのUI ModeでE2Eテストに入門する｜jig.jp engineers
PlaywrightによるE2Eテスト自動化を導入したので各種構成とtipsをご紹介
ありのままのコンテナを使って E2E テストを GitHub Actions 上で行う
タクシーアプリ『GO』のE2E自動テスト概要｜松見勇気
FlutterアプリをE2Eテスト可能にするための実装ガイドラインをMagicPodが公開
CADDi DRAWERにE2Eテスト自動化の導入を進めています - CADDi Tech Blog
E2E testing on Rails 2023
E2Eテスト自動化サービスmablでテストケースを作成する際のルールを作った話 - エムスリーテックブログ
ChatGPTでE2Eテストコード自動作成 | フューチャー技術ブログ
E2EテストのためのFlutterアプリ実装ガイドライン | MagicPod: AIテスト自動化プラットフォーム