Class CypressHelper

Get stub as Cypress.Chainable

Example

const serviceMock : Service = helper.given.stubbedInstance(Service);
helper.get.assertableStub(serviceMock.function).should('have.been.called'));

@deprecated The method should not be used anymore, use `then` instead
```ts
then(serviceMock.function).shouldHaveBeenCalled();
Copy

Get one or more DOM elements by selector.

Example

Get an element with shape="filter-grid"

<clr-icon shape="filter-grid"></clr-icon>
helper.get.bySelector("filter-grid", "shape")
Copy

Get the current URL of the page that is currently active.

Get one or more DOM elements by selector. The querying behavior of this command matches exactly how $(…) works in jQuery. *** Note! Using this method may lead to flakey tests! You should use get.elementByTestId ***

Example

get.element('.list>li', 3)    // Yield the <li>'s in <.list>
get.element('ul li:first')
get.element('.dropdown-menu')
Copy

Get one or more DOM elements by attribute.

Example

Get an element with shape="filter-grid"

<clr-icon shape="filter-grid"></clr-icon>
helper.get.byAttribute("shape", "filter-grid")
Copy

Get one or more DOM elements by selector. Same as bySelector

Example

Get an element with shape="filter-grid"

<clr-icon shape="filter-grid"></clr-icon>
helper.get.elementBySelector("filter-grid", "shape")
Copy

Get A DOM element at a specific index from elements.

Example

helper.when.dragAndDrop(
  helper.get.elementByTestId('selected-item', 2),
  helper.get.elementByTestId('available-items')
Copy

Get the DOM element containing the text. DOM elements can contain more than the desired text and still match. Additionally, Cypress prefers some DOM elements over the deepest element found. *** Note! Using this method may lead to flakey tests! You should use get.elementByTestId ***

Example

then(helper.get.elementByText("Avamar")).shouldExist();
Copy

Example

then(helper.get.elementsAttribute('avatar-picture', 'style')).shouldInclude('background-image: url("assets/avatar/def-user-male.png")')
Copy

Returns element's computed style, including pseudo elements

Example

helper.get.elementsComputedStyle('element-test-id', 0, ':before')
Copy

Get element's property value

Example

get.elementsProperty("image", "height")
Copy

Returns element's style attribute

Example

get.elementsStyleAttribute("button-data-hook", "background-color")
Copy

Example

then(helper.get.elementsText("parent-job-name", 3)).shouldInclude("Job 3 Name")
Copy

Returns specific environment variable or undefined

Example

// Keeping password in cypress.config file

e2e: {
 env: {
   password: "Changeme@1",
 }
}
Copy

// using password during test

helper.get.env("password");
Copy

Get fixture

Example

 given.fixture("user.json", "user");
 then(
   get.fixture("user").shouldDeepNestedInclude({
   name: "Jane Doe",
   id: "1234",
   nested: {
    attr1: "something",
    attr2: "the other thing"
   }
 })
);
Copy

Get the element currently focused in the document.

Get value of input element

Example

then(helper.get.inputValue('credentials-password')).shouldEqual("initial password");
Copy

Get A DOM element at a specific index from elements.

Example

// Get the 3rd checkbox

helper.get.nthBySelector("checkbox", 3, "type")
Copy

Get number of elements with a specific dataTestID

Example

 then(helper.get.numberOfElements("migrated-vcenter")).shouldEqual(2);
Copy

Get intercepted request's body If a JSON Content-Type was used and the body was valid JSON, this will be an object. If the body was binary content, this will be a buffer.

Get intercepted request's header

Get intercepted request's query param

Get intercepted request's url

Get intercepted response's body If a JSON Content-Type was used and the body was valid JSON, this will be an object. If the body was binary content, this will be a buffer.

Get intercepted response's header

Get spy by alias

Get spy by function name alias

Get stub by alias

Get the window object of the page that is currently active.

Example

helper.get.window().then((win) => { win.localStorage.getItem("key")}
Copy

Load a fixture

Example

let { given, when, get } = new CypressHelper();
it("should get fixture", () => {
 given.fixture("user.json", "user");
 then(get.fixture("user")).shouldDeepNestedInclude({
   name: "Jane Doe",
   id: "1234",
   nested: {
     attr1: "something",
     attr2: "the other thing"
   }
 });
});
Copy

Use intercept() to intercept HTTP requests and responses

Example

helper.given.intercept("/streets/sprite.png", "streetSprite");
Copy

Use interceptAndMockResponse to stub and intercept HTTP requests and responses.

Example

// adds token to response header

helper.given.interceptAndMockResponse({
  url: '** /sysmgmt/2015/bmc/session',
  response: {
    headers:{
       'XSRF-Token': 'token',
    },
  },
  alias: 'login'
})
Copy

Example

// mocks response to login request

helper.given.interceptAndMockResponse({
  method: "POST",
  url: "** /login",
  alias: "login",
  response : {
    token: 'token'
  }
})
Copy

Example

// mocks network error

helper.given.interceptAndMockResponse({
  method: "POST",
  url: "** /avamars",
  alias: "avamar",
  response : {
    forceNetworkError: true
  }
})
Copy

Example

// mocks missing image

helper.given.interceptAndMockResponse({
  method: "POST",
  url: "** /image.png",
  alias: "image",
  response: { headers: 404 }
})
Copy

Example

// using a fixture

 helper.given.interceptAndMockResponse({
  url: "** /shellygo/whatever**",
  response: { fixture: "user.json" },
  alias: "whatever"
});
Copy

Returns a new spy function, and creates an alias for the newly created spy

Spy on a method and create an alias for the spy

Example

given.spyOnObject(window, "alert");
alert("whatever");
then(helper.get.spyFromFunction(window.alert)).shouldHaveBeenCalledWith("whatever");
// Or
then(helper.get.spy("alert")).shouldHaveBeenCalledTimes(1);
Copy

Example

given.spyOnObject(serviceMock, "functionName");
serviceMock.functionName();
then(helper.get.spyFromFunction(serviceMock.functionName)).shouldHaveBeenCalledTimes(1);
Copy

Replace a function, record its usage and control its behavior.

Example

given.stub("alias");
then(get.spy("alias")).shouldHaveBeenCalled();
Copy

Stub an object's method and create an alias for the stub

Example

//stubbing a service method
 helper.given.stubObjectMethod(serviceMock, "functionName").returns(3);

//stubbing setters and getters
 helper.given.stubObjectMethod(serviceMock, "count").get(() => 3).set(() => {});
Copy

Creates a new object with the given functions as the prototype and stubs all implemented functions.

Example

const serviceMock = helper.given.stubbedInstance(Service);
Copy

Example

class Service {
 public func1() {...}
 public get prop1() {...}
}
const serviceMock = helper.given.stubbedInstance(Service, {prop1: 3});
Copy

Example

helper.given.stubbedInstance(Router, { events: new Observable() })
Copy

Example

helper.given.stubbedInstance(
 PokemonService,
 {
   pokemonTypes: new BehaviorSubject<NamedAPIResource[]>([]),
   pokemons: new BehaviorSubject<BetterPokemon[]>([]),
 }
)
Copy

Creates a new object with the given functions as the prototype and stubs all functions.

Example

const serviceMock = helper.given.stubbedInterface<IService>("IService");
Copy

Example

interface IService {
 propertyFunc: (int: number) => number
 get prop1() : number
}
const serviceMock = helper.given.stubbedInterface<IService>("IService", {prop1: 3});
Copy

Fires when your app calls the global window.confirm() method. The confirmation will be accepted.

Blur a focused element. This element must currently be in focus. If you want to ensure an element is focused before blurring, try using helper.when.focus() before helper.when.blur().

Fires when your app calls the global window.confirm() method. The confirmation will be canceled.

Fires when your app calls the global window.prompt() method. The prompt will be cancelled.

Check checkbox(es) or radio(s). This element must be an html input element with type checkbox or radio.

Clear the value of an input or textarea

Click a DOM element.

Example

<button data-cy="move-right">Move</button>
helper.when.click('move-right')
Copy

overrides native global functions related to time allowing them to be controlled synchronously via helper.when.tick() This includes controlling: setTimeout clearTimeout setInterval clearInterval Date Objects The clock starts at the unix epoch (timestamp of 0). This means that when you instantiate new Date in your application, it will have a time of January 1st, 1970.

Fires when your app calls the global window.alert() method. The alert will be closed.

Double-click a DOM element.

Scopes the execution of a function within an element

Example

helper.when.doWithin(() => when.click('button-test-id'), 'button-row', 2)
Copy

Drag an element and drop it in target element

Example

helper.when.dragAndDrop(
  helper.get.elementByTestId('selected-item', 2),
  helper.get.elementByTestId('available-items')
)
Copy

Focus on a DOM element.

Example

helper.when.focus('credentials-password')
Copy

Fires native hover event. Yes, it can test :hover preprocessor.

Example

helper.when.hover('consent-terms-agree')
Copy

Fires native system click event.

Example

<button data-cy="move-right">Move</button>
helper.when.realClick('move-right')
Copy

Runs a sequence of native press event (via cy.press) Type event is global. Make sure that it is not attached to any field.

Right click a DOM element.

Scroll to the bottom.

Select an option with specific text, value, or index within a select html element.

Example

<select data-hook="fruit-selection">
  <option value="456">apples</option>
  <option value="457">oranges</option>
  <option value="458">bananas</option>
</select>
Copy

helper.when.selectOption('fruit-selection', 0).should('have.value', '456')
helper.when.selectOption('fruit-selection', 'oranges').should('have.value', '457')
helper.when.selectOption('fruit-selection', 458).should('have.value', '458')
Copy

Move time after overriding a native time function with helper.when.clock(). helper.when.clock() must be called before helper.when.tick()

Example

helper.when.clock();
helper.when.click('login-button');
helper.when.tick(2000);
Copy

Check radio(s). This element must be an html input element with type radio.

Toggle radio(s) by dataTestID This element must be an html input element with type radio.

Type into a DOM element, not including special characters

Example

helper.when.type('credentials-password', 'new password')
Copy

Type into a DOM element, including special characters

Example

helper.when.typeSpecialChar('credentials-password', '{backspace}')
Copy

Uncheck checkbox(es).

Visit a given url

Wait for a number of milliseconds.

Wait for a last request to complete.

Wait for a specific request to complete.

Wait for multiples requests to complete.

Wait for something to happen in the DOM. Note! you should not have any asserts in the callback function. From cypress-wait-until documentation: you cannot put assertions inside checkFunction. There is no way to avoid a test failure if an assertion throws an error. You must manually check what the assertions would check for you. The most common case is checking that an element exists or not

Example

helper.when.waitUntil(() =>
  helper.get.elementByTestId('element-test-id', index)
);
Copy

Scopes the execution of a function within an element

Example

helper.when.within(() => when.click('button-test-id'), 'button-row', 2)
Copy

Deprecated

The method should not be used anymore. Use helper.when.doWithin instead.