GMaiolo's explanation is spot on.
If you find it useful, here is a simple function I created (inspired by GMaiolo's explanation) to click on a specific point of a Vuetify v-slider:
// example usage: clickVSlider('#selectID input[role="slider"]', 0.25)
const clickVSlider = (sliderSelector, percentFromLeft) => {
const sliderWidth = Cypress.$(sliderSelector).width()
const sliderHeight = Cypress.$(sliderSelector).height()
const pixelsFromLeft = percentFromLeft * sliderWidth
const pixelsFromTop = 0.5 * sliderHeight
cy.get(sliderSelector).click(pixelsFromLeft, pixelsFromTop)
}
Alternatively, if you prefer a more 'composable function' approach:
// example usage: cy.get('#selectID input[role="slider"]').then(clickVSlider(0.25))
const clickVSlider = percentFromLeft => subject => {
const sliderWidth = subject.width()
const sliderHeight = subject.height()
const pixelsFromLeft = percentFromLeft * sliderWidth
const pixelsFromTop = 0.5 * sliderHeight
cy.wrap(subject).click(pixelsFromLeft, pixelsFromTop)
}
Another option is to create a Cypress custom command, but remember not to go overboard with their usage:
// cypress/support/commands.js
// example usage: cy.get('#selectID input[role="slider"]').clickVSlider(0.25)
Cypress.Commands.add('clickVSlider', {prevSubject: true}, (subject, percentFromLeft) => {
const sliderWidth = subject.width()
const sliderHeight = subject.height()
const pixelsFromLeft = percentFromLeft * sliderWidth
const pixelsFromTop = 0.5 * sliderHeight
cy.wrap(subject).click(pixelsFromLeft, pixelsFromTop)
})