日々いろいろなWebサイトの制作や修正を対応していく中で、修正したページとは関係ない（と思っていた）ページで表示が崩れてしまったことってありませんか？ 私はたびたび経験があります。 毎回目視で全ページをチェックすれば防げるのかもしれませんが、それは現実的ではありません。 自動で全ページをチェックしてくれて不具合があれば教えてくれる、そんな便利なツールがあればと何度も思いました。 どうやら現代の技術でそれは作れるみたいです。ビジュアルリグレッションテストというらしいです。 ビジュアルリグレッションテストとは ざっくりいうと「見た目の比較」をするテストのことです。 変更前のWebサイトのスクリーンショットを用意しておき、変更後のスクリーンショットを撮り比較することで、どこが変わったか差分を表示し確認することができます。 どうやって使うの ビジュアルリグレッションテストを導入するための方法はいく

こんにちは、Gaji-Labo アシスタントエンジニアの石垣です。 前回の記事ではビジュアルリグレッションテストツールについて書きました。 今回はVRTツールの新しい選択肢として Playwright というE2E テストのための Node.js フレームワークを社内メンバーに教えてもらったので、触ってみた感触について書いてみたいと思います。 導入まずは playwright と @playwright/test をプロジェクトに導入します。 @playwright/test は Playwright を使用としてテストを作成・実行するテストランナーとしてのライブラリです。

本記事は「株式会社ログラス Product チーム Advent Calendar 2022」12 日目の記事です。はじめにフロントエンドのテスト手法の 1 つに Visual Regression Testing（以下、VRT）があります。 これは、アプリケーションの画面を画像として保存し、画像の差分比較をすることで意図せぬ変更が生じていないかテストする方法です。 ここ数年で広く普及し、用語としても一般的になったように思います。 私も以前、とある OSS に reg-suit & Storycap を使った VRT を導入したことがあるのですが、その後もいくつか VRT のためのライブラリが登場したもののキャッチアップできていませんでした。 そこで今回は知識のアップデートを目的として、ここ最近登場した（と思われる）VRT のライブラリをいくつかご紹介します。 なお、今回紹介するツールはす

こんにちは！フロントエンドエンジニアの松本です。 私が担当するプロダクトは今年で20年に到達し、ご長寿プロダクトとなりました。 息の長いプロダクトにはレガシー化が付き物でありますが、レガシー化を進めないためにも、日々技術を最新化するためのリファクタリングが必要です。 今回は、品質を担保しつつ安全にリファクタリングを進めるために、ビジュアルリグレッションテストを試験導入してみました。想像以上に導入が簡単だったので導入方法の紹介と、苦労した点、導入してよかった点について紹介します。 ビジュアルリグレッションテストとは 試験導入の経緯 今回使用したライブラリ 導入方法 Playwrightの導入 reg-suitの導入 テストの流れについて 苦労した点 導入して良かった点 ビジュアルリグレッションテストとは ビジュアルリグレッションテストは、画面に表示されたページや要素が期待通りに表示されている

今回は、Ranorexとreg-cli（reg-suit）の連携によるビジュアルテストの検証について紹介します。 Ranorex単体でも、ノンプログラミングによる画像比較や、ビジュアルテストを行うことも可能であり、どの方法使用するかはテスト内容や環境に合わせて選択することができます。 reg-cli（reg-suit）とは？ reg-cliは、VRT（Visual Regression Testing）を行うためのテストツール（OSS）であり、reg-vizにて提供されています。一般的にWebアプリなどのビジュアルリグレッションテストなどで利用されており、コマンドラインで使用できます。また、関連ツールとしてreg-suitがあります。 reg-cli：指定のフォルダ内にある２つの画像を比較し、差分結果をHTMLレポートして出力します。reg-suit：比較画像データや、差分結果をAWS S

はじめに こんにちは。ブランドソリューション開発本部FAANSバックエンドブロックの佐野です。普段はサーバーサイドエンジニアとして、FAANSのバックエンドシステムを開発しています。 FAANSとは、弊社が2022年8月に正式ローンチした、アパレル店舗で働くシ…

こんにちは！フロントエンドエキスパートチームの @mugi_uno です。 みなさんは Visual Regression Test は普段活用していますか？ 昨今では事例もよく耳にするようになった印象です。一度使って手放せなくなった方もいるのではないでしょうか。 今回の記事では、通常のプロダクト新規開発とは異なる “脱レガシー” の文脈で Playwright を用いた簡易的な Visual Regression Test を試してみたので、導入に至る経緯と、どのように実施しているかを紹介します。 フロントエンドリアーキテクチャとサイレントリリース 現在サイボウズでは kintone のフロントエンドリアーキテクチャプロジェクトと称して、Closure Tools から React への脱レガシー作業が進行中です。プロジェクトの詳細については @koba04 が書いた次の記事をご覧くださ

こんにちは。WEAR Webフロントエンドチームの冨川 (@ssssota) です。 私たちのチームでは普段WEARのWebフロントエンド全般の開発から運用までを行なっています。また、あと半年ほどで10年になるVBScript+jQuery環境からNext.js/React環境へのリプレイスを進めています。 リプレイスの詳細は弊チームの藤井が書いた記事をご覧ください。 techblog.zozo.com 本記事では、WEARのWebリプレイス環境における自動テストの構成について紹介します。自動テストの構成を悩んでいる方の決断の一助になれば幸いです。 はじめに 前提 構成の決定と判断 QAチームによるE2Eテスト Playwrightによるビジュアルリグレッションテスト Vitestによる小さなテスト その他検討したテスト おわりに はじめに 先に結論を述べますが、WEARのWebフロントエ

