Files
overleaf-cep/services/web/cypress.config.ts
Jakob Ackermann 37e27bb22e [saas-e2e] reduce disk IO and webpack overhead (#36997)
* [monorepo] reduce writes from chrome in cypress

Chrome puts its shared memory in /dev/shm, and docker's default 64MB is far
too small for it - which is why Cypress passes --disable-dev-shm-usage,
spilling those segments to files on the container's writable layer instead.
Under one spec that is a few hundred MB of write-then-delete churn; under the
CI fan-out it was most of the disk bandwidth on the whole box.

So every service built from dockerfiles/cypress gets shm_size 1gb and every
cypress config drops the flag again: the SaaS e2e service, web's CI and local
component-test services plus its standalone cypress one, and server-ce's e2e
and native cypress services. Both e2e-open variants inherit the setting
through `extends`; the native one is a service of its own, and would be left
running Chrome against 64MB once the flag is gone.

* [monorepo] adopt cypress-pnp-reporter

Materializing the reporter packages copied 267 packages / 3779 files
(59MB) into /tmp on every container start, once per spec. Resolving them
through PnP inside Cypress's Electron process instead drops that to
zero: the entrypoint shell went from 55.6MB of write_bytes to 0.

* [web] serve built assets from a prepared buffer between builds

Serving a chunk cost ~2ms whatever its size, and an editor page pulls ~144
of them, so webpack-dev-server burned 2-3 cores through an e2e run purely
answering requests for output that had not changed since the last build.

It is not bytes: cutting the bundle 2.6x with a cheaper devtool moved CPU
by 8%, and an empty 304 cost nearly as much as the full body. It is the
per-request work - reading the asset out of the in-memory filesystem and
re-hashing the whole body for a strong ETag, on every request.

Three things a build does that this has to respect, each found by tracing
the hooks rather than by reading them:

- `done` fires twice per build, for the compilation and for the manifest,
  both with the same hash. A flag would have been cleared by the second
  while the first was still running, so the gate is a counter.
- An incremental `done` reports only the assets it rewrote - 16, not 630 -
  so asset names accumulate. Resetting them on `invalid` left the
  manifest's two behind and nothing was served from here again.
- webpack-dev-middleware holds requests during a rebuild. This sits in
  front of it, so it steps aside for that window and drops the cache when
  a rebuild starts. Whether a response can be kept is then decided as it
  ends rather than as it began: an epoch bumped on `invalid` names the
  build its bytes were read from, and only a response from the current
  build with no rebuild in flight is stored. A rebuild starting
  mid-response can no longer write the previous build's bytes in behind
  the cache being dropped, which eviction by asset name could not catch
  anyway - an incremental build does not name the assets it left alone.

Measured on the editor entrypoint, 16 concurrent clients:
0.26-0.31s -> 0.045-0.050s of webpack CPU per page load, and 0.0455s
immediately after a rebuild. Same chunk graph, byte-identical output.

GitOrigin-RevId: 08b4ab2d665414069bc01b4763dd64faa9b4e5cb
2026-09-17 12:07:28 +00:00

52 lines
1.8 KiB
TypeScript

import { defineConfig } from 'cypress'
import { webpackConfig } from './cypress/support/webpack.cypress'
// Cypress builds reporters in its Electron process, which has no Yarn PnP.
// @overleaf/cypress-pnp-reporter loads cypress-multi-reporters there.
let reporterOptions = {}
if (process.env.CI) {
reporterOptions = {
reporter: require.resolve('@overleaf/cypress-pnp-reporter'),
reporterOptions: {
configFile: 'cypress/cypress-multi-reporters.json',
},
}
}
export default defineConfig({
fixturesFolder: 'cypress/fixtures',
video: process.env.CYPRESS_VIDEO === 'true',
downloadsFolder: process.env.CYPRESS_DOWNLOADS || 'cypress/downloads',
screenshotsFolder: process.env.CYPRESS_RESULTS || 'cypress/results',
videosFolder: process.env.CYPRESS_RESULTS || 'cypress/results',
viewportHeight: 800,
viewportWidth: 800,
component: {
devServer: {
framework: 'react',
bundler: 'webpack',
webpackConfig,
},
setupNodeEvents(on, config) {
on('before:browser:launch', (browser, launchOptions) => {
if (browser.family === 'chromium') {
// Cypress adds this for docker's default 64MB /dev/shm; the compose services raise shm_size instead, so Chrome's shared memory stays in RAM.
const noDevShm = launchOptions.args.indexOf('--disable-dev-shm-usage')
if (noDevShm !== -1) {
launchOptions.args.splice(noDevShm, 1)
}
}
return launchOptions
})
},
specPattern:
process.env.CYPRESS_SPEC_PATTERN ||
'./{test,modules/**/test}/frontend/**/*.spec.{js,jsx,ts,tsx}',
excludeSpecPattern: process.env.CYPRESS_EXCLUDE_SPEC_PATTERN,
},
retries: {
runMode: parseInt(process.env.CYPRESS_RETRIES || '3', 10) || 3,
},
...reporterOptions,
})