Add E2E testing infrastructure with WebdriverIO + Appium

Set up E2E test framework for Android using WebdriverIO, Appium, and
UiAutomator2. Add testID props to key components (AuthButton, BaseButton,
ChatBubble, CustomTextInput, ProposedEventCard) and apply testIDs to
login screen, chat screen, tab bar, and settings. Include initial tests
for app launch detection and login flow validation. Update CLAUDE.md
with E2E docs.

apps/client/app.json

@@ -14,7 +14,8 @@
     "android": {
       "package": "com.gilmour109.calchat",
       "edgeToEdgeEnabled": true,
-      "predictiveBackGestureEnabled": false
+      "predictiveBackGestureEnabled": false,
+      "usesCleartextTraffic": true
     },
     "web": {
       "output": "static",

apps/client/e2e/config/capabilities.ts

@@ -0,0 +1,49 @@
+export type AppiumCapabilities = Record<string, unknown>;
+
+const COMMON_CAPABILITIES: AppiumCapabilities = {
+  platformName: "Android",
+  "appium:automationName": "UiAutomator2",
+  "appium:deviceName": process.env.DEVICE_NAME || "emulator-5554",
+  "appium:autoGrantPermissions": true,
+  "appium:newCommandTimeout": 300,
+};
+
+/**
+ * Dev Client mode: app is already installed via `expo start --android`.
+ * Appium connects to the running app without reinstalling.
+ */
+const DEV_CLIENT_CAPABILITIES: AppiumCapabilities = {
+  ...COMMON_CAPABILITIES,
+  "appium:appPackage": "host.exp.exponent",
+  "appium:appActivity": ".experience.ExperienceActivity",
+  "appium:noReset": true,
+};
+
+/**
+ * APK mode: Appium installs the APK directly.
+ * Used in CI where the APK is built via `eas build --profile e2e`.
+ */
+function getApkCapabilities(apkPath: string): AppiumCapabilities {
+  return {
+    ...COMMON_CAPABILITIES,
+    "appium:app": apkPath,
+    "appium:noReset": false,
+  };
+}
+
+/**
+ * Returns the appropriate capabilities based on the APK_PATH env variable.
+ * - APK_PATH set → APK mode (CI)
+ * - APK_PATH not set → Dev Client mode (local development)
+ */
+export function getCapabilities(): AppiumCapabilities {
+  const apkPath = process.env.APK_PATH;
+
+  if (apkPath) {
+    console.log(`[Appium] APK mode: ${apkPath}`);
+    return getApkCapabilities(apkPath);
+  }
+
+  console.log("[Appium] Dev Client mode");
+  return DEV_CLIENT_CAPABILITIES;
+}

apps/client/e2e/helpers/driver.ts

@@ -0,0 +1,41 @@
+import { remote, type Browser } from "webdriverio";
+import { getCapabilities } from "../config/capabilities";
+
+let driver: Browser | null = null;
+
+const APPIUM_HOST = process.env.APPIUM_HOST || "localhost";
+const APPIUM_PORT = parseInt(process.env.APPIUM_PORT || "4723", 10);
+
+/**
+ * Initialize the Appium driver. If already initialized, returns the existing instance.
+ * With --runInBand, all test files share this singleton.
+ */
+export async function initDriver(): Promise<Browser> {
+  if (driver) return driver;
+
+  const capabilities = getCapabilities();
+
+  driver = await remote({
+    hostname: APPIUM_HOST,
+    port: APPIUM_PORT,
+    path: "/",
+    capabilities,
+    logLevel: "warn",
+  });
+
+  return driver;
+}
+
+export function getDriver(): Browser {
+  if (!driver) {
+    throw new Error("Driver not initialized. Call initDriver() first.");
+  }
+  return driver;
+}
+
+export async function quitDriver(): Promise<void> {
+  if (driver) {
+    await driver.deleteSession();
+    driver = null;
+  }
+}

apps/client/e2e/helpers/selectors.ts

@@ -0,0 +1,30 @@
+/**
+ * All testID strings used in the CalChat app.
+ * Appium finds them via accessibility id selector: `~testId`
+ */
+export const TestIDs = {
+  // Login screen
+  LOGIN_TITLE: "login-title",
+  LOGIN_ERROR_TEXT: "login-error-text",
+  LOGIN_IDENTIFIER_INPUT: "login-identifier-input",
+  LOGIN_PASSWORD_INPUT: "login-password-input",
+  LOGIN_BUTTON: "login-button",
+
+  // Tab navigation
+  TAB_CHAT: "tab-chat",
+  TAB_CALENDAR: "tab-calendar",
+  TAB_SETTINGS: "tab-settings",
+
+  // Chat screen
+  CHAT_MESSAGE_INPUT: "chat-message-input",
+  CHAT_SEND_BUTTON: "chat-send-button",
+  CHAT_BUBBLE_LEFT: "chat-bubble-left",
+  CHAT_BUBBLE_RIGHT: "chat-bubble-right",
+
+  // Settings screen
+  SETTINGS_LOGOUT_BUTTON: "settings-logout-button",
+
+  // Event proposal
+  EVENT_ACCEPT_BUTTON: "event-accept-button",
+  EVENT_REJECT_BUTTON: "event-reject-button",
+} as const;

apps/client/e2e/helpers/utils.ts

@@ -0,0 +1,105 @@
+import type { Browser } from "webdriverio";
+import { TestIDs } from "./selectors";
+
+const DEFAULT_TIMEOUT = 15_000;
+
+/**
+ * Build a UiAutomator selector for a resource-id.
+ * React Native on Android maps testID to resource-id (not content-desc).
+ */
+function byTestId(testId: string): string {
+  return `android=new UiSelector().resourceId("${testId}")`;
+}
+
+/**
+ * Wait for an element with the given testID to exist and be displayed.
+ */
+export async function waitForTestId(
+  driver: Browser,
+  testId: string,
+  timeout = DEFAULT_TIMEOUT,
+) {
+  const element = driver.$(byTestId(testId));
+  await element.waitForDisplayed({ timeout });
+  return element;
+}
+
+/**
+ * Check if an element with the given testID is currently visible.
+ */
+export async function isTestIdVisible(
+  driver: Browser,
+  testId: string,
+): Promise<boolean> {
+  try {
+    const element = driver.$(byTestId(testId));
+    return await element.isDisplayed();
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * Navigate to the login screen. If already logged in (auto-login),
+ * go to Settings and tap Logout first.
+ */
+export async function ensureOnLoginScreen(driver: Browser): Promise<void> {
+  const onLogin = await isTestIdVisible(driver, TestIDs.LOGIN_TITLE);
+  if (onLogin) return;
+
+  // We're on the main app — navigate to Settings and logout
+  const settingsTab = driver.$(byTestId(TestIDs.TAB_SETTINGS));
+  await settingsTab.waitForDisplayed({ timeout: DEFAULT_TIMEOUT });
+  await settingsTab.click();
+
+  const logoutButton = await waitForTestId(
+    driver,
+    TestIDs.SETTINGS_LOGOUT_BUTTON,
+  );
+  await logoutButton.click();
+
+  // Wait for login screen to appear
+  await waitForTestId(driver, TestIDs.LOGIN_TITLE);
+}
+
+/**
+ * Perform login with the given credentials.
+ */
+export async function performLogin(
+  driver: Browser,
+  identifier: string,
+  password: string,
+): Promise<void> {
+  const identifierInput = await waitForTestId(
+    driver,
+    TestIDs.LOGIN_IDENTIFIER_INPUT,
+  );
+  await identifierInput.clearValue();
+  await identifierInput.setValue(identifier);
+
+  const passwordInput = await waitForTestId(
+    driver,
+    TestIDs.LOGIN_PASSWORD_INPUT,
+  );
+  await passwordInput.clearValue();
+  await passwordInput.setValue(password);
+
+  const loginButton = await waitForTestId(driver, TestIDs.LOGIN_BUTTON);
+  await loginButton.click();
+}
+
+/**
+ * Ensure the user is logged in. If on the login screen, perform login
+ * with test credentials.
+ */
+export async function ensureLoggedIn(driver: Browser): Promise<void> {
+  const testUser = process.env.TEST_USER || "test";
+  const testPassword = process.env.TEST_PASSWORD || "test";
+
+  const onLogin = await isTestIdVisible(driver, TestIDs.LOGIN_TITLE);
+  if (onLogin) {
+    await performLogin(driver, testUser, testPassword);
+    // Wait for chat screen to appear after login
+    await waitForTestId(driver, TestIDs.CHAT_MESSAGE_INPUT, 30_000);
+  }
+}

apps/client/e2e/jest.config.ts

@@ -0,0 +1,14 @@
+import type { Config } from "jest";
+
+const config: Config = {
+  preset: "ts-jest",
+  testEnvironment: "node",
+  testMatch: ["<rootDir>/tests/**/*.test.ts"],
+  testTimeout: 120_000,
+  transform: {
+    "^.+\\.ts$": "ts-jest",
+  },
+  moduleFileExtensions: ["ts", "js", "json"],
+};
+
+export default config;

apps/client/e2e/tests/01-app-launch.test.ts

@@ -0,0 +1,49 @@
+import { initDriver, getDriver } from "../helpers/driver";
+import { TestIDs } from "../helpers/selectors";
+import { waitForTestId } from "../helpers/utils";
+
+describe("App Launch", () => {
+  beforeAll(async () => {
+    await initDriver();
+    const driver = getDriver();
+
+    // Dismiss Expo Go banner by tapping near the top of the screen
+    await driver.pause(3000);
+    const { width } = await driver.getWindowSize();
+    await driver.touchAction({ action: "tap", x: Math.round(width / 2), y: 100 });
+    await driver.pause(500);
+  });
+
+  it("should launch the app and show login or chat screen", async () => {
+    const driver = getDriver();
+
+    // Wait for either the login screen or the chat screen to appear
+    // Try login first with a long timeout (app needs to fully load)
+    try {
+      await waitForTestId(driver, TestIDs.LOGIN_TITLE, 30_000);
+      // On login screen — verify elements
+      const identifierInput = await waitForTestId(
+        driver,
+        TestIDs.LOGIN_IDENTIFIER_INPUT,
+      );
+      expect(await identifierInput.isDisplayed()).toBe(true);
+
+      const passwordInput = await waitForTestId(
+        driver,
+        TestIDs.LOGIN_PASSWORD_INPUT,
+      );
+      expect(await passwordInput.isDisplayed()).toBe(true);
+
+      const loginButton = await waitForTestId(driver, TestIDs.LOGIN_BUTTON);
+      expect(await loginButton.isDisplayed()).toBe(true);
+    } catch {
+      // Not on login — should be on chat screen (auto-login)
+      const chatInput = await waitForTestId(
+        driver,
+        TestIDs.CHAT_MESSAGE_INPUT,
+        30_000,
+      );
+      expect(await chatInput.isDisplayed()).toBe(true);
+    }
+  });
+});

apps/client/e2e/tests/02-login.test.ts

@@ -0,0 +1,73 @@
+import { initDriver, getDriver, quitDriver } from "../helpers/driver";
+import { TestIDs } from "../helpers/selectors";
+import {
+  waitForTestId,
+  ensureOnLoginScreen,
+  performLogin,
+} from "../helpers/utils";
+
+describe("Login", () => {
+  beforeAll(async () => {
+    await initDriver();
+    const driver = getDriver();
+
+    // Dismiss Expo Go banner by tapping near the top of the screen
+    await driver.pause(3000);
+    const { width } = await driver.getWindowSize();
+    await driver.touchAction({ action: "tap", x: Math.round(width / 2), y: 100 });
+    await driver.pause(500);
+  });
+
+  beforeEach(async () => {
+    const driver = getDriver();
+    await ensureOnLoginScreen(driver);
+  });
+
+  it("should show error when fields are empty", async () => {
+    const driver = getDriver();
+
+    // Tap login without entering credentials
+    const loginButton = await waitForTestId(driver, TestIDs.LOGIN_BUTTON);
+    await loginButton.click();
+
+    // Error message should appear
+    const errorText = await waitForTestId(driver, TestIDs.LOGIN_ERROR_TEXT);
+    const text = await errorText.getText();
+    expect(text).toContain("Bitte alle Felder");
+  });
+
+  it("should show error for invalid credentials", async () => {
+    const driver = getDriver();
+
+    await performLogin(driver, "invalid_user", "wrong_password");
+
+    // Wait for error message
+    const errorText = await waitForTestId(
+      driver,
+      TestIDs.LOGIN_ERROR_TEXT,
+      30_000,
+    );
+    const text = await errorText.getText();
+    expect(text).toContain("Anmeldung fehlgeschlagen");
+  });
+
+  it("should login successfully with valid credentials", async () => {
+    const driver = getDriver();
+    const testUser = process.env.TEST_USER || "test";
+    const testPassword = process.env.TEST_PASSWORD || "test";
+
+    await performLogin(driver, testUser, testPassword);
+
+    // Chat screen should appear after successful login
+    const chatInput = await waitForTestId(
+      driver,
+      TestIDs.CHAT_MESSAGE_INPUT,
+      30_000,
+    );
+    expect(await chatInput.isDisplayed()).toBe(true);
+  });
+
+  afterAll(async () => {
+    await quitDriver();
+  });
+});

apps/client/e2e/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "commonjs",
+    "lib": ["ES2020"],
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "outDir": "dist",
+    "rootDir": "."
+  },
+  "include": ["**/*.ts"],
+  "exclude": ["dist"]
+}

apps/client/package.json

@@ -9,7 +9,8 @@
     "ios": "expo start --ios",
     "web": "expo start --web",
     "lint": "expo lint",
-    "build:apk": "eas build --platform android --profile preview --local --non-interactive --output ./calchat.apk"
+    "build:apk": "eas build --platform android --profile preview --local --non-interactive --output ./calchat.apk",
+    "test:e2e": "NODE_OPTIONS=--experimental-vm-modules jest --config e2e/jest.config.ts --runInBand"
   },
   "dependencies": {
     "@calchat/shared": "*",
@@ -48,10 +49,17 @@
     "zustand": "^5.0.9"
   },
   "devDependencies": {
+    "@types/jest": "^29.5.14",
     "@types/react": "~19.1.0",
+    "appium": "^2.17.1",
+    "appium-uiautomator2-driver": "^3.8.0",
     "eslint-config-expo": "~10.0.0",
+    "jest": "^29.7.0",
     "prettier-plugin-tailwindcss": "^0.5.11",
-    "tailwindcss": "^3.4.17"
+    "tailwindcss": "^3.4.17",
+    "ts-jest": "^29.2.5",
+    "ts-node": "^10.9.2",
+    "webdriverio": "^9.14.2"
   },
   "private": true
 }

