DEV Community

Cover image for Test anything that runs in the browser with Cypress and GitHub Actions
Brian Douglas for GitHub

Posted on • Edited on

Test anything that runs in the browser with Cypress and GitHub Actions

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.

GitHub logo cypress-io / github-action

GitHub Action for running Cypress end-to-end & component tests

cypress-io/github-action Action status cypress renovate-app badge

GitHub Action for running Cypress end-to-end and component tests. Includes npm, pnpm and Yarn installation, custom caching and lots of configuration options.

Placing use: cypress-io/github-action@v6 into a GitHub Action workflow gives you a simple way to run Cypress. The action takes the project's npm, pnpm or Yarn package manager lock file, installs dependencies and caches these dependencies for future use. It then proceeds to run Cypress end-to-end tests with the built-in Electron browser and provides a test summary after completion.

If you are testing against a running server like the Cypress Kitchen Sink showcase example on https://example.cypress.io/ no other parameters are necessary. In other cases where you need to fire up a development server, you can add the start parameter to the workflow. Browse through the examples to find other useful parameters.

Examples

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)

Collapse
 
liviufromendtest profile image
Liviu Lupei

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.

Collapse
 
odedshr profile image
Oded Sharon

silly question, but can you test (using cypress for that matter) mouse movement?

Collapse
 
bahmutov profile image
Gleb Bahmutov

Well, you could send / trigger mouse events from Cypress on.cypress.io/trigger

Collapse
 
odedshr profile image
Oded Sharon

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...)

Thread Thread
 
bahmutov profile image
Gleb Bahmutov
Collapse
 
bernardbaker profile image
Bernard Baker

This is just.. plainly put. GitHubTastic. 👏