モバイルアプリにテストを導入する前に キッチハイク エンジニアの薬師寺です。 キッチハイクではReact Nativeアプリにテストを導入するにあたり、 テストライブラリの選定と、テストでは何を意識すればいいのかということを考えてきました。 今回の記事では、モバイルアプリのテストで考慮すべき点と、テストライブラリを比較して得た情報を紹介します。 モバイルアプリにテストを導入する前に ソフトウェアのテストピラミッド モバイルアプリのテストピラミッドを築くのは難しい シミュレータと実機での環境差分 アニメーション・インタラクションなどのUI部分の差分 ネイティブ層の一部のテストが困難な箇所 テスト導入のため、テストフレームワークの比較 テストランナーとE2Eテストフレームワークの関係図 比較表 テストランナーを選ぶ jest mocha AVA E2Eテストのライブラリを選ぶ Appium D

『我が名は神龍……どんなテストもひとつだけ自動化してやろう』 じゃ、じゃあ！このブラウザテストを自動化してください！ Chromeで https://kids.yahoo.co.jp/ にアクセスして 検索ワードに ねこ と入力して さがすをクリックして 検索結果にネコ - Wikipedia が含まれていることを確認して 検索結果に 買い方 を追加して さがすをクリックして 探しているのは「猫の飼い方」？と表示されることを確認して クリックすると猫の飼い方で再検索されて 検索ボックスを不倫で上書きして さがすをクリックして このページは表示できませんと出ていることを確認 『よかろう……たやすい願いだ』 まずはライブラリのインストールと初期設定をしてやろう…… # [ライブラリのインストール] # CodeceptJSとPuppeteerをインストールします。nodeとnpmが必要ですので

メルカリの自動化＆品質保証グループ（Automation & QA Group：通称AQA）の おれたま@AHA_oretama です。 私は普段、テスト自動化やCI / CD を主に行っています。 今回は、Appium×Android E2Eテストのテスト結果の見やすさを改善し、テスト結果を可視化することで気づきが生まれた話について、紹介していきたいと思います。 テスト結果の見やすさ、可視化の重要性について いま使っているテストレポートの課題 Allure Framework 並列化した分だけレポートも分かれてしまうことへの対処 スクリーンショット、スクリーンレコード以外のアタッチメントを追加することができないことへの対処 過去のテスト結果と比較できないことへの対処 他の改善点 テストのタイムラインが見える トレンドも表示できる Looker 生まれた気づき 課題 終わりに テスト結果の

次のようなテストコードを書きます。(これはMochaを使っていますが大体どんなテストフレームワークでも同じことが出来ます。) 次のスナップショットでは、transformというJSONを入力に受け取り、JSONを出力する関数をテストしています。 snapshot-test.js: const fs = require("fs"); const path = require("path"); const assert = require("assert"); const fixturesDir = path.join(__dirname, "snapshots"); // transform function const transform = require("../transform"); describe("Snapshot testing", () => { fs.readdirSy

Vue Fes Japan 2018 の 1年間単体テストを書き続けた現場から送る Vue Component のテスト https://vuefes.jp/

株式会社FOLIOのメンバーによるアドベントカレンダーです！ FOLIO Advent Calendar 2017: https://qiita.com/advent-calendar/2017/folio-sec… Storybookを取り入れたワークフローで開発を行ったところ、Storybookは単なるスタイルガイドツールではなく、ビジュアル実装のためのインフラであることを実感しました。 三度どころじゃなくおいしいなと感じているので、導入がまだならシュッと導入してしゃぶりつくして欲しいなと思いました。開発がある程度進んでからでも小さく導入できるので、予め考えておく必要のあることはあまり無いと思います。三度おいしいスライドと内容が被っていますが、おいしいものはおいしいので何度でもおいしいことを主張していきたいという思いです。 ストーリーを追加してビジュアルを実装するストーリーを追加してバ

これは FOLIO アドベントカレンダー2018 の23日目の記事です。 さて、昨日の@minodiskの記事でも触れられている通り、FOLIOのWebフロントエンドではStorybookを中心に据えた画像回帰テストを実践しています。 この記事では、FOLIOに画像回帰テストを導入するためにやってきた取り組みについて書いていきます。 大まかなワークフロー画像回帰テストのワークフローを簡単に説明します。 まずは対象となるコンポーネントについてStorybookでStoryを用意します。 StorybookこのStoryからCIで生成されるキャプチャ画像がスナップショットファイルとなります。 さて、仕様変更などによって上記のコンポーネントに変更が生じたとします。

