The ecosystem for end-to-end (e2e) testing JavaScript applications has evolved a ton since I began working as a full-time engineer years ago. Granted, I do not write many tests today, I am growing a lot of appreciation for tools like Cypress that grasp the full browser experience in a test environment.
Last week I invited Gleb Bahmutov, VP of Engineering at Cypress, to chat and teach me how to leverage Cypress with GitHub Actions to quickly get a test environment up and running.
cypress-io
/
github-action
GitHub Action for running Cypress end-to-end & component tests
cypress-io/github-action 
Cypress based
cypress-io/github-actionruns End-to-End or Component tests in GitHub Actions Continuous Integration (CI) workflows, optionally recording to Cypress Cloud
Introduction
In addition to running Cypress tests, the action includes dependency installation, caching and more:
| Function | Benefits |
|---|---|
| Single-line call | Simplified use by installing dependencies and running Cypress in one line of workflow code |
| Build app, Start server and Wait for server options | Convenience of app, server and test coordination |
| cypress run CLI type options | Improved readability with vertically listed workflow options |
| Dependency installation based on npm, pnpm and Yarn Classic lock files | Reduced command complexity |
| Caching of Cypress binary and dependencies for npm and Yarn Classic installations | Reduced download bandwidth requirements |
| Job summary | Fast access to results overview |
| Docker compatibility | Improved independence from GitHub-hosted runner image version changes. Fixed Docker environments can be used. |
| Recording to Cypress Cloud compatibility including parallel execution | Improved interpretation of test |
What I learned in our conversation is that Cypress is not just an npm package. Through the CLI, you gain access to a base binary ready to run their testing system on all platforms (Linux, Windows, and Mac). When you start Cypress, it runs the binary to engage and work with your machine's default browser giving you the ability to see your test pass or fail in front of your eyes.
Towards the end of our conversation, we installed Cypress on my bdougie.live repo to get positive browser test results in my GitHub Action logs.
If you have not tried out browser testing in your project, I encourage you to do so today, you are only minutes away from having the confidence e2e tests, and you can also do it with Actions!
Watch Gleb walk me through getting it installed on my project. You can find the link below.
Join me and friends live for Open Source Fridays at https://www.meetup.com/GitHub-Virtual.
Top comments (6)
Except anything that involves multiple browser tabs or browsers such as Safari, Internet Explorer and mobile browsers.
And dealing with iframes is also difficult with Cypress, you have to summon 3 wizards, click your heels twice and pray to 7 Greek gods and it might just work, if you're lucky.
silly question, but can you test (using cypress for that matter) mouse movement?
Well, you could send / trigger mouse events from Cypress on.cypress.io/trigger
can you click a menu-item that appears if the menu appears using css
:hover?( I found this - stackoverflow.com/questions/488522... but I don't want to be forced to use jquery...)
See on.cypress.io/hover and github.com/dmtrKovalenko/cypress-r... to trigger this
This is just.. plainly put. GitHubTastic. 👏