https://github.com/distante/cypress-ionic
A set of functions to help you interact with Ionic Framework elements in your Cypress tests
https://github.com/distante/cypress-ionic
Last synced: 3 months ago
JSON representation
A set of functions to help you interact with Ionic Framework elements in your Cypress tests
- Host: GitHub
- URL: https://github.com/distante/cypress-ionic
- Owner: distante
- License: agpl-3.0
- Created: 2021-12-04T20:40:04.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2024-03-15T01:56:44.000Z (over 2 years ago)
- Last Synced: 2024-04-07T01:24:33.955Z (about 2 years ago)
- Language: TypeScript
- Size: 2.08 MB
- Stars: 3
- Watchers: 1
- Forks: 1
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
@saninn/cypress-ionic
👨💻💻
A set of helper functions to tests your Ionic apps with Cypress (0 dependencies)
[](https://github.com/distante/cypress-ionic/actions/workflows/node.js.yml) [](https://snyk.io/test/github/distante/cypress-ionic?targetFile=package.json) [](https://codeclimate.com/github/distante/cypress-ionic/maintainability)
## 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.
# Versioning
- Ionic `<= 7` -> `0.x.x`
- Ionic `>= 8` -> `1.x.x`
## Install
`npm install @saninn/cypress-ionic --save-dev`.
Then enable ShadowDom access on your Cypress Project:
```json
{
"$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>` object with the component that was changed. So an example of usage could be
```ts
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](https://cypress-ionic.saninnsalas.com)
## License
[AGPLv3](/LICENSE)
## 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](/html/index.html) is the file with the supported components.
- [html/assets/scripts.mjs](/html/assets/scripts.mjs) contains the Ionic initialization calls and some event listeners needed for testing.
## TODO.
- Dev Guidelines
- More components
## Pull requests are welcome
❤
# Find me 🏃
- Website [https://www.saninnsalas.com](https://www.saninnsalas.com)
- Twitter [@SaninnSalas](https://twitter.com/saninnsalas)
- Facebook [@SaninnSalas](https://www.facebook.com/SaninnSD/)