How to create an reusable element similar to Selenium extend elements in Cypress.io?

Question

In Selenium, it's possible to extend elements. This makes it possible to have a set of reusable custom elements for testing.

For example, we can have a getText method added.

public static string GetText(this IWebDriver driver)
{
    return driver.FindElement(By.TagName("body")).Text;
}

And re-use it as follows:

myElement.getText();

This example is detailed here: http://www.vcskicks.com/selenium-extensions.php

Is there a way to replicate this behavior in Cypress.io? Or do we need to query and call the same methods to get the data?

Answer 1

You can accomplish this using simple functions. For example, you could move several functions into a utils.js.

export const getByText = (text) => cy.contains(text)

And then import those methods into your spec file.

import { getByText } from './utils'

it('finds the element', () => {
  getByText('Jane Lane')
})

You could alternatively create a custom command, but that's sometimes not necessary as noted in the best practices.