Replace Selenium with Cypress in the testable-projects-fcc Repo

Currently the automated test suite in the testable-projects-fcc repo uses Selenium to run tests against each of the projects.

Because it can be difficult to keep Selenium and the web drivers for each browser in sync, we’d like to replace it with Cypress. Cypress now has support for Chrome and Firefox, and would allow us to pin browser versions so we don’t have browser/web driver version issues running the tests locally with yarn test or with GitHub actions.

Right now there seems to be two main parts of the test runner: a Mocha test at /test/projects.js that goes through each project and feeds the local file path to Selenium, and Selenium logic at /test/automate/automate-utils.js .

Right now, Selenium is just used to open each local project in the browser, click the “Run Tests” button, wait for the tests to run, and click on the “Tests” button to see the results. If any of the tests fail, the error messages are taken from the dropdown that appears after the “Tests” button is clicked again and fed back to Mocha to show in the console.

If we use Cypress to test each project, we should be able to replace Selenium, and the Chrome and Gecko web drivers.

[ManasMahanand]

I’ve been looking through the repo, and playing around with stuff to understand how it all works right now. One thing I’m confused about:

Under package.json, “scripts” you have “test” which is what is run when I run yarn test. And that runs “mocha”.

But when I run yarn test, it also runs eslint, and some prettier stuff before it runs mocha. I don’t get why it’s doing that, and also how does mocha know to run projects.js under test?

[scissorsneedfoodtoo]

Hi @ManasMahanand, thanks for your patience. We’d certainly welcome the help. Feel free to explore the testable-projects-fcc repo and let us know if you have any questions.

@Sembauke, thanks for the additional info. While it would be nice to test the projects on CodePen for extra assurance, we don’t currently do that with Selenium.

All of the code that’s in the example CodePen projects are in the testable-projects-fcc repo and can be run locally. The goal here would just be to replace the Selenium test runner with Cypress instead.

Just to give a bit of context, the testable-projects-fcc repo is used for two things: to develop the CDN loaded test suite for the Responsive Web Design, Front End Libraries, and the D3 projects, and to track the code for all of those example projects.

If there’s a bug in one of those example projects like the Tribute Page, we should update the project in the testable-projects-fcc repo, then once those changes are merged, copy them over to the example CodePen project.

Or if we need to make a change to the CDN loaded test suite, we can run those changes against the example projects in the repo (which should mirror what’s on CodePen), and ensure those changes work against valid projects.

Hope that helps, and sorry if it’s a bit confusing. It all gets a bit messy because we’re discussing testing tests haha.