How to Use Retool's Testing Environment

Before publishing changes, use Retool's Preview mode to test how your app looks and behaves without affecting live users. In the editor, click the eye icon or 'Preview' button (top-right) to switch from edit mode to preview mode. Preview mode simulates the app as it appears to end users — event handlers fire, queries run, and navigation works. Test your changes thoroughly in preview before clicking Deploy. Important: preview mode uses the same resources (database connections) as production — be careful with write operations.

Navigate to Settings → Environments (Business+ feature). Create a 'Staging' environment alongside the existing 'Production' environment. For each database resource, configure environment-specific connection details: staging environment uses your staging database credentials, production environment uses your production credentials. The resource name stays the same — only the connection details differ per environment. This means the same app and queries work in both environments with no code changes.

In the Retool editor, find the environment switcher (usually in the top bar or app settings). Switch to 'Staging'. Now all queries that use resources configured with environment variants will connect to your staging database instead of production. Run your tests: submit forms, trigger queries, verify data operations. Any mistakes (wrong SQL, accidental deletes) only affect staging data, not production.

1// In JS Queries, check which environment is active:
2console.log('Current environment:', retoolContext.environment);
3// Returns: 'staging' or 'production'
4
5// Conditional behavior based on environment:
6if (retoolContext.environment === 'staging') {
7  // Extra debug logging in staging only
8  console.log('Query params:', JSON.stringify(queryParams));
9  console.log('Expected result:', JSON.stringify(updateQuery.data));
10}
11
12// Show staging banner to editors:
13// Text component value:
14{{ retoolContext.environment === 'staging' ? '⚠️ STAGING — Not production data' : '' }}

Add a staging-only debug banner at the top of your app using {{ retoolContext.environment }} to remind users they're in a test environment. Also use this to enable extra debug logging in JS Queries that is disabled in production. This pattern prevents debug code from running in production while still being testable.

1// Staging banner component:
2// Add a Container at the top of the app
3// Hidden property: {{ retoolContext.environment !== 'staging' }}
4// Background color: #fef3c7 (yellow)
5// Content: ⚠️ STAGING ENVIRONMENT — Database changes will NOT affect production
6
7// Conditional debug logging in JS Query:
8if (retoolContext.environment === 'staging') {
9  console.log('[DEBUG] saveRecord params:', {
10    id: table1.selectedRow.data.id,
11    values: {
12      name: nameInput.value,
13      status: statusSelect.value,
14    },
15  });
16}

Before deploying any significant change, run through a structured QA checklist. Build this checklist based on your app's critical functionality. Typical checklist items: load test data displays correctly, key user workflows complete without errors, error states display appropriate messages, permission restrictions work for each user group, mobile responsiveness (if applicable), and no console errors in DevTools.

1// QA CHECKLIST TEMPLATE
2// Run before every production deployment
3
4/*
5FUNCTIONALITY:
6[ ] Page loads without JavaScript errors (check DevTools Console)
7[ ] All queries return expected data (check Debug Panel Queries tab)
8[ ] Search/filter functionality works
9[ ] Sort functionality works
10[ ] Pagination works (if applicable)
11
12WRITE OPERATIONS:
13[ ] Form submission creates/updates record correctly
14[ ] Required field validation shows appropriate errors
15[ ] Success notification appears after save
16[ ] Data refreshes after save (table/list updates)
17[ ] Delete confirmation appears before destructive actions
18
19PERMISSIONS:
20[ ] Admin-only features hidden for non-admin users
21[ ] Test with a non-admin test account
22
23EDGE CASES:
24[ ] Empty table state shows appropriate message
25[ ] Error state (disconnect resource temporarily) shows user-friendly message
26[ ] Large dataset loads without performance issues
27*/