Chrome Testing Skill

Reference for manual QA testing of Telegram Mini Apps using Chrome browser automation tools.

Quick Reference: MCP Tools

Testing Environments

Local Development (Fastest)

URL: http://localhost:5173
SDK: Mocked via @telegram-apps/sdk
Use: Daily development testing

TMA Studio (Realistic)

Download: https://github.com/erfanmola/TMA-Studio
Features: 90%+ Mini App API coverage
Use: Pre-release testing

Real Device (Final)

Requires: HTTPS via Cloudflare Tunnel
Setup: cloudflared tunnel --url http://localhost:5173
Use: Final validation

Standard Test Workflow

1. Setup

navigate("http://localhost:5173")
screenshot() -> verify page loads

2. UI Interaction

computer(click, element)
screenshot() -> verify state changed

3. API Verification

computer(click, saveButton)
read_network_requests() ->
  - Verify: PUT /api/v1/miniapp/chats/{id}/settings
  - Check: Authorization: tma {initData}
  - Status: 200 OK

4. Error Checking

read_console_messages() ->
  - No console.error entries
  - No "Failed to fetch" messages

5. State Inspection

javascript_tool("window.appState?.selectedChat")
javascript_tool("localStorage.getItem('key')")

API Testing Checklist

Request Verification

Response Verification

API Endpoints (Example)

GET    /api/v1/miniapp/chats              - List user's chats
GET    /api/v1/miniapp/chats/{id}         - Get chat details
GET    /api/v1/miniapp/chats/{id}/settings - Get chat settings
PUT    /api/v1/miniapp/chats/{id}/settings - Update settings
GET    /api/v1/miniapp/chats/{id}/blocklist - Get blocklist
POST   /api/v1/miniapp/chats/{id}/blocklist - Add pattern
DELETE /api/v1/miniapp/chats/{id}/blocklist/{id} - Remove pattern
GET    /api/v1/miniapp/chats/{id}/locks    - Get locks
PUT    /api/v1/miniapp/chats/{id}/locks    - Update locks

Console Error Patterns

Critical Errors (Must Fix)

Cannot read property 'WebApp' of undefined  -> Telegram SDK not loaded
initData is undefined                        -> Not in Telegram context
Authorization header missing                 -> API client misconfigured
CORS error                                   -> Backend CORS not configured

Common Warnings (Review)

React key prop warning                       -> Add unique keys to lists
useEffect dependency warning                 -> Fix dependency array
Unused variable warning                      -> Clean up code

JavaScript Inspection Examples

Check Telegram SDK

window.Telegram?.WebApp?.initDataUnsafe?.user
window.Telegram?.WebApp?.platform
window.Telegram?.WebApp?.version

Check App State

window.__store?.getState?.()
localStorage.getItem('lastSelectedChat')
sessionStorage.getItem('formData')

Check DOM State

document.querySelector('.error-message')?.textContent
document.querySelector('button[type="submit"]').disabled
getComputedStyle(document.documentElement).getPropertyValue('--tg-theme-bg-color')

Test Scenarios

Scenario: Chat Settings Save

1. •Navigate: navigate("http://localhost:5173")
2. •Select Chat: computer(click, chatSelector) -> select chat
3. •Toggle Setting: computer(click, collectionToggle)
4. •Save: computer(click, saveButton)
5. •Verify Request:
   • •read_network_requests() -> PUT /chats/{id}/settings
   • •Authorization header present
   • •Response 200
6. •Verify UI: Success message displayed
7. •Verify State: javascript_tool("localStorage.getItem('settings')")

Scenario: Auth Failure

1. •Mock invalid initData (if testing auth)
2. •Perform action requiring auth
3. •read_network_requests() -> Status 401
4. •read_console_messages() -> No sensitive data leaked
5. •UI shows generic "Not authorized" message

Scenario: Form Validation

1. •Fill form with invalid data
2. •Click submit
3. •read_network_requests() -> No request made (frontend validation)
4. •UI shows validation errors
5. •Fill with valid data
6. •Click submit
7. •read_network_requests() -> Request made, Status 200/400

Platform Testing

Desktop (Telegram Desktop Beta)

• •Right-click in WebView -> Inspect
• •Standard Chrome DevTools

Android

• •Enable USB debugging
• •Connect device
• •chrome://inspect/#devices
• •Inspect WebView

iOS (Requires macOS)

• •Enable Web Inspector in Safari settings
• •Safari -> Develop -> [Device] -> WebView

Theme Testing

Check Theme Variables

javascript_tool(`
  const style = getComputedStyle(document.documentElement);
  return {
    bg: style.getPropertyValue('--tg-theme-bg-color'),
    text: style.getPropertyValue('--tg-theme-text-color'),
    hint: style.getPropertyValue('--tg-theme-hint-color'),
    button: style.getPropertyValue('--tg-theme-button-color')
  };
`)

Toggle Theme (TMA Studio)

• •Settings -> Theme -> Dark/Light
• •Verify colors update
• •Screenshot both themes

Release Checklist

Functionality

• • All buttons respond to clicks
• • Forms submit correctly
• • Settings persist after refresh
• • Lists paginate properly
• • Modals open/close

API Integration

• • All endpoints return expected data
• • Authorization headers sent
• • Error responses handled gracefully
• • Loading states visible

Error Handling

• • No console errors on normal flow
• • Network errors show user-friendly messages
• • Invalid input rejected with clear errors

UI/UX

• • Layout correct on all platforms
• • Theme colors applied
• • Loading spinners visible
• • Success/error toasts work

Security

• • No sensitive data in console
• • initData not exposed
• • Admin checks enforced
• • HTTPS in production

Limitations & Workarounds