Angular 14中为PrimeNG Dropdown批量添加Cypress测试属性

问题分析 #

你当前的自定义组件通过嵌套<p-dropdown>的方式添加测试属性，但未传递原组件所需的输入/输出属性，也未复用Dropdown的核心渲染逻辑，导致下拉选项无法显示。以下是两种最优解决方案：

方案一：使用指令（推荐，无需修改现有代码） #

创建一个指令，自动为所有<p-dropdown>添加测试属性，完全不用替换现有控件，零侵入：

import { Directive, ElementRef, Renderer2, Input, OnInit } from '@angular/core';

@Directive({
  selector: 'p-dropdown' // 匹配所有PrimeNG Dropdown控件
})
export class DropdownTestAttrDirective implements OnInit {
  @Input() id!: string;

  constructor(private el: ElementRef, private renderer: Renderer2) {}

  ngOnInit(): void {
    // 为Dropdown元素添加Cypress测试属性
    if (this.id) {
      this.renderer.setAttribute(this.el.nativeElement, 'data-cy-button', this.id);
    }
  }
}

使用步骤： #

1. 在你的Angular模块中声明该指令
2. 现有所有<p-dropdown>只要设置了id属性，就会自动带上data-cy-button测试属性，完全不影响原组件功能

方案二：修复自定义组件（若需保留自定义组件） #

移除冗余的自定义模板，直接继承Dropdown类，通过Renderer为宿主元素添加属性，同时复用原组件的所有功能：

import { Component, ElementRef, Renderer2, ChangeDetectorRef, NgZone, Input } from '@angular/core';
import { Dropdown } from 'primeng/dropdown';
import { FilterService } from 'primeng/api';
import { PrimeNGConfig } from 'primeng/api';

@Component({
  selector: 'custom-dropdown',
  template: '', // 空模板，复用原Dropdown的视图逻辑
  providers: [...Dropdown.providers],
  // 引入PrimeNG样式，确保组件样式正常
  styleUrls: [
    './node_modules/primeng/resources/primeng.min.css',
    './node_modules/primeng/resources/themes/lara-light-blue/theme.css'
  ]
})
export class DropdownComponent extends Dropdown {
  @Input() id!: string;

  constructor(
    el: ElementRef<any>,
    renderer: Renderer2,
    cd: ChangeDetectorRef,
    zone: NgZone,
    filterService: FilterService,
    config: PrimeNGConfig,
    private renderer2: Renderer2
  ) {
    super(el, renderer, cd, zone, filterService, config);
  }

  ngOnInit(): void {
    super.ngOnInit();
    // 为宿主元素添加测试属性
    if (this.id) {
      this.renderer2.setAttribute(this.el.nativeElement, 'data-cy-button', this.id);
    }
  }
}

为什么原模板失效？ #

你之前的自定义模板仅嵌套了<p-dropdown>但未传递任何核心属性（如options、formControlName等），也未绑定事件，导致内部<p-dropdown>无法获取必要数据渲染下拉选项，同时嵌套结构会生成冗余组件层级，引发逻辑混乱。

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