Cypress Setup | Bondar Academy
Course: Cypress UI Testing with JavaScript
Module: Cypress Hands-On Overview
Instructor: Artem Bondar
Lesson Summary
Lesson Overview: This lesson covers the setup of the Cypress framework on your computer from scratch. Step-by-Step Setup Instructions: Create a Project Folder: Make an empty folder on your computer (e.g., cypress-playground ). Open this folder in Visual Studio Code . Initialize Node.js Project: Open a new terminal in Visual Studio Code. Run npm init and accept default values to create package.json . Install Cypress: Run npm install cypress --save-dev to install Cypress and update package.json . A Node Modules folder will be created containing all necessary packages. Run Cypress: Execute npx cypress open to launch Cypress. Select end-to-end testing when prompted. Generate Test Files: Choose to scaffold examples to create initial test files. View generated test files in the Cypress/E2E folder. In the next lesson, a review of the Cypress framework folder structure will be provided.
Video Transcript
Hey guys, in this lesson, we will set up Cypress framework on your computer from scratch. All right, let's jump into it. So create any empty folder on your computer where you would like to keep your project. For this demo, I created a git repo folder on the desktop. And within this git repo folder, I create one more folder which I call, for example, cypress-playground. Hit Enter, and that's it. This will be our project folder. And now I need to open this folder in Visual Studio Code. Here is my Visual Studio Code. I go to File, then Open Folder, and then search this folder on my computer. So it's on the desktop, git repo, and cypress-playground. And I click Open. That's it. An empty folder is open in Visual Studio Code. You see there is nothing over here, but cypress-playground is displayed in the top in the file explorer. Then I need to open a new terminal session. I click Terminal and New Terminal. And the first thing, we need to initialize a new Node.js project. And I will type npm init and hit Enter. After that, Node Package Manager will suggest some default values for the package.json file. All you have to do is just hit everything by default. Hit Enter, Enter, Enter, Enter, nothing changed. No keywords, no author, nothing, nothing. Is everything okay? Click Yes, and that's it. So package.json is created, and you see it's just a dummy file without any specific values for now. Also, let me delete all these values. We don't need them. And I will keep only name for the project, the script section, because we will use this section later on. And the new section will be added later automatically. So the next step, we need to install actually Cypress. And for that, I will use command npm install cypress. And I add the flag dash dash save dev. So this flag is needed to save the package into this project and into the package.json. So package.json will have a reference to the installed packages. So and I just hit Enter. After that, Node Package Manager will automatically find the Cypress in Internet, download it, and install on your computer. At the end, you see this confirmation that added 177 packages, 41 packages looking good, so everything is good. And also package.json was updated with dev dependencies section, Cypress, which is the package that we downloaded and version that was downloaded as of today. And also new folder was created, Node Modules. So Node Modules folder generated automatically, and this is where your project will keep all packages and libraries that are needed to run your project. Currently, look, it has a bunch of stuff and all of that related to Cypress. So you technically don't need to look into this. And this folder is generated automatically when you run command npm install. For example, if I will delete this folder right now, move to trash, and if I just run npm install like this and hit Enter, Node Package Manager will look into the dev dependencies section. It will find, hey, our project should have Cypress. So let me pull the Cypress back into the project. And Node Modules generated automatically. And package.lock.json is a file that locks version's compatibilities, just to make sure that all components that were downloaded are in sync and compatible and can work together. So Cypress is downloaded and installed, but we don't see anything, right? So how to run it? After you did this, you need to run actual Cypress. And you would use command npx cypress open and hit Enter. So keep an eye, it's not npm, it's npx, and hit Enter. Cypress will open this welcome screen for you, where it's gonna offer to you either to go with end-to-end testing or component testing. So we're not gonna cover the component testing in this course. This is more kind of advanced level of test automation, where you import the component from the source code of your application and testing those components individually. We're not gonna do that. We're gonna do more traditional end-to-end testing for the web application through the browser. And I selected end-to-end. Since our project does not have any files yet, Cypress creating those configuration files for us automatically. And just showing what is added, just hit Continue. And then you need to select browser that you want to use. So by default, you will see most likely Electron and Chrome browser. Other browsers like Chromium, Edge, and Firefox, especially Edge and Firefox, to see those browsers over here, they should be physically installed on your computer. For example, if you don't have Firefox installed, you will not see Firefox over here, or Edge, for example. We will use in this course Electron browser, which is built in into Cypress instead of Chrome. Why? Because Electron technically runs on the same Chromium engine, and it's technically the same Chrome browser. And for me, it's just convenient to use. But if you want, you can use a Chrome browser as well, it's not a problem. So I will use Electron and start E2E Electron. Since we don't have any tests, so this is a Cypress runner already. Since we don't have any tests, Cypress offering us, do we want to create a new spec file, or in other words, a new test file? Or you want to create just examples to start with? So let's start with some examples, and I will show you Cypress in action. So click on Scaffold Examples, Test, and okay, this is the files that are generated, click OK, and that's it. So these are the tests that are generated. And if we go back to Visual Studio Code, and look under Cypress and E2E folder, we have exactly the same test files generated for us. So going back, and now you can click on any of these test files to actually run the test, so click on that, and you see Cypress in action. You see all the test is executed, or if I click on this one, now it's running other examples test for us, like this. And all tests passed successfully. So that's it, Cypress is installed successfully, and in the next lesson, we will make a review of the framework folder structure. So see you in the next lesson.