diff --git a/frontend/src/components/common/ConfirmationDialog.jsx b/frontend/src/components/common/ConfirmationDialog.jsx
index f07a033..d842a89 100644
--- a/frontend/src/components/common/ConfirmationDialog.jsx
+++ b/frontend/src/components/common/ConfirmationDialog.jsx
@@ -1,3 +1,4 @@
+/* eslint-disable react/prop-types */
 /* eslint-disable no-unused-vars */
 // frontend/src/components/common/ConfirmationDialog.jsx
 import React from 'react';
@@ -17,7 +18,10 @@ const ConfirmationDialog = ({
     message = "Are you sure you want to proceed? This action cannot be undone.", // Default message
     confirmText = "Confirm", // Default confirm button text
     cancelText = "Cancel", // Default cancel button text
-    isProcessing = false // Optional: disable buttons while processing confirm action
+    isProcessing = false, // Optional: disable buttons while processing confirm action
+    dialogTestId = "confirmation-dialog",
+    confirmButtonTestId = "confirmation-dialog-confirm-button",
+    cancelButtonTestId = "confirmation-dialog-cancel-button"
 }) => {
 
     return (
@@ -26,6 +30,7 @@ const ConfirmationDialog = ({
             onClose={() => !isProcessing && onClose()} // Prevent closing while processing
             aria-labelledby="confirmation-dialog-title"
             aria-describedby="confirmation-dialog-description"
+            data-testid={dialogTestId} // <<< ADDED TEST ID
         >
             <DialogTitle id="confirmation-dialog-title">
                 {title}
@@ -36,7 +41,7 @@ const ConfirmationDialog = ({
                 </DialogContentText>
             </DialogContent>
             <DialogActions>
-                <Button onClick={onClose} disabled={isProcessing}>
+                <Button onClick={onClose} disabled={isProcessing} data-testid={cancelButtonTestId}>
                     {cancelText}
                 </Button>
                  {/* Make confirm button stand out, often uses primary or error color */}
@@ -46,6 +51,7 @@ const ConfirmationDialog = ({
                     variant="contained" // Make it more prominent
                     autoFocus // Focus on confirm by default
                     disabled={isProcessing}
+                    data-testid={confirmButtonTestId}
                 >
                     {isProcessing ? "Processing..." : confirmText}
                 </Button>
diff --git a/frontend/src/components/common/EditableField.jsx b/frontend/src/components/common/EditableField.jsx
index 37bf383..966e6c4 100644
--- a/frontend/src/components/common/EditableField.jsx
+++ b/frontend/src/components/common/EditableField.jsx
@@ -8,6 +8,7 @@ import CheckIcon from '@mui/icons-material/Check';
 import CloseIcon from '@mui/icons-material/Close';
 
 const EditableField = ({
+  testIdPrefix, // Optional: Prefix for test IDs (e.g., "student-name")
   label,                // Label for the TextField in edit mode AND display mode now
   value,                // The current value to display
   onSave,               // Async function to call when saving (receives new value)
@@ -46,9 +47,12 @@ const EditableField = ({
     }
   };
 
+  // Helper function to generate test ID only if prefix is provided
+  const addTestId = (suffix) => (testIdPrefix ? { [`data-testid`]: `${testIdPrefix}-${suffix}` } : {});
+
   return (
     // Container - align items to the start (top) for label
-    <Box sx={{ display: 'flex', alignItems: 'flex-start', gap: 1, minHeight: '40px', width: '100%', ...containerSx }}>
+    <Box sx={{ display: 'flex', alignItems: 'flex-start', gap: 1, minHeight: '40px', width: '100%', ...containerSx }} {...addTestId('container')}>
       {!isEditing ? (
         // --- MODIFIED Display Mode ---
          <>
@@ -68,15 +72,15 @@ const EditableField = ({
                          color: !value ? 'text.secondary' : 'inherit',
                          // Apply word break for safety, although less likely needed for single-line fields
                          overflowWrap: 'break-word',
-                         lineHeight: 1.4 // Adjust line height if needed
-                    }}
+                         lineHeight: 1.4}} // Adjust line height if needed
+                         {...addTestId('display')} // <<< ADDED TEST ID FOR DISPLAY VALUE
                 >
                      {/* Use value, fallback to emptyText. Placeholder less relevant here */}
                      {value || emptyText}
                  </Typography>
              </Box>
              {/* Edit Button */}
-             <IconButton size="small" onClick={handleEditClick} aria-label={`Edit ${label}`} disabled={isSaving} sx={{mt: 0.5 /* Adjust vertical alignment if needed */}}>
+             <IconButton size="small" onClick={handleEditClick} aria-label={`Edit ${label}`} disabled={isSaving} sx={{mt: 0.5 /* Adjust vertical alignment if needed */}} {...addTestId('edit-button')}>
                  <EditIcon fontSize="small" />
              </IconButton>
          </>
@@ -95,11 +99,15 @@ const EditableField = ({
             rows={multiline ? rows : 1}
             {...textFieldProps}
             disabled={isSaving}
+             // Add test ID to the TextField wrapper - Cypress can find input inside
+            {...addTestId('input-wrapper')} // <<< ADDED TEST ID FOR TEXTFIELD WRAPPER
+            // Alternatively, add directly to inputProps if needed, but wrapper is often easier
+            // inputProps={{ ...textFieldProps?.inputProps, ...addTestId('input') }}
           />
-          <IconButton size="small" onClick={handleSaveClick} color="success" aria-label={`Save ${label}`} disabled={isSaving}>
+          <IconButton size="small" onClick={handleSaveClick} color="success" aria-label={`Save ${label}`} disabled={isSaving} {...addTestId('save-button')}>
             <CheckIcon />
           </IconButton>
-          <IconButton size="small" onClick={handleCancelClick} color="error" aria-label={`Cancel ${label} edit`} disabled={isSaving}>
+          <IconButton size="small" onClick={handleCancelClick} color="error" aria-label={`Cancel ${label} edit`} disabled={isSaving} {...addTestId('cancel-button')}>
             <CloseIcon />
           </IconButton>
         </>
diff --git a/frontend/src/components/common/EditableTextArea.jsx b/frontend/src/components/common/EditableTextArea.jsx
index 5370116..e4f0252 100644
--- a/frontend/src/components/common/EditableTextArea.jsx
+++ b/frontend/src/components/common/EditableTextArea.jsx
@@ -8,6 +8,7 @@ import CheckIcon from '@mui/icons-material/Check';
 import CloseIcon from '@mui/icons-material/Close';
 
 const EditableTextArea = ({
+  testIdPrefix,
   label,                // Label for the TextField in edit mode AND display mode now
   value,                // The current value to display
   onSave,               // Async function to call when saving (receives new value)
@@ -45,9 +46,12 @@ const EditableTextArea = ({
     }
   };
 
+  // Helper function to generate test ID only if prefix is provided
+  const addTestId = (suffix) => (testIdPrefix ? { [`data-testid`]: `${testIdPrefix}-${suffix}` } : {});
+
   return (
     // Container remains largely the same
-    <Box sx={{ width: '100%', position: 'relative', ...containerSx }}>
+    <Box sx={{ width: '100%', position: 'relative', ...containerSx }} {...addTestId('container')}>
       {!isEditing ? (
         // Display Mode
         <Box sx={{ display: 'flex', alignItems: 'flex-start', gap: 1 }}>
@@ -67,11 +71,12 @@ const EditableTextArea = ({
                         color: !value ? 'text.secondary' : 'inherit',
                         minHeight: '20px'
                     }}
+                    {...addTestId('display')}
                 >
                     {value?.trim() || placeholder || emptyText}
                 </Typography>
             </Box>
-            <IconButton size="small" onClick={handleEditClick} /* ... other props ... */ sx={{ mt: 1 }}>
+            <IconButton size="small" onClick={handleEditClick} /* ... other props ... */ sx={{ mt: 1 }} {...addTestId('edit-button')}>
                  <EditIcon fontSize="small" />
              </IconButton>
         </Box>
@@ -90,12 +95,15 @@ const EditableTextArea = ({
             autoFocus
             {...textFieldProps}
             disabled={isSaving}
+            {...addTestId('input-wrapper')} // <<< ADDED TEST ID FOR TEXTFIELD WRAPPER
+            // You might need to target the actual textarea element inside this wrapper in tests
+            // using .find('textarea')
           />
           <Box sx={{ display: 'flex', gap: 1, mt: 1 }}>
-            <IconButton size="small" onClick={handleSaveClick} color="success" aria-label={`Save ${label}`} disabled={isSaving}>
+            <IconButton size="small" onClick={handleSaveClick} color="success" aria-label={`Save ${label}`} disabled={isSaving} {...addTestId('save-button')}>
               <CheckIcon />
             </IconButton>
-            <IconButton size="small" onClick={handleCancelClick} color="error" aria-label={`Cancel ${label} edit`} disabled={isSaving}>
+            <IconButton size="small" onClick={handleCancelClick} color="error" aria-label={`Cancel ${label} edit`} disabled={isSaving} {...addTestId('cancel-button')}>
               <CloseIcon />
             </IconButton>
           </Box>
diff --git a/frontend/src/components/directory/FilterControls.jsx b/frontend/src/components/directory/FilterControls.jsx
index dd05193..9e66345 100644
--- a/frontend/src/components/directory/FilterControls.jsx
+++ b/frontend/src/components/directory/FilterControls.jsx
@@ -1,73 +1,113 @@
+/* eslint-disable no-unused-vars */
+/* eslint-disable react/prop-types */
+// frontend/src/components/directory/FilterControls.jsx
 import React from 'react';
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import FilterControls from '../components/directory/FilterControls'; // make sure path is correct
+import { Box, Grid, FormControl, InputLabel, Select, MenuItem } from '@mui/material';
 
-describe('FilterControls Component', () => {
-  const mockOnRoleChange = jest.fn();
-  const mockOnDepartmentChange = jest.fn();
-  const mockOnMajorChange = jest.fn();
-  const mockOnYearChange = jest.fn();
+const FilterControls = ({
+  // Filter values
+  selectedRole,
+  selectedDepartment,
+  selectedMajor,
+  selectedYear,
+  // Change handlers
+  onRoleChange,
+  onDepartmentChange,
+  onMajorChange,
+  onYearChange,
+  // Options for dropdowns
+  departmentsList,
+  majorsList,
+  yearsList,
+}) => {
+  return (
+    <Box sx={{ mb: 2 }}> {/* Add some margin below filters */}
+      <Grid container spacing={2}>
+        {/* Role Filter */}
+        <Grid item xs={12} sm={6} md={3}>
+          <FormControl fullWidth size="small">
+            <InputLabel id="role-filter-label">Role</InputLabel>
+            <Select
+              labelId="role-filter-label"
+              id="role-filter-select"
+              value={selectedRole}
+              label="Role"
+              onChange={onRoleChange} // Pass event up
+            >
+              <MenuItem value=""><em>All Roles</em></MenuItem>
+              <MenuItem value="student">Student</MenuItem>
+              <MenuItem value="professor">Professor</MenuItem>
+            </Select>
+          </FormControl>
+        </Grid>
 
-  const departmentsList = ['Mathematics', 'Physics'];
-  const majorsList = ['Software Engineering', 'Computer Science'];
-  const yearsList = ['Freshman', 'Sophomore', 'Junior', 'Senior'];
+        {/* Department Filter (Show only if not filtering by Student) */}
+        {selectedRole !== 'student' && (
+            <Grid item xs={12} sm={6} md={3}>
+              <FormControl fullWidth size="small" disabled={selectedRole === 'student'}>
+                <InputLabel id="dept-filter-label">Department</InputLabel>
+                <Select
+                  labelId="dept-filter-label"
+                  id="dept-filter-select"
+                  value={selectedDepartment}
+                  label="Department"
+                  onChange={onDepartmentChange}
+                >
+                  <MenuItem value=""><em>All Departments</em></MenuItem>
+                  {departmentsList.map((dept) => (
+                    <MenuItem key={dept} value={dept}>{dept || '(No Dept.)'}</MenuItem>
+                  ))}
+                </Select>
+              </FormControl>
+            </Grid>
+        )}
 
-  beforeEach(() => {
-    render(
-      <FilterControls
-        selectedRole=""
-        selectedDepartment=""
-        selectedMajor=""
-        selectedYear=""
-        onRoleChange={mockOnRoleChange}
-        onDepartmentChange={mockOnDepartmentChange}
-        onMajorChange={mockOnMajorChange}
-        onYearChange={mockOnYearChange}
-        departmentsList={departmentsList}
-        majorsList={majorsList}
-        yearsList={yearsList}
-      />
-    );
-  });
 
-  it('calls correct handler when role changes', async () => {
-    const roleSelect = screen.getByLabelText('Role');
-    await userEvent.click(roleSelect);
+        {/* Major Filter (Show only if not filtering by Professor) */}
+        {selectedRole !== 'professor' && (
+            <Grid item xs={12} sm={6} md={3}>
+            <FormControl fullWidth size="small" disabled={selectedRole === 'professor'}>
+                <InputLabel id="major-filter-label">Major</InputLabel>
+                <Select
+                labelId="major-filter-label"
+                id="major-filter-select"
+                value={selectedMajor}
+                label="Major"
+                onChange={onMajorChange}
+                >
+                <MenuItem value=""><em>All Majors</em></MenuItem>
+                 {majorsList.map((major) => (
+                    <MenuItem key={major} value={major}>{major || '(No Major)'}</MenuItem>
+                  ))}
+                </Select>
+            </FormControl>
+            </Grid>
+        )}
 
-    const studentOption = await screen.findByText('Student');
-    await userEvent.click(studentOption);
+        {/* Year Filter (Show only if not filtering by Professor) */}
+        {selectedRole !== 'professor' && (
+            <Grid item xs={12} sm={6} md={3}>
+            <FormControl fullWidth size="small" disabled={selectedRole === 'professor'}>
+                <InputLabel id="year-filter-label">Year</InputLabel>
+                <Select
+                labelId="year-filter-label"
+                id="year-filter-select"
+                value={selectedYear}
+                label="Year"
+                onChange={onYearChange}
+                >
+                <MenuItem value=""><em>All Years</em></MenuItem>
+                 {yearsList.map((year) => (
+                    <MenuItem key={year} value={year}>{year || '(No Year)'}</MenuItem>
+                  ))}
+                </Select>
+            </FormControl>
+            </Grid>
+        )}
 
-    expect(mockOnRoleChange).toHaveBeenCalledTimes(1);
-  });
+      </Grid>
+    </Box>
+  );
+};
 
-  it('calls correct handler when major changes', async () => {
-    const majorSelect = screen.getByLabelText('Major');
-    await userEvent.click(majorSelect);
-
-    const majorOption = await screen.findByText('Software Engineering');
-    await userEvent.click(majorOption);
-
-    expect(mockOnMajorChange).toHaveBeenCalledTimes(1);
-  });
-
-  it('calls correct handler when year changes', async () => {
-    const yearSelect = screen.getByLabelText('Year');
-    await userEvent.click(yearSelect);
-
-    const yearOption = await screen.findByText('Junior');
-    await userEvent.click(yearOption);
-
-    expect(mockOnYearChange).toHaveBeenCalledTimes(1);
-  });
-
-  it('calls correct handler when department changes', async () => {
-    const deptSelect = screen.getByLabelText('Department');
-    await userEvent.click(deptSelect);
-
-    const deptOption = await screen.findByText('Mathematics');
-    await userEvent.click(deptOption);
-
-    expect(mockOnDepartmentChange).toHaveBeenCalledTimes(1);
-  });
-});
+export default FilterControls;
\ No newline at end of file
diff --git a/frontend/src/components/opportunities/AddOpportunityForm.jsx b/frontend/src/components/opportunities/AddOpportunityForm.jsx
index bfdd70a..c95873a 100644
--- a/frontend/src/components/opportunities/AddOpportunityForm.jsx
+++ b/frontend/src/components/opportunities/AddOpportunityForm.jsx
@@ -91,10 +91,11 @@ const AddOpportunityForm = ({ open, onClose, onSave, initialData = null, isSavin
   };
 
   return (
-    <Dialog open={open} onClose={() => !isSaving && onClose()} maxWidth="sm" fullWidth> {/* Prevent closing while saving */}
+    <Dialog open={open} onClose={() => !isSaving && onClose()} maxWidth="sm" fullWidth data-testid="opportunity-form-dialog"> {/* Prevent closing while saving */}
       <DialogTitle>{initialData ? 'Edit Opportunity Post' : 'Create New Opportunity Post'}</DialogTitle>
       <DialogContent>
         <TextField
+          data-testid="opportunity-title-input" // <<< ADDED
           autoFocus
           margin="dense"
           name="title"
@@ -110,6 +111,7 @@ const AddOpportunityForm = ({ open, onClose, onSave, initialData = null, isSavin
           disabled={isSaving}
         />
         <TextField
+          data-testid="opportunity-description-input" // <<< ADDED
           margin="dense"
           name="description"
           label="Description"
@@ -125,7 +127,7 @@ const AddOpportunityForm = ({ open, onClose, onSave, initialData = null, isSavin
           helperText={formErrors.description}
           disabled={isSaving}
         />
-        <FormControl fullWidth margin="dense" required error={!!formErrors.type} disabled={isSaving}>
+        <FormControl data-testid="opportunity-type-select" fullWidth margin="dense" required error={!!formErrors.type} disabled={isSaving}>
           <InputLabel id="opportunity-type-label">Type</InputLabel>
           <Select
             labelId="opportunity-type-label"
@@ -145,6 +147,7 @@ const AddOpportunityForm = ({ open, onClose, onSave, initialData = null, isSavin
            {formErrors.type && <FormHelperText>{formErrors.type}</FormHelperText>}
         </FormControl>
          <TextField
+          data-testid="opportunity-deadline-input"
           margin="dense"
           name="deadline"
           label="Application Deadline (Optional)"
@@ -161,6 +164,7 @@ const AddOpportunityForm = ({ open, onClose, onSave, initialData = null, isSavin
         <FormControlLabel
           control={
             <Checkbox
+              data-testid="opportunity-allow-interest-checkbox"
               name="allowInterest"
               checked={formData.allowInterest}
               onChange={handleChange}
@@ -174,8 +178,8 @@ const AddOpportunityForm = ({ open, onClose, onSave, initialData = null, isSavin
 
       </DialogContent>
       <DialogActions>
-        <Button onClick={onClose} disabled={isSaving}>Cancel</Button>
-        <Button onClick={handleSave} variant="contained" disabled={isSaving}>
+        <Button data-testid="opportunity-form-cancel-button" onClick={onClose} disabled={isSaving}>Cancel</Button>
+        <Button data-testid="opportunity-form-save-button" onClick={handleSave} variant="contained" disabled={isSaving}>
           {isSaving ? <CircularProgress size={24} /> : (initialData ? 'Update Post' : 'Create Post')}
         </Button>
       </DialogActions>
diff --git a/frontend/src/components/opportunities/OpportunityFeed.jsx b/frontend/src/components/opportunities/OpportunityFeed.jsx
index 2a23513..9112218 100644
--- a/frontend/src/components/opportunities/OpportunityFeed.jsx
+++ b/frontend/src/components/opportunities/OpportunityFeed.jsx
@@ -273,7 +273,7 @@ const showSnackbar = (message, severity = 'info') => {
 
           {/* Conditional Title based on view */}
           <Typography variant="h6" gutterBottom>
-            {currentView === 'all' ? 'Available Opportunities' : 'Opportunities You\'re Interested In'}
+            {currentView === 'all' ? 'Available Opportunities' : 'Your Opportunities'}
           </Typography>
 
           {/* Loading Indicator */}
diff --git a/frontend/src/components/opportunities/OpportunityListItem.jsx b/frontend/src/components/opportunities/OpportunityListItem.jsx
index a3812fe..c754935 100644
--- a/frontend/src/components/opportunities/OpportunityListItem.jsx
+++ b/frontend/src/components/opportunities/OpportunityListItem.jsx
@@ -55,7 +55,7 @@ const OpportunityListItem = ({
   const deadlineString = formatDate(opportunity.deadline);
 
   return (
-    <Paper elevation={2} sx={{ p: 2, mb: 2, borderRadius: 2 }}>
+    <Paper elevation={2} sx={{ p: 2, mb: 2, borderRadius: 2 }} data-testid={`opportunity-list-item-${opportunity.id}`}>
       {/* --- Top Section: Title + Edit/Delete --- */}
       <Box sx={{
         display: 'flex',
@@ -64,18 +64,18 @@ const OpportunityListItem = ({
         flexWrap: 'wrap',
         mb: 1
       }}>
-        <Typography variant="h6" sx={{ fontWeight: 'bold' }}>
+        <Typography variant="h6" sx={{ fontWeight: 'bold' }} data-testid={`opportunity-item-title-${opportunity.id}`}>
           {opportunity.title}
         </Typography>
         {/* Edit and Delete Icons */}
         <Box sx={{ display: 'flex', gap: 1 }}>
           {isProfessorView && onEdit && (
-            <IconButton size="small" onClick={() => onEdit(opportunity)}>
+            <IconButton size="small" onClick={() => onEdit(opportunity)} data-testid={`opportunity-item-edit-button-${opportunity.id}`}>
               <EditIcon fontSize="inherit" />
             </IconButton>
           )}
           {isProfessorView && onDelete && (
-            <IconButton size="small" onClick={() => onDelete(opportunity.id)}>
+            <IconButton size="small" onClick={() => onDelete(opportunity.id)} data-testid={`opportunity-item-delete-button-${opportunity.id}`}>
               <DeleteIcon fontSize="inherit" color="error" />
             </IconButton>
           )}
@@ -96,11 +96,13 @@ const OpportunityListItem = ({
           label={opportunity.type || 'General'}
           size="small"
           color="default"
+          data-testid={`opportunity-item-type-${opportunity.id}`} // <<< ADDED
         />
 
         {/* View Interested / Mark Interest Buttons */}
         {isProfessorView && opportunity.allowInterest && onViewInterested && (
           <Button
+            data-testid={`opportunity-item-view-interested-button-${opportunity.id}`}
             size="small"
             startIcon={<GroupIcon />}
             onClick={() => onViewInterested(opportunity.id)}
@@ -113,6 +115,7 @@ const OpportunityListItem = ({
 
         {isStudentView && opportunity.allowInterest && !isAlreadyInterested && (
           <Button
+            data-testid={`opportunity-item-mark-interest-button-${opportunity.id}`}
             variant="contained"
             size="small"
             startIcon={isProcessingInterest ? <CircularProgress size={16} color="inherit" /> : <FavoriteBorderIcon fontSize="small" />}
@@ -126,6 +129,7 @@ const OpportunityListItem = ({
 
         {isStudentView && opportunity.allowInterest && isAlreadyInterested && (
           <Button
+            data-testid={`opportunity-item-remove-interest-button-${opportunity.id}`}
             variant="outlined"
             size="small"
             color="error"
@@ -165,7 +169,7 @@ const OpportunityListItem = ({
       <Divider sx={{ my: 1.5 }} />
 
       {/* --- Description Section --- */}
-      <Typography variant="body2" sx={{ whiteSpace: 'pre-wrap', overflowWrap: 'break-word', mb: 1 }}>
+      <Typography variant="body2" sx={{ whiteSpace: 'pre-wrap', overflowWrap: 'break-word', mb: 1 }} data-testid={`opportunity-item-desc-${opportunity.id}`}>
         {opportunity.description}
       </Typography>
 
diff --git a/frontend/src/components/profile/ProfileInfoSection.jsx b/frontend/src/components/profile/ProfileInfoSection.jsx
index 74b789f..c8f9b62 100644
--- a/frontend/src/components/profile/ProfileInfoSection.jsx
+++ b/frontend/src/components/profile/ProfileInfoSection.jsx
@@ -8,6 +8,7 @@ import EditableTextArea from './../common/EditableTextArea'; // Adjust path if n
 import FileUploadField from './../common/FileUploadField'; // Adjust path if needed
 
 const ProfileInfoSection = ({
+  testIdPrefixes = {},
   professorData,
   isSaving,
   handleNameSave,
@@ -22,11 +23,12 @@ const ProfileInfoSection = ({
   const resumeLink = professorData?.resumeLink || ''; // Extract for clarity
 
   return (
-    <Box sx={{ pt: 2, pl: { xs: 0, sm: 1 } }}>
+    <Box sx={{ pt: 2, pl: { xs: 0, sm: 1 } }} >
       {/* --- Render EditableFields --- */}
       <Stack spacing={3}>
         <Box>
           <EditableField
+            testIdPrefix={testIdPrefixes.name} // <<< Pass down specific prefix
             label="Full Name"
             value={professorData?.name}
             onSave={handleNameSave}
@@ -37,6 +39,7 @@ const ProfileInfoSection = ({
             isSaving={isSaving}
           />
           <EditableField
+            testIdPrefix={testIdPrefixes.headline} // <<< Pass down specific prefix
             label="Headline/Title"
             value={professorData?.headline}
             onSave={handleHeadlineSave}
@@ -48,6 +51,7 @@ const ProfileInfoSection = ({
             isSaving={isSaving}
           />
           <EditableField
+            testIdPrefix={testIdPrefixes.pronouns} // <<< Pass down specific prefix
             label="Pronouns"
             value={professorData?.pronouns}
             onSave={handlePronounsSave}
@@ -61,6 +65,7 @@ const ProfileInfoSection = ({
 
           {/* +++ Add Department Field +++ */}
           <EditableField
+            testIdPrefix={testIdPrefixes.department} // <<< Pass down specific prefix
             label="Department"
             value={professorData?.department} // Bind to department field
             onSave={handleDepartmentSave}    // Connect to the save handler
@@ -77,6 +82,7 @@ const ProfileInfoSection = ({
           <Box sx={{ mb: 3 }}>
             <Typography variant="h6" gutterBottom sx={{ fontWeight: 'medium' }}>About</Typography>
             <EditableTextArea
+              testIdPrefix={testIdPrefixes.about} // <<< Pass down specific prefix
               label="About"
               value={professorData?.about}
               onSave={handleAboutSave}
@@ -89,6 +95,7 @@ const ProfileInfoSection = ({
 
           {/* --- Render FileUploadField for Resume --- */}
           <FileUploadField
+            // testIdPrefix={testIdPrefixes.resume} // Example if needed
             label="Resume"
             fileLink={resumeLink}
             accept="application/pdf"
diff --git a/frontend/src/pages/ProfessorCourses.jsx b/frontend/src/pages/ProfessorCourses.jsx
index 2a4e413..3fdeb36 100644
--- a/frontend/src/pages/ProfessorCourses.jsx
+++ b/frontend/src/pages/ProfessorCourses.jsx
@@ -43,26 +43,35 @@ const ProfessorCourses = () => {
 
   useEffect(() => {
     let unsubscribe = () => {};
+    console.log(`Courses Effect: Running. User: ${user?.uid}`); // <<< ADD LOG
     if (user) {
       setLoading(true);
+      console.log(`Courses Effect: Setting up listener for professorId = ${user.uid}`); // <<< ADD LOG
       const q = query(collection(db, 'courses'), where('professorId', '==', user.uid));
 
       unsubscribe = onSnapshot(q, (querySnapshot) => {
+        console.log(`Courses Effect: onSnapshot fired! Found ${querySnapshot.size} docs.`); // <<< ADD LOG
         const fetchedCourses = querySnapshot.docs.map((doc) => ({
           id: doc.id,
           ...doc.data(),
         }));
+        console.log('Courses Effect: Fetched courses:', fetchedCourses); // <<< ADD LOG
         setCourses(fetchedCourses);
         setLoading(false);
       }, (error) => {
+        console.error('Courses Effect: Error in onSnapshot:', error); // <<< ADD LOG
         console.error('Error listening to courses:', error);
         setLoading(false);
       });
     } else {
+      console.log('Courses Effect: No user found, clearing courses.'); // <<< ADD LOG
       setCourses([]);
       setLoading(false);
     }
-    return () => unsubscribe();
+    return () =>{
+      console.log('Courses Effect: Cleaning up listener.'); // <<< ADD LOG
+      unsubscribe();
+    }
   }, [user]);
 
   const handleRemoveCourse = async (id) => {
@@ -153,6 +162,7 @@ const ProfessorCourses = () => {
         </Box>
 
         <Button
+          data-testid="add-course-button" // <<< ADDED TEST ID
           variant="contained"
           startIcon={<AddIcon />}
           onClick={() => {
@@ -175,7 +185,7 @@ const ProfessorCourses = () => {
       </Box>
 
       {/* Course Cards */}
-      <Grid container spacing={3} justifyContent="flex-start">
+      <Grid container spacing={3} justifyContent="flex-start" data-testid="course-list-container">
         {!loading && courses.length === 0 && (
           <Typography sx={{ color: 'text.secondary', textAlign: 'center' }}>
             No courses added yet.
@@ -183,7 +193,7 @@ const ProfessorCourses = () => {
         )}
 
         {courses.map((course) => (
-          <Grid item xs={12} sm={6} md={4} key={course.id}>
+          <Grid item xs={12} sm={6} md={4} key={course.id} data-testid={`course-list-item-${course.id}`}>
             <Card
               sx={{
                 width: '100%',
@@ -213,8 +223,8 @@ const ProfessorCourses = () => {
               />
 
               <CardContent sx={{ pt: 5, flexGrow: 1 }}>
-                <Typography variant="h6" gutterBottom>{course.courseName}</Typography>
-                <Typography variant="body2" sx={{ mb: 1, wordBreak: 'break-word' }}>
+                <Typography variant="h6" gutterBottom data-testid={`course-item-name-${course.id}`}>{course.courseName}</Typography>
+                <Typography variant="body2" sx={{ mb: 1, wordBreak: 'break-word' }} data-testid={`course-item-desc-${course.id}`}>
                   {course.description}
                 </Typography>
 
@@ -239,10 +249,10 @@ const ProfessorCourses = () => {
                   pb: 2,
                 }}
               >
-                <Button onClick={() => handleEditCourse(course)} color="primary" size="small" startIcon={<EditIcon />}>
+                <Button data-testid={`course-item-edit-button-${course.id}`} onClick={() => handleEditCourse(course)} color="primary" size="small" startIcon={<EditIcon />}>
                   Edit
                 </Button>
-                <Button onClick={() => handleRemoveCourse(course.id)} startIcon={<DeleteIcon />} color="error" size="small">
+                <Button data-testid={`course-item-delete-button-${course.id}`} onClick={() => handleRemoveCourse(course.id)} startIcon={<DeleteIcon />} color="error" size="small">
                   Delete
                 </Button>
               </Box>
@@ -252,10 +262,11 @@ const ProfessorCourses = () => {
       </Grid>
 
       {/* Add/Edit Dialog */}
-      <Dialog open={isFormVisible} onClose={() => setFormVisible(false)}>
+      <Dialog open={isFormVisible} onClose={() => setFormVisible(false)} data-testid="course-form-dialog">
         <DialogTitle>{editingCourseId ? 'Edit Course' : 'Add New Course'}</DialogTitle>
         <DialogContent>
           <TextField
+            data-testid="course-name-input"
             label="Course Name"
             fullWidth
             margin="normal"
@@ -264,6 +275,7 @@ const ProfessorCourses = () => {
             onChange={handleInputChange}
           />
           <TextField
+            data-testid="course-description-input"
             label="Description"
             fullWidth
             margin="normal"
@@ -272,14 +284,16 @@ const ProfessorCourses = () => {
             onChange={handleInputChange}
           />
           <TextField
+            data-testid="course-link-input"
             label="Course Link"
             fullWidth
             margin="normal"
             name="link"
+            type="url"
             value={newCourse.link}
             onChange={handleInputChange}
           />
-          <FormControl fullWidth margin="normal">
+          <FormControl fullWidth margin="normal" data-testid="course-status-select">
             <InputLabel>Status</InputLabel>
             <Select
               label="Status"
@@ -293,10 +307,10 @@ const ProfessorCourses = () => {
           </FormControl>
         </DialogContent>
         <DialogActions>
-          <Button onClick={() => setFormVisible(false)} color="secondary">
+          <Button data-testid="course-form-cancel-button" onClick={() => setFormVisible(false)} color="secondary">
             Cancel
           </Button>
-          <Button onClick={handleAddCourse} color="primary">
+          <Button data-testid="course-form-save-button" onClick={handleAddCourse} color="primary">
             {editingCourseId ? 'Update Course' : 'Add Course'}
           </Button>
         </DialogActions>
@@ -305,4 +319,4 @@ const ProfessorCourses = () => {
   );
 };
 
-export default ProfessorCourses;
+export default ProfessorCourses;
\ No newline at end of file
diff --git a/frontend/src/pages/ProfessorDashboard.jsx b/frontend/src/pages/ProfessorDashboard.jsx
index 8bbfb33..7102188 100644
--- a/frontend/src/pages/ProfessorDashboard.jsx
+++ b/frontend/src/pages/ProfessorDashboard.jsx
@@ -92,6 +92,18 @@ const ProfessorDashboard = () => {
   const navigate = useNavigate();
   const storage = getStorage(app);
 
+
+  {/* Define the prefixes */}
+  const profileTestIdPrefixes = {
+    name: 'prof-profile-name',
+    headline: 'prof-profile-headline',
+    pronouns: 'prof-profile-pronouns',
+    department: 'prof-profile-department',
+    about: 'prof-profile-about',
+    // resume: 'prof-profile-resume' // If you add to FileUploadField
+  };
+
+
   // +++ UPDATED useEffect for Realtime Professor Data +++
   useEffect(() => {
     setUiLoading(true);
@@ -487,18 +499,19 @@ const ProfessorDashboard = () => {
          {isSaving && (<Box sx={{ /* ... Saving overlay ... */ }}> <CircularProgress /> </Box>)}
 
         <Tabs
+            data-testid="prof-dashboard-tabs-container"
             value={tabValue}
             onChange={handleTabChange}
-            variant="fullWidth" 
+            variant="fullWidth"
             aria-label="Professor Dashboard Tabs"
             textColor="primary"
             indicatorColor="primary"
             sx={{ borderBottom: 1, borderColor: 'divider' }}
         >
-          <Tab label="Profile" {...a11yProps(0)} sx={tabHoverSx}/>
-          <Tab label="Experience" {...a11yProps(1)} sx={tabHoverSx}/>
-          <Tab label="Courses" {...a11yProps(2)} sx={tabHoverSx}/>
-          <Tab label="Opportunities" {...a11yProps(3)} sx={tabHoverSx}/> 
+          <Tab data-testid="prof-tab-profile" label="Profile" {...a11yProps(0)} sx={tabHoverSx}/>
+          <Tab data-testid="prof-tab-experience" label="Experience" {...a11yProps(1)} sx={tabHoverSx}/>
+          <Tab data-testid="prof-tab-courses" label="Courses" {...a11yProps(2)} sx={tabHoverSx}/>
+          <Tab data-testid="prof-tab-opportunities" label="Opportunities" {...a11yProps(3)} sx={tabHoverSx}/>
         </Tabs>
 
         <TabPanel value={tabValue} index={0}>
@@ -511,8 +524,10 @@ const ProfessorDashboard = () => {
              onEditPhoto={handleTriggerEditPhoto}
              onViewPhoto={handleTriggerViewPhoto}
           />
+
           {/* --- Render ProfileInfoSection --- */}
           <ProfileInfoSection
+            testIdPrefixes={profileTestIdPrefixes} // <<< PASS THE PREFIXES
             professorData={professorData}
             isSaving={isSaving}
             handleNameSave={handleNameSave}
@@ -522,6 +537,12 @@ const ProfessorDashboard = () => {
             handleResumeSave={handleResumeSave}
             handleResumeDelete={handleResumeDelete}
             handleDepartmentSave={handleDepartmentSave}
+            // You might need to pass prefixes down if ProfileInfoSection renders EditableFields
+            // testIdPrefixes={{
+            //  name: 'prof-profile-name',
+            //  headline: 'prof-profile-headline',
+            //  // etc.
+            // }}
           />
         </TabPanel>
 
@@ -539,7 +560,7 @@ const ProfessorDashboard = () => {
                 gap: 2,
                 mb: 2,
               }}
-            >     
+            >
               <Box sx={{ textAlign: { xs: 'center', sm: 'left' } }}>
                 <Typography variant="h5" sx={{ fontWeight: 'bold' }}>
                   My Posted Opportunities
@@ -547,6 +568,7 @@ const ProfessorDashboard = () => {
               </Box>
 
               <Button
+                data-testid="post-opportunity-button"
                 variant="contained"
                 startIcon={<AddIcon />}
                 onClick={handleOpenAddOpportunityDialog}
@@ -568,16 +590,18 @@ const ProfessorDashboard = () => {
             {loadingOpportunities ? (
                 <Box sx={{ display: 'flex', justifyContent: 'center', p: 3 }}> <CircularProgress /> </Box>
             ) : opportunities.length > 0 ? (
-                opportunities.map((opp) => (
+              <Stack spacing={2} sx={{ mt: 2 }} data-testid="opportunity-list-container">
+                {opportunities.map((opp) => (
                     <OpportunityListItem
                         key={opp.id}
                         opportunity={opp}
-                        onEdit={handleOpenEditOpportunityDialog} 
-                        onDelete={handleDeleteOpportunity} 
-                        onViewInterested={handleViewInterested} 
+                        onEdit={handleOpenEditOpportunityDialog}
+                        onDelete={handleDeleteOpportunity}
+                        onViewInterested={handleViewInterested}
                         viewMode="professor"
                     />
-                ))
+                ))}
+                </Stack>
             ) : (
                 <Typography variant="body2" color="text.secondary" sx={{ textAlign: 'center', p: 3 }}>
                     You haven&apos;t posted any opportunities yet.
diff --git a/frontend/src/pages/StudentDashboard.jsx b/frontend/src/pages/StudentDashboard.jsx
index b439999..bb2247d 100644
--- a/frontend/src/pages/StudentDashboard.jsx
+++ b/frontend/src/pages/StudentDashboard.jsx
@@ -337,12 +337,13 @@ const StudentDashboard = () => {
                         textColor="primary"
                         indicatorColor="primary"
                         sx={{ borderBottom: 1, borderColor: 'divider' }}
+                        data-testid="dashboard-tabs-container"
                     >
                         {/* Apply hover sx to each Tab */}
-                        <Tab label="Profile" {...a11yProps(0)} sx={tabHoverSx} />
-                        <Tab label="Experience" {...a11yProps(1)} sx={tabHoverSx} />
-                        <Tab label="Courses" {...a11yProps(2)} sx={tabHoverSx} />
-                        <Tab label="Opportunities" {...a11yProps(3)} sx={tabHoverSx} />
+                        <Tab data-testid="tab-profile" label="Profile" {...a11yProps(0)} sx={tabHoverSx} />
+                        <Tab data-testid="tab-experience" label="Experience" {...a11yProps(1)} sx={tabHoverSx} />
+                        <Tab data-testid="tab-courses" label="Courses" {...a11yProps(2)} sx={tabHoverSx} />
+                        <Tab data-testid="tab-opportunities" label="Opportunities" {...a11yProps(3)} sx={tabHoverSx} />
                     </Tabs>
                     {/* --- END TABS --- */}
 
@@ -364,6 +365,7 @@ const StudentDashboard = () => {
 
                              <Box>
                                  <EditableField
+                                     testIdPrefix="profile-name"
                                      label="Full Name"
                                      value={studentData?.name}
                                      onSave={handleNameSave}
@@ -374,6 +376,7 @@ const StudentDashboard = () => {
                                  {/* Group Major and Year */}
                                  <Stack direction={{ xs: 'column', sm: 'row' }} spacing={{ xs: 1.5, sm: 4 }} sx={{ mt: 1.5 }}> 
                                      <EditableField
+                                         testIdPrefix="profile-major"
                                          label="Major"
                                          value={studentData?.major}
                                          onSave={handleMajorSave}
@@ -385,6 +388,7 @@ const StudentDashboard = () => {
                                          containerSx={{ flexGrow: 1 }} 
                                      />
                                      <EditableField
+                                         testIdPrefix="profile-year"
                                          label="Year"
                                          value={studentData?.year}
                                          onSave={handleYearSave}
@@ -406,6 +410,7 @@ const StudentDashboard = () => {
                                 About
                               </Typography>
                               <EditableTextArea
+                                testIdPrefix="profile-description"
                                 value={studentData?.description}
                                 onSave={handleDescriptionSave}
                                 placeholder="(Tell professors a bit about yourself)"
diff --git a/frontend/src/tests/FilterControls.test.jsx b/frontend/src/tests/FilterControls.test.jsx
new file mode 100644
index 0000000..d9ca5c7
--- /dev/null
+++ b/frontend/src/tests/FilterControls.test.jsx
@@ -0,0 +1,73 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import FilterControls from '../components/directory/FilterControls'; // make sure path is correct
+
+describe('FilterControls Component', () => {
+  const mockOnRoleChange = jest.fn();
+  const mockOnDepartmentChange = jest.fn();
+  const mockOnMajorChange = jest.fn();
+  const mockOnYearChange = jest.fn();
+
+  const departmentsList = ['Mathematics', 'Physics'];
+  const majorsList = ['Software Engineering', 'Computer Science'];
+  const yearsList = ['Freshman', 'Sophomore', 'Junior', 'Senior'];
+
+  beforeEach(() => {
+    render(
+      <FilterControls
+        selectedRole=""
+        selectedDepartment=""
+        selectedMajor=""
+        selectedYear=""
+        onRoleChange={mockOnRoleChange}
+        onDepartmentChange={mockOnDepartmentChange}
+        onMajorChange={mockOnMajorChange}
+        onYearChange={mockOnYearChange}
+        departmentsList={departmentsList}
+        majorsList={majorsList}
+        yearsList={yearsList}
+      />
+    );
+  });
+
+  it('calls correct handler when role changes', async () => {
+    const roleSelect = screen.getByLabelText('Role');
+    await userEvent.click(roleSelect);
+
+    const studentOption = await screen.findByText('Student');
+    await userEvent.click(studentOption);
+
+    expect(mockOnRoleChange).toHaveBeenCalledTimes(1);
+  });
+
+  it('calls correct handler when major changes', async () => {
+    const majorSelect = screen.getByLabelText('Major');
+    await userEvent.click(majorSelect);
+
+    const majorOption = await screen.findByText('Software Engineering');
+    await userEvent.click(majorOption);
+
+    expect(mockOnMajorChange).toHaveBeenCalledTimes(1);
+  });
+
+  it('calls correct handler when year changes', async () => {
+    const yearSelect = screen.getByLabelText('Year');
+    await userEvent.click(yearSelect);
+
+    const yearOption = await screen.findByText('Junior');
+    await userEvent.click(yearOption);
+
+    expect(mockOnYearChange).toHaveBeenCalledTimes(1);
+  });
+
+  it('calls correct handler when department changes', async () => {
+    const deptSelect = screen.getByLabelText('Department');
+    await userEvent.click(deptSelect);
+
+    const deptOption = await screen.findByText('Mathematics');
+    await userEvent.click(deptOption);
+
+    expect(mockOnDepartmentChange).toHaveBeenCalledTimes(1);
+  });
+});
\ No newline at end of file
diff --git a/frontend/tests/e2e/courses.cy.js b/frontend/tests/e2e/courses.cy.js
new file mode 100644
index 0000000..3167027
--- /dev/null
+++ b/frontend/tests/e2e/courses.cy.js
@@ -0,0 +1,164 @@
+// frontend/tests/e2e/courses.cy.js
+// FINAL VERSION (Based on your input and successful runs)
+
+describe('Professor Dashboard - Course Management', () => {
+    beforeEach(() => {
+      cy.login('professor');
+      cy.get('[data-testid="prof-tab-courses"]', { timeout: 15000 })
+        .should('be.visible')
+        .click();
+      cy.get('[data-testid="add-course-button"]', { timeout: 10000 }).should('be.visible');
+    });
+  
+    it('should allow adding a new course', () => {
+      const courseName = `Test Cypress Course ${Date.now()}`;
+      const courseDesc = 'This is a test course created by Cypress.';
+      const courseLink = 'https://example.com/cypress-course';
+  
+      cy.get('[data-testid="add-course-button"]').click();
+      cy.get('[data-testid="course-form-dialog"]', { timeout: 5000 }).should('be.visible');
+      cy.get('[data-testid="course-form-dialog"]').find('input[name="courseName"]').type(courseName);
+      // Using the selector confirmed to work for the user:
+      cy.get('[data-testid="course-description-input"]').find('input[name="description"]').type(courseDesc);
+      cy.get('[data-testid="course-form-dialog"]').find('input[name="link"]').type(courseLink);
+      cy.get('[data-testid="course-status-select"]').click();
+      cy.get('ul[role="listbox"]').contains('li', 'Ongoing').click();
+      cy.get('[data-testid="course-form-save-button"]').click();
+  
+      cy.get('[data-testid="course-form-dialog"]').should('not.exist');
+      cy.get('[data-testid="course-list-container"]', { timeout: 10000 })
+        .contains('[data-testid^="course-item-name-"]', courseName)
+        .should('be.visible');
+  
+      // Cleanup
+      cy.contains('[data-testid^="course-list-item-"]', courseName)
+        .find('[data-testid^="course-item-delete-button-"]')
+        .click();
+      cy.on('window:confirm', () => true);
+      cy.contains('[data-testid^="course-item-name-"]', courseName).should('not.exist');
+    });
+  
+    it('should display existing courses correctly', () => {
+      const existingCourseName = `Test Display Course ${Date.now()}`;
+      const existingCourseDesc = 'Description for display test.';
+      const existingCourseLink = 'https://example.com/display-test';
+      const existingCourseStatus = 'Completed';
+  
+      // Add course
+      cy.get('[data-testid="add-course-button"]').click();
+      cy.get('[data-testid="course-form-dialog"]').should('be.visible');
+      cy.get('[data-testid="course-form-dialog"]').find('input[name="courseName"]').type(existingCourseName);
+      cy.get('[data-testid="course-description-input"]').find('input[name="description"]').type(existingCourseDesc); // Your working selector
+      cy.get('[data-testid="course-form-dialog"]').find('input[name="link"]').type(existingCourseLink);
+      cy.get('[data-testid="course-status-select"]').click();
+      cy.get('ul[role="listbox"]').contains('li', existingCourseStatus).click();
+      cy.get('[data-testid="course-form-save-button"]').click();
+      cy.get('[data-testid="course-form-dialog"]').should('not.exist');
+      cy.get('[data-testid="course-list-container"]').contains(existingCourseName).should('be.visible');
+  
+      cy.log('Reloading page to check existing course display');
+      cy.reload();
+      cy.log('Page reloaded, clicking Courses tab and waiting for course...');
+  
+      // Click tab again after reload (User's fix)
+      cy.get('[data-testid="prof-tab-courses"]', { timeout: 15000 })
+       .should('be.visible')
+       .click();
+  
+      // Assert after reload + tab click
+      cy.contains('[data-testid^="course-list-item-"]', existingCourseName, { timeout: 15000 })
+        .should('be.visible')
+        .within(() => {
+            cy.get('[data-testid^="course-item-name-"]').should('contain', existingCourseName);
+            cy.get('[data-testid^="course-item-desc-"]').should('contain', existingCourseDesc);
+            cy.get('.MuiChip-label').should('contain', existingCourseStatus);
+            cy.get('a').contains('Go to Course').should('have.attr', 'href', existingCourseLink);
+        });
+  
+      // Cleanup
+      cy.log('Course found after reload, starting cleanup...');
+      cy.contains('[data-testid^="course-list-item-"]', existingCourseName)
+        .find('[data-testid^="course-item-delete-button-"]')
+        .click();
+      cy.on('window:confirm', () => true);
+      cy.contains('[data-testid^="course-item-name-"]', existingCourseName).should('not.exist');
+    });
+  
+    it('should allow editing an existing course', () => {
+      const initialCourseName = `Test Edit Course ${Date.now()}`;
+      const initialCourseDesc = 'Initial description.';
+      const initialCourseLink = 'https://example.com/initial';
+      const editedCourseDesc = 'UPDATED course description.';
+      const editedCourseStatus = 'Completed';
+  
+      // Add course
+      cy.get('[data-testid="add-course-button"]').click();
+      cy.get('[data-testid="course-form-dialog"]').should('be.visible');
+      cy.get('[data-testid="course-form-dialog"]').find('input[name="courseName"]').type(initialCourseName);
+      cy.get('[data-testid="course-description-input"]').find('input[name="description"]').type(initialCourseDesc); // Your working selector
+      cy.get('[data-testid="course-form-dialog"]').find('input[name="link"]').type(initialCourseLink);
+      cy.get('[data-testid="course-status-select"]').click();
+      cy.get('ul[role="listbox"]').contains('li', 'Ongoing').click();
+      cy.get('[data-testid="course-form-save-button"]').click();
+      cy.get('[data-testid="course-form-dialog"]').should('not.exist');
+  
+      // Edit the course
+      cy.contains('[data-testid^="course-list-item-"]', initialCourseName)
+        .find('[data-testid^="course-item-edit-button-"]')
+        .click();
+      cy.get('[data-testid="course-form-dialog"]').should('be.visible');
+      cy.get('[data-testid="course-form-dialog"]').contains('Edit Course').should('be.visible');
+      cy.get('[data-testid="course-description-input"]').find('input[name="description"]') // Your working selector
+          .clear()
+          .type(editedCourseDesc);
+      cy.get('[data-testid="course-status-select"]').click();
+      cy.get('ul[role="listbox"]').contains('li', editedCourseStatus).click();
+      cy.get('[data-testid="course-form-save-button"]').click();
+  
+      // Assert changes
+      cy.get('[data-testid="course-form-dialog"]').should('not.exist');
+      cy.contains('[data-testid^="course-list-item-"]', initialCourseName)
+        .should('contain', editedCourseDesc)
+        .find('.MuiChip-label')
+        .should('contain', editedCourseStatus);
+  
+      // Cleanup
+      cy.contains('[data-testid^="course-list-item-"]', initialCourseName)
+        .find('[data-testid^="course-item-delete-button-"]')
+        .click();
+      cy.on('window:confirm', () => true);
+      cy.contains('[data-testid^="course-item-name-"]', initialCourseName).should('not.exist');
+    });
+  
+    it('should allow deleting a course', () => {
+      const courseNameToDelete = `Test Delete Course ${Date.now()}`;
+      const courseDesc = 'This course will be deleted.';
+      const courseLink = 'https://example.com/delete-me';
+  
+      // Add course
+      cy.get('[data-testid="add-course-button"]').click();
+      cy.get('[data-testid="course-form-dialog"]').should('be.visible');
+      cy.get('[data-testid="course-form-dialog"]').find('input[name="courseName"]').type(courseNameToDelete);
+      cy.get('[data-testid="course-description-input"]').find('input[name="description"]').type(courseDesc); // Your selector
+      cy.get('[data-testid="course-form-dialog"]').find('input[name="link"]').type(courseLink);
+      cy.get('[data-testid="course-status-select"]').click();
+      cy.get('ul[role="listbox"]').contains('li', 'Ongoing').click();
+      cy.get('[data-testid="course-form-save-button"]').click();
+      cy.get('[data-testid="course-form-dialog"]').should('not.exist');
+      cy.get('[data-testid="course-list-container"]', { timeout: 10000 })
+          .contains('[data-testid^="course-item-name-"]', courseNameToDelete)
+          .should('be.visible');
+  
+      // Delete the course
+      cy.contains('[data-testid^="course-list-item-"]', courseNameToDelete)
+        .find('[data-testid^="course-item-delete-button-"]')
+        .click();
+      cy.on('window:confirm', () => true); // Assumes default browser confirm
+  
+      // Assert deletion
+      cy.get('[data-testid="course-list-container"]')
+          .contains(courseNameToDelete)
+          .should('not.exist');
+    });
+  
+  });
\ No newline at end of file
diff --git a/frontend/tests/e2e/opportunities.cy.js b/frontend/tests/e2e/opportunities.cy.js
new file mode 100644
index 0000000..68acbc8
--- /dev/null
+++ b/frontend/tests/e2e/opportunities.cy.js
@@ -0,0 +1,75 @@
+// frontend/tests/e2e/opportunities.cy.js
+
+describe('Professor Dashboard - Opportunity Management', () => {
+    beforeEach(() => {
+      cy.login('professor');
+      cy.get('[data-testid="prof-tab-opportunities"]', { timeout: 15000 })
+        .should('be.visible')
+        .click();
+      cy.get('[data-testid="post-opportunity-button"]', { timeout: 10000 }).should('be.visible');
+    });
+  
+    it('should allow posting a new opportunity', () => {
+        const oppTitle = `Test Opportunity ${Date.now()}`;
+        const oppDesc = 'Seeking student for Cypress testing.';
+        const oppType = 'Research Assistant'; // Value for the select dropdown
+    
+        // 1. Click the "Post New Opportunity" button
+        cy.get('[data-testid="post-opportunity-button"]').click();
+    
+        // 2. Fill in the form fields within the dialog
+        cy.get('[data-testid="opportunity-form-dialog"]', { timeout: 5000 }).should('be.visible');
+    
+        cy.get('[data-testid="opportunity-title-input"]').find('input').type(oppTitle);
+    
+        // --- APPLY FIX FOR MULTILINE TEXTAREA ---
+        cy.get('[data-testid="opportunity-description-input"]')
+          .find('textarea')        // Find potentially multiple textareas
+          .filter(':visible')      // Filter for the visible one(s)
+          .first()                 // Explicitly take the first visible one
+          .type(oppDesc, { force: true }); // Use force for robustness
+        // --- END FIX ---
+    
+        // Handle Type Select Dropdown
+        cy.get('[data-testid="opportunity-type-select"]').click(); // Click the FormControl/Select wrapper
+        cy.get('ul[role="listbox"]').contains('li', oppType).click(); // Click the option
+    
+        // Handle Allow Interest Checkbox (Example: ensure it's checked)
+        // Need to find the input nested inside the FormControlLabel
+        cy.get('[data-testid="opportunity-allow-interest-checkbox"]')
+          .find('input[type="checkbox"]')
+          .check({ force: true }); // Force check
+    
+        // 3. Click the "Save" button (text is "Create Post")
+        cy.get('[data-testid="opportunity-form-save-button"]').contains('Create Post').click();
+    
+        // 4. Assert the new opportunity appears in the list
+        cy.get('[data-testid="opportunity-form-dialog"]').should('not.exist'); // Dialog closes
+        cy.get('[data-testid="opportunity-list-container"]', { timeout: 10000 })
+          .contains('[data-testid^="opportunity-item-title-"]', oppTitle) // Check if title appears
+          .should('be.visible');
+    
+        // --- Cleanup ---
+        cy.log('Cleaning up created opportunity...');
+        cy.contains('[data-testid^="opportunity-list-item-"]', oppTitle)
+          .find('[data-testid^="opportunity-item-delete-button-"]')
+          .click();
+        cy.on('window:confirm', () => true); // Assuming basic confirm
+        cy.contains('[data-testid^="opportunity-item-title-"]', oppTitle).should('not.exist');
+        // --- End Cleanup ---
+    });
+  
+    // --- Placeholder Tests ---
+    it('should display posted opportunities', () => {
+      // TODO: Add opp, reload, check display
+    });
+  
+    it('should allow editing an existing opportunity', () => {
+      // TODO: Add opp, click edit, change fields, save, assert change, cleanup
+    });
+  
+     it('should allow deleting an opportunity', () => {
+      // TODO: Add opp, click delete, confirm, assert gone
+     });
+  
+  });
\ No newline at end of file
diff --git a/frontend/tests/e2e/professor-profile.cy.js b/frontend/tests/e2e/professor-profile.cy.js
new file mode 100644
index 0000000..fd2f2fb
--- /dev/null
+++ b/frontend/tests/e2e/professor-profile.cy.js
@@ -0,0 +1,172 @@
+// frontend/tests/e2e/professor-profile.cy.js
+
+describe('Professor Dashboard - Profile Tab', () => {
+    beforeEach(() => {
+      cy.login('professor');
+      // Wait using the specific test ID for the name display element
+      cy.get('[data-testid="prof-profile-name-display"]', { timeout: 15000 }).should('be.visible');
+    });
+  
+    it('should display the professor\'s current profile information', () => {
+       cy.fixture('users.json').then((users) => {
+           cy.get('[data-testid="prof-profile-name-display"]').should('contain', users.professor.name);
+           // Add checks for other fields using their '-display' test IDs
+           // cy.get('[data-testid="prof-profile-department-display"]').should(...);
+           // cy.get('[data-testid="prof-profile-headline-display"]').should(...);
+       });
+    });
+  
+    // --- IMPLEMENT THIS TEST ---
+    it('should allow editing and saving the professor\'s name', () => {
+      const newName = `Test Professor Edited ${Date.now()}`;
+  
+      // 1. Click Edit button for name
+      cy.get('[data-testid="prof-profile-name-edit-button"]').should('be.visible').click();
+  
+      // 2. Find input wrapper, then input, clear, type
+      cy.get('[data-testid="prof-profile-name-input-wrapper"]').should('be.visible')
+        .find('input') // Find the actual <input> element
+        .clear()
+        .type(newName);
+  
+      // 3. Click Save button
+      cy.get('[data-testid="prof-profile-name-save-button"]').should('be.visible').click();
+  
+      // 4. Assert new name is displayed
+      cy.get('[data-testid="prof-profile-name-display"]', { timeout: 10000 })
+        .should('be.visible')
+        .and('contain', newName);
+  
+      // 5. Reload and verify persistence
+      cy.reload();
+      cy.get('[data-testid="prof-profile-name-display"]', { timeout: 10000 }) // Wait after reload
+         .should('be.visible')
+         .and('contain', newName);
+  
+      // --- Optional: Revert Name ---
+      cy.fixture('users.json').then((users) => {
+          cy.get('[data-testid="prof-profile-name-edit-button"]').should('be.visible').click();
+          cy.get('[data-testid="prof-profile-name-input-wrapper"]').should('be.visible')
+            .find('input')
+            .clear()
+            .type(users.professor.name); // Type original name back
+          cy.get('[data-testid="prof-profile-name-save-button"]').should('be.visible').click();
+          cy.get('[data-testid="prof-profile-name-display"]', { timeout: 10000 })
+            .should('be.visible')
+            .and('contain', users.professor.name); // Verify it's reverted
+       });
+      // --- End Revert ---
+    });
+    // --- END IMPLEMENTED TEST ---
+  
+    it('should allow editing and saving the professor\'s department', () => {
+        const newDepartment = `Test Dept ${Date.now()}`;
+        const testIdPrefix = 'prof-profile-department';
+   
+        cy.get(`[data-testid="${testIdPrefix}-edit-button"]`).should('be.visible').click();
+        cy.get(`[data-testid="${testIdPrefix}-input-wrapper"]`).should('be.visible')
+          .find('input').clear().type(newDepartment);
+        cy.get(`[data-testid="${testIdPrefix}-save-button"]`).should('be.visible').click();
+        cy.get(`[data-testid="${testIdPrefix}-display"]`, { timeout: 10000 })
+          .should('be.visible').and('contain', newDepartment);
+        cy.reload();
+        cy.get(`[data-testid="${testIdPrefix}-display"]`, { timeout: 10000 })
+          .should('be.visible').and('contain', newDepartment);
+   
+        // Revert
+        cy.get(`[data-testid="${testIdPrefix}-edit-button"]`).should('be.visible').click();
+        cy.get(`[data-testid="${testIdPrefix}-input-wrapper"]`).should('be.visible')
+          .find('input').clear(); // Revert to empty
+        cy.get(`[data-testid="${testIdPrefix}-save-button"]`).should('be.visible').click();
+        // Check for the specific empty text used in ProfileInfoSection
+        cy.get(`[data-testid="${testIdPrefix}-display"]`, { timeout: 10000 })
+          .should('be.visible').and('contain', '(Not set)');
+     });
+   
+      it('should allow editing and saving the professor\'s headline', () => {
+        const newHeadline = `Test Headline ${Date.now()}`;
+        const testIdPrefix = 'prof-profile-headline';
+   
+        cy.get(`[data-testid="${testIdPrefix}-edit-button"]`).should('be.visible').click();
+        cy.get(`[data-testid="${testIdPrefix}-input-wrapper"]`).should('be.visible')
+          .find('input').clear().type(newHeadline);
+        cy.get(`[data-testid="${testIdPrefix}-save-button"]`).should('be.visible').click();
+        cy.get(`[data-testid="${testIdPrefix}-display"]`, { timeout: 10000 })
+          .should('be.visible').and('contain', newHeadline);
+        cy.reload();
+        cy.get(`[data-testid="${testIdPrefix}-display"]`, { timeout: 10000 })
+          .should('be.visible').and('contain', newHeadline);
+   
+        // Revert
+        cy.get(`[data-testid="${testIdPrefix}-edit-button"]`).should('be.visible').click();
+        cy.get(`[data-testid="${testIdPrefix}-input-wrapper"]`).should('be.visible')
+          .find('input').clear();
+        cy.get(`[data-testid="${testIdPrefix}-save-button"]`).should('be.visible').click();
+        cy.get(`[data-testid="${testIdPrefix}-display"]`, { timeout: 10000 })
+          .should('be.visible').and('contain', '(No headline)');
+      });
+   
+      it('should allow editing and saving the professor\'s pronouns', () => {
+        const newPronouns = `they/them/${Date.now()}`; // Add timestamp for uniqueness
+        const testIdPrefix = 'prof-profile-pronouns';
+   
+        cy.get(`[data-testid="${testIdPrefix}-edit-button"]`).should('be.visible').click();
+        cy.get(`[data-testid="${testIdPrefix}-input-wrapper"]`).should('be.visible')
+          .find('input').clear().type(newPronouns);
+        cy.get(`[data-testid="${testIdPrefix}-save-button"]`).should('be.visible').click();
+        cy.get(`[data-testid="${testIdPrefix}-display"]`, { timeout: 10000 })
+          .should('be.visible').and('contain', newPronouns);
+        cy.reload();
+        cy.get(`[data-testid="${testIdPrefix}-display"]`, { timeout: 10000 })
+          .should('be.visible').and('contain', newPronouns);
+   
+         // Revert
+        cy.get(`[data-testid="${testIdPrefix}-edit-button"]`).should('be.visible').click();
+        cy.get(`[data-testid="${testIdPrefix}-input-wrapper"]`).should('be.visible')
+          .find('input').clear();
+        cy.get(`[data-testid="${testIdPrefix}-save-button"]`).should('be.visible').click();
+        cy.get(`[data-testid="${testIdPrefix}-display"]`, { timeout: 10000 })
+          .should('be.visible').and('contain', '(Not set)');
+      });
+   
+      it('should allow editing and saving the professor\'s about section', () => {
+        const newAbout = `New professor about section added by Cypress at ${new Date().toISOString()}`;
+        const testIdPrefix = 'prof-profile-about';
+    
+        cy.get(`[data-testid="${testIdPrefix}-edit-button"]`).should('be.visible').click();
+    
+        // Get the wrapper, find textareas within it, filter for the visible one, then clear/type
+        cy.get(`[data-testid="${testIdPrefix}-input-wrapper"]`)
+          .should('be.visible')
+          .find('textarea') // Find potentially multiple textareas
+          .filter(':visible') // Filter down to only the visible one(s)
+          .first() // Explicitly take the first one if multiple are somehow visible
+          .clear({ force: true }) // Now clear should work
+          .type(newAbout, { force: true });
+    
+        cy.get(`[data-testid="${testIdPrefix}-save-button"]`).should('be.visible').click();
+        cy.get(`[data-testid="${testIdPrefix}-display"]`, { timeout: 10000 })
+           // Using 'include.text' might be better for multi-line content than 'contain'
+          .should('be.visible').and('include.text', newAbout.substring(0, 50)); // Check start of text
+    
+        cy.reload();
+        cy.get(`[data-testid="${testIdPrefix}-display"]`, { timeout: 10000 })
+          .should('be.visible').and('include.text', newAbout.substring(0, 50));
+    
+        // Revert
+        cy.get(`[data-testid="${testIdPrefix}-edit-button"]`).should('be.visible').click();
+        cy.get(`[data-testid="${testIdPrefix}-input-wrapper"]`).should('be.visible')
+        .find('textarea')
+        .filter(':visible')
+        .first()
+        .clear({ force: true });
+        cy.get(`[data-testid="${testIdPrefix}-save-button"]`).should('be.visible').click();
+
+        // --- CHANGE THIS ASSERTION ---
+        cy.get(`[data-testid="${testIdPrefix}-display"]`, { timeout: 10000 })
+        .should('be.visible')
+        // Assert it contains the PLACEHOLDER text now, not the emptyText
+        .and('contain', '(Provide a brief description about yourself)');
+        // --- END CHANGE ---
+      });
+  });
\ No newline at end of file
diff --git a/frontend/tests/e2e/student-profile.cy.js b/frontend/tests/e2e/student-profile.cy.js
new file mode 100644
index 0000000..258eb13
--- /dev/null
+++ b/frontend/tests/e2e/student-profile.cy.js
@@ -0,0 +1,148 @@
+// frontend/tests/e2e/student-profile.cy.js
+/// <reference types="cypress" />
+// This test suite is for the student dashboard profile tab functionality.
+
+describe('Student Dashboard - Profile Tab', () => {
+    beforeEach(() => {
+      cy.login('student'); // Use our custom login command
+      // Wait for profile tab & name display to ensure page is ready
+      cy.get('[data-testid="tab-profile"]', { timeout: 15000 }).should('be.visible');
+      cy.get('[data-testid="profile-name-display"]', { timeout: 10000 }).should('be.visible');
+    });
+  
+    it('should display the student\'s current profile information', () => {
+       cy.fixture('users.json').then((users) => {
+           // Use the test ID for the display element
+           cy.get('[data-testid="profile-name-display"]').should('contain', users.student.name);
+           // cy.get('[data-testid="profile-major-display"]').should(...); // Add checks for other fields
+       });
+    });
+  
+    it('should allow editing and saving the student\'s name', () => {
+      const newName = `Test Student Edited ${Date.now()}`; // Unique name
+  
+      // 1. Click the Edit button associated with the name
+      cy.get('[data-testid="profile-name-edit-button"]').should('be.visible').click();
+  
+      // 2. Find the TextField wrapper, then the input inside, clear, and type
+      cy.get('[data-testid="profile-name-input-wrapper"]').should('be.visible')
+        .find('input') // Find the actual <input> element
+        .clear()
+        .type(newName);
+  
+      // 3. Click the Save button associated with the name
+      cy.get('[data-testid="profile-name-save-button"]').should('be.visible').click();
+  
+      // 4. Assert the new name is displayed (wait for display element to reappear)
+      cy.get('[data-testid="profile-name-display"]', { timeout: 10000 })
+        .should('be.visible')
+        .and('contain', newName);
+  
+      // 5. Reload and verify persistence
+      cy.reload();
+      cy.get('[data-testid="profile-name-display"]', { timeout: 10000 })
+         .should('be.visible')
+         .and('contain', newName);
+  
+      // --- Optional: Revert the name back for subsequent tests ---
+      // (Good practice if tests depend on the original name)
+      cy.fixture('users.json').then((users) => {
+          cy.get('[data-testid="profile-name-edit-button"]').should('be.visible').click();
+          cy.get('[data-testid="profile-name-input-wrapper"]').should('be.visible')
+            .find('input')
+            .clear()
+            .type(users.student.name); // Type original name back
+          cy.get('[data-testid="profile-name-save-button"]').should('be.visible').click();
+          cy.get('[data-testid="profile-name-display"]', { timeout: 10000 })
+            .should('be.visible')
+            .and('contain', users.student.name); // Verify it's reverted
+       });
+      // --- End Revert ---
+    });
+  
+    it('should allow editing and saving the student\'s major', () => {
+        const newMajor = `Test Major ${Date.now()}`;
+        const testIdPrefix = 'profile-major';
+   
+        cy.get(`[data-testid="${testIdPrefix}-edit-button"]`).should('be.visible').click();
+        cy.get(`[data-testid="${testIdPrefix}-input-wrapper"]`).should('be.visible')
+          .find('input').clear().type(newMajor);
+        cy.get(`[data-testid="${testIdPrefix}-save-button"]`).should('be.visible').click();
+        cy.get(`[data-testid="${testIdPrefix}-display"]`, { timeout: 10000 })
+          .should('be.visible').and('contain', newMajor);
+        cy.reload();
+        cy.get(`[data-testid="${testIdPrefix}-display"]`, { timeout: 10000 })
+          .should('be.visible').and('contain', newMajor);
+   
+        // Revert (Optional - revert to empty or original value if needed)
+        cy.get(`[data-testid="${testIdPrefix}-edit-button"]`).should('be.visible').click();
+        cy.get(`[data-testid="${testIdPrefix}-input-wrapper"]`).should('be.visible')
+          .find('input').clear(); // Clear it back to empty
+        cy.get(`[data-testid="${testIdPrefix}-save-button"]`).should('be.visible').click();
+        cy.get(`[data-testid="${testIdPrefix}-display"]`, { timeout: 10000 })
+          .should('be.visible').and('contain', '(Not set)'); // Check for empty text
+     });
+   
+     it('should allow editing and saving the student\'s year', () => {
+        const newYear = `Test Year ${Date.now()}`;
+        const testIdPrefix = 'profile-year';
+   
+        cy.get(`[data-testid="${testIdPrefix}-edit-button"]`).should('be.visible').click();
+        cy.get(`[data-testid="${testIdPrefix}-input-wrapper"]`).should('be.visible')
+          .find('input').clear().type(newYear);
+        cy.get(`[data-testid="${testIdPrefix}-save-button"]`).should('be.visible').click();
+        cy.get(`[data-testid="${testIdPrefix}-display"]`, { timeout: 10000 })
+          .should('be.visible').and('contain', newYear);
+        cy.reload();
+        cy.get(`[data-testid="${testIdPrefix}-display"]`, { timeout: 10000 })
+          .should('be.visible').and('contain', newYear);
+   
+        // Revert
+        cy.get(`[data-testid="${testIdPrefix}-edit-button"]`).should('be.visible').click();
+        cy.get(`[data-testid="${testIdPrefix}-input-wrapper"]`).should('be.visible')
+          .find('input').clear();
+        cy.get(`[data-testid="${testIdPrefix}-save-button"]`).should('be.visible').click();
+        cy.get(`[data-testid="${testIdPrefix}-display"]`, { timeout: 10000 })
+          .should('be.visible').and('contain', '(Not set)');
+     });
+   
+     it('should allow editing and saving the student\'s description', () => {
+        const newDescription = `Test student description added by Cypress at ${new Date().toLocaleTimeString()}`;
+        const testIdPrefix = 'profile-description';
+    
+        cy.get(`[data-testid="${testIdPrefix}-edit-button"]`).should('be.visible').click();
+    
+        // *** APPLY THE FIX HERE ***
+        cy.get(`[data-testid="${testIdPrefix}-input-wrapper"]`)
+          .should('be.visible')
+          .find('textarea')      // Find textareas
+          .filter(':visible')    // Filter for the visible one
+          .first()               // Select the first visible one
+          .clear({ force: true })  // Force clear
+          .type(newDescription, { force: true }); // Force type
+        // *** END FIX ***
+    
+        cy.get(`[data-testid="${testIdPrefix}-save-button"]`).should('be.visible').click();
+        cy.get(`[data-testid="${testIdPrefix}-display"]`, { timeout: 10000 })
+          .should('be.visible').and('include.text', newDescription.substring(0, 50)); // Check partial text
+        cy.reload();
+        cy.get(`[data-testid="${testIdPrefix}-display"]`, { timeout: 10000 })
+          .should('be.visible').and('include.text', newDescription.substring(0, 50));
+    
+        // Revert
+        cy.get(`[data-testid="${testIdPrefix}-edit-button"]`).should('be.visible').click();
+        cy.get(`[data-testid="${testIdPrefix}-input-wrapper"]`).should('be.visible')
+        .find('textarea')
+        .filter(':visible')
+        .first()
+        .clear({ force: true }); // Force clear
+        cy.get(`[data-testid="${testIdPrefix}-save-button"]`).should('be.visible').click();
+
+        // --- CHANGE THIS ASSERTION ---
+        // Check for the actual PLACEHOLDER text displayed when the value is empty
+        cy.get(`[data-testid="${testIdPrefix}-display"]`, { timeout: 10000 })
+        .should('be.visible')
+        .and('contain', '(Tell professors a bit about yourself)'); // <<< Use the placeholder text
+        // --- END CHANGE ---
+      });
+  });
\ No newline at end of file
diff --git a/frontend/tests/fixtures/users.json b/frontend/tests/fixtures/users.json
index 1305827..4fc9b21 100644
--- a/frontend/tests/fixtures/users.json
+++ b/frontend/tests/fixtures/users.json
@@ -1,9 +1,11 @@
 {
     "student": {
+      "name": "Test Student",
       "email": "test-student@example.com",
       "password": "password123"
     },
     "professor": {
+      "name": "Test Professor",
       "email": "test-professor@example.com",
       "password": "password123"
     },
diff --git a/frontend/tests/support/commands.js b/frontend/tests/support/commands.js
index 66ea16e..1c5d3cb 100644
--- a/frontend/tests/support/commands.js
+++ b/frontend/tests/support/commands.js
@@ -1,25 +1,40 @@
-// ***********************************************
-// This example commands.js shows you how to
-// create various custom commands and overwrite
-// existing commands.
-//
-// For more comprehensive examples of custom
-// commands please read more here:
-// https://on.cypress.io/custom-commands
-// ***********************************************
-//
-//
-// -- This is a parent command --
-// Cypress.Commands.add('login', (email, password) => { ... })
-//
-//
-// -- This is a child command --
-// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
-//
-//
-// -- This is a dual command --
-// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
-//
-//
-// -- This will overwrite an existing command --
-// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
\ No newline at end of file
+// frontend/tests/support/commands.js
+
+/**
+ * Logs in a user via the UI.
+ * @param {string} userType - The type of user ('student' or 'professor') from fixtures/users.json
+ */
+Cypress.Commands.add('login', (userType) => {
+    cy.log(`Logging in as ${userType}`);
+
+    // Load credentials from fixture
+    cy.fixture('users.json').then((users) => {
+      const user = users[userType];
+      if (!user) {
+        throw new Error(`User type "${userType}" not found in fixtures/users.json`);
+      }
+
+      // Visit the auth page, ensuring login mode
+      cy.visit('/auth', { state: { initialMode: 'login' } });
+      cy.get('[data-testid="auth-paper"]', { timeout: 10000 }).should('be.visible');
+
+      // Select the correct role toggle
+      if (userType === 'student') {
+        cy.get('[data-testid="role-student-button"]').should('have.attr', 'aria-pressed', 'true'); // Default, just check
+      } else if (userType === 'professor') {
+        cy.get('[data-testid="role-professor-button"]').click().should('have.attr', 'aria-pressed', 'true');
+      }
+
+      // Type credentials and submit
+      cy.get('[data-testid="email-input"]').should('be.visible').type(user.email);
+      cy.get('[data-testid="password-input"]').should('be.visible').type(user.password);
+      cy.get('[data-testid="submit-button"]').should('be.visible').click();
+
+      // Wait for navigation to the correct dashboard
+      const dashboardUrl = userType === 'student' ? '/student-dashboard' : '/professor-dashboard';
+      cy.url({ timeout: 15000 }).should('include', dashboardUrl); // Increased timeout slightly for login+redirect
+
+      // Optional: Add a small wait for dashboard elements to settle after login
+      // cy.wait(500);
+    });
+  });
\ No newline at end of file
diff --git a/frontend/tests/support/e2e.js b/frontend/tests/support/e2e.js
index 3eaffff..5191f41 100644
--- a/frontend/tests/support/e2e.js
+++ b/frontend/tests/support/e2e.js
@@ -1,17 +1,16 @@
-// ***********************************************************
-// This example support/e2e.js is processed and
-// loaded automatically before your test files.
-//
-// This is a great place to put global configuration and
-// behavior that modifies Cypress.
-//
-// You can change the location of this file or turn off
-// automatically serving support files with the
-// 'supportFile' configuration option.
-//
-// You can read more here:
-// https://on.cypress.io/configuration
-// ***********************************************************
+// frontend/tests/support/e2e.js
+/* global Cypress */
 
-// Import commands.js using ES2015 syntax:
-import './commands'
\ No newline at end of file
+import './commands';
+
+// You can put other global configurations here
+Cypress.on('uncaught:exception', (err, runnable) => {
+  // returning false here prevents Cypress from failing the test
+  // on certain non-critical errors (use with caution)
+  // Example: Sometimes ResizeObserver errors can be ignored
+  // if (err.message.includes('ResizeObserver loop limit exceeded')) {
+  //   return false;
+  // }
+  // Allow other errors to fail the test
+  return true;
+});
\ No newline at end of file