# ocrClickOnText

Click on an element based on the provided texts. The command will search for the provided text and try to find a match based on Fuzzy Logic from [Fuse.js](https://fusejs.io/). This means that if you might provide a selector with a typo, or the found text might not be a 100% match it will still try to give you back an element. See the [logs](#logs) below.

## Usage[​](#usage "Direct link to Usage")

```
await browser.ocrClickOnText({ text: "Start3d" });
```

## Output[​](#output "Direct link to Output")

### Logs[​](#logs "Direct link to Logs")

```
# Still finding a match even though we searched for "Start3d" and the found text was "Started"
[0-0] 2024-05-25T05:05:20.096Z INFO webdriver: COMMAND ocrClickOnText(<object>)
......................
[0-0] 2024-05-25T05:05:21.022Z INFO @wdio/ocr-service:ocrGetElementPositionByText: Multiple matches were found based on the word "Start3d". The match "Started" with score "85.71%" will be used.
```

### Image[​](#image "Direct link to Image")

You will find an image in your (default)[`imagesFolder`](/docs/ocr-testing/getting-started.md#imagesfolder) with a target to show you where the module has clicked.

![Process steps](/assets/images/ocr-click-on-text-target-2e82ea5eb99ee5c91dc780a79d6b4247.jpg)

## Options[​](#options "Direct link to Options")

### `text`[​](#text "Direct link to text")

* **Type:** `string`
* **Mandatory:** yes

The text you want to search for to click on.

#### Example[​](#example "Direct link to Example")

```
await browser.ocrClickOnText({ text: "WebdriverIO" });
```

### `clickDuration`[​](#clickduration "Direct link to clickduration")

* **Type:** `number`
* **Mandatory:** no
* **Default:** `500` milliseconds

This is the duration of the click. If you want you can also create a "long click" by increasing the time.

#### Example[​](#example-1 "Direct link to Example")

```
await browser.ocrClickOnText({
    text: "WebdriverIO",
    clickDuration: 3000, // This is 3 seconds
});
```

### `contrast`[​](#contrast "Direct link to contrast")

* **Type:** `number`
* **Mandatory:** no
* **Default:** `0.25`

The higher the contrast, the darker the image and vice versa. This can help to find text in an image. It accepts values between `-1` and `1`.

#### Example[​](#example-2 "Direct link to Example")

```
await browser.ocrClickOnText({
    text: "WebdriverIO",
    contrast: 0.5,
});
```

### `haystack`[​](#haystack "Direct link to haystack")

* **Type:** `number`
* **Mandatory:** `WebdriverIO.Element | ChainablePromiseElement | Rectangle`

This is the search area in the screen where the OCR needs to look for text. This can be an element or a rectangle containing `x`, `y`, `width` and `height`

#### Example[​](#example-3 "Direct link to Example")

```
await browser.ocrClickOnText({
    text: "WebdriverIO",
    haystack: $("elementSelector"),
});

// OR
await browser.ocrClickOnText({
    text: "WebdriverIO",
    haystack: await $("elementSelector"),
});

// OR
await browser.ocrClickOnText({
    text: "WebdriverIO",
    haystack: {
        x: 10,
        y: 50,
        width: 300,
        height: 75,
    },
});
```

### `language`[​](#language "Direct link to language")

* **Type:** `string`
* **Mandatory:** No
* **Default:** `eng`

The language that Tesseract will recognize. More info can be found [here](https://tesseract-ocr.github.io/tessdoc/Data-Files-in-different-versions) and the supported languages can be found [here](https://github.com/webdriverio/visual-testing/blob/main/packages/ocr-service/src/utils/constants.ts).

#### Example[​](#example-4 "Direct link to Example")

```
import { SUPPORTED_OCR_LANGUAGES } from "@wdio/ocr-service";
await browser.ocrClickOnText({
    text: "WebdriverIO",
    // Use Dutch as a language
    language: SUPPORTED_OCR_LANGUAGES.DUTCH,
});
```

### `relativePosition`[​](#relativeposition "Direct link to relativeposition")

* **Type:** `object`
* **Mandatory:** no

You can click on the screen relative to the matching element. This can be done based on relative pixels `above`, `right`, `below` or `left` from the matching element

note

The following combinations are allowed

* single properties
* `above` + `left` or `above` + `right`
* `below` + `left` or `below` + `right`

The following combinations are **NOT** allowed

* `above` plus `below`
* `left` plus `right`

#### `relativePosition.above`[​](#relativepositionabove "Direct link to relativepositionabove")

* **Type:** `number`
* **Mandatory:** no

Click x pixels `above` the matching element.

##### Example[​](#example-5 "Direct link to Example")

```
await browser.ocrClickOnText({
    text: "WebdriverIO",
    relativePosition: {
        above: 100,
    },
});
```

#### `relativePosition.right`[​](#relativepositionright "Direct link to relativepositionright")

* **Type:** `number`
* **Mandatory:** no

Click x pixels `right` from the matching element.

##### Example[​](#example-6 "Direct link to Example")

```
await browser.ocrClickOnText({
    text: "WebdriverIO",
    relativePosition: {
        right: 100,
    },
});
```

#### `relativePosition.below`[​](#relativepositionbelow "Direct link to relativepositionbelow")

* **Type:** `number`
* **Mandatory:** no

Click x pixels `below` the matching element.

##### Example[​](#example-7 "Direct link to Example")

```
await browser.ocrClickOnText({
    text: "WebdriverIO",
    relativePosition: {
        below: 100,
    },
});
```

#### `relativePosition.left`[​](#relativepositionleft "Direct link to relativepositionleft")

* **Type:** `number`
* **Mandatory:** no

Click x pixels `left` from the matching element.

##### Example[​](#example-8 "Direct link to Example")

```
await browser.ocrClickOnText({
    text: "WebdriverIO",
    relativePosition: {
        left: 100,
    },
});
```

### `fuzzyFindOptions`[​](#fuzzyfindoptions "Direct link to fuzzyfindoptions")

You can alter the fuzzy logic to find text with the following options. This might help find a better match

#### `fuzzyFindOptions.distance`[​](#fuzzyfindoptionsdistance "Direct link to fuzzyfindoptionsdistance")

* **Type:** `number`
* **Mandatory:** no
* **Default:** 100

Determines how close the match must be to the fuzzy location (specified by location). An exact letter match which is distance characters away from the fuzzy location would score as a complete mismatch. A distance of 0 requires the match to be at the exact location specified. A distance of 1000 would require a perfect match to be within 800 characters of the location to be found using a threshold of 0.8.

##### Example[​](#example-9 "Direct link to Example")

```
await browser.ocrClickOnText({
    text: "WebdriverIO",
    fuzzyFindOptions: {
        distance: 20,
    },
});
```

#### `fuzzyFindOptions.location`[​](#fuzzyfindoptionslocation "Direct link to fuzzyfindoptionslocation")

* **Type:** `number`
* **Mandatory:** no
* **Default:** 0

Determines approximately where in the text is the pattern expected to be found.

##### Example[​](#example-10 "Direct link to Example")

```
await browser.ocrClickOnText({
    text: "WebdriverIO",
    fuzzyFindOptions: {
        location: 20,
    },
});
```

#### `fuzzyFindOptions.threshold`[​](#fuzzyfindoptionsthreshold "Direct link to fuzzyfindoptionsthreshold")

* **Type:** `number`
* **Mandatory:** no
* **Default:** 0.6

At what point does the matching algorithm give up. A threshold of 0 requires a perfect match (of both letters and location), a threshold of 1.0 would match anything.

##### Example[​](#example-11 "Direct link to Example")

```
await browser.ocrClickOnText({
    text: "WebdriverIO",
    fuzzyFindOptions: {
        threshold: 0.8,
    },
});
```

#### `fuzzyFindOptions.isCaseSensitive`[​](#fuzzyfindoptionsiscasesensitive "Direct link to fuzzyfindoptionsiscasesensitive")

* **Type:** `boolean`
* **Mandatory:** no
* **Default:** false

Whether the search should be case sensitive.

##### Example[​](#example-12 "Direct link to Example")

```
await browser.ocrClickOnText({
    text: "WebdriverIO",
    fuzzyFindOptions: {
        isCaseSensitive: true,
    },
});
```

#### `fuzzyFindOptions.minMatchCharLength`[​](#fuzzyfindoptionsminmatchcharlength "Direct link to fuzzyfindoptionsminmatchcharlength")

* **Type:** `number`
* **Mandatory:** no
* **Default:** 2

Only the matches whose length exceeds this value will be returned. (For instance, if you want to ignore single character matches in the result, set it to 2)

##### Example[​](#example-13 "Direct link to Example")

```
await browser.ocrClickOnText({
    text: "WebdriverIO",
    fuzzyFindOptions: {
        minMatchCharLength: 5,
    },
});
```

#### `fuzzyFindOptions.findAllMatches`[​](#fuzzyfindoptionsfindallmatches "Direct link to fuzzyfindoptionsfindallmatches")

* **Type:** `number`
* **Mandatory:** no
* **Default:** false

When `true`, the matching function will continue to the end of a search pattern even if a perfect match has already been located in the string.

##### Example[​](#example-14 "Direct link to Example")

```
await browser.ocrClickOnText({
    text: "WebdriverIO",
    fuzzyFindOptions: {
        findAllMatches: 100,
    },
});
```