はじめに

インストール

最も簡単な方法は、@wdio/ocr-serviceをpackage.jsonの依存関係として維持することです。

npm
Yarn
pnpm

npm install @wdio/ocr-service --save-dev

yarn add @wdio/ocr-service --dev

pnpm add @wdio/ocr-service --save-dev

WebdriverIOのインストール方法はこちらにあります。

メモ

このモジュールはOCRエンジンとしてTesseractを使用しています。デフォルトでは、システムにTesseractのローカルインストールがあるかどうかを確認し、あればそれを使用します。なければ、自動的にインストールされるNode.js Tesseract.jsモジュールを使用します。

画像処理を高速化したい場合は、ローカルにインストールされたTesseractを使用することをお勧めします。テスト実行時間も参照してください。

ローカルシステムにシステム依存関係としてTesseractをインストールする方法はこちらにあります。

注意

Tesseractのインストールに関する質問やエラーについては、Tesseractプロジェクトを参照してください。

Typescriptサポート

@wdio/ocr-serviceをtsconfig.json設定ファイルに追加してください。

tsconfig.json
{
    "compilerOptions": {
        "types": ["node", "@wdio/globals/types", "@wdio/ocr-service"]
    }
}

設定

このサービスを使用するには、wdio.conf.tsのservices配列にocrを追加する必要があります

// wdio.conf.js
exports.config = {
    //...
    services: [
        // your other services
        [
            "ocr",
            {
                contrast: 0.25,
                imagesFolder: ".tmp/",
                language: "eng",
            },
        ],
    ],
};

設定オプション

`contrast`

タイプ: number
必須: いいえ
デフォルト: 0.25

コントラストが高いほど画像は暗くなり、その逆も同様です。これは画像内のテキストを見つけるのに役立ちます。-1から1の間の値を受け付けます。

`imagesFolder`

タイプ: string
必須: いいえ
デフォルト: {project-root}/.tmp/ocr

OCR結果が保存されるフォルダです。

メモ

カスタムのimagesFolderを提供する場合、サービスは自動的にサブフォルダocrを追加します。

`language`

タイプ: string
必須: いいえ
デフォルト: eng

Tesseractが認識する言語です。詳細はこちらで、サポートされている言語はこちらで見つけることができます。

ログ

このモジュールは自動的にWebdriverIOログに追加のログを追加します。@wdio/ocr-serviceという名前でINFOとWARNログに書き込みます。例は以下のとおりです。

...............
[0-0] 2024-05-24T06:55:12.739Z INFO @wdio/ocr-service: Adding commands to global browser
[0-0] 2024-05-24T06:55:12.750Z INFO @wdio/ocr-service: Adding browser command "ocrGetText" to browser object
[0-0] 2024-05-24T06:55:12.751Z INFO @wdio/ocr-service: Adding browser command "ocrGetElementPositionByText" to browser object
[0-0] 2024-05-24T06:55:12.751Z INFO @wdio/ocr-service: Adding browser command "ocrWaitForTextDisplayed" to browser object
[0-0] 2024-05-24T06:55:12.751Z INFO @wdio/ocr-service: Adding browser command "ocrClickOnText" to browser object
[0-0] 2024-05-24T06:55:12.751Z INFO @wdio/ocr-service: Adding browser command "ocrSetValue" to browser object
...............
[0-0] 2024-05-24T06:55:13.667Z INFO @wdio/ocr-service:getData: Using system installed version of Tesseract
[0-0] 2024-05-24T06:55:14.019Z INFO @wdio/ocr-service:getData: It took '0.351s' to process the image.
[0-0] 2024-05-24T06:55:14.019Z INFO @wdio/ocr-service:getData: The following text was found through OCR:
[0-0]
[0-0] IQ Docs API Blog Contribute Community Sponsor Next-gen browser and mobile automation Welcome! How can | help? i test framework for Node.js Get Started Why WebdriverI0? View on GitHub Watch on YouTube
[0-0] 2024-05-24T06:55:14.019Z INFO @wdio/ocr-service:getData: OCR Image with found text can be found here:
[0-0]
[0-0] .tmp/ocr/desktop-1716533713585.png
[0-0] 2024-05-24T06:55:14.019Z INFO @wdio/ocr-service:ocrGetElementPositionByText: We searched for the word "Get Started" and found one match "Started" with score "63.64
...............

インストール​

Typescriptサポート​

設定​

設定オプション​

contrast​

imagesFolder​

language​

ログ​