Added more css selectors to cypress testing (#2197)

cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/cursor-control.tsx

@@ -28,7 +28,7 @@ function CursorControl(props: Props): JSX.Element {
             <Icon
                 component={CursorIcon}
                 className={activeControl === ActiveControl.CURSOR
-                    ? 'cvat-active-canvas-control' : ''}
+                    ? 'cvat-active-canvas-control cvat-cursor-control' : 'cvat-cursor-control'}
                 onClick={
                     activeControl !== ActiveControl.CURSOR
                         ? (): void => canvasInstance.cancel()

cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/fit-control.tsx

@@ -14,13 +14,15 @@ interface Props {
 }
 
 function FitControl(props: Props): JSX.Element {
-    const {
-        canvasInstance,
-    } = props;
+    const { canvasInstance } = props;
 
     return (
         <Tooltip title='Fit the image [Double Click]' placement='right' mouseLeaveDelay={0}>
-            <Icon component={FitIcon} onClick={(): void => canvasInstance.fit()} />
+            <Icon
+                className='cvat-fit-control'
+                component={FitIcon}
+                onClick={(): void => canvasInstance.fit()}
+            />
         </Tooltip>
     );
 }

cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/group-control.tsx

@@ -29,12 +29,13 @@ function GroupControl(props: Props): JSX.Element {
 
     const dynamicIconProps = activeControl === ActiveControl.GROUP
         ? {
-            className: 'cvat-active-canvas-control',
+            className: 'cvat-group-control cvat-active-canvas-control',
             onClick: (): void => {
                 canvasInstance.group({ enabled: false });
                 groupObjects(false);
             },
         } : {
+            className: 'cvat-group-control',
             onClick: (): void => {
                 canvasInstance.cancel();
                 canvasInstance.group({ enabled: true });

cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/merge-control.tsx

@@ -27,12 +27,13 @@ function MergeControl(props: Props): JSX.Element {
 
     const dynamicIconProps = activeControl === ActiveControl.MERGE
         ? {
-            className: 'cvat-active-canvas-control',
+            className: 'cvat-merge-control cvat-active-canvas-control',
             onClick: (): void => {
                 canvasInstance.merge({ enabled: false });
                 mergeObjects(false);
             },
         } : {
+            className: 'cvat-merge-control',
             onClick: (): void => {
                 canvasInstance.cancel();
                 canvasInstance.merge({ enabled: true });

cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/move-control.tsx

@@ -23,7 +23,7 @@ function MoveControl(props: Props): JSX.Element {
             <Icon
                 component={MoveIcon}
                 className={activeControl === ActiveControl.DRAG_CANVAS
-                    ? 'cvat-active-canvas-control' : ''}
+                    ? 'cvat-move-control cvat-active-canvas-control' : 'cvat-move-control'}
                 onClick={(): void => {
                     if (activeControl === ActiveControl.DRAG_CANVAS) {
                         canvasInstance.dragCanvas(false);

cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/resize-control.tsx

@@ -16,17 +16,14 @@ interface Props {
 }
 
 function ResizeControl(props: Props): JSX.Element {
-    const {
-        activeControl,
-        canvasInstance,
-    } = props;
+    const { activeControl, canvasInstance } = props;
 
     return (
         <Tooltip title='Select a region of interest' placement='right' mouseLeaveDelay={0}>
             <Icon
                 component={ZoomIcon}
                 className={activeControl === ActiveControl.ZOOM_CANVAS
-                    ? 'cvat-active-canvas-control' : ''}
+                    ? 'cvat-resize-control cvat-active-canvas-control' : 'cvat-resize-control'}
                 onClick={(): void => {
                     if (activeControl === ActiveControl.ZOOM_CANVAS) {
                         canvasInstance.zoomCanvas(false);

cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/rotate-control.tsx

@@ -17,11 +17,7 @@ interface Props {
 }
 
 function RotateControl(props: Props): JSX.Element {
-    const {
-        anticlockwiseShortcut,
-        clockwiseShortcut,
-        rotateFrame,
-    } = props;
+    const { anticlockwiseShortcut, clockwiseShortcut, rotateFrame } = props;
 
     return (
         <Popover
@@ -47,7 +43,7 @@ function RotateControl(props: Props): JSX.Element {
             )}
             trigger='hover'
         >
-            <Icon component={RotateIcon} />
+            <Icon className='cvat-rotate-canvas-control' component={RotateIcon} />
         </Popover>
     );
 }

cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/setup-tag-control.tsx

@@ -17,9 +17,7 @@ interface Props {
 }
 
 function SetupTagControl(props: Props): JSX.Element {
-    const {
-        isDrawing,
-    } = props;
+    const { isDrawing } = props;
 
     const dynamcPopoverPros = isDrawing ? {
         overlayStyle: {
@@ -36,9 +34,7 @@ function SetupTagControl(props: Props): JSX.Element {
                 <SetupTagPopoverContainer />
             )}
         >
-            <Icon
-                component={TagIcon}
-            />
+            <Icon className='cvat-setup-tag-control' component={TagIcon} />
         </Popover>
     );
 }

cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/split-control.tsx

@@ -27,12 +27,13 @@ function SplitControl(props: Props): JSX.Element {
 
     const dynamicIconProps = activeControl === ActiveControl.SPLIT
         ? {
-            className: 'cvat-active-canvas-control',
+            className: 'cvat-split-track-control cvat-active-canvas-control',
             onClick: (): void => {
                 canvasInstance.split({ enabled: false });
                 splitTrack(false);
             },
         } : {
+            className: 'cvat-split-track-control',
             onClick: (): void => {
                 canvasInstance.cancel();
                 canvasInstance.split({ enabled: true });