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.
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.
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');
});See the generated documentation here
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.
- Dev Guidelines
- More components
❤
- Website https://www.saninnsalas.com
- Twitter @SaninnSalas
- Facebook @SaninnSalas