@ordino.ai/ordino-cy-element-core

A Cypress element and behavior library for e2e testing. It provides typed page-object style wrappers for common UI elements (buttons, inputs, dropdowns, tables, etc.) with built-in support for CSS selectors and XPath. Locator strategy is inferred automatically from the selector string.

Installation

npm install @ordino.ai/ordino-cy-element-core

Peer dependencies

Install these in your Cypress project if you use the corresponding features:

• Cypress (required): npm install cypress
• XPath (for XPath locators): npm install cypress-xpath
• File upload (for FileInput): npm install cypress-file-upload

Setup

In your Cypress support file (e.g. cypress/support/e2e.ts), ensure the following are loaded before your tests:

import 'cypress-xpath';      // if you use XPath locators
import 'cypress-file-upload'; // if you use FileInput

Import and use the element classes in your spec or page object files:

import { Button, TextBox, BasePage } from '@ordino.ai/ordino-cy-element-core';

Locators

• CSS selectors: use any string that is not detected as XPath (e.g. '#submit', 'button.primary', '[data-testid="login"]'). The library uses cy.get(locator).
• XPath: strings that look like XPath (e.g. starting with //, /, or containing axes like contains(, text(, following-sibling::) use cy.xpath(locator).

No need to pass a separate “strategy”; the package detects it from the locator string.

Exports

| Export | Description | |-------------|-------------| | BasePage | Base class for page objects; override on() for “stay on current page” logic. | | Browser | Page-level actions: visit, reload, back/forward, URL/title assertions, cookies, viewport, screenshots, iframes, etc. No locator. | | Keyboard | Key actions on the focused element: type, Enter, Tab, arrows, copy/paste, etc. No locator. | | Button | Click actions (click, doubleClick, rightClick, forceClick, clickByText, clickByIndex, etc.) and assertions (text, color, CSS). | | TextBox | Type and clear (enterText, clearAndType, typeAndPressEnter, appendText, etc.) and assertions (placeholder, value, empty, maxLength). | | Label | Click, scroll, and assertions (text, visibility, etc.). | | Link | Same click/scroll/assert as link-like elements. | | CheckBox | check / uncheck / toggle, by index or text; assertions (checked, disabled, indeterminate, counts). | | RadioButton | Select by value/text/index; assertions (selected, value). | | Dropdown | selectByIndex / selectByText / selectByValue, filter options, assert selected value/text, option count. | | Div | Click, scroll, and assertions (text, visibility, CSS). | | Image | Click, hover, assert loaded/broken, dimensions. | | Scroller | scrollToTop, scrollToBottom, scrollToLeft, scrollToRight (on the located scroll container). | | Toast | assertToast(text), click, forceClick. | | Table | getCellValue, getRowText, getRowCount, getColumnCount; assertTableData, clickTableCell, clickTableRow, clickTableHeader. | | DatePicker| openDatePicker, selectDate / selectDateByDay / selectDateByMonth / selectDateByYear, assert selected date. | | FileInput | selectFile(path), uploadMultipleFiles(paths), clearFileInput, assert fileName / visible / disabled. | | Element | Generic element: isEnabled, isDisabled, isDisplayed, isFocused. |

Usage examples

Button and TextBox

import { Button, TextBox } from '@ordino.ai/ordino-cy-element-core';

const loginButton = new Button('button[type="submit"]');
const emailInput = new TextBox('#email');

emailInput.enterText('[email protected]');
loginButton.click();
loginButton.assertText('Sign in');

XPath locators

const submitBtn = new Button('//button[contains(@class,"submit")]');
submitBtn.click();

Dropdown and CheckBox

import { Dropdown, CheckBox } from '@ordino.ai/ordino-cy-element-core';

const countrySelect = new Dropdown('#country');
countrySelect.selectByText('United States');
countrySelect.assertSelectedText('United States');

const termsCheckbox = new CheckBox('#terms');
termsCheckbox.check();
termsCheckbox.isChecked();

Table

import { Table } from '@ordino.ai/ordino-cy-element-core';

const grid = new Table('table.data-grid');
grid.assertTableHasHeader();
grid.clickTableCell(1, 2);
grid.getCellValue(0, 0); // chain with Cypress if needed

FileInput

Requires cypress-file-upload and support file import. Use a path relative to your fixtures or project.

import { FileInput } from '@ordino.ai/ordino-cy-element-core';

const fileInput = new FileInput('input[type="file"]');
fileInput.selectFile('fixtures/sample.pdf');
fileInput.assertFileName('sample.pdf');

Browser and Keyboard

import { Browser, Keyboard, TextBox } from '@ordino.ai/ordino-cy-element-core';

const browser = new Browser();
browser.navigateToUrl('https://example.com');
browser.assertPageTitle('Example Domain');

const search = new TextBox('#search');
search.click();
const keyboard = new Keyboard();
keyboard.typeText('query');
keyboard.pressEnter();

BasePage (page object)

import { BasePage, Button, TextBox } from '@ordino.ai/ordino-cy-element-core';

class LoginPage extends BasePage {
  private username = new TextBox('#username');
  private password = new TextBox('#password');
  private submit = new Button('button[type="submit"]');

  login(user: string, pass: string) {
    this.username.enterText(user);
    this.password.enterText(pass);
    this.submit.click();
  }
}

API overview (by element)

• Button / Link / Div / Image / Toast: click(), forceClick(), doubleClick(), rightClick(), clickByText(), clickByIndex(), scrollToElement(), and various assertions (e.g. assertText(), assertColor(), assertCssProperty()).
• TextBox: enterText(), clearText(), clearAndType(), typeAndPressEnter(), appendText(), clickAndType(), assertPlaceholder(), assertIsEmpty(), assertMaxLength(), etc.
• CheckBox / RadioButton: check(), uncheck(), toggleCheck(), checkByText() / uncheckByText(), isChecked(), isNotChecked(), assertCheckedCount(), etc.
• Dropdown: selectByIndex(), selectByText(), selectByValue(), openDropdown(), closeDropdown(), assertSelectedText(), assertOptionCount(), etc.
• Table: getCellValue(), getRowText(), getRowCount(), assertTableData(), clickTableCell(), clickTableRow(), clickTableHeader(), etc.
• DatePicker: openDatePicker(), selectDate(), selectDateByDay() / selectDateByMonth() / selectDateByYear(), assertSelectedDate().
• FileInput: selectFile(), uploadMultipleFiles(), clearFileInput(), assertFileName(), assertFileInputExists().
• Browser: navigateToUrl(), refreshPage(), goBack(), goForward(), getCurrentUrl(), assertUrl(), assertPageTitle(), setWindowSize(), switchToFrame(), takeScreenshot(), and more.
• Keyboard: typeText(), pressEnter(), pressTab(), pressArrow(), simulateCopy(), simulatePaste(), etc., on the focused element.

Methods that accept an optional forceClick or forceSelect (e.g. click(forceClick), selectByText(text, forceSelect)) allow forcing the action when the element is covered or not “actionable” in Cypress’s terms.

License

GPL-3.0