CircleCI では、並列実行するコンピューティング環境に対してテストを自動的に割り当てることができます。 CircleCI の設定ファイルで、parallelism キーを 1 より大きい値に設定すると、ジョブの実行環境について、同一の環境が複数スピンアップされます。 テスト分割機能を使用するには、parallelism キーに加えて、CircleCI CLI も必要です。 CLI の circleci tests glob コマンドと circleci tests split コマンドを使用して、テストスイートの定義と、複数の環境に対するテストの割り当てを行います。 実行時には CLI がジョブに自動で挿入されるので、これらの circleci tests コマンドは、特別な設定をすることなく利用できます。

概要 本記事ではPlaywrightを使ったE2Eテスト自動化の実践経験を踏まえ、Playwrightにおけるテスト実装のノウハウを紹介します。Playwrightは、WebアプリのE2E（end-to-end）テストを自動化するためのライブラリです。テスト実装手順などは公式ドキュメントを参照すれば理解できましたが、良いテストを書くために参考にできる記事はあまり見つけられませんでした。 本記事では実際にWebサイトへE2Eテストを実施して得られた、より良いテストを書くためのノウハウを紹介します。 前提 今回は本サイトFintanがテスト対象となります。FintanはWordPressで作成したサイトですが、テーマを修正したり、WordPressプラグインを導入したりすることで日々改善を行っています。Fintanのサイトの改善業務においては、以下２つのテストを自動化しています。 「記事が問題

Introduction​ Large test suites can be structured to optimize ease of authoring and maintenance. Page object models are one such approach to structure your test suite. A page object represents a part of your web application. An e-commerce web application might have a home page, a listings page and a checkout page. Each of them can be represented by page object models. Page objects simplify authori

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

TOPインタビュー米MSと日立で品質を極めてきた2人が、マネーフォワードCQOに就任。日本企業が囚われている品質保証の呪縛とは？ 株式会社マネーフォワード　CQO 池田 暁 2002年に日立グループに入社、情報通信系、医用系、自動車系と多様なドメインにて品質保証活動を推進。Web業界に転身後、マネーフォワードに入社。社外ではNPO法人ASTER理事やJaSST実行委員等活動中。著書には、『実践ソフトウェア・エンジニアリング 第9版』や『SQuBOKガイド V3（共著）』、『[改訂新版]マインドマップから始めるソフトウェアテスト（共著）』がある。 株式会社マネーフォワード　CQO 高橋 寿一 MicrosoftやSonyにて、ソフトウェアテスト業務や品質担当部長を務める。Microsoft退社後にフロリダ工科大学大学院に入学し修士号（ソフトウェア工学）を、その後広島市立大学にて博士号（情報工

マイクロソフト、Webアプリテストの自動化サービス「Microsoft Playwright Testing」プレビューを開始 マイクロソフトは、Webアプリケーションのテスト自動化フレームワーク「Playwright」を用いた、Microsoft Azure上のテスト自動化サービス「Microsoft Playwright Testing」のプライベートプレビューを開始すると発表しました。 テスト自動化フレームワーク「Playwright」 Playwrightは、マイクロソフトが中心となって開発しているオープンソースのWebアプリケーション向けテスト自動化フレームワークです。 実行環境、対象ブラウザ、対応言語が幅広く、テスト実行時にはWebブラウザの動作を自動的に待つ機能を備えるなど、柔軟で精度の高いテスト自動化が実現できる点を特長としています。 具体的には、デスクトップ向けのWebア

PHPerが日々奮闘するソフトウェア開発の現場では、ユニットテストを書くことは推奨され普及してきました。 一方、E2Eといった高レベルのテストになると整備したいという気持ちはありつつ、初期構築コスト自体の高さや、構築したもののテスト維持に失敗する話をよく聞きます。 その要因の一つとして、本トークではテスト環境とテストデータに着目します。 テスト環境とテストデータの扱いは、既存システム都合との折衷案を取る必要があったりする理想と現実の間での戦いになる事が多いでしょう。 現場での戦いの武器となるような事例とそれぞれの実践手段のメリット・デメリットをまとめてお伝えします。

