CI Integration
Run E2E tests in continuous integration.
CI Integration is a free Angular Academy lesson on CoddyKit — lesson 4 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Angular Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
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.
Frequently asked questions
Is the “CI Integration” lesson free?
Yes — the full text of “CI Integration” is free to read here on the web, and the Angular Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Angular Academy course, upgrade to CoddyKit PRO.
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; this is — lesson 4 of 4, so you can start here or from the beginning and move at your own pace.
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.