如何单击应该在“touchmove”事件中消失的元素？

Posted 2023-02-24

【中文标题】如何单击应该在“touchmove”事件中消失的元素？

【英文标题】：How to click on element that should disappear on "touchmove" event?

【发布时间】：2019-02-18 12:14:40

【问题描述】：

我正在为我们的 Web 应用程序的移动版本编写测试用例，但我无法单击设计为在“touchmove”事件时消失的弹出窗口。 有什么办法可以克服这个特殊的问题吗？

平台信息： 操作系统：Mac OS Mojave 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 操作上，它应该会按预期消失。

【参考方案1】：

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

【讨论】：

嗨，亚历克斯。非常感谢。将关注您创建的问题。