Vercel

This guide explains how to integrate TestDriver with Vercel deployments using the GitHub Actions workflow. By combining these tools, you can automatically test your Vercel preview deployments or production builds to ensure they meet your quality standards before merging or releasing.

​

Workflow overview

1. Trigger Vercel Deployment: Use Vercel’s GitHub integration to deploy your application on every pull request or push to the main branch.
2. Run Tests on the Deployment URL: Use the TestDriver GitHub Action to test the deployed application using the Vercel deployment URL.
3. Report Results: View test results in the GitHub Actions dashboard or as comments on the pull request.

​

Prerequisites

1. Vercel GitHub Integration: Ensure your repository is connected to Vercel for automatic deployments.
2. TestDriver API Key: Store your API key as a GitHub secret (for example, TD_API_KEY).
3. Vercel Deployment URL: Use the VERCEL_URL environment variable provided by Vercel to access the deployment.

​

GitHub Actions workflow

Here’s a complete workflow to test Vercel deployments with TestDriver:

​

Workflow file: .github/workflows/test-vercel.yaml

name: Test Vercel Deployment with TestDriver

on:
  pull_request:
  push:
    branches:
      - main
  workflow_dispatch:

jobs:
  test-vercel:
    name: Test Vercel Deployment
    runs-on: ubuntu-latest
    steps:
      - name: Check out repository
        uses: actions/checkout@v2

      - name: Wait for Vercel Deployment
        id: vercel
        uses: amondnet/vercel-action@v20
        with:
          vercel-token: ${{ secrets.VERCEL_TOKEN }}
          github-token: ${{ secrets.GITHUB_TOKEN }}
          vercel-args: '--prod' # Optional: Use '--prod' for production builds
        env:
          VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
          VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}

      - name: Run Tests with TestDriver
        uses: testdriverai/action@main
        with:
          key: ${{ secrets.TD_API_KEY }}
          prompt: |
            1. Open the deployment URL: ${{ steps.vercel.outputs.url }}
            2. Verify the homepage loads correctly
            3. Click the "Sign Up" button
            4. Fill out the registration form
            5. Submit the form and verify the success message
        env:
          DEPLOYMENT_URL: ${{ steps.vercel.outputs.url }}
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
          FORCE_COLOR: "3"

​

Workflow steps explained

​

1. Wait for Vercel deployment

The amondnet/vercel-action waits for the Vercel deployment to complete and retrieves the deployment URL. This URL is stored in the steps.vercel.outputs.url variable.

- name: Wait for Vercel Deployment
  id: vercel
  uses: amondnet/vercel-action@v20
  with:
    vercel-token: ${{ secrets.VERCEL_TOKEN }}
    github-token: ${{ secrets.GITHUB_TOKEN }}
    vercel-args: '--prod'
  env:
    VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
    VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}

​

2. Run tests with TestDriver

The TestDriver GitHub Action runs tests on the deployed application using the deployment URL. The prompt field specifies the test steps to execute.

- name: Run Tests with TestDriver
  uses: testdriverai/action@main
  with:
    key: ${{ secrets.TD_API_KEY }}
    prompt: |
      1. Open the deployment URL: ${{ steps.vercel.outputs.url }}
      2. Verify the homepage loads correctly
      3. Click the "Sign Up" button
      4. Fill out the registration form
      5. Submit the form and verify the success message
  env:
    DEPLOYMENT_URL: ${{ steps.vercel.outputs.url }}
    GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
    FORCE_COLOR: "3"

​

Example TestDriver prompt

The prompt field in the TestDriver action specifies the steps to test the Vercel deployment. For example:

prompt: |
  1. Open the deployment URL: ${{ steps.vercel.outputs.url }}
  2. Verify the homepage loads correctly
  3. Click the "Sign Up" button
  4. Fill out the registration form
  5. Submit the form and verify the success message

​

Secrets configuration

Add the following secrets to your GitHub repository:

1. TD_API_KEY: Your TestDriver API key.
2. VERCEL_TOKEN: Your Vercel API token.
3. VERCEL_ORG_ID: Your Vercel organization ID.
4. VERCEL_PROJECT_ID: Your Vercel project ID.

​

Benefits of this workflow

1. Automated Deployment Testing: Automatically test every Vercel deployment, including preview and production builds.
2. Early Issue Detection: Catch issues in pull requests before merging.
3. Detailed Feedback: View test results directly in the GitHub Actions dashboard.
4. Seamless Integration: Combine Vercel’s deployment capabilities with TestDriver’s testing power.

​

Example output

​

GitHub Actions dashboard:

• ✅ Test Vercel Deployment: All tests passed.
• ❌ Test Vercel Deployment: 1 test failed. View logs for details.

​

TestDriver logs:

• Step 1: Opened the deployment URL.
• Step 2: Verified the homepage loaded correctly.
• Step 3: Clicked the “Sign Up” button.
• Step 4: Filled out the registration form.
• Step 5: Failed to verify the success message.

By integrating TestDriver with Vercel deployments, you can ensure that every deployment is thoroughly tested, reducing the risk of bugs reaching production and improving the overall quality of your application.