iblai-screenshot

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

/iblai-screenshot

/iblai-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.
为你的 ibl.ai 应用抓取适用于应用商店上架、文档和营销场景的截图,覆盖纯Web端、iOS(App Store)和Android(Google Play)平台。
所有截图都需要先完成登录,确保你抓取的是实际应用界面而非登录页。各平台的登录逻辑可参考身份验证章节。

Web Screenshots (Playwright)

Web端截图(Playwright)

Use Playwright to capture screenshots at multiple viewport sizes from the running dev server.
使用 Playwright 从运行中的开发服务端抓取多视口尺寸的截图。

Prerequisites

前置条件

Set credentials in
e2e/.env.development
so the screenshot script can log in:
bash
PLAYWRIGHT_USERNAME=your-test-user@example.com
PLAYWRIGHT_PASSWORD=your-password
e2e/.env.development
中配置凭证,方便截图脚本完成登录:
bash
PLAYWRIGHT_USERNAME=your-test-user@example.com
PLAYWRIGHT_PASSWORD=your-password

Generate the Screenshot Script

生成截图脚本

bash
iblai builds screenshot
This creates
e2e/screenshots.spec.ts
with viewport presets for iPhone, iPad, Android Phone, Android Tablet, Apple Watch, and Desktop.
bash
iblai builds screenshot
执行后会生成
e2e/screenshots.spec.ts
文件,内置iPhone、iPad、安卓手机、安卓平板、Apple Watch、桌面端的视口预设。

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:
typescript
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:
bash
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
:
typescript
{
  name: 'screenshots',
  use: {
    storageState: 'playwright/.auth/user-setup-chromium.json',
  },
  dependencies: ['setup-chromium'],
  testMatch: ['screenshots.spec.ts'],
},
生成的截图脚本必须在截图前完成身份验证。项目的
e2e/auth.setup.ts
会自动处理登录流程:它会跳转至应用、遵循SSO重定向、填写用户名/密码凭证,然后将已验证的浏览器状态保存到
playwright/.auth/
路径下。
更新
e2e/screenshots.spec.ts
来调用已保存的验证状态,确保所有截图都是以登录用户身份抓取的:
typescript
import { test } from "@playwright/test";

// 调用 auth.setup.ts 生成的预验证存储状态
test.use({
  storageState: "playwright/.auth/user-setup-chromium.json",
});

// ... 视口和截图定义
然后在执行截图前先运行身份验证脚本:
bash
pnpm exec playwright test e2e/auth.setup.ts --project=setup-chromium
pnpm exec playwright test e2e/screenshots.spec.ts
或者你也可以在
e2e/playwright.config.ts
中将截图脚本配置为依赖验证项目的Playwright项目:
typescript
{
  name: 'screenshots',
  use: {
    storageState: 'playwright/.auth/user-setup-chromium.json',
  },
  dependencies: ['setup-chromium'],
  testMatch: ['screenshots.spec.ts'],
},

Customize Pages

自定义页面

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

Run the Capture

执行截图

  1. Start the dev server:
    bash
    pnpm dev
  2. Run the screenshot spec:
    bash
    pnpm exec playwright test e2e/screenshots.spec.ts
  3. Screenshots are saved to
    screenshots/<device-slug>/<page-name>.png
    .
  1. 启动开发服务:
    bash
    pnpm dev
  2. 运行截图脚本:
    bash
    pnpm exec playwright test e2e/screenshots.spec.ts
  3. 截图会保存到
    screenshots/<device-slug>/<page-name>.png
    路径下。

Custom Base URL

自定义基础URL

Capture from a staging or production deployment:
bash
SCREENSHOT_BASE_URL=https://staging.myapp.com pnpm exec playwright test e2e/screenshots.spec.ts
从预发布或生产环境抓取截图:
bash
SCREENSHOT_BASE_URL=https://staging.myapp.com pnpm exec playwright test e2e/screenshots.spec.ts

Viewport Presets

视口预设

DeviceWidthHeight
iPhone 6.7"430932
iPhone 6.1"390844
iPad 12.9"10241366
Android Phone412915
Android Tablet8001280
Apple Watch 49mm205251
Apple Watch 45mm198242
Desktop1440900

设备宽度高度
iPhone 6.7"430932
iPhone 6.1"390844
iPad 12.9"10241366
Android 手机412915
Android 平板8001280
Apple Watch 49mm205251
Apple Watch 45mm198242
桌面端1440900

iOS Screenshots (Xcode Simulator)

iOS端截图(Xcode 模拟器)

Capture screenshots directly from the iOS Simulator for App Store Connect.
直接从iOS模拟器中抓取适用于App Store Connect的截图。

Prerequisites

