with one click
web-test-wallet-connect
// Connect wallet to Web3 DApp - navigate to DApp, click Connect Wallet, approve in MetaMask popup, verify connection. Can be used as a test case or as a precondition for other tests.
// Connect wallet to Web3 DApp - navigate to DApp, click Connect Wallet, approve in MetaMask popup, verify connection. Can be used as a test case or as a precondition for other tests.
Generate persistent test cases from project analysis, or add individual test cases interactively. Supports full project analysis or adding single test cases via prompt description with browser exploration.
Execute tests from persistent test cases. Reads ./tests/ directory, runs cleanup, wallet setup (if Web3), executes tests, and generates report.
Analyze ANY web project - detect if Web3 DApp, research dependencies via WebSearch, understand business functions from code AND UI screenshots, generate test requirements.
Clean up test sessions - kill browsers, stop dev servers, free ports, and optionally remove test data. Use this BEFORE starting new tests or AFTER completing tests.
Generate test report with clear visual indicators - ā for pass, ā for fail. Summarize results, document failures, provide recommendations.
Set up MetaMask wallet extension for Web3 DApp testing - download extension, import wallet from private key. Run at test start if tests/config.yaml has web3.enabled=true.
| name | web-test-wallet-connect |
| description | Connect wallet to Web3 DApp - navigate to DApp, click Connect Wallet, approve in MetaMask popup, verify connection. Can be used as a test case or as a precondition for other tests. |
| license | MIT |
| compatibility | Node.js 18+, Playwright |
| metadata | {"author":"AI Agent","version":"2.0.0"} |
| allowed-tools | Bash Read |
Connect MetaMask wallet to a Web3 DApp.
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
ā ALWAYS USE dapp-click COMMAND FOR CLICKING BUTTONS! ā
ā ā
ā ā
CORRECT (Use text/css/id selectors): ā
ā dapp-click "Connect Wallet" --wallet --headed --keep-open ā
ā dapp-click "MetaMask" --wallet --headed --keep-open ā
ā dapp-click --css "button[data-testid='connect']" ā
ā dapp-click --id "connect-btn" --wallet --headed --keep-open ā
ā ā
ā dapp-click uses text/CSS/ID selectors which are RELIABLE. ā
ā It will: ā
ā 1. Try text selector first (e.g., "Connect Wallet") ā
ā 2. Try CSS selector (e.g., "button.connect-btn") ā
ā 3. Try ID selector (e.g., "#connect-btn") ā
ā ā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
When tests/test-cases.yaml contains a wallet connection test case (e.g., WALLET-001), this skill is invoked to execute that test.
When a test case has preconditions: [WALLET-001 passed] or similar, the test executor should:
web3.enabled: true in configSKILL_DIR="<path-to-this-skill>"
# Navigate to DApp with wallet
node $SKILL_DIR/scripts/wallet-connect-helper.js wallet-navigate "http://localhost:3000" --wallet --headed --keep-open
# Click Connect Wallet button using text selector (PREFERRED METHOD)
node $SKILL_DIR/scripts/wallet-connect-helper.js dapp-click "Connect Wallet" --wallet --headed --keep-open
# If wallet modal appears, click MetaMask option
node $SKILL_DIR/scripts/wallet-connect-helper.js dapp-click "MetaMask" --wallet --headed --keep-open
# Approve connection in MetaMask popup
node $SKILL_DIR/scripts/wallet-connect-helper.js wallet-approve --wallet --headed --keep-open
# Verify connection
node $SKILL_DIR/scripts/wallet-connect-helper.js screenshot after-connect.jpg --wallet --headed --keep-open
SKILL_DIR="<path-to-this-skill>"
DAPP_URL="http://localhost:3000" # Your DApp URL
# Navigate to DApp with wallet extension loaded
node $SKILL_DIR/scripts/wallet-connect-helper.js wallet-navigate "$DAPP_URL" --wallet --headed --keep-open
Expected Output:
{
"success": true,
"url": "http://localhost:3000",
"screenshot": "dapp-home.jpg"
}
Use dapp-click with text selector - this is the PREFERRED method:
SKILL_DIR="<path-to-this-skill>"
# Try common button text labels
node $SKILL_DIR/scripts/wallet-connect-helper.js dapp-click "Connect Wallet" --wallet --headed --keep-open
# If that doesn't work, try other common labels:
# dapp-click "Connect" --wallet --headed --keep-open
# dapp-click "Sign In" --wallet --headed --keep-open
# dapp-click "Connect wallet" --wallet --headed --keep-open
Common Connect Button Labels (try in order):
If text selector fails, use CSS selector:
# Try CSS selectors
node $SKILL_DIR/scripts/wallet-connect-helper.js dapp-click --css "button[data-testid='connect']" --wallet --headed --keep-open
node $SKILL_DIR/scripts/wallet-connect-helper.js dapp-click --css ".connect-button" --wallet --headed --keep-open
ONLY as last resort - use coordinates with fallback:
# Take screenshot first to find coordinates
node $SKILL_DIR/scripts/wallet-connect-helper.js screenshot before-connect.jpg --wallet --headed --keep-open
# Then use dapp-click with fallback coordinates
node $SKILL_DIR/scripts/wallet-connect-helper.js dapp-click "Connect Wallet" --fallback-x 900 --fallback-y 50 --wallet --headed --keep-open
Many DApps show a wallet selection modal (Rainbow Kit, Privy, etc.):
Use dapp-click to select MetaMask option:
SKILL_DIR="<path-to-this-skill>"
# Try common MetaMask button labels
node $SKILL_DIR/scripts/wallet-connect-helper.js dapp-click "MetaMask" --wallet --headed --keep-open
# If that doesn't work, try other common labels:
# dapp-click "Injected Wallet" --wallet --headed --keep-open
# dapp-click "Browser Wallet" --wallet --headed --keep-open
# dapp-click "Injected" --wallet --headed --keep-open
Common Modal Options (try in order):
If text selector fails, use fallback coordinates:
# Take screenshot to find coordinates
node $SKILL_DIR/scripts/wallet-connect-helper.js screenshot wallet-modal.jpg --wallet --headed --keep-open
# Use dapp-click with fallback
node $SKILL_DIR/scripts/wallet-connect-helper.js dapp-click "MetaMask" --fallback-x 400 --fallback-y 300 --wallet --headed --keep-open
SKILL_DIR="<path-to-this-skill>"
# Auto-approve the MetaMask connection popup
node $SKILL_DIR/scripts/wallet-connect-helper.js wallet-approve --wallet --headed --keep-open
What this does:
SKILL_DIR="<path-to-this-skill>"
# Take screenshot to verify wallet is connected
node $SKILL_DIR/scripts/wallet-connect-helper.js screenshot after-connect.jpg --wallet --headed --keep-open
Verification Criteria:
If connection fails, retry up to 3 times:
# Attempt 1 failed? Try again
node $SKILL_DIR/scripts/wallet-connect-helper.js wallet-navigate "$DAPP_URL" --wallet --headed --keep-open
# ... repeat steps 2-6
# After 3 failures, STOP and report error
SKILL_DIR="<path-to-this-skill>"
DAPP_URL="http://localhost:3000"
# 1. Navigate to DApp
node $SKILL_DIR/scripts/wallet-connect-helper.js wallet-navigate "$DAPP_URL" --wallet --headed --keep-open
# 2. Click Connect Wallet using text selector (PREFERRED)
node $SKILL_DIR/scripts/wallet-connect-helper.js dapp-click "Connect Wallet" --wallet --headed --keep-open
# Output: { "success": true, "method": "text selector: button:has-text(\"Connect Wallet\")" }
# 3. If wallet modal appears, click MetaMask option
node $SKILL_DIR/scripts/wallet-connect-helper.js wait 1000 --wallet --headed --keep-open
node $SKILL_DIR/scripts/wallet-connect-helper.js dapp-click "MetaMask" --wallet --headed --keep-open
# Output: { "success": true, "method": "text selector: text=\"MetaMask\"" }
# 4. Approve in MetaMask
node $SKILL_DIR/scripts/wallet-connect-helper.js wallet-approve --wallet --headed --keep-open
# 5. Verify connection
node $SKILL_DIR/scripts/wallet-connect-helper.js screenshot connected.jpg --wallet --headed --keep-open
# AI verifies: "Wallet address 0x1234...abcd visible - SUCCESS"
# If dapp-click "Connect Wallet" fails, use fallback coordinates:
node $SKILL_DIR/scripts/wallet-connect-helper.js screenshot find-button.jpg --wallet --headed --keep-open
# AI analyzes screenshot: "Connect button at x=900, y=50"
node $SKILL_DIR/scripts/wallet-connect-helper.js dapp-click "Connect Wallet" --fallback-x 900 --fallback-y 50 --wallet --headed --keep-open
| Command | Description |
|---|---|
dapp-click "<text>" | PREFERRED - Click element by text (e.g., "Connect Wallet", "MetaMask") |
dapp-click --css "<selector>" | Click element by CSS selector |
dapp-click "<text>" --fallback-x X --fallback-y Y | Click with coordinate fallback |
wallet-navigate <url> | Navigate to DApp with wallet extension |
wallet-approve | Auto-approve MetaMask popup |
| Command | Description |
|---|---|
wallet-switch-network <name> | Switch network |
wallet-get-address | Get connected address |
screenshot [name] | Take screenshot for AI analysis |
wait <ms> | Wait milliseconds |
# By text (try multiple labels)
dapp-click "Connect Wallet" --wallet --headed --keep-open
dapp-click "MetaMask" --wallet --headed --keep-open
# By CSS selector
dapp-click --css "button[data-testid='connect']" --wallet --headed --keep-open
dapp-click --css ".connect-button" --wallet --headed --keep-open
# With fallback coordinates (when selectors fail)
dapp-click "Connect" --fallback-x 900 --fallback-y 50 --wallet --headed --keep-open
dapp-click --css "button.connect-btn"wait 2000./test-output/extensions/metamask/ existsweb3.enabled: true in configAfter wallet connection is verified:
wallet-approve--keep-open) for subsequent test steps--wallet --headed flags for wallet operations