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/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);
+  }
+}