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:

Cypress

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

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

Playwright

Methods

click(): void

Simulates a click action on the button

• @returns void

Cypress

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

Playwright

forceClick(): void

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

• @returns void

Cypress

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

Playwright

doubleClick(): void

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

• @param {force} – true (optional)

• @returns void

Cypress

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

Playwright

rightClick(): void

Simulates a right-click action on the button.

• @returns void

Cypress

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

Playwright

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

Cypress

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

Playwright

clickCenter(): void

Simulates a click action at the center of the button.

• @returns void

Cypress

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

Playwright

clickAll(): void

Simulates a click action on all instances of the button.

• @returns void

Cypress

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

Playwright

clickFirst(): void

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

• @returns void

Cypress

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

Playwright

clickLast(): void

Simulates a click action on the last instance of the button

• @returns void

Cypress

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

Playwright

clickAndHold(): void

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

• @returns void

Cypress

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

Playwright

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

Cypress

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

Playwright

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

Cypress

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

Playwright

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

Cypress

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

Playwright

focusAndClick(): void

Focuses on the button and then simulates a click action

• @returns void

Cypress

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

Playwright

Assertions

assertText(text: string): void

Asserts that the button contains the specified text.

• @param text – The expected text content of the button.

• @returns void

Cypress

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

Playwright

assertColor(color: string): void

Asserts that the button has the expected color.

• @param color – The expected color of the button.

• @returns void

Cypress

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

Playwright

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

Cypress

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

Playwright

Scrolling Actions

scrollToElement(): void

Scrolls to the button element.

• @returns void

Cypress

oi.ui.button(this.btn_element).scrollToElement()

Playwright

Custom Events

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()).

// Generic pattern
element(locator): object

_{Ordino Custom Mode}

Using Ordino’s direct tool method reference:

// 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

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