Sliders | Bondar Academy
Course: Playwright UI Testing with TypeScript
Module: Mastering UI Elements
Instructor: Artem Bondar
Lesson Summary
In this lesson, we explored the automation of test sliders using two primary methods: setting attributes directly and simulating mouse movement. Method 1: Setting Attributes Directly The first method involves directly modifying the attributes of the slider element: Inspect the slider element to identify the attributes CX and CY that change with mouse movement. Create a unique locator for the slider using the structure of the application. Use JavaScript to set the desired values for CX and CY attributes. Trigger an event (e.g., clicking on the gauge) to update the UI after changing the attributes. Method 2: Simulating Mouse Movement The second method is more complex and involves simulating mouse movements: Identify the section of the page for mouse movement (e.g., the temperature dragger). Ensure the section is within the browser's viewport using scrollIntoView . Create a bounding box to define the area for mouse movement. Calculate the center coordinates of the bounding box for more efficient movement. Use mouse movement commands to simulate dragging the slider: await page.mouse.move(x, y); await page.mouse.down(); await page.mouse.move(newX, y); await page.mouse.move(newX, newY); await page.mouse.up(); In summary, the fastest way to automate slider movement is by setting attribute values directly and triggering an event. Alternatively, simulating mouse movement requires careful setup of the bounding box and coordinates.