はじめに

インストール

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

npm

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

Yarn

yarn add @wdio/ocr-service --dev

pnpm

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