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

Question

我正在测试我的应用程序如何响应用户点击基本 Vuetify

<v-slider>

上的特定位置。在 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 自定义命令，尽管我们想确保我们 不要过度热衷于使用自定义命令：

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

Answer 2

赛普拉斯接受点击事件的坐标

您应该能够使用元素的宽度和滑块组件的属性（步长、最大值和最小值）计算出您想要点击的确切位置

Answer 3

Cato Minors 的回答对我来说不太管用。我认为他们可能已经改变了

<v-slider>

在DOM中的呈现方式。

我正在与

"vue": "^2.6.11"

和

"vuetify": "^2.6.10"

一起工作。

我使用 Cato Minors 自定义命令。但必须访问另一个可点击元素，因为呈现的

v-slider

html 看起来像这样。

<div class="v-slider v-slider--horizontal theme--dark">
    <input value="137" id="input-150" disabled="disabled" readonly="readonly" tabindex="-1" data-cy="parent-child-space-slider">
    <div class="v-slider__track-container">...</div>
    <div role="slider" tabindex="0" aria-valuemin="40" aria-valuemax="300" aria-valuenow="137" aria-readonly="false" aria-orientation="horizontal" class="v-slider__thumb-container primary--text" style="left: 37.3077%;">...</div>
</div>

只有父母

div

有一个

width

和

height

我可以利用。

所以我修改了这样的用法：

cy.get('[data-cy="parent-child-space-slider"]').parent().clickVSlider(0.50);