Initial Configuration | Bondar Academy
Course: Cypress UI Testing with JavaScript
Module: Cypress Hands-On Overview
Instructor: Artem Bondar
Lesson Summary
In this lesson, we will configure the Cypress framework by modifying its configuration file. Here are the key points covered: Cypress Configuration Overview The configuration options in Cypress are divided into two main categories: Generic Framework Options Test Specific Options End-to-End Testing Component Testing Configuration File Structure In the configuration file: Global configurations are placed outside the e2e object. End-to-end test specific configurations are placed within the e2e object. Common Configuration Options Some important configuration options include: Default Command Timeout: This sets the time Cypress waits for a command to complete. Default is 4000 milliseconds. Adjust this if your application loads slowly. Viewport: The default viewport size is 1000 pixels. This can be updated to a more suitable resolution, such as 1280 pixels. Base URL: This is essential for specifying the test application URL, which should be placed under the e2e object. Validating Configuration Changes To validate the configuration: npx cypress open After running Cypress, check the project settings to ensure that the custom configurations are applied correctly. Look for: Custom configurations highlighted in a different color. Verification of overridden values like the viewport size. Ensure that the syntax in the configuration file is correct to avoid errors. This process allows you to tailor Cypress settings to fit your testing needs effectively.
Video Transcript
Hey guys, in this lesson, we will make some initial configuration for the Cypress framework. Let's jump into it. So this is the Cypress configuration file. And how do we know what actually to configure over here? What properties do we need to add? And for that, we need a documentation. So go to Cypress documentation. On the left, under the references, click on this configuration page. And on Cypress configuration page, you will find everything you need. How to use it? So Cypress configuration generally sliced into two categories. Just generic framework wise options and test specific options. Test specific options are separated into end-to-end and component testing options. That's why we have here in the configuration file this e2e. So under the e2e object right here, you put the end-to-end test specific configuration. And outside of this object, you put all other configurations. So what configuration options are available? So for example, let's look into, so this is the global ones. Let's look, for example, into the timeouts, how to use it. So in the column option is the name of the option, exactly how you have to use it in the configuration file. And the default value for this option that used by the framework by default. For example, default command timeout is the timeout how long Cypress wait for the command to be completed or for the web element to be available on the page. So let's say your page is kind of slow and loading the specific element take longer than four seconds. In this case, the test will fail, but you don't want it, right? So in this case, you will add default command timeout into the configuration file and update default value from 4,000 milliseconds, which is four seconds, to more meaningful value for your application, let's say 10 seconds or something like this. And then you just look through all these options that you want to update and add into your configuration file. For us, I want to update only just a few options. I want to update this viewport option. By default, it has 1,000 pixels to 660 pixels, which I don't like. It's kind of low. I would like to use more traditional HD resolution for the browser. I want to update this property. So I take the viewport with property, go back to configuration file, and type this property over here, and then provide the value that I want. For example, 1 to 80, then I put comma because this is a JSON object and all key and value pairs have to be separated by comma. And then the second property is viewport. And look, when I start typing the property name, the IntelliSense of Visual Studio Code immediately giving me what are available options, so if I type just video, look, video compression, video folder, video height, just the video, so we need this one, video height. And the property would be, the value would be 720, okay, so I'm good with that. And the second option that I want to configure is related to test option. I want to set the base URL for our test application. So I take this base URL, going back, and since this property is related to end to end, right here you see it's related to E2E, so it have to be located under E2E object in the configuration file. So I'm going here and typing it right here, and then take the base URL for the test application that we're gonna use in the course, Ctrl C and paste it Ctrl V. And look, we have red squigglies over here as well, again because we need to keep the formatting of the JSON consistent. All key and value pairs have to be separated by comma, so I put the comma at the end and the problem is resolved. Now let's just validate if those settings were applied to the framework. So let's open a new terminal and run Cypress, npx cypress open. Here's the Cypress end to end configured electron, and let's run this to do COI sample test. The test is executed, and look, in the top right corner, we have the resolution that we just set in the configuration file. And also, if you click over here on the settings, in the project settings, and scroll a little bit down, you can find the existing configuration, how the Cypress runner and Cypress framework is loaded, including the default configuration and the custom configuration. And custom configuration highlighted with a different color, you see it's config, so base URL is configured correctly. And if we scroll all the way down, you see the default timeout is just default value, exact timeout is also the default value. But if we scroll a little bit down, we see that viewport was overrided with our custom configuration. So this is how it works. You can update any of the settings, depends on your test scenario and your testing needs, and this is pretty simple. Just make sure that you follow the exact syntax for the properties. Otherwise, it will not work. So that's it, guys, and see you in the next lesson.