Snapshot Web

1#!/usr/bin/env bash
2# Run an Expo app's web target and capture a browser screenshot. (Phase 4 -
3# only for eval cases whose runtime.platforms includes "web".)
4#
5# Usage: snapshot-web.sh <project-path> <output-png> [port] [settle-seconds]
6#
7# Starts Metro with `expo start --web`, waits for the dev server to respond,
8# then screenshots with Playwright's CLI at an iPhone-ish viewport. The first
9# run downloads Chromium via `bunx playwright install chromium`.
10set -uo pipefail
11
12PROJECT_PATH="${1:?usage: snapshot-web.sh <project-path> <output-png> [port] [settle-seconds]}"
13OUT="${2:?usage: snapshot-web.sh <project-path> <output-png> [port] [settle-seconds]}"
14PORT="${3:-8081}"
15SETTLE="${4:-8}"
16SERVER_TIMEOUT="${EXPO_SKILL_EVAL_BUNDLE_TIMEOUT:-240}"
17LOG="${OUT%.png}.metro.log"
18
19mkdir -p "$(dirname "$OUT")"
20
21# Free the port up front in case a previous run (or a crash) left Metro on it,
22# so `expo start` binds the port we expect instead of silently incrementing.
23# Runs inside this script, so the eval harness never needs ad-hoc lsof/kill.
24lsof -ti "tcp:$PORT" -sTCP:LISTEN 2>/dev/null | xargs kill -9 2>/dev/null || true
25
26bunx playwright install chromium >/dev/null 2>&1 || true
27
28(cd "$PROJECT_PATH" && exec env -u CI bunx expo start --port "$PORT" --web) </dev/null >"$LOG" 2>&1 &
29METRO_PID=$!
30cleanup() {
31  kill "$METRO_PID" 2>/dev/null
32  pkill -f "expo start --port $PORT" 2>/dev/null
33  wait "$METRO_PID" 2>/dev/null
34}
35trap cleanup EXIT
36
37DEADLINE=$((SECONDS + SERVER_TIMEOUT))
38until curl -sf "http://localhost:$PORT" >/dev/null; do
39  if ! kill -0 "$METRO_PID" 2>/dev/null || ((SECONDS > DEADLINE)); then
40    echo "error: web dev server did not come up. Log tail:" >&2
41    tail -40 "$LOG" >&2
42    exit 1
43  fi
44  sleep 2
45done
46
47STATUS=0
48bunx playwright screenshot \
49  --browser chromium \
50  --viewport-size "390,844" \
51  --wait-for-timeout "$((SETTLE * 1000))" \
52  "http://localhost:$PORT" "$OUT" || STATUS=1
53
54# Keep parity with the device snapshot scripts: cap the largest dimension so
55# screenshots fit the eval viewer's window.
56if [[ -f "$OUT" ]]; then
57  sips -Z "${EXPO_SKILL_EVAL_MAX_DIM:-600}" "$OUT" >/dev/null 2>&1 || true
58fi
59echo "screenshot: $OUT"
60echo "metro log: $LOG"
61exit "$STATUS"