Webページを監視して表示崩れが起きていないか検出できるE2Eテストを実装しました | Recruit Tech Blog
お世話になります、フロントエンド担当をしている小原正大です。Webページの表示を監視して差異があった場合、どのページで表示の変化が起きているかを知ることが出来るプログラムを実装したのでそのことについて書こうと思います。 何につかったの？ 僕がフロントエンドを担当しているサービス『料理サプリ』で大規模なフロントエンドコードのリファクタリング行う際に表示テストを自動化するために作成しました。『料理サプリ』はPC・スマホ合わせて大体350-400ページの表示パターンが存在する比較的規模の大きいサイトです。全ページに影響を与えるような作業は大規模な回収となり、今回のリファクタリングでは表示テストの計画などの段取りが必要でした。従来の人手によるQAでは細かいバグを見過ごしたり時間がかかり効率が悪いので、可能な限り自動化しようと考え実装しました。 実装の概要 この監視のシステムは以下の２つ実装を組合わ
E2EテストをSelenium Webdriver からCypress.io に移行した話 - 一休.com Developers Blog
こんにちは。 一休.comの開発基盤を担当しています、akasakasです。 今回は、E2EテストをSelenium WebdriverからCypress.ioに移行した話をしたいと思います。 一休のE2Eテスト事情 あれから、数年が経過して、、、 どうしてこうなった？？？ SeleniumではSPAへの対応が難しくなってきた なんでもかんでもSeleniumで頑張ろうとした弊害 いざリプレイスへ・リプレイスをする上で気をつけたこと 開発者フレンドリー 安定性 然るべきレイヤーでテストする（何でもかんでもブラウザテストにしない） 技術選定 Cypress.io とは？ Cypress.io のいいところ セットアップが楽 テストを書くことだけに集中できる CI連携が楽 Cypress.io の頑張って欲しいところ その他、移行に関しての細かい話 重複テストケースの排除 Page Objec
一休.comのE2Eテスト事情 ~ギリギリ話せるところまで話します~ /cybozu_ikyu_e2e
一休.com宿泊サイトのE2Eテスト事情をギッリギリまで話しました。このスライドを見た方は一休のエンジニアより一休のE2Eに詳しくなると自負しております。
ユニットテストがしにくい状態となってるコードをTestiumを使ったE2Eテストを書いてリファクタリングしてみる話です。 例えば、以下のようなjQueryで書いたコードは外(テストコード)から取り出すポイントがないので、ユニットテストを書くのは難しいと思います。(そもそもViewのコードなので) 特定のバージョンでの変更点を簡単に確認できるよう、 「Aの列のラジオボタンを選ぶと同じ行より一つ下にあるBの列のラジオボタンを自動で選ぶ」 という補助機能 $(document).ready(function () { // seq: シーケンス番号 $.each(["new_version", "old_version"], function () { $("input[name='" + this + "']").each(function (idx, elem) { if (idx == 0
メルカリの自動化＆品質保証グループ（Automation & QA Group：通称AQA）の おれたま@AHA_oretama です。 私は普段、テスト自動化やCI / CD を主に行っています。 今回は、Appium×Android E2Eテストのテスト結果の見やすさを改善し、テスト結果を可視化することで気づきが生まれた話について、紹介していきたいと思います。 テスト結果の見やすさ、可視化の重要性について いま使っているテストレポートの課題 Allure Framework 並列化した分だけレポートも分かれてしまうことへの対処 スクリーンショット、スクリーンレコード以外のアタッチメントを追加することができないことへの対処 過去のテスト結果と比較できないことへの対処 他の改善点 テストのタイムラインが見える トレンドも表示できる Looker 生まれた気づき 課題 終わりに テスト結果の
E2EテストをPhantomJSから、Puppeteer + Headless Chromeへ移行しました - LCL Engineers' Blog
Webエンジニアの森脇です。LCLでは、以前より「Capybara + PhantomJS」でE2Eテストを行っていましたが、「Puppeteer + Headless Chrome」へ変更しました。 元々は、軽くPuppeteerを触ってみるだけのつもりでしたが、できが良く本格的にE2Eテストへ導入することにしました。 本記事では、変更の経緯や、PuppeteerでE2Eテストを実装する上でのTIPSを紹介します。なお、Capybara + PhantomJSを利用したE2Eテストは、以下の記事でご紹介しております。 techblog.lclco.com 変更の経緯 PhantomJSは古めのWebkitをベースにしているため、一部のCSSがうまく適用されず、Headless Chromeへ移行を以前より考えていました。そんな中、PhantomJSの開発が終了したこともあり、移行すること
E2Eテスト基盤開発を担当して - Qiita
freee Engineers Advent Calendar 2016 12月17日担当の @futoase です。 現在、E2Eテスト基盤構築の担当をしています。1 Capybara、SitePrism および Selenium に触れていく中で自分や弊社メンバーから得た知見について記載します。 4点の内容となります。 Capybara + SitePrism Selenium E2Eの目的 E2E基盤構築を担当してみて思ったこと Capybara + SitePrism 同僚の @kompiro が Capybara + SitePrism を使うことを提案、フレームワーク化を行ってくれたのでテストケース作成に利用しています。2 Selenium/Appium Advent Calendar 2016にてSitePrismを利用したPageObjectsパターンを使ったテスト作成につ
TravisCI、SauceLabs、Protractorで始める簡単E2Eテスト入門 | チャットワーククリエーターズブログ
自転車通勤始めました。@kyo_agoです。この記事はE2EテストAdventCalendar -26日目です。 今日はGithub上でTravisCI、SauceLabs、Protractorを使って簡単に始められる継続的E2Eテストの方法を紹介したいと思います。 ゴールはGithubにPRする毎にTravisCIがProtractorを使ってSauceLabs上で検証した結果を教えてくれるところです。 登場するユーザ名（kyo-ago）、リポジトリ名（Protractor-SauceLabs-TravisCI-sample）は実際のものに置き換えて読んでください。 SauceLabsの登録まず最初にSauceLabsのアカウントを作成します。 この時点ではGithubのリポジトリも何らかの設定ファイルも必要ありません。 「Getting Started」を押してください。 ダイアログが
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テストにより、部分的な単体テストや統合テストでは見逃されがちな問題を発見することができます。
NightmareでE2Eテストしつつスクリーンショットとってgifに結合したら目視チェックが最高に楽になった - Qiita
最近またe2eを書いたりしてる。色々悩んだけど、やっぱNightmareを使うことにした。 Nightmareについては僕が前書いた記事を参考にしてください NightmareでE2E - Qiita Nightmareの良い点 Zero configuration というかただのスクレイパー 悪い点 プロセス立ちあげるのが遅い JSわかってないと読みづらい PrecepeterとかTestiumとかProtractor試したけどどれも走らせるだけでいっぱいいっぱいで、もう面倒臭い。 僕は行儀が悪いのでスクレイパーを走らせられればいいです。エビデンス() はスクリーンショットで確保する方向で。 連番のスクリーションショットを取りながらNightmareを走らせるサンプル Nightmare = require 'nightmare' class TestRunner extends Nig
こんにちは。AutifyのSET(Software Engineer in Test) 、末村(@tsueeemura)です。 皆さん、E2Eテストしてますか？以前はほぼSelenium一択みたいなところがありましたが、最近はPuppeteerやCypress、TestCafeなどいろいろなフレームワークがあり、ついつい目移りしてしまいますね！ さて、どのフレームワークを使うにせよ、E2Eテストを書く上で共通で意識しないといけない重要なファクターがいくつか存在します。 その一つが ロケータ です。操作や検証の対象となる要素を指定するためのキーのことです。 ロケータにはCSSセレクタやXPathが利用でき、idやclass、name といった属性を利用するのが一般的です。 今回はこのロケータについての話を書こうと思います。 ロケータとは 要素を一意に指定できさえすればロケータに使うものは何で
最近MailosaurというSaaSを使ってメール送信機能をテストしてみましたので、備忘がてら紹介メモを残しておきます。 Mailosaurとは? Mailosaurとは Email and SMS testing platformだそうです。 mailosaur.com メールがちゃんと送れているか?だとかメール本文/添付ファイルなどは意図通りか?をテストするのに便利な機能が提供されています。 Mailosaurってなんて読むの? 以下の動画をみたところ、カタカナだと「メイラソー」のように呼ばれていました。 www.youtube.com どんなことができるの? EメールやSMS関連のテストを行うための様々な便利機能が提供されています。 詳細は以下のドキュメントに記載されています。 mailosaur.com 例えばEメール関連ですと以下のような機能が提供されています。(上位プランのみの
NextAuth (Auth.js) で認証させているWebアプリをPlaywrightなどでE2Eテストする際に、認証をどうやってさせるか、あるいは回避するかが悩ましい部分です。 もし採用している認証方式が、単純なID/パスワード認証であればテストユーザを作成し、Playwrightにパスワードを入力させれば認証できるので問題はありません。 しかし、Google認証などの外部のプロバイダを経由するような場合は、E2Eテストをすることが難しくなります。そこでこの記事では、NextAuthの認証済み状態をPlaywrightで再現させる方法を紹介します。 やり方は大きく2つ NextAuthの設定に依存してやり方は大きく2つあります。 セッションデータを database で管理している場合 セッションデータを jwt で管理している場合 データベースの場合 セッションデータをデータベースに
インターネットやAIを駆使しながら、領域に捉われずにさらなる挑戦を行うDeNAの取り組みを紹介する「DeNA TechCon 2023」。ここで認証認可システムのリノベーションチームの岸直輝氏が登壇。Shift Leftの考え方を基に実践している静的解析や自動テスト、挙動の差分を自動で発見するための取り組みについて紹介します。全2回。後半は、各フェーズにおける、静的解析・ユニットテスト・E2Eテスト、それぞれの取り組みについて。前回はこちら。 静的解析のメリットとデメリット 岸直輝氏：では、ここからは今お話ししたShift Leftの具体的な取り組みについて見ていきましょう。ここでは、各フェーズごとに対応する取り組みを、静的解析、ユニットテスト、E2Eテストの3つに分けて紹介します。 まずは静的解析について。静的解析は、プログラムを実行することなく、静的にさまざまな異常を検出する手法です。
フロントエンドの リソース管理の話 TechFeed Summit#1 #techfeed #techfeedsummit
スライド概要 GitHub Actions Meetup Tokyo #3 https://gaugt.connpass.com/event/317178/ このプレゼンテーションでは、サイボウズ社のGaroonのE2Eテストについて、GitHub Actions self-hosted runner 上で実行していたE2Eテストを高速化・安定化させるために取り組んだこと、E2Eテストワークフローの視点の改善アイディアについて話されます。GaroonのE2Eテストにおける実行時間とFlakyが問題となっており、その改善に取り組んだ内容が紹介されています。 おすすめタグ：GitHub Actions,E2Eテスト,self-hosted runner,Garoon,テストワークフロー
Postman, Newman で始める E2E テスト - Techtouch Developers Blog
バックエンドエンジニアの misu です。最近はブンブンチョッパーでチャーハンやドライカレーばっかり作ってます。 この記事について 内容 Postman と Newman について モチベーション 実行例 テストの設定 Github Actions にのせる E2Eテストを陳腐化させないために その他 参考 この記事について 弊社では REST API 定義置き場やクライアントとして機能する Postman を使っています。Postman は、登録してある定義に基づいて API リクエストを投げる Newman というライブラリが提供されており、E2E テストのセットアップが簡単にできます。今回は、これらのライブラリを使って E2E 環境を Github Actions 上に作ってみたので簡単なサンプルと一緒に使用感を見ていただけたらと思います。 内容 Postman と Newman に
【E2Eテスト】ページオブジェクトモデルを使ったらメンテ地獄から解放された話 - RAKUS Developers Blog | ラクス エンジニアブログ
こんにちは！フロントエンド開発課のkoki_matsuraです。 この記事では、僕が開発に携わっている製品のE2Eテストに取り入れたページオブジェクトモデル(POM)という実装パターンの概要と取り入れたキッカケ、POMへリファクタリングする簡単な例をご紹介させていただきます。 僕と同じようにE2Eテストに関わっている方、E2Eテストに興味を持っている方などに読んでいただけると幸いです。 目次は下記のようになっています。 POMとは なぜPOMを使い始めたのか POMへのリファクタリング ログイン画面 テスト内容 POM導入前のテストコード ページオブジェクト作成 POM導入後のテストコード 終わりに POMとは Webアプリケーションのテスト自動化において、テストコードとWebページを分離して管理する手法です。 POMを使わない従来のテストコードはWebページと分離しないため、どうしてもD
一休.comのE2Eテスト事情 ~Selenium 3.0 対応~ /seleniumjp4_ikyu
2016年12月18日の第4回 日本Seleniumユーザーコミュニティ勉強会の発表資料です。 https://seleniumjp.connpass.com/event/45208/
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テストを実行できるようにしています。 本記事では主に 「②開発環境デプロイ後」 を例に紹介します。 実行方法 具
何度も挫折してきたE2Eテストだけど、今後はDatadog Synthetics Testsが良さそうかも - LIVESENSE ENGINEER BLOG
これは Livesense Advent Calendar 2022 DAY 20 の記事です。 はじめに 株式会社リブセンスの転職会議事業部Webエンジニアの @ishitan-liv です。 今回は、過去に転職会議でも導入しようとして挫折してきたE2Eテストについて書きます。 E2Eテストを自作するか、SaaSを使うのかで比較した結果と、Datadog Synthetics Testsの使い方を軽く紹介したいと思います。 なお、この導入については完全に個人プロジェクトとしてやっております。 リブセンスではエンジニアの権利として毎月10%の技術投資枠確保というものがあり、Googleの20%ルールのようなもので、約20日勤務だと想定して2日間は興味のある技術的なことに使えます。 grow.google はじめに このブログ記事を読むと得られる(と思われる)もの 今回書かないこと 導入検討
GitHub Actionsのワークフローを利用してクロスブラウザのE2Eテストを自動化する - Money Forward Developers Blog
こんにちは。 『マネーフォワード クラウド経費』のフロントエンドエンジニアをしている木村(@kimromi)です。 Ruby on Railsを利用してサービス開発を進めているプロダクトのフロントエンドの環境を整えていき、UIの改善やフロントエンド側の開発効率アップなどにつなげていくような動きを現在やっています。 なぜクロスブラウザのE2Eテストが必要になったか ある日、IE11のみでJavaScriptエラーが起こり動作しないとの連絡が入り、慌てて対象のプルリクエストをリバートしたということが起こりました。 原因としてはライブラリの追加によるものでした。 現在フロントエンドの改修を行っていく中で、ライブラリの追加やビルド方式の変更などドラスティックな変更をすることが多くなってきています。 そのたびにMicrosoftからダウンロードできるVM環境を立ち上げ手元で確認するのは手間がかかり確
アソビュー！ Advent Calendar 2022の2日目（裏面）の記事です。 アソビューでQAをしている渡辺です。 前職ではエンジニア、およびQAをしておりましたが、10月よりアソビューにQAとして入社しました。 今回は、API呼び出しを含むE2Eテストの自動化を、他社ウェブサイトに仕様記載の無料公開APIで試してみた話となります。 アソビューのQAでは、開発スピードと品質向上の両立を図ることを重視しています。 そのためにも、シフトレフトやテスト自動化推進の取り組みは重要です。 現在QAとして参画中のプロジェクトでAPIの外部公開があり、E2EテストとしてAPIを含むテストの自動化はこれまでしていないので、APIを含むテストについて、Seleniumで簡単に自動化できないか試してみました。 なぜSeleniumか？ なぜPythonか？ 試してみるテストケース 天気予報APIの仕様
こんにちは。BacklogのGit機能の開発を行っているテリーです。 今回はGitチーム（後述する僕の所属するチーム）でAutifyによるリグレッションテストの自動化を進めてみて感じたメリットと工夫したところ、苦戦したところを紹介したいと思います。 スモールチームの規模感とテストの現状 BacklogのGitチーム 長らくBacklogは固定のチームが専任で固定の機能をみるような体制になく、アプリケーションエンジニアが比較的流動的にBacklog全体の機能を担当しており、なんとなく“この人”は“この機能”が得意というような体制でした。 ですが最近のチーム編成により固定のチームが固定の機能を開発するようなフィーチャーチームがいくつかできました。Gitチームはその中で生まれたBacklogのGitの機能についての開発責任を持つチームです。チームメンバーは3人で、そのメンバーでインフラからフロン
これはGo Advent Calendar 2016の18日目の記事です。今回はGoでE2Eテストを行うためのライブラリagoutiについて書きます。 GoでE2Eテストを書く理由 WebアプリケーションのサーバーサイドをGoで書いている場合、GoでE2Eテストを書くメリットとして JavaScriptが得意ではないエンジニア(自分)でもE2Eテストがガリガリかける E2Eテスト実行時のカバレッジが取れる＝サーバーのコードのどこを通ったかがわかる があると思っている。特に2番めの理由が大事で、「E2Eテストを全部回した結果、サーバーのこの部分のコードは通っている」とわかるのはけっこう大きなメリットなのではないかと。どこがテストされている・いないを把握することで、「ここはE2Eテストだと難しいからユニットテストでカバーしよう」というような戦法が取りやすいと思う。 じゃあ具体的にGoでどうやっ
はじめに こんにちは。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テストの運用が属人化してしまっている... むか～しに作ってからはただ回しているだけ... テス
研究開発部の伊尾木です。 研究開発部では、Alexaのスキルを公開しています（Google Assistantも公開していますよ！）。 今回はAlexaスキルのテストを便利にするKuchimaneというツールを公開したので紹介したいと思います。 E2Eテストが難しい 音声UIの開発はまだまだ新しい分野で知見やツールがそろっているわけではありません。 特に E2E (End To End) テスト、RSpecでいうところの Feature spec に相当するようなテストを行うことがとても困難でした。 AlexaでのE2Eテスト 以下のような一連の会話があったとします。 あなた「クックパッドを開いて」 Alexa「クックパッドへようこそ」 あなた「大根のレシピを教えて」 Alexa「大根ですね。サラダ、ナムル、スープのどのレシピがいいですか」 あなた「スープ」 Alexa「大根のスープですね
TestCafe で E2E テストを始めよう #1 - 概要説明 と Hello World | Recruit Tech Blog
TestCafe とは？ TestCafe とは、Developer Express Inc. というアメリカのシステム開発会社が開発している E2E テストツールです。 A node.js tool to automate end-to-end web testing | TestCafe 同社はもともと TestCafe Studio という IDE（E2E テストケースオーサリングツール）を商用として提供していましたが、2016 年に TestCafe Studio のコア部分を OSS として提供するようになりました。今回ご紹介するのは、このコア部分についてです。 シリーズ一覧 概要説明 と Hello World 👈 この記事 ベーシック認証とユーザーロール（アカウント認証） よりプログラマブルな作りにする 関心の分離・メンテナブルなテストを書くためのベストプラクティス 大まか
AngularJSはテストを重視しているフレームワークだと言われています。 それは、DIが標準搭載されているのでサーバーとの通信などのテストしにくい部分を簡単にモックに差し替えることが出来たり、ユニットテストやEnd to End（E2E）テストのためのフレームワークを持っていたりするからでしょう。 そして、現在標準で含まれているE2Eテストのための機能は、今後ProtractorというSelenium WebDriverJSベースのフレームワークに移行すると発表されています。（AngularJS 1.2 & Beyond） これまでのE2Eテストフレームワークを捨てて新しいものに乗り替えるのには理由があります。 それは、Seleniumをベースにすることで次のような恩恵を受けられるからです。 ブラウザを操作するためのAPIが充実 複数ブラウザでの実行が可能 リモートページのテストが可能
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テスト自動化のAutify（オーティファイ）に入社しました ＆ ご挨拶も兼ねて OSS を書きました - えいのうにっき
前職である株式会社はてなの最終出社を2月19日に終え、本日 Autify に入社しました！ Autify は、同名のE2Eテスト自動化のSaaSプロダクトを開発・提供しています。 autify.com さきほど初日としての業務を終えたところです。ありがたいことに、非常に高い期待を掛けてもらっていることをひしひしと感じていて、初日にインプットしてもらえた情報量も半端ないのですが、自分としては慌てず落ち着いてひとつひとつキャッチアップし、できるだけはやめに大きな成果を上げたいなと思っています。 職種は "カスタマーサクセスエンジニア" としての入社です。これまでの経歴で ソフトウェア（サーバーサイド）エンジニア セールスエンジニア Customer Reliability Engineer ......などの肩書で業務に取り組んできた自分としては、「事業の成長に貢献できることで自分ができること
ウェブサイトやモバイルアプリの、エンドユーザーからみた動作を確認するテストはE2Eテスト（End-to-End Test）と呼ばれ、このE2Eテストの自動化ツールは、アジャイル開発の普及もあって、今では多くの開発現場で活用されるようになりました。ブラウザ操作の自動化ツールSelenium（セレニウム）は日本でも有名になり、ご存じの読者も多いでしょう。しかし近年、E2Eテスト自動化の世界では、Seleniumに代わる新たなツールがたくさん登場し、急速に利用者を増やしています。この記事では、これらの新しいE2Eテスト自動化ツールのトレンドについて紹介します。 E2Eテスト自動化トレンドの変遷 筆者はテスト自動化ツールを作る仕事にもう15年近く関わっていますが、これまでのトレンドを見ていくと、「非OSS（非オープンソースソフトウェア）の時代」「Seleniumの時代」「多極化の時代」の3つに分け
こんにちはかみむらです。 SPAの登場で状態管理が複雑化するに連れて、よりフロントエンドのテストが重要になってきました。 しかし、なかなか導入できていないところが多いのではないでしょうか。その中でもE2Eテストは工数の兼ね合い、優先的にテストできない工程ですよね。 そこで、今回は導入コストが低いCypressで、フロントエンド(React)のE2Eテストについてご紹介します。 Cypressとは？ Cypressはブラウザでのテスト作業を自動化するテストフレームワークです。オープンソースできています。 これまでのE2EテストはSeleniumが主流でしたが、最近はCypressも勢いを増しています。 また、Cypress DashboardというSaaSもあるので、これらをうまく組み合わせることでチームでのテスト効率をあげることに繋がります。 今回はCypressを使ってフロントエンド(R
エンジニア総出でE2Eテストを拡充した話 - てくすた
はじめまして、開発部で技術基盤を担当しているid:Yasaichiです。 乃木坂46の橋本奈々未さんを推しすぎて、デスクに雑誌の切り抜きを飾っています。 本エントリでは、先日行った技術改善の取り組みについて紹介したいと思います。 はじめに PIXTAは、「本体」と呼ばれるモノリシックなRailsアプリケーションと、そこから切りだされた複数のマイクロサービスで構成されています。 現在、これらの中で、Rails 5のリリースによって完全にサポートが切れる4.1系（とそれ以下）で動作しているアプリケーションのバージョンアップを計画しています。 This means 4.1.x and below will essentially be unsupported! Rails 5.0.0.beta1: Action Cable, API mode, Rails command | Riding Ra
開発時の動作確認ツールとしてCypressのE2Eテストを導入した話 - visible true
ユビーAI問診は、Ubieが提供する医療機関向けのプロダクトです。患者さんに対して問診を実施し、医師向けのカルテを作成します。現在は大きく分けて、タブレットとスマートフォンの２つの利用方法があります。 タブレット用、スマートフォン用の画面 これらはどちらもWebアプリケーションとして実装していて、フロントエンドはReact/TypeScriptで書いています。 問診のプロセスは画面遷移が多い ユビーAI問診は紙の問診票で書くような定型的な質問だけでなく、来院した目的に合わせて様々な質問を行います。 例えば「頭が痛い」といった症状を入力した場合、発症時期や部位、痛みの程度、持続時間、経過、頻度などを掘り下げて、更にそれらの回答内容から疑われる疾患に関連する質問を重ねていきます。あるいは「足をひねった」など外傷に関する場合は、スポーツをしていたかや事故かといった状況を聴取したりします。問診の長
E2Eテスト自動化変遷 〜ノーコードからCypress、そしてPlaywrightへ〜 - estie inside blog
こんにちは！estieでQAエンジニアをしているかすや（macho | きんにQA💪🏾 (@ma_cho29) / X）です。 今回ブログを書くにあたり、前回書いたのはいつだったかなー？と見返すと1年が経過していたことに気がつきました。 歳を重ねると体感時間が短くなると聞いたことがありますがそれでしょうか・・・ 入社3年目になる今年もやり残しがないように過ごしたいところです。 さて、今回はQA未経験だった私が1人目のQAエンジニアとしてestieに入社し現在までおこなってきたE2Eテスト自動化の変遷について語っていきたいと思います。 私がメインで関わっているプロダクト「estie マーケット調査」は約2年間でテストフレームワーク移行を2度おこないました。 当時の意思決定やその際に個人的に感じたフレームワークごとのメリット・デメリットなど含めて話したいと思います。 （あくまで僕の所属する
なぜE2Eテストがたまに落ちるのか / How do E2E tests fail randomly
Rails Developers Meetup 2018 Day 3 Extreme 発表資料 https://techplay.jp/event/679666 YouTube: https://www.youtube.com/watch?v=1U6SDJD_sp8&t=0s&list=PLLpMWAO4_8wIvjyxzS6p1XpvpOM9v_u3z&index=48
10年間動き続けているブログサービスのE2Eテストを書いた記録 / pepabo_tech_conference_3
第3回ペパボテックカンファレンスの発表資料です。
広告技術部のサンドバーグと星です。 普段の業務は、主に広告の管理システムの開発をしています。管理画面はRuby on Railsで作られており、今回は煩雑になりがちなE2Eのテストをきれいに書けたので、それについて話します。 背景 Gunosyの広告システムは4年以上前にリリースされ、これまで多くの機能が追加されてきました。 配信システムは一度リプレースされましたが、私達が運用している管理画面に関してはリプレース などはされず、現在も拡張され続けています。長く運用されているシステムのため 開発するメンバーの入れ替わりもあり、もちろん思想やコードスタイルも変わってきたため、 バグが発生しやすい環境になってしまっています。 ただ、外部のお客様も使う機能も含まれるため、バグが無いことを担保する必要があり、 テストがより重要になってきます。 また、複雑なデータ構造と画面操作があるため、単体テストで
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
テストできないコードをE2Eテストを使ってリファクタリングしよう
E2Eテストのテスト結果を可視化することで気づきが生まれた | メルカリエンジニアリング
Playwrightを使ったE2Eテストを導入した話 - Uzabase for Engineers
なぜE2Eテストでidを使うべきではないのか ｜Autifyブログ
Mailosaurでメール送信のE2Eテスト - febc技術メモ
E2EテストでNextAuth認証(OAuthなど)を突破する方法
「開発における安全と効率の両立を追求したい」 静的解析・ユニットテスト・E2Eテストにおける、ディー・エヌ・エーの「Shift Left戦術」
karmaを使ったSPA向けE2Eテスト技法
E2Eテストワークフローを高速化・安定化させる取り組み | ドクセル
SeleniumによるAPI呼び出しを含むE2Eテスト自動化 - asoview! Tech Blog
スモールチームにおけるAutifyを用いた効率的なE2Eテストの自動化 | 株式会社ヌーラボ(Nulab inc.)
WebアプリケーションのE2EテストをGoで書く - oinume journal
E2Eテストの運用を属人化しないための3つの取り組み - ANDPAD Tech Blog
AlexaでE2Eテストを書けるようにした話 - クックパッド開発者ブログ
Protractor: AngularJSの次世代E2Eテストフレームワーク - Qiita
E2Eテスト自動化ツールの最新トレンド──Playwright？ ノーコード？ Seleniumから多極化の時代へ！
Cypressで始めるReactのE2Eテスト-導入から実際にテストを書いてみよう！
Gunosyの広告管理画面を支えるE2Eテスト - Gunosy Tech Blog