More classes to cypress testing (#2038)

cvat-ui/src/components/annotation-page/attribute-annotation-workspace/attribute-annotation-sidebar/attribute-switcher.tsx

@@ -27,7 +27,7 @@ function AttributeSwitcher(props: Props): JSX.Element {
 
     const title = `${currentAttribute} [${currentIndex + 1}/${attributesCount}]`;
     return (
-        <div className='attribute-annotation-sidebar-switcher'>
+        <div className='attribute-annotation-sidebar-attribute-switcher'>
             <Tooltip title={`Previous attribute ${normalizedKeyMap.PREVIOUS_ATTRIBUTE}`} mouseLeaveDelay={0}>
                 <Button disabled={attributesCount <= 1} onClick={() => nextAttribute(-1)}>
                     <Icon type='left' />

cvat-ui/src/components/annotation-page/attribute-annotation-workspace/attribute-annotation-sidebar/object-switcher.tsx

@@ -31,7 +31,7 @@ function ObjectSwitcher(props: Props): JSX.Element {
 
     const title = `${currentLabel} ${clientID} [${currentIndex + 1}/${objectsCount}]`;
     return (
-        <div className='attribute-annotation-sidebar-switcher'>
+        <div className='attribute-annotation-sidebar-object-switcher'>
             <Tooltip title={`Previous object ${normalizedKeyMap.PREVIOUS_OBJECT}`} mouseLeaveDelay={0}>
                 <Button disabled={objectsCount <= 1} onClick={() => nextObject(-1)}>
                     <Icon type='left' />

cvat-ui/src/components/annotation-page/attribute-annotation-workspace/styles.scss

@@ -13,7 +13,8 @@
     padding: 5px;
 }
 
-.attribute-annotation-sidebar-switcher {
+.attribute-annotation-sidebar-object-switcher,
+.attribute-annotation-sidebar-attribute-switcher {
     display: flex;
     align-items: center;
     justify-content: space-between;

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

@@ -47,6 +47,7 @@ function DrawPolygonControl(props: Props): JSX.Element {
             )}
         >
             <Icon
+                className='cvat-draw-cuboid-control'
                 {...dynamicIconProps}
                 component={CubeIcon}
             />

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

@@ -43,6 +43,7 @@ function DrawPointsControl(props: Props): JSX.Element {
             )}
         >
             <Icon
+                className='cvat-draw-points-control'
                 {...dynamicIconProps}
                 component={PointIcon}
             />

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

@@ -43,6 +43,7 @@ function DrawPolygonControl(props: Props): JSX.Element {
             )}
         >
             <Icon
+                className='cvat-draw-polygon-control'
                 {...dynamicIconProps}
                 component={PolygonIcon}
             />

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

@@ -43,6 +43,7 @@ function DrawPolylineControl(props: Props): JSX.Element {
             )}
         >
             <Icon
+                className='cvat-draw-polyline-control'
                 {...dynamicIconProps}
                 component={PolylineIcon}
             />

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

@@ -45,6 +45,7 @@ function DrawRectangleControl(props: Props): JSX.Element {
             )}
         >
             <Icon
+                className='cvat-draw-rectangle-control'
                 {...dynamicIconProps}
                 component={RectangleIcon}
             />

cvat-ui/src/components/annotation-page/top-bar/player-buttons.tsx

@@ -55,19 +55,20 @@ function PlayerButtons(props: Props): JSX.Element {
     return (
         <Col className='cvat-player-buttons'>
             <Tooltip title='Go to the first frame' mouseLeaveDelay={0}>
-                <Icon component={FirstIcon} onClick={onFirstFrame} />
+                <Icon className='cvat-player-first-button' component={FirstIcon} onClick={onFirstFrame} />
             </Tooltip>
             <Tooltip title={`Go back with a step ${backwardShortcut}`} mouseLeaveDelay={0}>
-                <Icon component={BackJumpIcon} onClick={onBackward} />
+                <Icon className='cvat-player-backward-button' component={BackJumpIcon} onClick={onBackward} />
             </Tooltip>
             <Tooltip title={`Go back ${previousFrameShortcut}`} mouseLeaveDelay={0}>
-                <Icon component={PreviousIcon} onClick={onPrevFrame} />
+                <Icon className='cvat-player-previous-button' component={PreviousIcon} onClick={onPrevFrame} />
             </Tooltip>
 
             {!playing
                 ? (
                     <Tooltip title={`Play ${playPauseShortcut}`} mouseLeaveDelay={0}>
                         <Icon
+                            className='cvat-player-play-button'
                             component={PlayIcon}
                             onClick={onSwitchPlay}
                         />
@@ -76,6 +77,7 @@ function PlayerButtons(props: Props): JSX.Element {
                 : (
                     <Tooltip title={`Pause ${playPauseShortcut}`} mouseLeaveDelay={0}>
                         <Icon
+                            className='cvat-player-pause-button'
                             component={PauseIcon}
                             onClick={onSwitchPlay}
                         />
@@ -83,13 +85,13 @@ function PlayerButtons(props: Props): JSX.Element {
                 )}
 
             <Tooltip title={`Go next ${nextFrameShortcut}`} mouseLeaveDelay={0}>
-                <Icon component={NextIcon} onClick={onNextFrame} />
+                <Icon className='cvat-player-next-button' component={NextIcon} onClick={onNextFrame} />
             </Tooltip>
             <Tooltip title={`Go next with a step ${forwardShortcut}`} mouseLeaveDelay={0}>
-                <Icon component={ForwardJumpIcon} onClick={onForward} />
+                <Icon className='cvat-player-forward-button' component={ForwardJumpIcon} onClick={onForward} />
             </Tooltip>
             <Tooltip title='Go to the last frame' mouseLeaveDelay={0}>
-                <Icon component={LastIcon} onClick={onLastFrame} />
+                <Icon className='cvat-player-last-button' component={LastIcon} onClick={onLastFrame} />
             </Tooltip>
         </Col>
     );