Detox Test Automation in the Perfecto Continuous Testing Cloud
Detox is a JavaScript mobile testing framework that is built into the application so that the test execution starts with the app launch. This makes test execution fast and robust because no additional external tools are needed to orchestrate and synchronize tests.
The Perfecto testing cloud provides teams with instant access to real devices from anywhere, allowing faster feedback to engineering teams, which increases your development velocity and reduces production defects.
About the Detox Framework
High velocity native mobile development requires us to adopt continuous integration workflows, which means our reliance on manual QA has to drop significantly. The Detox framework tests your mobile app while it's running in a real device/simulator, interacting with it just like a real user.
The most difficult part of automated testing on mobile is the tip of the testing pyramid of end to end testing. The core problem with E2E tests is flakiness. Tests are usually not deterministic. The only way to tackle flakiness head on is by moving from black box testing to gray box testing. That's where the Detox framework comes into play.
How the Detox Framework Is Built
Detox is built from the ground up to support React Native projects as well as pure native ones.
Detox is built from the ground up to integrate with native layers of your mobile app directly. This is to avoid generic cross-platform interfaces that are often the lowest common denominator.
Switching to gray box allows the test framework to monitor the app from the inside and delivers critical wins like fighting flakiness at the core.
The leading native gray box drivers are developed by Google. EarlGrey is used for iOS and Espresso is used for Android. Detox relies on them using a JSON-based reflection mechanism, which allows a common JavaScript implementation to invoke their native methods directly.
By knowing what your app is doing and synchronizing with it, Detox times its actions to run only when your app is idle, meaning it has determined that your app has finished work, such as React Native load, animations, network requests, etc. You can read more on this here.
Tests in Detox are implemented in human-readable JavaScript and can even be shared between platforms. This easy-to-use API completely abstracts the complex native driver invocations taking place under the hood.
Let's take iOS simulators for example, which are difficult to control efficiently since multiple concurrent instances aren't supported. Detox uses AppleSimulatorUtils (another open source library by Wix) to work around these issues and support test sharding.
Detox is inspired by web testing methodologies but is not a direct translation of a solution designed for a different platform. Detox is built from the ground up for native mobile and has deep first-class support for React Native apps.
Communication between the test script running on Node.js and the tested app running on device uses websockets. This provides true bi-directional communication and is much faster and resilient than REST-like protocols.
The test script running on Node.js and the tested app running on device are both clients. This allows one side to disconnect without affecting the other. A separate proxy websocket server is used to connect them.
Traditionally, test frameworks evalutate expectations in the test script running on Node.js. Detox evaluates expectations natively directly in the tested app running on device. This enables operations that were impossible before due to performance reasons.
Watch Detox and Perfecto in Action
No matter the framework you use, the Perfecto platform is all you need, allowing you to have a single continuous testing solution that can scale with your team. With Perfecto, you can execute tests fast without the need for additional tools or device labs. See Perfecto and Detox together in this video.
Example Detox Test
This is a test for a login screen. It runs on a device/simulator like an actual user.
describe('Login flow', () => {
it('should login successfully', async () => {
await device.reloadReactNative();
await expect(element(by.id('email'))).toBeVisible();
await element(by.id('email')).typeText('[email protected]');
await element(by.id('password')).typeText('123456');
await element(by.text('Login')).tap();
await expect(element(by.text('Welcome'))).toBeVisible();
await expect(element(by.id('email'))).toNotExist();
});
});
View a sample project of Detox.