Front End Testing with GitHub Actions
summary
GitHub Actions workflows build a live front end preview using a custom Netlify CLI script, capture the preview URL and base64-encode twice to avoid GitHub masking, then run Lighthouse and Playwright against that URL. Steps include checkout, setup Node, npm install, deploy, decode the URL, run Lighthouse (uploads Lighthouse HTML report as an artifact) and Playwright (uploads test artifacts), and add a Netlify deploy preview comment to the PR. A separate push-triggered workflow publishes to production and the pipelines produce reports and PR comments as expected.
AI-written summary · about
chapters (20)
- 0:00Introduction
- 1:54Front-end testing importance
- 4:28GitHub Actions automation benefits
- 6:36GitHub Actions workflows
- 9:51PR-triggered workflows
- 10:34Jobs and steps in workflows
- 14:48Live preview deployment
- 17:36Custom deployment scripts
- 18:58PR comments with URLs
- 20:45Multi-platform deployment
- 21:48Lighthouse performance tests
- 23:14Configuring dependent jobs for testing
- 26:46Secret detection in Actions
- 27:49URL encoding/decoding
- 30:00Playwright end-to-end tests
- 33:11Finalizing workflow
- 33:34Production deployment automation
- 36:24TODO to GitHub issues
- 39:15Summary
- 40:42Q&A
related talks
52mFront End Testing with GitHub Actions
47mFront End Testing with GitHub Actions
18mAutomating All the Code & Testing Things with GitHub Actions
50m360° automation with GitHub Actions
10mCreate, Run and Deploy end-to-end tests with Playwright and GitHub Actions
01h 00mCI/CD and beyond with GitHub Actions
29mShip it with GitHub Actions and GitHub Packages
13mUsing Headless Browsers to ship reliable and performant apps