我有一个小型 ionic 4 (vue) 应用程序,其中包含 ion-list
,其中包括 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
上尝试了各种鼠标事件,例如向下、移动、向上、指针。我也尝试过触摸事件,但没有任何效果。
我最后尝试的是这个测试脚本:
测试 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
使用 Ionic 组件```
最佳答案
我在 ionic 项目滑动方面遇到了同样的问题,在尝试了所有鼠标、指针、触摸事件后,我可以想象没有任何效果,但后来我发现了两种单击隐藏按钮的方法。
第一个解决方案
更快一点,直接点击隐藏按钮:
cy.get('ion-item-sliding.item-wrapper')
.find('button[color="danger"]')
.click({force:true});
这不会制作动画, slider 和按钮将不可见,但会调用按钮操作。
第二个解决方案
自己制作动画。滑动时 ion-item-sliding 中的事件添加类和样式插入。 将其与 cypress 一起插入:
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,更多新版本只需要更改类即可。
最新 ionic
使用最新的 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);')
关于typescript - 如何让 cypress.io 向左滑动 ionic ion-item-sliding?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/67660002/