使用Protractor 7测试Angular 14应用时如何模拟鼠标滚轮点击？

下面是几种可行的实现方案，涵盖Protractor原生API、WebDriver能力以及纯JavaScript模拟：

1. 使用WebDriver Actions API（推荐） #

Protractor基于WebDriver，Actions API是处理鼠标交互的标准方式，直接支持中键点击操作：

首先导入必要的模块，然后通过动作链执行中键点击：

import { browser, element, by, Button } from 'protractor';

describe('Middle Click Test Suite', () => {
  it('should trigger middle click on target element', async () => {
    // 定位目标元素
    const targetElement = element(by.css('.your-target-selector'));
    
    // 等待元素可交互（可选但推荐，避免元素未加载完成导致操作失败）
    await browser.wait(browser.ExpectedConditions.elementToBeClickable(targetElement), 5000);
    
    // 执行中键点击
    await browser.actions()
      .click(targetElement, Button.MIDDLE)
      .perform();
    
    // 此处添加断言逻辑，比如验证新标签页打开、弹窗出现等预期行为
  });
});

2. 纯JavaScript模拟DOM事件 #

如果Actions API在特定环境（如headless浏览器）下不生效，可以直接通过执行JS脚本触发原生鼠标事件：

import { browser, element, by } from 'protractor';

describe('Middle Click via JS', () => {
  it('simulates middle click using DOM events', async () => {
    const targetElement = element(by.css('.your-target-selector'));
    const webElement = await targetElement.getWebElement();
    
    await browser.executeScript((elem) => {
      // 触发mousedown事件（button=1代表中键）
      const mousedownEvent = new MouseEvent('mousedown', {
        bubbles: true,
        cancelable: true,
        button: 1,
        buttons: 4 // 中键按下的掩码值
      });
      elem.dispatchEvent(mousedownEvent);
      
      // 触发mouseup事件完成点击动作
      const mouseupEvent = new MouseEvent('mouseup', {
        bubbles: true,
        cancelable: true,
        button: 1,
        buttons: 4
      });
      elem.dispatchEvent(mouseupEvent);
      
      // 可选：触发click事件，部分应用逻辑可能依赖这个事件
      const clickEvent = new MouseEvent('click', {
        bubbles: true,
        cancelable: true,
        button: 1
      });
      elem.dispatchEvent(clickEvent);
    }, webElement);
    
    // 添加断言验证操作结果
  });
});

注意事项 #

• 确保目标元素在执行点击前可见且处于可交互状态，否则操作会失败，建议用ExpectedConditions等待元素状态稳定。
• 不同浏览器对鼠标事件的处理可能略有差异，测试前在目标浏览器环境中验证效果。

内容的提问来源于stack exchange，提问作者Fanfoue