Shizuoka.js #7
タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
はじめに なぜ VRT が必要なのか? VRTとは? Nx と Playwright で賢く VRT を実施する どう賢く実施したか 結果 まとめ 参考資料 はじめに 「食べログ ラーメン TOKYO 百名店」の全店舗訪問を目指してラーメン巡りを続けているフロントエンドエンジニアの kenshin です。 フロントエンド開発者の皆さん、新機能を追加したり、ライブラリをアップデートした後に UI が予期せず変更されてしまった経験はありませんか?このような問題を素早く検知し、未然に防ぐ方法として、ビジュアルリグレッションテスト(以下、VRT)があります。 この記事では、Nx と Playwright を用いて VRT を効率的に行う方法をご紹介します! なぜ VRT が必要なのか? フロントエンド開発では、新機能の追加やライブラリのアップデートにより、予期せぬ UI 変更が発生することがありま
こんにちは。N予備校の品質保証グループです。 品質保証グループでは、日々案件ごとの業務に関わっています。今後はより横断的な関わりを強化していき、開発チームと密な連携を進めようとしています。 そこで、今回はリグレッションテストについてお話しようと思います。 リグレッションテストとは? 一般的には、新規機能や既存機能の改修、不具合修正によって、既存機能に意図しない影響が出ていないかを確認する目的のテスト全般のことを指します。 リグレッションテストをしないと、元々問題なかった機能が使えなくなったり、意図しない動きになっていたりと品質低下に繋がります。 横断リグレッションテスト導入前の状況 品質保証グループは2021年1月に立ち上がりました。(チーム立ち上げのブログ詳細はこちら) 以前までは機能ごとの動作確認はもちろんのこと、リグレッションテストも同様に開発チームごとに開発者が自身の手で行っていま
こんにちは。フロントエンドエンジニアの小林和弘です。 Vue.js + Atomic Designでつくられたプロジェクトにビジュアルリグレッションテストを導入しました。 ビジュアルリグレッションテストでUIの安全性を高める コンポーネントの改修、新機能の追加、ライブラリのアップデートを行う際、UIに不要な変更が入っていないか不安になることがあると思います。リファクタリングをしようにも、意図しないところでUIが壊れないか心配になります。 画面表示に関わるコードを改修するたびに、ローカル環境やステージング環境で全UIコンポーネントを確認するのは難しいです。 また、ステージング環境と本番環境を並べて変更されたUIを目視で確認するのも非現実的です。 ビジュアルリグレッションテストはその名前の通り、視覚的な回帰テストを指します。改修前後のスクリーンショットの差分を検証するためのテストです。 開発に
はじめに 背景 やりたいこと Why MSW? 導入手順 詰まったこと defaultのtimeout設定時間が短い CIで落ちた時の検証方法がわからない 認証後のストレージの状態が入ってこない 今後の展望 おわりに はじめに enechainでフロントエンドエンジニアをしている@Shunya078です! 自分の所属するGXデスクでは『日本気候取引所 - Japan Climate Exchange』(以下JCEX)のサービス開発を行っており、その中でReactを使用したフロントエンドの開発を担当しています。 リグレッションテストは運用を考えると、設計から導入した後、どう管理していくかまで検討する点が多く存在します。 JCEXは去年の年末にリリースされたばかりのサービスで、まだブラウザまで含めたリグレッション相当になるテストレイヤーが導入できておらず、存在しませんでした。 今回は新たに自チ
Bill One Entry*1グループの秋山です。 1. はじめに 2010年代前半に登場したReactやVue.jsに代表される宣言的UI実装は、大規模なSPAの構築を可能にしました。その一方、フロントエンド領域に新たなアーキテクチャが導入されたことで、それまでWebアプリケーション開発で定石とされたテスト手法を適用しづらいケースが増え、新たなベストプラクティスが求められるようになりました。 その要請に応える形で、2010年代後半にはフロントエンドのテスト手法に緩やかなパラダイムシフトがありました。この記事ではそのパラダイムシフトを振り返りながら、フロントエンドで必要なテストについて考察し、最後にChromaticを用いたビジュアルリグレッションテストを紹介します。 2. Testing Pyramid と フロントエンド テストを語る際によく持ち出されるメタファとして、Testing
自作CPUのリグレッションテストやCIをGitHub上で行いたくて、いくつか手法を調査している。 1つの手法としては、Dockerfileを使ってリグレッション環境を構築する。Dockerイメージ上にRISC-VツールチェインとVerilatorをインストールしておく。これをDockerHubに登録しておいた。 以下がDockefileの一部。VerilatorとRISC-Vツールチェインをインストールしている。 FROM ubuntu:22.04 RUN apt update ## ... 途中省略 ... # ------------------ # Install Verilator # ------------------ RUN curl -L https://github.com/verilator/verilator/archive/refs/tags/v4.228.tar.
MSW はネットワークレベルでリクエストをインターセプトする、自動テストで便利なモックサーバーです。過去記事でも紹介したとおり、スパイ(モック関数)をネットワークレベルに忍ばせることが可能です。実際に WebAPI が呼ばれた時の Payload の検証は、Jest 組み込みのモック機能では実現できない領域です。本稿は「WebAPI リグレッションテスト」を実施するための、MSW 活用方法を解説します。記事で使用しているサンプルコードはこちら。 課題の概要 Web アプリケーションページのほとんどは「1.UI を表示し/2.入力操作し/3.WebAPI 通信し/4.通信後処理を行う」という一連処理が責務です。このようなページに書かれるテストは、WebAPI 通信前後に集中しがちです。MSW を使用すると、以下の図の様に「送信後処理」まで到達可能なため、例えば「WebAPI レスポンスが返っ
こんにちは!スマートキャンプでインサイドセールスに特化した SaaSを作っているエンジニアの井上です。 携わっている上記のプロダクトは使いやすさにこだわっているため、UIの修正を行うことが多々あります。 そんななかで起こった問題の対応としてビジュアルリグレッションテストを導入したので、今回はその話をできればと思います。 背景 ビジュアルリグレッションテストとは? ビジュアルリグレッションテストをやる目的 何をテストをするのか? 使用したツール Cypress reg-suit 画像を取得する 画像の差分を検知する Circle CIによる自動化 ベース画像の自動更新 ビジュアルリグレッションテストの実行 ハマったところ 結果どうなったか reg-suitの結果画面 今後の改善・取り組みたいこと 背景 ビジュアルリグレッションテストを導入する前に、UIに大きく影響する改修がありました。 影響
こんにちは、freeeのQAでマネージャーをしてるymtyです。 freee QA Advent Calendar2023 22日目です。 私は、QAマネージャーとしていくつかのプロダクトのQAに関わっています。今日はその中のひとつで、freee会計の申請機能(経費精算、各種申請、支払依頼、購買申請)を担当しているQAのメンバーであるMさんとリグレッションテストで使うテストの設計をした話を書きます。 テスト設計の細かい内容は読み飛ばしたい方は最後のほうにある(ここ大事)テスト設計の裏話って部分だけ読んでもらえればいいと思います! きっかけ 最初にやったこと ワークフローのステータス遷移のテスト設計 テストで確認したい状態やイベントを追記 0スイッチテストケースをテスト実行しやすいように連結してシナリオにする 関連申請の紐付けパターンと申請時の入力パターンのテスト設計 権限のテスト設計 (こ
マネーフォワード関西開発拠点エンジニアの @uenoY4 です。 現在、私のチームではフロントエンドに Next.js を使用したプロダクトの開発をしています。 その中でリファクタリングなど既存実装に修正を加えた際に、意図しないUIの崩れが起きることを防ぎたいという思いから、ビジュアルリグレッションテストを行うようにしました。今回はビジュアルリグレッションテストを行うために導入したChromaticについてお話しします。 目次 ビジュアルリグレッションテストとは Chromaticとは Chromatic導入のきっかけ 実際導入してみて まとめ ビジュアルリグレッションテストとは ビジュアルリグレッションテストとは、ページの見た目をテストする仕組みで、変更前のページやコンポーネントの画像と変更後の画像を比較して検証を行います。要素のサイズや配置などのピクセルレベルの変更やテキスト色、背景色
日々いろいろなWebサイトの制作や修正を対応していく中で、修正したページとは関係ない(と思っていた)ページで表示が崩れてしまったことってありませんか? 私はたびたび経験があります。 毎回目視で全ページをチェックすれば防げるのかもしれませんが、それは現実的ではありません。 自動で全ページをチェックしてくれて不具合があれば教えてくれる、そんな便利なツールがあればと何度も思いました。 どうやら現代の技術でそれは作れるみたいです。ビジュアルリグレッションテストというらしいです。 ビジュアルリグレッションテストとは ざっくりいうと「見た目の比較」をするテストのことです。 変更前のWebサイトのスクリーンショットを用意しておき、変更後のスクリーンショットを撮り比較することで、どこが変わったか差分を表示し確認することができます。 どうやって使うの ビジュアルリグレッションテストを導入するための方法はいく
こんにちは、MedPeerの開発を担当している森田です。 今回は私が開発に参画しているMedPeerに元々E2Eテストで利用していたCapybaraと、reg-cliを利用してビジュアルリグレッションテスト(以下VRT)を行える環境を整備したので、それについてご紹介させていただきます。 なぜ、VRTを導入するのか? VRTの要件と技術選定 実際に構築したVRT基盤の概要 VRT基盤の具体的な話 System Spec内でスクリーンショットを取得する reg-cliでスクリーンショットの差分をチェックする 分かりやすいコマンドでVRTを実行できるようにする CIで差分をチェックする OS間での利用フォントによる違いを吸収する おわりに 参考にさせて頂いた資料 なぜ、VRTを導入するのか? MedPeerでは元々System Specを活用したE2Eテストを利用してフロントエンドを含めて品質を
はじめに この記事はBASE Advent Calendar 2021の15日目の記事です。 BASE株式会社 Owners Experience Frontend チームのパンダ(@Panda_Program)です。 2021年の5月に入社してから、アサインされるプロジェクトの仕事以外に社内 UI コンポーネントライブラリ「BBQ」のメンテナンスに取り組んでいました。 その中でも特に Storybook 周りの整理をする過程、Storybook の v5 から v6 へのバージョンアップとその自動化のプロセスを以下の記事にまとめました。 Vue2 + Storybook v5 のコンポーネントを v6 向けに書き換える TypeScript Compiler API で40の Storybook コンポーネントを storiesOf から CSF(Component Story Form
こんにちは、デジタルトランスフォーメーション(DX)事業本部のエンジニアの中嶋(@nyamadorim)です。もともと Rails のサーバサイド開発をメインに担当していましたが、今期はフロントエンド開発に取り組んでいます。 この記事では、「おうちの語り部*1」というプロダクトにビジュアルリグレッションテストを導入して、CSS の改善サイクルが回り始めた話を紹介します。 ビジュアルリグレッションテストとは ビジュアルリグレッションテスト導入の動機 テストツールの選定 reg-suit 他のテストツール reg-suit によるテスト環境の構築 reg-suit によるビジュアルリグレッションテストのフロー reg-suit の利用イメージ 差分が見つかれば、Pull Request に通知 どのページ/コンポーネントが変わったかを見る ピクセル単位で差分を確認する 差分がなければ ✨✨ R
はじめに みなさんこんにちは。LINEのフロントエンドエンジニアの藤井です。年末年始に実施した「LINEのお年玉」キャンペーンも今年で4回目の実施となりました。 今年は過去4年で経験した様々な反省点を振り返り、様々な改善を行いました。今回はそのなかの一つである「ビジュアルレグレッションテスト」の実施についてご紹介します。この記事では、ビジュアルレグレッションテストを運用していく上で工夫したことや、得られた知見などを共有したいと思います。 案件の特徴を紹介 まずは「LINEのお年玉」キャンペーンの特徴をご紹介します。 デコレータ使わない Vue.js + TypeScript で進んだ「LINEのお年玉」キャンペーンや「LINEのお年玉」におけるフロントエンドでの UX へのこだわりでも紹介されていますが、毎年年末年始に行われるキャンペーンとして、トラフィックが多いアプリケーションを、短期間
Chromatic とは Chromatic とは、Storybook のメンテナーが作成している Storybook 用のツールです。Storybook をビルドして公開したり、ストーリーごとのスクリーンショットを撮影し、差分を比較してくれる機能を備えています。 Chromatic を使うことにより、UI の予期せぬ変更を事前に検知することができます。本記事では Chromatic の導入、活用方法をご紹介します。 なお、BASE 社では社内の UI コンポーネントライブラリである BBQ で Chromatic を導入、活用しています。その経緯はアドベントカレンダー15日目に公開する記事でご紹介します。 Chromatic をプロジェクトに導入する サンプルプロジェクトを作成する 今回は Storybook 公式で用意されているサンプルプロジェクトを利用します。 プロジェクト作成にあた
こんにちは!フロントエンドエンジニアの松本です。 私が担当するプロダクトは今年で20年に到達し、ご長寿プロダクトとなりました。 息の長いプロダクトにはレガシー化が付き物でありますが、レガシー化を進めないためにも、日々技術を最新化するためのリファクタリングが必要です。 今回は、品質を担保しつつ安全にリファクタリングを進めるために、ビジュアルリグレッションテストを試験導入してみました。想像以上に導入が簡単だったので導入方法の紹介と、苦労した点、導入してよかった点について紹介します。 ビジュアルリグレッションテストとは 試験導入の経緯 今回使用したライブラリ 導入方法 Playwrightの導入 reg-suitの導入 テストの流れについて 苦労した点 導入して良かった点 ビジュアルリグレッションテストとは ビジュアルリグレッションテストは、画面に表示されたページや要素が期待通りに表示されている
ビジュアルリグレッションテストのプラットフォーム Percy を使ってみたらなかなか良かったので紹介です。 Percyとは? Percy はビジュアルリグレッションテスト(ページのスクリーンショットをピクセル単位で比較をすることで意図せぬ UI の変更を検知するテスト手法)のプラットフォームです。 Percy を使うことでビジュアルリグレッションテストに必要な画像の保存や、画像変化を検出するページのレンダリング、変更の通知までとても手軽に実現できます。 料金体系 Percy の料金体型はアップロードするスクリーンショットの枚数によって変わります。 月あたり 5,000 枚までは無料で利用できます。それ以降は 25,000 枚で 99$(年払い), 100,000 枚で 399$(年払い)と変わっていきます。 リリース頻度やページ数によりますがリリースブランチのプルリクエストのみを検証対象と
はじめに 初めまして。QAチームの三木と申します。 commmuneモバイルアプリのQAを担当しており、入社して7ヶ月が経ちました。 モバイルアプリチームでは、新機能開発だけでなく既存機能の改修や不具合修正を日々並行して進めています。 特に、「既存機能の改修や不具合修正」は小さい単位で行われるため、その変更起因で意図しない箇所に新しい不具合が発生する可能性があり、リグレッションテストでの確認が必要です。 現状、モバイルアプリのテストはほとんどが手動テストのため、リグレッションテストも手動で実施しています。 今回は、「意図しない不具合」をなるべく減らすために、影響範囲をどのように調べているかについて書きます。 リグレッションテストの定義 まず、リグレッションテストの一般的な意味や目的を定義します。 システムに対する修正や変更によって、意図せずに振る舞いに影響を与えることがある。 そういった意
BackstopJSでのビジュアルリグレッションテストをした際のまとめです。 勉強中のため、コメント・アドバイスをいただけると幸いです。 ビジュアルリグレッションテストとは ビジュアルリグレッションテストは、CSSやコードを変更した後に、変更前と同じ表示・実行結果になるかを検証するテストの一種です。 スクリーンショットを撮影することで、前後で差分が出ていないか検証します。 検出できるもの ボタンや画像が表示可否 ページの表示可否 検出できないもの ボタンがクリック ページ遷移 画像のalt属性設定可否 BackstopJSでのビジュアルリグレッションテスト 今回は、BackstopJSでビジュアルリグレッションテストを行います。 BackstopJSの使い方 (1) Node.js / npm をインストール (2) npmでBackstopJSをインストール $ install -g b
こんにちは。ATOM事業部フロントエンドテックリード兼デザイナーの河原です。 ATOMでは現在大規模なリファクタリングを実施してます。 今回はその一環で ビジュアルリグレッションテスト を導入した事例を紹介します。 はじめに ビジュアルリグレッションテスト(VRT)とは 名前の通り見た目をテストするための手法です。 実際にブラウザにレンダリングした際のスクリーンショットを改修前後で比較し、ピクセル単位で差分を検出します。 一般的なE2Eテストコードでは検出困難な意図しないデザイン変更を検出することができます。 VRTの例 VRT導入で実現したかったこと バグの削減と早期発見 回帰テストの工数削減 これにより積極的なリファクタリングを可能にしたい 上記をなるべく楽して実現したい テストは費用対効果が大事ですよね。。 ATOMとは www.atom.tools ATOMは運用型広告統合管理プラ
はじめに この記事は、Merpay Tech Openness Month 2022 の7日目の記事です。 こんにちは。メルペイのBackendエンジニアの@kaznishiです。 この記事では、私が所属しているチームで担当している加盟店精算のマイクロサービスにおけるバッチ処理のリグレッションテスト自動化の取り組みを紹介します。 まだBackendエンジニアしかテストシナリオの整備ができるようになっていなかったり、開発フローが整備しきれているわけではないですが、現時点でどのようなテストを回しているか、そして今後どのように改良していきたいかを述べたいと思います。 前提知識 加盟店精算のマイクロサービスの性質として、毎月決まったタイミングでの締め処理があります。この締め処理の中で、メルペイを導入してくださっている加盟店さまの売上を集計し、加盟店さまの銀行口座へ振込する金額の計算を行っています。
この記事は品川Advent Calendar 2019の2日目です。 導入 最近、開発の大部分がAPI開発になってきました。そしてアジャイル開発なんてものをかじっているとどうしてもリグレッションテストの自動化が必要になってくるのですが、色々調べたらPostmanが便利そうなんでご紹介します。 長い3行で APIのテストやるならPostmanが便利だよ シナリオテストもできるよ CIに組み込みたいならNewmanっての使うとできるよ APIのテストやるならPostmanが便利だよ ダウンロードとかインストールは省略。起動できたところから解説。 とりあえずCollectionを作る CollectionはAPIの固まりです。簡単に他人にシェアしたり、後述するシナリオテスト時にまとめて実行することができます。Collectionの中にCollectionを作ることはできませんが、より分類したいあ
みなさんこんにちは!、20卒入社の山口です。自分は研修後Optimal Bizの開発チームに配属になりました! 今回は自分が担当しているタスク、Optimal Biz(Android)のリグレッションテストの自動化の過程を紹介していきたいと思います。 【開発環境】 ホストOS(テストコードを動かすPC)…Windows10 テストを実行する端末のOS…Android10 Ruby (Ver.2.6) Appium (v1.17.1-1) 背景 Appiumとは Appiumのインストール Rubyのインストール テストコードの作成 driverについて Appium-GUIツールを使用し、コードを生成する方法 コード作成 実装していく まとめ 背景 リグレッションテストとはプログラムの一部を修正した時に、その影響でほかに不具合が出ていないかをチェックするためにおこなうテストです。 Opti
Part1 ここ Part2 https://qiita.com/senku/items/20e21033edd512be1d4d Part3 https://qiita.com/senku/items/08d547eda2c6ff818108 Vue.jsでビジュアルリグレッションテストをするためにいろいろやったナレッジを公開しまーす。 やりたいこと Vue.jsのコンポーネントのビジュアルリグレッションテスト(画像回帰テスト)をしたい。 viewsレベルのテストもしたい。(Vuex/Vue Routerが絡む) 多言語対応もしたい。(Vue I18nが絡む) テストはなるべくローカルで完結したい。サーバ立てたりしたくない。 Summary Storybook(ビジュアルの元ネタ) + storycap(画像生成) + reg-suit(画像比較&レポート) でやる。 Storyを作るた
こんにちは@glassmonkeyです。 この記事はGitHub Actions Advent Calendar 2020最終日の記事です。 みなさんクリスマスはいかがお過ごしだったでしょうか? 私はこの記事のネタのactionを作ることを忘れてて夜なべでつくりました。 わりと私自身の個人開発で使うことをメインに据えているので、機能など色々足りていないところは少しずつ足していけたらとは考えています。 はじめに 今回はビジュアルリグレッションテストを行うGithub Actionを作ってみました。 マーケットプレイスにあげているので、興味がある方はご覧ください。 ソースコードもglassmonkey/image-regression-notificationに置いています。 実装の詳細に関しては過去の私が書いたGitHub Pagesをビジュアルリグレッションテストをしてみたに詳細を記載して
日々いろいろなWebサイトの制作や修正を対応していく中で、修正したページとは関係ない(と思っていた)ページで表示が崩れてしまったことってありませんか? 私はたびたび経験があります。 毎回目視で全ページをチェックすれば防げるのかもしれませんが、それは現実的ではありません。 自動で全ページをチェックしてくれて不具合があれば教えてくれる、そんな便利なツールがあればと何度も思いました。 どうやら現代の技術でそれは作れるみたいです。ビジュアルリグレッションテストというらしいです。 ビジュアルリグレッションテストとは ざっくりいうと「見た目の比較」をするテストのことです。 変更前のWebサイトのスクリーンショットを用意しておき、変更後のスクリーンショットを撮り比較することで、どこが変わったか差分を表示し確認することができます。 どうやって使うの ビジュアルリグレッションテストを導入するための方法はいく
Part1 https://qiita.com/senku/items/07c3e2859ac90c03867a Part2 https://qiita.com/senku/items/20e21033edd512be1d4d Part3 ここ 前回までにStorybookを整えてきたのは、Storybookから画像を生成するためでした。 今回は画像の生成とそれ以降をやっていきます。テンション爆上げ。 Summary storycapは神 reg-suitは神 storycapをいれる storycapは、Storybookからスクリーンショットを生成するツールです。公式な話もどうぞ。→storybook-chrome-screenshotとzisuiとStorycapと 他にもJestから生成したり色々できるんですが、今回はやりません。 storycapインストールします。
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く