javascript - 单击某些屏幕上未显示的元素的“单击” MouseEvent

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

希望这可以帮助。