註明本文轉載於：https://www.toolsqa.com/cypress-tutorial/
Cypress Tutorial
Cypress Basics
Along with the test script runner, Cypress provides you a visual interface to indicate what all tests and which all commands are running, passed or failed. It allows us to test highly interactive applications and carry out different tests such as manipulating the DOM, asserting that if some element is available or present on the screen, reading or writing data into/from fields, submitting forms and even redirecting to a different page without actually making direct modifications to your code.
Cypress is built and optimized as a tool for local development. In fact, after using Cypress for some time, you may be tempted to do all of your development within it since it provides a platform to quickly debug and maintain your code easily.
Cypress Tutorial – Basics
Introduction and Architecture: Cypress is a next-generation front end testing tool constructed for modern web applications. Most testing tools (like Selenium) operate by running outside of the browser and executing remote commands across the network. But the Cypress engine directly operates inside the browser. It enables Cypress to listen and modify the browser behavior at run time by manipulating DOM and altering Network requests and responses on the fly.
Node Installation and Setup: Node.js is a server-side runtime environment that is built on top of Chrome’s V8 JavaScript engine. It is open-source, totally free of cost, and millions of developers use it across the globe. It is a runtime environment. Additionally, it includes everything you need to run a program written in JavaScript. You are required to Install Node JS framework before start building your Node.js application.
Install VS Code: Visual Studio Code editor is a lightweight but strong source code editor that runs on your desktop and is available for Windows, macOS, and Linux. Visual Studio Code has built-in support for JavaScript, TypeScript, and Node.js and has an extensive ecosystem of extensions for other languages (such as C++, C#, Java, Python, PHP, Go) and runtimes (such as .NET and Unity).
Cypress Installation and Project Setup: Cypress can be downloaded directly from the Cypress CDN (https://download.cypress.io/desktop). The direct download will always download the latest version for your platform. It will download a zip file, which can be extracted by the user. and it can also be Downloaded using npm. It also explains how to set up a basic project with package.json and cypress installed with it.
Cypress Test: The basis of Cypress is Mocha and Chai (one of the famous assertion libraries in JavaScript), and it adheres to the same style of writing test cases as will be used by any other JavaScript-based framework. We will use the default folder structure provided by Cypress to manage and write our test cases in the Cypress Workshop project and will learn how to operate Cypress with its basic test case.
Cypress Test Runner: Cypress has a unique test runner that allows us to see commands as they execute. Additionally, it also shows the real-time run of the application under test. We will complete the development of our first automated test case using Cypress and we will be executing that test case with the help of the Cypress Test Runner. We will also learn about different components Test Runner has and how we can operate that using the terminal.
Locator in Cypress: Locators are the backbone for all automation frameworks for Web-based applications. Additionally, a locator is an identifier that tells any automation tool that GUI elements ( say Text Box, Buttons, Check Boxes, etc.); it needs to operate. Following the same concepts, Cypress also uses the locators to identify the UI element for the application under test.
Get and Find Command: Cypress provides two essential methods get() and find() to search for the web elements based on the locators. The results for both of these methods are almost identical. But each has its importance and place of implementation. Subsequently, in this article, we will be covering aspects detailing where get() and find() methods that can be used during the web test automation using Cypress.
Cypress Asynchronous Nature: Asynchronous programming is a means of parallel programming whereby, a unit of work runs separately from the main application thread. Additionally, it notifies the calling thread of its completion, failure, or progress. These types of programs are “non-blocking.” When you execute something synchronously, you wait for it to finish before moving on to another task. On the other hand, when you run something asynchronously, you can move on to another task before it ends.
Handle Non-Cypress async promises: We know that Cypress internally handles the asynchronous behavior of its commands and still provides a seamless, sequential, and consistent execution of the test cases. Still, there can be situations, such as combining the Cypress commands with third-party libraries or JavaScript commands, where we have to handle the async promises or commands explicitly. We will learn that how Cypress can help in managing these Non-Cypress Async Promises explicitly
Cypress Assertions: Assertions are the validation steps that determine whether the specified step of the automated test case succeeded or not. In actual, Assertions validates the desired state of your elements, objects, or application under test. Eg. assertions enable you to validate scenarios such as whether an element is visible or has a particular attribute, CSS class, or state. It is always a recommended practice that all the automated test cases should have assertion steps, otherwise, it will not be feasible to validate whether the application reached the expected state or not.
Interacting with DOM Elements: Each UI automation tool provides some APIs or methods to interact with the web elements, so the designated operation can be performed on the UI element. In addition to this, these methods also assist in the needed user journey simulation. Continuing the same practice, Cypress also provides multiple commands which can simulate the user’s interaction with the application.
There are many more articles planned for Cypress Tutorial series, please stay tuned with us at TOOLSQA. Happy Learning.