Parallax

Verify a feature

A typical loop in which the agent edits code, reloads the app, looks at the screen and the logs, and reports what it saw.

Parallax is built for one loop: the agent changes code, then checks the result on the running app instead of guessing. Here is that loop with the tools involved.

Before you start

Metro is running, the app is open on a simulator, and setup and the SDK are in place. Ask the agent for status to see what it can reach.

The loop

  1. Edit. The agent changes a file. Metro rebuilds.
  2. Reload. app_reload reloads the app through Metro and waits for it and the SDK. If the bundle does not build, it does not reload (that would replace the running app with an error screen) and says why. app_errors then shows the build error with file, line and a code frame.
  3. Read the screen. device_ui lists the screen's accessibility tree: ids (testID), labels, roles, values and positions. It is cheaper than a screenshot for text. device_screenshot is there when the picture matters.
  4. Find the code. app_tree reads the React component tree. Passing a device_ui id, label or text as filter finds the component behind it. With the build plugin each component shows its file and line.
  5. Act. device_tap, device_type and device_swipe drive the simulator. Each answer says what changed on the screen.
  6. Check. app_logs reads console output across reloads, and app_errors reads uncaught errors, grouped, with source files. For data, app_data reads network, state and navigation.
  7. Report. The agent says what it saw: what is on screen, what was logged, what failed.

An example

The agent has just changed the checkout button. These calls are illustrative; the arguments are the real ones, the answers are shortened.

app_reload
  Reloaded in 2.4 s. SDK ready.

device_ui  { filter: "checkout" }
  checkout-button  Button  "Place order"  (x 201, y 742)

device_tap { id: "checkout-button" }
  Tapped checkout-button. Changed: screen shows "Order confirmed".

app_logs   { level: "warn" }
  (no entries)

app_errors
  No errors.

If the tap had thrown, app_errors would show the JavaScript error with its source frames, and app_tree with filter: "checkout-button" would point at the component and file to fix.

Tips

  • With several simulators or apps, pass device. See Two simulators.
  • app_logs and app_errors end with a next: cursor. Pass it as since to read only what is new.
  • Watch the same loop in the window: the screen, the logs and the activity list show each step as the agent takes it, and you can approve the steps that act.

On this page