> 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/div.md).

# Div

The Div class provides a clean interface for interacting with generic container elements such as \<div> blocks. It includes methods for selection, assertions, and scrolling into view.

### Usage : `div`

### 🧩 Code

The Div class is designed to interact with common div element

To insert a code block with syntax highlighting:

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

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

oi.ui.div(this.div_element).click()
```

{% endtab %}

{% tab title="Playwright" %}

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

await oi.ui(this.page).div(this.div_element).click()
```

{% endtab %}
{% endtabs %}

### Methods

**click(): void**\
Simulates a click on the div element.

* **@returns** `void`

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

```javascript
oi.ui.div(this.element).click()
```

{% endtab %}

{% tab title="Playwright" %}

```javascript
await oi.ui(this.page).div(this.element).click()
```

{% endtab %}
{% endtabs %}

**forceClick(): void**\
Forces a click on the div element, bypassing any potential blockers.

* **@returns** `void`

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

```javascript
oi.ui.div(this.element).forceClick()
```

{% endtab %}

{% tab title="Playwright" %}

```javascript
await oi.ui(this.page).div(this.element).forceClick()
```

{% endtab %}
{% endtabs %}

**doubleClick(forceClick: boolean): void**\
Simulates a double-click on the div element.

* **@param** `{force}` – true (optional)
* **@returns** `void`

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

```javascript
oi.ui.div(this.element).doubleClick(true)
```

{% endtab %}

{% tab title="Playwright" %}

```javascript
await oi.ui(this.page).div(this.element).doubleClick(true)
```

{% endtab %}
{% endtabs %}

**rightClick(): void**\
Simulates a right-click on the div element.

* **@param** `{force}` – true (optional)
* **@returns** `void`

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

```javascript
oi.ui.div(this.element).rightClick(true)
```

{% endtab %}

{% tab title="Playwright" %}

```javascript
await oi.ui(this.page).div(this.element).rightClick(true)
```

{% endtab %}
{% endtabs %}

**clickDivWithCoordinates(x: number, y: number,forceClick:boolean): void**\
Simulates a click on the div element at the specified coordinates.

* **@param** `{x}` – The x-coordinate for the click.
* **@param** `{y}` – The y-coordinate for the click.
* **@param** `{force}` – { force: true } optional
* **@returns** `void`

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

```javascript
oi.ui.div(this.element).clickDivWithCoordinates(1,2,true)
```

{% endtab %}

{% tab title="Playwright" %}

```javascript
await oi.ui(this.page).div(this.element).clickDivWithCoordinates(1,2,true)
```

{% endtab %}
{% endtabs %}

**centerClick(forceClick: boolean): void**\
Simulates a click on the center of the div element.

* **@param** `{force}` – true (optional)
* **@returns** `void`

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

```javascript
oi.ui.div(this.element).centerClick(true)
```

{% endtab %}

{% tab title="Playwright" %}

```javascript
await oi.ui(this.page).div(this.element).centerClick(true)
```

{% endtab %}
{% endtabs %}

**multiElementClick(forceClick: boolean): void**\
Simulates a click on multiple div elements.

* **@param** `{force}` – true (optional)
* **@returns** `void`

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

```javascript
oi.ui.div(this.element).multiElementClick(true)
```

{% endtab %}

{% tab title="Playwright" %}

```javascript
await oi.ui(this.page).div(this.element).multiElementClick(true)
```

{% endtab %}
{% endtabs %}

**firstElementClick(forceClick: boolean): void**\
Simulates a click on the first div element in a collection.

* **@param** `{force}` – true (optional)
* **@returns** `void`

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

```javascript
oi.ui.div(this.element).firstElementClick(true)
```

{% endtab %}

{% tab title="Playwright" %}

```javascript
await oi.ui(this.page).div(this.element).firstElementClick(true)
```

{% endtab %}
{% endtabs %}

