任何人都知道如何使用cypress测试ng5-slider(例如更改值)。我尝试了文档中的建议(例如使用触发器),但是无法正常工作。
答案 0 :(得分:2)
您可以尝试使用type('{rightarrow} {rightarrow}')
将滑块向右移动并测试获得的新值。我在ng5-slider
示例站点中尝试过的以下示例测试,效果很好。确定滑块并使用type()
方法移动。滑块的默认值为100
,移动滑块后更改后的值为“ 103”
describe('Try an Ng Slider test ', function () {
it('Check the slider and test the new slider value', function () {
cy.visit('https://angular-slider.github.io/ng5-slider/')
cy.get('a:contains("Go to demo")').parents('.mt-4').find('a').contains("Go to demo").click()
cy.wait(1000)
cy.get('#simple-slider').find('ng5-slider').find('span[aria-valuetext="100"]').type('{rightarrow}{rightarrow}{rightarrow}')
cy.get('#simple-slider').find('ng5-slider').find('span[aria-valuemax="250"]').invoke('attr', 'aria-valuetext', "103")
.should('have.attr', 'aria-valuetext', '103')
cy.scrollTo('top');
})
})
答案 1 :(得分:1)
您可以触发鼠标按下事件,然后将鼠标移动到文档中的特定位置。至少我是在测试中这样做的。
cy.get('span[data-cy="priceSlider"] > span.MuiSlider-thumb[data-index="0"] ')
.focus()
.trigger("mousedown")
.trigger("mousemove", { which: 1, pageX: 460 })
链接到文档:https://docs.cypress.io/api/commands/trigger.html#Mouse-Events