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

# Button

The Button class provides a simplified interface for handling button interactions in test automation. It supports essential operations such as clicking, asserting button states, and scrolling events.

### Usage : `button`

### 🧩 Code

The Button class is designed to interact with common button element

To insert a code block with syntax highlighting:

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

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

oi.ui.button(this.btn_element).click()
```

{% endtab %}

{% tab title="Playwright" %}

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

await oi.ui(this.page).button(this.btn_element).click()
```

{% endtab %}
{% endtabs %}

### Methods

**click(): void**

Simulates a click action on the button

* **@returns** `void`

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

```javascript
oi.ui.button(this.btn_element).click()
```

{% endtab %}

{% tab title="Playwright" %}

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

{% endtab %}
{% endtabs %}

**forceClick(): void**

Forces a click action on the button, bypassing any potential blockers.

* **@returns** `void`

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

```javascript
oi.ui.button(this.btn_element).forceClick()
```

{% endtab %}

{% tab title="Playwright" %}

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

{% endtab %}
{% endtabs %}

**doubleClick(): void**

Simulates a double-click action on the button. @param forceClick - true (optional)

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

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

```javascript
oi.ui.button(this.btn_element).doubleClick(true)
```

{% endtab %}

{% tab title="Playwright" %}

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

{% endtab %}
{% endtabs %}

**rightClick(): void**

Simulates a right-click action on the button.

* **@returns** `void`

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

```javascript
oi.ui.button(this.btn_element).rightClick(true)
```

{% endtab %}

{% tab title="Playwright" %}

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

{% endtab %}
{% endtabs %}

**clickAt(x: number, y: number): void**

Simulates a click action at the specified coordinates relative to the button.

* **@param** `x` – The x-coordinate.
* **@param** `y` – The y-coordinate.
* **@returns** `void`

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

```javascript
oi.ui.button(this.btn_element).clickAt(50,30,true)
```

{% endtab %}

{% tab title="Playwright" %}

```javascript
await oi.ui(this.page).button(this.element).clickAt(50,30,true)
```

{% endtab %}
{% endtabs %}

**clickCenter(): void**

Simulates a click action at the center of the button.

* **@returns** `void`

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

```javascript
oi.ui.button(this.btn_element).clickCenter(true)
```

{% endtab %}

{% tab title="Playwright" %}

```javascript
await oi.ui(this.page).button(this.element).clickCenter(true)
```

{% endtab %}
{% endtabs %}

**clickAll(): void**

Simulates a click action on all instances of the button.

* **@returns** `void`

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

```javascript
oi.ui.button(this.btn_element).clickAll(true)
```

{% endtab %}

{% tab title="Playwright" %}

```javascript
await oi.ui(this.page).button(this.element).clickAll(true)
```

{% endtab %}
{% endtabs %}

**clickFirst(): void**

Simulates a click action on the first instance of the button.

* **@returns** `void`

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

```javascript
oi.ui.button(this.btn_element).clickFirst(true)
```

{% endtab %}

{% tab title="Playwright" %}

```javascript
await oi.ui(this.page).button(this.element).clickFirst(true)
```

{% endtab %}
{% endtabs %}

**clickLast(): void**

Simulates a click action on the last instance of the button

* **@returns** `void`

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

```javascript
oi.ui.button(this.btn_element).clickLast(true)
```

{% endtab %}

{% tab title="Playwright" %}

```javascript
await oi.ui(this.page).button(this.element).clickLast(true)
```

{% endtab %}
{% endtabs %}

**clickAndHold(): void**

Simulates a click-and-hold action on the button.

* **@returns** `void`

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

```javascript
oi.ui.button(this.btn_element).clickAndHold()
```

{% endtab %}

{% tab title="Playwright" %}

```javascript
await oi.ui(this.page).button(this.element).clickAndHold()
```

{% endtab %}
{% endtabs %}

**clickByText(text: string): void**

Simulates a click action on the button identified by the specified text.

* **@param** `text` – The text to identify the button.
* **@returns** `void`

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

```javascript
oi.ui.button(this.btn_element).clickByText('save',true)
```

{% endtab %}

{% tab title="Playwright" %}

```javascript
await oi.ui(this.page).button(this.element).clickByText('save')
```

{% endtab %}
{% endtabs %}

**clickByIndex(index: number): void**

Simulates a click action on the button identified by the specified index.

* **@param** `index` – The index to identify the button.
* **@returns** `void`

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

```javascript
oi.ui.button(this.btn_element).clickByIndex(2,true)
```

{% endtab %}

{% tab title="Playwright" %}

```javascript
await oi.ui(this.page).button(this.element).clickByIndex(2,true)
```

{% endtab %}
{% endtabs %}

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

Simulates a click action on the button with an offset from its top-left corner.

* **@param** `x` – The x-coordinate offset.
* **@param** `y` – The y-coordinate offset.
* **@returns** `void`

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

```javascript
oi.ui.button(this.btn_element).clickWithOffset(1,2)
```

{% endtab %}

{% tab title="Playwright" %}

```javascript
await oi.ui(this.page).button(this.element).clickWithOffset(1,2)
```

{% endtab %}
{% endtabs %}

**focusAndClick(): void**

Focuses on the button and then simulates a click action

* **@returns** `void`

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

```javascript
oi.ui.button(this.btn_element).focusAndClick()
```

{% endtab %}

{% tab title="Playwright" %}

```javascript
await oi.ui(this.page).button(this.element).focusAndClick()
```

{% endtab %}
{% endtabs %}

### Assertions

**assertText(text: string): void**

Asserts that the button contains the specified text.

* **@param** `text` – The expected text content of the button.
* **@returns** `void`

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

```javascript
oi.ui.button(this.btn_element).assertText('')
```

{% endtab %}

{% tab title="Playwright" %}

```javascript
await oi.ui(this.page).button(this.element).assertText('')
```

{% endtab %}
{% endtabs %}

**assertColor(color: string): void**

Asserts that the button has the expected color.

* **@param** `color` – The expected color of the button.
* **@returns** `void`

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

```javascript
oi.ui.button(this.btn_element).assertColor('rgb(0, 123, 255)')
```

{% endtab %}

{% tab title="Playwright" %}

```javascript
await oi.ui(this.page).button(this.element).assertColor('rgb(0, 123, 255)')
```

{% endtab %}
{% endtabs %}

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

Asserts that the button has the specified CSS property with the given value.

* **@param** `property` – The CSS property to check.
* **@param** `value` – The expected value of the CSS property.
* **@returns** `void`

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

```javascript
oi.ui.button(this.btn_element).assertCssProperty('font-size', '16px')
```

{% endtab %}

{% tab title="Playwright" %}

```javascript
await oi.ui(this.page).button(this.element).assertCssProperty('font-size', '16px')
```

{% endtab %}
{% endtabs %}

### Scrolling Actions <a href="#scrolling-actions" id="scrolling-actions"></a>

**scrollToElement(): void**

Scrolls to the button element.

* **@returns** `void`

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

<pre class="language-javascript"><code class="lang-javascript"><strong>oi.ui.button(this.btn_element).scrollToElement()
</strong></code></pre>

{% endtab %}

{% tab title="Playwright" %}

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