EASY DOCKER + CYPRESS Integration in 10 MINUTES* | Cypress Tutorial For Beginners

[@joanmedia]

🤖DISCORD: discord.gg/2F9E2fRGaU ⭐PREMIUM Cypress + Typescript course: shorturl.at/dcnPn 📣FREE Cypress videos: shorturl.at/h6iEX

[@vitaliyovcharenko4991]

Thank you Joan! For 10 mins you managed to explain me more than tones of the information I have studied before.

[@joanmedia]

Hi Vitaliy! Happy to hear that since that was my goal. 🙏👌 I want to do another one constructing an image with the repo already inside of the container, maybe in the next weeks :)

[@rosvrg4014]

One of the very useful videos for cypress tests in a docker so far. Thanks Joan

[@joanmedia]

Thank you Ros! Check the one where I build a custom docker image, can be helpful too.

[@amirael-bahrawy6731]

Thanks a lot for your great explanation, but I have a question..I'm using play with docker so how can I access my code on local machine from it so I can execute it?

[@joanmedia]

Hello Amira, what do you mean with "play"? is it a programming language?

[@sutapachakraborty1600]

Thank you so much fr this video, so helpful

[@joanmedia]

Thanks for the feedback 🫡❤️

[@TheMurtukov]

Thank you Joan for these helpful videos. I have couple of issues. In your video you execute cypress inside a container, but you don't show how you are starting your app. I managed to run cypress and test my app on Linux, but not on Windows or Mac. Here is how I do it: I start my app locally on my PC (host) at localhost:3000 and I run cypress in a container. In this case the container needs to somehow communicate with the localhost on the host. As far as I know containers are isolated from the host, so I needed to add a flag --network="host" to the command. But this flag works only for Linux, according to the documentation. In your video I see that you don't use this flag, but cypress is still able to connect to the app on the host. So I have the following questions: 1) What engine does your Docker use? WSL 2 or classic Linux VM? 2) Do you start your app on the host or in another container? 3) How does Cypress inside the container connect to the app? Thank you in advance.

[@joanmedia]

Hi Timur, thank you very mucho for your comment! 1- I do use WSL 2 if I am not wrong in my personal computer. 2- The app is an external website already published, so in that case my tests were just pointed to that website. However, if you need to access your local host and do your tests there, what you can do is use this syntax in windows: host.docker.internal:3000 3- It does just sending the host and port. In case it does not work, maybe you should do a port forward: docs.docker.com/engine/reference/run/

[@HarishKumar-yp3tv]

Hi Joan, Thanks lot for the video. Could you please let me know on how can i setup a database on docker(Local host on gitlab) and run tests on docker using cypress.Any references be lot helpful

[@joanmedia]

Hello! I think you only have to look for a database image in the docker "repo": hub.docker.com/ Here you can look for an SQL, or any available database. Then, look for "port forwarding" using docker, so you can have your docker containers exposed in a port and you can see them in between.

[@elcancion]

Cool as usual! I hope you make some videos with docker+github actions. Saludos genio!

[@joanmedia]

Thanks Ezequiel!

[@damienosullivan6353]

I am trying to run `docker run -it -v "%cd%":/e2e -w /e2e --entrypoint=cypress cypress/included:3.2.0 run`, but I get this console error: "docker: invalid reference format."

[@FreeRangeTesters]

Vengo a dejar mi like. Excellent video bro! This approach is really great and highly recommended.

[@joanmedia]

Gracias Master por el comentario. 🙏

[@Cherupakstmt]

How to execute all test cases in chrome , firefox & edge in docker. IF possible can you make video on that please

[@joanmedia]

Hi Rupak, thanks for your comment. I will plan one for that, thanks for the suggestion.

[@Cherupakstmt]

@@joanmedia Thanks for taking up the suggestion. Looking forward to your video

[@damienosullivan6353]

If you share this project with somebody else, do they have to run "docker pull cypress/included" to get that image on their local machine too? If yes, is there an easy way to share this with someone?

[@joanmedia]

Hello Damien. They do have to run that command. What do you mean with "easy way"? Just an example so I can imagine it :)

[@damienosullivan6353]

@@joanmedia thanks for the response. By an "easy way", I mean is there a way to use docker where you don't have to manually pull the image

[@benjamin1720]

I can run the container and mount my working directory successfully, as I can see cypress trying to access the baseUrl I've set, but it says the server is not running. How/where do I run 'npm start'? And how come you haven't needed to do it.... Please help. Thanks

[@dawid_dahl]

Thank you! 🙏🏻

[@joanmedia]

Thank you for watching it!

[@dawid_dahl]

@@joanmedia Do you know if its possible to get the Cypress interactive browser experience with Docker as well?

[@radwayounis9320]

