Add host element reference to Button component for data-testid management

Author: arhtudormorar

src/components/visual/button/button.tsx

@@ -1,5 +1,5 @@
 import type { EventEmitter } from '@stencil/core';
-import { Component, Event, h, Prop } from '@stencil/core';
+import { Component, Element, Event, h, Prop } from '@stencil/core';
 import { Button as ButtonComponent } from 'common/Button/Button';
 
 import type { ButtonSizeEnum, ButtonVariantEnum } from '../../../common/Button/button.types';
@@ -10,6 +10,8 @@ import type { ButtonSizeEnum, ButtonVariantEnum } from '../../../common/Button/b
   shadow: true,
 })
 export class Button {
+  @Element() hostElement!: HTMLElement;
+
   @Event() buttonClick: EventEmitter<MouseEvent>;
 
   @Prop() class?: string = '';
@@ -18,6 +20,19 @@ export class Button {
   @Prop() size?: `${ButtonSizeEnum}` = 'large';
   @Prop() variant?: `${ButtonVariantEnum}` = 'primary';
 
+  /**
+   * Stencil reflects `data-testid` to the host element based on the Prop decorator above.
+   * That causes two DOM nodes with the same `data-testid`: the `<mvx-button>` host and
+   * the inner `<button>`, which breaks Playwright strict mode. We keep using the
+   * attribute to populate `dataTestId`, but remove it from the host after render so that
+   * only the inner `<button>` keeps the `data-testid`.
+   */
+  componentDidRender() {
+    if (this.hostElement.hasAttribute('data-testid')) {
+      this.hostElement.removeAttribute('data-testid');
+    }
+  }
+
   private handleClick = (event: MouseEvent) => {
     this.buttonClick.emit(event);
   };