Mercari Advent Calendar 2018 19 日目です。 担当はメルカリ JP フロントエンドチームの @nekobato がお送りします。 メルカリ フロントエンドチームでは主に React を利用してフロントエンド構築を行っており、 その中のWeb Rearchitecture では Storybook による UI Testing に取り組んでいます。 今回はフロントエンドの UI Testing と Unit Testing を Storybook & Storyshots を利用して行っているという話をします。 Storybook とは Storybook は個別の UI コンポーネントをブラウジングする開発環境を構築するモジュールです。 単独では目視による UI テストを可能にするのみですが、アドオンと組み合わせることで様々なテスト環境を構築することが可能にな

I introduced the following: - Why screenshot test - How to screenshot test using Storybook/Puppeteer/reg-suit

こんにちは。BASE で Design Group に所属している三佐和です。主に ネットショップ作成サービス「BASE」 のフロントエンドを担当しています。 背景 BASE のデザインチームはここ最近で人数が急激に増え、活動が活発になってきており、その中のプロジェクトの一つとして、現在スタイルガイドの刷新に取り組んでいます。 しかし、人数が増えていく一方で、コーディングのルールの統一をコードレビューや個人の裁量に任せていたり、マークアップからリリースするまでに時間がかかってしまうことが問題になってきていました。 そこで、新しいスタイルガイドでは、デザイナーやエンジニアの作業工数を短縮し、より効率よく開発を進めるために、コーディングルールの整備とリグレッションテストを導入することにしました！ やったこと stylelint を使ってコーディングルールを管理 BackstopJS でテストを

全体の流れ まず、今回使用するメインツールであるLOKIとREG-SUITの紹介をします。 次に目指す全体像を共有し、最後にそれを実現するための方法を説明します。 利用技術の説明 LOKI Visualized Testを実施するためにはStorybookのページにアクセスし、キャプチャする仕組みが必要です。 この機能を持ったツールがLOKIです。 上記に Visual Regression Testing for Storybook とある通り、LOKIはリグレッションテストまで実施することのできるツールです。 しかし、以下の理由から差分比較部分は別のツールを使うことにしています。 画像をGitにコミットしなくてはいけない 出力結果が画像のみのため結果が一目で分からない 差分の表示方法が好みではない REG-SUIT CUIでVisual regression testingを実施するツ

約半年前に「Puppeteer を使った Storybook の自動スクリーンショット撮影用のアドオンを作った」という記事を書きました。この時 storybook-chrome-screenshot というアドオンを作って公開した紹介でした。 当初は React のみのサポートだったのですが継続的に手を加えていて、最近 Angular と Vue.js へのサポートが完了したり、機能的にも大分実用的になってきました。 そこで今回は、storybook-chrome-screenshot と reg-viz/reg-suit を使って Visual Regression Testing (視覚回帰テスト) を導入して、ありがたみを感じるところまでを書いていきたいと思います。 だらだら書いていたら思っていたよりも長くなってしまったので、各種ツールのセットアップ だけで充分という方は読み飛ばして

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

reduxにおいてreducerのテストは重要性が高く、誰もがテストをしていると思いますが、今回はその方法を見ていくことにします。 最近ではテストはほとんど Jest が使われているので、Jest を前提としますが、他のテストフレームワークを使っている場合は適宜読み替えてください。 準備 とりあえず簡単な redux のコードを用意します。現環境で型がない環境であることは少ないでしょうから、flow を使います。TypeScript を使っているのであれば適宜読み替えてください。 akameco/how-to-test-reducers // @flow type Exact<T> = T & $Shape<T> type State = { count: number, text: string } type Action = | { type: 'inc' } | { type: 'd

某所で書いたものを公開用に書き直したもの 前提 フロントエンドでTDDは難しい、というかほぼ不可能である。なぜなら事前に副作用をデータとして表現できるか不明だからだ。たとえばあなたのプロダクトの画面の何処かにボタンを追加するために、その内部表現を事前に思い浮かべることが可能だろうか？ react-redux などのFluxフレームワークは如何に副作用をアクションとして表現することで、テスト・デバッグのための情報を残すか、という視点で発展してきた側面がある。あの冗長なアクション定義は、全てデバッグのために書いていると言っても、過言ではない。それすら「Textは文字がある」といったトートロジーなデータになりがち。 フロントエンドの現実的な単体テストは、他の開発者のために、自分が書いたコードの要求を満たしているか検知する手段として、防衛的にテストアフターしておく。これぐらいしか現実的な手法がない

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert

東京Node学園祭 2017 Nov 25 React Nativeアプリで「E2Eやってみよう」と思い実行に移した話 E2Eテストやってみようかな、と思っている人を想定