Framework Overview | Bondar Academy
Course: Cypress UI Testing with JavaScript
Module: Cypress Hands-On Overview
Instructor: Artem Bondar
Lesson Summary
In this lesson, we provide an overview of the Cypress framework file structure. The key components of the project include: Package.json and PackageLock.json : These files manage project dependencies. NodeModules : This folder contains libraries required for the project. cypress.config.js : Located in the root directory, this is the main configuration file for Cypress. Cypress Folder Structure The Cypress folder, also in the root directory, contains three subfolders: Support : Contains e2e.js and commands.js . e2e.js : Initializes global configurations before tests run. commands.js : Used for defining custom commands that can be reused throughout the framework. Fixtures : Holds test data, typically in JSON format. It can also include CSV files or images. End-to-End (e2e) : This folder contains the actual test files. You can create nested folders to organize tests. It is crucial to open the project in Visual Studio Code as the root folder to avoid issues. If you mistakenly open the Cypress folder directly, it may lead to the creation of duplicate folders and files. In the next lesson, we will delve into configuring the Cypress framework.
Video Transcript
All right, in this lesson, we will make a quick overview of file structure of the Cypress framework, so let's jump into it. So here's the Cypress Playground project that we created so far. Package.json and PackageLog.json, you already know these files. And NodeModules is the folder where we keep the libraries for our project. So now let's look into this file, cypress.config.js. So this file should be located in the root of our project, so it's under Cypress Playground folder. And this is the main configuration file for the Cypress. In the next lesson, I will show you how exactly to configure this file and which properties you can use to make this configuration. And then you have Cypress folder which is located also in the root of the project, let's open it. Cypress folder has three other folders, support, fixtures, and end-to-end. So let's open support first. Support has e2e.js and commands. e2e.js is the file that initialized as a very first thing when you run the test. So this file can be used to set up some global configuration for your test, because this is the very first thing even before the test is executed. Currently by default, this file only imports the command.js file, and that's it. Later in the course, we will add some other stuff into this file when we progress developing our framework. The next is commands.js. So by default, this file is used for the custom commands. We're also gonna talk about custom commands later. Custom commands, just in a few words, are the commands that you can create once and then use across the entire framework. So as a placeholder, here Cypress, for example, offering to create a login command. And then you can put some code over here to login into your test application, for example. And then you can call login command anywhere in your test. You can rename commands.js to any other name, but you would need to change the import in e2e.js accordingly. So Cypress will know where to look. We will keep all the naming by default, and I will temporarily comment this back. Now, fixtures folder, I open that and we see example.json file. So, fixtures in Cypress is the place where would you keep your different test data or any other data that you will need for the test execution. Usually, it will be a JSON with some data, some properties and stuff. But you can also use this folder, for example, to read CSV files or pictures with PNG or JPEG format and so on. We're gonna use fixtures to read JSON files, to mock APIs, and so on. And the e2e folder is the folder where you actually keep your test. Inside of the e2e folder, you can create other built-in and nested folders and group your test that way. So far, we created the examples with the test. Cypress automatically created two folders. One folder was just a simple to do cy.js file, a single test file. And this is more advanced examples. You can add a new test files directly in the root folder of e2e, and those tests will be visible. So, all test files that you put under e2e will be visible inside of the Cypress runner, and again, you can rename this folder if you need for whatever reason. But you will need to update the default settings in the configuration file in this case. And well, that's pretty much it. So simple structure, you need to follow this structure and make sure that when you open the project in Visual Studio Code, you always open it as a root folder. So the cypress-config.js and package.json are in the root folder. If you mistakenly will open Cypress folder, just Cypress folder in Visual Studio Code and will try to run your framework, it will not work. And you may mistakenly create, if you run npx cypress open, you may mistakenly create another Cypress folder inside of the existing Cypress folder with duplicated node modules and duplicated package.json. So keep that in mind. Make sure that you correctly open your working project and making sure that Cypress folder is in the root and configuration file with the package.json is also in the root of your project. Other than that, that's it. And in the next lesson, we will start configuring Cypress framework. So see you in the next lesson.