Sliders | Bondar Academy

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.