Sliders | Bondar Academy
Course: Mastering testRigor
Module: Interation with Web Elements
Instructor: Artem Bondar
Lesson Summary
In this lesson, we will discuss how to automate sliders and utilize X and Y coordinates to move your mouse on the screen. Here’s a breakdown of the process: Identifying Elements First, identify the slider element (the "pin") that you will move. Next, determine the area (the "box") where the movement will occur. To inspect the slider, right-click and select "Inspect". Look for attributes like CX , CY , and stroke which can be used as locators. Setting Up Test Trigger In Test Trigger, navigate to Settings > Advanced and add the stroke attribute under Custom Attributes . Identify the slider container using its class name for boundary reference. Understanding Coordinates Every box on a webpage has X (horizontal) and Y (vertical) coordinates starting from the top left corner (0,0). Use these coordinates to define mouse movement: For example, to move to the middle of a 300-pixel wide box, use coordinates like 100, 150 . Executing Mouse Movements To change the temperature gauge: drag to slider pin locator drag to slider container move to coordinates (50, 150) // first movement move to coordinates (50, 350) // second movement After performing these movements, validate the temperature value displayed above the slider. Summary To automate sliders: Use the drag command to move the slider pin. Provide custom attributes in Test Trigger settings. Identify the container for coordinate reference. Utilize X and Y coordinates for mouse movements. That's it for this lesson! See you in the next one.
Video Transcript
In this lesson, we will talk about how to automate sliders and how to use X and Y coordinates to move your mouse on the screen. So let's get into it. This is our test application and on the homepage on IoT dashboard, we have this very nice temperature gauge. And you can change the value of this temperature by moving this slider using the mouse. So how to automate this kind of web element using Test Trigger? So to approach this type of element, you need to slice the approach in two sections. First of all, you need to identify the actual element that you're going to move. So this is this little guy that we need to move on the screen. And the second element, you need to find out the area where you're going to move it. So you need to understand the exact section, the exact box where you're going to move this element. So let's make a right click and identify those things. So right click inspect and first of all, the little guy. So inspect, let me click on this. So this is the circle of our slider. So we need to find out what can be an identifier. As you can see, there is a CX, CY coordinates, stroke width. So there are no CSS selector or any other data ID that can be used as a locator. In the situations like this, for example, we have fill with whatever value and another stroke with some color. I believe this is CSS related to the colors of this element. And we also can use those attributes as our locators, but we need to add this attribute as a special attribute to the test rigor settings. And let's start with this. So let's, for example, we will use this stroke as our attribute that we want to use. Because we will use this value later on as our locator. So going back to test rigor, I'm going to settings right here. Then going to advanced, scrolling a little bit down and here's the section custom attributes. So here just add stroke and this attribute also will be used in the search when you will try to call any other values. And this attribute also will be in the scope of search and click Save right here. All right, first step is completed. Going back to the list of test cases. Now the second step. The second step, we need to identify the area where we're gonna make those movements. So again, we are right-click inspect and we need to find the box with a locator that we can use for later in the test. This box can be used because it has slider container class. So this slider container will give us a fixed size box or certain boundaries where we're gonna move the temperature pin on the slider. And the last thing, let me explain you quickly how UI grid coordinate system works on the web page, because we're gonna move the mouse by coordinates. So this is the same screenshot from our test application and this area is highlighted to the box of slider container. And what you need to know that every box on the web page has x and y coordinates. And those x and y coordinates always start in the top left corner. So x coordinates are horizontal coordinates and y is vertical coordinates. Also, if you look into the Chrome DevTools and hover over the element that you are looking for, you can also see the Chrome will tell you the dimensions in pixels, what's the size of this box. So this value is important to know just for the reference. And then if top left corner is the initial point of your box with 0, 0 coordinates, by providing two values in pixels, x and y coordinates, you can define which point inside of this box you can select on the page. For example, if we know that roughly this x coordinate size of the box is 300 pixels, then middle 100 pixels will be somewhere right here. And if we take another 100 pixels vertically and draw the lines x and y, then the point of 100 by 100 pixels in the context of this box will be somewhere here. And the second example, if we take coordinates, for example, 50 by 350, 50 coordinates by x is somewhere here and 350 is somewhere here. So using the coordinates like that, we can then define where we want to move our mouse or where we want to perform the click of the mouse inside of the target box. So using this type of coordinates, we will move our mouse to change the temperature gauge. And let's go back to application one more time. All right, so this is our test application. And now knowing all those details that we can move mouse by coordinates and also we know the locator for this little pin, we can move the mouse using those coordinates. So for example, in order to move mouse over here, we need to perform kind of two movements. So first we need to move mouse to the left and then move it down. And then, for example, validate that lowest value is 12 degrees Celsius. And then move up, move to the right, and move down. And then the maximum value for our gauge is 30 degrees Celsius. So moving the mouse that way, to the left and to the right, we can change the slider position. And now let's do all that in the test trigger. And I create a new test. And since we are on the home page, we don't need to navigate anywhere. This page will be opened immediately. So in order to move that little circle on the slider, we need to use command drag. And then we need to provide the locator for this little pin that we're going to move. And as I mentioned before, we're gonna use this stroke value of attributes. So I grab this value and it's gonna be my locator. So I drag this pin, then I drag it where? To, and then locator of the box where we're gonna perform this operation. The locator of the box is this slider container class. So I just type slider container. So drag this to slider container. And then I need to provide a position in x and y coordinates where I want to drag it. So with offset, and then I provide the coordinates. So our first movement have to be move this pin to the left. So we will need roughly 50 pixels on x coordinates and about 100 or 150 on y coordinates to move mouse to into this point, right? So let's type 50 by 150, this is the first movement. And the second movement from this point, we need to move mouse down. So I'll copy this one and we continue in our movement of the mouse. So the same drag, the same container, but the offset will be 50 by 350 because we want to change only y coordinates to move this pin down. And that's pretty much it. Let's try to run this test and see if it is working. All right, looks like it worked as expected. So let's look into the screenshots. So first of all, the initial screenshots, identified box of our movement and identified locator of the pin, works good. Then the first movement was to the left. And look a little dot right here in the bottom. So this is the current position and dot in the bottom is the position of where we're gonna move it. And in this screenshot, we can see that move was performed and the little pin of our temperature gauge was moved over there. So let's look at it one more time. And if you can see this or not, we have also little pin right here. So this is the position where test trigger attempting to move the mouse from here to here and then from here to here. And this little pin following the mouse expectedly moved our slider to the bottom position. So now the last step, we need to add a simple assertion that 12 is displayed above Celsius. Check that or we can make it simpler. Slider container contains 12. All right, and let's run this one more time. Okay, test passed and here we go. We validated that our slider container has 12. So this works successfully. And now let's continue our scenario. And we're gonna move our mouse back to the maximum position of the slider to 30 degrees Celsius. So how about that? So we're gonna use the same approach. And now we will need to do, so let me copy this command. So first we need to move mouse from this position to initial position 50 by 150. Then the next one, we need to move mouse to the right. So vertical coordinates remain the same. We need to move mouse to the right. So we need to change only horizontal coordinates. Let's do something, I don't know, 270 or something like that. And then the third movement, we need to move mouse down. So the x coordinates remain the same, but the vertical coordinates will be 350 pixels, like that. And then expectations of that, that slider container should contain 30. So the slider will be to the max right position. And yeah, I believe that's it. Let's run this test. All right, test passed successfully. And now let's look at the screenshot starting from this point. So this is the position of the 12 degrees Celsius after the assertion. And now we have a better visibility what this trigger is about to do. So this is our pin, and this is the point where test trigger about to move the mouse. It's moving the mouse, here we go, we are at 70 degrees. Then the next move, we are moving the mouse to the right, to this point. We're moving it here, and then the next move, moving it down right here. And we have a maximum position of 30, and we perform assertion and the key is in the center of this box. All right, so let's quickly summarize what we did in this lesson. So when you automate sliders, you need to use a keyword drag to drag the slider pin on the slider bar. Very often, you will need to provide a custom attribute in the settings of the test trigger in order to use the value of those custom attributes. Then you need to identify the container or the box where you're gonna move your slider to understand what position of coordinates you will need to use to make a move. And then in order to make the move, once you know your container and your box, you can use x and y coordinates, which starts in the top left corner of your box. And using those coordinates, you can move mouse on the screen and perform movement of the slider. All right, that's it guys, and see you in the next lesson.