-
Notifications
You must be signed in to change notification settings - Fork 10.4k
Add turnstile e2e testing tutorial for Turnstile #19415
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Merged
patriciasantaana
merged 4 commits into
cloudflare:production
from
olipayne:add-turnstile-e2e-tutorial
Jan 24, 2025
Merged
Changes from 2 commits
Commits
File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
127 changes: 127 additions & 0 deletions
127
src/content/docs/turnstile/tutorials/excluding-turnstile-from-e2e-tests.mdx
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,127 @@ | ||
| --- | ||
| title: Exclude Turnstile from E2E tests | ||
| pcx_content_type: tutorial | ||
| updated: 2025-01-24 | ||
| difficulty: Intermediate | ||
| content_type: 📝 Tutorial | ||
| languages: | ||
| - TypeScript | ||
| tags: | ||
| - Node.js | ||
| sidebar: | ||
| order: 6 | ||
| --- | ||
|
|
||
| This tutorial explains how to handle Turnstile in your end-to-end (E2E) tests by using Turnstile's dedicated testing keys. | ||
|
|
||
| ## Overview | ||
|
|
||
| When running E2E tests, you often want to bypass or simplify the Turnstile verification process. Cloudflare provides official test credentials that always pass verification, making them perfect for testing environments: | ||
|
|
||
| - Test Sitekey: `1x00000000000000000000AA` | ||
| - Test Secret Key: `1x0000000000000000000000000000000AA` | ||
|
|
||
| For more details, see the [testing documentation](https://developers.cloudflare.com/turnstile/troubleshooting/testing/). | ||
patriciasantaana marked this conversation as resolved.
Outdated
Show resolved
Hide resolved
|
||
|
|
||
| ## ⚠️ Important Security Warning | ||
|
|
||
| Never use test credentials in production! Always ensure: | ||
| 1. Test credentials are only used in test environments | ||
| 2. Production credentials are properly protected | ||
| 3. Your deployment process prevents test credentials from reaching production | ||
patriciasantaana marked this conversation as resolved.
Outdated
Show resolved
Hide resolved
|
||
|
|
||
| ## Implementation Strategy | ||
patriciasantaana marked this conversation as resolved.
Outdated
Show resolved
Hide resolved
|
||
|
|
||
| The key to implementing test-environment detection is identifying test requests server-side. Here's a simple approach: | ||
patriciasantaana marked this conversation as resolved.
Outdated
Show resolved
Hide resolved
|
||
|
|
||
| ```typescript | ||
| // Detect test environments using IP addresses or headers | ||
| function isTestEnvironment(request) { | ||
| const testIPs = ['127.0.0.1', '::1']; | ||
| const isTestIP = testIPs.includes(request.ip); | ||
| const hasTestHeader = request.headers['x-test-environment'] === 'secret-token'; | ||
|
|
||
| return isTestIP || hasTestHeader; | ||
| } | ||
|
|
||
| // Use the appropriate credentials based on the environment | ||
| function getTurnstileCredentials(request) { | ||
| if (isTestEnvironment(request)) { | ||
| return { | ||
| sitekey: '1x00000000000000000000AA', | ||
| secretKey: '1x0000000000000000000000000000000AA' | ||
| }; | ||
| } | ||
|
|
||
| return { | ||
| sitekey: process.env.TURNSTILE_SITE_KEY, | ||
| secretKey: process.env.TURNSTILE_SECRET_KEY | ||
| }; | ||
| } | ||
| ``` | ||
|
|
||
| ## Server-side Integration | ||
patriciasantaana marked this conversation as resolved.
Outdated
Show resolved
Hide resolved
|
||
|
|
||
| When rendering your page, inject the appropriate sitekey based on the environment: | ||
|
|
||
| ```typescript | ||
| app.get('/your-form', (req, res) => { | ||
| const { sitekey } = getTurnstileCredentials(req); | ||
| res.render('form', { sitekey }); | ||
| }); | ||
| ``` | ||
|
|
||
| ## Client-side Integration | ||
patriciasantaana marked this conversation as resolved.
Outdated
Show resolved
Hide resolved
|
||
|
|
||
| Your template can then use the injected sitekey: | ||
|
|
||
| ```html | ||
| <div class="turnstile" data-sitekey="<%= sitekey %>"></div> | ||
| ``` | ||
|
|
||
| ## Best Practices | ||
patriciasantaana marked this conversation as resolved.
Outdated
Show resolved
Hide resolved
|
||
|
|
||
| 1. **Environment Detection** | ||
| - Use multiple factors to identify test environments (IP, headers, etc.) | ||
| - Keep test environment identifiers secure, if you need to test from the public web | ||
|
|
||
| 2. **Credential Management** | ||
| - Store production credentials securely (e.g., environment variables) | ||
patriciasantaana marked this conversation as resolved.
Outdated
Show resolved
Hide resolved
|
||
| - Never commit credentials to version control | ||
| - Use different credentials for each environment | ||
|
|
||
| 3. **Deployment Safety** | ||
| - Add checks to prevent test credentials in production | ||
| - Include credential validation in your CI/CD pipeline | ||
| - Monitor for accidental test credential usage | ||
|
|
||
| ## Testing Considerations | ||
patriciasantaana marked this conversation as resolved.
Outdated
Show resolved
Hide resolved
|
||
|
|
||
| - Test credentials will always pass verification | ||
| - They're perfect for automated testing environments | ||
| - They help avoid rate limiting during testing | ||
| - They make tests more predictable and faster | ||
patriciasantaana marked this conversation as resolved.
Outdated
Show resolved
Hide resolved
|
||
|
|
||
| ## Example Test Setup | ||
patriciasantaana marked this conversation as resolved.
Outdated
Show resolved
Hide resolved
|
||
|
|
||
| For Cypress or similar E2E testing frameworks: | ||
|
|
||
| ```typescript | ||
| // Set test header for all test requests | ||
| beforeEach(() => { | ||
| cy.intercept('*', (req) => { | ||
| req.headers['x-test-environment'] = 'secret-token'; | ||
| }); | ||
| }); | ||
|
|
||
| // Your test can now interact with the form normally | ||
| it('submits form successfully', () => { | ||
| cy.visit('/your-form'); | ||
| cy.get('form').submit(); | ||
| // Turnstile will automatically pass verification | ||
| }); | ||
| ``` | ||
|
|
||
| ## Conclusion | ||
|
|
||
| By using Turnstile's test credentials and proper environment detection, you can create reliable E2E tests while maintaining security in production. Remember to always keep test credentials separate from production and implement proper safeguards in your deployment process. | ||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.