ツール連携 - テスト自動化ツール『Ranorex』

環境差に対応した柔軟な画像比較 (Ranorex + OpenCV連携)

Ranorex編集部 — Mon, 17 Aug 2026 00:00:00 +0000

テスト環境の違いにより、人の目では判別しにくい微細な差異が原因で画像検証が失敗するケースがあります。OSSツールであるOpenCVとRanorexを連携し、OpenCVの高度な画像検証アルゴリズムを活用することで、微細な差分を自動的に許容して検証成功と判定できることを確認しました。

今回の記事では、RanorexとOpenCVを組み合わせた画像検証手法についてご紹介します。

OpenCVとは

OpenCV（Open Source Computer Vision Library）は、Intelが開発した画像処理・画像解析・コンピュータビジョン向けのオープンソースライブラリです。

2,500以上の最適化されたアルゴリズムが含まれており、画像の読み込み、保存、リサイズ、回転、グレースケール化、ノイズ除去などの基本的な処理に加え、画像比較に使われる構造類似度指標（SSIM: Structural Similarity Index Measure）などの高度なアルゴリズムも備えています。

SSIMは単純なピクセル差分ではなく、画像の明るさ、コントラスト、構造の類似性を評価し、人間の視覚に近い形で画像の差異を検出することができます。OpenCVはこのように幅広い画像処理機能に加え、高度な画像比較技術も提供しており、幅広い分野で利用されています。

OpenCVの公式サイトは以下です。(2026年8月時点)
https://opencv.org/

RanorexとOpenCVの連携でできること

Ranorexの画像検証機能は、ピクセル単位での厳密な比較で高精度な画像比較ができます。さらに、OpenCVと連携することで、OpenCVの構造類似度指標（SSIM）を用いたより高度な画像比較を利用できるようになります。この連携により、表示環境の違いによる微細な差分を柔軟に許容した画像検証が可能になります。

たとえば、ブラウザーや実行環境の違いにより発生する文字やグラフィックのわずかなズレや揺れを自動検知・調整することで、人間の目では認識できない微細な差分を許容し、より実用的な判定をおこなうことができます。※画像の複雑さなどで対応できないケースもあります。

RanorexとOpenCVの連携

Ranorexは C# / .NET Framework ベースで動作するツールのため、C#用のオープンソースラッパーである OpenCvSharp を利用します。ここでは、弊社環境で検証した画像比較の設定をご紹介します。※2026年8月時点の情報です。

1.RanorexプロジェクトにOpenCvSarpを追加する

1.Ranorexのプロジェクトで、NuGet パッケージマネージャーを開く。
メニューバー「プロジェクト」>「パッケージの管理」

2.検索ボックスに「OpenCvSharp」を入力し、OpenCvSharp core library と OpenCvSharp4 native bindings for Windows x64 をプロジェクトにインストールする。

※今回、ご紹介するユーザーコードでは StronglyTyped.PixelMatch.net のパッケージも利用しますので、追加が必要です。

2.ビルド対象（プラットフォームターゲット）を統一する

1.Ranorexのプロジェクトで、プロジェクトオプションを開く。
メニューバー プロジェクト > パッケージの管理

2.ターゲットCPUをインストールしたOpenCsSharpのビット数に合わせる。上記でインストールしたパッケージは64bitのため、64-bit Intel-compatible processor に設定する。

3.期待画像のスクリーンショットを用意する

今回、ご紹介するユーザーコードでは、手動で取得したスクリーンショットを期待画像として設定できますので、期待画像をローカルマシンに保存ください。また、今回の画像形式はPNGにしています。

4.TMX提供のオートメーションヘルパーの「ReportPageScreenshot」でスクリーンショットの取得アクションを追加する

TMX Automation Helpers リファレンス６：スクリーンショットの出力をご参照ください。
アクションを追加すると以下のような設定ができます。画像ファイルは モジュール名_yyyyMMdd_HHmm_出力画像ファイル名.png の名前で出力されます。

5.OpenCVを利用して、期待画像と実行時に取得した画像を比較するコードを記述する

1.ユーザーコードコレクションをプロジェクトに追加する

追加方法やメソッドの作成についての詳細はソースコードを使用したテスト作成 / ユーザーコードコレクションをご参照ください。

2.作成されたユーザーコードコレクションファイルに使用するパッケージを追加する

using System.IO;
using OpenCvSharp;         
using OpenCvSharp.Quality;

3.クラスに以下のメソッドを記述する

  
//取得したスクリーンショットの検索メソッド
private static string FindExistingImagePath(string currentImgDirPath, string mdName, string currentImgName, System.DateTime baseTime)
{
    int[] offsets = { -1, 0, 1 };  // ここでoffsetsを定義

    foreach (int offset in offsets)
    {
        System.DateTime checkTime = baseTime.AddMinutes(offset);
        string nowTimeStr = checkTime.ToString("yyyyMMdd_HHmm");
        string candidateFileName = $"{mdName}_{nowTimeStr}_{currentImgName}.png";
        string candidatePath = Path.Combine(currentImgDirPath, candidateFileName);

        if (File.Exists(candidatePath))
        {
            Report.Info($"存在する画像ファイルを発見: {candidatePath}");
            return candidatePath;
        }
    }
    return null;
}