デブサミ夏 【B-4】 2019/07/02 13:15 ～ 14:00 https://event.shoeisha.jp/devsumi/20190702/session/2077/

#phperkaigi 2019での発表資料です。 応用編は https://speakerdeck.com/hgsgtk/think-deep-unit-test-practical-problem にて

先日行われたRails Developers Meetup 2019で、Clean Test Code Revisedというタイトルで発表しました。スライドはこちら。 動画も上がっているようなので興味のある方はどうぞ*1。 所感 ご存知のかたもいると思いますが、この発表は2017年5月に行われたRails Developers Meetup第一回目で発表した内容を更に一歩進めたものとなっています。 Rails Developers Meetup で綺麗なテストコードの書き方について発表した - おもしろwebサービス開発日記 当時僕の頭の中にあった「こういうケースのときはこう書く。なぜならこうだから」というものを点で出したのが前回の発表で、それらを「脳に負荷をかけない」という線でつなげてまとめたのが今回の発表になります。 テストコードをレビューしたときに「これなんか読みづらいな…」と思って

2019/04/04に開催された、 Repro Tech #7 Practical AI Supported by NAVITIME で発表した資料です。 https://repro-tech.connpass.com/event/124326/

こんにちは、kintone チームの宮田です！ 今回は、Selenium/Appium Advent Calendar 2014 15日目の記事として、Docker を使った Selenium Grid の環境構築方法について説明します。 背景 kintone チームでは、Selenium Grid を使用して Selenium テストを並列化しています。これまでは、VM で環境構築していたのですが、VM 数が増えてくるにつれてメンテナンスコストが上がってきたので、Docker による楽な環境構築方法をチームで探求していました。そこにいいタイミングで本家の Docker イメージのリポジトリが作成されていたので、使ってみることにしました。 Docker のインストール OS は、Ubuntu 14.04 を使用します。 公式HPでは、docker.io パッケージのインストールと lxc-

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

DBのレイヤーを含むエンドツーエンドテストやDBに依存したコンポーネントの自動テストがたくさんあると、全てのテストが終わるまでに長い時間がかかるようになってしまうことがあります。DBのクエリ実行はネットワークIOやディスクIOなどを含んだ高コストな処理だからです。 Docker を少し工夫して使うと、お手軽にテスト中のDBのクエリ実行にかかる時間を削減できます。自動テストが完了するまでの待ち時間を短縮し、開発のフィードバックサイクルをより早く回せるようになります！ MariaDB を用いたプロジェクトの実績では、DBアクセスを伴うテストケースが 153件 ありましたが、この方法によりそのテストスイートのローカル環境での実行時間を約 43% 削減できました（約 145.7s → 約 83.3s）。 どうやって？ Docker で tmpfs を使います。 tmpfs tmpfs とは、ディス

こんにちは、QAチームのTeiiとakinkです。 この記事は Gunosy Advent Calendar 2018、14日目の記事です。 昨日の記事ははよんさんのUIデザインにおけるKPI設定の重要性でした。 はじめに テストプロセスをより良いものにするため、現在アジャイルチームと親和性の高いテスト管理ツール導入を検討しています。 そこで、Top 20 Best Test Management Tools (New 2023 Rankings) という記事で評価が高かったqTestとPractiTest を試しに触ってみたので、個人的な感想も踏まえて紹介したいと思います。 実際のプロジェクトでは利用していないため、探しても見つからなかった機能等あるかもしれませんが、ご了承ください。 はじめに qTest テスト計画 要件管理 テストケース管理 テスト実行 分析ダッシュボード 所感 良か

「テスト駆動Python」という本のレビューをしました。 本書はpytestというテストフレームワークの解説本ですが、使い方の説明だけにとどまらない実践的な内容になっています。 Tasksという簡単なアプリケーションをサンプルとし、実際の開発でpytestをどう使うと便利なのか、丁寧に解説してくれています。 私は普段Pythonを使っているので、使ったことはないもののpytestの存在は知っていましたが、本書のレビューをさせてもらって、その便利さに驚きました。 テスト結果の表示内容のカスタマイズ・pdbを使ったステップ実行など、デバッグ作業を助けてくれる仕組みが多数用意されています。 また、複数テストで実行するロジックを共通化した「フィクスチャ」・テストのパラメータ化などを使うことで、ちょっと複雑なテストでも簡潔に書けます。 標準のunittestで満足していた人は、一度この本を読んでみて

Docker × Android エミュレータで、自動テスト(Appium)を並列化・爆速にする環境を作ったお話 これは Mercari Advent Calendar 2018 10日目の記事です。 こんにちは、メルカリの自動化＆品質保証グループ（Automation & QA Group：通称AQA) の 根本 征 です。 私は普段、テスト自動化・CI / CD 改善・その他社内の生産性を上げるための自動化を行っています。 今回は、Android・Appium の自動テストを 20~30台のエミュレータで並列実行できる 環境を作成したので、その試行錯誤についてお話したいと思います。 これまでの Android 自動テスト環境とその課題 Docker-Android クラウドでどう実行させたか 仮想マシンの入れ子(Nested Virtualization) を有効にする ベアメタルイン

福岡の（多分）まじめなWeb屋さんの社内事情について、あるいは社内コミュニ ケーションのあり方について