Align Turnstile client with documented render then execute flow

Call turnstile.ready/render with execution=execute and
appearance=interaction-only, then reset/execute(widgetId) on Run.
Stop hiding the widget with display:none so interactive challenges
can appear. Keep skipping the widget on loopback for CI.

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

Author: cursoragent

frontend/index.html

@@ -7,6 +7,7 @@
     <meta name="theme-color" content="#000000" />
     <meta name="description" content="An interactive playground for Playwright with various examples available."/>
     <title>Try Playwright</title>
+    <link rel="preconnect" href="https://challenges.cloudflare.com" />
     <script defer src="https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit"></script>
     <script async src="https://www.googletagmanager.com/gtag/js?id=UA-34156117-11"></script>
     <script>

frontend/src/components/App/index.module.css

@@ -10,6 +10,12 @@
     float: right
 }
 
+.turnstile {
+    display: inline-block;
+    vertical-align: middle;
+    margin-right: 10px;
+}
+
 .codeHeaderButtons > button {
     margin-left: 10px
 }

frontend/src/components/App/index.tsx

@@ -1,9 +1,9 @@
-import { useState, useContext, useRef } from 'react';
+import { useState, useContext, useEffect, useRef } from 'react';
 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 { removeTurnstileWidget, waitForTurnstileToken, type TurnstileApi } from '../../turnstile'
 import RightPanel from '../RightPanel'
 import Header from '../Header'
 import Editor from '../Editor'
