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

时间:2019-02-18 12:14:40

标签: automated-tests e2e-testing testcafe

我正在为我们的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 个答案:

答案 0 :(得分:4)

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