Free tools Windows power users keep installed
One-click scans. No signup required.
For most teams, “run Playwright on Vercel” means running end-to-end tests in CI against a Vercel deployment—not running the Playwright test runner inside a Vercel Function. Trigger the tests after deployment succeeds, use that deployment’s URL and commit, and install browser binaries that match the Playwright package. If the deployment is protected, configure Vercel’s automation bypass and pass its secret as a request header.
Choose the right Playwright workflow
There are two different jobs people mean by this question:
- Test a deployed site: A CI job runs Playwright after Vercel finishes a Preview or Production deployment. This is the standard end-to-end testing approach.
- Automate a browser from your deployed application: Your app performs browser work at runtime. Vercel documents a hosted-browser integration with Browserless for this separate architecture: Vercel’s Browserless integration.
The steps below cover post-deployment end-to-end tests first. Vercel’s environments are Local, Preview, and Production; Preview is usually the appropriate target for validating a change before it reaches production. Each deployment has its own URL, so have CI consume the URL for the deployment it is testing rather than relying on a hard-coded preview address. See Vercel’s environment documentation.
Run Playwright tests after a Vercel deployment
1. Add Playwright tests to the project
Commit the Playwright package, lockfile, configuration, and tests to the same repository used to build the Vercel deployment. The configuration below reads the target URL from PLAYWRIGHT_TEST_BASE_URL and adds a protection header only when a secret is present.
#1 Best Overall
// playwright.config.ts
import { defineConfig } from '@playwright/test';
export default defineConfig({
use: {
baseURL: process.env.PLAYWRIGHT_TEST_BASE_URL,
extraHTTPHeaders: process.env.VERCEL_AUTOMATION_BYPASS_SECRET
? {
'x-vercel-protection-bypass':
process.env.VERCEL_AUTOMATION_BYPASS_SECRET,
}
: {},
},
});A test can then use a relative path, for example await page.goto('/'). The base URL must be set by the CI workflow to the deployment URL. Playwright’s test runner is headless by default, which suits a CI job without a desktop session: Playwright’s CI guide.
2. Trigger CI only after deployment succeeds
Vercel’s guidance describes GitHub Actions repository_dispatch events and webhooks for other CI providers. The essential sequence is: receive a successful deployment event, check out the deployed revision, install dependencies and compatible browsers, set the test URL from that same event, and run npx playwright test.
Rank #2
Here is a GitHub Actions workflow using GitHub’s successful deployment_status event. It expects the deployment URL in github.event.deployment_status.target_url. This is one coherent event pattern; do not mix its payload path with Vercel’s separate repository_dispatch example.
# .github/workflows/playwright-after-deploy.yml
name: Playwright after Vercel deployment
on:
deployment_status:
jobs:
test:
if: github.event.deployment_status.state == 'success'
runs-on: ubuntu-latest
steps:
- name: Check out deployed commit
uses: actions/checkout@v4
with:
ref: ${{ github.event.deployment.sha }}
- name: Set up Node.js
uses: actions/setup-node@v4
with:
node-version: 20
cache: npm
- name: Install project dependencies
run: npm ci
- name: Install Playwright browsers and system dependencies
run: npx playwright install --with-deps
- name: Run tests against this deployment
run: npx playwright test
env:
PLAYWRIGHT_TEST_BASE_URL: ${{ github.event.deployment_status.target_url }}
VERCEL_AUTOMATION_BYPASS_SECRET: ${{ secrets.VERCEL_AUTOMATION_BYPASS_SECRET }}Use a Node version compatible with the project and its lockfile; the example’s Node.js 20 is a workflow setting, not a Vercel requirement. The key correctness check is that the workflow checks out the commit associated with the deployment and takes the URL from that deployment’s successful status. Vercel’s and Playwright’s documented approaches both use the deployment event’s URL as the test target: Vercel’s end-to-end testing guidance and Playwright’s CI guide.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
3. Configure the deployment event for your CI provider
The GitHub Actions example requires GitHub to receive a deployment status event after Vercel deploys. If your project’s integration does not emit that event, use Vercel’s documented repository_dispatch approach or a deployment-success webhook supported by your CI provider. Map the event’s actual commit SHA and deployment URL into the checkout and PLAYWRIGHT_TEST_BASE_URL values; payload field names vary by event mechanism.
Make protected Preview deployments accessible to CI
If Deployment Protection is enabled, a test may reach a password, authentication, or protection page instead of the application. Vercel’s Protection Bypass for Automation documentation describes using a bypass secret for automated tests, CI/CD pipelines, and monitoring. Create the automation bypass secret in Vercel, save it in your CI provider’s secret store as VERCEL_AUTOMATION_BYPASS_SECRET, and use the x-vercel-protection-bypass header shown in the configuration.
Rank #4
- Used Book in Good Condition
Vercel also documents an optional x-vercel-set-bypass-cookie header for establishing a cookie for subsequent browser requests. Its documented values are true and samesitenone, for contexts that need them. Add it only when the cookie behavior is needed:
extraHTTPHeaders: {
'x-vercel-protection-bypass': process.env.VERCEL_AUTOMATION_BYPASS_SECRET!,
'x-vercel-set-bypass-cookie': 'true',
},Keep the secret out of source control and avoid printing it in logs. The bypass applies to specified Deployment Protection checks, including Password Protection, Vercel Authentication, and Trusted IPs, as well as certain system mitigations and bot-protection challenges. It does not override active DDoS mitigations, attack-related rate limits, or security challenges caused by attack patterns; it is not unconditional access.
Recommended Free Tools
Best Value
Keep Playwright browsers in sync with the package
Playwright browser binaries are version-specific. Install browsers in CI after installing the locked dependencies, using npx playwright install --with-deps as in the workflow. When the Playwright version changes, rerun the browser installation step so the binaries match it. For a narrower browser matrix, use the browser-specific installation command that matches the projects enabled in your Playwright configuration. See Playwright’s browser installation documentation.
For local test development, Playwright’s webServer configuration can start a local development server before the tests. That is useful when testing the local app; for post-deployment checks, set the test base URL to the event’s deployed URL instead. See Playwright’s web server configuration.
Troubleshoot common failures
- The site is not reachable or tests start too early: Trigger the job on successful deployment status, not merely when a build starts, and use that deployment’s target URL.
- The tests hit the wrong version: Check out the SHA associated with the deployment event and use the URL from the same event. A hard-coded Preview URL can point to a different deployment later.
- Browser launch fails in CI: Install browser binaries and operating-system dependencies after installing the locked Playwright package. If Playwright was upgraded, rerun browser installation.
- The page is a Vercel password or authentication screen: Check whether Deployment Protection is enabled, create an automation bypass secret, store it as a CI secret, and pass it in the documented header.
- Navigation works but follow-up requests encounter protection: Consider the documented
x-vercel-set-bypass-cookieheader behavior and the appropriate cookie value for your browser context. - The bypass secret is present but access is still blocked: Confirm the secret is the automation bypass secret and was not exposed, truncated, or mapped to the wrong environment variable. Active DDoS mitigations, attack-related rate limits, and some attack-pattern security challenges are outside the bypass.
- Tests fail only on Preview: Confirm the workflow’s event points to the Preview deployment you intend to validate and that the deployed revision corresponds to the checked-out SHA.
Or skip the browser setup
If your goal is a screenshot rather than interactive end-to-end assertions, ScreenshotNeo is a website screenshot API and MCP server for developers. One GET request returns a PNG, JPEG, WebP, or PDF; its options include full-page capture, CSS selectors, custom headers, cookies, viewport and device settings, and more. Cookie banners are accepted and removed along with known consent platforms, newsletter popups, and chat widgets before capture. Bot checks, blank pages, timeouts, failed loads, and cache hits are not billed; response headers identify the page verdict and billing status. An MCP server exposes screenshot tools for AI agents.
For example, this cURL request saves a WebP screenshot of the deployment:
The Tool Desk
Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://your-deployment.vercel.app -o shot.webpSee the ScreenshotNeo API documentation for setup and options. Its free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000. Learn about ScreenshotNeo or sign up free for 1,000 screenshots a month, with no card required.
When runtime browser automation is the goal
If a deployed Vercel application itself needs to control a browser, that is not the same as running its test suite after deployment. Vercel’s Browserless integration describes connecting to hosted headless browsers through Vercel Connect, installing @vercel/connect, creating a Browserless connector, and requesting credentials at runtime. See the integration documentation for that setup. For ongoing Playwright testing and monitoring, Vercel also lists Checkly as an integration; neither service is required for the basic CI workflow above.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
