This content originally appeared on Jonnie Hallman (@destroytoday) and was authored by Jonnie Hallman (@destroytoday)
I normally wouldn’t write such a quick technical post with barely any story involved, but I spent an entire night trudging through outdated Stack Overflow answers, conflicting documentation, and surprisingly limited search results, then I stumbled upon this Vercel guide that seemed like it didn’t want to be found. To help steer the search results toward a simple solution that actually works, I feel obligated to contribute a post on how to use Playwright with GitHub Actions for e2e testing of Vercel preview deployments.
Here’s the e2e.yml workflow file that you need to add to your project’s .github/workflows directory (assuming you’re using Node v20 and pnpm):
name: End-to-end testing
on:
deployment_status:
jobs:
e2e:
if: github.event_name == 'deployment_status' && github.event.deployment_status.state == 'success'
timeout-minutes: 60
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- uses: actions/setup-node@v3
with:
node-version: 20.x
- name: Install dependencies
run: npm install -g pnpm && pnpm install
- name: Install Playwright Browsers
run: pnpm exec playwright install --with-deps
- name: Run Playwright tests
env:
BASE_URL: ${{ github.event.deployment_status.environment_url }}
run: pnpm exec playwright test
This should read pretty easily if you’re familiar with GitHub Actions, but it triggers upon a deployment status change and only runs Playwright if the deploy is successful.
In your Playwright config, point the use.baseURL property to your BASE_URL environment variable, which represents the generated URL for the preview deployment:
export default defineConfig({
use: {
baseURL: process.env.BASE_URL,
},
});Finally, push to GitHub. Assuming you have automatic deploys set up with Vercel and GitHub, you’ll see the results of your deploy in your pull request, then upon a successful deploy, the e2e workflow will start running—pointed at your preview deploy. It’s this easy. Don’t be like me and go down the outdated path of waiting for Vercel deploys or deploying from GitHub Actions. You don’t need that. And if you do, you don’t need this post.
Also, If Playwright seems to stall when running, it’s probably because you have Vercel Authentication enabled in your Deployment Protection settings. You’ll either want to pay Vercel $150/mo for Protection Bypass for Automation, or disable authentication. Unless you’re working on something super secret, disabling authentication is fine. And if it is super secret, you can afford $150/mo.
Hope this helps someone.
This content originally appeared on Jonnie Hallman (@destroytoday) and was authored by Jonnie Hallman (@destroytoday)
Jonnie Hallman (@destroytoday) | Sciencx (2024-01-02T14:00:00+00:00) How to use Playwright with GitHub Actions for e2e testing of Vercel preview deployments. Retrieved from https://www.scien.cx/2024/01/02/how-to-use-playwright-with-github-actions-for-e2e-testing-of-vercel-preview-deployments/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.