Detox for E2E testing in React Native - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to launch the app before running tests in Detox.

React Native

beforeAll(async () => {
  await device.[1]();
});

Drag options to blanks, or click blank then click option'

AreloadReactNative

BlaunchApp

CopenApp

DstartApp

Attempts:

3 left

💡 Hint

Common Mistakes

Using reloadReactNative instead of launchApp

Using openApp which is not a Detox command

The launchApp command starts the app fresh before tests run.

2fill in blank

medium

Complete the code to check if a button with testID 'loginBtn' is visible.

React Native

await expect(element(by.id('loginBtn'))).[1]();

Drag options to blanks, or click blank then click option'

AtoBeVisible

BtoExist

CtoBeEnabled

DtoHaveText

Attempts:

3 left

💡 Hint

Common Mistakes

Using toExist which only checks presence in the UI tree

Using toHaveText which checks text content

toBeVisible() checks if the element is visible on screen.

3fill in blank

hard

Fix the error in the code to tap a button with label 'Submit'.

React Native

await element(by.[1]('Submit')).tap();

Drag options to blanks, or click blank then click option'

Atext

Bid

Clabel

DaccessibilityLabel

Attempts:

3 left

💡 Hint

Common Mistakes

Using by.id which looks for testID

Using by.label which is not a Detox selector

Use by.text() to find elements by their visible text label.

4fill in blank

hard

Fill both blanks to wait for an element with testID 'welcomeMsg' to appear.

React Native

await waitFor(element(by.[1]('welcomeMsg'))).[2]();

Drag options to blanks, or click blank then click option'

Aid

BtoBeVisible

CtoExist

Dtext

Attempts:

3 left

💡 Hint

Common Mistakes

Using by.text for testID

Using toExist which waits for presence but not visibility

Use by.id to select by testID and toBeVisible() to wait until visible.

5fill in blank

hard

Fill all three blanks to type 'hello' into a text input with testID 'inputField' and then tap the submit button.

React Native

await element(by.[1]('inputField')).[2]('hello');
await element(by.[3]('submitBtn')).tap();

Drag options to blanks, or click blank then click option'

Aid

BtypeText

Dtext

Etap

FreplaceText

Attempts:

3 left

💡 Hint

Common Mistakes

Using by.text for inputField

Using replaceText instead of typeText

Using tap instead of typeText for input

Select elements by id, use typeText to enter text, then tap the submit button.