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>
2020-09-25 18:58:46 +05:30 · 2020-09-25 18:58:46 +05:30 · 34e782390f
parent 8ad6ecc9a8
commit 34e782390f
31 changed files with 321 additions and 276 deletions
--- a/litmus-portal/frontend/cypress/component/LinearProgressBar.spec.tsx
+++ b/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',
--- a/litmus-portal/frontend/src/components/AdjustedWeights/index.tsx
+++ b/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>
  );
--- a/litmus-portal/frontend/src/components/Header/ProfileDropdownItems.tsx
+++ b/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>
--- a/litmus-portal/frontend/src/components/Header/ProfileDropdownSection.tsx
+++ b/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"
--- a/litmus-portal/frontend/src/components/Header/ProjectListItem.tsx
+++ b/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' }}
--- a/litmus-portal/frontend/src/components/PredifinedWorkflows/index.tsx
+++ b/litmus-portal/frontend/src/components/PredifinedWorkflows/index.tsx
@ -19,23 +19,27 @@ const PredifinedWorkflows: React.FC<PredifinedWorkflowsProps> = ({
      {workflows &&
        workflows.map((w: preDefinedWorkflowData, index: number) =>
          w.isCustom ? (
-            <CustomWorkflowCard
-              handleClick={() => callbackOnSelectWorkflow(index)}
-            />
+            <div key={w.workflowID} data-cy="templatesCard">
+              <CustomWorkflowCard
+                handleClick={() => callbackOnSelectWorkflow(index)}
+              />
+            </div>
          ) : (
-            <CustomCard
-              key={w.workflowID}
-              title={w.title}
-              urlToIcon={w.urlToIcon}
-              provider={w.provider}
-              chaosWkfCRDLink={w.chaosWkfCRDLink}
-              selectedID={w.workflowID}
-              handleClick={() => callbackOnSelectWorkflow(index)}
-              description={w.description}
-              totalRuns={w.totalRuns}
-              gitLink={w.gitLink}
-              workflowID={w.workflowID}
-            />
+            <div key={w.workflowID} data-cy="templatesCard">
+              <CustomCard
+                key={w.workflowID}
+                title={w.title}
+                urlToIcon={w.urlToIcon}
+                provider={w.provider}
+                chaosWkfCRDLink={w.chaosWkfCRDLink}
+                selectedID={w.workflowID}
+                handleClick={() => callbackOnSelectWorkflow(index)}
+                description={w.description}
+                totalRuns={w.totalRuns}
+                gitLink={w.gitLink}
+                workflowID={w.workflowID}
+              />
+            </div>
          )
        )}
    </div>
--- a/litmus-portal/frontend/src/components/ProgressBar/LinearProgressBar/index.tsx
+++ b/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
+      }
    />
  );
 };
