https://github.com/abritopach/ionic-cypress

Sample project that shows how to integrate & use Cypress in Ionic app.
https://github.com/abritopach/ionic-cypress

cypress e2e-testing e2e-tests ionic ionic4 typescript

Last synced: 25 days ago
JSON representation

Sample project that shows how to integrate & use Cypress in Ionic app.

• Host: GitHub
• URL: https://github.com/abritopach/ionic-cypress
• Owner: abritopach
• Created: 2019-09-26T17:57:41.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2023-01-07T10:07:25.000Z (about 2 years ago)
• Last Synced: 2024-10-28T17:39:59.172Z (3 months ago)
• Topics: cypress, e2e-testing, e2e-tests, ionic, ionic4, typescript
• Language: JavaScript
• Homepage:
• Size: 1.95 MB
• Stars: 0
• Watchers: 3
• Forks: 0
• Open Issues: 26
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# IonicCypress

Sample project that shows how to integrate & use Cypress in Ionic app.

Technologies: Cypress, Ionic, TypeScript.

![Technologies](readme_resources/technologies.png "Technologies")

## Considerations

Currently cypress not support shadow dom and this issue is known by more than 2.5 years (https://github.com/cypress-io/cypress/issues/144).

To test shadow dom it is necessary to use [cypress-shadow-dom package](https://github.com/abramenal/cypress-shadow-dom).

### cypress-shadow-dom

Extend Cypress commands with shadow DOM support.

This package adds a custom Cypress command that allows you to make an abstraction on how exactly you upload files through you HTML controls and focus on testing the functionality.

## Cypress E2E tests

Tests are located in cypress/integration/home folder.

Example test

```bash

    it('Button is enabled when input is not empty', () => {

        cy.get('ion-button')

        .should('have.attr', 'disabled')

        .shadowGet('ion-item') // Querying shadow DOM elements using cypress-shadow-dom package

        .get('ion-input')

        .get('input')

        .type('SomeText')

        .get('ion-button')

        .should('not.have.attr', 'disabled');

    });

```

## Running

Before you go through this example, you should have at least a basic understanding of Ionic concepts. You must also already have Ionic installed on your machine.

* Test in localhost:

To run it, cd into `ionic-cypress` and run:

```bash

npm install

ionic serve

```

To run the e2e cypress tests open new terminal and run:

```bash

npm run cypress

```

## Requirements

* [Node.js](http://nodejs.org/)

* [Ionic](https://ionicframework.com/getting-started#cli)

* [Cypress](https://www.cypress.io/)