> For the complete documentation index, see [llms.txt](https://ordino-ai.gitbook.io/ordino-ai/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ordino-ai.gitbook.io/ordino-ai/sdk-reference/components/checkbox.md).

# CheckBox

### Usage : `checkBox`

### 🧩 Code

The CheckBox class is designed to interact with common check-box element

To insert a code block with syntax highlighting:

{% tabs %}
{% tab title="Cypress" %}

```javascript
import { oi } from "@ordino.ai/spartify-engine";

oi.ui.checkbox(this.cbx_element).check(true)
```

{% endtab %}

{% tab title="Playwright" %}

```javascript
import { oi } from "@ordino.ai/spartify-engine";

await oi.ui(this.page).checkbox(this.element).check(true)
```

{% endtab %}
{% endtabs %}

### Methods

**check(forceClick?: boolean): void**

Checks the checkbox.

**@returns** `void`

{% tabs %}
{% tab title="Cypress" %}

```javascript
oi.ui.checkbox(this.cbx_element).check(true)
```

{% endtab %}

{% tab title="Playwright" %}

```javascript
await oi.ui(this.page).checkbox(this.cbx_element).check(true)
```

{% endtab %}
{% endtabs %}

**uncheck(forceClick?: boolean): void**

Unchecks the checkbox.

**@returns** `void`

{% tabs %}
{% tab title="Cypress" %}

```javascript
oi.ui.checkbox(this.cbx_element).uncheck(true)
```

{% endtab %}

{% tab title="Playwright" %}

```javascript
await oi.ui(this.page).checkbox(this.cbx_element).uncheck(true)
```

{% endtab %}
{% endtabs %}

**toggleCheck(forceClick?: boolean): void**

Toggles the checkbox state.

**@returns** `void`

{% tabs %}
{% tab title="Cypress" %}

```javascript
oi.ui.checkbox(this.cbx_element).toggleCheck(true)
```

{% endtab %}

{% tab title="Playwright" %}

```javascript
await oi.ui(this.page).checkbox(this.cbx_element).toggleCheck(true)
```

{% endtab %}
{% endtabs %}

**checkAll(forceClick?: boolean): void**

Checks all checkboxes.

**@returns** `void`

{% tabs %}
{% tab title="Cypress" %}

```javascript
oi.ui.checkbox(this.cbx_element).checkAll(true)
```

{% endtab %}

{% tab title="Playwright" %}

```javascript
await oi.ui(this.page).checkbox(this.cbx_element).checkAll(true)
```

{% endtab %}
{% endtabs %}

**uncheckAll(forceClick?: boolean): void**

Unchecks all checkboxes.

**@returns** `void`

{% tabs %}
{% tab title="Cypress" %}

```javascript
oi.ui.checkbox(this.cbx_element).uncheckAll(true)
```

{% endtab %}

{% tab title="Playwright" %}

```javascript
await oi.ui(this.page).checkbox(this.element).uncheckAll(true)
```

{% endtab %}
{% endtabs %}

**checkByIndex(index: number): void**

Checks the checkbox at the specified index.\
@param index - the index of the checkbox to check.

**@returns** `void`

{% tabs %}
{% tab title="Cypress" %}

```javascript
oi.ui.checkbox(this.cbx_element).checkByIndex(2, true)
```

{% endtab %}

{% tab title="Playwright" %}

```javascript
await oi.ui(this.page).checkbox(this.cbx_element).checkByIndex(2,true)
```

{% endtab %}
{% endtabs %}

**uncheckByIndex(index: number): void**

Unchecks the checkbox at the specified index.\
@param index - the index of the checkbox to uncheck.

**@returns** `void`

{% tabs %}
{% tab title="Cypress" %}

```javascript
oi.ui.checkbox(this.cbx_element).uncheckByIndex(2, true)
```

{% endtab %}

{% tab title="Playwright" %}

```javascript
await oi.ui(this.page).checkbox(this.cbx_element).uncheckByIndex(2,true)
```

{% endtab %}
{% endtabs %}

**checkByText(text: string): void**

Checks the checkbox with the specified text.\
@param text - The text of the checkbox to check.

**@returns** `void`

{% tabs %}
{% tab title="Cypress" %}

```javascript
oi.ui.checkbox(this.cbx_element).checkByText('test',true)
```

{% endtab %}

{% tab title="Playwright" %}

```javascript
await oi.ui(this.page).checkbox(this.cbx_element).checkByText('test',true)
```

{% endtab %}
{% endtabs %}

**uncheckByText(text: string): void**

Unchecks the checkbox with the specified text.\
@param text - the text of the checkbox to uncheck.

**@returns** `void`

{% tabs %}
{% tab title="Cypress" %}

```javascript
oi.ui.checkbox(this.cbx_element).uncheckByText('test',true)
```

{% endtab %}

{% tab title="Playwright" %}

```javascript
await oi.ui(this.page).checkbox(this.cbx_element).uncheckByText('test',true)
```

{% endtab %}
{% endtabs %}

**clickWithOffset(x: number,  y: number, forceClick:boolean): void**

Clicks the checkbox with an offset.\
@param x - The x offset.\
@param y - The y offset

**@returns** `void`

{% tabs %}
{% tab title="Cypress" %}

```javascript
oi.ui.checkbox(this.cbx_element).clickWithOffset(1,2,true)
```

{% endtab %}

{% tab title="Playwright" %}

```javascript
await oi.ui(this.page).checkbox(this.cbx_element).clickWithOffset(1,2,true)
```

{% endtab %}
{% endtabs %}

### Assertions

**isChecked(): void**

Asserts that the checkbox is checked.

**@returns** `void`

{% tabs %}
{% tab title="Cypress" %}

```javascript
oi.ui.checkbox(this.cbx_element).isChecked()
```

{% endtab %}

{% tab title="Playwright" %}

```javascript
await oi.ui(this.page).checkbox(this.cbx_element).isChecked()
```

{% endtab %}
{% endtabs %}

**isNotChecked(): void**

Asserts that the checkbox is not checked

**@returns** `void`

{% tabs %}
{% tab title="Cypress" %}

```javascript
oi.ui.checkbox(this.cbx_element).isNotChecked()
```

{% endtab %}

{% tab title="Playwright" %}

```javascript
await oi.ui(this.page).checkbox(this.cbx_element).isNotChecked()
```

{% endtab %}
{% endtabs %}

**assertIsIndeterminate(): void**

Asserts that the checkbox is in an indeterminate state.

**@returns** `void`

{% tabs %}
{% tab title="Cypress" %}

```javascript
oi.ui.checkbox(this.cbx_element).assertIsIndeterminate()
```

{% endtab %}

{% tab title="Playwright" %}

```javascript
await oi.ui(this.page).checkbox(this.cbx_element).assertIsIndeterminate()
```

{% endtab %}
{% endtabs %}

**assertCheckedCount(count: number): void**

Asserts that the number of checked checkboxes matches the specified count.\
@param count - the expected number of checked checkboxes.

**@returns** `void`

{% tabs %}
{% tab title="Cypress" %}

```javascript
oi.ui.checkbox(this.cbx_element).assertCheckedCount(1)
```

{% endtab %}

{% tab title="Playwright" %}

```javascript
await oi.ui(this.page).checkbox(this.cbx_element).assertCheckedCount(2)
```

{% endtab %}
{% endtabs %}

**assertUncheckedCount(count: number): void**

Asserts that the number of unchecked checkboxes matches the specified count.\
@param count - the expected number of unchecked checkboxes.

**@returns** `void`

{% tabs %}
{% tab title="Cypress" %}

```javascript
oi.ui.checkbox(this.cbx_element).assertUncheckedCount(2)
```

{% endtab %}

{% tab title="Playwright" %}

```javascript
await oi.ui(this.page).checkbox(this.cbx_element).assertUncheckedCount(2)
```

{% endtab %}
{% endtabs %}

**assertIsDisabled(): void**

Asserts that the checkbox is disabled.

**@returns** `void`

{% tabs %}
{% tab title="Cypress" %}

```javascript
oi.ui.checkbox(this.cbx_element).assertIsDisabled()
```

{% endtab %}

{% tab title="Playwright" %}

```javascript
await oi.ui(this.page).checkbox(this.cbx_element).assertIsDisabled()
```

{% endtab %}
{% endtabs %}

**assertIsEnabled(): void**

Asserts that the checkbox is enabled.

**@returns** `void`

{% tabs %}
{% tab title="Cypress" %}

```javascript
oi.ui.checkbox(this.cbx_element).assertIsEnabled()
```

{% endtab %}

{% tab title="Playwright" %}

```javascript
await oi.ui(this.page).checkbox(this.cbx_element).assertIsEnabled()
```

{% endtab %}
{% endtabs %}

**isContained(text: string): void**

Asserts that the checkbox contains the specified text.\
@param text - the text to check for containment.

**@returns** `void`

{% tabs %}
{% tab title="Cypress" %}

```javascript
oi.ui.checkbox(this.cbx_element).isContained('test')
```

{% endtab %}

{% tab title="Playwright" %}

```javascript
await oi.ui(this.page).checkbox(this.cbx_element).isContained('test')
```

{% endtab %}
{% endtabs %}

**isEqual(text: string): void**

Asserts that the checkbox text is equal to the specified text.

**@returns** `void`

{% tabs %}
{% tab title="Cypress" %}

```javascript
oi.ui.checkbox(this.cbx_element).isEqual('test')
```

{% endtab %}

{% tab title="Playwright" %}

```javascript
await oi.ui(this.page).checkbox(this.cbx_element).isEqual('test')
```

{% endtab %}
{% endtabs %}

**isNotEqual(text: string): void**

Asserts that the checkbox text is not equal to the specified text.\
@param text - the text to compare.

**@returns** `void`

{% tabs %}
{% tab title="Cypress" %}

```javascript
oi.ui.checkbox(this.cbx_element).isNotEqual('test')
```

{% endtab %}

{% tab title="Playwright" %}

```javascript
await oi.ui(this.page).checkbox(this.cbx_element).isNotEqual('test')
```

{% endtab %}
{% endtabs %}

### Scrolling

**scrollToElement(): void**\
Scrolls to the checkbox element.

**@returns** `void`

{% tabs %}
{% tab title="Cypress" %}

```javascript
oi.ui.checkbox(this.cbx_element).scrollToElement()
```

{% endtab %}

{% tab title="Playwright" %}

```javascript
await oi.ui(this.page).checkbox(this.cbx_element).scrollToElement()
```

{% endtab %}
{% endtabs %}

### Custom Events <a href="#scrolling-actions" id="scrolling-actions"></a>

Ordino allows you to build **custom actions** or **user journeys** by directly interacting with the underlying tool’s native methods and actions.

This approach gives you full control, bypassing Ordino’s abstraction layer, and ensures you can leverage **tool-specific capabilities** as needed.

* `locator` → The element locator (e.g., XPath, CSS selector, or tool-specific reference).
* Returns → A tool element object on which you can invoke native actions (e.g., `.check()`, `.uncheck()`).

```javascript
// Generic pattern
element(locator): object
```

### <sub>Ordino Custom Mode</sub>

Using Ordino’s direct tool method reference:

```javascript
// Ordino direct-to-tool approach
oi.ui.element('@xpath').check()
```

Here, Ordino will call the Cypress (or other tool) element object directly, rather than going through Ordino’s wrapper.

\
Building User Journeys

By chaining multiple `oi.ui.element()` calls, you can construct full user journeys while still working with **native tool methods**.

#### Example: Login Flow

```javascript
// Enter username
oi.ui.element('//input[@id="username"]').type('testuser')

// Enter password
oi.ui.element('//input[@id="agreed"]').check({ force: true })

// Click login button
oi.ui.element('(//*[contains(text(),"Login")])[1]').check()
```

***

### Key Notes

* Use this mode when you need **maximum control** over the test framework.
* This does not abstract or transform the call – it **executes directly on the tool object** (e.g., Cypress, Playwright, etc.).
* Perfect for **custom journeys, advanced locators, or tool-specific actions** not exposed by Ordino’s higher-level API.