Iblai Marketing Screenshot

/iblai-marketing-screenshot

Capture screenshots of your ibl.ai app for app store listings, documentation, and marketing. Covers pure web, iOS (App Store), and Android (Google Play).

All screenshots require logging in first so you capture the actual app, not the login screen. See the Authentication section for each platform.

Web Screenshots (Playwright)

Use Playwright to capture screenshots at multiple viewport sizes from the running dev server.

Prerequisites

Set credentials in e2e/.env.development so the screenshot script can log in:

PLAYWRIGHT_USERNAME=your-test-user@example.com
PLAYWRIGHT_PASSWORD=your-password

Generate the Screenshot Script

iblai builds screenshot

This creates e2e/screenshots.spec.ts with viewport presets for iPhone, iPad, Android Phone, Android Tablet, Apple Watch, and Desktop.

Authentication

The generated screenshot spec must authenticate before capturing. The project's e2e/auth.setup.ts handles login automatically -- it navigates to the app, follows the SSO redirect, fills in username/password credentials, and saves the authenticated browser state to playwright/.auth/.

Update e2e/screenshots.spec.ts to use the saved auth state so every screenshot is taken as a logged-in user:

import { test } from "@playwright/test";

// Use the pre-authenticated storage state from auth.setup.ts
test.use({
  storageState: "playwright/.auth/user-setup-chromium.json",
});

// ... viewport and screenshot definitions

Then run auth setup before the screenshots:

pnpm exec playwright test e2e/auth.setup.ts --project=setup-chromium
pnpm exec playwright test e2e/screenshots.spec.ts

Or configure the screenshot spec as a Playwright project that depends on the setup project in e2e/playwright.config.ts:

{
  name: 'screenshots',
  use: {
    storageState: 'playwright/.auth/user-setup-chromium.json',
  },
  dependencies: ['setup-chromium'],
  testMatch: ['screenshots.spec.ts'],
},

Customize Pages

iblai builds screenshot --pages / /profile /notifications /analytics

Run the Capture

1. Start the dev server:

   pnpm dev
   

2. Run the screenshot spec:

   pnpm exec playwright test e2e/screenshots.spec.ts
   

3. Screenshots are saved to screenshots/<device-slug>/<page-name>.png.

Custom Base URL

Capture from a staging or production deployment:

SCREENSHOT_BASE_URL=https://staging.myapp.com pnpm exec playwright test e2e/screenshots.spec.ts

Viewport Presets

iOS Screenshots (Xcode Simulator)

Capture screenshots directly from the iOS Simulator for App Store Connect.

Prerequisites

• Tauri iOS project initialized (iblai builds ios init)
• Xcode with simulators installed

Authentication

The app uses SSO login via iblai.app. When the Simulator launches, the WebView redirects to the login page. Log in with your username and password (click "Continue with Password" if needed), then the app redirects back to the authenticated home page. The session persists in the Simulator's WebView storage -- you only need to log in once per simulator device.

Take a Screenshot

1. Start the iOS dev build:

   iblai builds ios dev
   

2. Log in when the auth page appears (first run only).

3. Navigate to the page you want to capture in the Simulator.

4. Capture the full Simulator window including the title bar:

   screencapture -l $(osascript -e 'tell app "Simulator" to id of window 1') ~/Desktop/ios-screenshot.png
   

   This captures the Simulator window with its title bar showing the device name and iOS version (e.g. "iPhone 16 Pro Max - iOS 18.0").

Capture All Required Sizes

App Store Connect requires screenshots for specific device sizes. Use these simulators:

Batch Capture Script

Capture the same page across all required simulators:

DEVICES=(
  "iPhone 16 Pro Max"
  "iPhone 16 Pro"
  "iPhone 15 Plus"
  "iPad Pro 12.9-inch (6th generation)"
  "iPad Pro 11-inch (4th generation)"
)

for device in "${DEVICES[@]}"; do
  slug=$(echo "$device" | tr ' ' '-' | tr '[:upper:]' '[:lower:]')
  xcrun simctl boot "$device" 2>/dev/null
  sleep 5
  # Capture the Simulator window with its title bar
  screencapture -l $(osascript -e 'tell app "Simulator" to id of window 1') "screenshots/ios-${slug}.png"
  xcrun simctl shutdown "$device"
done

Boot the app in the simulator first with iblai builds ios dev so each simulator has the app installed.

Android Screenshots (Emulator)

Capture screenshots from the Android emulator for Google Play Console.

Prerequisites

• Tauri Android project initialized (iblai builds android init)
• Android Studio with emulators configured

Authentication

Same SSO flow as iOS -- the WebView redirects to the login page on first launch. Log in with your username and password, and the session persists in the emulator's WebView storage for subsequent runs.

Take a Screenshot

1. Start the Android dev build:

   iblai builds android dev
   

2. Log in when the auth page appears (first run only).

3. Navigate to the page you want to capture in the emulator.

4. Capture the full emulator window including the title bar:

   # macOS — capture the emulator window with its title bar (shows device name)
   screencapture -l $(osascript -e 'tell app "qemu-system-aarch64" to id of window 1') ~/Desktop/android-screenshot.png
   

   Or on Linux, use xdotool to capture the emulator window:

   import -window "$(xdotool search --name 'Android Emulator')" ~/Desktop/android-screenshot.png
   

Required Sizes for Google Play

Google Play requires screenshots for phones and tablets:

Batch Capture Script

EMULATORS=(
  "Pixel_8"
  "Pixel_8_Pro"
  "Pixel_Tablet"
)

for avd in "${EMULATORS[@]}"; do
  emulator -avd "$avd" -no-audio -no-boot-anim &
  adb wait-for-device
  sleep 10
  # Capture emulator window with title bar
  screencapture -l $(osascript -e 'tell app "qemu-system-aarch64" to id of window 1') "screenshots/android-${avd}.png"
  adb emu kill
done

The app must be installed on each emulator first. Run iblai builds android dev once per emulator to install it.

Summary of Commands