前置条件

  • Tauri iOS project initialized (
    iblai builds ios init
    )
  • Xcode with simulators installed
  • 已初始化Tauri iOS项目(
    iblai builds ios init
  • 已安装Xcode及配套模拟器

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.
应用通过 iblai.app 实现SSO登录。模拟器启动后,WebView会重定向到登录页,输入用户名和密码完成登录(如有需要可点击「Continue with Password」),之后应用会跳转回已验证的首页。会话会保存在模拟器的WebView存储中,每台模拟器设备仅需登录一次。

Take a Screenshot

手动截图

  1. Start the iOS dev build:
    bash
    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:
    bash
    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").
  1. 启动iOS开发构建:
    bash
    iblai builds ios dev
  2. 首次运行时在验证页出现时完成登录。
  3. 在模拟器中导航到你需要截图的页面。
  4. 抓取包含标题栏的完整模拟器窗口:
    bash
    screencapture -l $(osascript -e 'tell app "Simulator" to id of window 1') ~/Desktop/ios-screenshot.png
    该命令会抓取模拟器窗口,标题栏会显示设备名称和iOS版本(例如「iPhone 16 Pro Max - iOS 18.0」)。

Capture All Required Sizes

抓取所有要求的尺寸

App Store Connect requires screenshots for specific device sizes. Use these simulators:
Display SizeSimulator DeviceResolution
6.9"iPhone 16 Pro Max1320 x 2868
6.3"iPhone 16 Pro1206 x 2622
6.7"iPhone 15 Plus1290 x 2796
6.5"iPhone 15 Pro Max1290 x 2796
5.5"iPhone 8 Plus1242 x 2208
12.9" iPadiPad Pro 12.9" (6th gen)2048 x 2732
11" iPadiPad Pro 11" (4th gen)1668 x 2388
App Store Connect要求提供特定设备尺寸的截图,可使用以下模拟器:
屏幕尺寸模拟器设备分辨率
6.9"iPhone 16 Pro Max1320 x 2868
6.3"iPhone 16 Pro1206 x 2622
6.7"iPhone 15 Plus1290 x 2796
6.5"iPhone 15 Pro Max1290 x 2796
5.5"iPhone 8 Plus1242 x 2208
12.9" iPadiPad Pro 12.9" (第6代)2048 x 2732
11" iPadiPad Pro 11" (第4代)1668 x 2388

Batch Capture Script

批量截图脚本

Capture the same page across all required simulators:
bash
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.

在所有要求的模拟器上抓取同一页面的截图:
bash
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
  # 抓取带标题栏的模拟器窗口
  screencapture -l $(osascript -e 'tell app "Simulator" to id of window 1') "screenshots/ios-${slug}.png"
  xcrun simctl shutdown "$device"
done
请先使用
iblai builds ios dev
命令在模拟器中启动应用,确保所有模拟器都已安装该应用。

Android Screenshots (Emulator)

Android端截图(模拟器)

Capture screenshots from the Android emulator for Google Play Console.
从Android模拟器中抓取适用于Google Play Console的截图。

Prerequisites

前置条件

  • Tauri Android project initialized (
    iblai builds android init
    )
  • Android Studio with emulators configured
  • 已初始化Tauri Android项目(
    iblai builds android init
  • 已安装Android Studio并配置好模拟器

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.
和iOS的SSO流程一致:首次启动时WebView会重定向到登录页,输入用户名和密码完成登录后,会话会保存在模拟器的WebView存储中,后续运行无需重复登录。

Take a Screenshot

手动截图

  1. Start the Android dev build:
    bash
    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:
    bash
    # 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:
    bash
    import -window "$(xdotool search --name 'Android Emulator')" ~/Desktop/android-screenshot.png
  1. 启动Android开发构建:
    bash
    iblai builds android dev
  2. 首次运行时在验证页出现时完成登录。
  3. 在模拟器中导航到你需要截图的页面。
  4. 抓取包含标题栏的完整模拟器窗口:
    bash
    # macOS — 抓取带标题栏的模拟器窗口(会显示设备名称)
    screencapture -l $(osascript -e 'tell app "qemu-system-aarch64" to id of window 1') ~/Desktop/android-screenshot.png
    如果你使用Linux,可通过
    xdotool
    抓取模拟器窗口:
    bash
    import -window "$(xdotool search --name 'Android Emulator')" ~/Desktop/android-screenshot.png

Required Sizes for Google Play

Google Play要求的尺寸

Google Play requires screenshots for phones and tablets:
TypeResolutionEmulator Device
Phone1080 x 2400Pixel 8
Phone (larger)1440 x 3120Pixel 8 Pro
7" Tablet1200 x 1920Nexus 7
10" Tablet1600 x 2560Pixel Tablet
Google Play要求提供手机和平板两类截图:
类型分辨率模拟器设备
手机1080 x 2400Pixel 8
大屏手机1440 x 3120Pixel 8 Pro
7" 平板1200 x 1920Nexus 7
10" 平板1600 x 2560Pixel Tablet

Batch Capture Script

批量截图脚本

bash
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.

bash
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
  # 抓取带标题栏的模拟器窗口
  screencapture -l $(osascript -e 'tell app "qemu-system-aarch64" to id of window 1') "screenshots/android-${avd}.png"
  adb emu kill
done
应用必须提前安装到每台模拟器中,每个模拟器首次运行前请先执行
iblai builds android dev
完成安装。

Summary of Commands

命令汇总

TaskCommand
Generate Playwright screenshot script
iblai builds screenshot
Generate with custom pages
iblai builds screenshot --pages / /profile
Run web screenshots
pnpm exec playwright test e2e/screenshots.spec.ts
iOS Simulator screenshot
xcrun simctl io booted screenshot output.png
Android emulator screenshot
adb exec-out screencap -p > output.png
Start iOS dev build
iblai builds ios dev
Start Android dev build
iblai builds android dev
任务命令
生成Playwright截图脚本
iblai builds screenshot
生成包含自定义页面的截图脚本
iblai builds screenshot --pages / /profile
运行Web端截图
pnpm exec playwright test e2e/screenshots.spec.ts
iOS模拟器截图
xcrun simctl io booted screenshot output.png
Android模拟器截图
adb exec-out screencap -p > output.png
启动iOS开发构建
iblai builds ios dev
启动Android开发构建
iblai builds android dev