Our great sponsors
-
-
SurveyJS
Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.
-
tour-of-heroes-react-cypress-ts
The final application built in the book CCTDD: Cypress Component Test Driven Design
-
appsyncmasterclass-frontend
Frontend for a Twitter Clone built with Vue, Tailwind, AWS Amplify & Cognito
-
-
WorkOS
The modern identity platform for B2B SaaS. The APIs are flexible and easy-to-use, supporting authentication, user identity, and complex enterprise features like SSO and SCIM provisioning.
It has been almost 2 years since my friend Gleb Bahmutov published the blog Fast Cypress spec bundling using ESBuild and the npm module cypress-esbuild-preprocessor. He reported incredible gains in test latency when using esbuild as opposed to the Cypress built-in preprocessor that uses Webpack under the hood. In layman terms, test latency is the time it takes to bundle & start a test, the time we see "Your Tests Are Starting..." before the execution.
Looking at sourcegraph.com or GitHub code search for a search string from '@bahmutov/cypress-esbuild-preprocessor', at the time of writing we only find a handful of open source repos taking advantage of esbuild with Cypress. We thought we should spread the good word and report on the results at scale about the cost savings in engineering and CI feedback time.
Any blog post is lackluster without working code, so here is a PR from scratch adding esbuild to a repository with Cypress. You can find the final code on the main branch of the repository we will use in this example. Other examples can be found at tour-of-heroes-react-cypress-ts as well as a VueJS app. The framework and the bundler the framework uses are irrelevant, any repo can take advantage of cypress-esbuild-preprocessor for e2e tests.
Any blog post is lackluster without working code, so here is a PR from scratch adding esbuild to a repository with Cypress. You can find the final code on the main branch of the repository we will use in this example. Other examples can be found at tour-of-heroes-react-cypress-ts as well as a VueJS app. The framework and the bundler the framework uses are irrelevant, any repo can take advantage of cypress-esbuild-preprocessor for e2e tests.
Any blog post is lackluster without working code, so here is a PR from scratch adding esbuild to a repository with Cypress. You can find the final code on the main branch of the repository we will use in this example. Other examples can be found at tour-of-heroes-react-cypress-ts as well as a VueJS app. The framework and the bundler the framework uses are irrelevant, any repo can take advantage of cypress-esbuild-preprocessor for e2e tests.
We really want Cypress to make esbuild the norm everywhere. Give your thumbs up to the open feature request https://github.com/cypress-io/cypress/issues/25533 .
This optimization will help speed up our test warmup time at scale, further simplify our plugin and task configurations. The process is described elaborately in this video, the PR, and the final code is shown in two simple template examples; CRA-repo, Vite-repo. This is the way we wish Cypress came out of the box.
This optimization will help speed up our test warmup time at scale, further simplify our plugin and task configurations. The process is described elaborately in this video, the PR, and the final code is shown in two simple template examples; CRA-repo, Vite-repo. This is the way we wish Cypress came out of the box.