Test Application Overview | Bondar Academy
Course: Cypress UI Testing with JavaScript
Module: Introduction
Instructor: Artem Bondar
Lesson Summary
In this video lesson, the instructor introduces two test applications that will be utilized throughout the course. Application 1: Playground The first application is playground.bonderacademy.com . This app serves as a sandbox for practicing interactions with various UI elements . Key features include: Toggle switches to change values. Collapsible menus for navigation between different pages. Form layouts with various input elements such as radio buttons, checkboxes, and date pickers. Dialog boxes and handling random pop-ups . Drop-down menus with different designs and testing approaches. Drag-and-drop functionality. Smart tables for adding, deleting, and filtering items. The focus will be on using Cypress to automate interactions with these elements. Application 2: Conduit The second application is conduit.bonderacademy.com , which includes a back-end server and API functionality. Key points include: Ability to create a test account using any random email and password. Performing CRUD operations: Create , Read , Update , and Delete articles. Using Cypress to handle both UI and API tests. This course will provide a comprehensive understanding of interacting with web elements and API testing.
Video Transcript
Hey guys in this video, I will show you test applications that we're gonna use in this course. Okay, let's jump into it So the application number one open your browser and type playground dot bonder academy dot com So this is the application number one in the first part of the course We're gonna use this app reach with different UI elements. So it doesn't have any specific functionality It just has examples of different user interfaces For example on the main page you have this toggle which change the values then you can switch between the icons Switch between the tabs and stuff like this then on the left There is a collapsible menu where you can select different pages as well For example under the form layouts, we have different input elements different forms input fields radio buttons Buttons checkboxes and so on so we're gonna learn how using Cypress interact with these types of Forms or for example date picker how to select dates in the calendar. This is like a simple date picker This is a date picker with range when you can select different range in the calendar or For example, let's go to dialog and when I click on something we have a dialog box so how to automate this kind of stuff or for example random pop-ups if you have a randomly Appeared pop-up that hard to control For example, I click on this and we have a pop-up and then I enter for example and name click submit and then I click On this again pop-up again submit and then click one more time It doesn't feel like a random Come on. Oh you see and right now it doesn't have this pop-up. It has the input field right away So how to handle this type of situations? We're gonna learn that or let's say we go to the toaster page here. We have different types of drop-down so this is drop-down number one, and this is a drop-down number two, you see it's also have a different design and because of this different design and Coding approach it has a different approach to test automation as well. So we have different checkboxes We have this random toast that shows up in the right corner of the screen We have a tooltips when I hovering over the mouse you see the tooltip shows up So how to automate those type of elements or we go to extra components and drag-and-drop So we have drag-and-drop. You can do things like this. You can add new items over here to the drag-and-drop And the last component is a smart tables. This is web table You can add new items to the table like this You can delete those items you can edit existing items You can filter that table by different values For example, currently we're filtered by age and we will learn how to work with web tables as well So this will be the first part of this course We will dive deeply into how to interact with all sorts of web Elements that you may face and see on the web page and the second part of the course We're going to use the second application which called conduit.bonderacademy.com the difference with the previous app that this app actually has the back-end server and API if I make a right-click and inspect right here and then click on the networking tab then I make a refresh Application makes API requests So for example, it sends get request to the tags endpoint and this is the response with the tags And this is the another API request to articles and point it also get request with 200 response And this is the response object You can create a test account for this app So you just click on the sign up and create the test account that you will use in this course It can be any random email You not necessarily need to use the real email address any random user name random email and random password You create your account and you use it during this course If I sign in for example, I use my test account email Sciuser at test.com and password welcome 1 2 3 1 2 3 and I'm signed in and now I can create the article for example I can click on new article create article with different typo and description publish the article Here we go This article is published and I'm going back this article is displayed on the main feed then I can for example Add some comments to this article or I can delete those comments or add tags Modify the article delete the article and so on so we will perform different crowd operations create read update and Delete using this app and in the section where we're going to talk about API We're going to use Cypress to handle all those operations combining UI and API tests together So it's gonna be fun. Alright, so that's pretty much it those two applications We're going to use in this course, and I'll see you in the next lesson