**lastElementClick(forceClick: boolean): void**\
Simulates a click on the last div element in a collection

* **@param** `{force}` – true (optional)
* **@returns** `void`

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

```javascript
oi.ui.div(this.element).lastElementClick(true)
```

{% endtab %}

{% tab title="Playwright" %}

```javascript
await oi.ui(this.page).div(this.element).lastElementClick(true)
```

{% endtab %}
{% endtabs %}

**getDivText(): void**\
Retrieves the text content of the div element.

* **@returns** `void`

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

```javascript
oi.ui.div(this.element).getDivText()
```

{% endtab %}

{% tab title="Playwright" %}

```javascript
await oi.ui(this.page).div(this.element).getDivText()
```

{% endtab %}
{% endtabs %}

### Assertions

**isEnabled(): void**\
Asserts that the div element is enabled

* **@returns** `true`if the div is enable, otherwise false.

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

```javascript
oi.ui.div(this.element).isEnabled()
```

{% endtab %}

{% tab title="Playwright" %}

```javascript
await oi.ui(this.page).div(this.element).isEnabled()
```

{% endtab %}
{% endtabs %}

**isDisabled(): void**\
Asserts that the div element is disabled

* **@returns** `true`if the div is enable, otherwise false.

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

```javascript
oi.ui.div(this.element).isDisabled()
```

{% endtab %}

{% tab title="Playwright" %}

```javascript
await oi.ui(this.page).div(this.element).isDisabled()
```

{% endtab %}
{% endtabs %}

**isDisplayed(): void**\
Asserts that the div element is displayed

* **@returns** `true`if the div is enable, otherwise false.

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

```javascript
oi.ui.div(this.element).isDisplayed()
```

{% endtab %}

{% tab title="Playwright" %}

```javascript
await oi.ui(this.page).div(this.element).isDisplayed()
```

{% endtab %}
{% endtabs %}

**isFocused(): void**\
Asserts that the div element is focused

* **@returns** `true`if the div is enable, otherwise false.

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

```javascript
oi.ui.div(this.element).isFocused()
```

{% endtab %}

{% tab title="Playwright" %}

```javascript
await oi.ui(this.page).div(this.element).isFocused()
```

{% endtab %}
{% endtabs %}

**assertDivIsVisible(): boolean**\
Asserts that the div element is visible.

* **@returns** `true`if the div is visible, otherwise false.

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

```javascript
oi.ui.div(this.element).asseertDivIsVisible()
```

{% endtab %}

{% tab title="Playwright" %}

```javascript
await oi.ui(this.page).div(this.element).asseertDivIsVisible()
```

{% endtab %}
{% endtabs %}

**assertDivIsNotVisible(): boolean**\
Asserts that the div element is not visible.

* **@returns** `true`if the div is visible, otherwise false.

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

```javascript
oi.ui.div(this.element).assertDivIsNotVisible()
```

{% endtab %}

{% tab title="Playwright" %}

```javascript
await oi.ui(this.page).div(this.element).assertDivIsNotVisible()
```

{% endtab %}
{% endtabs %}

**assertDivIsEmpty(): boolean**\
Asserts that the div element is empty.

* **@returns** `true`if the div is visible, otherwise false.

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

```javascript
oi.ui.div(this.element).assertDivIsEmpty()
```

{% endtab %}

{% tab title="Playwright" %}

```javascript
await oi.ui(this.page).div(this.element).assertDivIsEmpty()
```

{% endtab %}
{% endtabs %}

### Scrolling

**scrollUntill(): void**\
Scrolls until the div element is in view.

* **@returns** `void`

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

```javascript
oi.ui.div(this.element).scrollUntill()
```

{% endtab %}

{% tab title="Playwright" %}

```javascript
await oi.ui(this.page).div(this.element).scrollUntill()
```

{% 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., `.click()`, `.type()`).

```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').click()
```

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="password"]').type('secret')

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

***

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