chore(litmus-portal): Added unique attributes in frontend for E2E testing and minor CSS changes (#2111)

* Added the unique attributes for E2E testing

Signed-off-by: Amit Kumar Das <amitkumar.das@mayadata.io>

* Updated the LinearProgressBar component and minor css fixes

Signed-off-by: Amit Kumar Das <amitkumar.das@mayadata.io>

* Added keys to card components

Signed-off-by: Amit Kumar Das <amitkumar.das@mayadata.io>

litmus-portal/frontend/cypress/component/LinearProgressBar.spec.tsx

@@ -5,7 +5,7 @@ import LinearProgressBar from '../../src/components/ProgressBar/LinearProgressBa
 
 describe('Linear Progressbar Testing', () => {
   it('Progressbar stroke for value 3', () => {
-    mount(<LinearProgressBar value={2} />);
+    mount(<LinearProgressBar width={1.5} value={2} />);
     cy.get('.rc-progress-line-path').should(
       'have.css',
       'stroke-dasharray',
@@ -13,7 +13,7 @@ describe('Linear Progressbar Testing', () => {
     );
   });
   it('Progressbar stroke for value 8', () => {
-    mount(<LinearProgressBar value={8} />);
+    mount(<LinearProgressBar width={1.5} value={8} />);
     cy.get('.rc-progress-line-path').should(
       'have.css',
       'stroke-dasharray',
@@ -21,7 +21,7 @@ describe('Linear Progressbar Testing', () => {
     );
   });
   it('Progressbar stroke for value 6', () => {
-    mount(<LinearProgressBar value={6} />);
+    mount(<LinearProgressBar width={1.5} value={6} />);
     cy.get('.rc-progress-line-path').should(
       'have.css',
       'stroke-dasharray',
@@ -29,7 +29,7 @@ describe('Linear Progressbar Testing', () => {
     );
   });
   it('Progressbar stroke if default', () => {
-    mount(<LinearProgressBar value={8} isDefault />);
+    mount(<LinearProgressBar width={1.5} value={8} isDefault />);
     cy.get('.rc-progress-line-path').should(
       'have.css',
       'stroke-dasharray',

litmus-portal/frontend/src/components/AdjustedWeights/index.tsx

@@ -66,7 +66,7 @@ const AdjustedWeights: React.FC<AdjustedWeightsProps> = ({
       </div>
 
       <div>
-        <LinearProgressBar value={testValue} />
+        <LinearProgressBar width={1} value={testValue} />
       </div>
     </div>
   );

litmus-portal/frontend/src/components/Header/ProfileDropdownItems.tsx

@@ -145,6 +145,7 @@ const ProfileInfoDropdownItems: React.FC<ProfileInfoDropdownItemProps> = ({
 
           <div className={classes.userInfo}>
             <Typography
+              data-cy="name-header"
               className={classes.userName}
               component="span"
               color="textPrimary"
@@ -152,6 +153,7 @@ const ProfileInfoDropdownItems: React.FC<ProfileInfoDropdownItemProps> = ({
               {name}
             </Typography>
             <Typography
+              data-cy="email-header"
               className={classes.userEmail}
               variant="body1"
               component="span"
@@ -175,6 +177,7 @@ const ProfileInfoDropdownItems: React.FC<ProfileInfoDropdownItemProps> = ({
             )}
 
             <Button
+              data-cy="logout"
               disabled={loggedOut}
               size="small"
               onClick={logOut}
@@ -187,7 +190,7 @@ const ProfileInfoDropdownItems: React.FC<ProfileInfoDropdownItemProps> = ({
         <Divider className={classes.dividerTop} />
         <List dense className={classes.tabContainerProfileDropdownItem}>
           {switchableProjects.length === 0 ? (
-            <ListItem>
+            <ListItem data-cy="project">
               <ListItemText>
                 {t('header.profileDropdown.noProjects')}
               </ListItemText>

litmus-portal/frontend/src/components/Header/ProfileDropdownSection.tsx

@@ -51,9 +51,10 @@ const ProfileDropdownSection: React.FC<ProfileInfoDropdownSectionProps> = ({
         </Box>
 
         <Box p={1}>
-          <Typography>
+          <Typography data-cy="full-name">
             {name}{' '}
             <IconButton
+              data-cy="header-dropdown"
               edge="end"
               ref={profileMenuRef}
               aria-label="account of current user"

litmus-portal/frontend/src/components/Header/ProjectListItem.tsx

@@ -36,6 +36,7 @@ const ProjectListItem: React.FC<ProjectListItemProps> = ({
 
   return (
     <ListItem
+      data-cy="project"
       divider={divider}
       onClick={selectProject}
       style={{ backgroundColor: projSelected ? '#109B67' : 'white' }}

litmus-portal/frontend/src/components/PredifinedWorkflows/index.tsx

@@ -19,10 +19,13 @@ const PredifinedWorkflows: React.FC<PredifinedWorkflowsProps> = ({
       {workflows &&
         workflows.map((w: preDefinedWorkflowData, index: number) =>
           w.isCustom ? (
+            <div key={w.workflowID} data-cy="templatesCard">
               <CustomWorkflowCard
                 handleClick={() => callbackOnSelectWorkflow(index)}
               />
+            </div>
           ) : (
+            <div key={w.workflowID} data-cy="templatesCard">
               <CustomCard
                 key={w.workflowID}
                 title={w.title}
@@ -36,6 +39,7 @@ const PredifinedWorkflows: React.FC<PredifinedWorkflowsProps> = ({
                 gitLink={w.gitLink}
                 workflowID={w.workflowID}
               />
+            </div>
           )
         )}
     </div>

litmus-portal/frontend/src/components/ProgressBar/LinearProgressBar/index.tsx

@@ -1,41 +1,35 @@
 import { Line } from 'rc-progress';
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import { useTheme } from '@material-ui/core/styles';
 
 interface LinearProgressBarProps {
   value: number | number[];
   isDefault?: boolean;
+  width: number;
 }
 
 const LinearProgressBar: React.FC<LinearProgressBarProps> = ({
   value,
   isDefault,
+  width,
 }) => {
-  const [color, setColor] = useState(' ');
-  const width: number = 2;
   const resultValue = (value as number) * 10;
   const theme = useTheme();
-  const changeColor = () => {
-    if (resultValue <= 30) {
-      return setColor(theme.palette.error.dark);
-    }
-    if (resultValue <= 60) {
-      return setColor(theme.palette.warning.main);
-    }
-    return setColor(theme.palette.primary.dark);
-  };
-  useEffect(() => {
-    if (isDefault === true) {
-      return setColor(theme.palette.secondary.dark);
-    }
-    return changeColor();
-  }, [resultValue]);
+
   return (
     <Line
       percent={resultValue}
       strokeWidth={width}
       trailWidth={width}
-      strokeColor={color}
+      strokeColor={
+        isDefault
+          ? theme.palette.secondary.dark
+          : resultValue > 30 && resultValue <= 60
+          ? theme.palette.warning.main
+          : resultValue > 60
+          ? theme.palette.primary.dark
+          : theme.palette.error.dark
+      }
     />
   );
 };

litmus-portal/frontend/src/components/SideBar/index.tsx

@@ -72,6 +72,7 @@ const SideBar: React.FC = () => {
         >
           <HomeIcon />
         </CustomisedListItem>
+        <div data-cy="workflows">
           <CustomisedListItem
             key="workflow"
             handleClick={() => {
@@ -81,6 +82,7 @@ const SideBar: React.FC = () => {
           >
             <WorkflowsIcon />
           </CustomisedListItem>
+        </div>
         <CustomisedListItem
           key="community"
           handleClick={() => {
@@ -91,6 +93,7 @@ const SideBar: React.FC = () => {
           <CommunityIcon />
         </CustomisedListItem>
         {userRole === 'Owner' && (
+          <div data-cy="settings">
             <CustomisedListItem
               key="settings"
               handleClick={() => {
@@ -100,6 +103,7 @@ const SideBar: React.FC = () => {
             >
               <SettingsIcon />
             </CustomisedListItem>
+          </div>
         )}
       </List>
     </Drawer>

litmus-portal/frontend/src/components/WelcomeModal/Stepper.tsx

@@ -203,13 +203,12 @@ const CStepper: React.FC<CStepperProps> = ({ handleModal }) => {
     if (activeStep === 3) {
       return (
         <div className={classes.buttonDiv}>
-          <ButtonOutline
-            isDisabled={false}
-            handleClick={handleBack}
-            data-cy="Back"
-          >
+          <div data-cy="backButton">
+            <ButtonOutline isDisabled={false} handleClick={handleBack}>
               <>{t('welcomeModel.button.back')}</>
             </ButtonOutline>
+          </div>
+          <div data-cy="startButton">
             <ButtonFilled
               isPrimary
               isDisabled={isError.current}
@@ -219,10 +218,12 @@ const CStepper: React.FC<CStepperProps> = ({ handleModal }) => {
               <div>{t('welcomeModel.button.letsStart')}</div>
             </ButtonFilled>
           </div>
+        </div>
       );
     }
     return (
       <div className={classes.buttonDiv}>
+        <div data-cy="backButton">
           <ButtonOutline
             isDisabled={false}
             handleClick={handleBack}
@@ -230,6 +231,8 @@ const CStepper: React.FC<CStepperProps> = ({ handleModal }) => {
           >
             <>{t('welcomeModel.button.back')}</>
           </ButtonOutline>
+        </div>
+        <div data-cy="startButton">
           <ButtonFilled
             isPrimary
             isDisabled={isError.current}
@@ -239,6 +242,7 @@ const CStepper: React.FC<CStepperProps> = ({ handleModal }) => {
             <div>{t('welcomeModel.button.continue')}</div>
           </ButtonFilled>
         </div>
+      </div>
     );
   };
 
@@ -374,7 +378,7 @@ const CStepper: React.FC<CStepperProps> = ({ handleModal }) => {
           <ModalPage
             renderMenu={
               <div className={classes.passwordSetterDiv}>
-                <div className={classes.inputArea} data-cy="InputName">
+                <div className={classes.inputArea} data-cy="InputEmail">
                   <InputField
                     label={t('welcomeModel.case-3.label')}
                     required

litmus-portal/frontend/src/components/WorkflowCard/CardContent.tsx

@@ -98,7 +98,9 @@ const CardContent: React.FC<preDefinedWorkflowData> = ({
             <div className={classes.noImage}>Image</div>
           )}
           <div>
-            <div className={classes.title}>{title}</div>
+            <div data-cy="expName" className={classes.title}>
+              {title}
+            </div>
             <div className={classes.provider}>Contributed by {provider}</div>
           </div>
           {description ? (

litmus-portal/frontend/src/pages/LoginPage/index.tsx

@@ -87,6 +87,7 @@ const LoginPage = () => {
           </Typography>
           <form id="login-form" autoComplete="on" onSubmit={handleSubmit}>
             <div className={classes.inputDiv}>
+              <div className={classes.inputValue} data-cy="inputName">
                 <InputField
                   label="Username"
                   value={authData.username}
@@ -96,7 +97,6 @@ const LoginPage = () => {
                       : ''
                   }
                   validationError={validateStartEmptySpacing(authData.username)}
-                data-cy="inputEmail"
                   required
                   handleChange={(e) =>
                     setAuthData({
@@ -105,6 +105,8 @@ const LoginPage = () => {
                     })
                   }
                 />
+              </div>
+              <div className={classes.inputValue} data-cy="inputPassword">
                 <InputField
                   label="Password"
                   type="password"
@@ -116,7 +118,6 @@ const LoginPage = () => {
                       : ''
                   }
                   validationError={isError}
-                data-cy="inputPassword"
                   handleChange={(e) =>
                     setAuthData({
                       username: authData.username,
@@ -125,14 +126,12 @@ const LoginPage = () => {
                   }
                 />
               </div>
+            </div>
             <div className={classes.loginDiv}>
-              <ButtonFilled
-                type="submit"
-                isPrimary
-                data-cy="loginButton"
-                isDisabled={isLoading}
-              >
+              <ButtonFilled type="submit" isPrimary isDisabled={isLoading}>
+                <div data-cy="loginButton">
                   {isLoading ? <Loader size={loaderSize} /> : 'Login'}
+                </div>
               </ButtonFilled>
             </div>
           </form>

litmus-portal/frontend/src/pages/LoginPage/styles.ts

@@ -59,7 +59,11 @@ const useStyles = makeStyles((theme) => ({
     display: 'flex',
     flexDirection: 'column',
     marginTop: theme.spacing(1),
-    marginLeft: theme.spacing(-2),
+    marginLeft: theme.spacing(-2.1),
+  },
+
+  inputValue: {
+    width: '25rem',
   },
 
   linkForgotPass: {

litmus-portal/frontend/src/pages/Settings/index.tsx

@@ -72,10 +72,14 @@ const Settings: React.FC = () => {
             },
           }}
         >
-          <Tab label="My Account" {...tabProps(0)} />
-          <Tab label="Team" {...tabProps(1)} />
+          <Tab data-cy="my-account" label="My Account" {...tabProps(0)} />
+          <Tab data-cy="teaming" label="Team" {...tabProps(1)} />
           {userData.username === 'admin' ? (
-            <Tab label="User Management" {...tabProps(2)} />
+            <Tab
+              data-cy="user-management"
+              label="User Management"
+              {...tabProps(2)}
+            />
           ) : (
             <></>
           )}

litmus-portal/frontend/src/pages/WorkflowDetails/index.tsx

@@ -80,7 +80,7 @@ const WorkflowDetails: React.FC = () => {
       {workflow ? (
         <div className={classes.root}>
           <div className={classes.workflowGraph}>
-            <Typography className={classes.heading}>
+            <Typography data-cy="wfName" className={classes.heading}>
               {workflow.workflow_name}
             </Typography>
             <Typography>{t('workflowDetails.detailedLog')}</Typography>

litmus-portal/frontend/src/pages/Workflows/index.tsx

@@ -39,7 +39,7 @@ const Workflows = () => {
               isPrimary={false}
               handleClick={() => history.push('/create-workflow')}
             >
-              <>Schedule a workflow</>
+              <Typography>Schedule a workflow</Typography>
             </ButtonFilled>
           </div>
         </div>
@@ -55,10 +55,10 @@ const Workflows = () => {
           }}
           variant="fullWidth"
         >
-          <StyledTab label="Browse workflows" />
-          <StyledTab label="Schedules" />
-          <StyledTab label="Templates" />
-          <StyledTab label="Analytics" />
+          <StyledTab label="Browse workflows" data-cy="browseWorkflow" />
+          <StyledTab label="Schedules" data-cy="browseSchedule" />
+          <StyledTab label="Templates" data-cy="templates" />
+          <StyledTab label="Analytics" data-cy="analyticsWorkflow" />
         </Tabs>
       </AppBar>
       <TabPanel value={workflowTabValue} index={0}>

litmus-portal/frontend/src/views/ChaosWorkflows/BrowseAnalytics/WorkflowRunDetailsTable/TableData.tsx

@@ -66,7 +66,7 @@ const TableData: React.FC<TableDataProps> = ({ data }) => {
         <div className={classes.reliabiltyData}>
           <Typography>{data.resulting_points} Points</Typography>
           <div className={classes.progressBar}>
-            <LinearProgressBar value={data.resulting_points ?? 0} />
+            <LinearProgressBar width={2} value={data.resulting_points ?? 0} />
           </div>
         </div>
       </TableCell>

litmus-portal/frontend/src/views/ChaosWorkflows/BrowseSchedule/ExperimentPoints.tsx

@@ -21,7 +21,7 @@ const ExperimentPoints: React.FC<ExperimentPointsProps> = ({
           {weight === 1 || 0 ? `${weight} point` : `${weight} points`}
         </Typography>
       </div>
-      <LinearProgressBar value={weight} />
+      <LinearProgressBar width={1} value={weight} />
     </>
   );
 };

litmus-portal/frontend/src/views/ChaosWorkflows/BrowseSchedule/TableData.tsx

@@ -134,6 +134,7 @@ const TableData: React.FC<TableDataProps> = ({ data, deleteRow }) => {
           aria-haspopup="true"
           onClick={handleClick}
           className={classes.optionBtn}
+          data-cy="browseScheduleOptions"
         >
           <MoreVertIcon />
         </IconButton>
@@ -154,7 +155,7 @@ const TableData: React.FC<TableDataProps> = ({ data, deleteRow }) => {
                 alt="Delete Schedule"
                 className={classes.btnImg}
               />
-              <Typography className={classes.btnText}>
+              <Typography data-cy="deleteSchedule" className={classes.btnText}>
                 Delete Schedule
               </Typography>
             </div>

litmus-portal/frontend/src/views/ChaosWorkflows/BrowseSchedule/index.tsx

@@ -186,7 +186,10 @@ const BrowseSchedule = () => {
       </section>
       <section className="table section">
         {/* Table Header */}
-        <TableContainer className={classes.tableMain}>
+        <TableContainer
+          data-cy="browseScheduleTable"
+          className={classes.tableMain}
+        >
           <Table stickyHeader aria-label="simple table">
             <TableHead>
               <TableRow className={classes.tableHead}>
@@ -296,7 +299,7 @@ const BrowseSchedule = () => {
                 </TableRow>
               ) : error ? (
                 <TableRow>
-                  <TableCell colSpan={7}>
+                  <TableCell data-cy="browseScheduleError" colSpan={7}>
                     <Typography align="center">Unable to fetch data</Typography>
                   </TableCell>
                 </TableRow>
@@ -308,13 +311,16 @@ const BrowseSchedule = () => {
                       paginationData.rowsPerPage
                   )
                   .map((data: ScheduleWorkflow) => (
-                    <TableRow key={data.workflow_id}>
+                    <TableRow
+                      data-cy="browseScheduleData"
+                      key={data.workflow_id}
+                    >
                       <TableData data={data} deleteRow={deleteRow} />
                     </TableRow>
                   ))
               ) : (
                 <TableRow>
-                  <TableCell colSpan={7}>
+                  <TableCell data-cy="browseScheduleNoData" colSpan={7}>
                     <Typography align="center">No records available</Typography>
                   </TableCell>
                 </TableRow>

litmus-portal/frontend/src/views/ChaosWorkflows/BrowseSchedule/styles.ts

@@ -51,7 +51,7 @@ const useStyles = makeStyles((theme) => ({
       fontWeight: 'bold',
       fontSize: 13,
     },
-    '& *': {
+    '& th': {
       backgroundColor: theme.palette.common.white,
     },
   },

litmus-portal/frontend/src/views/ChaosWorkflows/BrowseTemplate/Head.tsx

@@ -15,7 +15,7 @@ const Head: React.FC<HeadProps> = ({ image, title, details }) => {
     <div className={classes.flexRow}>
       <img src={image} alt="workflowIcon" className={classes.bgIcon} />
       <div className={classes.body}>
-        <Typography className={classes.headerText}>
+        <Typography data-cy="expName" className={classes.headerText}>
           {/* Converting 'some-experiment' to 'Some Experiment' using capitalize utility */}
           {title?.split('-').map((text) => `${capitalize(text)} `)}
         </Typography>

litmus-portal/frontend/src/views/ChaosWorkflows/BrowseWorkflow/TableData.tsx

@@ -49,7 +49,7 @@ const TableData: React.FC<TableDataProps> = ({ data, exeData }) => {
         <CustomStatus status={exeData.phase} />
       </TableCell>
       <TableCell className={classes.workflowNameData}>
-        <Typography>
+        <Typography data-cy="workflowName">
           <strong>{data.workflow_name}</strong>
         </Typography>
       </TableCell>
@@ -66,7 +66,7 @@ const TableData: React.FC<TableDataProps> = ({ data, exeData }) => {
                 Overall RR: <span className={classes.failed}>0%</span>
               </Typography>
               <div className={classes.progressBar}>
-                <LinearProgressBar value={0} />
+                <LinearProgressBar width={2} value={0} />
               </div>
             </>
           ) : (
@@ -75,7 +75,7 @@ const TableData: React.FC<TableDataProps> = ({ data, exeData }) => {
                 Overall RR: <span className={classes.success}>100%</span>
               </Typography>
               <div className={classes.progressBar}>
-                <LinearProgressBar value={100} />
+                <LinearProgressBar width={2} value={100} />
               </div>
             </>
           )}
@@ -96,6 +96,7 @@ const TableData: React.FC<TableDataProps> = ({ data, exeData }) => {
           aria-haspopup="true"
           onClick={handleClick}
           className={classes.optionBtn}
+          data-cy="browseWorkflowOptions"
         >
           <MoreVertIcon />
         </IconButton>
@@ -112,7 +113,7 @@ const TableData: React.FC<TableDataProps> = ({ data, exeData }) => {
               history.push(`/workflows/details/${data.workflow_run_id}`)
             }
           >
-            <div className={classes.expDiv}>
+            <div className={classes.expDiv} data-cy="workflowDetails">
               <img
                 src="/icons/show-workflow.svg"
                 alt="Display Workflow"
@@ -129,7 +130,7 @@ const TableData: React.FC<TableDataProps> = ({ data, exeData }) => {
               history.push(`/workflows/analytics/${data.workflow_id}`)
             }
           >
-            <div className={classes.expDiv}>
+            <div className={classes.expDiv} data-cy="workflowAnalytics">
               <img
                 src="/icons/show-analytics.svg"
                 alt="Display Analytics"

litmus-portal/frontend/src/views/ChaosWorkflows/BrowseWorkflow/index.tsx

@@ -258,7 +258,7 @@ const BrowseWorkflow = () => {
       return <></>;
     }
     return (
-      <TableRow key={dataRow.workflow_run_id}>
+      <TableRow data-cy="browseWorkflowData" key={dataRow.workflow_run_id}>
         <TableData data={dataRow} exeData={exe_data} />
       </TableRow>
     );
@@ -285,7 +285,10 @@ const BrowseWorkflow = () => {
         />
       </section>
       <section className="table section">
-        <TableContainer className={classes.tableMain}>
+        <TableContainer
+          data-cy="browseWorkflowTable"
+          className={classes.tableMain}
+        >
           <Table stickyHeader aria-label="simple table">
             <TableHead className={classes.tableHead}>
               <TableRow>
@@ -423,7 +426,9 @@ const BrowseWorkflow = () => {
               {error ? (
                 <TableRow>
                   <TableCell colSpan={7}>
-                    <Typography align="center">Unable to fetch data</Typography>
+                    <Typography data-cy="browseWorkflowError" align="center">
+                      Unable to fetch data
+                    </Typography>
                   </TableCell>
                 </TableRow>
               ) : filteredData && filteredData.length ? (
@@ -437,7 +442,9 @@ const BrowseWorkflow = () => {
               ) : (
                 <TableRow>
                   <TableCell colSpan={7}>
-                    <Typography align="center">No records available</Typography>
+                    <Typography data-cy="browseWorkflowNoData" align="center">
+                      No records available
+                    </Typography>
                   </TableCell>
                 </TableRow>
               )}

litmus-portal/frontend/src/views/ChaosWorkflows/BrowseWorkflow/styles.ts

@@ -66,8 +66,6 @@ const useStyles = makeStyles((theme) => ({
     '& th': {
       fontWeight: 'bold',
       fontSize: 13,
-    },
-    '& *': {
       backgroundColor: theme.palette.common.white,
     },
   },

litmus-portal/frontend/src/views/ChaosWorkflows/Templates/index.tsx

@@ -61,7 +61,7 @@ const Templates = () => {
           </div>
           <Typography className={classes.headerSize}>Sort</Typography>
         </div> */}
-      <div className={classes.predefinedCards}>
+      <div data-cy="templatesPage" className={classes.predefinedCards}>
         <PredifinedWorkflows
           callbackOnSelectWorkflow={(index: number) => {
             selectWorkflow(index);

litmus-portal/frontend/src/views/CreateWorkflow/ReliabilityScore/ResultTable.tsx

@@ -106,7 +106,7 @@ const ResultTable: React.FC<ResultModalProps> = ({ testValue, testNames }) => {
                     &nbsp; points
                     <br />
                     <div className={classes.progressBar}>
-                      <LinearProgressBar value={row.weight} />
+                      <LinearProgressBar width={2} value={row.weight} />
                     </div>
                   </TableCell>
                   <TableCell align="left" className={classes.tablePoints}>
@@ -114,7 +114,7 @@ const ResultTable: React.FC<ResultModalProps> = ({ testValue, testNames }) => {
                     &nbsp; points
                     <br />
                     <div className={classes.progressBar}>
-                      <LinearProgressBar value={row.points} />
+                      <LinearProgressBar width={2} value={row.points} />
                     </div>
                   </TableCell>
                 </TableRow>

litmus-portal/frontend/src/views/Settings/AccountsTab/AccountSettings/index.tsx

@@ -124,6 +124,7 @@ const AccountSettings: React.FC = () => {
           <div className={classes.outerPass}>
             <form className={classes.innerPass}>
               {/* Current Password */}
+              <div data-cy="currPassword">
                 <InputField
                   required
                   value={password.currPassword}
@@ -132,8 +133,9 @@ const AccountSettings: React.FC = () => {
                   label="Current Password"
                   validationError={false}
                 />
-
+              </div>
               {/* New Password */}
+              <div data-cy="newPassword">
                 <InputField
                   required
                   type="password"
@@ -150,8 +152,9 @@ const AccountSettings: React.FC = () => {
                   )}
                   value={password.newPassword}
                 />
-
+              </div>
               {/* Confirm new password */}
+              <div data-cy="confPassword">
                 <InputField
                   helperText={
                     validateConfirmPassword(
@@ -172,7 +175,8 @@ const AccountSettings: React.FC = () => {
                   )}
                   value={password.confNewPassword}
                 />
-              <div className={classes.buttonModal}>
+              </div>
+              <div data-cy="change-password" className={classes.buttonModal}>
                 <ButtonFilled
                   data-cy="button"
                   isPrimary
@@ -211,7 +215,7 @@ const AccountSettings: React.FC = () => {
                         Error: {error}
                       </Typography>
                     </div>
-                    <div className={classes.buttonModal}>
+                    <div data-cy="done" className={classes.buttonModal}>
                       <ButtonFilled
                         isPrimary
                         isDisabled={false}
@@ -235,7 +239,7 @@ const AccountSettings: React.FC = () => {
                         account
                       </Typography>
                     </div>
-                    <div className={classes.buttonModal}>
+                    <div data-cy="done" className={classes.buttonModal}>
                       <ButtonFilled
                         isPrimary
                         isDisabled={false}

litmus-portal/frontend/src/views/Settings/AccountsTab/AccountSettings/styles.ts

@@ -94,6 +94,7 @@ const useStyles = makeStyles((theme: Theme) => ({
 
   buttonModal: {
     marginTop: theme.spacing(3.75),
+    width: '55%',
   },
   textSecondError: {
     width: '27.5rem',

litmus-portal/frontend/src/views/Settings/AccountsTab/PersonalDetails/index.tsx

@@ -1,5 +1,5 @@
 import { useMutation, useQuery } from '@apollo/client';
-import { Button, Typography } from '@material-ui/core';
+import { Typography } from '@material-ui/core';
 import React, { useState } from 'react';
 import { useSelector } from 'react-redux';
 import ButtonFilled from '../../../../components/Button/ButtonFilled';
@@ -102,6 +102,7 @@ const PersonalDetails: React.FC = () => {
         />
 
         <div className={classes.saveButton}>
+          <div data-cy="save">
             <ButtonFilled
               isDisabled={!(personaData.fullName.length && !loading)}
               isPrimary
@@ -126,6 +127,7 @@ const PersonalDetails: React.FC = () => {
                 <>Save Changes</>
               )}
             </ButtonFilled>
+          </div>
           <Unimodal isOpen={open} handleClose={handleClose} hasCloseBtn>
             {error.length ? (
               <div className={classes.errDiv}>
@@ -141,7 +143,7 @@ const PersonalDetails: React.FC = () => {
                     Error: {error}
                   </Typography>
                 </div>
-                <div className={classes.buttonModal}>
+                <div data-cy="done" className={classes.buttonModal}>
                   <ButtonFilled
                     isPrimary
                     isDisabled={false}
@@ -164,14 +166,15 @@ const PersonalDetails: React.FC = () => {
                     Changes took effect
                   </Typography>
                 </div>
-                <Button
-                  data-cy="closeButton"
-                  variant="contained"
-                  className={classes.button}
-                  onClick={handleClose}
+                <div data-cy="done">
+                  <ButtonFilled
+                    isPrimary
+                    isDisabled={false}
+                    handleClick={handleClose}
                   >
-                  Done
-                </Button>
+                    <Typography>Done</Typography>
+                  </ButtonFilled>
+                </div>
               </div>
             )}
           </Unimodal>

litmus-portal/frontend/src/views/Settings/UserManagementTab/CreateUser/UserDetails/index.tsx

@@ -56,6 +56,7 @@ const UserDetails: React.FC<PersonalDetailsProps> = ({
           </div>
           {/* Fields for details including Full name, email, username */}
           <div className={classes.details1}>
+            <div data-cy="InputName">
               <InputField
                 required
                 helperText={
@@ -69,7 +70,8 @@ const UserDetails: React.FC<PersonalDetailsProps> = ({
                 validationError={validateStartEmptySpacing(nameValue)}
                 label="Full Name"
               />
-
+            </div>
+            <div data-cy="InputEmail">
               <InputField
                 required
                 helperText={
@@ -82,7 +84,9 @@ const UserDetails: React.FC<PersonalDetailsProps> = ({
                 validationError={validateEmail(emailValue)}
                 label="Email Address"
               />
+            </div>
             {/* Username is not editable normal user */}
+            <div data-cy="username">
               <InputField
                 value={userValue}
                 handleChange={handleUserChange}
@@ -92,6 +96,7 @@ const UserDetails: React.FC<PersonalDetailsProps> = ({
               />
             </div>
           </div>
+        </div>
       </form>
     </div>
   );

litmus-portal/frontend/src/views/Settings/UserManagementTab/UserManagement/index.tsx

@@ -213,12 +213,11 @@ const UserManagement: React.FC = () => {
                       </FormControl>
                     </div>
                   </div>
-                  <div>
+                  <div data-cy="createUser">
                     <ButtonFilled
                       handleClick={() => {
                         setShowDiv(true);
                       }}
-                      data-cy="gotItButton"
                       isPrimary
                     >
                       <div>Create new user</div>