Merpay Advent Calendar 2021 の 8 日目はメルペイフロントエンドチーム の @tanakaworld がお送りします。 はじめに メルペイは金融サービスであり、品質の維持・向上に日々取り組んでいます。フロントエンドチームでは、約 2 年前からリグレッションテストの自動化に取り組み始め、直近の 1 年間はインテグレーションテストの自動化にもチャレンジしてきました。本記事ではメルペイフロントエンドチームに於けるテスト自動化の方針とその全体像について振り返ってみたいと思います。 フロントエンドプロダクトに関わるテストは次のものが挙げられます。これらをひとつずつ順番に見ていきたいと思います。 ユニットテスト インテグレーションテスト シナリオテスト リグレッションテスト テストの種類とそのカバレッジ対象 1. ユニットテスト ユニットテストは Jest を用いて、主に

はじめにこんにちは。フロントエンド/SETエンジニアの@1010realです。 子育て中は自分の事が全て後回しになりますね。。 # 今日の朝ごはんはカップ麺 今回は、新機能の開発において、mock service workerを使ってGraphQLエンドポイントをモックした単体テストを導入したので、それについてまとめてみました。 ちなみに導入に関しては、大部分を以下の記事を参考にさせて頂きました。とても勉強になりました。 mswとgraphql codegenでGraphQLをモックし、効果的で効率的なReactのテストを書く 本記事は上記の導入に際して、細部の環境の差異、実際につまづいた点および自分が調べた点を追加した内容になっております。 目次はじめにmswについて導入手順 Typed Document Nodeを生成するmswを設定するテスト用のRender関数を用意するテストを書く

こんにちは。システム開発一部の吉田です。 最近初めてパーマをかけてみたら元々の天パと掛け合わさって髪がモジャモジャになりました。気に入ってはいますけど取れるのがいつになるのか心配です。 絶賛開発中のフロントエンド領域でPlaywrightとmswを用いたE2Eテスト(End to End Test)の導入をしました。これらのツールの導入に至った経緯と簡単な使い方をご紹介します。 以前書いたモックサーバーの記事の内容も含んでいるので、ご覧になっていない方は以下を参照してみてください。 blog.tech-monex.com E2Eテストのスコープ E2Eテストの概要はCircleCIの記事を見るとなんとなくわかった気になれます。 circleci.com 一言で言うと、E2Eテストとはユーザーが実際に操作する状況をシミュレートし、アプリケーション全体の動作を検証するテスト手法のことです。 ア

フロントエンド E2E テスト + MSW (Playwright/Cypress 試行) メモ E2E テストフレームワーク Playwright Cypress MSW のレスポンス上書き設定 mswjs/data Github Actions (Cypress) さいごに フロントエンド E2E テスト + MSW (Playwright/Cypress 試行) メモ E2E テストフレームワーク 色々あるが、本記事で触れるのは Playwright と Cypress 以下４つの比較がある。 ref:E2E テストツール Autify を使うまでの話 TestCafe WebDriverIO Cypress.io Autify (有料) 以下３つの比較がある。 ref: E2E テストフレームワークはどれを選べばいいんじゃい！ Cypress Playwright Codecept

各E2Eテストフレームワークの特徴 Playwright playwright codegen https://~~ が強力 自分のブラウザ操作を記録してコードを生成できるのが非常に魅力的 生成されたコードは基本的にDOM要素に記述されたテキストからDOM要素を見つけてくれる WebKitでのテストが可能 WebKitはSafariの一部でしかないため、Safariと挙動が違う可能性もある 試験的機能としてUIフレームワークのコンポーネントをテストできる Firefox Nightlyでのテストが可能 正式版とNightly版は動作が違う場合があるので注意 公式がVSCodeの拡張機能を出している Microsoft製でゼロコストでTypeScript対応可能 プラグインなしでVisual Regression Test（以下VRT）が可能 テストが失敗したときにtraceファイルを出力で

こんにちは、フロントエンドエンジニアのやなぎ（ @apple_yagi ）です。 先日、フロントエンドのIntegration Testで使用されていたCypressをPlaywrightに移行したので、その理由や実際に移行してみて感じたメリットなどをご紹介いたします。 なぜ移行したのか いくつか理由はありますが、大きな理由の1つとして Cypress は並列でテストを実行することができなかったことがあります。 Cypress で書かれた Integration Test はAPIリクエストを全てモックしているため、データベースの状態などにテスト結果が左右されることがなく、全てのテストを並列で実行可能でした。しかし、Cypressは並列でテストを実行することができず、テストを直列で実行するしかなかったため、テストの完了までに時間がかかってしまう問題がありました。