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

# TextBox

### Usage : `textbox`

### 🧩 Code

The Textbox class is designed to interact with common textbox element

To insert a code block with syntax highlighting:

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

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

oi.ui.textbox(this.txt_element).enterText(text)
```

{% endtab %}

{% tab title="Playwright" %}

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

await oi.ui(this.page).textbox(this.txt_element).enterText(text)
```

{% endtab %}
{% endtabs %}

### Methods

**enterText(text: string): void**

Enters the specified text into the textbox.

* **@returns** `void`

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

```javascript
oi.ui.textbox(this.txt_element).enterText(text)
```

{% endtab %}

{% tab title="Playwright" %}

```javascript
await oi.ui(this.page).textbox(this.element).enterText(text)
```

{% endtab %}
{% endtabs %}

**clickAndType(text: string, forceClick:boolean): void**

Clicks on the textbox and types the given text.

* **@param** `text` – The text to type.
* **@returns** `void`

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

```javascript
oi.ui.textbox(this.txt_element).clickAndType(text)
```

{% endtab %}

{% tab title="Playwright" %}

```javascript
await oi.ui(this.page).textbox(this.element).clickAndType(text)
```

{% endtab %}
{% endtabs %}

**clearText(): void**

Clears the text from the textbox.

* **@returns** `void`

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

```javascript
oi.ui.textbox(this.txt_element).clearText()
```

{% endtab %}

{% tab title="Playwright" %}

```javascript
await oi.ui(this.page).textbox(this.element).clearText()
```

{% endtab %}
{% endtabs %}

**typeInAll(text: string): void**

Types the specified text in all instances of the textbox.

* **@param** `text` – The text to type.
* **@returns** `void`

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

```javascript
oi.ui.textbox(this.txt_element).typeInAll(text)
```

{% endtab %}

{% tab title="Playwright" %}

```javascript
await oi.ui(this.page).textbox(this.element).typeInAll(text)
```

{% endtab %}
{% endtabs %}

**clickAndTypeFirst(text: string, forceClick:boolean): void**

Clicks on the first instance of the textbox and types the given text.

* **@param** `text` – The text to type.
* **@returns** `void`

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

```javascript
oi.ui.textbox(this.txt_element).clickAndTypeFirst(text)
```

{% endtab %}

{% tab title="Playwright" %}

```javascript
await oi.ui(this.page).textbox(this.element).clickAndTypeFirst(text)
```

{% endtab %}
{% endtabs %}

**clickAndTypeLast(text: string, forceClick:boolean): void**

Clicks on the last instance of the textbox and types the given text.

* **@param** `text` – The text to type.
* **@returns** `void`

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

```javascript
oi.ui.textbox(this.txt_element).clickAndTypeLast(text)
```

{% endtab %}

{% tab title="Playwright" %}

```javascript
await oi.ui(this.page).textbox(this.element).clickAndTypeLast(text)
```

{% endtab %}
{% endtabs %}

**typeAndPressEnter(text: string): void**

Types the specified text and presses Enter.

* **@param** `text` – The text to type.
* **@returns** `void`

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

```javascript
oi.ui.textbox(this.txt_element).typeAndPressEnter(text)
```

{% endtab %}

{% tab title="Playwright" %}

```javascript
await oi.ui(this.page).textbox(this.element).typeAndPressEnter(text)
```

{% endtab %}
{% endtabs %}

**typeSlowly(text: string): void**

Types the specified text slowly.

* **@param** `text` – The text to type.
* **@returns** `void`

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

```javascript
oi.ui.textbox(this.txt_element).typeSlowly(text)
```

{% endtab %}

{% tab title="Playwright" %}

```javascript
await oi.ui(this.page).textbox(this.element).typeSlowly(text)
```

{% endtab %}
{% endtabs %}

**appendText(text: string): void**

Appends the specified text to the existing text in the textbox.

* **@param** `text` – The text to append.
* **@returns** `void`

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

```javascript
oi.ui.textbox(this.txt_element).appendText(text)
```

{% endtab %}

{% tab title="Playwright" %}

```javascript
await oi.ui(this.page).textbox(this.element).appendText(text)
```

{% endtab %}
{% endtabs %}

**clearAndType(text: string): void**

Clears the existing text and types the specified text.

* **@param** `text` – The text to type.
* **@returns** `void`

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

```javascript
oi.ui.textbox(this.txt_element).clearAndType(text)
```

{% endtab %}

{% tab title="Playwright" %}

```javascript
await oi.ui(this.page).textbox(this.element).clearAndType(text)
```

{% endtab %}
{% endtabs %}

### Assertions <a href="#assertions" id="assertions"></a>

**assertPlaceholder(text: string): void**

Asserts that the placeholder text of the textbox matches the specified text.

* **@param** `text` – The expected placeholder text.
* **@returns** `void`

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

```javascript
oi.ui.textbox(this.txt_element).assertPlaceholder(text)
```

{% endtab %}

{% tab title="Playwright" %}

```javascript
await oi.ui(this.page).textbox(this.element).assertPlaceholder(text)
```

{% endtab %}
{% endtabs %}

**assertMaxLength(length: number): void**

Asserts that the maximum length of the textbox is equal to the specified length.

* **@param** `length` – The expected maximum length.
* **@returns** `void`

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

```javascript
oi.ui.textbox(this.txt_element).assertMaxLength(length)
```

{% endtab %}

{% tab title="Playwright" %}

```javascript
await oi.ui(this.page).textbox(this.element).assertMaxLength(length)
```

{% endtab %}
{% endtabs %}

**assertIsEmpty(): void**

Asserts that the textbox is empty.

* **@returns** `void`

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

```javascript
oi.ui.textbox(this.txt_element).assertIsEmpty()
```

{% endtab %}

{% tab title="Playwright" %}

```javascript
await oi.ui(this.page).textbox(this.element).assertIsEmpty()
```

{% endtab %}
{% endtabs %}

**assertIsNotEmpty(): void**

Asserts that the textbox is not empty.

* **@returns** `void`

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

```javascript
oi.ui.textbox(this.txt_element).assertIsNotEmpty()
```

{% endtab %}

{% tab title="Playwright" %}

```javascript
await oi.ui(this.page).textbox(this.element).assertIsNotEmpty()
```

{% endtab %}
{% endtabs %}

**assertTextAlignment(alignment: string): void**

Asserts that the text alignment of the textbox matches the specified alignment.

* **@param** `alignment` – The expected text alignment.
* **@returns** `void`

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

```javascript
oi.ui.textbox(this.txt_element).assertTextAlignment(alignment)
```

{% endtab %}

{% tab title="Playwright" %}

```javascript
await oi.ui(this.page).textbox(this.element).assertTextAlignment(alignment)
```

{% endtab %}
{% endtabs %}

**assertCssProperty(property: string, value: string): void**

Asserts that the specified CSS property of the textbox matches the expected value.

* **@param** `property` – The CSS property to check.
* **@returns** `void`

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

```javascript
oi.ui.textbox(this.txt_element).assertCssProperty(property, value)
```

{% endtab %}

{% tab title="Playwright" %}

```javascript
await oi.ui(this.page).textbox(this.element).assertCssProperty(property, value)
```

{% endtab %}
{% endtabs %}

### Scrolling Actions <a href="#assertions" id="assertions"></a>

**scrollToElement(): void**

Scrolls to the textbox element.

* **@returns** `void`

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

```javascript
oi.ui.textbox(this.btn_element).scrollToElement()
```

{% endtab %}

{% tab title="Playwright" %}

```javascript
await oi.ui(this.page).textbox(this.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., `.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.