Sliders | Bondar Academy
Course: Cypress UI Testing with JavaScript
Module: Automation of User Interfaces
Instructor: Artem Bondar
Lesson Summary
In this lesson, we explored test automation for sliders using a temperature gauge as an example. The key steps involved in automating the slider are outlined below: Understanding the Slider The slider on the homepage has two main attributes: Cx and Cy , which represent the coordinates of the slider's circle. By manipulating these attributes, we can automate the slider's position. Steps to Automate the Slider Locate the Slider: Use the browser's inspect tool to find the slider's web element. Set Up the Test: In the UIComponents.cy.js file, initiate a new test. Access the Circle Element: Use cy.get() to select the circle element of the slider. Change Attributes: Use invoke and attr to update the Cx and Cy attributes with desired values. Trigger the Event: Simulate a click to apply the changes made to the attributes. Assertions: Verify that the slider value has been updated correctly by checking the displayed text. Key Takeaways The most efficient way to change a slider value is by updating the relevant attribute directly. For linear sliders, you may only need to adjust a single value attribute. Always remember to trigger the event to apply changes. In conclusion, this lesson demonstrated how to effectively automate slider interactions in a web application using Cypress.
Video Transcript
Hey guys, in this lesson, we will talk about test automation of sliders. So let's get into it. So on the homepage of our test application, we have this nice temperature gauge with humidity and temperature. And this is a slider, when you move it around, the temperature change. How to automate this guy? So let's check it out. Right-click Inspect, and I'm looking into the details. And look, when I am moving this circle around, we have two attributes, Cx and Cy. They're changing the coordinates for this slider, you see? So technically, if we just find the locator for this web element and update the values for these coordinates, this will make the trick and this will change position of the slider. So let's automate this. We need to find the locator for this temperature gauge first of all. And let's go up, up, up, up, and it seems like this is the guy. So we have a humidity tab and temperature tab. So we are looking for this attribute temperature. And I'm going back to the project and start a new test in UIComponents.cy.js. So sci.get, first getting this attribute. And the child element will be this circle that we will change the Cx and Cy attributes. So it's just a circle tag. Let's use a circle tag, circle. Then how would we change those attributes, Cx and Cy? I would use command invoke. So previously, we used this in the course. Then I call attribute attr. Then the name of the attribute is Cy. And then I set the value that I want for this attribute. So going back, let's say that we want to say, I don't know, 18 degrees Celsius, like this. Then I copy the value that I see in the DOM. So let's say I take a couple of decimals, so 38.66, and paste this one. And then we need to invoke for the second attribute. So I call invoke one more time. And then call attr. And then let me put it on the next line. I think it would be a little bit better. So invoke attr. The second attribute will be Cy. And the value for this guy will be, let's go back, it's 5,775. I'll copy this and paste this. So you see, I don't copy the entire value. I don't need that much of the precision. Just a couple of decimals will be more than enough. And after that, we need to trigger the event, or simply make a click to just apply the changes after we changed the property values, and that will make the trick. So let's try to run this test. Opening Cypress and running this test, and it didn't work. Interesting, so did I make any mistake? All right, so I need to type Cx and Cy. Okay, this was the mistake, going back. All right, and now you see 18 Celsius was applied successfully. And the last step is to make the assertion. So let's find the locator for this section. So where is that? Inspect, no, it's not listening. Okay, we need to find it manually. So looks like it's located under this div. Then it's located over here, then it's over here, and this is the value we are looking for. So let's take this class, entire class value, copying. And then CyGet, this is the attribute class with the whole thing. So I make it like this, shouldContainText. And the value, I think it was 18, right? Right, so let's run one more time. And assertion passed successfully, we set the value for the slider. All right, so let's quickly summarize what we did in this lesson. So when you want to change the value for the slider, the fastest and more efficient way is just to update value for the attribute that is responsible for the slider value. Sometimes if you have a linear sliders, not the circular like we have, you most likely will have just a single value attribute over here. So you just set the value, trigger the event, or just make the click, and that makes the trick. All right, that's it guys, and I'll see you in the next lesson.