tests(Playwright): Full implementation of Page Object Models (POMs) to Playwright tests (#5608)

platform/ui-next/src/components/DataRow/DataRow.tsx

@@ -315,6 +315,7 @@ const DataRowComponent = React.forwardRef<HTMLDivElement, DataRowProps>(
                 isSelected || !isVisible ? 'opacity-100' : 'opacity-0 group-hover:opacity-100'
               }`}
               aria-label={isVisible ? t('Hide') : t('Show')}
+              dataCY="data-row-visibility-toggle"
               onClick={e => {
                 e.stopPropagation();
                 onToggleVisibility(e);

platform/ui-next/src/components/FooterAction/FooterAction.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Button } from '../Button/Button';
+import { Button, ButtonProps } from '../Button/Button';
 import { cn } from '../../lib/utils';
 
 interface FooterActionProps {
@@ -7,7 +7,7 @@ interface FooterActionProps {
   className?: string;
 }
 
-interface ActionProps extends FooterActionProps {
+interface ActionProps extends ButtonProps {
   onClick: () => void;
   className?: string;
 }
@@ -60,12 +60,18 @@ FooterAction.Right = ({ children }: FooterActionProps) => {
 FooterAction.Right.displayName = 'FooterAction.Right';
 
 // Primary action: Solid button (default)
-FooterAction.Primary = ({ children, onClick, className = 'min-w-[80px]' }: ActionProps) => {
+FooterAction.Primary = ({
+  children,
+  onClick,
+  className = 'min-w-[80px]',
+  ...rest
+}: ActionProps) => {
   return (
     <Button
       variant="default"
       onClick={onClick}
       className={className}
+      {...rest}
     >
       {children}
     </Button>
@@ -74,12 +80,18 @@ FooterAction.Primary = ({ children, onClick, className = 'min-w-[80px]' }: Actio
 FooterAction.Primary.displayName = 'FooterAction.Primary';
 
 // Secondary action: Ghost button
-FooterAction.Secondary = ({ children, onClick, className = 'min-w-[80px]' }: ActionProps) => {
+FooterAction.Secondary = ({
+  children,
+  onClick,
+  className = 'min-w-[80px]',
+  ...rest
+}: ActionProps) => {
   return (
     <Button
       variant="secondary"
       onClick={onClick}
       className={className}
+      {...rest}
     >
       {children}
     </Button>
@@ -88,12 +100,13 @@ FooterAction.Secondary = ({ children, onClick, className = 'min-w-[80px]' }: Act
 FooterAction.Secondary.displayName = 'FooterAction.Secondary';
 
 // Tertiary action: Ghost button with different styling
-FooterAction.Auxiliary = ({ children, onClick, className }: ActionProps) => {
+FooterAction.Auxiliary = ({ children, onClick, className, ...rest }: ActionProps) => {
   return (
     <Button
       variant="ghost"
       onClick={onClick}
       className={className}
+      {...rest}
     >
       {children}
     </Button>

platform/ui-next/src/components/Thumbnail/Thumbnail.tsx

@@ -88,7 +88,12 @@ const Thumbnail = ({
                   loadingProgress && loadingProgress < 1 && 'bg-primary/25'
                 )}
               ></div>
-              <div className="text-[11px] font-semibold text-white">{modality}</div>
+              <div
+                className="text-[11px] font-semibold text-white"
+                data-cy="series-modality-label"
+              >
+                {modality}
+              </div>
             </div>
 
             {/* top right */}
@@ -139,7 +144,10 @@ const Thumbnail = ({
           <Tooltip>
             <TooltipContent>{description}</TooltipContent>
             <TooltipTrigger>
-              <div className="min-h-[18px] w-[128px] overflow-hidden text-ellipsis whitespace-nowrap pb-0.5 pl-1 text-left text-[12px] font-normal leading-4 text-white">
+              <div
+                className="min-h-[18px] w-[128px] overflow-hidden text-ellipsis whitespace-nowrap pb-0.5 pl-1 text-left text-[12px] font-normal leading-4 text-white"
+                data-cy="series-description-label"
+              >
                 {description}
               </div>
             </TooltipTrigger>
@@ -180,11 +188,19 @@ const Thumbnail = ({
           ></div>
           <div className="flex h-full w-[calc(100%-12px)] flex-col justify-start">
             <div className="flex items-center gap-[7px]">
-              <div className="text-[13px] font-semibold text-white">{modality}</div>
+              <div
+                className="text-[13px] font-semibold text-white"
+                data-cy="series-modality-label"
+              >
+                {modality}
+              </div>
               <Tooltip>
                 <TooltipContent>{description}</TooltipContent>
                 <TooltipTrigger className="w-full overflow-hidden">
-                  <div className="max-w-[160px] overflow-hidden overflow-ellipsis whitespace-nowrap text-left text-[13px] font-normal text-white">
+                  <div
+                    className="max-w-[160px] overflow-hidden overflow-ellipsis whitespace-nowrap text-left text-[13px] font-normal text-white"
+                    data-cy="series-description-label"
+                  >
                     {description}
                   </div>
                 </TooltipTrigger>