无法使用柏树在反应滑块上移动手柄

Question

我正在尝试通过将样式属性从 left:0% 设置为 20% 来验证我试图移动滑块的反应多滑块，如下所示

multiSlider.getHandleName('customerId').invoke('attr', 'style', 'left: 20%') .trigger("改变",{force:true})

句柄正在更新，但在几分之一秒内重置为 0%，并且没有停留在那里，因此我无法验证后续步骤。

<div class="multiSlider">
    <div class="slider">
        <div class="sliderHandles" data-testid="slider-handles">
            <div class="tooltipContainer" style="left: 20%;">
                <div class="tooltip">
                    <div class="tooltipText" data-testid="name-tooltip"><span class="editText"
                            data-testid="edit-name"><span aria-label="name-merge">name</span> - merge</span>
                        <div data-testid="delete-name" class="clearIcon"><i aria-label="icon: close"
                                class="anticon anticon-close"><svg viewBox="64 64 896 896" focusable="false" class=""
                                    data-icon="close" width="1em" height="1em" fill="currentColor" aria-hidden="true">
                                    <path
                                        d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 0 0 203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z">
                                    </path>
                                </svg></i></div>
                    </div>
                </div>
            </div>
            <div class="handle" data-testid="name-active" style="left: 20%;"></div>
        </div>
        <div class="sliderRail" data-testid="threshold-slider-rail" scale="[object Object]" handles="[object Object]"
            activehandleid=""></div>
        <div data-testid="threshold-slider-ticks">
            <div>
                <div
                    style="position: absolute; margin-top: 6px; width: 1px; height: 5px; background-color: rgb(200, 200, 200); left: 0%;">
                </div>
            </div>
            <div>
                <div
                    style="position: absolute; margin-top: 6px; width: 1px; height: 5px; background-color: rgb(200, 200, 200); left: 20%;">
                </div>
            </div>
    </div>
    <div class="sliderOptions" data-testid="threshold-slider-options">
        <span>LOW</span><span>MEDIUM</span><span>HIGH</span></div>
</div>

Answer 1

使用Cypress Real World App 中使用的技术，我们为滑块组件触发onChange，而不是尝试操纵滑块组件UI 本身。

命令在这里：https://github.com/cypress-io/cypress-realworld-app/blob/dc052b848d5028911e9dfd1a9c18fd3a282147dd/cypress/support/commands.ts#L113-L123

cy.setTransactionAmountRange(dollarAmountRange.min, dollarAmountRange.max);

它的用途：https://github.com/cypress-io/cypress-realworld-app/blob/dc052b848d5028911e9dfd1a9c18fd3a282147dd/cypress/tests/ui/transaction-feeds.spec.ts#L304

Cypress.Commands.add("setTransactionAmountRange", (min, max) => {
  cy.getBySel("transaction-list-filter-amount-range-button")
    .scrollIntoView()
    .click({ force: true });

  return cy
    .getBySelLike("filter-amount-range-slider")
    .reactComponent()
    .its("memoizedProps")
    .invoke("onChange", null, [min / 10, max / 10]);
});

关键是这个reactComponent命令，它允许我们直接与组件道具交互：https://github.com/cypress-io/cypress-realworld-app/blob/dc052b848d5028911e9dfd1a9c18fd3a282147dd/cypress/support/commands.ts#L90-L111

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$"));

  // @ts-ignore
  const domFiber = $el.prop(key);

  Cypress.log({
    name: "component",
    consoleProps() {
      return {
        component: domFiber,
      };
    },
  });

  return domFiber.return;
});