Try mitigate flakey tooltips showing in UI tests (#1133)

Author: JamesBurnside

change/@internal-react-composites-0ff1e5c0-da0b-4419-bf5c-f8c776eea007.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "Try mitigate flakey tests",
+  "packageName": "@internal/react-composites",
+  "email": "2684369+JamesBurnside@users.noreply.github.com",
+  "dependentChangeType": "none"
+}

packages/react-composites/tests/browser/call/CallComposite.test.ts

@@ -1,6 +1,12 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT license.
-import { buildUrl, dataUiId, loadCallPageWithParticipantVideos, waitForCallCompositeToLoad } from '../common/utils';
+import {
+  buildUrl,
+  dataUiId,
+  loadCallPageWithParticipantVideos,
+  pageClick,
+  waitForCallCompositeToLoad
+} from '../common/utils';
 import { test } from './fixture';
 import { expect, Page } from '@playwright/test';
 import { v1 as generateGUID } from 'uuid';
@@ -47,8 +53,8 @@ test.describe('Call Composite E2E Configuration Screen Tests', () => {
 
   test('local device settings can toggle camera & audio', async ({ pages }) => {
     const page = pages[0];
-    await page.click(dataUiId('call-composite-local-device-settings-microphone-button'));
-    await page.click(dataUiId('call-composite-local-device-settings-camera-button'));
+    await pageClick(page, dataUiId('call-composite-local-device-settings-microphone-button'));
+    await pageClick(page, dataUiId('call-composite-local-device-settings-camera-button'));
     await page.waitForFunction(() => {
       const videoNode = document.querySelector('video');
       const videoLoaded = videoNode?.readyState === 4;
@@ -124,7 +130,7 @@ test.describe('Call Composite E2E CallPage Tests', () => {
       const page = pages[idx];
       await page.bringToFront();
 
-      await page.click(dataUiId('call-composite-participants-button'));
+      await pageClick(page, dataUiId('call-composite-participants-button'));
       const buttonCallOut = await page.waitForSelector('.ms-Callout');
       // This will ensure no animation is happening for the callout
       await buttonCallOut.waitForElementState('stable');
@@ -137,7 +143,7 @@ test.describe('Call Composite E2E CallPage Tests', () => {
     const page = pages[0];
 
     await page.bringToFront();
-    await page.click(dataUiId('call-composite-camera-button'));
+    await pageClick(page, dataUiId('call-composite-camera-button'));
     await page.waitForFunction(() => {
       return document.querySelectorAll('video').length === 1;
     });
@@ -167,7 +173,7 @@ test.describe('Call Composite E2E Call Ended Pages', () => {
   test('Left call page should show when end call button clicked', async ({ pages }) => {
     const page = pages[0];
     await page.bringToFront();
-    await page.click(dataUiId('call-composite-hangup-button'));
+    await pageClick(page, dataUiId('call-composite-hangup-button'));
     await page.waitForSelector(dataUiId('left-call-page'));
     expect(await page.screenshot()).toMatchSnapshot(`left-call-page.png`);
   });
@@ -220,11 +226,11 @@ test.describe('Call composite participant menu items injection tests', () => {
     await page.bringToFront();
 
     // Open participants flyout.
-    await page.click(dataUiId('call-composite-participants-button'), { timeout: PER_STEP_TIMEOUT_MS });
+    await pageClick(page, dataUiId('call-composite-participants-button'), { timeout: PER_STEP_TIMEOUT_MS });
     // Open participant list flyout
-    await page.click(dataUiId(IDS.participantButtonPeopleMenuItem), { timeout: PER_STEP_TIMEOUT_MS });
+    await pageClick(page, dataUiId(IDS.participantButtonPeopleMenuItem), { timeout: PER_STEP_TIMEOUT_MS });
     // There shouldbe at least one participant. Just click on the first.
-    await page.click(dataUiId(IDS.participantItemMenuButton) + ' >> nth=0', {
+    await pageClick(page, dataUiId(IDS.participantItemMenuButton) + ' >> nth=0', {
       timeout: PER_STEP_TIMEOUT_MS
     });
 
@@ -241,7 +247,7 @@ test.describe('Call composite participant menu items injection tests', () => {
 const turnOffAllVideos = async (pages: Page[], timeout?: number): Promise<void> => {
   const options = timeout ? { timeout } : undefined;
   for (const page of pages) {
-    await page.click(dataUiId('call-composite-camera-button'), options);
+    await pageClick(page, dataUiId('call-composite-camera-button'), options);
   }
   for (const page of pages) {
     await page.bringToFront();

packages/react-composites/tests/browser/call/CallComposite.test.ts-snapshots/participant-menu-item-flyout-Mobile-Android-Portrait-linux.png

@@ -8,6 +8,21 @@ import { ChatUserType, CallUserType, MeetingUserType } from './fixtureTypes';
 /** Selector string to get element by data-ui-id property */
 export const dataUiId = (id: string): string => `[data-ui-id="${id}"]`;
 
+/**
+ * Page click helper function - USE INSTEAD OF PAGE.CLICK
+ *
+ * This functions clicks the elements then moves the mouse away to prevent
+ * hover behavior appearing non-deterministically in snapshots.
+ * Examples of this are tooltips for control bar buttons would show, as well
+ * as buttons would show their onHover state.
+ */
+export const pageClick = async (page: Page, selector: string): Promise<void> => {
+  await page.click(selector);
+
+  // Move the mouse off the screen
+  await page.mouse.move(-1, -1);
+};
+
 /**
  * Wait for the ChatComposite on a page to fully load.
  */
@@ -48,7 +63,7 @@ export const waitForMeetingCompositeToLoad = async (page: Page): Promise<void> =
 export const loadCallPage = async (pages: Page[]): Promise<void> => {
   for (const page of pages) {
     await page.bringToFront();
-    await page.click(dataUiId('call-composite-start-call-button'));
+    await pageClick(page, dataUiId('call-composite-start-call-button'));
 
     // Wait for call page to load (i.e. wait for connecting screen to have passed)
     await page.waitForSelector(dataUiId('call-page'));
@@ -75,8 +90,8 @@ export const loadCallPageWithParticipantVideos = async (pages: Page[]): Promise<
   // Start local camera and start the call
   for (const page of pages) {
     await page.bringToFront();
-    await page.click(dataUiId('call-composite-local-device-settings-camera-button'));
-    await page.click(dataUiId('call-composite-start-call-button'));
+    await pageClick(page, dataUiId('call-composite-local-device-settings-camera-button'));
+    await pageClick(page, dataUiId('call-composite-start-call-button'));
 
     // Wait for call page to load (i.e. wait for connecting screen to have passed)
     await page.waitForSelector(dataUiId('call-page'));

packages/react-composites/tests/browser/common/utils.ts

@@ -6,6 +6,7 @@ import {
   buildUrl,
   dataUiId,
   loadCallPageWithParticipantVideos,
+  pageClick,
   stubMessageTimestamps,
   waitForMeetingCompositeToLoad
 } from '../common/utils';
@@ -88,7 +89,7 @@ test.describe('Meeting Composite Meeting Page Tests', () => {
 
   test('People pane opens and displays correctly', async ({ pages }) => {
     const page = pages[1];
-    await page.click(dataUiId('meeting-composite-people-button'));
+    await pageClick(page, dataUiId('meeting-composite-people-button'));
     await page.waitForSelector(dataUiId('meeting-composite-people-pane'));
     expect(await page.screenshot()).toMatchSnapshot(`meeting-gallery-screen-with-people-pane.png`);
   });