AgentSkillsCN

vr-cross-platform-test

针对三种不同用户类型，对任意 VR 页面进行全面测试——桌面端的键盘与鼠标操作（Chrome 浏览器）、移动端的触屏操作，以及 Meta Quest 3 的控制器操控、手势追踪与视线光标交互。验证 A-Frame 场景能否正常加载，确保无严重 JavaScript 错误，同时测试各输入方式下的交互效果、导航菜单、区域链接，以及针对不同使用场景的无障碍适配性。当用户请求测试 VR 页面、验证 VR 跨平台兼容性、测试 Quest 控制器支持、开展移动 VR 测试，或进行全方位的 VR 输入测试时，均可使用此技能。

SKILL.md
--- frontmatter
name: vr-cross-platform-test
description: Fully test any VR page across three user types — desktop keyboard/mouse (Chrome), mobile touch user, and Meta Quest 3 (controllers, hand tracking, gaze cursor). Verifies A-Frame scene loads, zero critical JS errors, input-specific interactions, navigation menu, zone links, and accessibility per modality. Use when the user asks to test a VR page, verify VR cross-platform, test Quest controller support, test mobile VR, or run a comprehensive VR input test.

VR Cross-Platform Test

Test any VR page across three user types with input-method-specific assertions:

User TypeViewportInputKey Checks
Desktop (Chrome)1920x1080Keyboard + mouseWASD, shortcuts 0-9, M/Tab menu, F1 help, mouse look
Mobile (iPhone 14 Pro)393x852TouchJoystick, tap targets >= 44px, orientation warning, touch look-controls
Meta Quest 31832x1920Controllers / hands / gazeLaser pointers, thumbstick locomotion, snap turn, teleport, gaze fuse cursor, hand-tracking entities

Quick Start

Run against local server

bash
npx playwright test tests/vr_cross_platform_full.spec.ts

Run against remote

bash
VERIFY_REMOTE=1 npx playwright test tests/vr_cross_platform_full.spec.ts

Test a specific page

bash
VR_PAGE=/vr/movies.html npx playwright test tests/vr_cross_platform_full.spec.ts

Test a specific user type only

bash
npx playwright test tests/vr_cross_platform_full.spec.ts -g "Desktop"
npx playwright test tests/vr_cross_platform_full.spec.ts -g "Mobile"
npx playwright test tests/vr_cross_platform_full.spec.ts -g "Quest 3"

Configuration

Env VariableDefaultDescription
VERIFY_REMOTE(unset)Set to 1 to test https://findtorontoevents.ca
VR_PAGE/vr/VR page path to test (e.g. /vr/movies.html)
VR_TIMEOUT60000Navigation timeout (ms)
VR_WAIT6000Post-load wait for A-Frame init (ms)

What Each Section Tests

Section 1: Shared (all user types)

  • •Page returns HTTP 200
  • •Zero critical JS errors (filters non-critical: CORS, WebXR headless, Gamepad API, AudioContext, etc.)
  • •A-Frame <a-scene> loads (hasLoaded === true)
  • •Title contains "VR" or zone-relevant keyword
  • •No JS file 404s
  • •Loading screen hides after init

Section 2: Desktop (keyboard/mouse)

  • •WASD movement controls enabled on camera
  • •Keyboard shortcuts (1-6 zone jump, 0 center, F1 help, Escape close)
  • •Nav menu opens with M/Tab, closes with Escape
  • •Mouse look-controls enabled
  • •Gaze cursor ring attached to camera
  • •Zone portals have .clickable class
  • •Enhancement JS modules loaded

Section 3: Mobile (touch)

  • •Touch look-controls enabled on camera
  • •Joystick + action buttons exist
  • •Tap targets >= 44px
  • •Orientation warning in portrait
  • •Zone menu opens on tap, closes on X tap
  • •Mobile detection script loaded
  • •Mobile-specific UI elements present

Section 4: Quest 3 (controllers / hands / gaze)

  • •Left/right laser-controls entities (#left-hand, #right-hand)
  • •Raycaster configured for .clickable
  • •Gaze cursor with fuse enabled (1500ms)
  • •Hand-tracking entities created (#left-hand-tracking, #right-hand-tracking)
  • •Teleport surface + indicator exist
  • •Controller-support.js + vr-controls.js loaded
  • •VR-mode-ui enabled on scene
  • •zone-link / teleport-surface / look-at-camera components registered
  • •Simulated gamepad loop runs without crash
  • •VRControllerSupport global API available

VR Pages Available

PagePath
VR Hub/vr/
Mobile Hub/vr/mobile-index.html
Events/vr/events/
Movies/vr/movies.html
Creators/vr/creators.html
Stocks/vr/stocks-zone.html
Weather/vr/weather-zone.html
Wellness/vr/wellness/
Tutorial/vr/tutorial/
Movies TikTok/vr/movies-tiktok.html

Non-Critical Error Patterns (filtered out)

These errors are expected in headless Playwright and do not indicate real bugs:

  • •net::, CORS, Failed to fetch, NetworkError — network in headless
  • •immersive-vr, navigator.xr, NotAllowedError — WebXR requires real headset
  • •getGamepads — Gamepad API not available in headless
  • •AudioContext, play(), SpeechSynthesis — media restrictions
  • •ServiceWorker, ResizeObserver — benign browser warnings
  • •Script error — cross-origin script errors

When Tests Fail

FailureLikely CauseFix
Critical JS errorBroken script or missing dependencyCheck console output; use fix-toronto-events skill
A-Frame scene not loadedCDN down or script blockedVerify aframe CDN returns 200; check .htaccess
Missing controller entitiescontroller-support.js not loadedCheck script src paths; deploy if missing
Gaze cursor missingCamera entity misconfiguredInspect <a-camera> for <a-ring cursor> child
Mobile touch not enabledlook-controls missing touchEnabledCheck mobile page camera attributes
Teleport missingvr-controls.js not loadedVerify script tag exists; check 404s
404 on JS fileFile not deployedRun python tools/deploy_vr.py

Files

  • •Playwright spec: tests/vr_cross_platform_full.spec.ts
  • •Reference: reference.md