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 so the screenshot script can log in:
e2e/.env.developmentbash
PLAYWRIGHT_USERNAME=your-test-user@example.com
PLAYWRIGHT_PASSWORD=your-password在 中配置凭证,方便截图脚本完成登录:
e2e/.env.developmentbash
PLAYWRIGHT_USERNAME=your-test-user@example.com
PLAYWRIGHT_PASSWORD=your-passwordGenerate the Screenshot Script
生成截图脚本
bash
iblai builds screenshotThis creates with viewport presets for iPhone,
iPad, Android Phone, Android Tablet, Apple Watch, and Desktop.
e2e/screenshots.spec.tsbash
iblai builds screenshot执行后会生成 文件,内置iPhone、iPad、安卓手机、安卓平板、Apple Watch、桌面端的视口预设。
e2e/screenshots.spec.tsAuthentication
身份验证
The generated screenshot spec must authenticate before capturing. The
project's handles login automatically -- it navigates
to the app, follows the SSO redirect, fills in username/password credentials,
and saves the authenticated browser state to .
e2e/auth.setup.tsplaywright/.auth/Update to use the saved auth state so every
screenshot is taken as a logged-in user:
e2e/screenshots.spec.tstypescript
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 definitionsThen 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.tsOr configure the screenshot spec as a Playwright project that depends on
the setup project in :
e2e/playwright.config.tstypescript
{
name: 'screenshots',
use: {
storageState: 'playwright/.auth/user-setup-chromium.json',
},
dependencies: ['setup-chromium'],
testMatch: ['screenshots.spec.ts'],
},生成的截图脚本必须在截图前完成身份验证。项目的 会自动处理登录流程:它会跳转至应用、遵循SSO重定向、填写用户名/密码凭证,然后将已验证的浏览器状态保存到 路径下。
e2e/auth.setup.tsplaywright/.auth/更新 来调用已保存的验证状态,确保所有截图都是以登录用户身份抓取的:
e2e/screenshots.spec.tstypescript
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或者你也可以在 中将截图脚本配置为依赖验证项目的Playwright项目:
e2e/playwright.config.tstypescript
{
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 /analyticsbash
iblai builds screenshot --pages / /profile /notifications /analyticsRun the Capture
执行截图
-
Start the dev server:bash
pnpm dev -
Run the screenshot spec:bash
pnpm exec playwright test e2e/screenshots.spec.ts -
Screenshots are saved to.
screenshots/<device-slug>/<page-name>.png
-
启动开发服务:bash
pnpm dev -
运行截图脚本:bash
pnpm exec playwright test e2e/screenshots.spec.ts -
截图会保存到路径下。
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.tsViewport Presets
视口预设
| Device | Width | Height |
|---|---|---|
| iPhone 6.7" | 430 | 932 |
| iPhone 6.1" | 390 | 844 |
| iPad 12.9" | 1024 | 1366 |
| Android Phone | 412 | 915 |
| Android Tablet | 800 | 1280 |
| Apple Watch 49mm | 205 | 251 |
| Apple Watch 45mm | 198 | 242 |
| Desktop | 1440 | 900 |
| 设备 | 宽度 | 高度 |
|---|---|---|
| iPhone 6.7" | 430 | 932 |
| iPhone 6.1" | 390 | 844 |
| iPad 12.9" | 1024 | 1366 |
| Android 手机 | 412 | 915 |
| Android 平板 | 800 | 1280 |
| Apple Watch 49mm | 205 | 251 |
| Apple Watch 45mm | 198 | 242 |
| 桌面端 | 1440 | 900 |
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
手动截图
-
Start the iOS dev build:bash
iblai builds ios dev -
Log in when the auth page appears (first run only).
-
Navigate to the page you want to capture in the Simulator.
-
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.pngThis captures the Simulator window with its title bar showing the device name and iOS version (e.g. "iPhone 16 Pro Max - iOS 18.0").
-
启动iOS开发构建:bash
iblai builds ios dev -
首次运行时在验证页出现时完成登录。
-
在模拟器中导航到你需要截图的页面。
-
抓取包含标题栏的完整模拟器窗口: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 Size | Simulator Device | Resolution |
|---|---|---|
| 6.9" | iPhone 16 Pro Max | 1320 x 2868 |
| 6.3" | iPhone 16 Pro | 1206 x 2622 |
| 6.7" | iPhone 15 Plus | 1290 x 2796 |
| 6.5" | iPhone 15 Pro Max | 1290 x 2796 |
| 5.5" | iPhone 8 Plus | 1242 x 2208 |
| 12.9" iPad | iPad Pro 12.9" (6th gen) | 2048 x 2732 |
| 11" iPad | iPad Pro 11" (4th gen) | 1668 x 2388 |
App Store Connect要求提供特定设备尺寸的截图,可使用以下模拟器:
| 屏幕尺寸 | 模拟器设备 | 分辨率 |
|---|---|---|
| 6.9" | iPhone 16 Pro Max | 1320 x 2868 |
| 6.3" | iPhone 16 Pro | 1206 x 2622 |
| 6.7" | iPhone 15 Plus | 1290 x 2796 |
| 6.5" | iPhone 15 Pro Max | 1290 x 2796 |
| 5.5" | iPhone 8 Plus | 1242 x 2208 |
| 12.9" iPad | iPad Pro 12.9" (第6代) | 2048 x 2732 |
| 11" iPad | iPad 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"
doneBoot the app in the simulator first withso each simulator has the app installed.iblai builds ios dev
在所有要求的模拟器上抓取同一页面的截图:
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
手动截图
-
Start the Android dev build:bash
iblai builds android dev -
Log in when the auth page appears (first run only).
-
Navigate to the page you want to capture in the emulator.
-
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.pngOr on Linux, useto capture the emulator window:xdotoolbashimport -window "$(xdotool search --name 'Android Emulator')" ~/Desktop/android-screenshot.png
-
启动Android开发构建:bash
iblai builds android dev -
首次运行时在验证页出现时完成登录。
-
在模拟器中导航到你需要截图的页面。
-
抓取包含标题栏的完整模拟器窗口:bash
# macOS — 抓取带标题栏的模拟器窗口(会显示设备名称) screencapture -l $(osascript -e 'tell app "qemu-system-aarch64" to id of window 1') ~/Desktop/android-screenshot.png如果你使用Linux,可通过抓取模拟器窗口:xdotoolbashimport -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:
| Type | Resolution | Emulator Device |
|---|---|---|
| Phone | 1080 x 2400 | Pixel 8 |
| Phone (larger) | 1440 x 3120 | Pixel 8 Pro |
| 7" Tablet | 1200 x 1920 | Nexus 7 |
| 10" Tablet | 1600 x 2560 | Pixel Tablet |
Google Play要求提供手机和平板两类截图:
| 类型 | 分辨率 | 模拟器设备 |
|---|---|---|
| 手机 | 1080 x 2400 | Pixel 8 |
| 大屏手机 | 1440 x 3120 | Pixel 8 Pro |
| 7" 平板 | 1200 x 1920 | Nexus 7 |
| 10" 平板 | 1600 x 2560 | Pixel 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
doneThe app must be installed on each emulator first. Runonce per emulator to install it.iblai builds android dev
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
命令汇总
| Task | Command |
|---|---|
| Generate Playwright screenshot script | |
| Generate with custom pages | |
| Run web screenshots | |
| iOS Simulator screenshot | |
| Android emulator screenshot | |
| Start iOS dev build | |
| Start Android dev build | |
| 任务 | 命令 |
|---|---|
| 生成Playwright截图脚本 | |
| 生成包含自定义页面的截图脚本 | |
| 运行Web端截图 | |
| iOS模拟器截图 | |
| Android模拟器截图 | |
| 启动iOS开发构建 | |
| 启动Android开发构建 | |