Playwright Event Testing with insertAdjacentText

component-event.e2e.ts

import { expect, test } from '@playwright/test';
import type { Dropdown } from './dropdown.js'; // Assuming Dropdown type is available

test('should emit a change event and signal in DOM', async ({ fastPage, page }) => {
  // fastPage.setTemplate sets up the component under test
  await fastPage.setTemplate({ attributes: { type: 'combobox' } });
  const { element } = fastPage; // element refers to the fluent-dropdown

  // Step 1: In the browser context, attach an event listener to the component.
  // When the 'change' event fires, it will insert the text 'changed' after the element.
  await element.evaluate((el: Dropdown) => {
    el.addEventListener('change', () => el.insertAdjacentText('afterend', 'changed'), { once: true });
  });

  // Step 2: Trigger the action that is expected to emit the 'change' event.
  // For a combobox, typing and then blurring could trigger it.
  const input = element.locator('input');
  await input.fill('kiwi'); // Simulate typing
  await input.blur();       // Simulate losing focus, which triggers 'change' for combobox

  // Step 3: Assert that the 'changed' text is now visible on the page.
  // This confirms the event fired and the listener executed.
  await expect(page.locator('text=changed')).toBeVisible();
});

https://github.com/microsoft/fluentui/blob/master/packages/web-components/src/dropdown/dropdown.spec.ts