CI-integratie
Voer E2E-tests uit in continuous integration
CI-integratie is een gratis Angular Academy-les op CoddyKit. Dit is les 4 van 4. Je kunt 3 lessen uit dit leerpad gratis volledig lezen — daarna ontgrendelt CoddyKit PRO alle lessen, plus praktische oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject Angular Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Angular Academy bevat in totaal 4 lessen.
Waarom E2E in CI uitvoeren
E2E-tests zijn het waardevolst wanneer ze automatisch bij elke push of pull request worden uitgevoerd. Continuous Integration (CI) vangt regressies op voordat ze worden samengevoegd, zodat een defecte inlogflow nooit ongemerkt in productie terechtkomt.
Wat CI nodig heeft om E2E uit te voeren
De CI-taak moet afhankelijkheden installeren, Playwright-browsers installeren, de Angular-app bouwen of beschikbaar maken en daarna de tests headless uitvoeren. CI-machines hebben geen beeldscherm, dus tests worden standaard in headless-modus uitgevoerd.
Browsers in CI installeren
Browsers worden niet in uw repository opgenomen. Installeer ze in de pipeline met het installatieprogramma van Playwright, inclusief de afhankelijkheden van het besturingssysteem.
npm ci
npx playwright install --with-depsPlaywright de app laten starten
De configuratie webServer vertelt Playwright dat het uw app vóór de tests moet starten en daarna moet afsluiten. Stel in CI reuseExistingServer: false in, zodat altijd een nieuwe server wordt gestart.
// playwright.config.ts
export default {
webServer: {
command: 'ng serve --configuration production',
url: 'http://localhost:4200',
reuseExistingServer: !process.env.CI,
},
};Een GitHub Actions-workflow
Een typische workflow haalt de code op, stelt Node in, installeert afhankelijkheden en browsers en voert daarna de testsuite uit.
# .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- en CI-vlaggen
Playwright detecteert CI automatisch via de omgevingsvariabele CI en past zijn gedrag aan: mislukte tests worden opnieuw uitgevoerd, test.only wordt verboden en er worden voorzichtig meer workers gebruikt. U kunt het aantal pogingen ook expliciet instellen.
export default {
retries: process.env.CI ? 2 : 0,
forbidOnly: !!process.env.CI,
};Het HTML-rapport publiceren
Playwright maakt een HTML-rapport. Upload dit als CI-artefact, zodat fouten na de uitvoering kunnen worden onderzocht, inclusief traces en screenshots.
- uses: actions/upload-artifact@v4
if: always()
with:
name: playwright-report
path: playwright-report/Traces bij fouten vastleggen
Configureer traces zodat ze alleen bij de eerste nieuwe poging worden vastgelegd. Zo blijven uitvoeringen snel en krijgt u toch een volledige herhaling van elke fout voor het opsporen van problemen.
export default {
use: { trace: 'on-first-retry', screenshot: 'only-on-failure' },
};Sharding voor meer snelheid
Grote testsuites kunnen met --shard over parallelle machines worden verdeeld. Elke CI-taak voert een deel uit, waardoor de totale kloktijd afneemt.
npx playwright test --shard=1/3
npx playwright test --shard=2/3
npx playwright test --shard=3/3Caching om CI te versnellen
Cache node_modules en de binaire bestanden van de Playwright-browsers tussen uitvoeringen, zodat installaties niet het grootste deel van de bouwtijd in beslag nemen. De meeste CI-providers bieden een cacheactie met uw lockfile als sleutel.
De build correct laten mislukken
Playwright wordt afgesloten met een code die niet nul is wanneer een test mislukt. Daardoor markeert CI de taak als mislukt en blokkeert het samenvoegen. Laat die afsluitcode niet verdwijnen met || true, anders slagen defecte tests stilletjes.
Korte controle
Wat installeert browsers in CI?
Samenvatting
Voer E2E bij elke push uit door afhankelijkheden en browsers te installeren (playwright install --with-deps), webServer de app te laten starten en de tests headless uit te voeren met CI-bewuste nieuwe pogingen. Upload het HTML-rapport en de traces als artefacten, gebruik sharding voor meer snelheid en laat de afsluitcode die niet nul is mislukte samenvoegingen blokkeren.
Leer HTML met een AI-tutor — gratis
Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.
- Cursussen
- 38
- Lessen
- 144
Veelgestelde vragen
Is de les “CI-integratie” gratis?
Ja — je kunt hier op het web alle 3 lessen van het leerpad Angular Academy, waaronder “CI-integratie”, gratis volledig lezen. Daarna ontgrendelt CoddyKit PRO alle lessen, plus interactieve oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. De cursus Angular Academy bevat in totaal 4 lessen.
Wat leer ik in “CI-integratie”?
Voer E2E-tests uit in continuous integration Je oefent met Angular Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.
Heb ik ervaring nodig om met Angular Academy te beginnen?
Ervaring vooraf is niet nodig. Angular Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 4 van 4.
Hoe lang duurt de les “CI-integratie”?
De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.
Kan ik code schrijven en uitvoeren in deze les over Angular Academy?
Ja. Elke les over Angular Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.