import { SetupPrompt } from './snippets/setup-prompt-card.jsx';

export const setupPrompt = Set up e2e end-to-end tests in this project. Docs: \https://e2e.tester.army/docs/quickstart.md\`

1. Run `npx e2e init --yes` (or the pnpm or bun equivalent for this project). It writes a web config using Vercel AI Gateway, an example test, the e2e skill, and MCP config. It installs nothing yet.
2. Read the e2e skill (`npx e2e guide` prints it, `npx e2e guide ` prints a topic) and follow it for every step below.
3. Point the target at this app. For a web app, set its URL and the command that starts its dev server. For an iOS or Android app, replace @e2e-dev/web and playwright with @e2e-dev/mobile and rewrite the example test for the mobile engine.
4. Ask me which model to use for agent steps: a ChatGPT, GitHub Copilot, or SuperGrok subscription, an API key, or a local model. Configure it with its provider package. If it needs a sign-in, give me the `npx e2e login` command and wait until I confirm.
5. Install dependencies, run the example test, and fix setup errors until it passes.
6. Write one test for the most important user flow in this app, run it, and iterate until it passes.`;

Open Claude Code, Codex, Cursor, or another coding agent in your app's directory and paste this prompt:

<Prompt description={setupPrompt} children={setupPrompt} actions={["copy", "cursor"]} />

The agent installs the e2e skill, so later prompts like "add a test for checkout" or "why did this run fail" work without more setup.

pnpm dlx e2e init

bunx e2e init

Choose Web (Playwright) or Mobile (iOS/Android), then a subscription or model provider, or None for tests without AI. The wizard writes a config and an example test, adds dependencies, and offers to set up your coding agent. Existing files stay intact.

<Accordion title="Example web config and test">
This config uses Vercel AI Gateway. The wizard configures the provider you chose.

import type { E2EConfig } from 'e2e';
import { web } from '@e2e-dev/web';
import { gateway } from 'ai';

export default {
  agents: { default: { model: gateway('openai/gpt-6-luna-fast') } },
  targets: [{ engine: web(), app: { url: 'http://localhost:3000' } }],
} satisfies E2EConfig;

import { test } from '@e2e-dev/web';
import { expect } from 'e2e';

test('app opens', async ({ app, browser }) => {
  await app.open('/');
  await expect(browser.locator('body')).toBeVisible();
});

</Accordion>
</Tab>
<Tab title="Mobile">
Run `npx agent-device doctor` to check your setup. The example opens
Settings so you can try it before installing your own app. The wizard
chooses iOS on macOS and Android elsewhere.

<Accordion title="Example iOS config and test">
This config uses Vercel AI Gateway. For Android, the wizard sets
`platform: 'android'` and `app: { bundleId: 'com.android.settings' }`.

import type { E2EConfig } from 'e2e';
import { mobile } from '@e2e-dev/mobile';
import { gateway } from 'ai';

export default {
  agents: { default: { model: gateway('openai/gpt-6-luna-fast') } },
  targets: [{ name: 'ios', engine: mobile({ platform: 'ios' }), app: { bundleId: 'Settings' } }],
  workers: 1,
} satisfies E2EConfig;

import { test } from '@e2e-dev/mobile';
import { expect } from 'e2e';

test('Settings opens', async ({ app, screen }) => {
  await app.open();
  await expect(screen.getByRole('button', 'General')).toBeVisible();
});

</Accordion>

See [Testing iOS and Android](/mobile) to use your own app.
</Tab>

pnpm exec e2e run

bunx e2e run

e2e downloads a browser or boots the simulator or emulator, checks that the app opens, and writes .e2e/report.json. No model calls yet, so no sign-in or API key needed.

Connect the provider you chose in the wizard.

Copilot reuses your GitHub CLI login if available. See Subscriptions for details. Set your provider's key in the terminal where you run e2e. For Vercel AI Gateway:

export AI_GATEWAY_API_KEY="your-api-key"

A project linked with vercel link can use a Vercel OIDC token instead. OpenRouter uses OPENROUTER_API_KEY. See Models for other providers and local models.

Give agent.act one goal per call, then check the result. Adapt the example to a flow in your app:

test('a visitor signs up for a trial', async ({ app, agent, screen }) => { await app.open('/');

await agent.act('sign up for a free trial as {name} with email {email}', { params: { name: 'Ada Lovelace', email: '[email protected]' }, });

await agent.assert('the welcome screen greets Ada by name'); await expect(screen.getByRole('status')).toContainText('trial'); });

  </Tab>
  <Tab title="Mobile (iOS)">
```ts title="tests/agent.e2e.ts"
import { test } from '@e2e-dev/mobile';
import { expect } from 'e2e';

test('the agent opens General', async ({ agent, app, device }) => {
  await app.open();
  await agent.act('open {section} settings', { params: { section: 'General' } });

  await agent.assert('the General settings screen is showing');
  await expect(device.locator('role=NavigationBar id=General')).toBeVisible();
});

app.open() launches the configured app fresh; without it, a test starts where the previous one left the device. device.locator uses agent-device selectors.

params fill the goal's placeholders. agent.assert judges the screen; expect checks an exact value.

pnpm exec e2e run tests/agent.e2e.ts

bunx e2e run tests/agent.e2e.ts

Chose None in the wizard? Add a model first. Add --headed to watch a web test, --no-cache to skip replaying cached actions.