@@ -22,6 +22,13 @@ const App: React.FunctionComponent = () => {
   const handleExecutionRef = useRef<() => Promise<void>>(undefined)
   const [darkMode] = useDarkMode()
   const turnstileRef = useRef<HTMLDivElement>(null)
+  const turnstileWidgetIdRef = useRef<string | null>(null)
+
+  useEffect(() => {
+    return () => {
+      removeTurnstileWidget((window as unknown as { turnstile?: TurnstileApi }).turnstile, turnstileWidgetIdRef)
+    }
+  }, [])
 
   const handleExecution = async (): Promise<void> => {
     setLoading(true)
@@ -31,9 +38,10 @@ const App: React.FunctionComponent = () => {
     const started = Date.now()
     try {
       const turnstileToken = await waitForTurnstileToken({
-        turnstile: (window as any).turnstile,
+        turnstile: (window as unknown as { turnstile?: TurnstileApi }).turnstile,
         container: turnstileRef.current,
         sitekey: VITE_TURNSTILE_SITEKEY,
+        widgetIdRef: turnstileWidgetIdRef,
       })
       const codeToRun = getCode()
       console.info(`[try-playwright] run: posting ${JSON.stringify({
@@ -67,7 +75,6 @@ const App: React.FunctionComponent = () => {
 
   return (
     <CustomProvider theme={darkMode ? 'dark' : 'light'}>
-      <div ref={turnstileRef} style={{ display: 'none' }} />
       <Header />
       <Grid fluid className={styles.grid}>
         <Col span={{ xs: 24, md: 12 }}>
@@ -79,6 +86,7 @@ const App: React.FunctionComponent = () => {
               <>
                 Editor
                 <div className={styles.codeHeaderButtons}>
+                  <div ref={turnstileRef} className={styles.turnstile} />
                   <CodeLanguageSelector codeLanguage={codeLanguage} onLanguageChange={onLanguageChange} />
                   <IconButton onClick={handleExecution} icon={<PlayIcon />}>
                       Run

frontend/src/turnstile.spec.ts

@@ -1,8 +1,26 @@
 import { test, expect } from '@playwright/experimental-ct-react'
-import { shouldSkipTurnstile, waitForTurnstileToken } from './turnstile'
+import { shouldSkipTurnstile, waitForTurnstileToken, type TurnstileApi, type TurnstileRenderOptions } from './turnstile'
 
 const container = {} as HTMLElement
 
+function mockTurnstile(overrides: Partial<TurnstileApi> = {}): { api: TurnstileApi; options: TurnstileRenderOptions[] } {
+  const rendered: TurnstileRenderOptions[] = []
+  const api: TurnstileApi = {
+    ready: (callback) => callback(),
+    render: (_container, options) => {
+      rendered.push(options)
+      return 'widget-1'
+    },
+    execute: () => {
+      rendered.at(-1)?.callback?.('tok')
+    },
+    reset: () => undefined,
+    remove: () => undefined,
+    ...overrides,
+  }
+  return { api, options: rendered }
+}
+
 test('skips Turnstile on CI-style loopback hosts', () => {
   expect(shouldSkipTurnstile('127.0.0.1')).toBe(true)
   expect(shouldSkipTurnstile('localhost')).toBe(true)
@@ -19,41 +37,93 @@ test('returns empty when the Turnstile API is missing', async () => {
   expect(token).toBe('')
 })
 
-test('does not hang when execute throws', async () => {
-  const token = await waitForTurnstileToken({
-    turnstile: {
-      execute: () => {
-        throw new Error('no widget')
-      },
+test('does not hang when render throws', async () => {
+  const { api } = mockTurnstile({
+    render: () => {
+      throw new Error('no widget')
     },
+  })
+  const token = await waitForTurnstileToken({
+    turnstile: api,
     container,
     sitekey: 'sitekey',
     hostname: 'try.playwright.tech',
   })
   expect(token).toBe('')
 })
 
-test('resolves the success token', async () => {
+test('renders with execution=execute then execute(widgetId)', async () => {
+  const { api, options } = mockTurnstile()
+  let executedWith: unknown
+  let resetWith: unknown
+  api.execute = (target) => {
+    executedWith = target
+    options.at(-1)?.callback?.('tok')
+  }
+  api.reset = (target) => {
+    resetWith = target
+  }
+
+  const widgetIdRef = { current: null as string | null }
   const token = await waitForTurnstileToken({
-    turnstile: {
-      execute: (_el, options) => {
-        ;(options.callback as (value: string) => void)('tok')
-      },
-    },
+    turnstile: api,
     container,
     sitekey: 'sitekey',
     hostname: 'try.playwright.tech',
+    widgetIdRef,
   })
+
   expect(token).toBe('tok')
+  expect(widgetIdRef.current).toBe('widget-1')
+  expect(executedWith).toBe('widget-1')
+  expect(resetWith).toBe('widget-1')
+  expect(options[0]).toMatchObject({
+    sitekey: 'sitekey',
+    execution: 'execute',
+    appearance: 'interaction-only',
+  })
+})
+
+test('reuses the rendered widget on a later execute', async () => {
+  let renderCount = 0
+  const { api, options } = mockTurnstile({
+    render: (_container, renderOptions) => {
+      renderCount += 1
+      options.push(renderOptions)
+      return 'widget-1'
+    },
+  })
+  api.execute = () => {
+    options.at(-1)?.callback?.(`tok-${renderCount}`)
+  }
+  const widgetIdRef = { current: null as string | null }
+
+  await waitForTurnstileToken({
+    turnstile: api,
+    container,
+    sitekey: 'sitekey',
+    hostname: 'try.playwright.tech',
+    widgetIdRef,
+  })
+  const token = await waitForTurnstileToken({
+    turnstile: api,
+    container,
+    sitekey: 'sitekey',
+    hostname: 'try.playwright.tech',
+    widgetIdRef,
+  })
+
+  expect(renderCount).toBe(1)
+  expect(token).toBe('tok-1')
 })
 
 test('resolves empty on error-callback', async () => {
+  const { api, options } = mockTurnstile()
+  api.execute = () => {
+    options.at(-1)?.['error-callback']?.()
+  }
   const token = await waitForTurnstileToken({
-    turnstile: {
-      execute: (_el, options) => {
-        ;(options['error-callback'] as () => void)()
-      },
-    },
+    turnstile: api,
     container,
     sitekey: 'sitekey',
     hostname: 'try.playwright.tech',
@@ -62,12 +132,11 @@ test('resolves empty on error-callback', async () => {
 })
 
 test('times out when neither callback fires (interactive / bot challenge)', async () => {
+  const { api } = mockTurnstile({
+    execute: () => undefined,
+  })
   const token = await waitForTurnstileToken({
-    turnstile: {
-      execute: () => {
-        // never calls back — same as Cloudflare dummy interactive key in Playwright
-      },
-    },
+    turnstile: api,
     container,
     sitekey: 'sitekey',
     hostname: 'try.playwright.tech',
@@ -76,19 +145,26 @@ test('times out when neither callback fires (interactive / bot challenge)', asyn
   expect(token).toBe('')
 })
 
-test('skips execute entirely on 127.0.0.1', async () => {
+test('skips render and execute entirely on 127.0.0.1', async () => {
+  let rendered = false
   let executed = false
-  const token = await waitForTurnstileToken({
-    turnstile: {
-      execute: () => {
-        executed = true
-      },
+  const { api } = mockTurnstile({
+    render: () => {
+      rendered = true
+      return 'widget-1'
+    },
+    execute: () => {
+      executed = true
     },
+  })
+  const token = await waitForTurnstileToken({
+    turnstile: api,
     container,
     sitekey: 'sitekey',
     hostname: '127.0.0.1',
     timeoutMs: 50,
   })
+  expect(rendered).toBe(false)
   expect(executed).toBe(false)
   expect(token).toBe('')
 })