如何从普通JavaScript代码获取Angular服务实例用于E2E测试？

当然可以！ 不管是手动调试还是编写E2E测试断言，你都能在Chrome DevTools里获取Angular应用的服务实例，下面是具体的实现步骤和注意事项：

一、在DevTools控制台中手动获取服务实例 #

1. 获取Angular根注入器 #

Angular的所有服务都由注入器管理，首先你需要拿到应用的根注入器：

// 替换成你应用的根组件选择器，通常是app-root
const rootElement = document.querySelector('app-root');
// ng是Angular在开发模式下暴露的全局调试对象
const rootInjector = ng.getInjector(rootElement);

2. 提取目标服务实例 #

拿到注入器后，就可以通过服务类或者注入令牌来获取实例：

• 如果是通过类提供的根服务（比如@Injectable({ providedIn: 'root' })）：

  // 替换成你的服务类名，比如DataService
  const targetService = rootInjector.get(DataService);
  

• 如果是用InjectionToken定义的服务：

  // 确保令牌在全局可访问，或直接传入令牌定义
  const DATA_SERVICE_TOKEN = new InjectionToken('YourServiceToken');
  const targetService = rootInjector.get(DATA_SERVICE_TOKEN);
  

获取到服务后，你就能直接在控制台访问它的属性和方法，比如console.log(targetService.yourDataProperty)来验证数据。

二、在E2E测试中复用这个逻辑 #

如果你的E2E工具（比如Cypress、Playwright）允许执行自定义JS代码，可把上述逻辑封装成测试步骤。以Cypress为例：

cy.window().then(win => {
  const rootElement = win.document.querySelector('app-root');
  const rootInjector = win.ng.getInjector(rootElement);
  // 注意：需确保服务类在全局window对象上可访问，或使用注入令牌
  const dataService = rootInjector.get(win.DataService);
  
  // 编写断言逻辑
  expect(dataService.userList).to.have.length(3);
  expect(dataService.activeUser.id).to.equal(1);
});

三、关键注意事项 #

• 生产环境的特殊配置：默认生产构建的Angular应用会压缩混淆代码，且移除全局ng调试对象。若需在生产环境操作，需调整angular.json的configurations.production配置：设置optimization: false、buildOptimizer: false，同时确保目标服务的类或令牌被暴露到全局作用域。
• 服务作用域匹配：如果服务是组件级注入（非根注入器提供），需找到对应组件的DOM元素，再获取它的注入器，而非根注入器。
• 调试模式依赖：全局ng对象仅在Angular调试模式下存在，生产模式默认关闭，需手动调用enableDebugTools开启调试模式。

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