QA Wolf logo

QA Wolf

/

Star

2.7k

Run Tests on Vercel Deployment

In this tutorial, we'll set up our tests to run when Vercel deploys our site. This helps ensure our critical workflows don't break when we make changes.

Create Deployment Trigger

First we'll create a trigger to run our tests on Vercel deployments. QA Wolf uses triggers to determine when to run your tests.

To manage your team's triggers, use the "Triggers" button in the sidebar of the dashboard.

Add trigger from dashboard

Click this button to open a popup with options to create a trigger.

Select the "Deployment" tab on the right, and choose Vercel as your deploy service. You can also optionally rename your trigger.

Create deploy trigger

Now we'll connect our GitHub repository (repo) to QA Wolf. Click the "Connect GitHub repository" button to get started.

Connect GitHub repository

A new tab will open and visit GitHub. You will be asked to choose the repo(s) you want QA Wolf to access.

Install GitHub App

Choose the repo(s) you want to test and click the green "Install" button. After the installation succeeds, the new tab will close.

Confirm the repo you want to test is now selected in the dropdown.

Choose GitHub repo

Choose Deployment Type

Vercel has two types of deployments: production and preview. Production deployments happen when you merge to your production branch or run the vercel --prod command. Preview deployments are all other deployments, like deployments of commits in a GitHub pull request.

QA Wolf allows you to run your tests on all deployments (preview and production), just preview deployments, or just production deployments. Choose which deployments you want to test in the popup. In our example, we choose to only test preview deployments.

Choose deployment

Choose Branches (Optional)

You can also optionally specify which GitHub branches your tests should run on.

For example, at QA Wolf we have a group of tests that we run when staging is deployed. We deploy to staging automatically when we merge to the develop branch.

If you only want your tests to run on specific GitHub branches, choose "Select" under the GitHub branches option. You will be prompted to list these branches in an input. Enter a comma-separated list of branches like develop,main.

Choose branches

Choose Tags

You can choose to run all your tests, or only tests with specific tags.

Choose tags

Choose Environment

If you have created any environments, choose the one to use when your tests run.

Choose environment

Press the "Create trigger" button to save your new trigger. 🎉

Update Tests to Use Deployment URL

Because our Vercel deployment URL isn't known in advance, QA Wolf passes it as an environment variable (process.env.URL) when a deployment succeeds.

We need to update our tests to use this environment variable when specified.

Replace the URL in your tests with process.env.URL. For example, let's say our test currently starts with:

const { context } = await launch();
const page = await context.newPage();
await page.goto("https://default.vercel.app/");

Let's update the page.goto call to go to process.env.URL if it exists, and our default URL otherwise:

const { context } = await launch();
const page = await context.newPage();
// go to process.env.URL if specified, and the default URL otherwise
await page.goto(process.env.URL || "https://default.vercel.app/");

See QA Wolf Results in GitHub

Now when you push a commit to GitHub, your tests will run after your Vercel deployment succeeds.

See QA Wolf results in GitHub

QA Wolf will comment on a pull request with the most recent test suite. As your tests run, the comment is updated to report the latest results.

GitHub pull request comment

View Run History

🎉 Congratulations - now your tests will run on Vercel deployments in 100% parallel!

You can see your test runs in the "Run history" page of the dashboard.

Run history