如何在Karma测试中查看Angular14项目的真实渲染HTML元素？

• 在测试代码中打印HTML结构
  在测试用例里，通过TestBed创建组件实例后触发变更检测，直接打印组件的原生DOM元素内容：

  it('should display component HTML', () => {
    const fixture = TestBed.createComponent(YourTargetComponent);
    fixture.detectChanges(); // 触发组件渲染
    const componentElement = fixture.nativeElement;
    console.log(componentElement.innerHTML); // 在控制台输出HTML结构
  });
  

  运行测试后，打开浏览器控制台就能看到对应的HTML代码。

• 浏览器调试模式下查看元素
  执行ng test启动测试后，在测试页面点击右上角的"Debug"按钮进入独立调试页面。打开浏览器开发者工具（按F12），切换到"Elements"标签，就能直接查看组件渲染后的真实DOM结构，和正常查看网页元素的方式一致。

• 查询特定DOM元素
  若只关注某个特定元素，可用Angular测试工具的debugElement结合By选择器定位：

  import { By } from '@angular/platform-browser';
  
  it('should find specific element', () => {
    const fixture = TestBed.createComponent(YourTargetComponent);
    fixture.detectChanges();
    const titleElement = fixture.debugElement.query(By.css('.title'));
    console.log(titleElement.nativeElement.textContent); // 查看元素文本
    // 也可在开发者工具里直接检查titleElement.nativeElement
  });
  

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