Creating an Effective Media Campaign and Attracting Event Sponsors
こんにちは。AutifyのSET(Software Engineer in Test) 、末村(@tsueeemura)です。 皆さん、E2Eテストしてますか?以前はほぼSelenium一択みたいなところがありましたが、最近はPuppeteerやCypress、TestCafeなどいろいろなフレームワークがあり、ついつい目移りしてしまいますね! さて、どのフレームワークを使うにせよ、E2Eテストを書く上で共通で意識しないといけない重要なファクターがいくつか存在します。 その一つが ロケータ です。操作や検証の対象となる要素を指定するためのキーのことです。 ロケータにはCSSセレクタやXPathが利用でき、idやclass、name といった属性を利用するのが一般的です。 今回はこのロケータについての話を書こうと思います。 ロケータとは 要素を一意に指定できさえすればロケータに使うものは何で
Merpay Advent Calendar 2021 の 8 日目はメルペイフロントエンドチーム の @tanakaworld がお送りします。 はじめに メルペイは金融サービスであり、品質の維持・向上に日々取り組んでいます。フロントエンドチームでは、約 2 年前からリグレッションテストの自動化に取り組み始め、直近の 1 年間はインテグレーションテストの自動化にもチャレンジしてきました。本記事ではメルペイフロントエンドチームに於けるテスト自動化の方針とその全体像について振り返ってみたいと思います。 フロントエンドプロダクトに関わるテストは次のものが挙げられます。これらをひとつずつ順番に見ていきたいと思います。 ユニットテスト インテグレーションテスト シナリオテスト リグレッションテスト テストの種類とそのカバレッジ対象 1. ユニットテスト ユニットテストは Jest を用いて、主に
こんにちはかみむらです。 SPAの登場で状態管理が複雑化するに連れて、よりフロントエンドのテストが重要になってきました。 しかし、なかなか導入できていないところが多いのではないでしょうか。その中でもE2Eテストは工数の兼ね合い、優先的にテストできない工程ですよね。 そこで、今回は導入コストが低いCypressで、フロントエンド(React)のE2Eテストについてご紹介します。 Cypressとは? Cypressはブラウザでのテスト作業を自動化するテストフレームワークです。オープンソースできています。 これまでのE2EテストはSeleniumが主流でしたが、最近はCypressも勢いを増しています。 また、Cypress DashboardというSaaSもあるので、これらをうまく組み合わせることでチームでのテスト効率をあげることに繋がります。 今回はCypressを使ってフロントエンド(R
こんにちは、フロントエンドエンジニアのやなぎ( @apple_yagi )です。 先日、フロントエンドのIntegration Testで使用されていたCypressをPlaywrightに移行したので、その理由や実際に移行してみて感じたメリットなどをご紹介いたします。 なぜ移行したのか いくつか理由はありますが、大きな理由の1つとして Cypress は並列でテストを実行することができなかったことがあります。 Cypress で書かれた Integration Test はAPIリクエストを全てモックしているため、データベースの状態などにテスト結果が左右されることがなく、全てのテストを並列で実行可能でした。しかし、Cypressは並列でテストを実行することができず、テストを直列で実行するしかなかったため、テストの完了までに時間がかかってしまう問題がありました。
ユビーAI問診は、Ubieが提供する医療機関向けのプロダクトです。患者さんに対して問診を実施し、医師向けのカルテを作成します。現在は大きく分けて、タブレットとスマートフォンの2つの利用方法があります。 タブレット用、スマートフォン用の画面 これらはどちらもWebアプリケーションとして実装していて、フロントエンドはReact/TypeScriptで書いています。 問診のプロセスは画面遷移が多い ユビーAI問診は紙の問診票で書くような定型的な質問だけでなく、来院した目的に合わせて様々な質問を行います。 例えば「頭が痛い」といった症状を入力した場合、発症時期や部位、痛みの程度、持続時間、経過、頻度などを掘り下げて、更にそれらの回答内容から疑われる疾患に関連する質問を重ねていきます。あるいは「足をひねった」など外傷に関する場合は、スポーツをしていたかや事故かといった状況を聴取したりします。問診の長
@testing-library/cypressの存在を知らずに、それっぽいものを作ろうとしたときにいろいろ調査した記録です。Cypressにはテストコードが縦と横に短くなる工夫がされており、そのメカニズムにしたがった独自コマンドを実装するにはコツが必要です。 実装は次のところにありますが、@testing-library/cypressの方がメンテされているので、こちらは実際には使わないのをお勧めします。 https://gitlab.com/osaki-lab/cypress-aria Cypressのテストが縦横に短く書けるわけCypressはWebDriver系(Selenium)やChrome DevTool Protocol系(Puppeteer)のツールとAPIの粒度が異なります。Seleniumはそもそもウェブサイトのタイトルに「Browser Automation Too
こんにちは!スマートキャンプでインサイドセールスに特化した SaaSを作っているエンジニアの井上です。 携わっている上記のプロダクトは使いやすさにこだわっているため、UIの修正を行うことが多々あります。 そんななかで起こった問題の対応としてビジュアルリグレッションテストを導入したので、今回はその話をできればと思います。 背景 ビジュアルリグレッションテストとは? ビジュアルリグレッションテストをやる目的 何をテストをするのか? 使用したツール Cypress reg-suit 画像を取得する 画像の差分を検知する Circle CIによる自動化 ベース画像の自動更新 ビジュアルリグレッションテストの実行 ハマったところ 結果どうなったか reg-suitの結果画面 今後の改善・取り組みたいこと 背景 ビジュアルリグレッションテストを導入する前に、UIに大きく影響する改修がありました。 影響
Examples Next.js with Cypress Next.js with Playwright Next.js with Jest and React Testing Library Next.js with Vitest Learn how to set up Next.js with commonly used testing tools: Cypress, Playwright, and Jest with React Testing Library. Cypress Cypress is a test runner used for End-to-End (E2E) and Integration Testing. Quickstart You can use create-next-app with the with-cypress example to quickl
この記事はテックタッチアドベントカレンダー 8 日目の記事です。 フロントエンドエンジニアの taka です。Amazon Black Friday でフットウォーマーを買ったのですが、冷え性の自分には最高でした。冷え性の方には是非使ってみてもらいたいです。 今回は、モダンなツールである Playwright と Puppeteer、Cypress を実際に触ってみたので、そこから得られた知見を紹介したいと思います。 要件の整理 一般的な要件 テックタッチ特有の要件 機能ごとの比較 テストツールの有無 複数タブ / ウィンドウ ShadowDOM ブラウザ拡張 要素の特定 スクリーンショット 動画 実行速度 まとめ 要件の整理 テックタッチはブラウザ拡張であるため、一般的な Web アプリケーションとは少し要件が異なってきます。以下に、一般的な要件とテックタッチ特有の要件を書き出しました。
Cypress Component Test Runner Cypress 7.0.0 より、 2021/04/10 時点ではまだ Alpha 段階ですが Cypress Component Test Runner という機能が追加されました。(@sekikazu01 さんのツイートで知りました。) E2E テストのようにブラウザ上で実際にレンダリングしつつ、コンポーネントテストのような軽快さで動くという、中間的な位置付けと捉えています。 試してみる (Vite) create-react-app や vue-cli を使ったチュートリアルが用意されているので、とりあえず確認してみたい場合はそちらが良さそうでした。 ドキュメントも存在しており、webpack-dev-server を利用する場合はそちらが参考になりそう。 ただ、そのままやってもテンションが上がらないので、紹介記事には As
Puppeteer, Selenium, Playwright, Cypress – how to choose? At Testim, a lot of what we do is build AI-based features on top of automation frameworks to add stability,… At Testim, a lot of what we do is build AI-based features on top of automation frameworks to add stability, accelerate test creation, and improve root-cause analysis. We evaluate a number of test automation frameworks to understand
Merpay Advent Calendar 2020 の 8 日目は、メルペイフロントエンドチーム の @tanakaworld がお送りします。 2020 年後半からフロントエンドチームと QA チーム合同で、リグレッションテストの自動化に取り組んできました。E2E テストフレームワークである Cypress でマニュアルテストを自動化し、加えて TestRail を用いてテストケース管理も仕組み化することでワークフローの整備を進めています。本記事では、それらの取り組みについて紹介します。 ワークフロー改善後の全体像 リグレッションテストとは 実装を変更した結果、アプリケーション全体の振る舞いに予期せぬ影響がないかどうかを確認するテストです。メルペイではリリース前 QA の最終フェーズでリグレッションテストを実施しています。Web アプリケーションを End To End (E2E)
はじめに こんにちは、EC基盤本部・MA部・MA基盤チームでマーケティングオートメーションのシステムを開発している長澤(@snagasawa_)です。この記事では、CypressによるE2EテストをVue.jsプロジェクトへ導入した取り組みについて、実際の画面を交えてご紹介します。このE2Eテストによって、複雑な入力フォームを自動でテストできるようになり、修正後のバグを検知しやすくなりました。E2Eテストの導入を検討されている方の参考になれば幸いです。 Vue.jsプロジェクトの技術スタック 今回Cypressを導入したプロジェクトの主な技術スタックは以下の通りです。 Vue.js TypeScript Vuetify Open API 導入背景 E2Eテスト導入の理由は、複雑な入力フォームを動作保証するためです。 我々のチームでは、Line Friendship Manager(以下、L
※この記事はただの集団 Advent Calendar 2019の11日目の記事です。 はじめに 若干過激なタイトルにしたことを最初にお詫びします。 正確には以下の記事を読んで思ったことです。 Stop using Page Objects and Start using App Actions Page Objectsを使うのはやめて、App Actionsを使おう (著者訳) 引用元はCypressの公式ブログです。 全編英語なので、「読むの面倒くさいよぅ」という方には、本記事が内容理解に役立つかもしれません。 Summary 1.前提 2.Page Object Pattern推奨派の主張 3.Page Object Pattern否定派の主張 4.記事を読んで思ったこと 5.最後に 説明の都合上、まずPage Object Pattern推奨派の考え方を簡単に説明し、その後にPag
どうも!大阪オフィスの西村祐二です。 Nxを使ってアプリケーションを作るとデフォルトでAngularのE2Eテストフレームワークが「Cypress」に置き換わって生成されます。 そこで、Cypressがとても使い勝手がよかったので、他のAngularプロジェクトでも使いたいなと思っていました。 調べてみると下記ライブラリを使うと簡単にCypressを使うことができましたので、その方法をご紹介したいと思います。 https://github.com/briebug/cypress-schematic 試してみる 環境 Angular CLI: 8.3.12 Node: 10.15.1 OS: darwin x64 Angular: ... Package Version ------------------------------------------------------ @angul
つらい打鍵テストをCIで回して、テスト結果をWebダッシュボードでチーム内に共有しようというお話です。 はじめまして。枇榔(びろう)です。サーバ内の脆弱性を検出して管理するWebサービス、FutureVuls( https://vuls.biz/ )の開発をしています。 100台から数千台といった大規模なサーバ運用をしている方向けの、サーバ内の脆弱性情報管理を楽にするWebサービスです。OSSの脆弱性スキャナVulsに、チーム運用向けの機能(タスク管理・自動トリアージ・他チームへ情報共有・脆弱性情報のリスト管理など)を追加したものになります。 https://vuls.biz/ の右上から新規登録ですぐに使えるので、ぜひお試しください。 マイクロサービスのテストが打鍵になりがち問題さて、そんなFutureVuls。画面側はReact、裏側はいくつものコンテナという構成で動いています。 AW
Hello, friends! Today, we have an exciting announcement to share. The title up above might have given it away, but in case you missed it, Cypress 10 is here 🎉! Cypress 10 is our most exciting release yet, and we have a lot to unpack, so let's dive in and look at some of the new functionality. New Cypress AppThe new Cypress appWe reworked the Cypress app from the ground up to modernize the interfa
We’re proud to announce the alpha release of Cypress’s dedicated Component Test Runner. It’s a brand new test runner that’s designed to replace your node-based component tests. Our Component Test Runner executes your component tests in the browser as a user would by simulating real interactions by using Cypress's robust test driver. Since it runs in the browser, you get to debug your components us
Amplify ConsoleがCypressのテストをサポート! Amplify ConsoleでE2Eテスティングフレームワーク「Cypress」がサポートされました! Running end-to-end Cypress tests for your fullstack CI/CD deployment with Amplify Console | AWS Mobile Blog CypressはWebアプリ開発のお供として、現在非常によく使われているテスティングフレームワークかと思います。Amplify Consoleでサポートされたことによって、E2Eテストを含めたCI/CD環境がサクッと構築できるようになりました。 早速使ってみました!Cypressを使ってログイン操作のE2Eを試してみます。 試すためのWebアプリを用意する Amplify自体の説明は省きます。まずは以下のコ
はじめにこんにちは。踊るエンジニア、木戸俊輔です。 2021年4月で社会人2年目になりましたが、総出社回数は3回です。コロナで外出できないのは残念ですが、自宅で安全に業務に取り組むことができる現代の環境には感謝ですね。 さて、皆さんは普段どのようにE2Eテストを行っていますか?忍耐強く手動でポチポチ画面を触って…というのはなかなかにしんどいですよね。自動化ツールを使って楽したいけど難しくてよくわからない、という方もいらっしゃると思います。 本記事では、テスト自動化ツールを全く使ったことのなかった私が、テスト自動化ツールであるCypressの導入から基本的な使い方までをご紹介していきます。 対象: Webサービスのテスト自動化に興味がある人 自動テスト初心者 Cypressを触ってみたい人 テストは大事当たり前ですが、システムを納品/リリースする際、動作や性能のテストは必須です。もしテストが
はじめに こんにちは。プロダクト開発本部のYoungjin Jangです。 皆さんはフロントエンド開発をするときに、テストコードを書いていますか? フロントエンドは分野の特性上、開発スケジュールの後半に成果物(スペック、デザイン、API)を総合して最終的にプロダクトを作る立場になるため、時間に追われてテストコードを書きにくいこともあるかと思います。逆にスケジュールの前半では他の職種より比較的時間が余ることもあるでしょう。この時間を活用してテストを書いてみるのはいかがでしょうか? この記事では、テスト駆動開発の基本的な概念とCypressを利用したテスト駆動開発方法、そして実際にLINEドクターのフロントエンドを開発するときに、どのようにテスト駆動開発を行っているかを紹介します。 LINEドクターとは LINEドクターはオンライン診療サービスで、ユーザーはLINEを通じて診察を受け、処方箋や
はじめに こんにちは、 SmartHR Advent Calendar 15日目の @aomoriringo です。 SmartHRのQAグループでSET(Software Engineer in Test)として働いています。 SETとしては1人目として入社したため、その時点ではE2Eテスト自体が存在していませんでした。 現在はCypressでのE2Eテストに取り組んでおり、これまでに溜まった知見をご紹介したいと思います。 E2Eテストの位置付け SmartHR Advent Calendar 2日目で、 wata727さんが Capybaraによるテストの話を書いてくれています。 Capybaraでブラウザを介したテストコードを書いているのに、それとは別になぜCypressによるテストを書く必要があるのでしょうか? ここで、「テストから見えてくるグーグルのソフトウェア開発」に出てくる
こんにちはかみむらです。 SPAの登場で状態管理が複雑化するに連れて、よりフロントエンドのテストが重要になってきました。 しかし、なかなか導入できていないところが多いのではないでしょうか。その中でもE2Eテストは工数の兼ね合い、優先的にテストできない工程ですよね。 そこで、今回は導入コストが低いCypressで、フロントエンド(React)のE2Eテストについてご紹介します。 Cypressとは? Cypressはブラウザでのテスト作業を自動化するテストフレームワークです。オープンソースできています。 これまでのE2EテストはSeleniumが主流でしたが、最近はCypressも勢いを増しています。 また、Cypress DashboardというSaaSもあるので、これらをうまく組み合わせることでチームでのテスト効率をあげることに繋がります。 今回はCypressを使ってフロントエンド(R
Introducing cy.intercept - Next Generation Network Stubbing in Cypress 6.0 Today, we're elevating the power and scope of Cypress' network handling capabilities with the introduction of the cy.intercept command in Cypress 6.0. One of the most powerful and beloved features of Cypress are easy network stubbing and spying APIs via cy.route and cy.server commands. These commands enable mocking of netwo
はじめに 本記事は、アジャイル開発手法におけるQAの参考になれば、と作成しました。 開発、QA、また今後、それらに携わっていく方々の即戦的知識になればと思います。 また、本記事で作成したソースコードは下記に公開しています。 https://github.com/EIKINAKAYAMA/cypress-demo そもそもテストって? システム開発では、システムがリリースされるまで、 作成された開発物に問題がないかを色んなテストでチェックします。 UIテスト ブラックボックステスト 負荷テスト リグレッションテスト 退行テスト 受け入れテスト アドホックテスト etc... 上記は一部を載せていますが、まだまだ沢山あります。 会社や組織によって呼び方が変わったり、テストというよりもテスト手法だったり、同じようで厳密には内容が異なったりと多種多様のテストが存在し、必ずしも全てのテストを実施して
2部では、ストーリーブックを使ってビジュアル要素のテストを自動化する方法を紹介しました。私たちが作成したタスク管理アプリケーションの実行手順をもう一度整理してみましょう。 アプリケーションが実行されたら、画面にメインUIを表示する APIサーバーから「ToDoリスト」のデータを受け取り、Reduxストアに保存する 保存されたストアの値に応じてToDoリストをUIで表示する ユーザーが入力ボックスをクリックし、「昼寝」と入力してEnterキーを入力する ReduxストアのToDoリストに「昼寝」を追加する 変更されたストアの値によってUIを更新する 変更されたストアの状態をサーバーに送信して同期する この実行手順は、「アプリケーションの状態」を基準に2つに区分できます。まず、取り消し線がついた1,3,6は、現在のアプリケーションの状態を画面(UI)に表示する段階です。2部では、この段階でテス
Hello, reader. This article was an opinion piece about why app actions are better than page objects. The page object pattern is well known in the QA community, and widely and successfully used in the Cypress ecosystem. Writing maintainable end-to-end tests is challenging. Often testers create another layer of indirection on top of the web page called page objects to execute common actions. In this
この記事は Selenium/Appium Advent Calendar 2019の20日目の記事です。 この記事は映画観すぎて現実と映画の境にさまよったエンジニアの記録なので一部妄想が含まれている Cypressを日々の任務に組み込んでみて得た苦しみ、痛み、ストレス、達成感などを書いていきます。 Cypressの導入や使い方は以前の記事を参照してください。 最近また観たプライベート・ライアン も最高の作品だ また観るきっかけになったのは あの映画の銃声って第二次世界大戦本物の銃声だったよ って自慢げに話してきた弟だった。やつはメイキング映像が大好き。 隊の編制 我らの隊は30人規模の中隊でこの国を統一し平和をもたらすという志しで結成されている。隊を率いる中尉は様々な苦難を乗り越えてきた経験豊かな方だった。 14ヶ月前から関わっているプロジェクトはHR業界をリードし働く人が幸せになれる社
【書き起こし】Frontend Testing: Cypress as a Testing Platform – Wilson Lau【Merpay Tech Fest 2021】 Merpay Tech Fest 2021は、事業との関わりから技術への興味を深め、プロダクトやサービスを支えるエンジニアリングを知れるお祭りで、2021年7月26日(月)からの5日間、開催しました。セッションでは、事業を支える組織・技術・課題などへの試行錯誤やアプローチを紹介していきました。 この記事は、「プラットフォームとして、Cypresssを利用したフロントエンドのテスト」の書き起こしです。 Wilson Lau氏:「Merpay Tech Fest 2021」へ、ようこそ。Wilsonと申します。プラットフォームとして、Cypresssを利用したフロントエンドのテストについてご紹介します。 私は、20
Jest vs Testing Library vs Cypress: The results of the tests are in!You probably know that knowing how to test your code is important.A lot of jobs in tech will require knowledge of testing with at least one testing tool/framework/library. Here we will look to show you how to write tests with three different tools so that you can not only see the differences between them, but also begin to underst
概要 cypressを初めて使う筆者が cognitoを認証基盤に利用するwebアプリに ログインするテストケースを作った際にハマったポイントまとめ 先に結論 ここのコードに解決策が全部入ってるからこれ見ればok https://gist.github.com/vittorio-nardone/a9b388ff7388a4ae7343cd6a2758bc4b 背景 最初、cypressをcognitoに使った事例探したらクラメソさんの記事があって、 https://dev.classmethod.jp/articles/amplify-console-cypress/ 助かったー、と思いつつ参考にして実践してみたがだめだったので、色々と試行錯誤した軌跡 ハマったポイント セレクタで入力フォームを取得できない ログイン画面を表示させて、inputタグに入力すべくセレクタで指定したが、見つから
morishitaです。 Nuxt.js で作っている SPA を Amplify Console で運用していることはこれまで数本のエントリで紹介してきました。 tech.actindi.net tech.actindi.net その Amplify Console に Cypress によるE2Eテストがサポートされたという発表が2019年の10月にありました。 aws.amazon.com その時から気になっていたのですが、ついに導入したので紹介します。 結論から言うと、Preview 機能と併用するとむちゃくちゃ便利です。 更にDependabotを組み合わせるとライブラリのアップデートもサクサク進みます! Amplify ConsoleのE2Eテスト 次の手順で、E2E テストを追加できます。 Cypressの導入 テストの実装 Amplify.yml への Test ステップの
Cypressリンク 公式Doc https://docs.cypress.io/guides/overview/why-cypress.html chromeプラグイン Cypress Scenario Recorder 以下の記載は 公式のAPIページから引用したものです。そちらを参照するとより詳細な情報が見れます。 https://docs.cypress.io/api/api/table-of-contents.html Cypress Commands Visit a page describe('My First Test', function() { it('Visits the Kitchen Sink', function() { cy.visit('https://example.cypress.io') }) }) cy.contains('type') cy.get
This is a post for the Day 8th of Merpay Advent Calendar 2021 written by @tanakaworld from the Merpay Frontend team. Introduction Merpay, a financial service, has been constantly working on quality. The Frontend team started automating Regression Testing two years ago and Integration Testing this year. In this article, I would like to look back and summarize the policy and overall picture of test
As of Cypress 7.0, the new Component Test Runner is now bundled with Cypress! It builds on our learnings from the original component testing implementation, which was hidden behind the experimentalComponentTesting flag. In this blog post we will see how to set up the Cypress Component Test Runner in a new React app created via Create React App using TypeScript. You can get the source code for the
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く