feat(dev): add Cypress and Puppeteer to GitPod

[ShaunSHamilton]

Checklist:

• I have read freeCodeCamp's contribution guidelines.
• My pull request has a descriptive title (not a vague title like Update index.md)
• My pull request targets the master branch of freeCodeCamp.
• All the files I changed are in the same world language, for example: only English changes, or only Chinese changes, etc.

(01/02/2021) - requires to be on the Feature Preview of GitPod

1. Run npm run cypress:install-build-tools
2. Ensure to select the correct keyboard layout, when prompted during the installation
3. Run cypress:dev:run with server and client running in different terminals (background)

A DOCS PR is soon to follow

Closes #39728

P.S. I expect some tests to fail, because some are hard-coded to work in a 'normal' dev environment. Specifically, values like 'localhost:8000' do not work in GitPod. So, another PR would need to take a look at that. I have done some of it in this PR (and a previous), which is why CYPRESS_BASE_URL is in the .gitpod config

[gitpod-io]

[ShaunSHamilton]

This is working as expected (on my end). To use, the workflow is:

1. Open new terminal in GitPod env: npm run cypress:install-build-tools
2. Be sure to select your keyboard layout, when prompted in the terminal
3. Use Cypress: npm run cypress:dev:run

The white-space changes appear to be in-line with our config, so I have left them. Let me know otherwise.

P.S. I expect some tests to fail, because some are hard-coded to work in a 'normal' dev environment. Specifically, values like 'localhost:8000' do not work in GitPod. So, another PR would need to take a look at that. I have done some of it in this PR (and a previous), which is why CYPRESS_BASE_URL is in the .gitpod config

[raisedadead]

I ran the first step in the comment above: npm run cypress:install-build-tools and I see this.

[ShaunSHamilton]

@raisedadead Are you on the Feature Preview of GitPod? https://www.gitpod.io/docs/feature-preview/

[raisedadead]

I missed that in the conversation from the earlier PR. It works now, we may need to document this additional step.

LGTM. Will wait for @ojeytonwilliams to merge

[ahmaxed]

Runs for me as well with steps from description.

[raisedadead]

OK - I think here is what we should do.

1. I am going to land this in.
2. We add some docs about enabling the feature in settings, and running tests.
3. We work towards making the tests not rely on localhost:8000, but more generally compatible with a URL.

[ojeytonwilliams]

Hey @ShaunSHamilton , congrats on figuring this out.

So, I ran into

We detected that the Chromium Renderer process just crashed.

This is the equivalent to seeing the 'sad face' when Chrome dies.

This can happen for a number of different reasons:

- You wrote an endless loop and you must fix your own code
- There is a memory leak in Cypress (unlikely but possible)
- You are running Docker (there is an easy fix for this: see link below)
- You are running lots of tests on a memory intense application
- You are running in a memory starved VM environment
- There are problems with your GPU / GPU drivers
- There are browser bugs in Chromium

You can learn more including how to fix Docker here:

https://on.cypress.io/renderer-process-crashed

when I tried to npm cypress:dev:run, did anyone else see that?

Assuming it's not just me, then the issue is that Gitpod is running a Docker container, but we don't have control over it. That means we may not be able to deploy the fixes shown here: cypress-io/cypress#350

Any thoughts on this?

[ShaunSHamilton]

Any thoughts on this?

@ojeytonwilliams I have not seen that, this time around. Did you do anything different to the steps in the OP? (I am specifically asking about whether the issue is you did/did-not have the client/server up)

[raisedadead]

I am not quite sure about the messages above, but it's fairly possible I may have missed it because Shaun did say we can expect tests to fail.

[ojeytonwilliams]

So, I launched Gitpod via https://gitpod.io/#https://github.com/freeCodeCamp/freeCodeCamp, waited until the client and server were both running and then ran

npm run cypress:install-build-tools # picking 30 and 1, for the keyboard, though I doubt that matters!
npm run cypress:dev:run

and got the same error I mentioned above. I was using Brave, not Chrome, so that might be a factor. I'll try again and report back.

[ojeytonwilliams]

@ShaunSHamilton same error again I'm afraid. It might be my machine that's the problem, but it's happening pretty consistently.

[ShaunSHamilton]

@ojeytonwilliams

It might be my machine that's the problem, but it's happening pretty consistently.

Thanks, for letting us know. I cannot see how it would be related to someone's PC. I would like to help debug this, later over chat.

[ojeytonwilliams]

For future reference, in case I forget... Shaun and I tested this some more and found that the problem occurs somewhat randomly. The plan from here is to fix the port problem and then reevaluate if this annoying enough to try and fix.