Sliders | Bondar Academy

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.