Learn Cypress - Performance Optimization

#Introduction

A slow suite is just as dangerous as a flaky one — the team stops running it. Episode 15 covers strategies to speed up tests: component testing and parallel runs, minimizing page loads, selective execution and grouping, and caching and plugins to speed up the flow.

The end goal is not speed for speed's sake, but a feedback loop fast enough that tests are run as often as possible.

#Speeding Up Execution with Component Testing and Parallel Runs

#Component Testing for a Fast Loop

Back to episode 9: component testing is much faster than E2E because it does not load the whole application. Separate detailed component testing from E2E:

npx cypress run --component
npx cypress run --e2e

npx cypress run --component runs only the component specs — usually within seconds. --e2e handles the full scenarios. Running them separately lets CI block earlier: component errors are caught before the expensive E2E layer.

#Parallel Runs

For E2E suites that remain large, use the parallelization from episode 14. Add two or more runners with shared load:

npx cypress run --record --parallel --ci-build-id 20260810-1

--ci-build-id marks a group of runners as one single build. The Dashboard then divides specs dynamically so the load is spread evenly.

#Minimizing Page Loads and Redundant Setup

#One Visit, Many Assertions

Every cy.visit() reloads the page — which is expensive. If several tests use the same state, group them in one describe with before:

Avoiding repeated visits

before(() => {
  cy.visit("/dashboard");
});
 
it("menampilkan grafik", () => {
  cy.get("[data-cy=grafik]").should("be.visible");
});
 
it("menampilkan ringkasan", () => {
  cy.get("[data-cy=ringkasan]").should("be.visible");
});

before(() => { cy.visit("/dashboard"); }) loads the page once for the whole block. Both tests use the same DOM — saving time without sacrificing clarity.

#Use cy.session for Login

Logging in through the UI in every test is very expensive. cy.session() from episode 10 stores the session so login only happens once:

One login session for many tests

beforeEach(() => {
  cy.session("admin", () => {
    cy.login("admin@example.com", "rahasia123");
  });
});

cy.session("admin", ...) makes login run once and then be reused by subsequent tests. For login-heavy suites, the savings are significant.

#Selective Test Execution and Grouping

#Choosing Specs Based on Changes

Do not always run the entire suite. Be selective based on what changed:

npx cypress run --spec "cypress/e2e/auth/**/*.cy.js"

--spec "cypress/e2e/auth/**/*.cy.js" runs only the specs in the auth folder. This pattern is used in CI when a change only touches a particular module — called diff-selected test pipelines.

#Grouping in the Dashboard

Use --group to tag groups of tests in the Dashboard:

npx cypress run --record --group "smoke"

--group "smoke" labels the run as a smoke test. With labels, the team can tell apart a fast suite for every commit from a full suite for releases.

#Caching and Plugin Features

#Caching Dependencies and Binaries

Installing Cypress in CI takes time. Store a cache:

- uses: actions/cache@v4
  with:
    path: ~/.cache/Cypress
    key: ${{ runner.os }}-cypress-${{ hashFiles('bun.lock') }}

path: ~/.cache/Cypress marks the binary cache folder. With caching, installation drops from several minutes to seconds. Do the same for node_modules with your package manager.

#Plugins for Optimization

Some plugins help speed up execution: cypress-failed-log speeds up diagnosis, while the experimentalModifyObstructiveThirdPartyCode configuration and stopping unnecessary requests can cut time. Remember: the best optimization is removing tests that have no value.

#Closing

Episode 15 turned a slow suite into a responsive one: component testing for a fast loop, parallel runs with load balancing, reducing page loads and redundant setup with before and cy.session(), selective execution with --spec and --group, and caching dependencies and binaries in CI.

Key takeaways:

• Run component testing and E2E as separate layers.
• cy.session() and before reduce repeated page visits.
• Use --spec to run tests for the parts that changed.
• Cache ~/.cache/Cypress and node_modules in CI.
• The best speed comes from the right tests, not just fast ones.

In the next episode, episode 16, we will cover visual testing and regression — integration with Percy and Applitools, baseline screenshots and visual diffs, detecting layout regressions and UI drift, and visual regression best practices.