Cypress Runner | Bondar Academy
Course: Cypress UI Testing with JavaScript
Module: Cypress Hands-On Overview
Instructor: Artem Bondar
Lesson Summary
In this lesson, we explore the Cypress runner and how to execute Cypress tests on your computer. Here are the key points discussed: Cypress Runner Interface Specs Tab: Refers to test files, short for "specification," following JavaScript naming conventions. Runs and Debug: A feature of Cypress Cloud that allows for parallel execution, run history, and debugging. Test Files: The list of test files in the runner matches those in the Cypress/E2E folder of your project. Running Tests To run a test, simply click its name in the Cypress runner. The runner operates in a real browser window, allowing you to interact with your application while tests execute. Test Execution Details Each line in the runner represents a single test from the spec file. The runner displays the number of tests passed, failed, and skipped. Hovering over executed steps shows a replay of actions taken during the test. Locator Picker Tool This tool helps identify locators by hovering over elements on the page. You can generate locators or type your own to find matches. Running Single Tests To run a single test, add it.only before the test. To skip a test, use it.skip . This functionality also applies to context blocks. The Cypress runner's time travel feature allows you to review test execution in detail, making debugging and development more efficient. This tool will be essential as we continue automating tests in future lessons.
Video Transcript
Hey guys, in this lesson, we will talk about Cypress runner in details. And also, how would you run Cypress tests on your computer? So let's jump into it. So this is the Cypress runner that you saw before, and let's talk about the interface a little bit. So first of all, the tab Specs. Let's talk about the name, why does it call Specs? So Specs is related to a JavaScript naming convention, and it is short for the specification. And also, by specs in JavaScript, usually called the test files. It doesn't matter what type of test files, end-to-end or unit test, spec file usually called is a test file. And if you will see the other JavaScript testing frameworks, you will see the file names also called there as specs. Earlier, in earlier Cypress versions, they called their spec files also like todo.spec.js instead of cy.js. It's fairly recently, Cypress renamed their file names using cy.js syntax. That's why it called specs. Also on the left, you have runs and debug. So runs and debug is Cypress Cloud feature. So if you will integrate your framework with Cypress Cloud, enabling parallel execution, you will also have some other cool features, such as run history of your test, and debugging feature will replay, and so on. It's pretty cool. So then, over here on the main page, you will see end-to-end specs or component specs. We will use only end-to-end. And the list of the test files is exactly the same as in your project under the Cypress folder, under E2E folder. The list of the files match exactly. And if you want to run any of your test, you just click on the test name and Cypress runner trigger the test execution. So also what you need to know about this entire window. So this entire Cypress runner is the browser window, not just the window on the side. And this means that this window on the side is also a browser. It's not just a screenshot, it's not video recording of the execution or something, it's a real physical browser that you can keep using. Each line over here in this example is a single test from the spec file. So if I open the todo.cy.js, so this is the test number one, it starts with it, this is the test number two, and so on. You see, this is displays two todo items by default. And this is the name of the test, display two todo items by default. And when you run the test, Cypress run all files that are available within the spec files. You cannot trigger the single test execution, for example, but we will talk about it in a second how to do that. In the top of this window, you have indication of how many tests passed, how many failed, we don't have failed test, and how many tests skipped. And you, if you want, you can rerun the test, just click rerun and it rerun all the tests. If you click on the test, it will expand the steps of execution. And this is a very cool feature of the Cypress runner, because it shows you exactly all the steps that were executed. And if you hover over those steps, look, on the right, we can see kind of a replay of what exactly was performed. So look, we open the page, then we found two list items. Then we validated that the length of those items should be two. Then we got those items one more time. We got the first item, then we validated the value for this item. Then we got item again. We got the last item from the list, and we validated the second of the item. And when I do this hovering over, it's like a time machine, where I can review the flow of my test execution. And I can stop at any moment. For example, I want to stop at this point. I put the pin, and I see the highlighted section where this step was executed. And also what's cool about it, that as I mentioned, this is still a browser. So I can keep using, adding, for example, my new items. I can click here, check here, and so on. This is very useful if you run your test, your test stop at a particular point. Maybe it failed at a particular point, or maybe just the step that you automated so far. And then you need to continue exploring from this point down the road, what else you can do, or what else you need to automate. You can continue manually using this browser window, navigating through your test application. What else do you have here? You have a locator picker tool that can help you to find the locators if you have a problem to identify the locator, or you want to speed up your process. You just click on this little icon. And then you're just hovering over the elements on the page, and Cypress will suggest the element for you. For example, if I want to select to do, you see it's generated locator, cyget. Or if I select the utils, it's generated the locator. Well, it's not perfect one, but still, it is the option. And if you don't like this locator, you can type your locator by yourself and see how many match do you have. For example, if I switch to CyContains and type here instead of hello world, utilities. And look, I have one match by the text utilities. It's highlighted that it's found this menu item. How to use the locator strategy, we're gonna talk about it later. But this is kind of a shortcut if you struggle to find the right locator or you need to quickly find the right locator, you can use this tool. Then you can copy this to the clipboard and use this locator inside of your framework. All right, I'm closing this guy. And like I mentioned, this is a real browser. So if you make a right-click inspect, you will have this elements console open. There is a networking tab and so on. Like in a regular browser, you can inspect the DOM and so on. So Cypress runner combines like a runner feature and the regular browser. Now the question is, how would you run a single test? Instead of running all tests at once, how would you do this? For that, you would need to use a couple of commands. So for example, I'm going back to the code. And if I want to run just this test, I need to add annotation it.only, like this. And if I go back, look, my test is already executed, so just a single test. So what happens, the Cypress runner monitors continuously the changes to the source code. And if you change anything in your test, Cypress runner detects it and automatically rerun your test. So since I updated to run only this test, it's skipping the rest of the test and executed just a single one. And if you want to skip this test, for example, but they execute the rest of the test, you can type instead of it only, you can type .skip, like this. And look, I'm going back. It's already executed all the tests, but the first test was skipped. The same thing would work not just for the single test, but it would work for the context or for the blocks. If I go a little bit here, we have this context, which have three tests. If I put context.only, and going back, and look, this context have three tests, so only three tests were executed. So this is how you can work locally. Let's say you are working on the particular test, and you are currently writing a new script, debugging a new script. Just temporarily put it only, and this test will be executed just this particular test inside of the runner. So if you have, for example, two screens on your working station, you can open Cypress runner on one screen. You can open code on the second screen, and then you will have this kind of a dynamic environment. When on the right you're writing your code, and on the left, you would see immediate test execution in the runner with all the executed stats. So pretty cool and pretty convenient. So that's pretty much it about runner. The time travel feature of this runner is absolutely phenomenal. And we will keep using this runner down the road, automating our test application. So see you in the next lesson.