Sliders | Bondar Academy
Course: Playwright UI Testing with TypeScript
Module: Mastering UI Elements
Instructor: Artem Bondar
Lesson Summary
In this lesson, we explore how to automate sliders using Playwright. There are two main approaches to achieve this: Approach 1: Updating Slider Attributes The first method involves directly updating the coordinates of the slider's attributes, specifically the CX and CY attributes, which represent the slider's position in pixels. Here’s how to implement this: Identify the locator for the slider element. Use the evaluate method to set the CX and CY attributes. Trigger a click event on the slider to update the UI. Example code snippet: await tempGauge.evaluate(node => { node.setAttribute('CX', newValue); node.setAttribute('CY', newValue); }); await tempGauge.click(); Approach 2: Simulating Mouse Movement The second approach simulates actual mouse movements to change the slider value: Define a bounding box for the slider area. Calculate the center of the bounding box for starting coordinates. Use mouse commands to move the cursor, click, and drag to the desired position. Example code snippet: const box = await tempBox.boundingBox(); const centerX = box.x + box.width / 2; const centerY = box.y + box.height / 2; await page.mouse.move(centerX, centerY); await page.mouse.down(); await page.mouse.move(centerX + 100, centerY); // Move right await page.mouse.move(centerX, centerY + 100); // Move down await page.mouse.up(); In summary, you can automate sliders by either updating their attributes directly or simulating mouse movements. Each method has its own use cases depending on the desired outcome.
Video Transcript
In this lesson, we will talk about how to automate sliders. There are two ways how you can do it in the playwright. The approach number one is to update their coordinates of the attribute that are responsible for the position of the slider. And the second way is moving the mouse on the screen by X and Y coordinates. So in this lesson, I will show you how to do those things. Let's get into it. So we are on the homepage of test application and here we have this nice temperature gauge. That we can change by moving mouse left and right and moving mouse around the circle. So how to automate this type of the web elements when you can click the mouse on this gauge then move it to any direction and then validate the new result after this change. So there are two options how to do that and let me show you those. So going back to the framework and I create a new test. So the first approach how you can interact with sliders it's just updating the slider attribute. So update attribute and let me show you what I mean. So going back to application, make a right click on this pin, inspect and look here. So when I move this slider left and right, let me scroll a little bit up. When I move it left and right, you can see that in the DOM there are two attributes CX and CY that are updated. Those CX and CY are the X and Y coordinates in pixel for the location of our web element. So technically we can just update the desired coordinates of this web element and it should work without actual simulation of moving the mouse. So this is a kind of the shortcut and let me show you how to do that. So let's say we want to put our slider into the maximum position right here and then we want to validate that 30 degrees Celsius is displayed right here. So we begin with identifying the locator for this particular circle. So let's scroll this up and let's see what we have. So we have this NGX temperature dragger. This defines the box for the entire web element and also this guy is located inside of the temperature tab. If we collapse it, we have two tabs, humidity and temperature. This one humidity and this one is temperature. And each of those have those NGX temperature dragger and inside of the dragger, there is this circle tag and inside of the circle tag, we can get access to two of these attributes to modify them. So first of all, let's create the locator for this circle. So we take this attribute, tap title temperature, temp gauge equals to page dot locator. So first we want to find this particular tab. Then the child element would be this temperature dragger and then within this element, we want to find our circle. Circle. All right, that's done. Now, how to get access to those CX and CY attributes and update them? We need to perform evaluation of the JavaScript expression. Await temp gauge and I call the command evaluate. Inside of the evaluate, I create the callback function and then let's say, call it node, like node.js. And then inside of this function, I code node and then call set attribute. Inside of the set attribute, I need to provide the attribute name, which is CX and the attribute value that they want to set. I put just this first part of it. So, and the same thing we need to do for the CY. CY and the value will be, I assume exactly the same. Yeah, the value is the same. So that's it, let's run this and see what happens. All right, so let me make it bigger and look what happened. The actual gauge moved down, but the value did not update it. So it's kind of broken UI looks right now. This happens because we updated the property. We physically changed the position of the UI element, but we didn't trigger the event of this change. So that's why browser did not react on this change. So now we need just to trigger any command to this particular web element to trigger the event to happen and reflect the change on the UI. So let's do this. And I type await temp gauge dot click. Let's just make a single click on our gauge and I run this test again. And right now you see it's worked perfectly fine. First, we moved the CX value. First, we moved the location of the gauge then made a click and it is reflected at 30 Celsius on this gauge. But this is kind of a shortcut how you can update the value of the sliders. The second approach, more real one, is to simulate the actual mouse movement to change the value of the gauge. So let me show you how to make the actual mouse movement in the playwright. Closing this and showing the second example. Mouse movement. So we begin with locator. This is our test application. And first of all, we need to define the area where we want to move our mouse. And I think the good candidate would be this. So if we take this NGX temperature dragger and use this box as the area where we want to move the mouse, this locator would work for us. Because let me show you something. We can move this gauge not only by moving the mouse exactly at the line of this gauge. We can also put, for example, mouse right here. And if we move it to the right or to the left or up and down, this gauge also is reacting. It means that if we move our mouse within this box of this gauge, it also create the reaction of this gauge that we want. So this is what we want to simulate. And first of all, we need to create a locator that will define this box. And we will take this NGX temperature dragger. So I just take the locator from the previous example, remove the circle from it, and rename it instead of temp gauge, temp box. The next step. I'll comment out this code. Before writing the code to move the mouse, you need to make sure that the area where you're going to move your mouse is completely in the view of the browser. So that's why we need kind of a scroll down this section a little bit down to make sure that this entire view located in the browser view. That's why we will call the method awaitTempBox. And we will use method scrollIntoView if needed. So this method will make sure that our page scroll down appropriately and this entire box is displayed on the page. The next step, we need to define a bounding box. awaitTempBox.boundingBox. And what is bounding box? So let me visualize it for you. So here is our web element that we define, NGX temperature dragger. And this NGX temperature dragger is nothing but a box, 300 by 300 pixels. When you call a method bounding box for this particular web element, Playwright creates a coordinates around this bounding box with X and Y coordinates, which start in the top left corner. X coordinates are horizontal coordinates and Y coordinates are vertical coordinates. And the top left corner has the coordinates zero and zero by pixels. And for example, if you want to put your mouse pointer down to 100 pixels, you define like this, X is zero pixels and Y is 100 pixels. And your mouse will move down to this point. Or if you want to move mouse somewhere here, for example, you define, okay, I want to move the mouse 100 pixels to the right on the X coordinates and 50 pixels down on the Y coordinates. And your mouse pointer will be located right here. And also keep in mind that you are not limited by this bounding box. You can go outside of this bounding box. This is just a starting point for you to move the mouse around. And if you want to move your pointer somewhere outside of the bounding box, you just provide the negative values. For example, here we are staying X is equal 100, but Y is minus 50 pixels. And your mouse pointer moved above the bounding box closer to the temperature area. The only limit that you have moving the mouse around is the actual browser view. That's why important to scroll the browser view to the area where you want to interact with before you begin moving the mouse. Okay, so we're going back and now let's interact with our bounding box. First, we assign the result of this bounding box, const box equals to a weight temp box bounding box. And now we can access the coordinates of this bounding box using just dot notation. For example, box.x or box.y and so on. Also, there is a little trick that I want to show you. For us, for our convenience, it would be better if we will use a center of the box as our starting point, instead of using a top left corner of the box, because we want to move a mouse somewhere here, right? We want to move it to the right or to the left and then down over here or over here. So we can define the center of our bounding box and use it as our starting point. So let's do this. We can use a simple math formula. X, first I define my beginning X coordinates like box.x plus box.width divided by two. And second, const y equals box.y plus box.height divided by two. And this way we created a starting coordinates of our bounding box in the center of our bounding box. And right now we can start moving the mouse from the center of the box. So let's do this. await page.mouse.move x and y. So the first action, I am putting my mouse cursor to the location where I want to start from. Second, I want to click the mouse button to begin movement. And I put await page.mouse.down. So this simulates a click of the left key button on the mouse on these coordinates. The next step, we want to move our mouse to the right. await page.mouse.move And now we update the desired coordinates. So moving to the right, it means x plus, let's say, 100 pixels. And y coordinates remains the same because I just want to move horizontally. The next step, we want to move mouse down after that. await page.mouse.move And then I keep my coordinates the same and add the coordinates moving down plus another 100 pixels. So with this command, we move the mouse down from this point. And then the last step, after we completed the movement, we need to release the mouse button. page.mouse.up. That's it. So we completed the movement and let's run this and see how it works. Yeah, so it moved the mouse to the right, but didn't move it completely down. So let's see. Okay, we made a mistake here. Not x plus 100, we need y plus 100. Okay, we need to move it down. We didn't do it. So let's run this one more time. Okay, and now it moves successfully. So you can see that it moved the mouse all the way to the right. And if I want to change it to a zero, I just move mouse to the left 100 pixels and then move it down to 100 pixels and it should move our mouse all the way down to the left. Okay, and now it's selected 12 Celsius. It moved it almost all the way down. So yeah, it was almost there. So that's it. That's the main logic behind how moving the mouse. Let me put it back how it was. And the last step, we just need to make an assertion. Await, expect. And then we need to move the mouse all the way down to the left. Tem box to contain text 30. Running this one more time. Okay, I think it's passed. So let me run it visually. Yeah, and test worked. Assertion passed successfully. So let me quickly summarize what we did in this lesson. You have two ways how you can move the sliders on the webpage. Approach number one is simply updating HTML attributes that are responsible for coordinates of this web element. In order to do that, you need to use evaluate expression and then set the values of the desired coordinates. Then you need to trigger action on this web element in order to trigger the event to make this change. The second approach is using the actual mouse movement. You need to define a bounding box of the area where you want to start with. Bounding box always start on the top left corner of the box with initial coordinates. You can also get the center of your bounding box using this simple formula and then simply move the mouse around the screen, triggering the mouse commands and providing X and Y coordinates to your mouse movement. All right, that's it guys. And see you in the next lesson.