Front End Testing with GitHub Actions
summary
Shows how to use GitHub Actions to build a deploy-preview pipeline: checkout, setup Node, run npm build, deploy to Netlify via a custom shell script that captures the preview URL and adds it as a PR comment, base64-encode the URL to avoid GitHub masking, then run Lighthouse and Playwright against that live URL, upload HTML/artifact reports, and gate a separate production workflow that deploys when the PR is merged. Includes base64-encode twice workaround and artifacts retention.
AI-written summary · about
chapters (12)
- 0:00Introduction to testing
- 3:24Why GitHub actions
- 5:38Workflow basics
- 10:13Configuring the workflow
- 14:10Build and deploy preview
- 17:44PR feedback and secrets
- 20:49Testing with live URLs
- 23:45Lighthouse performance
- 27:57Playwright end-to-end
- 31:40Production deployment
- 34:54Advanced automations
- 40:12Q&A and conclusion
related talks
47mFront End Testing with GitHub Actions
47mFront End Testing with GitHub Actions
18mAutomating All the Code & Testing Things with GitHub Actions
18mDeveloper Workflow Automation with GitHub Actions (CI/CD)
50m360° automation with GitHub Actions
29mShip it with GitHub Actions and GitHub Packages
26mAccelerating cloud native deployment with GitHub Actions and AWS
30mSpend More Time Coding & Automate the Boring Stuff