Question

我试图模拟页面上CSS元素的点击，并在每个阶段自动截取窗口的屏幕截图以进行测试。我使用backstopJS作为CSS测试/屏幕截图框架。对于第一个元素，一切似乎都很好。触发ng-click会扩展菜单（在我的屏幕截图中可见），并打印控制台消息：

<li class="hidden-toggle" ng-click="hiddentoggle = !hiddentoggle" 
ng-init="hiddentoggle=false" onclick="console.log('Toggled hidden');"> ... </li>

但是当我尝试在点击同一元素时截取警告框时，它并没有显示出来：

<li class="hidden-toggle" ng-click="hiddentoggle = !hiddentoggle" 
ng-init="hiddentoggle=false" onclick="alert('Toggled hidden');"> ... </li>

我模拟点击的功能：

Array.prototype.forEach.call(document.querySelectorAll(o), function(s, j) {
        var ev = document.createEvent("MouseEvent");
        ev.initMouseEvent(
            "click",
            true, false,
            window, null,
            0, 0, 0, 0,
            false, false, false, false,
            0, null
        );
        s.dispatchEvent(ev);

因此onClicks正在被触发，但我无法在屏幕截图中看到警告框。对于尝试显示模态的元素也是如此。我只是在一段时间后添加了onClicks来测试元素是否实际被点击，所以我怀疑他们是否在干扰任何方式。

任何可能导致此行为的想法？

Answer 1

如果正在激活onClicks，您可能只是在触发BackstopJS以在正确的时间截取屏幕截图时遇到问题。你可以查看这篇文章（到最后），其中包括在Angular中触发BackstopJS截图。

http://davidwalsh.name/visual-regression-testing-angular-applications

希望这有帮助。

＆＃34;单击＆＃34;某些元素上的MouseEvent未显示在屏幕截图中

1 个答案: