How to add data-cy identifier to p-tabPanel header in Angular?

I want to add the data-cy="network_timeserver_tab" to the p-tabPanel, so that i can check the text of the header. But if i insert the identifier it doesn't do anything.

my component.html file:

<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>



How it looks in the dev tools: enter image description here

The only way i found is to add a custom template:

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


But that's not what we want to use. Do you guys now if there is another way give a data-cy identifier to the header so that i can grep the "Timeserver" text?

Continue reading...