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テストを検討してみた（Playwright、Puppeteer、Cypress） - Techtouch Developers Blog
この記事はテックタッチアドベントカレンダー 8 日目の記事です。 フロントエンドエンジニアの taka です。Amazon Black Friday でフットウォーマーを買ったのですが、冷え性の自分には最高でした。冷え性の方には是非使ってみてもらいたいです。 今回は、モダンなツールである Playwright と Puppeteer、Cypress を実際に触ってみたので、そこから得られた知見を紹介したいと思います。 要件の整理 一般的な要件 テックタッチ特有の要件 機能ごとの比較 テストツールの有無 複数タブ / ウィンドウ ShadowDOM ブラウザ拡張 要素の特定 スクリーンショット 動画 実行速度 まとめ 要件の整理 テックタッチはブラウザ拡張であるため、一般的な Web アプリケーションとは少し要件が異なってきます。以下に、一般的な要件とテックタッチ特有の要件を書き出しました。
Software Design連載 2021年10月号 スナップショットテストの可能性を追求する - MonotaRO Tech Blog
こんにちは、辰巳です。 第3回は「スナップショットテスト」をテーマにお送りします！ 「組織が拡大する中で、十分な設計情報がない状況でも、複雑に改修が積み重なったソフトウェアをいかに安全かつ正確に変更できるか？」 本記事では、数多くの大幅なシステム変更の経験を経て、この課題に対してモノタロウがいま実践しているグッドプラクティスを紹介します。 本記事の初出は、 Software Design2021年10月号「Pythonモダン化計画（第3回）」になります。過去の連載記事は以下を参照ください。 第1回 Software Design連載 2021年8月号 Python製のレガシー＆大規模システムをどうリファクタリングするか 第2回 Software Design連載 2021年9月号 「テストが無い」からの脱却 スナップショットテストの可能性を追求する モノタロウは、事業者向けの間接資材を販売
Cypressで始めるReactのE2Eテスト-導入から実際にテストを書いてみよう！
こんにちはかみむらです。 SPAの登場で状態管理が複雑化するに連れて、よりフロントエンドのテストが重要になってきました。 しかし、なかなか導入できていないところが多いのではないでしょうか。その中でもE2Eテストは工数の兼ね合い、優先的にテストできない工程ですよね。 そこで、今回は導入コストが低いCypressで、フロントエンド(React)のE2Eテストについてご紹介します。 Cypressとは？ Cypressはブラウザでのテスト作業を自動化するテストフレームワークです。オープンソースできています。 これまでのE2EテストはSeleniumが主流でしたが、最近はCypressも勢いを増しています。 また、Cypress DashboardというSaaSもあるので、これらをうまく組み合わせることでチームでのテスト効率をあげることに繋がります。 今回はCypressを使ってフロントエンド(R
E2Eテスト自動化のAutify（オーティファイ）に入社しました ＆ ご挨拶も兼ねて OSS を書きました - えいのうにっき
前職である株式会社はてなの最終出社を2月19日に終え、本日 Autify に入社しました！ Autify は、同名のE2Eテスト自動化のSaaSプロダクトを開発・提供しています。 autify.com さきほど初日としての業務を終えたところです。ありがたいことに、非常に高い期待を掛けてもらっていることをひしひしと感じていて、初日にインプットしてもらえた情報量も半端ないのですが、自分としては慌てず落ち着いてひとつひとつキャッチアップし、できるだけはやめに大きな成果を上げたいなと思っています。 職種は "カスタマーサクセスエンジニア" としての入社です。これまでの経歴で ソフトウェア（サーバーサイド）エンジニア セールスエンジニア Customer Reliability Engineer ......などの肩書で業務に取り組んできた自分としては、「事業の成長に貢献できることで自分ができること
Autifyを導入してE2E自動テストを最適化した話 - ZOZO TECH BLOG
はじめに こんにちは。SRE部BtoBチームの田村です。BtoBチームにてECサイトの購入テストや会員登録等のテストを行う際には、これまでSeleniumを利用して毎日LinuxのChrome環境にて実行しておりました。しかしながらフロントエンドが変更された場合に、ソースコードの調整をしたりサーバー保守対応も必要で、運用コストを割かれることもしばしばありました。テストにおける自動化やテスト品質の向上及び運用コストの削減を目的として、今回AutifyというE2E自動テストツールを導入しました。 BtoBチームのE2Eテスト BtoBチームのE2Eテストは、Seleniumを用いて会員登録や購入テストを毎日実行しており、Slackにテスト結果を通知しています。エラー時には、サーバーに入ってログ閲覧し問題ないかを確認していました。そして、新しいテストパターン追加の要望があった場合にはソースコード
時々失敗するE2Eテストの原因を計測して判別する方法について - おもしろwebサービス開発日記チラシの裏
Railsをお仕事で使っている方はみんなE2Eのテストで時々失敗するやつに苦労しているんじゃないかなと思います。 @mtsmfmさんの発表スライドが詳しいので基本的にはこれで大体のケースには対応できるはず。 スライド読むのがめんどくさい人向けに、一部抜粋かつ要約すると なんらかの要因(CSSアニメーションや画像のロード)でDOM要素が移動する場合にクリックをミスしてしまってテストが失敗するケースが「時々失敗するテスト」の大多数を占める という話になります。これを防ぐためにはCSSのアニメーションをオフにしたり、↓のようなメソッドを利用して画像が完全にロードするまで待ってからクリックする、という方法があります。 def wait_for_image_loading Timeout.timeout(Capybara.default_max_wait_time) do sleep 0.5 unt
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
ReactNativeでE2EテストをするDetoxをちょっとだけ触ってみた（iOS） - 個性は次々死んでいく
Detoxというライブラリを使ってE2Eテストを書いてみる github.com 前提 Mac brew xCode 8.2以上 node 7.2以上 準備 シミュレーターを動かすのに必要なのでインストールする $ brew tap facebook/fb $ export CODE_SIGNING_REQUIRED=NO && brew install fbsimctl $ brew tap wix/brew $ brew install --HEAD applesimutils $ npm install -g detox-cli テストしたいプロジェクトに導入する $ npm install detox mocha --save-dev 初期化コマンドを実行すと ./e2e フォルダが生成されます 続いてビルドコマンドで成功すれば準備完了 $ detox init $ detox b
WebRTCなコードをE2Eテストする - console.lealog();
という試みをやってみたのでその学びをメモ。 もちろん全てのケースをカバーできたわけではなく、無限に気になることはあるけど、まあきっかけといことで。 環境はmacOSです。CIで動かすのは続編としてまたいつかブログに書きます。 何を使うか いわゆるE2E（URLでページ開いてボタン押したらどうでこうで）をやりたい場合、フロントエンド的な観測範囲だと現時点ではこの2択になるのかなーと思う。 Selenium TestCafe 他にオススメあれば知りたいです。 Selenium https://github.com/webrtc/samples/tree/gh-pages/test とかでも使われてる例があって身近ではあるけど、正直使いたくない・・。 https://github.com/webdriverio/webdriverio とかあわせていれれば多少のシンタックスはマシになるけど、もう
Gunosyの広告管理画面を支えるE2Eテスト - Gunosy Tech Blog
広告技術部のサンドバーグと星です。 普段の業務は、主に広告の管理システムの開発をしています。管理画面はRuby on Railsで作られており、今回は煩雑になりがちなE2Eのテストをきれいに書けたので、それについて話します。 背景 Gunosyの広告システムは4年以上前にリリースされ、これまで多くの機能が追加されてきました。 配信システムは一度リプレースされましたが、私達が運用している管理画面に関してはリプレース などはされず、現在も拡張され続けています。長く運用されているシステムのため 開発するメンバーの入れ替わりもあり、もちろん思想やコードスタイルも変わってきたため、 バグが発生しやすい環境になってしまっています。 ただ、外部のお客様も使う機能も含まれるため、バグが無いことを担保する必要があり、 テストがより重要になってきます。 また、複雑なデータ構造と画面操作があるため、単体テストで
About RSpec HTML Reporter | Mercari Engineering
Hello everyone! @vishal from Mercari’s SET team. This is the 12th entry for Mercari Advent Calendar. In this blog post, I will talk about rspec_html_reporter which is being used for Android E2E test automation at Mercari. Role of Test Reports in Mobile E2E Test Automation Test report is the end result of test automation execution. This is the only source of truth once test execution is finished. I
E2E テストを CircleCI 2.0 (Beta) で完結させてみた話 | feedforce Engineers' blog
こんにちは、あっという間に社内勉強会の順番がやってきそうでフルえているコシゴエです。気がついたら二年近く会社ブログを書いていませんでした…。 最近、ようやく重い腰を上げて Docker と CircleCI 2.0 を使い始めたので、E2E テストでの活用を試みている話をしたいと思います。 はじめに 突然ですが、弊社プロダクト dfplus.io では、TestCafe を使用して E2E テストを自動化しています。 dfplus.io は、異なるリポジトリで管理しているフロントエンド(JS)とバックエンド(Ruby)から構成され、E2E テストはフロントエンドのリポジトリで管理しています。E2E テストはリポジトリへの push をトリガーに CircleCI で実行し、このときのバックエンドは E2E 用に用意した共用環境(Heroku 環境)を利用しています。 E2E テストをしばら
気負わず普通にテストしよう
はじめに これはシステムエンジニア Advent Calendar 2016の22日目の記事です。 色んなプロジェクトでのテスト体験や自分で学んだことをもとに、ポエムを書きます。 言いたいこと 普通にテストをこなそう 面倒だと感じたら、テストの設計か作業プロセスに問題があるから見直そう テストでは検証したいことを決めて、それに集中しよう ソフトウェアテストについての知識はざっと知っておこう 前提 本来はSIの現場で考えた場合、 UAT(受け入れテスト)やST(システムテスト)などにも言及すべきかもしれませんが、 あくまで僕個人という開発者目線なのでUT、ITが中心の内容になっています。 なんで作業が捗らないんだろう？ Javaを用いた金融系の業務システムをつくっているある日でした。 自分の作業がなんか思ったように進まないなぁということに気づきました。 「何に時間を使っているんだろう？」 な
一休.comのE2Eテスト事情 ~Selenium 3.0 対応~ /seleniumjp4_ikyu
2016年12月18日の第4回 日本Seleniumユーザーコミュニティ勉強会の発表資料です。 https://seleniumjp.connpass.com/event/45208/
WebアプリケーションのE2EテストをGoで書く - oinume journal
これはGo Advent Calendar 2016の18日目の記事です。今回はGoでE2Eテストを行うためのライブラリagoutiについて書きます。 GoでE2Eテストを書く理由 WebアプリケーションのサーバーサイドをGoで書いている場合、GoでE2Eテストを書くメリットとして JavaScriptが得意ではないエンジニア(自分)でもE2Eテストがガリガリかける E2Eテスト実行時のカバレッジが取れる＝サーバーのコードのどこを通ったかがわかる があると思っている。特に2番めの理由が大事で、「E2Eテストを全部回した結果、サーバーのこの部分のコードは通っている」とわかるのはけっこう大きなメリットなのではないかと。どこがテストされている・いないを把握することで、「ここはE2Eテストだと難しいからユニットテストでカバーしよう」というような戦法が取りやすいと思う。 じゃあ具体的にGoでどうやっ
DockerとSeleniumGridとNightwatchでE2Eテストを始めよう - 文系プログラマによるTIPSブログ
Dockerで簡単に始められますよ〜 Nightwatchならライトにサクッと書けますよ〜 皆さんはE2E(end to end)テスト、してますか？ 今回はDocker、Selenium grid、Nightwatchを使ったE2Eテスト（ブラウザテスト）の環境構築からテスト実行、VNCでテスト実行の様子を確認するところまでやってみようと思います。 技術要素 なぜNightwatchなのか 環境構築 docker node.js for mac for windows テストの準備 dockerコンテナ git clone node_moduleの依存 nightwatchの設定 docker-hub Nightwatchでテストを実行する ローカルでテストする場合 Selenium Gridで並列テストする場合 dockerコンテナの起動 Selenium Gridの動作確認 Nigh
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
「SafeTest」がすごい ー Netflix内で利用されている、新しいフロントエンドテストライブラリ
20180609 chainer meetup_es_pnet
karmaを使ったSPA向けE2Eテスト技法
