如何点击应该在 "touchmove" 事件中消失的元素？

Question

我正在为我们的 Web 应用程序的移动版本编写测试用例，但我无法单击旨在在 "touchmove" 事件时消失的弹出窗口。有什么办法可以解决这个问题？

平台信息：
OS: Mac OS 莫哈韦沙漠 10.14.13
TestCafe 版本：1.0.1
Chrome 版本：72.0.03626
TestCafe browsers 值：chrome:emulation:device=iPhone X

当 testcafe 尝试执行点击时，弹出窗口消失。我试过先将鼠标悬停在该元素上，然后单击它，但这没有用。

这是处理 'touchmove' 事件的 React 代码

  componentDidUpdate(prevProps) {
    if (!prevProps.undoRemove && this.props.undoRemove) {
      window.addEventListener('touchmove', this.props.onHideUndo)
    } else if (prevProps.undoRemove && !this.props.undoRemove) {
      window.removeEventListener('touchmove', this.props.onHideUndo)
    }
  }

  componentWillUnmount() {
    if (this.props.undoRemove) this.props.onHideUndo()
    window.removeEventListener('touchmove', this.props.onHideUndo)
  }

验证该行为的代码：

test('Undo Popup - Click on "Undo" button should return item back', async t => {
  const defItemCount = await page.itemCount;
  const rItemId = await page.getItemByIndex(1).info.sku.textContent;

  await page.removeItemByIndex(1);
  await t.expect(page.itemCount).notEql(defProdCount);
  await t.click(page.undoPopup.undoButton);
  await t.expect(page.itemCount).eql(defItemCount);
})

我希望在 testcafe click 操作中我会点击那个按钮，在 drag 操作中，它应该会按预期消失。

Answer 1

据我了解，问题的原因是 touchmove 事件迫使弹出窗口 window 关闭。单击任何元素不应引发 touchmove 事件，因此我在 TestCafe 存储库中创建了一个单独的 ticket。请跟踪它以查看进度

如何点击应该在 "touchmove" 事件中消失的元素？

How to click on element that should disappear on "touchmove" event?

automated-tests

e2e-testing

testcafe

ui-testing

web-testing