我有一个来自 rc-slider 的 Slider 组件,我需要 Cypress 来设置它的值。
<Slider
min={5000}
max={40000}
step={500}
value={this.state.input.amount}
defaultValue={this.state.input.amount}
className="sliderBorrow"
onChange={(value) => this.updateInput("amount",value)}
data-cy={"input-slider"}
/>
这是我的赛普拉斯代码:
it.only("Changing slider", () => {
cy.visit("/");
cy.get(".sliderBorrow")
.invoke("val", 23000)
.trigger("change")
.click({ force: true })
});
到目前为止我所尝试的方法不起作用。
滑块的起始点是 20000,测试运行后它会达到 22000,无论我传递什么值,任何数字范围。
以前好像是可以用的如何与 Cypress 中的范围输入(滑块)正确交互? https://stackoverflow.com/questions/55023428/how-do-interact-correctly-with-a-range-input-slider-in-cypress但现在不再了。
答案非常非常简单。我发现解决方案恰巧按回车键进行另一个测试(日期选择器),并意识到按向左或向右箭头键适用于滑块。
您也可以使用道具获得相同的结果。您唯一需要做的就是添加此依赖项:cypress-react-selector 并按照此处的说明进行操作:赛普拉斯反应选择器 https://openbase.io/js/cypress-react-selector/documentation
使用示例{rightarrow}
it("using arrow keys", () => {
cy.visit("localhost:3000");
const currentValue = 20000;
const targetValue = 35000;
const increment = 500;
const steps = (targetValue - currentValue) / increment;
const arrows = '{rightarrow}'.repeat(steps);
cy.get('.rc-slider-handle')
.should('have.attr', 'aria-valuenow', 20000)
.type(arrows)
cy.get('.rc-slider-handle')
.should('have.attr', 'aria-valuenow', 35000)
})
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)