Recommended Free Tools
Install Cypress as a development dependency, build the Angular version you want to test, start it or target a deployed environment, wait until it responds, and run cypress run in your CI job. The readiness check is essential: starting a server and immediately running Cypress can fail because the application may not be ready when the first test visits it.
This guide covers end-to-end UI tests. It assumes Cypress is installed and at least one test already passes locally. The exact pipeline YAML depends on your CI provider; the examples below use GitHub Actions and the current Cypress action example, so confirm action and runner versions when adopting it.
As an Amazon Associate I earn from qualifying purchases.
1. Confirm what the tests cover
Cypress end-to-end (E2E) tests exercise the application through user-visible browser flows. That is different from unit tests, which focus on smaller units of code. Angular’s end-to-end testing guide describes E2E setup through a configured builder; ng e2e delegates to that builder, and Cypress is one available integration.
Outdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchPC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11Before changing CI, confirm that the Cypress project opens and the relevant test passes locally. The pipeline should run the same test command and target the same kind of application environment you intend to validate.
2. Install Cypress and define a repeatable command
Cypress recommends installing the package as a development dependency, then using its CLI run mode for CI. From the Angular project directory:
npm install cypress --save-devAdd a script to package.json so local development and CI invoke the same command:
{
"scripts": {
"cy:run": "cypress run"
}
}Run it locally with:
npm run cy:runcypress run runs tests from the command line without opening Cypress’s interactive app, which makes it suitable for a headless CI job. Commit the updated package manifest and lockfile so the CI install uses the project’s pinned dependency tree. Cypress documents equivalent install and run approaches for npm, Yarn, pnpm, and Bun in its CI overview.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
3. Build the Angular app you mean to test
Decide whether the tests should exercise a production build, a development server, or an already deployed environment. For a locally built artifact, use the project’s existing build script and Angular configuration, rather than copying flags or output paths from an old tutorial.
For example, if package.json contains a build script, the pipeline can run:
npm run buildCheck angular.json and the active build configuration to establish where the files are emitted and which settings are applied. Angular output directories and build options are project-specific; do not assume a historical dist path or a legacy ng build --prod flag will match your application.
Keep the build target consistent with the purpose of the check. A production build can validate the artifact intended for release; a development server may suit a faster pre-merge check. A deployed target can test an environment closer to production, but then the pipeline must manage deployment timing, test data, and cleanup.
4. Start the app and wait for readiness
Do not rely on a fixed delay or start the server in the background and immediately invoke Cypress. Cypress warns that there is no guarantee a server has booted by the time cypress run executes. If the browser visits the URL too early, tests can fail even though the application would soon have started.
Use an HTTP readiness check against the URL Cypress will visit. Cypress documents start-server-and-test for starting a server, waiting for a successful response, running tests, and stopping the server afterward. Install it as a development dependency if you want this orchestration locally and in CI:
npm install start-server-and-test --save-devThen configure scripts with your actual server and test commands. For example, if start:ci starts the built application on port 4200:
{
"scripts": {
"start:ci": "your-command-to-serve-the-angular-build",
"cy:run": "cypress run",
"test:e2e:ci": "start-server-and-test start:ci http://127.0.0.1:4200 cy:run"
}
}Replace the illustrative server command with the command and static-file server appropriate to your project; the placeholder is not an executable Angular command. If your CI action itself starts the server and waits for a URL, use that mechanism instead. The important behavior is the same: Cypress starts only after the target URL responds.
When testing a deployed site, skip local server startup and configure the job to wait for the deployed URL, then point Cypress at that URL through the project’s Cypress configuration or environment setup.
5. Add the Cypress job to GitHub Actions
For a GitHub repository, a job can check pull requests and pushes to the repository’s primary branch. The example follows Cypress’s GitHub Actions documentation as updated September 20, 2026: Ubuntu 24.04, actions/checkout@v7, and cypress-io/github-action@v7. Verify the currently supported runner and action versions when creating or updating a workflow.
Save a workflow such as .github/workflows/e2e.yml. Replace the example branch name, build command, start command, and readiness URL to match your repository. The action’s start and wait-on inputs provide the server readiness gate.
name: Angular Cypress E2E
on:
pull_request:
push:
branches: [main]
jobs:
cypress:
runs-on: ubuntu-24.04
steps:
- name: Check out repository
uses: actions/checkout@v7
- name: Run Cypress tests
uses: cypress-io/github-action@v7
with:
build: npm run build
start: npm run start:ci
wait-on: 'http://127.0.0.1:4200'
command: npm run cy:runThis assumes npm run build and npm run start:ci are valid scripts in the repository and that the latter serves the intended Angular build at the readiness URL. If your chosen start command also launches a development server that performs its own build, avoid building redundantly; use scripts that implement the actual workflow you want.
Do these 3 things before closing this tab:
1Scan for outdated or missing drivers - takes under a minute2Repair Windows errors before they cause bigger problems3Fix the driver behind crashes, sound loss and screen glitchesA failed Cypress command returns a failure status, so the job fails and can block a pull request when repository branch protection requires that check. Set triggers and required checks according to your team’s branch policy rather than assuming every repository uses a branch named main.
The Cypress action supports a deployed target as well: configure the workflow to wait for that environment’s URL instead of supplying local build and start commands. Cypress lists provider-specific guidance for GitHub Actions and other CI systems in its CI documentation.
6. Adapt the flow to another CI provider
The provider syntax changes, but the reliable sequence does not:
- Check out the repository and select a supported Node.js and browser environment.
- Install dependencies from the lockfile.
- Build the Angular target the tests should exercise.
- Start the local app or arrange access to the deployed target.
- Wait for the target URL to respond.
- Run
cypress runand make its exit status determine the job result. - Retain useful test results or artifacts according to the provider’s capabilities and your team’s needs.
Cypress documents CI support for providers including CircleCI, GitLab, Jenkins, and AWS CodeBuild. For Azure Pipelines, Microsoft’s JavaScript apps guidance covers Angular CLI build usage and browser test/result-publishing primitives. Pair those general Azure capabilities with Cypress’s own CI and readiness guidance; the cited Microsoft material is not a Cypress-specific Azure YAML recipe.
The Tool Desk
Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Choose based on the platform your repository already uses, runner and browser availability, readiness-check support, artifact visibility and retention, permissions and secrets handling, and any caching or parallelization needs. The available guidance does not establish a like-for-like price or performance comparison among providers.
7. Make failures useful without adding unnecessary services
A basic Cypress CI run does not require Cypress Cloud. Cypress Cloud is an optional addition for recorded reports, failure context, screenshots and videos, flaky-test signals, and parallelization when configured. Decide whether those reporting and collaboration capabilities justify the added setup for your team.
Use short-lived checkout credentials provided by the CI platform where possible. Cypress advises against putting a long-lived personal access token in the job. Store any necessary secrets in the provider’s protected secret mechanism, limit access to the workflows and branches that need them, and do not print secret values in logs.
8. Troubleshoot common pipeline failures
Tests start before the Angular server
Symptom: Cypress cannot visit the local URL or reports connection errors at the start of the run.
Cause and fix: The server was launched asynchronously without a readiness gate. Add the Cypress action’s wait-on input or use a readiness tool such as start-server-and-test to wait for the URL to respond before tests begin.
The readiness check never succeeds
Symptom: The job waits until it times out without reaching Cypress.
Cause and fix: Confirm that the server is actually running, listens on the expected port and interface, and serves the configured path. Check that the readiness URL matches the server command and that the job can reach it. A URL typo or a server bound somewhere inaccessible to the job can look like a slow startup.
The job cannot find the built app
Symptom: The server starts but returns an error, a directory listing, or the wrong application.
Cause and fix: The serving command may point to an assumed output directory or an inactive build configuration. Inspect the build output and current Angular configuration, then configure the server to serve the actual generated artifact.
The workflow passes locally but fails in CI
Symptom: A test behaves differently on the runner, or a required command is missing.
Cause and fix: Ensure the workflow installs dependencies from the committed lockfile, uses a supported Node/browser environment, and invokes the same project scripts as local development. For reproducibility across runner image updates, Cypress describes using consistent browser Docker images; container jobs on GitHub Actions require Linux runners according to its documentation.
A failed check does not block a pull request
Symptom: The Cypress job is red, but merging remains possible.
Quick wins for a faster PC:
Repair Windows errors before they cause bigger problemsFix Now →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Cause and fix: A workflow result alone does not establish a merge gate. Configure the repository’s branch protection or ruleset to require the Cypress status check, and verify that the workflow triggers on the intended pull requests and branches.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.9. Scale only when the suite requires it
Start with one job that builds, serves, waits, and runs the suite. Cypress documents caching and parallelization options for larger suites; consider them when runtime or repeated dependency installation becomes an operational problem. Avoid making Cloud recording, parallel runs, or a container image prerequisites for a basic pipeline.
If you adopt browser containers, keeping the browser image consistent can reduce version skew when hosted runner images change. Choose a supported Linux runner for GitHub Actions container jobs, and update pinned action or image versions deliberately rather than treating an example version as permanent.
Or skip the browser setup
For website screenshots rather than interactive Angular flow tests, ScreenshotNeo offers a one-request screenshot API and an MCP server. It does not replace Cypress E2E tests or validate that an application flow works. Its API can return a screenshot or PDF; cookie banners and other known interruptions are handled before capture, while bot checks, blank pages, failed loads, timeouts, and cache hits are not billed. AI agents can use its MCP tools to take screenshots, inspect page info, and capture PDFs.
Here is the cURL form of the one-call request, with a sample target URL:
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpSee the ScreenshotNeo API documentation for parameters and response details. The free plan includes 1,000 screenshots per month without a card; paid plans start at $5 for 3,000 shots. Sign up for the free plan.
Frequently Asked Questions
Does Cypress Cloud have to be enabled for Cypress tests to run in CI?
No. Cloud reporting and related features are optional; the CLI can run the tests without it.
Can I run the Angular tests against a deployed site instead of a local build?
Yes. Configure the job to wait for the deployed site’s URL and have Cypress target that environment; account for deployment readiness and test data separately.
Free tools Windows power users keep installed
One-click scans. No signup required.
Does Angular’s `ng e2e` run Cypress by itself?
It delegates to the E2E builder configured for the project. Cypress is one integration, not an automatic default for every Angular project.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
