Top Related Projects
Cross-platform automation framework for all kinds of apps, built on top of the W3C WebDriver protocol
Calabash for iOS
Automated Functional testing for Android using cucumber
Keep It Functional - An iOS Functional Testing Framework
Quick Overview
Detox is a gray box end-to-end testing and automation framework for mobile apps. It allows developers to write clear and reliable automated UI tests for React Native and native iOS/Android applications. Detox runs tests on real devices or simulators, providing a robust solution for testing mobile applications in a way that closely mimics real user interactions.
Pros
- Cross-platform support for both iOS and Android
- Seamless integration with React Native projects
- Automatic synchronization with app's internal operations, reducing flakiness
- Extensive API for simulating user interactions and assertions
Cons
- Steeper learning curve compared to some other testing frameworks
- Setup process can be complex, especially for native iOS/Android projects
- Limited support for certain third-party libraries and custom native modules
- Occasional stability issues with newer versions of React Native or mobile OS updates
Code Examples
- Writing a simple test:
describe('Example', () => {
beforeEach(async () => {
await device.reloadReactNative();
});
it('should show welcome screen', async () => {
await expect(element(by.text('Welcome'))).toBeVisible();
});
});
- Interacting with elements:
it('should login successfully', async () => {
await element(by.id('username')).typeText('user@example.com');
await element(by.id('password')).typeText('password123');
await element(by.text('Login')).tap();
await expect(element(by.text('Dashboard'))).toBeVisible();
});
- Waiting for elements and assertions:
it('should load data after refresh', async () => {
await element(by.id('refresh-button')).tap();
await waitFor(element(by.id('data-list'))).toBeVisible().withTimeout(5000);
await expect(element(by.id('data-list'))).toHaveLength(10);
});
Getting Started
-
Install Detox globally:
npm install -g detox-cli
-
Add Detox to your project:
npm install detox --save-dev
-
Initialize Detox in your project:
detox init
-
Configure your
package.json
with Detox configuration and add test scripts. -
Write your first test in the
e2e
folder. -
Run tests using:
detox test
Competitor Comparisons
Cross-platform automation framework for all kinds of apps, built on top of the W3C WebDriver protocol
Pros of Appium
- Cross-platform support for iOS, Android, and web applications
- Supports multiple programming languages (Java, Python, Ruby, etc.)
- Large community and extensive documentation
Cons of Appium
- Slower test execution compared to Detox
- More complex setup and configuration process
- Less stable for React Native applications
Code Comparison
Appium (JavaScript):
const driver = await wdio.remote(opts);
await driver.setImplicitTimeout(5000);
const el = await driver.$('~myButton');
await el.click();
await driver.deleteSession();
Detox (JavaScript):
await device.launchApp();
await element(by.id('myButton')).tap();
await expect(element(by.text('Welcome'))).toBeVisible();
Both Appium and Detox are popular choices for mobile app testing, but they cater to different needs. Appium offers broader platform support and language flexibility, making it suitable for diverse testing environments. However, Detox provides a more streamlined experience for React Native apps, with faster execution and easier setup. The code comparison shows that Detox offers a more concise syntax for common testing tasks, while Appium requires more verbose setup and commands.
Calabash for iOS
Pros of Calabash
- Supports both iOS and Android platforms
- Uses Cucumber for writing tests in natural language
- Has a large community and extensive documentation
Cons of Calabash
- Requires Ruby knowledge for test implementation
- Can be slower in test execution compared to Detox
- Less frequently updated and maintained
Code Comparison
Calabash (Ruby):
Given /^I am on the welcome screen$/ do
element_exists("* marked:'Welcome'")
end
When /^I tap the "Login" button$/ do
touch("button marked:'Login'")
end
Detox (JavaScript):
describe('Login flow', () => {
it('should show login screen after tapping login button', async () => {
await expect(element(by.text('Welcome'))).toBeVisible();
await element(by.text('Login')).tap();
});
});
Key Differences
- Language: Calabash uses Ruby with Cucumber, while Detox uses JavaScript
- Test Structure: Calabash follows Gherkin syntax, Detox uses Jest-like structure
- Execution: Calabash runs tests through external Ruby process, Detox runs directly in JavaScript
- Speed: Detox generally offers faster test execution
- Maintenance: Detox is more actively maintained and updated
Both tools have their strengths, but Detox is gaining popularity due to its speed, JavaScript ecosystem integration, and active development. Calabash remains a solid choice for teams already using Ruby or preferring Cucumber-style tests.
Automated Functional testing for Android using cucumber
Pros of Calabash
- Supports both Android and iOS platforms
- Uses Cucumber for writing tests in natural language
- Has a large community and extensive documentation
Cons of Calabash
- Slower test execution compared to Detox
- Requires more setup and configuration
- Less stable and reliable for complex UI interactions
Code Comparison
Calabash (Ruby):
Given(/^I am on the login screen$/) do
wait_for_element_exists("* id:'login_button'")
end
When(/^I enter "([^"]*)" as username$/) do |username|
enter_text("* id:'username_field'", username)
end
Detox (JavaScript):
describe('Login flow', () => {
it('should show login screen', async () => {
await expect(element(by.id('login_button'))).toBeVisible();
});
it('should enter username', async () => {
await element(by.id('username_field')).typeText('testuser');
});
});
Both Calabash and Detox are popular choices for mobile app testing, but they differ in their approach and implementation. Calabash uses Cucumber for behavior-driven development, while Detox focuses on JavaScript and React Native. Detox generally offers faster and more reliable tests, especially for React Native apps, but Calabash provides broader platform support and a more natural language syntax for test writing.
Keep It Functional - An iOS Functional Testing Framework
Pros of KIF
- Mature and stable framework with a long history in iOS testing
- Simpler setup and integration, especially for pure iOS projects
- Better performance for UI testing on real devices
Cons of KIF
- Limited to iOS platform, unlike Detox which supports both iOS and Android
- Less extensive documentation and community support compared to Detox
- Lacks some advanced features like device mocking and network synchronization
Code Comparison
KIF example:
[tester enterText:@"user@example.com" intoViewWithAccessibilityLabel:@"Email"];
[tester enterText:@"password" intoViewWithAccessibilityLabel:@"Password"];
[tester tapViewWithAccessibilityLabel:@"Sign In"];
Detox example:
await element(by.id('email')).typeText('user@example.com');
await element(by.id('password')).typeText('password');
await element(by.id('signInButton')).tap();
Both frameworks provide intuitive ways to interact with UI elements, but KIF uses Objective-C while Detox uses JavaScript, making Detox more accessible to web developers. Detox also offers a more declarative syntax, which can be easier to read and maintain for complex test scenarios.
Convert designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual CopilotREADME
Detox
Gray box end-to-end testing and automation framework for mobile apps.
What Does a Detox Test Look Like?
This is a test for a login screen, it runs on a device/simulator like an actual user:
describe('Login flow', () => {
beforeEach(async () => {
await device.reloadReactNative();
});
it('should login successfully', async () => {
await element(by.id('email')).typeText('john@example.com');
await element(by.id('password')).typeText('123456');
const loginButton = element(by.text('Login'));
await loginButton.tap();
await expect(loginButton).not.toExist();
await expect(element(by.label('Welcome'))).toBeVisible();
});
});
About
High velocity native mobile development requires us to adopt continuous integration workflows, which means our reliance on manual QA has to drop significantly. Detox 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 - E2E. The core problem with E2E tests is flakiness - tests are usually not deterministic. We believe the only way to tackle flakiness head on is by moving from black box testing to gray box testing. Thatâs where Detox comes into play.
- Cross Platform: Write end-to-end tests in JavaScript for React Native apps (Android & iOS).
- Debuggable: Modern async-await API allows breakpoints in asynchronous tests to work as expected.
- Automatically Synchronized: Stops flakiness at the core by monitoring asynchronous operations in your app.
- Made For CI: Execute your E2E tests on CI platforms like Travis CI, Circle CI or Jenkins without grief.
- Runs on Devices: Gain confidence to ship by testing your app on a device/simulator just like a real user (not yet supported on iOS).
- Test Runner Agnostic: Detox provides a set of APIs to use with any test runner without it. It comes with Jest integration out of the box.
Supported React Native Versions
Detox was built from the ground up to support React Native projects.
While Detox should work out of the box with almost any React Native version of the latest minor releases, official support is provided for React Native versions 0.72.x
, 0.73.x
, 0.74.x
, 0.75.x
, 0.76.x
without React Native's "New Architecture".
Newer versions, as well as React Native's "New Architecture", may work with Detox, but have not been tested out yet by the Detox team.
Although we do not officially support older React Native versions, we do our best to keep Detox compatible with them.
Also, in case of a problem with an unsupported version of React Native, please submit an issue or write us in our Discord server and we will do our best to help out.
Known Issues with React Native
- Visibility edge-case on Android: see this RN issue.
Get Started with Detox
Read the Getting Started Guide to get Detox running on your app in less than 10 minutes.
Documents Site
Explore further about using Detox from our new website.
Core Principles
We believe that the only way to address the core difficulties with mobile end-to-end testing is by rethinking some of the principles of the entire approach. See what Detox does differently.
Contributing to Detox
Detox has been open-source from the first commit. If youâre interested in helping out with our roadmap, please see issues tagged with the label. If you have encountered a bug or would like to suggest a new feature, please open an issue.
Dive into Detox core by reading the Detox Contribution Guide.
License
- Detox is licensed under the MIT License
Non-English Resources (Community)
Top Related Projects
Cross-platform automation framework for all kinds of apps, built on top of the W3C WebDriver protocol
Calabash for iOS
Automated Functional testing for Android using cucumber
Keep It Functional - An iOS Functional Testing Framework
Convert designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual Copilot