I got this when I try to run cypress tc on docker An error was thrown in your plugins file while executing the handler for the after:run event. The error we received was: TypeError: Cannot destructure property 'message' of 'testStepResult' as it is undefined. at JsonFormatter.getStepData (/e2e/node_modules/@cucumber/cucumber/lib/formatter/json_formatter.js:183:17) at /e2e/node_modules/@cucumber/cucumber/lib/formatter/json_formatter.js:100:33 at Array.map (:null:null) at /e2e/node_modules/@cucumber/cucumber/lib/formatter/json_formatter.js:98:66 at Array.map (:null:null) at /e2e/node_modules/@cucumber/cucumber/lib/formatter/json_formatter.js:94:36 at Array.map (:null:null) at JsonFormatter.onTestRunFinished (/e2e/node_modules/@cucumber/cucumber/lib/formatter/json_formatter.js:87:63) at EventEmitter. (/e2e/node_modules/@cucumber/cucumber/lib/formatter/json_formatter.js:43:22) at EventEmitter.emit (node:events:539:35) at afterRunHandler (/e2e/node_modules/@badeball/cypress-cucumber-preprocessor/dist/plugin-event-handlers.js:146:30)

[@techglow4302]

Why we need to run it in Docker. As we are just running command like copying script from local folder to container. We can run it through commands from locally too then why we are using Docker? Sir can you please why we need it?

[@joanmedia]

There are a lot of situations, but imagine that your CI/CD env is in Linux and it does not have browsers installed and per policies you can’t. You can send your test to a container with all of them included and it solves your problem.

[@rajatt95]

Thank you for creating the tutorials. Really appreciate your efforts and dedication. I'm using Macbook air with M1 chip and facing this issue: WARNING: The requested image's platform (linux/am64) does not match the dedicated host platform ......... docker: Error response from daemon : failed to create shim: OCI runtime create failed: container_linux.go Could you please help me with this? Thank you in advance.

[@joanmedia]

Hello Rajat! I have not tried docker in M1 yet. Not sure what is causing the error :(

[@rajatt95]

@@joanmedia Ok, Thank you for your response Appreciate it.

[@olajidegbenga8132]

This isn't working for me, getting error Can't run because no spec files were found. We searched for specs matching this glob pattern Please help

[@TM-jb8bw]

Is it possible to see the test running live in a chrome browser? headed from a docker container? @JoanMedia

[@joanmedia]

Hello TM! To be honest, I have not done that before, but could be interesting to learn if it is possible. Let me make a small research about it

[@alexlazarciuc]

Hi Joan Do you have an example with cypress tests from a docker container executing the tests against a locally deployed app? My app is installed locally and I would like to run the tests from a container so I am getting an error that cy could not verify that the server is running. Thanks

[@joanmedia]

Hi Alex! Thank you very much for your comment. I don´t have a video, but I have an idea. What if you set your tests in cypress to open "localhost" or your local path environment, right? But you will need also to map the port when you run the container. So for example, a script will be opening localhost:3000 for example. Then, when you run your test, for example using the video guide, you should send another parameter: docker run -p 3000:3000 (so docker know that has to me hearing that local port) It is hard to explain by comment haha please let me know if you kind of get my idea.

[@alexlazarciuc]

@@joanmedia Thanks that worked by using this: docker run -it -v "%cd%":/ -w / cypress/included:8.2.0 --spec cypress/integration/**/*.ts --browser chrome -p 9130 How do you manage the npm packages? I get an error now Could not load reporter by name: @****/cypress-junit-reporter We searched for the reporter in these paths: - /e2e/@****/cypress-junit-reporter - /e2e/node_modules/@****/cypress-junit-reporter The error we received was: Cannot find module '/e2e/node_modules/@****/cypress-junit-reporter'

[@joanmedia]

@@alexlazarciuc Alex, for that question I don´t have a quick workaround. I think that have to look for the possibility of adding that package and then build the image again(using the included image as base) with the dependency. Or well, use the other images(base or browsers) and construct the image with your repo included from the docker file.

[@joanmedia]

Alex, I uploaded the video of how to create a custom docker image the last Sunday in case you want to check it out.

[@alexlazarciuc]

@@joanmedia thanks! I am on holidays this week but will double check when back!

[@filipmoniuszko309]

10:23 that command doesnt work for me

[@joanmedia]

error message?

[@PoYoTheWild]

@@joanmedia I cound not make it through also, I get "docker: invalid reference format."

[@joanmedia]

@@PoYoTheWild hi! I was able to find this forum with some workarounds, could you check it? stackoverflow.com/questions/45682010/docker-invalid-reference-format

[@PoYoTheWild]

@@joanmedia I somehow forgot to click reply, 20 mins after my message I had the solution already and I thought I also wrote to here, my bad sorry. Using ${PWD} instead of %cd% solved my issue then I had buch of other problems but all are resolved now.

[@joanmedia]

@@PoYoTheWild Thanks! It seems that you were using shell tho. Happy to hear it is working now :)