如何让 cypress.io 向左滑动离子 ion-item-sliding？

Question

我有一个带有 ion-list 的小型 ionic 4 (vue) 应用程序，其中包括 ion-item-sliding： 这是代码的样子

HTML

<ion-item-sliding v-for="day in month.days" v-bind:key="day.day">
    <ion-item
      :id="'times-item-'+day.day+'-'+month.name.toLowerCase()+'-'+month.year"
      @click="openAddEditModal(day)"
    >
      <ion-grid>
        <ion-row>
          <ion-col size="4">
            <ion-label :color="switchLabelColor(day)">
              <div id="times-item-day-weekday">{{ day.weekday }}.</div>
              <div id="times-item-day-day" class="bigger">
                {{ day.day }}
              </div>
            </ion-label>
          </ion-col>

          <ion-col size="4" v-if="getDayEntry(day)">
            <ion-text
              id="times-item-start-end-time"
              v-if="isWork(getDayEntry(day).type)"
            >
              {{ formatTime(getDayEntry(day).start) }} -
              {{ formatTime(getDayEntry(day).end) }}
            </ion-text>
          </ion-col>

          <ion-col
            id="times-item-stats"
            size="4"
            class="ion-text-end"
            v-if="getDayEntry(day)"
          >
            {{ formatDuration(getDayEntry(day).worktime) }}<br />
            <ion-text
              id="times-item-overtime"
              :color="switchOvertimeColor(getDayEntry(day).overtime)"
              >{{ getDayEntry(day).overtime.toString() }}</ion-text
            >
          </ion-col>
        </ion-row>
      </ion-grid>
    </ion-item>
    <ion-item-options side="end">
      <ion-item-option
        id="times-item-delete-button"
        v-if="day.entry"
        ion-item-option
        color="danger"
        expandable
        @click="deleteEntryForDay(day)"
        >Delete</ion-item-option
      >
    </ion-item-options>
  </ion-item-sliding>

我正在使用 cypress.io 对应用程序进行端到端测试，但我无法让 cypress 将 ion-item-sliding 滑动到左侧。

我在ion-item-sliding 和ion-item 上尝试过各种鼠标事件，例如向下、移动、向上、指针。我也尝试了触摸事件，但没有任何效果。

我最后尝试的是这个测试脚本：

test typescript

it("Delete today entry", () => {
    //GIVEN
    const today = new Date();
    const todayString: string = createItemSelectorTextForDate(today);

    //WHEN
    cy.get("#times-item-"+todayString)
    .trigger('mousedown', {force: true})
    .trigger('mousemove', {clientX: -80, force: true})
    .trigger('mouseup', {force: true});
})

有人知道如何让cypress.io 使用离子组件```

Answer 1

我在使用 ion-item-sliding 时遇到了同样的问题，在尝试了所有的鼠标、指针、触摸事件之后，我可以想象没有任何效果，但后来我找到了两种点击隐藏按钮的方法。

第一种解决方案

快一点，直接点击隐藏按钮：

 cy.get('ion-item-sliding.item-wrapper')
    .find('button[color="danger"]')
    .click({force:true});

这不会制作动画，滑块和按钮将不可见但会调用按钮动作。

第二个解决方案

自己制作动画。滑动时 ion-item-sliding 中的事件添加一个类和一个样式插入。 用柏树插入：

cy.get('ion-item-sliding.item-wrapper')
   .invoke('addClass', 'active-slide active-options-right')
   .find('.item')
   .invoke('attr', 'style', 'transform: translate3d(-184px, 0px, 0px);')

之前的代码是针对Ionic 3的，更多新版本只需要更改类即可。

最新离子

用最新的example code to date测试

cy.get('ion-item-sliding')
    .invoke('addClass', 'item-sliding-active-slide item-sliding-active-options-end')
    .find('.item')
    .invoke('attr', 'style', 'transform: translate3d(-72px, 0px, 0px);')