Stop Turnstile from hanging Run on localhost and missing callbacks

CI hits the app at 127.0.0.1 with the production sitekey. A live
Playwright repro against Cloudflare showed:

- Dummy always-pass keys complete via execute() in ~1.6s
- Production sitekey on 127.0.0.1 returns error 110200 (domain not
  authorized) and would POST
- Interactive dummy key never fires callback or error-callback (30s+)
- Missing window.turnstile throws; the old Promise never settled

Skip the widget on loopback (same host CI uses), time out execute(),
and catch a missing API so /run still leaves the browser.

Co-authored-by: Max Schmitt <max@schmitt.mx>

Author: cursoragent

frontend/src/components/App/index.tsx

@@ -3,6 +3,7 @@ import { Col, Grid, IconButton, Loader, Panel, CustomProvider } from 'rsuite'
 import PlayIcon from '@rsuite/icons/PlayOutline';
 
 import { ExecutionResponse, runCode, trackEvent } from '../../utils'
+import { waitForTurnstileToken } from '../../turnstile'
 import RightPanel from '../RightPanel'
 import Header from '../Header'
 import Editor from '../Editor'
@@ -28,34 +29,15 @@ const App: React.FunctionComponent = () => {
 
     trackEvent()
     const started = Date.now()
-    console.info('[try-playwright] run: before-turnstile', {
-      hasExecute: typeof (window as any).turnstile?.execute,
-      elapsedMs: 0,
+    const turnstileToken = await waitForTurnstileToken({
+      turnstile: (window as any).turnstile,
+      container: turnstileRef.current,
+      sitekey: VITE_TURNSTILE_SITEKEY,
     })
-    const turnstileToken = await new Promise<string>((resolve) => {
-      try {
-        (window as any).turnstile.reset();
-      } catch (error) {}
-      (window as any).turnstile.execute(turnstileRef.current, {
-        sitekey: VITE_TURNSTILE_SITEKEY,
-        callback: (token: string) => {
-          console.info('[try-playwright] run: turnstile-callback', {
-            elapsedMs: Date.now() - started,
-            tokenLength: token ? token.length : 0,
-          })
-          resolve(token)
-        },
-        'error-callback': () => {
-          console.info('[try-playwright] run: turnstile-error-callback', {
-            elapsedMs: Date.now() - started,
-          })
-          resolve('')
-        },
-      });
-    });
     const codeToRun = getCode()
     console.info('[try-playwright] run: posting', {
       elapsedMs: Date.now() - started,
+      tokenLength: turnstileToken ? turnstileToken.length : 0,
       codeLength: codeToRun.length,
     })
     setResponse(await runCode(codeToRun, codeLanguage, turnstileToken))

frontend/src/turnstile.spec.ts

@@ -0,0 +1,94 @@
+import { test, expect } from '@playwright/experimental-ct-react'
+import { shouldSkipTurnstile, waitForTurnstileToken } from './turnstile'
+
+const container = {} as HTMLElement
+
+test('skips Turnstile on CI-style loopback hosts', () => {
+  expect(shouldSkipTurnstile('127.0.0.1')).toBe(true)
+  expect(shouldSkipTurnstile('localhost')).toBe(true)
+  expect(shouldSkipTurnstile('try.playwright.tech')).toBe(false)
+})
+
+test('returns empty when the Turnstile API is missing', async () => {
+  const token = await waitForTurnstileToken({
+    turnstile: null,
+    container,
+    sitekey: 'sitekey',
+    hostname: 'try.playwright.tech',
+  })
+  expect(token).toBe('')
+})
+
+test('does not hang when execute throws', async () => {
+  const token = await waitForTurnstileToken({
+    turnstile: {
+      execute: () => {
+        throw new Error('no widget')
+      },
+    },
+    container,
+    sitekey: 'sitekey',
+    hostname: 'try.playwright.tech',
+  })
+  expect(token).toBe('')
+})
+
+test('resolves the success token', async () => {
+  const token = await waitForTurnstileToken({
+    turnstile: {
+      execute: (_el, options) => {
+        ;(options.callback as (value: string) => void)('tok')
+      },
+    },
+    container,
+    sitekey: 'sitekey',
+    hostname: 'try.playwright.tech',
+  })
+  expect(token).toBe('tok')
+})
+
+test('resolves empty on error-callback', async () => {
+  const token = await waitForTurnstileToken({
+    turnstile: {
+      execute: (_el, options) => {
+        ;(options['error-callback'] as () => void)()
+      },
+    },
+    container,
+    sitekey: 'sitekey',
+    hostname: 'try.playwright.tech',
+  })
+  expect(token).toBe('')
+})
+
+test('times out when neither callback fires (interactive / bot challenge)', async () => {
+  const token = await waitForTurnstileToken({
+    turnstile: {
+      execute: () => {
+        // never calls back — same as Cloudflare dummy interactive key in Playwright
+      },
+    },
+    container,
+    sitekey: 'sitekey',
+    hostname: 'try.playwright.tech',
+    timeoutMs: 50,
+  })
+  expect(token).toBe('')
+})
+
+test('skips execute entirely on 127.0.0.1', async () => {
+  let executed = false
+  const token = await waitForTurnstileToken({
+    turnstile: {
+      execute: () => {
+        executed = true
+      },
+    },
+    container,
+    sitekey: 'sitekey',
+    hostname: '127.0.0.1',
+    timeoutMs: 50,
+  })
+  expect(executed).toBe(false)
+  expect(token).toBe('')
+})

frontend/src/turnstile.ts

@@ -0,0 +1,70 @@
+type TurnstileApi = {
+  reset?: () => void
+  execute: (container: HTMLElement, options: Record<string, unknown>) => void
+}
+
+export type WaitForTurnstileTokenOptions = {
+  turnstile?: TurnstileApi | null
+  container: HTMLElement | null
+  sitekey: string
+  timeoutMs?: number
+  hostname?: string
+}
+
+const LOCAL_HOSTS = new Set(['localhost', '127.0.0.1'])
+
+export function shouldSkipTurnstile(hostname: string): boolean {
+  return LOCAL_HOSTS.has(hostname)
+}
+
+export async function waitForTurnstileToken(options: WaitForTurnstileTokenOptions): Promise<string> {
+  const hostname = options.hostname ?? (typeof window !== 'undefined' ? window.location.hostname : '')
+  if (shouldSkipTurnstile(hostname)) {
+    return ''
+  }
+  if (!options.turnstile || typeof options.turnstile.execute !== 'function' || !options.container) {
+    return ''
+  }
+
+  const timeoutMs = options.timeoutMs ?? 8_000
+  const turnstile = options.turnstile
+  const container = options.container
+
+  return await new Promise<string>((resolve) => {
+    let settled = false
+    const done = (token: string) => {
+      if (settled) {
+        return
+      }
+      settled = true
+      resolve(token)
+    }
+
+    const timer = setTimeout(() => done(''), timeoutMs)
+    try {
+      try {
+        turnstile.reset?.()
+      } catch {
+        // reset() throws when no widget has been rendered yet
+      }
+      turnstile.execute(container, {
+        sitekey: options.sitekey,
+        callback: (token: string) => {
+          clearTimeout(timer)
+          done(token || '')
+        },
+        'error-callback': () => {
+          clearTimeout(timer)
+          done('')
+        },
+        'timeout-callback': () => {
+          clearTimeout(timer)
+          done('')
+        },
+      })
+    } catch {
+      clearTimeout(timer)
+      done('')
+    }
+  })
+}