// Test the Expensify App using Playwright browser automation. Use when user requests browser testing, after making frontend changes, or when debugging UI issues
| name | playwright-app-testing |
| description | Test the Expensify App using Playwright browser automation. Use when user requests browser testing, after making frontend changes, or when debugging UI issues |
| alwaysApply | false |
Use Playwright testing when:
Proactively use after making frontend changes to verify your work functions correctly.
Before using Playwright tools, verify the dev server is running:
ps aux | grep "webpack" | grep -v grep
If server not running: Inform user to start with cd App && npm run web
https://dev.new.expensify.com:8082/https://dev.new.expensify.com:8082/ in the browserDo NOT add arbitrary waits after actions. Instead, take a snapshot to check the result and only add short waits if the page hasn't updated yet.
When signing in to dev environment:
user+throwaway<random>@gmail.com)
000000SKIP_ONBOARDING env flag is set to false by default in .env. When false, onboarding screens will appear after sign-in for new accounts. Unless you are specifically asked to test onboarding, update the flag to true before starting the dev server so that onboarding is bypassed entirely:
sed -i '' 's/SKIP_ONBOARDING=false/SKIP_ONBOARDING=true/' .env
false:
sed -i '' 's/SKIP_ONBOARDING=true/SKIP_ONBOARDING=false/' .env
grep SKIP_ONBOARDING .env
SKIP_ONBOARDING in .env, the web dev server must be restarted for the change to take effect.Scenario 1: User requests testing
User: "Test sign in to app"
→ Use this skill to verify server and test sign-in flow
Scenario 2: After making UI changes
You: "I've updated the expense form validation"
→ Proactively use this skill to verify the changes work in browser
Scenario 3: Investigating bug
User: "The submit button doesn't work on this page"
→ Use this skill to reproduce and verify the issue
Skip Playwright for:
Provides coding standards for React Native — performance patterns, consistency rules, and clean React architecture. Use when writing, modifying, or reviewing code.
Records iOS/Android native MP4 evidence for test/repro flows extracted from an Expensify GitHub PR or issue. Use when the user asks to "record the flow for PR
Use when measuring a Sentry performance span locally with an agent-device replay flow on iOS simulator or Android emulator.
Drive iOS and Android devices for the Expensify App - testing, debugging, performance profiling, bug reproduction, and feature verification. Use when the developer needs to interact with the mobile app on a device.
Analyze Sentry issues, spans, crashes, and performance metrics. Use when user requests check in Sentry, asks about performance metrics and spans or asks about crash rates.
Onyx state management patterns — useOnyx hook, action files, optimistic updates, collections, and offline-first architecture. Use when working with Onyx connections, writing action files, debugging state, or implementing API calls with optimistic data.