Documentation Index
Fetch the complete documentation index at: https://mintlify.com/kevinrodriguezmorales/siget/llms.txt
Use this file to discover all available pages before exploring further.
The Angular CLI exposes the ng e2e command for running end-to-end tests, but it does not bundle an e2e framework by default. Instead, you choose the tool that best fits your workflow and wire it into the Angular CLI’s e2e architect target. This keeps the Siget starter lean while giving you full freedom to pick Playwright, Cypress, or any other browser-testing framework.
Siget does not pre-configure an e2e framework. The angular.json file ships without an "e2e" architect target. You must add one before ng e2e will work. Follow the setup steps for your preferred framework below.
Choosing a Framework
Playwright (Recommended)
Cypress
Playwright is a modern, cross-browser automation library maintained by Microsoft. It supports Chromium, Firefox, and WebKit in a single API, runs tests in parallel out of the box, and integrates cleanly with Angular via a community builder.Install Playwright
npm install --save-dev @playwright/test
playwright.config.ts file in the project root:import { defineConfig, devices } from '@playwright/test';
export default defineConfig({
testDir: './e2e',
fullyParallel: true,
forbidOnly: !!process.env['CI'],
retries: process.env['CI'] ? 2 : 0,
reporter: 'html',
use: {
baseURL: 'http://localhost:4200',
trace: 'on-first-retry',
},
projects: [
{
name: 'chromium',
use: { ...devices['Desktop Chrome'] },
},
],
webServer: {
command: 'ng serve',
url: 'http://localhost:4200',
reuseExistingServer: !process.env['CI'],
},
});
Add the e2e Architect Target
Add an "e2e" target to the siget project in angular.json. With Playwright you can invoke the config directly via an npm script, or use a community builder. The simplest approach is a dedicated npm script:"scripts": {
"e2e": "playwright test"
}
Write a Sample Test
Create an e2e/ directory and add your first test file:// e2e/app.spec.ts
import { test, expect } from '@playwright/test';
test('displays the app title', async ({ page }) => {
await page.goto('/');
await expect(page.locator('h1')).toContainText('Hello, siget');
});
test('page has correct title', async ({ page }) => {
await page.goto('/');
await expect(page).toHaveTitle(/siget/i);
});
Run the Tests
npx playwright test
# Or via the npm script
npm run e2e
Cypress is a battle-tested e2e testing framework with a rich interactive test runner and time-travel debugging. An official Angular schematic makes it straightforward to integrate with the Angular CLI.Install Cypress
npm install --save-dev cypress
Add the Angular Schematic
The @cypress/schematic package automatically adds the "e2e" architect target to angular.json and scaffolds configuration files:ng add @cypress/schematic
cypress.config.ts in the project root. Review and adjust the base URL if needed:import { defineConfig } from 'cypress';
export default defineConfig({
e2e: {
baseUrl: 'http://localhost:4200',
specPattern: 'cypress/e2e/**/*.cy.{js,jsx,ts,tsx}',
supportFile: 'cypress/support/e2e.ts',
},
});
Write a Sample Test
Add a spec file under the cypress/e2e/ directory:// cypress/e2e/app.cy.ts
describe('App', () => {
beforeEach(() => {
cy.visit('/');
});
it('displays the app title', () => {
cy.get('h1').should('contain.text', 'Hello, siget');
});
it('loads the home page', () => {
cy.url().should('eq', 'http://localhost:4200/');
});
});
Run the Tests
After the schematic configures the architect target, use the Angular CLI:# Open the interactive Cypress test runner
ng e2e
# Run headlessly in CI
ng e2e --headless
npx cypress open # interactive
npx cypress run # headless
Running ng e2e
Once you have configured an e2e framework and registered its builder in the "e2e" architect target of angular.json, you can use the standard Angular CLI command:
Most e2e builders (including @cypress/schematic) automatically start the Angular dev server before running tests and shut it down afterward. Check your builder’s documentation to confirm this behavior so you don’t need to manage the server manually.
If your e2e builder does not manage the dev server automatically, you must start it in a separate terminal before running tests:# Terminal 1 — start the dev server
ng serve
# Terminal 2 — run e2e tests
ng e2e
