|
| 1 | +--- |
| 2 | +title: Exclude Turnstile from E2E tests |
| 3 | +pcx_content_type: tutorial |
| 4 | +updated: 2025-01-24 |
| 5 | +difficulty: Intermediate |
| 6 | +content_type: 📝 Tutorial |
| 7 | +languages: |
| 8 | + - TypeScript |
| 9 | +tags: |
| 10 | + - Node.js |
| 11 | +sidebar: |
| 12 | + order: 6 |
| 13 | +--- |
| 14 | + |
| 15 | +This tutorial explains how to handle Turnstile in your end-to-end (E2E) tests by using Turnstile's dedicated testing keys. |
| 16 | + |
| 17 | +## Overview |
| 18 | + |
| 19 | +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: |
| 20 | + |
| 21 | +- Test sitekey: `1x00000000000000000000AA` |
| 22 | +- Test secret key: `1x0000000000000000000000000000000AA` |
| 23 | + |
| 24 | +For more details, refer to the [testing documentation](/turnstile/troubleshooting/testing/). |
| 25 | + |
| 26 | +:::caution |
| 27 | + |
| 28 | +Never use test credentials in production. Always ensure: |
| 29 | +- Test credentials are only used in test environments. |
| 30 | +- Production credentials are properly protected. |
| 31 | +- Your deployment process prevents test credentials from reaching production. |
| 32 | +::: |
| 33 | + |
| 34 | +## Implementation |
| 35 | + |
| 36 | +The key to implementing test-environment detection is identifying test requests server-side. Here is a simple approach: |
| 37 | + |
| 38 | +```typescript |
| 39 | +// Detect test environments using IP addresses or headers |
| 40 | +function isTestEnvironment(request) { |
| 41 | + const testIPs = ['127.0.0.1', '::1']; |
| 42 | + const isTestIP = testIPs.includes(request.ip); |
| 43 | + const hasTestHeader = request.headers['x-test-environment'] === 'secret-token'; |
| 44 | + |
| 45 | + return isTestIP || hasTestHeader; |
| 46 | +} |
| 47 | + |
| 48 | +// Use the appropriate credentials based on the environment |
| 49 | +function getTurnstileCredentials(request) { |
| 50 | + if (isTestEnvironment(request)) { |
| 51 | + return { |
| 52 | + sitekey: '1x00000000000000000000AA', |
| 53 | + secretKey: '1x0000000000000000000000000000000AA' |
| 54 | + }; |
| 55 | + } |
| 56 | + |
| 57 | + return { |
| 58 | + sitekey: process.env.TURNSTILE_SITE_KEY, |
| 59 | + secretKey: process.env.TURNSTILE_SECRET_KEY |
| 60 | + }; |
| 61 | +} |
| 62 | +``` |
| 63 | + |
| 64 | +## Server-side integration |
| 65 | + |
| 66 | +When rendering your page, inject the appropriate sitekey based on the environment: |
| 67 | + |
| 68 | +```typescript |
| 69 | +app.get('/your-form', (req, res) => { |
| 70 | + const { sitekey } = getTurnstileCredentials(req); |
| 71 | + res.render('form', { sitekey }); |
| 72 | +}); |
| 73 | +``` |
| 74 | + |
| 75 | +## Client-side integration |
| 76 | + |
| 77 | +Your template can then use the injected sitekey: |
| 78 | + |
| 79 | +```html |
| 80 | +<div class="turnstile" data-sitekey="<%= sitekey %>"></div> |
| 81 | +``` |
| 82 | + |
| 83 | +## Best practices |
| 84 | + |
| 85 | +1. **Environment detection** |
| 86 | + - Use multiple factors to identify test environments (IP, headers, etc.). |
| 87 | + - Keep your test environment identifiers secure if you need to test from the public web. |
| 88 | + |
| 89 | +2. **Credential management** |
| 90 | + - Store production credentials securely (for example, in environment variables). |
| 91 | + - Never commit credentials to version control. |
| 92 | + - Use different credentials for each environment. |
| 93 | + |
| 94 | +3. **Deployment safety** |
| 95 | + - Add checks to prevent test credentials in production. |
| 96 | + - Include credential validation in your CI/CD pipeline. |
| 97 | + - Monitor for accidental test credential usage. |
| 98 | + |
| 99 | +## Testing considerations |
| 100 | + |
| 101 | +- Test credentials will always pass verification. |
| 102 | +- They are perfect for automated testing environments. |
| 103 | +- They help avoid rate limiting during testing. |
| 104 | +- They make tests more predictable and faster. |
| 105 | + |
| 106 | +## Example test setup |
| 107 | + |
| 108 | +For Cypress or similar E2E testing frameworks: |
| 109 | + |
| 110 | +```typescript |
| 111 | +// Set test header for all test requests |
| 112 | +beforeEach(() => { |
| 113 | + cy.intercept('*', (req) => { |
| 114 | + req.headers['x-test-environment'] = 'secret-token'; |
| 115 | + }); |
| 116 | +}); |
| 117 | + |
| 118 | +// Your test can now interact with the form normally |
| 119 | +it('submits form successfully', () => { |
| 120 | + cy.visit('/your-form'); |
| 121 | + cy.get('form').submit(); |
| 122 | + // Turnstile will automatically pass verification |
| 123 | +}); |
| 124 | +``` |
| 125 | + |
| 126 | +## Conclusion |
| 127 | + |
| 128 | +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. |
0 commit comments