Using CI to Test the Frontend: the TeamCity Example
summary
A concrete TeamCity CI pipeline for frontend testing that runs linters, type checks, Storybook rendering, snapshot tests, visual-diff checks, packages artifacts, and runs integration tests. Uses Storybook + WebDriver + Hermiona to capture screenshots, Jest snapshots with pixel-diff for UI regression, and Husky git hooks to run tests pre-commit; the pipeline runs three parallel builds on free TeamCity tiers and successfully prevented critical regressions for the 2019.1 release.
AI-written summary · about
chapters (11)
- 0:00Introduction
- 2:30Code quality filter
- 5:15Linters for consistency
- 7:23Storybook visual tests
- 9:31Screenshot automation
- 13:27React rendering issues
- 16:41Snapshot app structure
- 19:55Intent integration tests
- 21:21Git hooks checks
- 22:47TeamCity builds/tests
- 25:16CI efficiency results
related talks
35mTesting in Frontend World
50mFrontend-as-a-Service Automated Testing: Layers and CI Pipelines
41mFrom 0 to 100: How We Jump-Started Our Frontend Testing
12mHow Development Teams Can Benefit From Working With Tests in a CI/CD (TeamCity example)
31mContinuous Testing in a DevOps World
30mCI with Angular, Node and Teamcity
42mWait, I have to test the front end too?
01h 00mCI/CD, the Jobtech way