Convert Figma logo to code with AI

wix logoDetox

Gray box end-to-end testing and automation framework for mobile apps

11,134
1,915
11,134
289

Top Related Projects

18,634

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

6,206

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

  1. Writing a simple test:
describe('Example', () => {
  beforeEach(async () => {
    await device.reloadReactNative();
  });

  it('should show welcome screen', async () => {
    await expect(element(by.text('Welcome'))).toBeVisible();
  });
});
  1. 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();
});
  1. 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

  1. Install Detox globally:

    npm install -g detox-cli
    
  2. Add Detox to your project:

    npm install detox --save-dev
    
  3. Initialize Detox in your project:

    detox init
    
  4. Configure your package.json with Detox configuration and add test scripts.

  5. Write your first test in the e2e folder.

  6. Run tests using:

    detox test
    

Competitor Comparisons

18,634

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.

6,206

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 Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

SWUbanner

Detox

Detox

Gray box end-to-end testing and automation framework for mobile apps.

Demo

NPM Version NPM Downloads Build status Coverage Status Detox is released under the MIT license PR's welcome! Discord Twitter Follow

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();
  });
});

Get started with Detox now!

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.71.x, 0.72.x and 0.73.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

Non-English Resources (Community)

NPM DownloadsLast 30 Days