“Cypress - 從頭開始學現代自動化測試 + 框架”課程部分預覽

Welcome guys, welcome to Cypress tutorials. This is your instructor Rahul Shetty. As title says, you will get scratch level explanations on each and every topic which we gonna learn from this course. First things first, what is Cypress? So, Cypress is a next generation front-end automation testing tool built for the modern web applications. So, we already know that there are many automation tools in the market like Selenium, QTP, Protractor which are predominantly in use. Then why another automation tool called Cypress came into existence? So, in a nutshell, there are some pain points we have with our existing automation set, right? Like synchronization issues and test will inconsistently fail due to not availability of element and there are many issues. So, Cypress came up with an architecture to address all those key pain points what we are currently facing with our automation tools. So, let's try to understand what are the steps Cypress have taken to fix all those pain points. So, first one, Cypress automatically wait for command and assertions before moving on. No more asynchronization errors. So, basically if you want to click on any link, how does it work? So, it just tries to click, but if that link is disabled, let's say that after few seconds, the link will get enabled. Your existing test will generally fail complaining that that is not in clickable mode. But whereas in Cypress, it intellectually check out for the state of this link. When it understands that it's already in disabled mode, then it will wait to check whether this will turn into enabled mode so that Cypress can click on it. So, this intelligence is automatically taken care by Cypress. Now, if you want to achieve same in Selenium, you explicitly have to mention wait saying that wait until that link got enabled or element is visible mode. But whereas in Cypress, when it tries to identify any link or button, if it's not found, it will go and check in the HTML that whether the link is in disabled state or it's not in visible mode and if it's not in visible mode, it will check whether there are any animations loading on your browser. If it sees any animation loading icon, then it assumes that because of the loading, that link is not a still visible mode and it will wait until that animation loading is done. So, it will intelligently behave to identify the elements. Again, there is some timeout for each command. By default, you have four seconds timeout. So, Cypress does all this work in the four seconds. If it could not find the element in that particular four seconds, it failed. But in this four seconds, it has some intelligence to work on. And you can overwrite that timeout to 10 or 20 seconds, which you will see in the coming lectures. Similarly, I will give you one more example. If your element is hidden. Now, let's say this is the checkbox I want to click. But if I open the dropdown, this dropdown is replacing that checkbox and made that checkbox hidden, right? So, using the automation tools like Selenium or Protractor, now you cannot click on the checkbox. You will get failure saying element not interactable. But whereas in Cypress, it have an ability to force click on that checkbox by removing this pop-up element. That means the dropdown here, right? It will close the dropdown and it clicks on that. If you force that to click, there is one attribute which you need to set so that it force clicks on that by removing the top overlaid objects like this. So, this is the intelligence Cypress brought us. So, that really helps us to solve few of our pain points, what we face with our current automation tools. And next, ability to test edge test cases by mocking the server responses. So, Cypress also have the ability to automate your network requests, okay? So, when we say front-end automation tool, we were in assumption that it helps only in automating your front-end UI. But with Cypress, you can also handle your API validations. So, Cypress have an ability to listen what all API calls are being happening when you perform actions on your front-end browsers. So, it can mock the response whatever you are getting from your API. Now, for example, let me go to their official website Cypress and if you try to log in, it's asking use GitHub or Google credentials, okay? So, these are external services. So, Cypress is injecting external GitHub service. So, that when you click on this link, the details of your user ID and password for send to GitHub servers and GitHub gives the response back with authentication token and with that you will be able to log in, okay? That's how it happens in the backend. But let's assume that GitHub service is down. So, when you click on this link, then you should get a message saying that GitHub service is down currently, please try later. So, your developer have written code for this web application in such a way that whenever the service is failing with a 404 response, you will see an error message here. So, how do you test this scenario? So, in real time, we generally say that this is not right candidate for automation because how can we control GitHub server and we never know when they will be down, right? So, how you can test from automation? It's not possible. But whereas in Cypress, you have the ability to manipulate and alter your network requests and responses. So, from your code, instead of getting real response, you can inject mock response on your browser and make that environment ready that GitHub is getting failed so that error message can display here, okay? So, it have an ability to stop the original response and inject fake response. So, you can send a fake response of 404 so that that will be rendered on the browser and when your application detects that fake response, then it prints error message here, right? Saying that GitHub is down. So, edge test cases. Out-of-box testing can also be done with the Cypress, okay? So, how it supports network request and all, I will soon explain in my next lecture on Cypress architecture. And one more important thing, Cypress takes snapshots when your test run. This is very cool feature and you will really, really love this. I will just show a sample. In general, you will learn all this when we get deep dive into our lectures. Now, for example, I am running this test, okay? So, it completes the run. Thereafter, if you want to know what happened at each and every step after the test execution is done, you can clearly debug from this test runner. Let me show you. Now, the test is executed and these are different commands. The Cypress, we have written a code to replicate these commands. Don't worry about this coding. We will do all this in our coming lectures. I'm just showing the benefits of it. If I want to type Bob in the name field, look at here. When I click on the get, it's clearly giving screenshot that this particular object is getting highlighted. And when I move to type command, it's highlighting with the red pin that something is typing there. So, if you want to know what is typing there, it have before and after windows. So, before it's nothing and after it type Bob. Concentrate that edit box. So, it have taken screenshot before hitting that Cypress command and after hitting that Cypress command, so that you can see what happened for each and every step of your code with screenshots. This is automatically taken by Cypress and you will really, really love once we start designing our test cases. Okay. So, that's one of the great feature you have with Cypress and also because of its architectural design. So, the way Cypress is designed is whole different from any other automation tool. I will soon explain the architecture of Cypress versus Selenium in the next lecture. And you will understand how Cypress is able to do all these things like mocking the server responses, calling the network request, automatically waiting for commands. You will soon understand that's all happening because of the way architecturally designed. Next, view videos of your entire test execution. This is again the greatest feature. So, Cypress have one component called dashboard where you can configure your tests to integrate with the dashboard. So, once your test execution is done, you can watch the video of your each and every test in the dashboard. So, automatically after test is completed, it will generate a video for each and every test. So, this will really help us to debug and fix all the flaky things wherever we see in our test execution. Isn't it? So, all these are the unique and which only available in Cypress. There are a few more features which I will eventually talk in my core concepts because even if I tell now, you may not correlate and understand how exactly that is beneficial for us. So, once we progress in lectures, we can understand all that. And also you should know that Cypress is built on Node.js runtime environment. You will get a package as a NPM module. It's not like a jar. If any software is built on Java runtime environment JRE, then it comes as a jar. But Cypress is built on Node runtime environment. So, we will get Cypress as an NPM module to download into our mission. Okay. As it is built on Node.js, obviously Cypress uses JavaScript to write the test cases. But don't worry, 90% of coding can be done using Cypress inbuilt commands only. And they are very, very easy to understand. Okay. So, one last thing to show and give you the boosting that how Cypress is booming in the current tech industry. Basically, whoever downloads Cypress should be from their NPM official website because Cypress only available as NPM module. So, based upon the downloads from different places in the world, this NPM guys have created a trend like how Cypress is used by the software industry. So, you can check out by typing Cypress and look at here from last six months, how the graph is increasing. So, the download number is somewhere 250,000 in February, but it doubled in July. So, every month the downloads are getting doubled across the world. So, this proves that how Cypress is booming and how people are looking towards this tool. Okay. Right. So, in the next lecture, let's understand what is Cypress architecture and how different it is designed from Selenium. All right. Thank you. Welcome back. So, in this lecture, let us see what all the topics we are going to learn as part of this training. Okay. So, first JavaScript fundamentals. So, I made two sections around two hours of video, which explains fundamentals of JavaScript, which are required for automation. So, step by step, I have logically explained the concepts what you need to get started. Okay. So, you will find these videos at the end of this course. The reason why I put end because this is like complete JavaScript and nothing to do with Cypress. So, I isolated them from the Cypress and push them to the last two sections of this course, where you can go through them and come back if you think that you need some brush up on JavaScript. But don't worry, even if you follow in sequence, how these lectures are arranged, you will still be able to manage JavaScript because I tried my best to teach Cypress and JavaScript parallelly. So, you will never feel that you are lost in any programming. Okay. Next, the core focus, what we do here is on web automation. So, 60% of this course is shows on how to automate any website on the internet with the Cypress technology. And I have also shown how to automate API test cases also. I have taken some examples to explain how you can test API with the Cypress libraries. And finally, we will create frameworks. In this course, I have shown two frameworks. One is a Mocha, which is very powerful JavaScript testing framework. And another is Cucumber, which is a behavior-driven development approach. So, I have taken two different kind of frameworks to explain how you can inject Cypress into these standards. You will really enjoy the framework section and everything is taken care from scratch. And I will also show you how to intercept network responses, request and manipulate DOM elements in browsers using Cypress. This is really cool feature and keep the Cypress on top. And then database testing. I'll show how to connect Cypress with database and extract the data so that you can induce the data what you extracted from database to your front-end web applications with Cypress. And single sign-on is something which is also very famous and commonly used in many websites. So, I have shown how to automate single sign-on application with the help of API automation. This is really interesting section. And I also shown how to do accessibility automation with Cypress. So, with this, I have covered all the important topics what people need to get started and master in Cypress. Okay, by end of this course, you can clear any interview related to Cypress and also you can handle any project at your work related to Cypress technology. Okay, you can develop a framework and show a proof of concept to your manager and complete automating your application with Cypress. That level of knowledge you will get by end of this course. Count on me, all right. So, keeping these things in mind, we will jump into understanding the core concepts of Cypress and let's start with Cypress architecture first and let's see how that is built in the next lecture, all right. Thank you and wish you good luck. Welcome back. So, let's try to understand Cypress architecture in this lecture. So, most testing tools like Selenium operate by running outside of the browser and executing remote commands through the network, okay. So, first let me explain how Selenium or Protractor or Appium or whatever automation tool we have. Let's understand how those work and how different the Cypress will work, okay. First, I will pull up the Selenium architectural image. I just got this from Google. So, you write your code and your code is wrapped as an JSON file and it is sent to the browser driver. Again, this is not the original browser. If you have already experience in Selenium, if you want to run your test in Chrome browser, first you have to invoke Chrome driver. We do that with system.setproperty webdriver.chromedriver. So, basically we will invoke one Chrome driver. It's just like a web browser and we will inject all our code into that Chrome driver and that driver interprets all our Selenium code and then pass necessary commands to the actual Chrome browser to execute, okay. So, this is how it works. It will not directly interact with browser. In middle, there is another browser driver module which it receives. Now, for Firefox, there is a Gecko driver. So, all your code will be sent to Gecko driver and it's the duty of Gecko driver to scan all your code and send the necessary commands to the actual Firefox and it sends back the response to Gecko driver. From Gecko driver, you will get it back to your editor. So, this is how Selenium works. Whereas with the Cypress, this Cypress engine directly operates inside the browser. So, when you write a code, it directly interacts with the browser. There is no proxy server between for Cypress, okay. So, in other words, it is the browser that is executing your test code. So, here the driver is helping you to execute code by issuing the commands through the network. But in Cypress, browser itself executing your code. See the difference. There is obviously that makes real impact, right? So, as browser itself is executing Cypress code, this enables Cypress to listen and modify the browser behavior. As whole your test is on browser, you can alter the DOM. When I say DOM, the HTML properties, whatever you get it here, you can alter all the properties and listen to it. In the earlier lecture, I told you that Cypress automatically listen if there is any loading icon on the page and it intelligently waits, right? How does that happen? Because Cypress is already sitting on your browser, it will keep on listening to all your DOM and it will know what exactly happening at each and every stage of your execution. So, with that knowledge, it understands and run your test on that browser and also it alter the network request and responses on the fly. We also saw that it have ability to mark the server response. Again, same logic applies. As Cypress is in the browser, it have ability to access all the network requests and whenever you get response, Cypress intelligently can stop that response and inject that mock response to this browser. So, technically speaking, on Cypress behalf, browser is taking that headache of executing test on its own platform, okay? It's browser responsibility to complete the test execution. So, that's why it is giving leverage by showing all the network request data to the Cypress and also it is helping Cypress to manipulate DOM as well, okay? So, if you wonder that how all these are happening, as I keep on stressing in the last lecture, because of the architecture of how Cypress is designed and that's why I told that it's a fast. Why it is fast? Here, obviously, by looking at this architecture, you can clearly tell that test take time to execute but whereas in Cypress, we don't have all this server sending and request and responses and the browser drivers. So, it directly interacts with the browser and make those all test very fast in execution. Okay, so that's how Cypress varies and it opened doors to new kind of testing with having ultimate control over your application as from front-end and back-end. So, using Cypress, you can do unit testing, you can do integration testing and you can also do end-to-end testing. It fits in each and every layer of your software development lifecycle, okay? So, generally, people do it for integration testing and end-to-end testing but I see that recent blogs that people are also trying to use that for unit testing so that they will have one common tool for all the testing types in their software project. So, when you come to browser support and the major browser which Cypress supports is Chrome for Firefox and IE and it also comes with a default browser which is Electron. So, what is the Electron? Electron is also one of the version of the Chrome basically Electron uses the same rendered engine what Chrome also uses but with very optimized way and it will not have all the plugins of what originally Chrome provides. You can tell as lightweighted browser of Chromium is Electron and Cypress is suggesting to use Electron to run all your test cases because as it is a lightweight browser, your test will run much faster than any other browser, okay? So, we will see and understand how to run the test in Chrome and Electron. There are so many test scenarios we will discuss in our upcoming lectures and the Cypress components. So, I would be talking about two different tools in this course. One is a test runner which I just shown but again I will again explain the how what is test runner and how to invoke it everything from scratch and apart from test runner you will see dashboard service. So, I will explain about dashboard service in our framework lectures. Basically, when you run all your test cases detailed report will be given to your Cypress dashboard. You need to create an account in the dashboard and plug in your tests to your dashboard service so that all the test execution results along with video recording of each and every test will be present in your Cypress dashboard, okay? That's very cool feature and we will see that when we discuss maybe in the framework sections probably. All right, on high level I'm just showing these are the core concepts of what Cypress provide and there are a few more as well which you may not understand even if I tell now. Eventually, when we travel in our course I will reveal one by one. So, in the next lecture we will jump into our actual installations, okay? Thank you.