Ionic Framework Testing Guide (2026)

Ionic apps are web apps wrapped in a native shell (Capacitor or Cordova). Testing them combines web testing (Jest, Cypress, Playwright) with mobile-specific concerns (native plugins, platform behavior

Ionic apps are web apps wrapped in a native shell (Capacitor or Cordova). Testing them combines web testing (Jest, Cypress, Playwright) with mobile-specific concerns (native plugins, platform behavior). This guide covers the practical approach.

The stack

• Angular / React / Vue underlying
• Ionic UI components
• Capacitor plugins for native
• Deployed to iOS + Android + Web

Unit tests

Jest for Angular / React / Vue code. Mock Capacitor plugins:

jest.mock('@capacitor/camera', () => ({
  Camera: {
    getPhoto: jest.fn(() => Promise.resolve({webPath: 'mock-path'}))
  }
}));

Angular specific: component testing with TestBed and Ionic test utilities.

React specific: React Testing Library + Ionic React.

E2E (web browser)

Cypress or Playwright against the web-deployed version:

describe('Login', () => {
  it('submits valid credentials', () => {
    cy.visit('/login');
    cy.get('ion-input[name="email"]').type('test@example.com');
    cy.get('ion-input[name="password"]').type('correct');
    cy.get('ion-button').contains('Sign In').click();
    cy.contains('Welcome');
  });
});

Ionic components render actual HTML, so web testing tools work.

Native testing

Capacitor integration tests

Appium works against the native build. iOS Simulator + Android Emulator + Appium to drive the app.

const driver = await wdio.remote({
  path: '/wd/hub',
  hostname: 'localhost',
  port: 4723,
  capabilities: { platformName: 'Android', 'appium:app': 'path/to/app.apk' }
});
const emailField = await driver.$('~email_input'); // accessibility id
await emailField.setValue('test@example.com');

Plugin mocking

For tests that run on web but depend on native plugins, Capacitor provides mocks:

import { Storage } from '@capacitor/storage';
// On web, Storage uses localStorage. On native, uses platform storage.
// Abstraction means same code works in tests.

Testing strategy

1. Unit: every composable / component / service. Fast.
2. Web E2E: Cypress / Playwright on ionic serve. Fast, no device.
3. Native integration: Appium per-platform. Slow, high-fidelity.
4. Critical-path full stack: a few Appium tests per release.

Ionic's advantage: most tests run on web. Dev loop is fast.

Ionic specifics

• ion-input, ion-button, etc. are shadow DOM. Testing libraries may need to traverse.
• Ionic's navigation (ion-router-outlet) differs from Angular Router / React Router.
• ion-content has implicit scroll container.

Platform testing

Run CI on all three:

• Web tests: standard web runner
• Android: emulator + Appium
• iOS: simulator + Appium + macOS runner

Automation catches platform-specific Capacitor behavior.

Accessibility

Ionic components have reasonable accessibility defaults. Add custom when needed:

<ion-button aria-label="Submit login form">Sign In</ion-button>

Web: axe-core in Cypress tests.

Native: Accessibility Scanner on Android, Accessibility Inspector on iOS.

How SUSA tests Ionic apps

SUSA treats the native-built Ionic app as any native app:

susatest-agent test ionicapp.apk --persona curious --steps 200

Or as a web app against the deployed web version:

susatest-agent test https://ionicapp.com --persona curious --steps 200

Both coverage types valuable. Web explorations are fast; native catches platform-specific issues.

Common bugs

1. Capacitor plugin works on iOS, not Android — version mismatch
2. Lazy-loaded module not in production bundle — runtime error
3. Cordova plugin deprecated, Capacitor replacement differs — migration regression
4. Native splash screen vs Ionic splash mismatch — visible flicker
5. Platform-specific routing — iOS swipe-back conflicts with Ionic navigation

Ionic is productive for cross-platform. Test well; each layer has its own concerns.