Question

我正在测试我的应用程序对用户单击基本Vuetify <v-slider>上特定位置的反应。在赛普拉斯集成测试中模拟这种情况的最佳方法是什么？

例如，我可以使用以下命令单击<v-slider>的中间位置：

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

但是，我想单击<v-slider>的其他位置。例如，对于一个<v-slider>值为min且一个0值为max的{{1}}，我想模拟对{{1 }}。我该怎么办？

Answer 1

Cypress accepts coordinates for click events

您应该能够通过使用元素的宽度和滑块组件的属性（步长，最大值和最小值）来计算要单击的确切点

Answer 2

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

如何使用赛普拉斯选择Vuetify <v-slider>上的特定点

2 个答案: