使用Capybara模拟鼠标移动

Question

我想在运行Capybara测试时演示屏幕上的鼠标移动。我有一个请求，除了通过数据点等，使用户的鼠标移动是可见的。有什么方法可以做到这一点吗？

Answer 1

据我所知，在任何Capybara驱动程序中都不直接支持这一点，但是您可以使用一些JS来伪造鼠标指针，如Visualize / Show mouse cursor position in selenium 2 tests (for example PHPUnit Webdriver)所示

基本上，它归结为创建一个图像，然后在每次发生mousemove事件时移动它的位置

// Create mouse following image.
var seleniumFollowerImg = document.createElement("img");

// Set image properties.
seleniumFollowerImg.setAttribute('src', 'data:image/png;base64,'
    + 'iVBORw0KGgoAAAANSUhEUgAAABQAAAAeCAQAAACGG/bgAAAAAmJLR0QA/4ePzL8AAAAJcEhZcwAA'
    + 'HsYAAB7GAZEt8iwAAAAHdElNRQfgAwgMIwdxU/i7AAABZklEQVQ4y43TsU4UURSH8W+XmYwkS2I0'
    + '9CRKpKGhsvIJjG9giQmliHFZlkUIGnEF7KTiCagpsYHWhoTQaiUUxLixYZb5KAAZZhbunu7O/PKf'
    + 'e+fcA+/pqwb4DuximEqXhT4iI8dMpBWEsWsuGYdpZFttiLSSgTvhZ1W/SvfO1CvYdV1kPghV68a3'
    + '0zzUWZH5pBqEui7dnqlFmLoq0gxC1XfGZdoLal2kea8ahLoqKXNAJQBT2yJzwUTVt0bS6ANqy1ga'
    + 'VCEq/oVTtjji4hQVhhnlYBH4WIJV9vlkXLm+10R8oJb79Jl1j9UdazJRGpkrmNkSF9SOz2T71s7M'
    + 'SIfD2lmmfjGSRz3hK8l4w1P+bah/HJLN0sys2JSMZQB+jKo6KSc8vLlLn5ikzF4268Wg2+pPOWW6'
    + 'ONcpr3PrXy9VfS473M/D7H+TLmrqsXtOGctvxvMv2oVNP+Av0uHbzbxyJaywyUjx8TlnPY2YxqkD'
    + 'dAAAAABJRU5ErkJggg==');
seleniumFollowerImg.setAttribute('id', 'selenium_mouse_follower');
seleniumFollowerImg.setAttribute('style', 'position: absolute; z-index: 99999999999; pointer-events: none;');

// Add mouse follower to the web page.
document.body.appendChild(seleniumFollowerImg);
document.addEventListener('mousemove', function(e) {
  const mousePointer = document.getElementById('selenium_mouse_follower');
  mousePointer.style.left = e.pageX + 'px';
  mousePointer.style.top = e.pageY + 'px';
});

然后，您需要确保在每次页面更改(访问、单击导航等)后执行JS。有很多方法可以做到这一点，最简单的方法是在测试模式下有条件地将代码添加到应用程序中，或者在希望显示鼠标位置以进行下一步操作时，通过调用page.execute_js的助手方法手动调用它。