无法使用箭头键使用赛普拉斯移动幻灯片 <input type="range">
can't move a Slider <input type="range"> with Cypress using arrowKeys
我正在尝试在这里实施一些测试,但无法将我的逻辑应用于该网站的输入范围:
https://the-internet.herokuapp.com/horizontal_slider
这是我的代码
it('and a slider is displayed, the slider is moved to a specific position', () =>{
cy.visit('/horizontal_slider')
// to achieve this, we need to know the attributes of the slider component
// min; max; value and step
// we need to move the slider using the keyboard (right arrow) to move the slider
// each type the key is pressed, the slider will move one value equal to the "step" attribute
const destiny = 1
const step = 0.5
const initialValue = 0
const stepsToReachDestiny = (destiny - initialValue) / step
// now we repeat x times (stepsToReachDestiny)
// the key press to reach the value
const keyboardCommandRepeated = '{rightArrow}'.repeat(stepsToReachDestiny)
// and call the function
cy.get('.sliderContainer > input').click()
cy.get('.sliderContainer > input').type(keyboardCommandRepeated)
// check the value in the slider
cy.get('.sliderContainer > span')
.should('have.value', destiny)
})
滑块就是不动。
赛普拉斯文档说使用 invoke() 方法,但我宁愿避免使用它来查看滑块移动
这里发生了一些事情。
范围输入不响应赛普拉斯的 .type('{rightArrow}')
但您可以使用 cypress-real-events .realType('{rightarrow}')
代替。
注意 rightarrow
而不是 rightArrow
.
查看源代码,有一个onchange
事件处理程序来更新跨度。
<input type="range" min="0.0" max="5.0" step="0.5" value="0" onchange="showValue(this.value)">
要更改跨度,您需要触发此更改事件。
这意味着您不能重复 rightarrow
,每个步骤都需要单独触发更改事件。
最后,跨度 text
而不是 value
。
it('and a slider is displayed, the slider is moved to a specific position', () =>{
cy.visit('https://the-internet.herokuapp.com/horizontal_slider')
const destiny = 1
const step = 0.5
const initialValue = 0
const stepsToReachDestiny = (destiny - initialValue) / step
cy.get('.sliderContainer > input').focus() // use focus instead of click
// loop the steps so that we can trigger change event each step
Cypress._.times(stepsToReachDestiny, (i) => {
const expectedAtThisStep = (i+1) * step
cy.get('.sliderContainer > input').realType('{rightarrow}')
cy.get('.sliderContainer > input').trigger('change')
// check the internal value
cy.get('.sliderContainer > input')
.invoke('val').then(val => +val) // get value text and convert to number
.should('eq', expectedAtThisStep)
// check the external span text
cy.get('.sliderContainer > span')
.should('have.text', expectedAtThisStep)
})
cy.get('.sliderContainer > span')
.should('have.text', destiny)
})
我正在尝试在这里实施一些测试,但无法将我的逻辑应用于该网站的输入范围: https://the-internet.herokuapp.com/horizontal_slider
这是我的代码
it('and a slider is displayed, the slider is moved to a specific position', () =>{
cy.visit('/horizontal_slider')
// to achieve this, we need to know the attributes of the slider component
// min; max; value and step
// we need to move the slider using the keyboard (right arrow) to move the slider
// each type the key is pressed, the slider will move one value equal to the "step" attribute
const destiny = 1
const step = 0.5
const initialValue = 0
const stepsToReachDestiny = (destiny - initialValue) / step
// now we repeat x times (stepsToReachDestiny)
// the key press to reach the value
const keyboardCommandRepeated = '{rightArrow}'.repeat(stepsToReachDestiny)
// and call the function
cy.get('.sliderContainer > input').click()
cy.get('.sliderContainer > input').type(keyboardCommandRepeated)
// check the value in the slider
cy.get('.sliderContainer > span')
.should('have.value', destiny)
})
滑块就是不动。 赛普拉斯文档说使用 invoke() 方法,但我宁愿避免使用它来查看滑块移动
这里发生了一些事情。
范围输入不响应赛普拉斯的 .type('{rightArrow}')
但您可以使用 cypress-real-events .realType('{rightarrow}')
代替。
注意 rightarrow
而不是 rightArrow
.
查看源代码,有一个onchange
事件处理程序来更新跨度。
<input type="range" min="0.0" max="5.0" step="0.5" value="0" onchange="showValue(this.value)">
要更改跨度,您需要触发此更改事件。
这意味着您不能重复 rightarrow
,每个步骤都需要单独触发更改事件。
最后,跨度 text
而不是 value
。
it('and a slider is displayed, the slider is moved to a specific position', () =>{
cy.visit('https://the-internet.herokuapp.com/horizontal_slider')
const destiny = 1
const step = 0.5
const initialValue = 0
const stepsToReachDestiny = (destiny - initialValue) / step
cy.get('.sliderContainer > input').focus() // use focus instead of click
// loop the steps so that we can trigger change event each step
Cypress._.times(stepsToReachDestiny, (i) => {
const expectedAtThisStep = (i+1) * step
cy.get('.sliderContainer > input').realType('{rightarrow}')
cy.get('.sliderContainer > input').trigger('change')
// check the internal value
cy.get('.sliderContainer > input')
.invoke('val').then(val => +val) // get value text and convert to number
.should('eq', expectedAtThisStep)
// check the external span text
cy.get('.sliderContainer > span')
.should('have.text', expectedAtThisStep)
})
cy.get('.sliderContainer > span')
.should('have.text', destiny)
})