CI Integration
Run E2E tests in continuous integration.
CI Integration is a free Angular Academy lesson on CoddyKit. This is lesson 4 of 4. Any 3 lessons of this learning path are free to read in full — after that, CoddyKit PRO unlocks every lesson, plus hands-on practice with a built-in code editor and a 24/7 AI tutor. It is part of the Angular Academy learning path, and your progress syncs across the web and the CoddyKit app. The Angular Academy course includes 4 lessons in total.
Why Run E2E in CI
E2E tests are most valuable when they run automatically on every push or pull request. Continuous Integration (CI) catches regressions before they merge, so a broken login flow never reaches production unnoticed.
What CI Needs to Run E2E
The CI job must: install dependencies, install Playwright browsers, build or serve the Angular app, then run the tests headlessly. CI machines have no display, so tests run in headless mode by default.
Installing Browsers in CI
Browsers are not committed to your repo. Install them in the pipeline with Playwright's installer, including OS dependencies.
npm ci
npx playwright install --with-depsLetting Playwright Start the App
The webServer config tells Playwright to launch your app before tests and shut it down after. In CI set reuseExistingServer: false so it always starts a fresh server.
// playwright.config.ts
export default {
webServer: {
command: 'ng serve --configuration production',
url: 'http://localhost:4200',
reuseExistingServer: !process.env.CI,
},
};A GitHub Actions Workflow
A typical workflow checks out the code, sets up Node, installs deps and browsers, then runs the suite.
# .github/workflows/e2e.yml
name: e2e
on: [push, pull_request]
jobs:
test:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- uses: actions/setup-node@v4
with: { node-version: 20 }
- run: npm ci
- run: npx playwright install --with-deps
- run: npx playwright testHeadless and CI Flags
Playwright auto-detects CI via the CI env var and adjusts: it retries failed tests, forbids test.only, and uses more workers carefully. You can also set retries explicitly.
export default {
retries: process.env.CI ? 2 : 0,
forbidOnly: !!process.env.CI,
};Publishing the HTML Report
Playwright produces an HTML report. Upload it as a CI artifact so failures are inspectable after the run, including traces and screenshots.
- uses: actions/upload-artifact@v4
if: always()
with:
name: playwright-report
path: playwright-report/Capturing Traces on Failure
Configure traces to record only on the first retry. This keeps runs fast while giving you a full replay of any failure for debugging.
export default {
use: { trace: 'on-first-retry', screenshot: 'only-on-failure' },
};Sharding for Speed
Large suites can be split across parallel machines with --shard. Each CI job runs a slice, cutting total wall-clock time.
npx playwright test --shard=1/3
npx playwright test --shard=2/3
npx playwright test --shard=3/3Caching to Speed Up CI
Cache node_modules and the Playwright browser binaries between runs so installs do not dominate build time. Most CI providers offer a cache action keyed on your lockfile.
Failing the Build Correctly
Playwright exits with a non-zero code when any test fails, which makes CI mark the job red and block the merge. Do not swallow that exit code with || true, or broken tests will pass silently.
Quick Check
What installs browsers in CI?
Recap
Run E2E on every push by installing deps and browsers (playwright install --with-deps), letting webServer start the app, and running headlessly with CI-aware retries. Upload the HTML report and traces as artifacts, shard for speed, and let the non-zero exit code block bad merges.
Learn HTML with an AI tutor — free
Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.
- Courses
- 38
- Lessons
- 144
Frequently Asked Questions
Is the “CI Integration” lesson free?
Yes — any 3 lessons of the Angular Academy learning path, including “CI Integration”, are free to read in full here on the web. After that, CoddyKit PRO unlocks every lesson, plus interactive practice with a built-in code editor and a 24/7 AI tutor. The Angular Academy course includes 4 lessons in total.
What will I learn in “CI Integration”?
Run E2E tests in continuous integration. You practise Angular Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start Angular Academy?
No prior experience is required. Angular Academy on CoddyKit is structured for beginners through advanced learners, so you can start here or from the beginning and move at your own pace. This is lesson 4 of 4.
How long does the “CI Integration” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this Angular Academy lesson?
Yes. Every Angular Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.