Skip to main content

Ionic E2E

Ionic End-to-End Testing is a powerful suite of libraries, tools, and cloud services that makes it easy to build and scale native end-to-end tests for Ionic and Capacitor apps.

What is Ionic E2E?#

Ionic E2E is an opinionated, easy-to-use testing tool and library that combines several popular testing tools and adds additional features and developer experience improvements for developers on the Ionic stack.

Ionic E2E is built around the WebdriverIO and Appium projects. WebdriverIO provides a set of libraries and tools for automating tests on web and mobile using JavaScript, and Appium handles orchestrating native simulators and devices to enable native mobile testing.

Ionic E2E takes these popular technologies and provides an additional CLI tool and test-authoring library that makes it much easier to develop and scale end-to-end tests for your app.

Why End-to-End Testing?#

Unlike unit testing which is useful for testing methods and functions and other lower-level operations in a code base, end-to-end testing tests the actual app that users will use, and can be highly effective at catching bugs and regressions before they ever make it into users' hands.

The way to think about end-to-end testing is that it's as if a real person was using the app and testing all the possible pages and logic paths in the app. The difference is this testing is fully scripted and automated and can be run as often as every code change locally or every commit in a CI/CD system.

For mobile, end-to-end testing is particularly important, as mistakes in production apps can be incredibly costly and time-consuming to resolve as apps must be resubmitted to resolve issues (though Appflow Live Updates can dramatically reduce this risk by allowing realtime updates of web based code in a native app).

How is Ionic E2E Different?#

Ionic E2E is a true end-to-end testing library and tool that enables developers to build tests that mimic a user actually using and testing the app. The goal is to test as close to a final build of the app to ensure the app that gets shipped to users actually works. End-to-end testing is just one piece of the testing pyramid that consists of unit tests, integration tests, and end-to-end tests.

End-to-end testing is a broad term and many tools exist to solve parts of the end-to-end testing problem. Here are some other popular testing tools in the frontend space and how Ionic E2E compares to them:

  • Cypress.io - Cypress is a high-quality end-to-end testing tool for web apps. However, Cypress does not support native mobile testing so will not be able to test your built app that users will install and use.
  • Angular E2E - Angular E2E tests historically used Protractor to remotely control your app through end-to-end tests. Modern Angular does not dictate an end-to-end testing tool but many teams use Cypress. Ultimately, this has the same limitation in that both Protractor and Cypress can only test your app in a browser, and will not be able to test your native mobile app.
  • React Testing Library - React Testing Library is lower-level and instead of being an end-to-end testing tool, it's a step up from unit-testing where you test your individual components and how they render. Ultimately, this stays closer to unit or integration testing and will not be a test of what your users will actually use.
  • Appium - Appium is a set of tools that speak the WebDriver protocol to enable testing of native mobile apps. Appium is a fantastic tool, and Ionic E2E uses Appium for iOS and Android! However, Appium is complicated and difficult to use, so Ionic E2E makes using Appium much easier.
  • WebdriverIO - WebdriverIO is a multi-purpose automation tool and library for testing web and mobile apps in JavaScript. Ionic E2E uses WebdriverIO for iOS, Android, and Web tests! Similarly to Appium, WebdriverIO can be difficult to use on its own, so Ionic E2E wraps it and provides a more focused experience for developers building with Ionic and Capacitor/Cordova.

Most likely, teams will be most familiar with Cypress and possibly even using it. Cypress is a wonderful tool for testing web apps. The reason to consider Ionic E2E in this case is that you'll be able to write tests against your native app that will ultimately ship to users. It's possible to do a meaningful amount of your tests in Cypress and mock out native functionality, but many product and QA teams will feel they are lacking full coverage as none of the native functionality or unique native environment will be tested. Additionally, Ionic E2E comes with a powerful helper library that smooths out challenges to testing Ionic apps by providing helpers for key Ionic components as well as other utilities. This is an advantage of Ionic E2E that even teams that used Cypress will appreciate.

For further reading, there is a great guide on end-to-end testing by testing-angular.com that is a useful introduction to end-to-end testing for web developers regardless of their framework of choice.

Getting Started#

If you're interested in adding native and web end-to-end tests to your Ionic apps, follow the next steps to install Ionic E2E and get started.