CI-integration
Kør E2E-tests i continuous integration.
CI-integration er en gratis Angular Academy-lektion på CoddyKit. Dette er lektion 4 af 4. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i Angular Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Angular Academy-kurset indeholder 4 lektioner i alt.
Hvorfor køre E2E i CI
E2E-tests er mest værdifulde, når de kører automatisk ved hvert push eller hver pull request. Continuous Integration (CI) opdager regressioner, før de flettes ind, så et ødelagt loginforløb aldrig ubemærket når i produktion.
Hvad CI skal bruge for at køre E2E
CI-jobbet skal installere afhængigheder, installere Playwright-browsere, bygge eller starte Angular-appen og derefter køre testene uden brugerflade. CI-maskiner har ingen skærm, så testene kører som standard uden brugerflade.
Installation af browsere i CI
Browsere gemmes ikke i dit repository. Installer dem i byggeforløbet med Playwrights installationsprogram, inklusive afhængigheder til operativsystemet.
npm ci
npx playwright install --with-depsLad Playwright starte appen
Konfigurationen webServer fortæller Playwright, at din app skal startes før testene og lukkes ned bagefter. I CI skal du angive reuseExistingServer: false, så der altid startes en ny server.
// playwright.config.ts
export default {
webServer: {
command: 'ng serve --configuration production',
url: 'http://localhost:4200',
reuseExistingServer: !process.env.CI,
},
};En GitHub Actions-arbejdsgang
En typisk arbejdsgang henter koden, sætter Node op, installerer afhængigheder og browsere og kører derefter testpakken.
# .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 testFlag til headless og CI
Playwright registrerer automatisk CI via miljøvariablen CI og justerer sin adfærd: den gentager fejlslagne tests, forbyder test.only og bruger flere workers med omtanke. Du kan også angive antallet af gentagelser eksplicit.
export default {
retries: process.env.CI ? 2 : 0,
forbidOnly: !!process.env.CI,
};Udgivelse af HTML-rapporten
Playwright opretter en HTML-rapport. Upload den som en CI-artifakt, så fejl kan undersøges efter kørslen, inklusive sporingsdata og skærmbilleder.
- uses: actions/upload-artifact@v4
if: always()
with:
name: playwright-report
path: playwright-report/Optagelse af spor ved fejl
Konfigurer sporingsdata til kun at blive optaget ved den første gentagelse. Det holder kørslerne hurtige, samtidig med at du får en fuld afspilning af enhver fejl til fejlfinding.
export default {
use: { trace: 'on-first-retry', screenshot: 'only-on-failure' },
};Sharding for højere hastighed
Store testpakker kan opdeles på parallelle maskiner med --shard. Hvert CI-job kører en delmængde, hvilket reducerer den samlede klokketid.
npx playwright test --shard=1/3
npx playwright test --shard=2/3
npx playwright test --shard=3/3Caching for hurtigere CI
Cache node_modules og Playwrights browserbinærfiler mellem kørsler, så installationer ikke optager det meste af byggetiden. De fleste CI-udbydere tilbyder en cachehandling med en nøgle baseret på din lockfile.
Korrekt fejlslagning af bygget
Playwright afslutter med en kode, der ikke er nul, når en test fejler. Det får CI til at markere jobbet med rødt og blokere fletningen. Du må ikke undertrykke denne afslutningskode med || true, for så kan ødelagte tests bestå uden synlig fejl.
Hurtigt tjek
Hvad installerer browsere i CI?
Opsummering
Kør E2E ved hvert push ved at installere afhængigheder og browsere (playwright install --with-deps), lade webServer starte appen og køre uden brugerflade med gentagelser, der tager højde for CI. Upload HTML-rapporten og sporingsdataene som artifakter, brug sharding for at øge hastigheden, og lad afslutningskoden, der ikke er nul, blokere dårlige fletninger.
Lær HTML med en AI-underviser — gratis
Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.
- Kurser
- 38
- Lektioner
- 144
Ofte stillede spørgsmål
Er lektionen “CI-integration” gratis?
Ja — alle 3 lektioner i læringssporet Angular Academy, inklusive “CI-integration”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Angular Academy-kurset indeholder 4 lektioner i alt.
Hvad lærer jeg i “CI-integration”?
Kør E2E-tests i continuous integration. Du øver dig i Angular Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.
Skal jeg have erfaring for at begynde på Angular Academy?
Der kræves ingen tidligere erfaring. Angular Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 4 af 4.
Hvor lang tid tager lektionen “CI-integration”?
De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.
Kan jeg skrive og køre kode i denne Angular Academy-lektion?
Ja. Alle Angular Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.