Angular中如何为p-tabPanel的header添加data-cy标识符？

我尝试给 <p-tabPanel> 添加 data-cy="network_timeserver_tab" 来检查header的文本内容，但这个标识符并没有渲染到实际的header元素上。我的组件代码如下：

<ng-container *ngIf="settings">
    <ng-container *transloco="let t; prefix: 'network'">
        <h1 class="page-heading-size" data-cy="network_header">{{ t('page.title') }}</h1>
        <p-tabView>
            <p-tabPanel data-cy="network_timeserver_tab" header="{{ t('timeserver.tab') }}">
                <app-timeserver-tab></app-timeserver-tab>
            </p-tabPanel>
        </p-tabView>
    </ng-container>
</ng-container>

从开发者工具可以看到，data-cy 并没有出现在header的DOM元素上：

目前我找到的可行方法是使用自定义header模板，但我们不想用这种方式：

<ng-template pTemplate="header">
     <span data-cy="network-timeserver-tab">{{ t('timeserver.tab') }}</span>
</ng-template>

请问有没有其他方法可以给header添加data-cy标识符，用于查询“Timeserver”文本？

方法1：利用headerStyleClass属性配合选择器定位 #

PrimeNG的p-tabPanel提供headerStyleClass属性，可给header元素添加自定义类，测试时通过类选择器定位元素并检查文本：

<p-tabPanel headerStyleClass="timeserver-tab-header" header="{{ t('timeserver.tab') }}">
    <app-timeserver-tab></app-timeserver-tab>
</p-tabPanel>

测试时使用选择器 .timeserver-tab-header 即可定位到header元素，进而验证文本内容。

方法2：通过ViewChild手动添加data-cy #

在组件类中获取p-tabPanel实例，在生命周期钩子中找到对应header元素并手动设置data-cy属性：

组件类代码：

import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { TabPanel } from 'primeng/tabpanel';

@Component({
  // 组件元数据
})
export class NetworkComponent implements AfterViewInit {
  @ViewChild('timeserverTab') timeserverTab!: TabPanel;

  ngAfterViewInit(): void {
    const headerElement = this.timeserverTab.el.nativeElement.querySelector('.p-tabpanel-header');
    if (headerElement) {
      headerElement.setAttribute('data-cy', 'network_timeserver_tab');
    }
  }
}

模板添加引用变量：

<p-tabPanel #timeserverTab header="{{ t('timeserver.tab') }}">
    <app-timeserver-tab></app-timeserver-tab>
</p-tabPanel>

方法3：通过TabView事件动态修改 #

监听p-tabView的onChange事件，在回调中找到目标header元素并添加data-cy：

模板代码：

<p-tabView (onChange)="onTabChange($event)">
    <p-tabPanel header="{{ t('timeserver.tab') }}">
        <app-timeserver-tab></app-timeserver-tab>
    </p-tabPanel>
</p-tabView>

组件类代码：

onTabChange(event: any) {
  const headerElement = event.tab.el.nativeElement.querySelector('.p-tabpanel-header');
  if (headerElement) {
    headerElement.setAttribute('data-cy', 'network_timeserver_tab');
  }
}

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