feat(cc-widgets): UI Automation for Task List

packages/contact-center/cc-components/src/components/task/CallControl/call-control.tsx

@@ -159,6 +159,7 @@ function CallControlComponent(props: CallControlComponentProps) {
       className: 'call-control-button',
       disabled: false,
       isVisible: controlVisibility.holdResume,
+      dataTestId: 'call-control:hold-toggle',
     },
     {
       id: 'consult',
@@ -168,6 +169,7 @@ function CallControlComponent(props: CallControlComponentProps) {
       disabled: false,
       menuType: 'Consult',
       isVisible: controlVisibility.consult,
+      dataTestId: 'call-control:consult',
     },
     {
       id: 'transfer',
@@ -177,6 +179,7 @@ function CallControlComponent(props: CallControlComponentProps) {
       disabled: false,
       menuType: 'Transfer',
       isVisible: controlVisibility.transfer,
+      dataTestId: 'call-control:transfer',
     },
     {
       id: 'record',
@@ -186,6 +189,7 @@ function CallControlComponent(props: CallControlComponentProps) {
       className: 'call-control-button',
       disabled: false,
       isVisible: controlVisibility.pauseResumeRecording,
+      dataTestId: 'call-control:recording-toggle',
     },
     {
       id: 'end',
@@ -195,6 +199,7 @@ function CallControlComponent(props: CallControlComponentProps) {
       className: 'call-control-button-cancel',
       disabled: isHeld,
       isVisible: controlVisibility.end,
+      dataTestId: 'call-control:end-call',
     },
   ];
 
@@ -254,7 +259,7 @@ function CallControlComponent(props: CallControlComponentProps) {
                             className={button.className}
                             aria-label={button.tooltip}
                             disabled={button.disabled || (consultInitiated && isTelephony)}
-                            data-testid="ButtonCircle"
+                            data-testid={button.dataTestId}
                             onPress={() => handlePopoverOpen(button.menuType as CallControlMenuType)}
                           >
                             <Icon className={button.className + '-icon'} name={button.icon} />
@@ -295,7 +300,7 @@ function CallControlComponent(props: CallControlComponentProps) {
                         button.className +
                         (button.disabled || (consultInitiated && isTelephony) ? ` ${button.className}-disabled` : '')
                       }
-                      data-testid={button.id === 'end' ? 'call-control:end-call' : button.id}
+                      data-testid={button.dataTestId}
                       onPress={button.onClick}
                       disabled={button.disabled || (consultInitiated && isTelephony)}
                       aria-label={button.tooltip}

packages/contact-center/cc-components/src/components/task/CallControlCAD/call-control-cad.tsx

@@ -159,7 +159,7 @@ const CallControlCADComponent: React.FC<CallControlComponentProps> = (props) =>
           <div className="customer-info">
             {renderCustomerName()}
             <div className="call-details">
-              <Text className="call-timer" type="body-secondary" tagName={'small'}>
+              <Text className="call-timer" type="body-secondary" tagName={'small'} data-testid="cc-cad:call-timer">
                 {currentMediaType.labelName} - <TaskTimer startTimeStamp={startTimestamp} />
               </Text>
               <div className="call-status">

packages/contact-center/cc-components/src/components/task/Task/index.tsx

@@ -73,6 +73,7 @@ const Task: React.FC<TaskProps> = ({
         type={selected ? 'body-large-bold' : 'body-large-medium'}
         className={getTitleClassName()}
         id={isNonVoiceMedia ? tooltipTriggerId : undefined}
+        data-testid="task:title"
       >
         {title}
       </Text>
@@ -121,7 +122,7 @@ const Task: React.FC<TaskProps> = ({
         <section className="task-details">
           {renderTitle()}
           {state && !isIncomingTask && (
-            <Text tagName="span" type="body-midsize-regular" className="task-text">
+            <Text tagName="span" type="body-midsize-regular" className="task-text" data-testid="task:item-state">
               {capitalizeFirstWord(state)}
             </Text>
           )}
@@ -135,9 +136,9 @@ const Task: React.FC<TaskProps> = ({
           {/* Handle Time should render if it's an incoming call without ronaTimeout OR if it's not an incoming call */}
           {(isIncomingTask && !ronaTimeout) || !isIncomingTask
             ? startTimeStamp && (
-                <Text tagName="span" type="body-midsize-regular" className="task-text">
+                <Text tagName="span" type="body-midsize-regular" className="task-text" data-testid="task:handle-time">
                   Handle Time: {'  '}
-                  <TaskTimer startTimeStamp={startTimeStamp} />
+                  <TaskTimer startTimeStamp={startTimeStamp} data-testid="task-list:timer" />
                 </Text>
               )
             : null}

playwright/Utils/helperUtils.ts

@@ -1,6 +1,6 @@
 import { Page } from '@playwright/test';
 import { getCurrentState, changeUserState } from './userStateUtils';
-import { WRAPUP_REASONS, USER_STATES, RONA_OPTIONS, LOGIN_MODE, LoginMode, ThemeColor, userState, WrapupReason } from 'playwright/constants';
+import { WRAPUP_REASONS, USER_STATES, RONA_OPTIONS, LOGIN_MODE, LoginMode, ThemeColor, userState, WrapupReason } from '../constants';
 import { submitWrapup } from './wrapupUtils';
 import { acceptExtensionCall, submitRonaPopup } from './incomingTaskUtils';
 import { loginViaAccessToken, disableMultiLogin, enableMultiLogin, initialiseWidgets, enableAllWidgets, } from './initUtils';
@@ -317,6 +317,9 @@ export const handleStrayTasks = async (page: Page, extensionPage: Page | null =
       const acceptButtonVisible = await acceptButton.isVisible().catch(() => false);
       const isExtensionCall = await (await task.innerText()).includes('Ringing...');
       if (isExtensionCall) {
+        if (!extensionPage) {
+          throw new Error('Extension page is not available for handling extension call');
+        }
         const extensionCallVisible = await extensionPage.locator('[data-test="right-action-button"]').waitFor({ state: 'visible', timeout: 40000 }).then(() => true).catch(() => false);
         if (extensionCallVisible) {
           await acceptExtensionCall(extensionPage);