feat: add more e2e tests for MPR and add test mode and extension (#3180)

* tests: add various e2e tests for MPR and measurements

wip

add cypress config

feat: add mode and extension for testing

add hp applied through search params

add MPR tests

apply review comments

add more e2e tests

update yarn lock

* fix unit tests failing

platform/ui/src/components/Input/Input.tsx

@@ -57,6 +57,7 @@ const Input = ({
 };
 
 Input.propTypes = {
+  id: PropTypes.string,
   label: PropTypes.string,
   containerClassName: PropTypes.string,
   labelClassName: PropTypes.string,
@@ -70,7 +71,7 @@ Input.propTypes = {
   readOnly: PropTypes.bool,
   onKeyPress: PropTypes.func,
   onKeyDown: PropTypes.func,
-  disabled: PropTypes.bool
+  disabled: PropTypes.bool,
 };
 
 export default Input;

platform/ui/src/components/Modal/Modal.tsx

@@ -32,6 +32,7 @@ const Modal = ({
           <Typography
             variant="h4"
             className="flex grow text-primary-light font-light"
+            data-cy="modal-header"
           >
             {title}
           </Typography>

platform/ui/src/components/Select/Select.tsx

@@ -79,6 +79,7 @@ const Select = ({
         className,
         'flex flex-col flex-1 customSelect__wrapper'
       )}
+      data-cy={`input-${id}`}
       classNamePrefix="customSelect"
       isDisabled={isDisabled}
       isClearable={isClearable}

platform/ui/src/components/ThumbnailTracked/ThumbnailTracked.tsx

@@ -95,7 +95,11 @@ const ThumbnailTracked = ({
           >
             <Icon name={trackedIcon} className="w-4 mb-2 text-primary-light" />
           </Tooltip>
-          <div className="text-xl leading-tight text-white text-center">
+
+          <div
+            className="text-xl leading-tight text-white text-center"
+            data-cy={'thumbnail-viewport-labels'}
+          >
             {renderViewportLabels()}
           </div>
         </div>