@saninn/cypress-ionic NPM

👨‍💻💻

A set of helper functions to tests your Ionic apps with Cypress

The Problem

To be able to get a hold of Ionic's web components and with Cypress one has to inspect their ShadowDom and create cypress helper commands to change them for each project, which is time consuming.

With this library you can just give the css selector of the Ionic Element, or the element itself and you can interact with it in an easy way.

Install

npm install @saninn/cypress-ionic --save-dev.

Then enable ShadowDom access on your Cypress Project:

{
  "$schema": "https://on.cypress.io/cypress.schema.json",
  "includeShadowDom": true,
  ...
}

** Although it is not needed, it is recommended to disable Ionic animations when possible. That said, this library let the animations active so timing issues are handled.

Basic usage

Each helper function returns an Cypress.Chainable<JQuery<IonComponent>> object with the component that was changed. So an example of usage could be

import { ionRangeCypress } from '@saninn/cypress';

it('can be changed by set value', () => {
  ionRangeCypress.setValue('ion-range.my-ion-range', 42);

  cy.get('my-view-item').should('eq', '42');
});

API and Documentation

See the generated documentation here

License

AGPLv3

Development

Each exported function is directly tested on Cypress. Call npm run develop to start a simple server and open cypress. You can see the served host on http://localhost:3999 with:

html/index.html is the file with the supported components.
html/assets/scripts.mjs contains the Ionic initialization calls and some event listeners needed for testing.