--- a/litmus-portal/frontend/src/components/SideBar/index.tsx
+++ b/litmus-portal/frontend/src/components/SideBar/index.tsx
@ -72,15 +72,17 @@ const SideBar: React.FC = () => {
        >
          <HomeIcon />
        </CustomisedListItem>
-        <CustomisedListItem
-          key="workflow"
-          handleClick={() => {
-            history.push('/workflows');
-          }}
-          label="Workflows"
-        >
-          <WorkflowsIcon />
-        </CustomisedListItem>
+        <div data-cy="workflows">
+          <CustomisedListItem
+            key="workflow"
+            handleClick={() => {
+              history.push('/workflows');
+            }}
+            label="Workflows"
+          >
+            <WorkflowsIcon />
+          </CustomisedListItem>
+        </div>
        <CustomisedListItem
          key="community"
          handleClick={() => {
@ -91,15 +93,17 @@ const SideBar: React.FC = () => {
          <CommunityIcon />
        </CustomisedListItem>
        {userRole === 'Owner' && (
-          <CustomisedListItem
-            key="settings"
-            handleClick={() => {
-              history.push('/settings');
-            }}
-            label="Settings"
-          >
-            <SettingsIcon />
-          </CustomisedListItem>
+          <div data-cy="settings">
+            <CustomisedListItem
+              key="settings"
+              handleClick={() => {
+                history.push('/settings');
+              }}
+              label="Settings"
+            >
+              <SettingsIcon />
+            </CustomisedListItem>
+          </div>
        )}
      </List>
    </Drawer>
--- a/litmus-portal/frontend/src/components/WelcomeModal/Stepper.tsx
+++ b/litmus-portal/frontend/src/components/WelcomeModal/Stepper.tsx
@ -203,6 +203,27 @@ const CStepper: React.FC<CStepperProps> = ({ handleModal }) => {
    if (activeStep === 3) {
      return (
        <div className={classes.buttonDiv}>
+          <div data-cy="backButton">
+            <ButtonOutline isDisabled={false} handleClick={handleBack}>
+              <>{t('welcomeModel.button.back')}</>
+            </ButtonOutline>
+          </div>
+          <div data-cy="startButton">
+            <ButtonFilled
+              isPrimary
+              isDisabled={isError.current}
+              handleClick={handleSubmit}
+              data-cy="Start"
+            >
+              <div>{t('welcomeModel.button.letsStart')}</div>
+            </ButtonFilled>
+          </div>
+        </div>
+      );
+    }
+    return (
+      <div className={classes.buttonDiv}>
+        <div data-cy="backButton">
          <ButtonOutline
            isDisabled={false}
            handleClick={handleBack}
@ -210,34 +231,17 @@ const CStepper: React.FC<CStepperProps> = ({ handleModal }) => {
          >
            <>{t('welcomeModel.button.back')}</>
          </ButtonOutline>
+        </div>
+        <div data-cy="startButton">
          <ButtonFilled
            isPrimary
            isDisabled={isError.current}
-            handleClick={handleSubmit}
-            data-cy="Start"
+            handleClick={handleNext}
+            data-cy="Continue"
          >
-            <div>{t('welcomeModel.button.letsStart')}</div>
+            <div>{t('welcomeModel.button.continue')}</div>
          </ButtonFilled>
        </div>
-      );
-    }
-    return (
-      <div className={classes.buttonDiv}>
-        <ButtonOutline
-          isDisabled={false}
-          handleClick={handleBack}
-          data-cy="Back"
-        >
-          <>{t('welcomeModel.button.back')}</>
-        </ButtonOutline>
-        <ButtonFilled
-          isPrimary
-          isDisabled={isError.current}
-          handleClick={handleNext}
-          data-cy="Continue"
-        >
-          <div>{t('welcomeModel.button.continue')}</div>
-        </ButtonFilled>
      </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
--- a/litmus-portal/frontend/src/components/WorkflowCard/CardContent.tsx
+++ b/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 ? (
--- a/litmus-portal/frontend/src/pages/LoginPage/index.tsx
+++ b/litmus-portal/frontend/src/pages/LoginPage/index.tsx
@ -87,52 +87,51 @@ const LoginPage = () => {
          </Typography>
          <form id="login-form" autoComplete="on" onSubmit={handleSubmit}>
            <div className={classes.inputDiv}>
-              <InputField
-                label="Username"
-                value={authData.username}
-                helperText={
-                  validateStartEmptySpacing(authData.username)
-                    ? 'Should not start with an empty space'
-                    : ''
-                }
-                validationError={validateStartEmptySpacing(authData.username)}
-                data-cy="inputEmail"
-                required
-                handleChange={(e) =>
-                  setAuthData({
-                    username: e.target.value,
-                    password: authData.password,
-                  })
-                }
-              />
-              <InputField
-                label="Password"
-                type="password"
-                required
-                value={authData.password}
-                helperText={
-                  isError
-                    ? 'Wrong Credentials - Try again with correct username or password'
-                    : ''
-                }
-                validationError={isError}
-                data-cy="inputPassword"
-                handleChange={(e) =>
-                  setAuthData({
-                    username: authData.username,
-                    password: e.target.value,
-                  })
-                }
-              />
+              <div className={classes.inputValue} data-cy="inputName">
+                <InputField
+                  label="Username"
+                  value={authData.username}
+                  helperText={
+                    validateStartEmptySpacing(authData.username)
+                      ? 'Should not start with an empty space'
+                      : ''
+                  }
+                  validationError={validateStartEmptySpacing(authData.username)}
+                  required
+                  handleChange={(e) =>
+                    setAuthData({
+                      username: e.target.value,
+                      password: authData.password,
+                    })
+                  }
+                />
+              </div>
+              <div className={classes.inputValue} data-cy="inputPassword">
+                <InputField
+                  label="Password"
+                  type="password"
+                  required
+                  value={authData.password}
+                  helperText={
+                    isError
+                      ? 'Wrong Credentials - Try again with correct username or password'
+                      : ''
+                  }
+                  validationError={isError}
+                  handleChange={(e) =>
+                    setAuthData({
+                      username: authData.username,
+                      password: e.target.value,
+                    })
+                  }
+                />
+              </div>
            </div>
            <div className={classes.loginDiv}>
-              <ButtonFilled
-                type="submit"
-                isPrimary
-                data-cy="loginButton"
-                isDisabled={isLoading}
-              >
-                {isLoading ? <Loader size={loaderSize} /> : 'Login'}
+              <ButtonFilled type="submit" isPrimary isDisabled={isLoading}>
+                <div data-cy="loginButton">
+                  {isLoading ? <Loader size={loaderSize} /> : 'Login'}
+                </div>
              </ButtonFilled>
            </div>
          </form>
--- a/litmus-portal/frontend/src/pages/LoginPage/styles.ts
+++ b/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: {
--- a/litmus-portal/frontend/src/pages/Settings/index.tsx
+++ b/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)}
+            />
          ) : (
            <></>
          )}
--- a/litmus-portal/frontend/src/pages/WorkflowDetails/index.tsx
+++ b/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>
--- a/litmus-portal/frontend/src/pages/Workflows/index.tsx
+++ b/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}>
--- a/litmus-portal/frontend/src/views/ChaosWorkflows/BrowseAnalytics/WorkflowRunDetailsTable/TableData.tsx
+++ b/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>
--- a/litmus-portal/frontend/src/views/ChaosWorkflows/BrowseSchedule/ExperimentPoints.tsx
+++ b/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} />
    </>
  );
 };
--- a/litmus-portal/frontend/src/views/ChaosWorkflows/BrowseSchedule/TableData.tsx
+++ b/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>
--- a/litmus-portal/frontend/src/views/ChaosWorkflows/BrowseSchedule/index.tsx
+++ b/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>
--- a/litmus-portal/frontend/src/views/ChaosWorkflows/BrowseSchedule/styles.ts
+++ b/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,
    },
  },
