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 以下4つの比較がある。 ref:E2E テストツール Autify を使うまでの話 TestCafe WebDriverIO Cypress.io Autify (有料) 以下3つの比較がある。 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は並列でテストを実行することができず、テストを直列で実行するしかなかったため、テストの完了までに時間がかかってしまう問題がありました。
小中新規開発グループ (a.k.a. tara チーム) の qsona です。 tara チームでは、スタディサプリ中学講座というプロダクトを開発しており、約1年前 (2022-02) に本リリースして以来、継続してプロダクト開発を続けています。 tara チームのプロダクト開発は、基本的にスクラムの手法にのっとる形で行っています。ビジネス的な境界により分けられた3つのスクラムチームが存在します。 スクラムの運用については、それぞれの現場において悩みごとが起きがちだと思いますが、tara チームでもご多分に漏れず、うまくいっていること・いっていないことが存在します。今回は、その3つのうちの1つのチームである「学習コアチーム」において存在した、Sprint Planning に関する (あるいはそこから掘り出された) 課題と、それに対してどう対処したかについて書きたいと思います。 なお、本
ソフトウェアエンジニアとして成長するために続けてきた活動と、学習を支えるモチベーションは何だったのか。Repro株式会社の橋立友宏(joker1007)さんに10年以上のキャリアを振り返っていただき、それぞれのステージで意識してきたことについて寄稿いただきました。 Repro株式会社でチーフアーキテクトをしている橋立です。ネット上ではjokerの名前(@joker1007)で活動しています。 私は神戸大学法学部を卒業し、野村総合研究所でテクニカルエンジニアとして勤務、株式会社ウサギィでの受託開発を経て、フリーランスエンジニアになりました。その中で縁があったRepro株式会社に正式にジョインすることになり、CTOとして6年ほど勤務。会社のステージの変化で、立ち位置がCTOという肩書と噛み合わなくなってきたため肩書を変更し、今はチーフアーキテクトとして勤務しています。 以前、自分のブログで「ソ
By all accounts, Figma has been an amazing tool for designers. We've used it extensively at 37signals, and I'm sure most every other software shop has too. Adobe didn't pay $20 billion for nothing. But we don't do the bulk of our design work with or in Figma when developing Basecamp or HEY for the web. That's all done directly in HTML and CSS, as it should be. Because no matter how good Figma is,
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く