javascript - 如何使用 Cypress 在 Vuetify <v-slider> 上选择特定点

Question

我正在测试我的应用程序对用户单击基本 Vuetify <v-slider> 上的特定位置的 react 。 。在 Cypress 集成测试中模拟这一点的最佳方法是什么？

例如，我可以单击 <v-slider> 的中间与:

cy.get(#sliderID).find('input[role="slider"]').click()

但是，我想单击 <v-slider> 的不同位置。例如，对于 <v-slider>与 min 0 的值和一个 max 100 的值，我想模拟点击 25 。我怎样才能做到这一点？

Answer 1

GMaiolo 的回答基本上是正确的。

如果对其他人有帮助，这是我制作的一个快速功能(基于 GMaiolo 的答案)，用于单击 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)
}

或者，也许最好使用更“可组合函数”的风格:

// 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)
}

或者，我们可以创建一个 Cypress custom command ，尽管我们想确保 don't get too overzealous in the usage of custom commands :

// 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)
})