如何通过 Cypress 设置 React Material UI Slider 的值？答案

【问题标题】：How to set value of React Material UI Slider via Cypress?如何通过 Cypress 设置 React Material UI Slider 的值？
【发布时间】：2020-10-03 03:52:47
【问题描述】：

我在这里使用滑块：https://material-ui.com/components/slider/

尝试将其值设置为：

cy.get("[data-cy=slider-population]")
    .as("range")
    .invoke("val", val)
    .trigger("change");

但是它不动。有人设法让它工作吗？

【问题讨论】：

标签： reactjs material-ui cypress

【解决方案1】：

为了让未来的观众更简单，@kevin 的回答为您指出了提取工作测试的所有正确位置，但是这里是没有演示代码的所有内容：

<Slider data-cy="slider-population" />

首先，你需要添加这个命令：

Cypress.Commands.add("reactComponent", {
    prevSubject: "element"
}, ($el) => {
    if ($el.length !== 1) {
        throw new Error(`cy.component() requires element of length 1 but got ${$el.length}`);
    }
    // Query for key starting with __reactInternalInstance$ for React v16.x
    const key = Object.keys($el.get(0)).find((key) => key.startsWith("__reactFiber$"));
    const domFiber = $el.prop(key);
    Cypress.log({
        name: "component",
        consoleProps() {
            return {
                component: domFiber,
            };
        },
    });
    return domFiber.return;
});

然后在您的测试中，如果您想将最小值设置为 0，将最大值设置为 15：

cy.get('[data-cy="slider-population"]')
    .reactComponent()
    .its("memoizedProps")
    .invoke("onChange", null, [0, 15]);

【讨论】：

【解决方案2】：

Cypress Real World App、a payment application to demonstrate real-world usage of Cypress testing methods, patterns, and workflows 中有一个示例说明了这一点。

cy.setTransactionAmountRange 是为与 Material UI Slider 交互而构建的命令。

它使用另一个赛普拉斯自定义命令cy.reactComponent 来访问组件内部并允许使用onChange to be invoked directly on the component instance 等方法。

【讨论】：

【解决方案3】：

这是 Shannon Hochkins 提供的解决方案的简明扼要。

用法：

cy.get("[data-cy=slider-population]")
    .setSlider([0,15])

命令：

Cypress.Commands.add('setSlider', { prevSubject: 'element' },
    (subject, value) => {
        const key = Object.keys(subject.get(0))
            .find((key) =>
                key.startsWith("__reactFiber$"))
        const fiberNode = subject.prop(key)
        fiberNode.return.memoizedProps.onChange(null, value)
        return subject
    })

打字稿：

declare namespace Cypress {
    interface Chainable {
        setSlider(value: number | number[]): Chainable<void>
    }
}

【讨论】：