並び順

ブックマーク数

期間指定

  • から
  • まで

1 - 33 件 / 33件

新着順 人気順

リグレッションテストの検索結果1 - 33 件 / 33件

タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。

リグレッションテストに関するエントリは33件あります。 テストtest開発 などが関連タグです。 人気エントリには 『Storybookを書くだけでリグレッションテストが 実行される世界へようこそ』などがあります。
  • Storybookを書くだけでリグレッションテストが 実行される世界へようこそ

    Shizuoka.js #7

      Storybookを書くだけでリグレッションテストが 実行される世界へようこそ
    • フロントエンド開発の効率化!Nx と Playwright でビジュアルリグレッションテストを賢く実施しよう - Techtouch Developers Blog

      はじめに なぜ VRT が必要なのか? VRTとは? Nx と Playwright で賢く VRT を実施する どう賢く実施したか 結果 まとめ 参考資料 はじめに 「食べログ ラーメン TOKYO 百名店」の全店舗訪問を目指してラーメン巡りを続けているフロントエンドエンジニアの kenshin です。 フロントエンド開発者の皆さん、新機能を追加したり、ライブラリをアップデートした後に UI が予期せず変更されてしまった経験はありませんか?このような問題を素早く検知し、未然に防ぐ方法として、ビジュアルリグレッションテスト(以下、VRT)があります。 この記事では、Nx と Playwright を用いて VRT を効率的に行う方法をご紹介します! なぜ VRT が必要なのか? フロントエンド開発では、新機能の追加やライブラリのアップデートにより、予期せぬ UI 変更が発生することがありま

        フロントエンド開発の効率化!Nx と Playwright でビジュアルリグレッションテストを賢く実施しよう - Techtouch Developers Blog
      • リグレッションテストを導入した話 - ドワンゴ教育サービス開発者ブログ

        こんにちは。N予備校の品質保証グループです。 品質保証グループでは、日々案件ごとの業務に関わっています。今後はより横断的な関わりを強化していき、開発チームと密な連携を進めようとしています。 そこで、今回はリグレッションテストについてお話しようと思います。 リグレッションテストとは? 一般的には、新規機能や既存機能の改修、不具合修正によって、既存機能に意図しない影響が出ていないかを確認する目的のテスト全般のことを指します。 リグレッションテストをしないと、元々問題なかった機能が使えなくなったり、意図しない動きになっていたりと品質低下に繋がります。 横断リグレッションテスト導入前の状況 品質保証グループは2021年1月に立ち上がりました。(チーム立ち上げのブログ詳細はこちら) 以前までは機能ごとの動作確認はもちろんのこと、リグレッションテストも同様に開発チームごとに開発者が自身の手で行っていま

          リグレッションテストを導入した話 - ドワンゴ教育サービス開発者ブログ
        • ビジュアルリグレッションテストを導入した話 - メドピア開発者ブログ

          こんにちは。フロントエンドエンジニアの小林和弘です。 Vue.js + Atomic Designでつくられたプロジェクトにビジュアルリグレッションテストを導入しました。 ビジュアルリグレッションテストでUIの安全性を高める コンポーネントの改修、新機能の追加、ライブラリのアップデートを行う際、UIに不要な変更が入っていないか不安になることがあると思います。リファクタリングをしようにも、意図しないところでUIが壊れないか心配になります。 画面表示に関わるコードを改修するたびに、ローカル環境やステージング環境で全UIコンポーネントを確認するのは難しいです。 また、ステージング環境と本番環境を並べて変更されたUIを目視で確認するのも非現実的です。 ビジュアルリグレッションテストはその名前の通り、視覚的な回帰テストを指します。改修前後のスクリーンショットの差分を検証するためのテストです。 開発に

            ビジュアルリグレッションテストを導入した話 - メドピア開発者ブログ
          • Playwright+MSW でのリグレッションテスト事始 - enechain Tech Blog

            はじめに 背景 やりたいこと Why MSW? 導入手順 詰まったこと defaultのtimeout設定時間が短い CIで落ちた時の検証方法がわからない 認証後のストレージの状態が入ってこない 今後の展望 おわりに はじめに enechainでフロントエンドエンジニアをしている@Shunya078です! 自分の所属するGXデスクでは『日本気候取引所 - Japan Climate Exchange』(以下JCEX)のサービス開発を行っており、その中でReactを使用したフロントエンドの開発を担当しています。 リグレッションテストは運用を考えると、設計から導入した後、どう管理していくかまで検討する点が多く存在します。 JCEXは去年の年末にリリースされたばかりのサービスで、まだブラウザまで含めたリグレッション相当になるテストレイヤーが導入できておらず、存在しませんでした。 今回は新たに自チ

              Playwright+MSW でのリグレッションテスト事始 - enechain Tech Blog
            • 今さら聞けないビジュアルリグレッションテストをChromaticで始める - Sansan Tech Blog

              Bill One Entry*1グループの秋山です。 1. はじめに 2010年代前半に登場したReactやVue.jsに代表される宣言的UI実装は、大規模なSPAの構築を可能にしました。その一方、フロントエンド領域に新たなアーキテクチャが導入されたことで、それまでWebアプリケーション開発で定石とされたテスト手法を適用しづらいケースが増え、新たなベストプラクティスが求められるようになりました。 その要請に応える形で、2010年代後半にはフロントエンドのテスト手法に緩やかなパラダイムシフトがありました。この記事ではそのパラダイムシフトを振り返りながら、フロントエンドで必要なテストについて考察し、最後にChromaticを用いたビジュアルリグレッションテストを紹介します。 2. Testing Pyramid と フロントエンド テストを語る際によく持ち出されるメタファとして、Testing

                今さら聞けないビジュアルリグレッションテストをChromaticで始める - Sansan Tech Blog
              • 自作CPUのリグレッションテストをGitHub Actionsで行うための手法の調査 - FPGA開発日記

                自作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.

                  自作CPUのリグレッションテストをGitHub Actionsで行うための手法の調査 - FPGA開発日記
                • MSW を活用した WebAPI リグレッションテスト

                  MSW はネットワークレベルでリクエストをインターセプトする、自動テストで便利なモックサーバーです。過去記事でも紹介したとおり、スパイ(モック関数)をネットワークレベルに忍ばせることが可能です。実際に WebAPI が呼ばれた時の Payload の検証は、Jest 組み込みのモック機能では実現できない領域です。本稿は「WebAPI リグレッションテスト」を実施するための、MSW 活用方法を解説します。記事で使用しているサンプルコードはこちら。 課題の概要 Web アプリケーションページのほとんどは「1.UI を表示し/2.入力操作し/3.WebAPI 通信し/4.通信後処理を行う」という一連処理が責務です。このようなページに書かれるテストは、WebAPI 通信前後に集中しがちです。MSW を使用すると、以下の図の様に「送信後処理」まで到達可能なため、例えば「WebAPI レスポンスが返っ

                    MSW を活用した WebAPI リグレッションテスト
                  • reg-suitとCypressを使ってビジュアルリグレッションテストを導入した話 - SMARTCAMP Engineer Blog

                    こんにちは!スマートキャンプでインサイドセールスに特化した SaaSを作っているエンジニアの井上です。 携わっている上記のプロダクトは使いやすさにこだわっているため、UIの修正を行うことが多々あります。 そんななかで起こった問題の対応としてビジュアルリグレッションテストを導入したので、今回はその話をできればと思います。 背景 ビジュアルリグレッションテストとは? ビジュアルリグレッションテストをやる目的 何をテストをするのか? 使用したツール Cypress reg-suit 画像を取得する 画像の差分を検知する Circle CIによる自動化 ベース画像の自動更新 ビジュアルリグレッションテストの実行 ハマったところ 結果どうなったか reg-suitの結果画面 今後の改善・取り組みたいこと 背景 ビジュアルリグレッションテストを導入する前に、UIに大きく影響する改修がありました。 影響

                      reg-suitとCypressを使ってビジュアルリグレッションテストを導入した話 - SMARTCAMP Engineer Blog
                    • リグレッションテストで使うテストの設計にGIHOZ使ってみた - freee Developers Hub

                      こんにちは、freeeのQAでマネージャーをしてるymtyです。 freee QA Advent Calendar2023 22日目です。 私は、QAマネージャーとしていくつかのプロダクトのQAに関わっています。今日はその中のひとつで、freee会計の申請機能(経費精算、各種申請、支払依頼、購買申請)を担当しているQAのメンバーであるMさんとリグレッションテストで使うテストの設計をした話を書きます。 テスト設計の細かい内容は読み飛ばしたい方は最後のほうにある(ここ大事)テスト設計の裏話って部分だけ読んでもらえればいいと思います! きっかけ 最初にやったこと ワークフローのステータス遷移のテスト設計 テストで確認したい状態やイベントを追記 0スイッチテストケースをテスト実行しやすいように連結してシナリオにする 関連申請の紐付けパターンと申請時の入力パターンのテスト設計 権限のテスト設計 (こ

                        リグレッションテストで使うテストの設計にGIHOZ使ってみた - freee Developers Hub
                      • ビジュアルリグレッションテストにChromaticを導入したらデザインレビューが捗った話 - Money Forward Developers Blog

                        マネーフォワード関西開発拠点エンジニアの @uenoY4 です。 現在、私のチームではフロントエンドに Next.js を使用したプロダクトの開発をしています。 その中でリファクタリングなど既存実装に修正を加えた際に、意図しないUIの崩れが起きることを防ぎたいという思いから、ビジュアルリグレッションテストを行うようにしました。今回はビジュアルリグレッションテストを行うために導入したChromaticについてお話しします。 目次 ビジュアルリグレッションテストとは Chromaticとは Chromatic導入のきっかけ 実際導入してみて まとめ ビジュアルリグレッションテストとは ビジュアルリグレッションテストとは、ページの見た目をテストする仕組みで、変更前のページやコンポーネントの画像と変更後の画像を比較して検証を行います。要素のサイズや配置などのピクセルレベルの変更やテキスト色、背景色

                          ビジュアルリグレッションテストにChromaticを導入したらデザインレビューが捗った話 - Money Forward Developers Blog
                        • ビジュアルリグレッションテストのすすめ

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

                            ビジュアルリグレッションテストのすすめ
                          • Capybaraとreg-cliを使ってお手軽にビジュアルリグレッションテストを行える環境を整備しました📸 - メドピア開発者ブログ

                            こんにちは、MedPeerの開発を担当している森田です。 今回は私が開発に参画しているMedPeerに元々E2Eテストで利用していたCapybaraと、reg-cliを利用してビジュアルリグレッションテスト(以下VRT)を行える環境を整備したので、それについてご紹介させていただきます。 なぜ、VRTを導入するのか? VRTの要件と技術選定 実際に構築したVRT基盤の概要 VRT基盤の具体的な話 System Spec内でスクリーンショットを取得する reg-cliでスクリーンショットの差分をチェックする 分かりやすいコマンドでVRTを実行できるようにする CIで差分をチェックする OS間での利用フォントによる違いを吸収する おわりに 参考にさせて頂いた資料 なぜ、VRTを導入するのか? MedPeerでは元々System Specを活用したE2Eテストを利用してフロントエンドを含めて品質を

                              Capybaraとreg-cliを使ってお手軽にビジュアルリグレッションテストを行える環境を整備しました📸 - メドピア開発者ブログ
                            • ビジュアルリグレッションテストのツールを導入するまでの意思決定プロセス - BASEプロダクトチームブログ

                              はじめに この記事は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

                                ビジュアルリグレッションテストのツールを導入するまでの意思決定プロセス - BASEプロダクトチームブログ
                              • reg-suit によるビジュアルリグレッションテストで Rails アプリの CSS 改善サイクルが回り始めた話 - Speee DEVELOPER BLOG

                                こんにちは、デジタルトランスフォーメーション(DX)事業本部のエンジニアの中嶋(@nyamadorim)です。もともと Rails のサーバサイド開発をメインに担当していましたが、今期はフロントエンド開発に取り組んでいます。 この記事では、「おうちの語り部*1」というプロダクトにビジュアルリグレッションテストを導入して、CSS の改善サイクルが回り始めた話を紹介します。 ビジュアルリグレッションテストとは ビジュアルリグレッションテスト導入の動機 テストツールの選定 reg-suit 他のテストツール reg-suit によるテスト環境の構築 reg-suit によるビジュアルリグレッションテストのフロー reg-suit の利用イメージ 差分が見つかれば、Pull Request に通知 どのページ/コンポーネントが変わったかを見る ピクセル単位で差分を確認する 差分がなければ ✨✨ R

                                  reg-suit によるビジュアルリグレッションテストで Rails アプリの CSS 改善サイクルが回り始めた話 - Speee DEVELOPER BLOG
                                • 制作現場におけるビジュアルリグレッションテストの導入 - 「LINEのお年玉」4年目の挑戦

                                  はじめに みなさんこんにちは。LINEのフロントエンドエンジニアの藤井です。年末年始に実施した「LINEのお年玉」キャンペーンも今年で4回目の実施となりました。 今年は過去4年で経験した様々な反省点を振り返り、様々な改善を行いました。今回はそのなかの一つである「ビジュアルレグレッションテスト」の実施についてご紹介します。この記事では、ビジュアルレグレッションテストを運用していく上で工夫したことや、得られた知見などを共有したいと思います。 案件の特徴を紹介 まずは「LINEのお年玉」キャンペーンの特徴をご紹介します。 デコレータ使わない Vue.js + TypeScript で進んだ「LINEのお年玉」キャンペーンや「LINEのお年玉」におけるフロントエンドでの UX へのこだわりでも紹介されていますが、毎年年末年始に行われるキャンペーンとして、トラフィックが多いアプリケーションを、短期間

                                    制作現場におけるビジュアルリグレッションテストの導入 - 「LINEのお年玉」4年目の挑戦
                                  • Storybook と Chromatic でビジュアルリグレッションテストを実施する - BASEプロダクトチームブログ

                                    Chromatic とは Chromatic とは、Storybook のメンテナーが作成している Storybook 用のツールです。Storybook をビルドして公開したり、ストーリーごとのスクリーンショットを撮影し、差分を比較してくれる機能を備えています。 Chromatic を使うことにより、UI の予期せぬ変更を事前に検知することができます。本記事では Chromatic の導入、活用方法をご紹介します。 なお、BASE 社では社内の UI コンポーネントライブラリである BBQ で Chromatic を導入、活用しています。その経緯はアドベントカレンダー15日目に公開する記事でご紹介します。 Chromatic をプロジェクトに導入する サンプルプロジェクトを作成する 今回は Storybook 公式で用意されているサンプルプロジェクトを利用します。 プロジェクト作成にあた

                                      Storybook と Chromatic でビジュアルリグレッションテストを実施する - BASEプロダクトチームブログ
                                    • 手軽に始めるビジュアルリグレッションテスト【導入記】 - RAKUS Developers Blog | ラクス エンジニアブログ

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

                                        手軽に始めるビジュアルリグレッションテスト【導入記】 - RAKUS Developers Blog | ラクス エンジニアブログ
                                      • Percy + Cypress + GitHub Actionsで手軽にビジュアルリグレッションテストを導入する

                                        ビジュアルリグレッションテストのプラットフォーム Percy を使ってみたらなかなか良かったので紹介です。 Percyとは? Percy はビジュアルリグレッションテスト(ページのスクリーンショットをピクセル単位で比較をすることで意図せぬ UI の変更を検知するテスト手法)のプラットフォームです。 Percy を使うことでビジュアルリグレッションテストに必要な画像の保存や、画像変化を検出するページのレンダリング、変更の通知までとても手軽に実現できます。 料金体系 Percy の料金体型はアップロードするスクリーンショットの枚数によって変わります。 月あたり 5,000 枚までは無料で利用できます。それ以降は 25,000 枚で 99$(年払い), 100,000 枚で 399$(年払い)と変わっていきます。 リリース頻度やページ数によりますがリリースブランチのプルリクエストのみを検証対象と

                                          Percy + Cypress + GitHub Actionsで手軽にビジュアルリグレッションテストを導入する
                                        • QAがPull Requestから影響範囲を調べてリグレッションテストを実施している話 - Commune Engineer Blog

                                          はじめに 初めまして。QAチームの三木と申します。 commmuneモバイルアプリのQAを担当しており、入社して7ヶ月が経ちました。 モバイルアプリチームでは、新機能開発だけでなく既存機能の改修や不具合修正を日々並行して進めています。 特に、「既存機能の改修や不具合修正」は小さい単位で行われるため、その変更起因で意図しない箇所に新しい不具合が発生する可能性があり、リグレッションテストでの確認が必要です。 現状、モバイルアプリのテストはほとんどが手動テストのため、リグレッションテストも手動で実施しています。 今回は、「意図しない不具合」をなるべく減らすために、影響範囲をどのように調べているかについて書きます。 リグレッションテストの定義 まず、リグレッションテストの一般的な意味や目的を定義します。 システムに対する修正や変更によって、意図せずに振る舞いに影響を与えることがある。 そういった意

                                            QAがPull Requestから影響範囲を調べてリグレッションテストを実施している話 - Commune Engineer Blog
                                          • BackstopJSでビジュアルリグレッションテスト! - Qiita

                                            BackstopJSでのビジュアルリグレッションテストをした際のまとめです。 勉強中のため、コメント・アドバイスをいただけると幸いです。 ビジュアルリグレッションテストとは ビジュアルリグレッションテストは、CSSやコードを変更した後に、変更前と同じ表示・実行結果になるかを検証するテストの一種です。 スクリーンショットを撮影することで、前後で差分が出ていないか検証します。 検出できるもの ボタンや画像が表示可否 ページの表示可否 検出できないもの ボタンがクリック ページ遷移 画像のalt属性設定可否 BackstopJSでのビジュアルリグレッションテスト 今回は、BackstopJSでビジュアルリグレッションテストを行います。 BackstopJSの使い方 (1) Node.js / npm をインストール (2) npmでBackstopJSをインストール $ install -g b

                                              BackstopJSでビジュアルリグレッションテスト! - Qiita
                                            • Cypress + reg-suitを使ったビジュアルリグレッションテスト - SO Technologies 開発者ブログ

                                              こんにちは。ATOM事業部フロントエンドテックリード兼デザイナーの河原です。 ATOMでは現在大規模なリファクタリングを実施してます。 今回はその一環で ビジュアルリグレッションテスト を導入した事例を紹介します。 はじめに ビジュアルリグレッションテスト(VRT)とは 名前の通り見た目をテストするための手法です。 実際にブラウザにレンダリングした際のスクリーンショットを改修前後で比較し、ピクセル単位で差分を検出します。 一般的なE2Eテストコードでは検出困難な意図しないデザイン変更を検出することができます。 VRTの例 VRT導入で実現したかったこと バグの削減と早期発見 回帰テストの工数削減 これにより積極的なリファクタリングを可能にしたい 上記をなるべく楽して実現したい テストは費用対効果が大事ですよね。。 ATOMとは www.atom.tools ATOMは運用型広告統合管理プラ

                                                Cypress + reg-suitを使ったビジュアルリグレッションテスト - SO Technologies 開発者ブログ
                                              • バッチ処理のリグレッションテスト自動化のトライ | メルカリエンジニアリング

                                                はじめに この記事は、Merpay Tech Openness Month 2022 の7日目の記事です。 こんにちは。メルペイのBackendエンジニアの@kaznishiです。 この記事では、私が所属しているチームで担当している加盟店精算のマイクロサービスにおけるバッチ処理のリグレッションテスト自動化の取り組みを紹介します。 まだBackendエンジニアしかテストシナリオの整備ができるようになっていなかったり、開発フローが整備しきれているわけではないですが、現時点でどのようなテストを回しているか、そして今後どのように改良していきたいかを述べたいと思います。 前提知識 加盟店精算のマイクロサービスの性質として、毎月決まったタイミングでの締め処理があります。この締め処理の中で、メルペイを導入してくださっている加盟店さまの売上を集計し、加盟店さまの銀行口座へ振込する金額の計算を行っています。

                                                  バッチ処理のリグレッションテスト自動化のトライ | メルカリエンジニアリング
                                                • ヤフー検索におけるビジュアルリグレッションテストの取り組みと、TypeScript Compiler APIの活用事例

                                                    ヤフー検索におけるビジュアルリグレッションテストの取り組みと、TypeScript Compiler APIの活用事例
                                                  • Postmanを使ったAPIリグレッションテスト - Qiita

                                                    この記事は品川Advent Calendar 2019の2日目です。 導入 最近、開発の大部分がAPI開発になってきました。そしてアジャイル開発なんてものをかじっているとどうしてもリグレッションテストの自動化が必要になってくるのですが、色々調べたらPostmanが便利そうなんでご紹介します。 長い3行で APIのテストやるならPostmanが便利だよ シナリオテストもできるよ CIに組み込みたいならNewmanっての使うとできるよ APIのテストやるならPostmanが便利だよ ダウンロードとかインストールは省略。起動できたところから解説。 とりあえずCollectionを作る CollectionはAPIの固まりです。簡単に他人にシェアしたり、後述するシナリオテスト時にまとめて実行することができます。Collectionの中にCollectionを作ることはできませんが、より分類したいあ

                                                      Postmanを使ったAPIリグレッションテスト - Qiita
                                                    • Appiumを使って、リグレッションテストを自動化する - OPTiM TECH BLOG

                                                      みなさんこんにちは!、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

                                                        Appiumを使って、リグレッションテストを自動化する - OPTiM TECH BLOG
                                                      • 微妙な違いも見逃すな!ビジュアルリグレッションテスト! / phpcon2020

                                                        PHP Conference Japan 2020の登壇資料です。 https://phpcon.php.gr.jp/2020/

                                                          微妙な違いも見逃すな!ビジュアルリグレッションテスト! / phpcon2020
                                                        • Storybookを利用したビジュアルリグレッションテスト | Precena Tech Book

                                                          ビジュアルリグレッションテスト(以下、VRT)は、画像回帰テストとも呼ばれます。 VRTは、改修による予期せぬ UI のデザイン崩れを検出することを目的としています。 UIのスクリーンショットを撮り、それらをコミット間で比較して、変更を特定します。 当社のReactを利用したプロジェクトではデザインシステムの構築にStorybookを利用しています。 細かい運用はこの記事では割愛しますが、見た目上のバリエーションが存在するコンポーネントについては、1つのコンポーネントにつき下記の2画面を用意するようにしています。

                                                            Storybookを利用したビジュアルリグレッションテスト | Precena Tech Book
                                                          • DMMブックスにビジュアルリグレッションテストを導入してみた(iOS版) - DMM inside

                                                            |DMM inside

                                                              DMMブックスにビジュアルリグレッションテストを導入してみた(iOS版) - DMM inside
                                                            • ゼロからVue.jsでビジュアルリグレッションテストするまでpart1/3 - Qiita

                                                              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を作るた

                                                                ゼロからVue.jsでビジュアルリグレッションテストするまでpart1/3 - Qiita
                                                              • ビジュアルリグレッションテストをSlack通知するgithub actionを作ってみた - Qiita

                                                                こんにちは@glassmonkeyです。 この記事はGitHub Actions Advent Calendar 2020最終日の記事です。 みなさんクリスマスはいかがお過ごしだったでしょうか? 私はこの記事のネタのactionを作ることを忘れてて夜なべでつくりました。 わりと私自身の個人開発で使うことをメインに据えているので、機能など色々足りていないところは少しずつ足していけたらとは考えています。 はじめに 今回はビジュアルリグレッションテストを行うGithub Actionを作ってみました。 マーケットプレイスにあげているので、興味がある方はご覧ください。 ソースコードもglassmonkey/image-regression-notificationに置いています。 実装の詳細に関しては過去の私が書いたGitHub Pagesをビジュアルリグレッションテストをしてみたに詳細を記載して

                                                                  ビジュアルリグレッションテストをSlack通知するgithub actionを作ってみた - Qiita
                                                                • ビジュアルリグレッションテストのすすめ - Qiita

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

                                                                    ビジュアルリグレッションテストのすすめ - Qiita
                                                                  • ゼロからVue.jsでビジュアルリグレッションテストするまでpart3/3 - Qiita

                                                                    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インストールします。

                                                                      ゼロからVue.jsでビジュアルリグレッションテストするまでpart3/3 - Qiita
                                                                    1

                                                                    新着記事