--- a/litmus-portal/frontend/src/views/ChaosWorkflows/BrowseTemplate/Head.tsx
+++ b/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>
--- a/litmus-portal/frontend/src/views/ChaosWorkflows/BrowseWorkflow/TableData.tsx
+++ b/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"
--- a/litmus-portal/frontend/src/views/ChaosWorkflows/BrowseWorkflow/index.tsx
+++ b/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>
              )}
--- a/litmus-portal/frontend/src/views/ChaosWorkflows/BrowseWorkflow/styles.ts
+++ b/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,
    },
  },
--- a/litmus-portal/frontend/src/views/ChaosWorkflows/Templates/index.tsx
+++ b/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);
--- a/litmus-portal/frontend/src/views/CreateWorkflow/ReliabilityScore/ResultTable.tsx
+++ b/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>
--- a/litmus-portal/frontend/src/views/Settings/AccountsTab/AccountSettings/index.tsx
+++ b/litmus-portal/frontend/src/views/Settings/AccountsTab/AccountSettings/index.tsx
@ -124,55 +124,59 @@ const AccountSettings: React.FC = () => {
          <div className={classes.outerPass}>
            <form className={classes.innerPass}>
              {/* Current Password */}
-              <InputField
-                required
-                value={password.currPassword}
-                handleChange={handleCurrPassword('currPassword')}
-                type="password"
-                label="Current Password"
-                validationError={false}
-              />
-
+              <div data-cy="currPassword">
+                <InputField
+                  required
+                  value={password.currPassword}
+                  handleChange={handleCurrPassword('currPassword')}
+                  type="password"
+                  label="Current Password"
+                  validationError={false}
+                />
+              </div>
              {/* New Password */}
-              <InputField
-                required
-                type="password"
-                handleChange={handleNewPassword('newPassword')}
-                success={isSuccess.current}
-                helperText={
-                  validateStartEmptySpacing(password.newPassword)
-                    ? 'Should not start with empty space'
-                    : ''
-                }
-                label="New Password"
-                validationError={validateStartEmptySpacing(
-                  password.newPassword
-                )}
-                value={password.newPassword}
-              />
-
+              <div data-cy="newPassword">
+                <InputField
+                  required
+                  type="password"
+                  handleChange={handleNewPassword('newPassword')}
+                  success={isSuccess.current}
+                  helperText={
+                    validateStartEmptySpacing(password.newPassword)
+                      ? 'Should not start with empty space'
+                      : ''
+                  }
+                  label="New Password"
+                  validationError={validateStartEmptySpacing(
+                    password.newPassword
+                  )}
+                  value={password.newPassword}
+                />
+              </div>
              {/* Confirm new password */}
-              <InputField
-                helperText={
-                  validateConfirmPassword(
+              <div data-cy="confPassword">
+                <InputField
+                  helperText={
+                    validateConfirmPassword(
+                      password.newPassword,
+                      password.confNewPassword
+                    )
+                      ? 'Password is not same'
+                      : ''
+                  }
+                  required
+                  type="password"
+                  handleChange={handleConfPassword('confNewPassword')}
+                  success={isSuccess.current}
+                  label="Confirm Password"
+                  validationError={validateConfirmPassword(
                    password.newPassword,
                    password.confNewPassword
-                  )
-                    ? 'Password is not same'
-                    : ''
-                }
-                required
-                type="password"
-                handleChange={handleConfPassword('confNewPassword')}
-                success={isSuccess.current}
-                label="Confirm Password"
-                validationError={validateConfirmPassword(
-                  password.newPassword,
-                  password.confNewPassword
-                )}
-                value={password.confNewPassword}
-              />
-              <div className={classes.buttonModal}>
+                  )}
+                  value={password.confNewPassword}
+                />
+              </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}
--- a/litmus-portal/frontend/src/views/Settings/AccountsTab/AccountSettings/styles.ts
+++ b/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',
--- a/litmus-portal/frontend/src/views/Settings/AccountsTab/PersonalDetails/index.tsx
+++ b/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,30 +102,32 @@ const PersonalDetails: React.FC = () => {
        />

        <div className={classes.saveButton}>
-          <ButtonFilled
-            isDisabled={!(personaData.fullName.length && !loading)}
-            isPrimary
-            handleClick={() => {
-              setLoading(true);
-              updateDetails({
-                variables: {
-                  user: {
-                    id: data?.getUser.id,
-                    name: personaData.fullName,
-                    email: personaData.email,
+          <div data-cy="save">
+            <ButtonFilled
+              isDisabled={!(personaData.fullName.length && !loading)}
+              isPrimary
+              handleClick={() => {
+                setLoading(true);
+                updateDetails({
+                  variables: {
+                    user: {
+                      id: data?.getUser.id,
+                      name: personaData.fullName,
+                      email: personaData.email,
+                    },
                  },
-                },
-              });
-            }}
-          >
-            {loading ? (
-              <div>
-                <Loader size={20} />
-              </div>
-            ) : (
-              <>Save Changes</>
-            )}
-          </ButtonFilled>
+                });
+              }}
+            >
+              {loading ? (
+                <div>
+                  <Loader size={20} />
+                </div>
+              ) : (
+                <>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}
-                >
-                  Done
-                </Button>
+                <div data-cy="done">
+                  <ButtonFilled
+                    isPrimary
+                    isDisabled={false}
+                    handleClick={handleClose}
+                  >
+                    <Typography>Done</Typography>
+                  </ButtonFilled>
+                </div>
              </div>
            )}
          </Unimodal>
--- a/litmus-portal/frontend/src/views/Settings/UserManagementTab/CreateUser/UserDetails/index.tsx
+++ b/litmus-portal/frontend/src/views/Settings/UserManagementTab/CreateUser/UserDetails/index.tsx
@ -56,40 +56,45 @@ const UserDetails: React.FC<PersonalDetailsProps> = ({
          </div>
          {/* Fields for details including Full name, email, username */}
          <div className={classes.details1}>
-            <InputField
-              required
-              helperText={
-                validateStartEmptySpacing(nameValue)
-                  ? 'Should not start with an empty space'
-                  : ''
-              }
-              value={nameValue}
-              disabled={nameIsDisabled}
-              handleChange={handleNameChange}
-              validationError={validateStartEmptySpacing(nameValue)}
-              label="Full Name"
-            />
-
-            <InputField
-              required
-              helperText={
-                validateEmail(emailValue) ? 'Should be a valid email' : ''
-              }
-              type="email"
-              value={emailValue}
-              disabled={emailIsDisabled}
-              handleChange={handleEmailChange}
-              validationError={validateEmail(emailValue)}
-              label="Email Address"
-            />
+            <div data-cy="InputName">
+              <InputField
+                required
+                helperText={
+                  validateStartEmptySpacing(nameValue)
+                    ? 'Should not start with an empty space'
+                    : ''
+                }
+                value={nameValue}
+                disabled={nameIsDisabled}
+                handleChange={handleNameChange}
+                validationError={validateStartEmptySpacing(nameValue)}
+                label="Full Name"
+              />
+            </div>
+            <div data-cy="InputEmail">
+              <InputField
+                required
+                helperText={
+                  validateEmail(emailValue) ? 'Should be a valid email' : ''
+                }
+                type="email"
+                value={emailValue}
+                disabled={emailIsDisabled}
+                handleChange={handleEmailChange}
+                validationError={validateEmail(emailValue)}
+                label="Email Address"
+              />
+            </div>
            {/* Username is not editable normal user */}
-            <InputField
-              value={userValue}
-              handleChange={handleUserChange}
-              label="Username"
-              disabled={usernameIsDisabled}
-              validationError={false}
-            />
+            <div data-cy="username">
+              <InputField
+                value={userValue}
+                handleChange={handleUserChange}
+                label="Username"
+                disabled={usernameIsDisabled}
+                validationError={false}
+              />
+            </div>
          </div>
        </div>
      </form>
--- a/litmus-portal/frontend/src/views/Settings/UserManagementTab/UserManagement/index.tsx
+++ b/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>