Vue.js中如何实现鼠标和键盘事件的录制与回放功能？

vue.js

2024-03-06 23:54:04

Vue.js中的鼠标和键盘录制与回放指南

在现代软件开发中，自动化测试和用户体验优化变得越来越重要。鼠标和键盘事件的录制与回放功能可以帮助我们显著提高这些领域的效率。本文将深入探讨如何使用Vue.js实现这一强大的功能。

问题陈述

我们的目标是创建一个应用程序，能够：

记录鼠标移动、点击和键盘按键事件。
提供一种回放机制，按顺序重现记录的事件。

解决方法

1. 事件监听

首先，我们需要监听鼠标和键盘事件，并将其记录到一个数组中。这可以通过以下方式实现：

// 监听鼠标事件
document.addEventListener('mousemove', this.handleMouseEvent);
document.addEventListener('click', this.handleMouseEvent);

// 监听键盘事件
document.addEventListener('keydown', this.handleKeyDown);

2. 事件记录

在事件处理函数中，我们将鼠标和键盘事件添加到events数组中。

handleMouseEvent(event) {
  if (event.type === 'mousemove') {
    this.events.push({ type: 'mouse', action: 'move', x: event.clientX, y: event.clientY });
  } else if (event.type === 'click') {
    this.events.push({ type: 'mouse', action: 'click', x: event.clientX, y: event.clientY });
  }
}

handleKeyDown(event) {
  this.events.push({ type: 'keyboard', key: event.key });
}

3. 回放机制

接下来，我们需要一个回放机制来按顺序执行记录的事件。

replayNextEvent() {
  const event = this.events[this.currentIndex];
  if (event) {
    if (event.type === 'mouse') {
      if (event.action === 'move') {
        this.$refs.fakeMouse.style.left = event.x + 'px';
        this.$refs.fakeMouse.style.top = event.y + 'px';
      } else if (event.action === 'click') {
        this.performFakeClick(event);
      }
    } else if (event.type === 'keyboard') {
      // 创建一个新的键盘事件
      const simulatePress = new KeyboardEvent('keydown', {
        key: event.key, // 指定所需的键
        bubbles: true,
        cancelable: true
      });

      // 在目标元素上分发事件
      document.dispatchEvent(simulatePress);
    }

    // 删除已执行的事件
    this.events.splice(this.currentIndex, 1);

    // 设置下一次事件的超时
    setTimeout(this.replayNextEvent, 20);
  }
}

4. 模拟点击

对于点击事件，我们需要模拟点击行为，因为在回放过程中目标元素可能已经发生了变化。

performFakeClick(event) {
  let targetElement = document.elementFromPoint(event.x, event.y);

  if (this.targetElement) {
    const clickEvent = new MouseEvent('click', {
      bubbles: true,
      cancelable: true,
      view: window
    });

    this.targetElement.dispatchEvent(clickEvent);
  }
}

完整代码示例

以下代码展示了一个完整的Vue.js组件，实现了鼠标和键盘录制与回放功能：

<template>
  <div>
    <div class="mouse-keyboard-tracker">
      <button class="doclick" @click="dome">click</button>
      <div style="width: 100%; height: 25vh; overflow: scroll;">
        <div>{{ events }}</div>
      </div>
    </div>
    <div class="fakeMouse" ref="fakeMouse" style="position: absolute; width: 20px; height: 20px; background-color: rgb(214, 58, 58); border-radius: 100%;"></div>
    <button @click="startReplay">Replay Events</button>
    <input id="fakeInput" style="height: 40px;" type="text">
    <input id="Input" style="height: 40px;" type="text">
    <p>{{ visTxt }}</p>
  </div>
</template>

<script>

export default {
  data() {
    return {
      events: [],
      visTxt: [],
      currentIndex: 0,
      isReplaying: false
    };
  },
  mounted () {
    document.addEventListener('mousemove', this.handleMouseEvent);
    document.addEventListener('click', this.handleMouseEvent);
    document.addEventListener('keydown', this.handleKeyDown);
  },
  methods: {
    dome() {
      this.visTxt.push("demo")
    },
    handleMouseEvent(event) {
      if (event.type === 'mousemove') {
        this.events.push({ type: 'mouse', action: 'move', x: event.clientX, y: event.clientY });
      } else if (event.type === 'click') {
        this.events.push({ type: 'mouse', action: 'click', x: event.clientX, y: event.clientY });
      }
      this.displayEvents();
    },
    handleKeyDown (event) {
     
    this.events.push({ type: 'keyboard', key: event.key });
    this.displayEvents();
      
    },
    displayEvents() {
      // No need to log to console, events are displayed on the page
    },
    startReplay () {
      this.currentIndex = 0;
      this.replayNextEvent();
      document.removeEventListener('mousemove', this.handleMouseEvent);
      document.removeEventListener('click', this.handleMouseEvent);
      document.removeEventListener('keydown', this.handleKeyDown);
    },
    replayNextEvent () {
      const event = this.events[this.currentIndex];
      if (event) {
        if (event.type === 'mouse') {
          if (event.action === 'move') {
            this.$refs.fakeMouse.style.left = event.x + 'px';
            this.$refs.fakeMouse.style.top = event.y + 'px';
          } else if (event.action === 'click') {
            this.performFakeClick(event);
          }
        } else if (event.type === 'keyboard') {
          // Create a new keyboard event
          const simulatePress = new KeyboardEvent('keydown', {
            key: event.key, // Specify the desired key
            bubbles: true,
            cancelable: true
          });
          // Dispatch the event on the target element
          document.dispatchEvent(simulatePress);
          
        }
        // Delete executed events
        this.events.splice(this.currentIndex, 1);
        // Set timeout for next event
        setTimeout(this.replayNextEvent, 20); 
      }
      
    },
    performFakeClick (event) {
      let targetElement = document.elementFromPoint(event.x, event.y);
      if (targetElement.tagName.toLowerCase() == 'input') {
        // foucs element wait simulate key press
        targetElement.focus()
      }
      
      if (this.targetElement) {
        const clickEvent = new MouseEvent('click', {
          bubbles: true,
          cancelable: true,
          view: window
        });
        this.targetElement.dispatchEvent(clickEvent);
      }
    }
  },
  beforeDestroy() {
    document.removeEventListener('mousemove', this.handleMouseEvent);
    document.removeEventListener('click', this.handleMouseEvent);
    document.removeEventListener('keydown', this.handleKeyDown);
  }
};
</script>

<style scoped>
.mouse-keyboard-tracker {
  padding: 20px;
  background-color: #f9f9f9;
  border: 1px solid #ccc;
}
</style>