//OpenCVを利用したSSIMによる画像検証メソッド
public static bool CompareImageBySSIM(string baseImgPath, string currentImgDirPath, string currentImgName, double ssimThreshold = 0.95)
{
    var curModule = TestModuleLeaf.Current;
    string mdName = curModule.Name;
    System.DateTime datetime = System.DateTime.Now;

    string currentImgPath = FindExistingImagePath(currentImgDirPath, mdName, currentImgName, datetime);
    if (currentImgPath == null)
    {
        Report.Error("±1分差のファイルが見つかりませんでした。ファイル名やディレクトリを確認してください。");
        return false;
    }

    using (Mat mat1Gray = Cv2.ImRead(baseImgPath, ImreadModes.Grayscale))
    using (Mat mat2Gray = Cv2.ImRead(currentImgPath, ImreadModes.Grayscale))
    {
        if (mat1Gray.Empty() || mat2Gray.Empty())
        {
            Report.Error("画像の読み込みに失敗しました。ファイルパスを確認してください。");
            return false;
        }

        // 背景（白）ではない「文字が存在する最小の四角枠」を自動検出
        Rect textRegion;
        using (Mat inverted = new Mat())
        {
            Cv2.Threshold(mat1Gray, inverted, 250, 255, ThresholdTypes.BinaryInv);
            textRegion = Cv2.BoundingRect(inverted);
        }

        if (textRegion.Width == 0 || textRegion.Height == 0)
        {
            textRegion = new Rect(0, 0, mat1Gray.Width, mat1Gray.Height);
        }
        else
        {
            textRegion.X = Math.Max(0, textRegion.X - 20);
            textRegion.Y = Math.Max(0, textRegion.Y - 20);
            textRegion.Width = Math.Min(mat1Gray.Width - textRegion.X, textRegion.Width + 40);
            textRegion.Height = Math.Min(mat1Gray.Height - textRegion.Y, textRegion.Height + 40);
        }

        // 割り出した「文字エリア」をテンプレート画像として切り出す
        using (Mat templateMat = new Mat(mat1Gray, textRegion))
        using (Mat matchResult = new Mat())
        {
            Cv2.MatchTemplate(mat2Gray, templateMat, matchResult, TemplateMatchModes.CCoeffNormed);
            Cv2.MinMaxLoc(matchResult, out _, out _, out _, out OpenCvSharp.Point maxLoc);

            float shiftX = textRegion.X - maxLoc.X;
            float shiftY = textRegion.Y - maxLoc.Y;

            Report.Info($"[位置補正自動計算] 検出された文字エリアのズレ -> X方向: {shiftX}px, Y方向: {shiftY}px");

            // アフィン変換行列を作成してテスト対象画像を全体シフト
            using (Mat translationMatrix = new Mat(2, 3, MatType.CV_32FC1))
            {
                translationMatrix.Set(0, 0, 1.0f);
                translationMatrix.Set(0, 1, 0.0f);
                translationMatrix.Set(0, 2, shiftX);
                translationMatrix.Set(1, 0, 0.0f);
                translationMatrix.Set(1, 1, 1.0f);
                translationMatrix.Set(1, 2, shiftY);

                using (Mat resizedMat2AlignedAll = new Mat())
                {
                    OpenCvSharp.Size baseSize = mat1Gray.Size();
                    Cv2.WarpAffine(mat2Gray, resizedMat2AlignedAll, translationMatrix, baseSize);

                    // 文字エリア（ROI）を切り出す
                    using (Mat roiBaseRaw = new Mat(mat1Gray, textRegion))
                    using (Mat roiTargetAlignedRaw = new Mat(resizedMat2AlignedAll, textRegion))
                    {
                        // --- 【修正】二値化＋モルフォロジー演算でエッジのガタつきを平滑化 ---
                        using (Mat binBase = new Mat())
                        using (Mat binTarget = new Mat())
                        using (Mat roiBase = new Mat())
                        using (Mat roiTargetAligned = new Mat())
                        {
                            // 固定値（200）で一律二値化し、判定基準のブレを無くす
                            Cv2.Threshold(roiBaseRaw, binBase, 200, 255, ThresholdTypes.Binary);
                            Cv2.Threshold(roiTargetAlignedRaw, binTarget, 200, 255, ThresholdTypes.Binary);

                            // 3x3の構造要素（カーネル）を作成
                            using (Mat kernel = Cv2.GetStructuringElement(MorphShapes.Rect, new OpenCvSharp.Size(3, 3)))
                            {
                                // クロージング処理（文字のフチの微細なギザギザ・ノイズを埋めて滑らかにする）
                                Cv2.MorphologyEx(binBase, roiBase, MorphTypes.Close, kernel);
                                Cv2.MorphologyEx(binTarget, roiTargetAligned, MorphTypes.Close, kernel);
                            }

                            // 平滑化された画像同士でSSIMを計算
                            using (var ssimCalc = QualitySSIM.Create(roiBase))
                            {
                                Scalar score = ssimCalc.Compute(roiTargetAligned);
                                double meanSSIM = score.Val0;

                                Report.Info($"[SSIM判定] エッジ平滑化後のスコア: {meanSSIM:F4} (閾値: {ssimThreshold})");

                                // 差分画像の保存処理
                                try
                                {
                                    using (Mat diffMat = new Mat())
                                    {
                                        Cv2.Absdiff(roiBase, roiTargetAligned, diffMat);
                                        using (Mat threshDiff = new Mat())
                                        {
                                            Cv2.Threshold(diffMat, threshDiff, 1, 255, ThresholdTypes.Binary);
                                            using (Mat highlightMat = new Mat())
                                            {
                                                Cv2.CvtColor(roiTargetAlignedRaw, highlightMat, ColorConversionCodes.GRAY2BGR);
                                                highlightMat.SetTo(new Scalar(0, 0, 255), threshDiff);

                                                string directory = Path.GetDirectoryName(currentImgPath);
                                                string filename = Path.GetFileNameWithoutExtension(currentImgPath);
                                                string diffImgPath = Path.Combine(directory, filename + "_diff.png");

                                                Cv2.ImWrite(diffImgPath, highlightMat);
                                                Report.Info($"差分画像を保存しました: {diffImgPath}");
                                            }
                                        }
                                    }
                                }
                                catch (Exception ex)
                                {
                                    Report.Warn($"差分画像の生成中にエラーが発生しました: {ex.Message}");
                                }

                                if (meanSSIM >= ssimThreshold)
                                {
                                    Report.Success("文字の位置ズレ、滲み、微細なガタつきはすべて許容されました。");
                                    return true;
                                }
                                else
                                {
                                    Report.Failure("形状平滑化後もスコアが低いため、文字の欠落やレイアウト崩れが発生しています。");
                                    return false;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}
  

記述内容：

文字が存在する領域（最小の四角枠）を自動検出
文字領域をテンプレートして、文字領域の位置ズレを補正
文字領域のクロージング処理で文字の輪郭の微細なギザギザやノイズを滑らかに補正
SSIM（構造類似度指数）を用いた画像比較
2つの画像の異なる箇所を赤色でハイライトした差分画像を保存

4.手順3で作成したメソッドを使ったユーザーコードアクションを「ReportPageScreenshot」メソッドのユーザーコードアクションの次に追加する

レコーディングモジュールの 新しいアクションの追加 のプルダウンメニューから、ユーザーコード（User code）‐ライブラリから選択を選択します。

以下の CompareImageBySSIM メソッドを選択します。

アクションを追加すると以下のような設定ができます。閾値は1に近い数値を設定することで、人の目では分からない微差のみを成功とできます。
※0.98以下になると人の目でも認識できる差分が成功となるケースがあります。

検証結果

検証対象の画像

環境の違いにより、全体的な文字ズレと文字の滲み・ギザギザ感が発生している画像を検証対象とします。たとえば、Chromeブラウザーで取得した期待画像を設定しており、テスト実行環境ではEdge Chromiumブラウザーでテストするケースなど。

検証結果レポート

文字の位置ズレや微細なガタつきを自動検出して、画像検証された結果、スコアは1で完全に一致と判定され、画像検証は成功しました。

成功パターン

人の目でも認識できる差分がある場合は、画像検証が失敗します。

失敗パターン

差分画像は出力先(currentImgDirPath)に保存されます。

差分画像

サンプルソリューション

本検証ができるサンプルソリューションは、以下のボタンからダウンロードできます。
※ダウンロードが始まらない場合は、Edgeブラウザーでお試しください。

画像検証_OpenCV連携ソリューションダウンロード

まとめ

Ranorexの画像検証機能は、ピクセル単位での厳密な比較で高精度な画像比較ができます。さらに、OpenCVと連携することで、OpenCVの構造類似度指標（SSIM）を用いたより高度な画像比較を利用できるようになり、人の目では判別しづらい微細な文字のズレやガタつきを補正し、許容範囲として正確に判定できます。

今回ご紹介したコードのように、お客様ご自身でOpenCVと連携したカスタム画像検証を実装することで、より実用的で柔軟な画像比較が可能になります。ぜひOpenCVの強力なアルゴリズムを活用し、お客様のニーズに合った画像検証環境を構築ください。

The post 環境差に対応した柔軟な画像比較 (Ranorex + OpenCV連携) first appeared on テスト自動化ツール『Ranorex』.

Azure DevOps との連携

Ranorex編集部 — Wed, 16 Oct 2024 01:00:36 +0000

Ranorex には、クラウドベースのCIソフトウェアである Azure DevOps との連携機能が備えられています。この機能を活用することで、Ranorex で作成したテストをAzure DevOps のビルドパイプラインで実行することができます。
そこで今回の記事では、Ranorex をAzure DevOps と連携させるメリットと、連携手順についてご紹介します。

Azure DevOps 連携のメリット

Azure DevOps は、クラウドベースのCIソフトウェアです。CIツールとしては、Azure DevOps 以外にも Jenkins（※）なども代表的なCIツールの一つです。
※Jenkins との連携については、Ranorex Blog の Jenkins への自動化テストの統合 をご参考ください。
Azure DevOps は Microsoft社が提供しているサービスとなるため、Windows との親和性が高いツールとなります。そのため、Windows OS で動作するRanorex との親和性も高く、スムーズに連携できます。

Azure DevOps と連携することで、業務中や夜間にテストを実行したり、定期的にテストを実行することができるため、以下のようなメリットが考えられます。

テスト実行自体の工数が削減され、テスト結果の確認に注力できる
コードの変更にともなうアプリケーション全体への影響を確認し、定期的かつ迅速なフィードバックがおこなえる
開発メンバー全員でビルド状況を確認できる

これらのメリットは、品質の高いソフトウェア開発につながります。

Azure DevOps との連携に関する資料のご案内

Ranorex と Azure DevOps との連携については、Ranorex ユーザーガイド に記載されていますが、より詳細な連携手順に関する資料をご用意しました。
資料は以下のリンクからダウンロードできますので、ぜひご参考ください。

資料ダウンロード

The post Azure DevOps との連携 first appeared on テスト自動化ツール『Ranorex』.

Ranorex + diff-pdf 連携によるPDF比較

Ranorex編集部 — Fri, 12 Jul 2024 02:00:06 +0000

今回は、Ranorexとreg-cli（reg-suit）の連携によるPDFファイル比較の検証について紹介します。
Ranorex単体でも、画像比較を使用するこで、PDFファイルを画像として比較することが可能であり、どの方法を使用するかはテスト内容や環境に合わせて選択することができます。

diff-pdfとは？

diff-pdfは、 PDFファイルを視覚的に比較するためのツール（OSS）です。
Windows用に、バイナリとして提供されており、コマンドラインで使用できます。
diff-pdfは、以下のサイトから入手可能です。

https://vslavik.github.io/diff-pdf/

※本記事では、Ranorex v11.3.3 を使用しています。

コマンドライン上でdiff-pdfを実行することで、パラメータとして指定した比較元となるPDFファイルと、比較対象となるPDFファイルの比較を行うことができます。

diff-pdf --output-diff={比較結果レポート}.pdf {比較元となるPDFファイル}.pdf {比較対象となるPDFファイル}.pdf

diff-pdfの実行時に以下のパラメータ、オプションを使用することができます。

-v, –verbose：差分結果をコマンドライン上に出力する。
-s, –skip-identical：比較結果の差分のみを出力する。（※–output-diffオプションと併用）
-m, –mark-differences：出力した差分結果において、差分がある行を左端に表示する。
-g, –grayscale：色の違いのみを比較する。差分が無い場合は、灰色で表示される。
–output-diff=：差分結果をPDFファイルに出力する。
–channel-tolerance=：差分を判定する基準値（閾値）の範囲を0～255の範囲で指定する。（※初期値は0で設定されており、完全一致となる）
–per-page-pixel-tolerance=：ページ単位で差分が許容されるピクセル数。
–dpi=：ラスタライズ解像度。（初期値：300dpi）
–view：差分結果をウィンドウ上に表示する。

以下にRanorex＋diff-pdf連携によるpdfの比較について解説します。

テストの流れ

Ranorex StudioのUIテスト実行時にアプリから出力されたPDFファイルを使用し、diff-pdfで比較して結果を出力する流れになります。

テストの準備

1. テストの作成

Ranorexを使用して、比較するPDFファイルを出力する操作のテストケースを作成します。

2. diff-pdfの設定

新規に用意したレコーディングモジュールにて、Run applicationアクションを使用して、diff-pdf（diff-pdf.exe）を実行するように設定します。Run applicationアクションのArguments項目には、diff-pdfのパラメーターを指定します。

※diff-pdfに渡すパラメーターは、Arguments項目を変数化し、Ranorexのデータソースやパラメーターの機能を使用することで可変にすることができます。また、ユーザーコードの機能を使用することで、更に複雑な指定方法も可能です。

テストスイートにて、テストの最後に、設定したレコーディングモジュールを追加します。
下図は、”PDF比較“のテストケースに、上記の設定を行った”diff_pdfの実行“のレコーディングモジュールを指定した例になります。テストを実行すると初めにUIテストをおこない比較するPDFファイルが出力され、最後にPDFファイルの比較を実行します。

実行結果

PDFファイルの比較結果は、diff-pdfで出力されたHTMLレポートにて確認できます。
下図は差分結果になり、差分のない個所は灰色で表示され、差分がある個所には色が付きます。

比較したPDFファイル：

PDF比較用サンプル1.pdf

PDF比較用サンプル2.pdf

まとめ

Ranorexにも画像比較をおこなうためのValidationアクション（ContainsImage、CompareImage）や、Ranorex APIが用意されており、これらを使用することによりPDFファイルの比較を実施することも可能です。また、今回、紹介した様な他ツールと連携することでもPDFファイルの比較をおこなうことができ、開発プロジェクトに合わせたテスト方法を選択し、柔軟に対応することが可能です。

The post Ranorex + diff-pdf 連携によるPDF比較 first appeared on テスト自動化ツール『Ranorex』.

テスト自動化シナリオのバージョン管理

Ranorex編集部 — Fri, 03 Mar 2023 02:00:32 +0000

Ranorexには、バージョン管理ツール(Git/Subversion/TFVC)との連携機能が備えられています。この機能を活用することで、単にテスト資産のバージョン管理ができるというだけではなく、継続的なUIテスト自動化を進めていく上でのメリットがあります。

そこで今回の記事では、Ranorexをバージョン管理ツールと連携させるメリットと、運用する際の注意点、Subversionを例にした具体的な運用イメージについてご紹介したいと思います。

前提：Ranorexのテスト資産の構成

Ranorex Studioで作成したテストは、テスト新規作成時の設定画面で指定した場所に保存されます。初期設定は、C:\Users\<ユーザー名>\Documents\Ranorex\RanorexStudio Projects のフォルダが指定されています。

テスト資産(Ranorexプロジェクト)は以下のように、Microsoft Visual Studio 2008/2010 プロジェクトをベースとしたファイル形式で構成されています。

バージョン管理ツールを使用する場合も、一般的なVisual Studioによる開発で使用するケースと同じく、これらのプロジェクト一式をバージョン管理リポジトリに追加し、変更が発生したファイルに対して都度コミットをしていくようなイメージとなります。

Ranorexをバージョン管理ツールと連携させるメリット

テスト資産の管理が楽になる

これは、アプリケーション開発におけるコードやドキュメントの管理の際のメリットと同じですが、ファイルで管理していると最新版がどれかわからなくなったり、前回どこを変えたかがわからず前のバージョンに戻せないといった事象が発生しやすいです。バージョン管理ツールを使うことで、これらを解決できます。

複数人での開発に適している

これも一般的なバージョン管理ツールを使うメリットとして挙げられるものですが、複数人で開発する場合に、各自のローカルにファイルをダウンロードできるため、同時並行で開発をおこなえます。同一ファイルに対する変更が競合（コンフリクト）した場合でも、バージョン管理ツールで解決できます。

CIツールと連携した際、コミットなどの操作をテストの自動実行のトリガーとして利用できる

Ranorex + バージョン管理ツール + CIツール(Jenkinsなど) を連携することで、Ranorexのファイルがコミットされたタイミングで、Ranorexのテスト資産を実行するといった使い方ができます。Ranorex + CIツールだけの連携の場合は、Ranorexのシナリオに修正が入った場合は手動でファイルの差し替えが必要になりますが、バージョン管理ツールを加えることで、自動で変更を反映して実行する処理を組むこともできるようになります。

Jenkins への自動化テストの統合

運用時の注意点

開発でGitやSubversionなどのツールを使い慣れている方に、特にご注意いただきたい点として、競合(コンフリクト)発生時の対応方法が挙げられます。

通常のソースコードによる開発であれば、コンフリクトは自身が編集したファイルに発生するものですが、Ranorexは主にGUI設定によってシナリオの編集をおこなうことから、ユーザーが直接触っていないファイルにも変更が入る場合があります。例えば、レコーディングでアクションを追加した際には、以下の複数のファイルが裏で変更されています。

レコーディングモジュール(*.rxrec)
レコーディングモジュールの自動生成ファイル(*.cs)
リポジトリ(*.rxrep)

したがって通常のコードによるアプリ開発よりも競合の発生率が高く、マージ作業の難易度も高いといえます。また完全に自動生成のファイル(<レコーディングモジュール名>.cs 等)については、ユーザーによる直接編集が反映されない場合や、ファイル破損を引き起こす可能性があるため、コードベースでのマージが推奨されておりません。

これらの理由から、特に複数人で開発をする際はできるだけ競合そのものが発生しづらい運用とすることを推奨しております。

運用例として、プロジェクトを担当者ごとに分け、基本的に担当者は自分のプロジェクト内のものを編集するようにすることで、レコーディングモジュールやリポジトリ、.csprojといったファイルに競合が発生しづらくなります。

以下の例では、担当者A・B・Cでプロジェクトを分け、各自で作成したレコーディングモジュールを使って担当者Aのテストスイートを構成しています。

テストスイートをはじめとした一部のxml形式のファイルについては、内蔵される Ranorex Magic Mergerというツールを使って、競合の解決をおこなうことができますので、上記の形で複数の担当者が同じテストスイートを同時に編集しても問題ありません。

Subversion 連携

ここではSubversionを例に、連携の手順をご説明します。Gitを使った連携についてはこちらの記事をご覧ください。

・Subversion と Ranorex の連携手順

ユーザーガイドに記載の手順にて、Ranorex Studio上からソリューションをSubversionのリポジトリに追加したり、逆にリポジトリからソリューションをチェックアウトすることができます。TortoiseSVNの機能を使って、エクスプローラー上からリポジトリ追加/チェックアウトをおこなうことも可能です。

・管理対象外とすべきファイル

Subversion連携の場合、追加したソリューション配下のファイルはすべてリポジトリに追加されます。以下のファイルは、テスト実行に影響がなく、かつコンフリクトが発生しやすいファイルのため、管理対象外にすることをおすすめいたします。

*.rximg
レポートファイルのショートカット
Debug/Releaseフォルダー配下のファイル
Reportsフォルダー配下のファイル

各ファイルについて詳しくは、こちらのページの「管理対象外のデータファイル」をご参照ください。

・Ranorex Magic Merger

以下のファイルで競合が発生した場合、Ranorexで提供されているマージツールを使用して競合を解決することができます。

Ranorex テストスイートファイル（.rxtst）
Ranorex リポジトリファイル（.rxrep）
プロジェクトファイル（.csproj または、.vbproj）

【設定】
エクスプローラーでファイルを右クリック – [TortoiseSVN] – [設定]を開き、[外部プログラム] – [マージツール] – [高度な設定] から、上記3種類のファイルタイプ(.rxtst/.rxrep/.csprojまたは.vbproj)を追加します。コマンドとして以下を指定します。

C:\Program Files (x86)\Ranorex\Studio\Bin\Ranorex.MagicMerger.exe -base:%base -mine:%mine -theirs:%theirs -output:%merged

【使い方】

競合が発生しているファイルを右クリック – [競合の解決]をクリックすると、Ranorex Magic Mergerが起動します。競合の修正が完了したら、対象のファイルを右クリック – [競合を解決済みとしてマークする]をクリックすると、コミット・更新が可能となります。

まとめ

今回は、Ranorexとバージョン管理ツールの連携について説明してきました。基本的な操作についてはアプリケーション開発などの現場と同じような使い方ができますので、使い慣れているツールでぜひお試しください。

The post テスト自動化シナリオのバージョン管理 first appeared on テスト自動化ツール『Ranorex』.

Ranorex と Jira 連携について

Ranorex編集部 — Fri, 18 Nov 2022 00:00:00 +0000

Ranorex は、課題管理ツールである Jira と簡単に連携できます。Jira は、チーム全体のタスクや計画を共有して、タスク管理や工数管理、進捗管理、スケジュール管理などを行い、プロジェクト全体を管理できます。

Ranorex と Jira を連携することで、例えば、Ranorex のテスト結果をもとに、失敗したテスト項目などを自動的に課題登録することができます。今回は、課題管理を自動登録する方法についてご紹介します。※テスト実行後に手動で課題を登録することも可能です。

Jira 連携のセットアップ

Ranorex Studio の Jira ウィザードを使用して、Jira 連携のセットアップをおこないます。

Ranorex Studio でソリューションを開き、ツール > Jira 連携 > Jira ウィザードの開始 をクリックします。

2. Jira への接続画面が表示されます。認証情報を入力し、サインイン をクリックします。

3. サインインに成功したら、続行をクリックします。

4. ドロップダウンメニューから、ソリューションとリンクしたい Jira プロジェクトを選択し、続行をクリックします。

5. 課題の手動処理は、今回は無効化し、続行をクリックします。

6. 自動処理の有効化 を有効化にし、課題タイプ、オープンステータス、完了ステータス の設定をしていきます。
　ここでは、課題タイプ：バグ、オープンステータス：To Do、完了ステータス：完了にします。

7. Jira 連携の設定画面にて、課題の自動処理をクリックし、必須フィールド を入力します。
※報告者名 (Jira に登録されているユーザー名) の記入を忘れないようにお気を付けください。

その他のオプション設定もできます。

テスト実行

1. Ranorex Studio にて、テストスイートを開き、RUN ボタンでテスト実行します。

2. テスト実行後に、Ranorex のテスト結果レポートを確認します。

上記のように、テストが失敗すると、Jira に自動的に課題登録されます。一方で、テストが成功した場合には、課題登録はされません。

Jira 課題登録の確認

Jira のサイトにアクセスし、失敗したテストの課題登録がされているかを確認します。

1. 対象のプロジェクトを開き、オープンの課題を参照すると、失敗したテストケースが課題登録されているのが確認できます。
　タイプ：バグ、ステータス：TO DO

登録された課題には、テスト結果も表示されるため、Jira 上で、修正すべき点を確認できます。

Jira 課題完了

アプリの改修やテストシナリオの修正などの後に、課題登録されたテストを再実行して、成功になると、課題のステータスは完了になります。

テストケース成功

Jira 課題完了

ステータスが完了になり、オープンの課題から解決済みの課題に分類されます。

まとめ

Ranorex と Jira を連携することで、自動的に課題管理できます。また、CI ツールで Ranorex のテスト実行を自動化することで、課題管理までの一連の操作を自動化できます。課題管理の工数を削減できますので、ぜひ、Ranorex と連携してご利用ください。

The post Ranorex と Jira 連携について first appeared on テスト自動化ツール『Ranorex』.

MSBuild を使用したコマンドラインでのソリューションのビルド方法

Ranorex編集部 — Fri, 02 Sep 2022 00:00:00 +0000

Ranorex は、Ranorex Studio で作成したソリューションを MSBuild でビルドし、生成されたテスト実行ファイル(.exe)を実行することで、テストをおこないます。Ranorex Studio では、テスト実行のタイミングで内部的にビルドされますが、コマンドラインでもビルドができます。

今回は、コマンドラインでの Ranorex ソリューションのビルドをおこなう活用場面と方法についてご紹介します。

コマンドラインでのソリューションのビルドによる活用場面

Jenkins などの CI ツールを使用して、ソリューションのチェックアウトからテストレポートの生成までの一連の流れを自動化する。

CIツールを使用することで、バージョン管理システムへのソースコードのコミットをトリガーに、テスト対象アプリと Ranorex のソリューションのチェックアウトからテストレポートの生成までを自動化できます。CI環境にて、チェックアウトされたソリューションをビルドする際に、MSBuildを使用します。

Jenkins の場合は、MSBuild のプラグインがあるため、より簡単に設定がおこなえます。Jenkins による CI の詳細手順につきましては、こちらをご確認ください。

補足：Ranorex のコマンドライン実行

CIツールにて、Ranorex のテスト実行自体を自動化する場合は、テスト実行ファイル（.exe）を実行するコマンドラインを用意する必要があります。

具体的なテスト実行のコマンドについては、こちらをご確認ください。

MSBuild を使用したコマンドラインでのビルド方法

Ranorex のソリューションをビルドする環境に、MSBuild がインストールされているかを確認します。環境にない場合は、Visual Studio や .NET SDK などをインストールすることで、MSBuild をインストールできます。なお、環境変数に、MSBuild のパスを通しておくことで、フルパスを使用せずにプログラム名のみで実行できます。

Visual Studio 2022 (ブログ投稿時点) をご利用の場合、MSBuild のパスは以下になります。
C:\Windows\Microsoft.NET\Framework\v4.0.30319\MSBuild.exe

Ranorex ソリューションのビルドコマンド（MSBuild のパスを通した場合）

> MSBuild.exe <ソリューション名.sln のファイルパス>

Ranorex のソリューションファイルは、以下のパスになります。
C:\Users\ユーザー名\Documents\Ranorex\RanorexStudio Projects\ソリューション名\ソリューション名.sln

ソリューションをビルドすると、テスト実行に必要なファイルが以下のパスに生成されます。
※<プロジェクト名.exe> を実行することでテスト実行ができます。
C:\Users\ユーザー名\Documents\Ranorex\RanorexStudio Projects\ビルド\ビルド\bin\Debug

注意点1：
MSBuild のバージョンは、 Ranorex で使用している .NET Framework のバージョンと合わせてください。
Ranorex で使用している .NET Framework のバージョンは、「ヘルプ」> 「Ranorex Studio について」にて、「.NET Runtime Version」でご確認いただけます。

まとめ

Ranorex Studio がインストールされていない環境で、ソリューションのビルドを行う場合や、CIツールなどを使用して、Ranorex ソリューションのビルド自体を自動化する場合には、MSBuild を使用して、コマンドラインでビルドすることでご対応いただけます。このような環境でテスト自動化をされる方は、MSBuild を使用してソリューションをビルドください。

The post MSBuild を使用したコマンドラインでのソリューションのビルド方法 first appeared on テスト自動化ツール『Ranorex』.

Ranorex：Gitによるテスト管理

Ranorex編集部 — Fri, 05 Aug 2022 02:00:42 +0000

UIテスト自動化ツールで作成したテスト資産をどのように管理したら良いのか迷うことがあります。

UIテスト自動化ツールであるRanorexは、GitやSVN（Subversion）、TFVC（Team Foundation Version Control）との連携が可能です。
Gitでは、Ranorex Studioがインストールされている環境に必要なツール（Git for Windows、TortoiseGit）をインストールすることで連携を可能にします。
今回は、Gitを使用したテスト管理について紹介いたします。

※本記事では、Gitの基本操作については説明いたしません。Gitの公式サイトなどをご確認ください。

コミット（commit）とチェックアウト（checkout）

Ranorex StudioとGitを連携することで、Gitへのコミット時に管理対象となるファイルをRanorex Studioが自動で選択します。このため、コミットするファイルをユーザー自身が選択する必要がありません。また、チェックアウトにおいては、Ranorex Studioからチェックアウトのメニューを選択することで、ローカル環境に対象のRanorexソリューションがクローンされ、Ranorex Studioで開かれます。

※RanorexとGitの連携によるコミット、およびチェックアウトや、フェッチ、プル、プッシュなどの各操作の詳細については、ユーザーガイドをご参照ください。

※”.sln”ファイルについて
”.sln”ファイルは、Ranorexソリューションフォルダー配下に生成され、Gitへのコミット時に管理対象に含まれないファイルとなります。

C:\Users\{ユーザー名}\Documents\Ranorex\RanorexStudio Projects\{ソリューション名}

Rranorex Studioを使用せずに、Ranorexソリューションをビルドし、テスト実行モジュール（.exe）を生成される場合は管理対象ファイルに含めてください。
たとえば、CI環境で自動化する場合に、GitからチェックアウトしたRanorexソリューションをビルドし、テスト実行モジュール（.exe）を生成したい場合などに必要となります。

コンフリクト（conflict）

Ranorexで提供されているマージツール（Ranorex Magic Merger）を使用することで、RanorexソリューションのXML形式ファイルを自動マージするとともに、自動でマージできない場合においては、マニュアルよるコンフリクトの解決を行うことができます。

※Ranorex Magic Mergerでは、以下のファイルの自動マージに対応しています。

Ranorex テストスイートファイル（.rxtst）
Ranorex リポジトリファイル（.rxrep）
プロジェクトファイル（.csproj または、.vbproj）

管理対象外のデータファイル

管理対象外のファイルとして、以下のファイルがあります。

※”.rximg”ファイル以外は、Ranorex StudioとGitの連携時におけるチェックアウト時には管理対象ファイルに含まれません。

“.rximg”ファイル

このファイルは、Ranorexソリューションフォルダーにあるプロジェクトフォルダーに生成されます。

C:\Users\{ユーザー名}\Documents\Ranorex\RanorexStudio Projects\{ソリューション名}\{プロジェクト名}

このファイルは、リポジトリのスクリーンショット（リポジトリにて各オブジェクトを選択した時に右側に表示されるスクリーンショット）を保存するためのバイナリファイルです。１つのRanorexソリューションを複数人で編集する場合にコンフリクトが発生しやすいファイルとなります。また、テスト実行において影響がないため、テストの作成などで個々のオブジェクトを画像で確認する必要がない場合には管理対象から外しても問題のないファイルになります。

レポートファイル（ショートカット）

このファイルは、プロジェクトフォルダー配下のReportsフォルダーに生成されます。

C:\Users\{ユーザー名}\Documents\Ranorex\RanorexStudio Projects\{ソリューション名}\{プロジェクト名}\Reports

このファイルは、テスト実行時に生成されるレポートファイルのショートカットになります。テスト実行において影響のないファイルとなるため、管理対象から外しても問題のないファイルになります。

このファイルはテスト実行の度に生成されるため、生成されないようにしたい場合は、以下の作業を行ってください。

Ranorex Studioにて、「ツール」メニューから「オプション」を選択します。
表示されるオプション画面にて、”全般”－”Ranorex レポートビューアー”を開きます。
Ranorex レポートビューアーの設定画面にて、”レポートモニター”にある、”プロジェクトレポートフォルダーにレポートファイルのリンクを自動作成”のチェックボックスを無効にします。
「OK」ボタンをクリックし、オプション画面を閉じます。

Debug/Releaseフォルダー配下のファイル

このフォルダー配下のファイルは、Ranorexソリューションフォルダーにあるプロジェクトフォルダーに生成されます。

C:\Users\{ユーザー名}\Documents\Ranorex\RanorexStudio Projects\{ソリューション名}\{プロジェクト名}

このフォルダーは、Ranorex Studioのテスト実行時において、Ranorexソリューションのビルド時に生成されるテスト実行用モジュール（.exe）が保存されるフォルダーになります。CI環境を使用した自動化などで、Ranorexソリューションを毎回、ビルドしてテスト実行用モジュールを生成される場合には不要となるため、管理対象から外しても問題のないファイルになります。

※Ranorexソリューションの対象プロジェクトの構成（Debug/Rlease）によって、Debug、またはRleaseフォルダーの出力先が変わります。（デフォルト時は、Debugフォルダーに出力されます）

Reportsフォルダー配下のファイル

このフォルダー配下のファイルは、プロジェクトフォルダー配下にあるDebug/Releaseフォルダーに生成されます。

C:\Users\{ユーザー名}\Documents\Ranorex\RanorexStudio Projects\{ソリューション名}\{プロジェクト名}\（Debug/Release）

このフォルダーは、Ranorex Studioのテスト実行時に生成されるテスト結果レポートが保存されるフォルダーになります。テスト実行において影響がないため、管理対象から外しても問題のないファイルになります。

まとめ

UI/E2Eで作成したテストも、開発コードやドキュメント類（仕様書、設計書）などと同じ開発資産となります。そのため、これらの開発資産と一緒に、Gitなどの構成管理ツールにて管理されることをお勧めします。

The post Ranorex：Gitによるテスト管理 first appeared on テスト自動化ツール『Ranorex』.

Ranorex 活用術まとめ

Ranorex編集部 — Fri, 03 Jun 2022 02:00:00 +0000

Ranorex の使い方や活用術に関するブログ記事をまとめました。このページでは、お客様からよくいただく問い合わせをもとに、エラーの解決策や便利なチップス、自動化ツール比較などを紹介しています。

以下のジャンル別に関連する記事を掲載しています。目次のリンクをクリックすると、気になるセクションに直接アクセスできます。

テスト自動化を始める前に
Ranorexを初めて利用する方
テストでエラーが発生したとき
ロケーションパスの管理・メンテンナンス
テストスクリプト作成の効率化
作成したテストスクリプトの管理
検証
テスト実行
レポート
CI/CD連携
ツール比較
その他

テスト自動化を始める前に

Ranorex を利用する前に、まずは、テスト自動化の進め方について学習しましょう。

テスト自動化ベストプラクティス

Ranorexを初めて利用する方

Ranorex を始める際につまづきやすいポイント

Ranorex 初心者にチェックしてほしいポイント5選

プロジェクト画面がうまく表示されない・ソリューションのビルドが失敗する

Visual Studio Build Tools 2022のインストール手順

Webアプリケーションでチェックすべきポイント

RanorexでWebアプリケーションをテストする際にチェックしてほしいポイント

テストでエラーが発生したとき

よくあるエラー/警告メッセージ一覧(FAQ)

テスト作成や実行時に発生したエラーの内容や解決方法は、以下のページに一覧でまとめています。
まずは、こちらのページをご確認ください。

FAQ – エラー・警告

テスト対象アプリごとのエラー・警告の対応方法

デスクトップ・Web・モバイル共通

エラーメッセージが出力された場合の対応方法

モバイル

エラーが発生した場合の対応方法 -モバイル編-

デスクトップ (WPFアプリケーション)

WPF アプリケーションのオブジェクト認識がうまくいかない時の対処法

テスト実行中にエラーを素早く修正する方法

メンテナンスモードで素早くデバッグする方法

ロケーションパスの管理・メンテンナンス

レコーディング時にUI要素の認識ができない時の対応方法

デスクトップアプリ

デスクトップアプリで認識しないオブジェクトの対応

Webアプリのメッセージダイアログ(Window.alert()など)

E2Eテスト：予期せぬポップアップ画面の操作自動化

変更に強いロケーションパス(RanoreXPath)の作成

アプリの改修などでレイアウト構造が変わると、ロケーションパスのメンテナンスが発生しやすくなります。テストを作成する前に、メンテナンスが発生しにくいロケーションパスの設計方法をご確認ください。

変更に強いRanoreXPathの設計方法

変更に強いRanoreXPathの設計方法

テスト実行時にUI要素の認識に失敗したときに、堅牢性の高いロケーションパス(ロバストパス)を使用して再試行できます。これにより、UI要素の失敗を防げるケースがあります。

Self Healing機能

Ranorex v9.5の新機能（Self-Healing機能）

以下のハンズオンセミナーや有償トレーニングで、RanoreXPathについて詳しく学習ができます。

ハンズオンセミナー (中級)
Self Healing機能を含め、変更に強いオブジェクトの作成について学ぶことができます。
有償トレーニング (RanoreXPathの活用)
オブジェクト認識エラーが出た時の具体的なメンテナンス方法について学ぶことができます。

テストスクリプト作成

シナリオ作成

レコーディング時に使用できる便利機能

Recorder control centerの活用

便利なアクション機能

アクションの待機
値の取得と設定

テスト内容に合ったアクションを使用する

スクリーンショットの取得

テストのエビデンスとしてスクリーンショットを取得する

クロスブラウザーテスト

クロスブラウザーテストの自動化

条件分岐・ループ処理

条件分岐

コードを使用しないループ処理と条件分岐の実装

オートメーションヘルパー

Ranorexの標準アクションには用意されていない、コーディングが必要な機能を設定のみで簡単に利用できるライブラリーです。

Automation Helpersによる提供モジュール/メソッド内容のご紹介

予期せぬポップアップ、ダイアログメッセージの操作

E2Eテスト：予期せぬポップアップ画面の操作自動化

作成したテストスクリプトの管理

既存のテストシナリオを再利用/共通化する

作成したテスト資産の流用方法

複数人でテストスクリプトを共有/管理する

テスト自動化シナリオのバージョン管理

構成管理ツールとの連携

検証

画像検証

イメージバリデーションの概要

イメージバリデーション（概要）#1

イメージバリデーションの使い方

イメージバリデーション（使用）#2

イメージバリデーションのオプション①
- 類似度と差分結果のレポート
- イメージバリデーションで指定するオブジェクト
- 期待する画像の置換

イメージバリデーション（勘所）#3

イメージバリデーションのオプション②
- プリプロセスフィルター
- 類似度の指定

イメージバリデーション（応用）#4

ビジュアルリグレッションテスト
マシンに保存された新旧の2つの画像を比較

TMX Automation Helpers リファレンス７：画像ファイルを使用した画像比較

人の目では認識できない微細な差分を成功とするイメージバリデーション
- OSSツール「OpenCV」連携によるカスタマイズ

環境差に対応した柔軟な画像比較 (Ranorex + OpenCV連携)

複数のプラットフォームで画像比較を成功させるための方法

複数のプラットフォームで画像比較を成功させるための方法

ファイル検証

Ranorex：ファイルの検証

データベースの値の検証

データベースの値の検証

データベースの値の検証2

検証時の待機時間の変更

検証時の待機時間を変更する方法

テスト実行

テストシナリオ作成時、実行時の動作が重い

Ranorexのパフォーマンスを改善するコツ

テスト実行の速度を変更したい

Ranorexの「設定」：テスト実行速度の調整

ターボモードの設定(ユーザーガイド)

コマンドライン実行

テストの自動実行におけるコマンドラインの活用

リモートテスト

リモート環境でのテスト実行 ①

リモート環境でのテスト実行 ②

複数の環境で同一のテストを実行する場合の注意点

複数の環境で同一のテストを実行する場合の注意点

レポート

レポートのファイル形式の変更

PDF、HTML、CSV、JUnitファイル形式でレポート出力できます。

レポートの設定(ユーザーガイド)

ビデオレポート機能

Ranorex Studio：ビデオレポート

応用編

データの加工方法

データ(文字列)の一部だけの取得や複数の文字列の結合で、加工したデータをアクションで利用できます。

Ranorex：ノンプログラミングによる文字列操作

レポートのフィルター機能

レポートの情報量を調整する方法

オブジェクトのPathを可変にする方法

以下の記事で、1つのRanoreXPathを可変にし、複数のセルの指定に使用する方法について解説しています。

テーブルの各レコードに対するアクション実行

CI/CD連携

Jenkins連携

Jenkins への自動化テストの統合

Azure DevOps連携

Azure DevOps との連携

ツール比較

Playwright

Playwright と Ranorex の違い

Selenium

SeleniumではなくRanorexを選択する主な理由

SeleniumとRanorexの違い -オブジェクト認識-

Selenium系ツールによるテスト自動化運用の隠れたコスト

UWSC

UWSC と Ranorex の違い

Power Automate for desktop

Power Automate for desktop と Ranorex の違い

その他

課題管理ツール「Jira」連携

Ranorex と Jira 連携について

テスト管理ツール「TestRail」連携

手動/自動テストのテストケース管理

The post Ranorex 活用術まとめ first appeared on テスト自動化ツール『Ranorex』.

Ranorex＋reg-cli連携によるビジュアルテスト

Ranorex編集部 — Fri, 27 May 2022 02:00:54 +0000

今回は、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 S3などのクラウドストレージ上で管理でき、またGitHubと連携してプルリクエストに通知して差分結果を確認することもできます。（※reg-suitの内部でreg-cliが使用されています）

※今回は、すべての作業をローカル環境にて行うため、reg-cliを使用します。

reg-cliは、npm（Node Package Manager）を使用し、以下のコマンドでインストール可能です。コマンドを実行したフォルダ配下にreg-cliがインストールされます。
※npmは、Node.jsをインストールすることで一緒にインストールされます。

npm install -D reg-cli

コマンドライン上でreg-cliを実行することで、用意した画像ファイルに対して比較を行うことができます。

./node_modules/.bin/reg-cli ./path/to/actual-dir ./path/to/expected-dir ./path/to/diff-dir -R ./rep/diff-report.html

reg-cliの実行時に以下のパラメータ、オプションを指定します。reg-cliのオプションは、”reg-cli –help“のコマンド実行で確認できます。

./path/to/actual-dir：比較元となる画像ファイルがあるフォルダパス
./path/to/expected-dir：比較対象となる画像ファイルがあるフォルダパス
./path/to/diff-dir：比較した画像ファイルの差分結果が保存されるフォルダパス
-R ./rep/diff-report.html：差分結果のHTMLレポートの出力先を指定（”-R“オプションを使用）

reg-cliを実行すると、比較元となる画像ファイルがあるフォルダと、較対象となる画像ファイルがあるフォルダにある同一のファイル名の画像ファイルを比較します。各フォルダにはファイル名さえ異なれば複数ファイル置くことが可能なため、複数のアプリ画像を一度に比較することができ、また、比較結果を１つのレポートにまとめることができます。

以下にRanorex＋reg-cli連携によるビジュアルテストについて解説します。

テストの流れ

RanorexのUIテスト実行時に取得した画像ファイルを使用し、reg-cliで比較して結果を出力する流れになります。

テストの準備

１．比較する画像ファイルの取得

Ranorexのユーザコードを使用し、キャプチャしたアプリ画像をファイル出力するためのメソッドを作成します。

ユーザコードによる画像ファイルの出力方法については、過去の記事（ユーザーコードリファレンス：フルスクリーンショットのイメージ比較）をご参照ください。ユーザコードにて、以下のサンプルコードのように画像ファイルを出力するメソッド（fullScreenshot）を用意します。
※用意するメソッドは、どのレコーディングモジュールでも使用できるようにユーザーコードコレクションとして作成されることをお勧めします。

サンプルコード：
※出力する画像ファイル名は、重複しないように、”{テストケース名}_{モジュール名}_{リポジトリ名}.png”の形式で出力するようにしています。

/// 
/// 第1パラメーター：フルスクリーンショットを取得したいリポジトリ（アプリフォルダー）
/// 第2パラメーター：フルスクリーンショットの出力先（例：C:\tmp\imgA.png）
/// 
public void fullScreenshot(RepoItemInfo itemInfo, string outputImgFile)
{
	// フルスクリーンショットの取得
	Bitmap screenShot = itemInfo.FindAdapter().CaptureFullPageScreenshot();

	// 出力する画像ファイル名（{テストケース名}_{モジュール名}_{リポジトリ名}.png）の設定
	string testCaseName = TestSuite.CurrentTestContainer.Name; // テストケース名の取得
	string moduleName = TestModuleLeaf.Current.Name; // モジュール名の取得
	string repoName = itemInfo.FullName; // リポジトリ名の取得
	string imgFileName = testCaseName + "_" + moduleName + "_" + repoName + ".png";
	
	//　フルスクリーンショットの出力
	screenShot.Save(outputImgFile + "/" + imgFileName);
		
	// レポート出力
	Report.LogData( ReportLevel.Info, "スクリーンショット", screenShot );
}

用意した画像ファイルを取得するためのメソッドをレコーディングモジュールに設定します。
※メソッド（fullScreenshot）のパラメータ（outputImgFile）にて、画像ファイルの出力先を変数化し、データソースを使用して、比較元と比較対処となる画像ファイルの出力先を切り替えれるようにすると便利です。

２．reg-cliの設定

新規に用意したレコーディングモジュールにて、Run applicationアクションを使用して、reg-cli（reg-cli.cmd）を実行するように設定します。
Run applicationアクションのArguments項目には、reg-cliのパラメーターを指定します。

テストスイートにて、テストの最後に、設定したレコーディングモジュールを追加します。下図は、”ビジュアルテスト“のテストケースに、上記の設定を行った”画像比較“のレコーディングモジュールを指定した例になります。テストを実行すると初めにUIテストを行いながら、ビジュアルテストで使用するアプリの画像を取得し、最後にビジュアルテストを実行します。

実行結果

テストを作成したら実行します。初回のみ、比較元となる画像ファイルを取得するためのテストを実行する必要があります。この時、画像ファイルの出力先を間違えない様にします。２回目以降のテスト実行から、ビジュアルテストを実施できます。

ビジュアルテストの結果は、reg-cliにて出力されたHTMLレポートにて確認できます。

差分のあった画像をクリックすることで、差分個所を確認することができます。

差分の確認方法は、”Diff“、”Slide“、”2up“、”Blend“、”Toggle“のいずれかの方法で確認できます。

Diff：reg-cliで出力された画像差分結果（差分個所が赤色で表示されます）を確認できます。
Slide：BeforeとAfterの水平バーを移動することで、２つの比較画像を確認できます。
2up：比較元と比較対象の画像を並べて確認できます。
Blend：BeforeとAfterの水平バーを移動することで、差分個所を透過させながら確認できます。
Toggle：BeforeとAfterのスイッチを切り替えながら比較結果を確認できます。

まとめ

Ranorexにも画像比較を行うための方法として、Validationアクション（ContainsImage、CompareImage）や、Ranorex APIが用意されており、これらを使用することによりビジュアルテストを実施することも可能です。また、今回、紹介した様な他の画像比較ツールと連携することでもビジュアルテストを行えるため、さまざまな開発プロジェクトに合わせたテスト方法を選択し、柔軟に対応することが可能です。

The post Ranorex＋reg-cli連携によるビジュアルテスト first appeared on テスト自動化ツール『Ranorex』.

Applitools Eyes連携後編：PDFファイルの画像検証

Ranorex編集部 — Fri, 17 Sep 2021 02:00:30 +0000

前編に引き続き、RanorexとApplitools Eyesの連携による画像検証について紹介します。今回は、PDFファイルのレイアウトを画像検証する方法について説明します。

Applitools Eyes連携では、前編で紹介したWeb画面全体の画像検証以外にも、 PDFファイル単位での画像比較をおこなうことが可能です。
なおApplitools EyesにおけるPDFファイルの画像比較については、Ranorexを連携しなくても、公式サイトからダウンロードできるImageTester.jarを使用して、コマンドラインで検証が可能です。コマンドラインでの実行に関して詳しくは、公式サイトをご参照ください。

※Applitools Eyesとは、ビジュアルAIを用いたテスト自動化プラットフォームです。詳しくは公式サイトおよび前編の記事をご参照ください。

※本検証では、Ranorex v9.5.3を使用しています。

※本検証は、Applitools Eyesとの連携によるテスト実行において、動作を保証するものではありません。また、本検証に関するサポートへの問い合わせは受付けておりませんので、予めご了承いただけます様、お願いいたします。

1. 事前準備

Applitools Eyes連携をおこなうには、いくつかの初期設定が必要です。詳しくは、前編(Applitools Eyes連携前編：Web画面全体の画像検証)をご参照ください。

2. PDF検証用のメソッドを追加

Ranorex Studioにて、Applitools Eyesによるチェックをおこないたいレコーディングモジュールを開きます。
PDFの検証は、リポジトリアイテムではなく、pdfファイルを指定する形となるため、アクションテーブルで、[新しいアクションの追加] – [ユーザーコード] – [ライブラリから選択] をクリックし、 VisualCheckpoint(String fileOrFolderPath)メソッドをダブルクリックします。

VisualCheckpoint(String fileOrFolderPath)メソッドの引数に、検証するPDFファイルまたはフォルダーのパスを入力します。

ファイルおよびフォルダーのパスには、以下の書式が使用できます。
•絶対パス
単一のファイルの場合: C:\users\user\documents\MyPDF.pdf
フォルダー全体の場合: C:\users\user\documents\

•相対パス
単一のファイルの場合: MyPDF.pdf
フォルダー全体の場合: documents\
※相対パスは、テスト実行ファイルからの相対パスです。

3. テスト実行

テスト実行・結果の確認手順については、前編(Applitools Eyes連携前編：Web画面全体の画像検証)をご参照ください。

6. テストの実行
7. 結果の確認

4. 比較結果

今回は、扶養控除等(異動)申告書を対象に、ファイル比較をおこなってみました。
対象のPDFファイルが複数ページにわたる場合でも、ファイルを指定するだけですべてのページを1枚ずつ比較してくれます。

画像比較の仕組みはWebアプリなどと同様です。Applitools EyesはAIを用いた画像比較が可能です。Ranorexのようなピクセル単位の比較では、人間の目ではわからないような微妙な色の違いなども差分として検知されてしまうことがありますが、Applitools Eyesでは人の目で見てわかる差分のみを検出することができます。ただし、あくまで画像比較となるため、人が判断して「似ているからOK」とするような検証がおこなえるわけではありません。
以下は、令和2年と令和3年の扶養控除等(異動)申告書の比較結果です。このように、見た目の似ているレイアウトであっても、大きさや表示位置が異なる場合は、差分としてレポートされます。

※上記の例のように、異なる２つのファイルを比較したい場合、VisualCheckpoint(String fileOrFolderPath)メソッドを使用する際は、比較したい２つのPDFファイルを同一の名前にしておき、2回目の実行前にメソッドの引数に指定したファイルを入れ替えることで比較がおこなえます。

まとめ

Applitools Eyes連携を使用することで、Ranorexだけでは対応が難しかった、PDFファイル単位での画像比較が可能です。ページごとにValidateアクションを作成する必要もないため、帳票のレイアウト崩れを確認したいケースで簡単に検証がおこなえます。
Applitools Eyesの無償アカウントに関しては、どなたでも作成可能ですので、興味のある方はぜひお試しください。

The post Applitools Eyes連携後編：PDFファイルの画像検証 first appeared on テスト自動化ツール『Ranorex』.

ツール連携 - テスト自動化ツール 『Ranorex』

環境差に対応した柔軟な画像比較 (Ranorex + OpenCV連携)

OpenCVとは

RanorexとOpenCVの連携でできること

RanorexとOpenCVの連携

検証結果

まとめ

Azure DevOps との連携

Azure DevOps 連携のメリット

Azure DevOps との連携に関する資料のご案内

Ranorex + diff-pdf 連携によるPDF比較

diff-pdfとは？

テストの流れ

テストの準備

1. テストの作成

2. diff-pdfの設定

実行結果

まとめ

テスト自動化シナリオのバージョン管理

前提：Ranorexのテスト資産の構成

Ranorexをバージョン管理ツールと連携させるメリット

テスト資産の管理が楽になる

複数人での開発に適している

CIツールと連携した際、コミットなどの操作をテストの自動実行のトリガーとして利用できる

運用時の注意点

Subversion 連携

・Subversion と Ranorex の連携手順

・管理対象外とすべきファイル

・Ranorex Magic Merger

まとめ

Ranorex と Jira 連携について

Jira 連携のセットアップ

テスト実行

Jira 課題登録の確認

Jira 課題完了

まとめ

MSBuild を使用したコマンドラインでのソリューションのビルド方法

コマンドラインでのソリューションのビルドによる活用場面

MSBuild を使用したコマンドラインでのビルド方法

Ranorex ソリューションのビルドコマンド（MSBuild のパスを通した場合）

まとめ

Ranorex：Gitによるテスト管理

コミット（commit）とチェックアウト（checkout）

コンフリクト（conflict）

管理対象外のデータファイル

“.rximg”ファイル

レポートファイル（ショートカット）

Debug/Releaseフォルダー配下のファイル

まとめ

Ranorex 活用術まとめ

テスト自動化を始める前に

Ranorexを初めて利用する方

Ranorex を始める際につまづきやすいポイント

プロジェクト画面がうまく表示されない・ソリューションのビルドが失敗する

Webアプリケーションでチェックすべきポイント

テストでエラーが発生したとき

よくあるエラー/警告メッセージ一覧(FAQ)

テスト対象アプリごとのエラー・警告の対応方法

テスト実行中にエラーを素早く修正する方法

ロケーションパスの管理・メンテンナンス

レコーディング時にUI要素の認識ができない時の対応方法

変更に強いロケーションパス(RanoreXPath)の作成

テストスクリプト作成

シナリオ作成

便利なアクション機能

スクリーンショットの取得

クロスブラウザーテスト

条件分岐・ループ処理

オートメーションヘルパー

予期せぬポップアップ、ダイアログメッセージの操作

作成したテストスクリプトの管理

既存のテストシナリオを再利用/共通化する

複数人でテストスクリプトを共有/管理する

構成管理ツールとの連携

検証

画像検証

ファイル検証

データベースの値の検証

検証時の待機時間の変更

テスト実行

ツール連携 - テスト自動化ツール『Ranorex』

サンプルコード：
※出力する画像ファイル名は、重複しないように、”{テストケース名}_{モジュール名}_{リポジトリ名}.png”の形式で出力するようにしています。

Applitools Eyes連携後編：PDFファイルの画像検証