apps/client/src/app/(tabs)/_layout.tsx

@@ -19,6 +19,7 @@ export default function TabLayout() {
           name="chat"
           options={{
             title: "Chat",
+            tabBarTestID: "tab-chat",
             tabBarIcon: ({ color }) => (
               <Ionicons size={28} name="chatbubble" color={color} />
             ),
@@ -28,6 +29,7 @@ export default function TabLayout() {
           name="calendar"
           options={{
             title: "Calendar",
+            tabBarTestID: "tab-calendar",
             tabBarIcon: ({ color }) => (
               <Ionicons size={28} name="calendar" color={color} />
             ),
@@ -37,6 +39,7 @@ export default function TabLayout() {
           name="settings"
           options={{
             title: "Settings",
+            tabBarTestID: "tab-settings",
             tabBarIcon: ({ color }) => (
               <Ionicons size={28} name="settings" color={color} />
             ),

apps/client/src/app/(tabs)/chat.tsx

@@ -342,6 +342,7 @@ const ChatInput = ({ onSend }: ChatInputProps) => {
   return (
     <View className="flex flex-row w-full items-end my-2 px-2">
       <TextInput
+        testID="chat-message-input"
         className="flex-1 border border-solid rounded-2xl px-3 py-2 mr-2"
         style={{
           backgroundColor: theme.messageBorderBg,
@@ -356,7 +357,7 @@ const ChatInput = ({ onSend }: ChatInputProps) => {
         placeholderTextColor={theme.textMuted}
         multiline
       />
-      <Pressable onPress={handleSend}>
+      <Pressable testID="chat-send-button" onPress={handleSend}>
         <View
           className="w-10 h-10 rounded-full items-center justify-center"
           style={{
@@ -393,6 +394,7 @@ const ChatMessage = ({
   return (
     <ChatBubble
       side={side}
+      testID={`chat-bubble-${side}`}
       style={{
         maxWidth: "80%",
         minWidth: hasProposals ? "75%" : undefined,

apps/client/src/app/(tabs)/settings.tsx

@@ -20,6 +20,7 @@ const handleLogout = async () => {
 const SettingsButton = (props: BaseButtonProps) => {
   return (
     <BaseButton
+      testID={props.testID}
       onPress={props.onPress}
       solid={props.solid}
       className={"w-11/12"}
@@ -214,7 +215,7 @@ const Settings = () => {
     <BaseBackground>
       <SimpleHeader text="Settings" />
       <View className="flex items-center mt-4">
-        <SettingsButton onPress={handleLogout} solid={true}>
+        <SettingsButton testID="settings-logout-button" onPress={handleLogout} solid={true}>
           <Ionicons name="log-out-outline" size={24} color={theme.primeFg} />{" "}
           Logout
         </SettingsButton>

apps/client/src/app/login.tsx

@@ -45,6 +45,7 @@ const LoginScreen = () => {
     <BaseBackground>
       <View className="flex-1 justify-center items-center p-8">
         <Text
+          testID="login-title"
           className="text-3xl font-bold mb-8"
           style={{ color: theme.textPrimary }}
         >
@@ -53,6 +54,7 @@ const LoginScreen = () => {
 
         {error && (
           <Text
+            testID="login-error-text"
             className="mb-4 text-center"
             style={{ color: theme.rejectButton }}
           >
@@ -61,6 +63,7 @@ const LoginScreen = () => {
         )}
 
         <CustomTextInput
+          testID="login-identifier-input"
           placeholder="E-Mail oder Benutzername"
           placeholderTextColor={theme.textMuted}
           text={identifier}
@@ -70,6 +73,7 @@ const LoginScreen = () => {
         />
 
         <CustomTextInput
+          testID="login-password-input"
           placeholder="Passwort"
           placeholderTextColor={theme.textMuted}
           text={password}
@@ -79,6 +83,7 @@ const LoginScreen = () => {
         />
 
         <AuthButton
+          testID="login-button"
           title="Anmelden"
           onPress={handleLogin}
           isLoading={isLoading}

apps/client/src/components/AuthButton.tsx

@@ -5,12 +5,14 @@ interface AuthButtonProps {
   title: string;
   onPress: () => void;
   isLoading?: boolean;
+  testID?: string;
 }
 
-const AuthButton = ({ title, onPress, isLoading = false }: AuthButtonProps) => {
+const AuthButton = ({ title, onPress, isLoading = false, testID }: AuthButtonProps) => {
   const { theme } = useThemeStore();
   return (
     <Pressable
+      testID={testID}
       onPress={onPress}
       disabled={isLoading}
       className="w-full rounded-lg p-4 mb-4 border-4"

apps/client/src/components/BaseButton.tsx

@@ -7,6 +7,7 @@ export type BaseButtonProps = {
   className?: string;
   onPress: () => void;
   solid?: boolean;
+  testID?: string;
 };
 
 const BaseButton = ({
@@ -14,10 +15,12 @@ const BaseButton = ({
   children,
   onPress,
   solid = false,
+  testID,
 }: BaseButtonProps) => {
   const { theme } = useThemeStore();
   return (
     <Pressable
+      testID={testID}
       className={`rounded-lg p-4 mb-4 border-4 ${className}`}
       onPress={onPress}
       style={{

apps/client/src/components/ChatBubble.tsx

@@ -8,6 +8,7 @@ type ChatBubbleProps = {
   children: React.ReactNode;
   className?: string;
   style?: ViewStyle;
+  testID?: string;
 };
 
 export function ChatBubble({
@@ -15,6 +16,7 @@ export function ChatBubble({
   children,
   className = "",
   style,
+  testID,
 }: ChatBubbleProps) {
   const { theme } = useThemeStore();
   const borderColor = side === "left" ? theme.chatBot : theme.primeFg;
@@ -25,6 +27,7 @@ export function ChatBubble({
 
   return (
     <View
+      testID={testID}
       className={`border-2 border-solid rounded-xl my-2 ${sideClass} ${className}`}
       style={[
         { borderColor, elevation: 8, backgroundColor: theme.secondaryBg },

apps/client/src/components/CustomTextInput.tsx

@@ -13,6 +13,7 @@ export type CustomTextInputProps = {
   secureTextEntry?: boolean;
   autoCapitalize?: TextInputProps["autoCapitalize"];
   keyboardType?: TextInputProps["keyboardType"];
+  testID?: string;
 };
 
 const CustomTextInput = (props: CustomTextInputProps) => {
@@ -21,6 +22,7 @@ const CustomTextInput = (props: CustomTextInputProps) => {
 
   return (
     <TextInput
+      testID={props.testID}
       className={`border border-solid rounded-2xl ${props.className}`}
       onChangeText={props.onValueChange}
       value={props.text}

apps/client/src/components/ProposedEventCard.tsx

@@ -31,6 +31,7 @@ const ActionButtons = ({
   return (
     <View className="flex-row mt-3 gap-2">
       <Pressable
+        testID="event-accept-button"
         onPress={onConfirm}
         disabled={isDisabled}
         className="flex-1 py-2 rounded-lg items-center"
@@ -47,6 +48,7 @@ const ActionButtons = ({
         </Text>
       </Pressable>
       <Pressable
+        testID="event-reject-button"
         onPress={onReject}
         disabled={isDisabled}
         className="flex-1 py-2 rounded-lg items-center"