diff --git a/packages/frontend/src/components/DragAndDrop/SortableItem.tsx b/packages/frontend/src/components/DragAndDrop/SortableItem.tsx
index fd4535b5..a8418e92 100644
--- a/packages/frontend/src/components/DragAndDrop/SortableItem.tsx
+++ b/packages/frontend/src/components/DragAndDrop/SortableItem.tsx
@@ -62,12 +62,14 @@ export function SortableItem({ children, id }: PropsWithChildren<Props>) {
 interface DragHandleProps {
     style?: CSSProperties;
     disabled?: boolean;
+    ariaLabel?: string;
+    testId?: string;
 }
-export function DragHandle({ style, disabled }: DragHandleProps) {
+export function DragHandle({ style, disabled, ariaLabel }: DragHandleProps) {
   const { attributes, listeners, ref } = useContext(SortableItemContext);
 
   return (
-    <IconButton  {...attributes} {...listeners} ref={ref} style={style} disabled={disabled}>
+    <IconButton  {...attributes} {...listeners} ref={ref} style={style} disabled={disabled} aria-label={ariaLabel}>
         <MuiDragHandle />
     </IconButton>
   );
diff --git a/packages/frontend/src/components/Election/ElectionHome.tsx b/packages/frontend/src/components/Election/ElectionHome.tsx
index 89ae2144..fe3c72b4 100644
--- a/packages/frontend/src/components/Election/ElectionHome.tsx
+++ b/packages/frontend/src/components/Election/ElectionHome.tsx
@@ -71,7 +71,7 @@ const ElectionHome = () => {
                 voterAuth.has_voted == false && voterAuth.authorized_voter && !voterAuth.required &&
 
                 <Box display='flex' flexDirection='column' alignItems='center' gap={5} sx={{ p: 1}}>
-                  <Button fullWidth variant='contained' href={`/${String(election?.election_id)}/vote`} >
+                  <Button role='button' name='vote' fullWidth variant='contained' href={`/${String(election?.election_id)}/vote`} >
                     <Typography align='center' variant="h3" component="h3" fontWeight='bold' sx={{ p: 2 }}>
                       {t('election_home.vote')}
                     </Typography>
@@ -87,7 +87,7 @@ const ElectionHome = () => {
 
             {election.state === 'draft' && <>
               <Box display='flex' flexDirection='column' alignItems='center' gap={5} sx={{ p: 1}}>
-                <Button fullWidth variant='contained' href={`/${String(election?.election_id)}/vote`} >
+                <Button role='button' name='vote' fullWidth variant='contained' href={`/${String(election?.election_id)}/vote`} >
                   <Typography align='center' variant="h3" component="h3" fontWeight='bold' sx={{ p: 2 }}>
                     {t('election_home.vote')}
                   </Typography>
diff --git a/packages/frontend/src/components/Election/Voting/GenericBallotView/BubbleGrid.tsx b/packages/frontend/src/components/Election/Voting/GenericBallotView/BubbleGrid.tsx
index b9031a79..4b47e845 100644
--- a/packages/frontend/src/components/Election/Voting/GenericBallotView/BubbleGrid.tsx
+++ b/packages/frontend/src/components/Election/Voting/GenericBallotView/BubbleGrid.tsx
@@ -1,7 +1,8 @@
 import React, { useCallback, useMemo } from 'react';
-import { Box, Typography } from '@mui/material';
+import { Box, BoxProps, Button, Typography } from '@mui/material';
 import { Candidate } from '@equal-vote/star-vote-shared/domain_model/Candidate';
 import { IBallotContext } from '../VotePage';
+import styled from '@emotion/styled';
 
 
 interface BubbleGridProps {
@@ -14,14 +15,21 @@ interface BubbleGridProps {
   fontSX: object;
 }
 
+const NoStyleButton = styled(Button)({
+  all: 'unset',
+  display: 'inline-block',
+  cursor: 'pointer',
+});
+
+
 const BubbleGrid: React.FC<BubbleGridProps> = ({ ballotContext, columnValues, columns, numHeaderRows, onClick, makeArea, fontSX }) => {
   const { candidates, instructionsRead, alertBubbles } = ballotContext;
   // Step 1: Create a triplet of candidateIndex, columnIndex, and columnValue for each candidate
 
   const candidateColumnPairsNested = useMemo(() => {
-    return candidates.map((_, candidateIndex) =>
+    return candidates.map((candidate, candidateIndex) =>
       columnValues.map((columnValue, columnIndex) =>
-        [candidateIndex, columnIndex, columnValue]
+        [candidateIndex, columnIndex, columnValue, candidate.candidate_name] as [number, number, number, string] // Add candidate name for accessibility
       )
     );
   }, [candidates, columnValues]);
@@ -46,13 +54,14 @@ const BubbleGrid: React.FC<BubbleGridProps> = ({ ballotContext, columnValues, co
   // Step 3: Map over the flattened array to render the Box components
   return (
     <>
-      {candidateColumnPairsFlat.map(([candidateIndex, columnIndex, columnValue]) => (
-        <Box
+      {candidateColumnPairsFlat.map(([candidateIndex, columnIndex, columnValue, candidate_name]) => (
+        <button
           key={`${candidateIndex}-${columnIndex}`}
+          role='button'
+          name={`${candidate_name}_rank-${columnValue}`}
           className={className(candidateIndex, columnValue)}
           onClick={() => onClick(candidateIndex, columnValue)}
-          sx={{
-            margin: 'auto',
+          style={{
             //For Rows:
             //numHeaderRows offsets grid to account for header rows
             //+1 offsets grid to account for candidateIndex starting at 0
@@ -66,7 +75,7 @@ const BubbleGrid: React.FC<BubbleGridProps> = ({ ballotContext, columnValues, co
           <Typography variant='body1' sx={{ ...fontSX }}>
             {columns.length === 1 ? ' ' : columnValue}
           </Typography>
-        </Box>
+        </button>
       ))
       }
     </>
diff --git a/packages/frontend/src/components/Election/Voting/GenericBallotView/ColumnHeadings.tsx b/packages/frontend/src/components/Election/Voting/GenericBallotView/ColumnHeadings.tsx
index e582e90c..70c64abd 100644
--- a/packages/frontend/src/components/Election/Voting/GenericBallotView/ColumnHeadings.tsx
+++ b/packages/frontend/src/components/Election/Voting/GenericBallotView/ColumnHeadings.tsx
@@ -10,7 +10,7 @@ interface ColumnHeadingsProps {
 }
 export default function ColumnHeadings({ columnIndex, columnTitle, gridArea, starHeadings, fontSX }: ColumnHeadingsProps) {
     return (
-        <Box key={columnIndex} sx={{ gridArea: gridArea }}>
+        <Box key={columnIndex} sx={{ gridArea: gridArea }}className='column-headings'>
             {starHeadings &&
                 <ScoreIcon
                     // NOTE: I tried doing this in CSS with :first-child but it didn't work
diff --git a/packages/frontend/src/components/Election/Voting/GenericBallotView/GenericBallotGrid.tsx b/packages/frontend/src/components/Election/Voting/GenericBallotView/GenericBallotGrid.tsx
index 4407dc05..34bfbb44 100644
--- a/packages/frontend/src/components/Election/Voting/GenericBallotView/GenericBallotGrid.tsx
+++ b/packages/frontend/src/components/Election/Voting/GenericBallotView/GenericBallotGrid.tsx
@@ -117,7 +117,7 @@ export default function GenericBallotGrid({
             {rowBackgrounds}
             {/* Column Warnings */}
             {ballotContext.warningColumns && ballotContext.warningColumns.map((columnValue, columnIndex) =>
-                <Box key={columnIndex}
+                <Box key={columnIndex} aria-label={`warning-skipped-column-${columnValue}`}
                     sx={{
                         gridArea: makeArea(1, 1 + columnValue, 1, numHeaderRows + 1 + ballotContext.candidates.length * 2),
                         height: '100%',
diff --git a/packages/frontend/src/components/Election/Voting/VotePage.tsx b/packages/frontend/src/components/Election/Voting/VotePage.tsx
index abc49017..e82f026f 100644
--- a/packages/frontend/src/components/Election/Voting/VotePage.tsx
+++ b/packages/frontend/src/components/Election/Voting/VotePage.tsx
@@ -186,6 +186,10 @@ const VotePage = () => {
   if(pages.length == 0){
     return <Container disableGutters={true} maxWidth="sm"><h3>No races created for election</h3></Container>
   }
+  const isOnLastPage = currentPage === pages.length - 1
+  const noScores = pages.every(page => page.candidates.every(candidate => candidate.score === null))
+  const thereAreWarnings = pages.some(page => page.warnings)
+  const submitButtonDisabled = !isOnLastPage || (isPending || noScores || thereAreWarnings)
 
   return (
     <Container disableGutters={true} maxWidth="sm">
@@ -255,8 +259,9 @@ const VotePage = () => {
       <Box sx={{ display: 'flex', justifyContent: "space-between" }}>
         <Button
           variant='contained'
+          name='submit-ballot'
           onClick={() => setIsOpen(true)}
-          disabled={isPending || currentPage !== pages.length - 1 || pages[currentPage].candidates.every(candidate => candidate.score === null || pages.some(page => page.warnings))}//disable unless on last page and at least one candidate scored
+          disabled={submitButtonDisabled}//disable unless on last page and at least one candidate scored
           style={{ margin: "auto", minWidth: "150px", marginTop: "40px" }}>
               <Typography variant="h6">{t('ballot.submit_ballot')}</Typography>
         </Button>
diff --git a/packages/frontend/src/components/ElectionForm/Candidates/AddCandidate.tsx b/packages/frontend/src/components/ElectionForm/Candidates/AddCandidate.tsx
index 380cf48d..61f895af 100644
--- a/packages/frontend/src/components/ElectionForm/Candidates/AddCandidate.tsx
+++ b/packages/frontend/src/components/ElectionForm/Candidates/AddCandidate.tsx
@@ -307,8 +307,17 @@ const CandidateDialog = ({ onEditCandidate, candidate, index, onSave, open, hand
         </Dialog>
     )
 }
-
-export const CandidateForm = ({ onEditCandidate, candidate, index, onDeleteCandidate, disabled, inputRef, onKeyDown}) => {
+interface CandidateFormProps {
+    onEditCandidate: (newCandidate: Candidate) => void,
+    candidate: Candidate,
+    index: number,
+    onDeleteCandidate: () => void,
+    disabled: boolean,
+    inputRef: (el: React.MutableRefObject<any[]>) => React.MutableRefObject<any[]>,
+    onKeyDown: (e: React.KeyboardEvent<HTMLInputElement>) => void,
+    electionState: string
+}
+export const CandidateForm = ({ onEditCandidate, candidate, index, onDeleteCandidate, disabled, inputRef, onKeyDown, electionState}: CandidateFormProps) => {
 
     const [open, setOpen] = React.useState(false);
     const handleOpen = () => setOpen(true);
@@ -316,18 +325,18 @@ export const CandidateForm = ({ onEditCandidate, candidate, index, onDeleteCandi
     const flags = useFeatureFlags();
     const onSave = () => { handleClose() }
     return (
-        <Paper elevation={4} sx={{ width: '100%' }}>
+        <Paper elevation={4} sx={{ width: '100%' }} aria-label={`candidate-form-${index + 1}`}>
             <Box
                 sx={{ display: 'flex', justifyContent: 'space-between', bgcolor: 'background.paper', borderRadius: 10 }}
                 alignItems={'center'}
             >
-                <DragHandle style={{marginLeft: 5}} disabled={disabled}/>
+                <DragHandle style={{marginLeft: 5}} disabled={disabled} ariaLabel={`drag-candidate-number-${index + 1}`}/>
 
                 <Box sx={{ overflow: 'hidden', textOverflow: 'ellipsis', width: '100%', pl: 2 }}>
                     <TextField
-                        id={'candidate-name'}
-                        name="new-candidate-name"
-                        // label={"Candidate Name"}
+                        id={`candidate-name-${index + 1}`}
+                        name={`candidate-name-${index + 1}`}
+                        data-testid={`candidate-name-${index + 1}`}
                         type="text"
                         value={candidate.candidate_name}
                         fullWidth
@@ -336,6 +345,7 @@ export const CandidateForm = ({ onEditCandidate, candidate, index, onDeleteCandi
                         onChange={(e) => onEditCandidate({ ...candidate, candidate_name: e.target.value })}
                         inputRef={inputRef}
                         onKeyDown={onKeyDown}
+                        disabled={electionState !== 'draft'}
                     />
                 </Box>                    
 
@@ -348,7 +358,8 @@ export const CandidateForm = ({ onEditCandidate, candidate, index, onDeleteCandi
                     </IconButton>
     }
                 <IconButton
-                    aria-label="delete"
+                    aria-label={`delete-candidate-number-${index + 1}`}
+                    name={`delete-${candidate.candidate_name}`}
                     color="error"
                     onClick={onDeleteCandidate}
                     disabled={disabled}>
@@ -360,7 +371,7 @@ export const CandidateForm = ({ onEditCandidate, candidate, index, onDeleteCandi
     )
 }
 
-const AddCandidate = ({ onAddNewCandidate }) => {
+const AddCandidate = ({ onAddNewCandidate, index }) => {
 
     const handleEnter = (e) => {
         saveNewCandidate()
diff --git a/packages/frontend/src/components/ElectionForm/CreateElectionDialog.tsx b/packages/frontend/src/components/ElectionForm/CreateElectionDialog.tsx
index 789464ba..76261db2 100644
--- a/packages/frontend/src/components/ElectionForm/CreateElectionDialog.tsx
+++ b/packages/frontend/src/components/ElectionForm/CreateElectionDialog.tsx
@@ -282,7 +282,7 @@ export default () => {
                             setErrors={setErrors}
                             showLabel={false}
                         />
-                        <StepButtons activeStep={activeStep} setActiveStep={setActiveStep} canContinue={election.title != '' && errors.title == ''}/>
+                        <StepButtons activeStep={activeStep} setActiveStep={setActiveStep} canContinue={/^[^\s][a-zA-Z0-9\s]{3,49}$/.test(election.title) && errors.title == ''}/>
                     </StepContent>
                 </Step>
                 <Step>
diff --git a/packages/frontend/src/components/ElectionForm/Details/ElectionDetailsForm.tsx b/packages/frontend/src/components/ElectionForm/Details/ElectionDetailsForm.tsx
index 87506a59..facd914c 100644
--- a/packages/frontend/src/components/ElectionForm/Details/ElectionDetailsForm.tsx
+++ b/packages/frontend/src/components/ElectionForm/Details/ElectionDetailsForm.tsx
@@ -17,8 +17,8 @@ export const ElectionTitleField = ({termType, value, onUpdateValue, errors, setE
             inputProps={{ pattern: "[a-z]{3,15}" }}
             error={errors.title !== ''}
             required
-            id="election-name"
-            name="name"
+            id="election-title"
+            name="election-title"
             // TODO: This bolding method only works for the text fields, if we like it we should figure out a way to add it to other fields as well
             // inputProps={getStyle('title')}
             label={showLabel? t('election_details.title') : ""}
@@ -71,7 +71,7 @@ export default function ElectionDetailsForm({editedElection, applyUpdate, errors
             <Grid item xs={12} sx={{ m: 0, p: 1 }}>
                 <TextField
                     id="election-description"
-                    name="description"
+                    name="election-description"
                     label={t('election_details.description')}
                     multiline
                     fullWidth
@@ -125,10 +125,11 @@ export default function ElectionDetailsForm({editedElection, applyUpdate, errors
                 <>
                     <Grid item xs={4} sx={{ m: 0, p: 1 }} justifyContent='center'>
                         <FormControl fullWidth>
-                            <InputLabel id="demo-simple-select-label">{t('election_details.time_zone')}</InputLabel>
+                            <InputLabel id="time-zone-label">{t('election_details.time_zone')}</InputLabel>
                             <Select
-                                labelId="demo-simple-select-label"
-                                id="demo-simple-select"
+                                labelId="time-zone-label"
+                                id="time-zone-select"
+                                name='edit-time-zone'
                                 value={timeZone}
                                 label={t('election_details.time_zone')}
                                 onChange={(e) => {
@@ -152,6 +153,8 @@ export default function ElectionDetailsForm({editedElection, applyUpdate, errors
                             {/* datetime-local is formatted according to the OS locale, I don't think there's a way to override it*/}
                             <Input
                                 type='datetime-local'
+                                name='edit-start-time'
+                                data-testid='start-time'
                                 error={errors.startTime !== ''}
                                 value={dateToLocalLuxonDate(editedElection.start_time, timeZone)}
                                 onChange={(e) => {
@@ -176,6 +179,8 @@ export default function ElectionDetailsForm({editedElection, applyUpdate, errors
                             {/* datetime-local is formatted according to the OS locale, I don't think there's a way to override it*/}
                             <Input
                                 type='datetime-local'
+                                name='edit-end-time'
+                                data-testid='end-time'
                                 error={errors.endTime !== ''}
                                 value={dateToLocalLuxonDate(editedElection.end_time, timeZone)}
                                 onChange={(e) => {
diff --git a/packages/frontend/src/components/ElectionForm/Details/ElectionDetailsInlineForm.tsx b/packages/frontend/src/components/ElectionForm/Details/ElectionDetailsInlineForm.tsx
index 878db329..3b27a2cd 100644
--- a/packages/frontend/src/components/ElectionForm/Details/ElectionDetailsInlineForm.tsx
+++ b/packages/frontend/src/components/ElectionForm/Details/ElectionDetailsInlineForm.tsx
@@ -65,7 +65,8 @@ export default function ElectionDetailsInlineForm() {
 
                         <Box sx={{}}>
                             <IconButton
-                                aria-label="edit"
+                                aria-label="edit-election-details"
+                                name="edit-election-details"
                                 disabled={election.state!=='draft'}
                                 onClick={handleOpen}>
                                 <EditIcon />
diff --git a/packages/frontend/src/components/ElectionForm/ElectionSettings.tsx b/packages/frontend/src/components/ElectionForm/ElectionSettings.tsx
index 89bfa89d..fffd88e7 100644
--- a/packages/frontend/src/components/ElectionForm/ElectionSettings.tsx
+++ b/packages/frontend/src/components/ElectionForm/ElectionSettings.tsx
@@ -82,13 +82,14 @@ export default function ElectionSettings() {
                 </Box>
                 <Box sx={{ flexShrink: 1, p: 1 }}>
                     <IconButton
-                        aria-label="edit"
+                        aria-label="edit-settings"
+                        name="edit-settings"
                         onClick={handleOpen}>
                         <EditIcon />
                     </IconButton>
                 </Box>
             </Box>
-            <Dialog
+            {open && <Dialog
                 open={open}
                 onClose={handleClose}
             >
@@ -111,6 +112,7 @@ export default function ElectionSettings() {
 
                                 <TextField
                                     id="rank-limit"
+                                    name="rank-limit"
                                     type="number"
                                     value={editedElectionSettings.max_rankings ? editedElectionSettings.max_rankings : default_rankings}
                                     onChange={(e) => applySettingsUpdate((settings) => { settings.max_rankings = Number(e.target.value) })}
@@ -142,7 +144,7 @@ export default function ElectionSettings() {
                         {t('keyword.save')}
                     </StyledButton>
                 </DialogActions>
-            </Dialog>
+            </Dialog>}
         </Paper>
     )
 }
diff --git a/packages/frontend/src/components/ElectionForm/Races/AddRace.tsx b/packages/frontend/src/components/ElectionForm/Races/AddRace.tsx
index 485c4b5e..4d320f5e 100644
--- a/packages/frontend/src/components/ElectionForm/Races/AddRace.tsx
+++ b/packages/frontend/src/components/ElectionForm/Races/AddRace.tsx
@@ -28,6 +28,8 @@ export default function AddRace() {
         }}>
             <StyledButton
                 type='button'
+                name='add-race'
+                aria-label='add-race'
                 variant="contained"
                 fullWidth={false}
                 sx={{ borderRadius: 28, backgroundColor: 'brand.green' }}
@@ -35,7 +37,7 @@ export default function AddRace() {
                 disabled={election.state!=='draft'}>
                 Add
             </StyledButton>
-            <RaceDialog onSaveRace={onAdd} open={open} handleClose={handleClose} editedRace={editedRace}>
+            {open && <RaceDialog onSaveRace={onAdd} open={open} handleClose={handleClose} editedRace={editedRace}>
                 <RaceForm
                     race_index={election.races.length}
                     editedRace={editedRace}
@@ -43,7 +45,7 @@ export default function AddRace() {
                     setErrors={setErrors}
                     applyRaceUpdate={applyRaceUpdate}
                 />
-            </RaceDialog>
+            </RaceDialog>}
         </Box>
     )
 }
diff --git a/packages/frontend/src/components/ElectionForm/Races/Race.tsx b/packages/frontend/src/components/ElectionForm/Races/Race.tsx
index 79a54e30..43217a7f 100644
--- a/packages/frontend/src/components/ElectionForm/Races/Race.tsx
+++ b/packages/frontend/src/components/ElectionForm/Races/Race.tsx
@@ -54,7 +54,9 @@ export default function Race({ race, race_index }) {
                 <Box sx={{ flexShrink: 1, p: 1 }}>
                     <Tooltip title='Edit'>
                         <IconButton
-                            aria-label="edit"
+                            aria-label={`edit-${race.title}`}
+                            role='button'
+                            name={`edit-${race.title}`}
                             onClick={handleOpen}>
                             {election.state === 'draft' ? <EditIcon /> : <VisibilityIcon />}
                         </IconButton>
diff --git a/packages/frontend/src/components/ElectionForm/Races/RaceForm.tsx b/packages/frontend/src/components/ElectionForm/Races/RaceForm.tsx
index 1f0c4a2d..a10655ec 100644
--- a/packages/frontend/src/components/ElectionForm/Races/RaceForm.tsx
+++ b/packages/frontend/src/components/ElectionForm/Races/RaceForm.tsx
@@ -38,7 +38,7 @@ export default function RaceForm({ race_index, editedRace, errors, setErrors, ap
     )
     const confirm = useConfirm();
     const inputRefs = useRef([]);
-    const ephemeralCandidates = useMemo(() => 
+    const ephemeralCandidates:Candidate[] = useMemo(() => 
         [...editedRace.candidates, { candidate_id: uuidv4(), candidate_name: '' }], 
         [editedRace.candidates]
     );   
@@ -80,8 +80,8 @@ export default function RaceForm({ race_index, editedRace, errors, setErrors, ap
         }
     }, [confirm, editedRace.candidates.length, applyRaceUpdate, setErrors]);
     // Handle tab and shift+tab to move focus between candidates
-    const handleKeyDown = useCallback((event, index) => {
-        
+    const handleKeyDown = useCallback((event: React.KeyboardEvent<HTMLInputElement>, index: number) => {
+        const target = event.target as HTMLInputElement;
         if (event.key === 'Tab' && event.shiftKey) {
             // Move focus to the previous candidate
             event.preventDefault();
@@ -95,7 +95,7 @@ export default function RaceForm({ race_index, editedRace, errors, setErrors, ap
             if (nextIndex < ephemeralCandidates.length && inputRefs.current[nextIndex]) {
                 inputRefs.current[nextIndex].focus();
             }
-        } else if (event.key === 'Backspace' && event.target.value === '' && index > 0) {
+        } else if (event.key === 'Backspace' && target.value === '' && index > 0) {
             // Move focus to the previous candidate when backspacing on an empty candidate
             event.preventDefault();
             inputRefs.current[index - 1].focus();
@@ -113,6 +113,7 @@ export default function RaceForm({ race_index, editedRace, errors, setErrors, ap
                 <Grid item xs={12} sx={{ m: 0, p: 1 }}>
                     <TextField
                         id={`race-title-${String(race_index)}`}
+                        disabled={election.state != 'draft'}
                         name="title"
                         label="Title"
                         type="text"
@@ -140,6 +141,7 @@ export default function RaceForm({ race_index, editedRace, errors, setErrors, ap
                         id={`race-description-${String(race_index)}`}
                         name="description"
                         label="Description"
+                        disabled={election.state != 'draft'}
                         multiline
                         fullWidth
                         type="text"
@@ -189,7 +191,7 @@ export default function RaceForm({ race_index, editedRace, errors, setErrors, ap
 
             <Stepper nonLinear activeStep={activeStep} orientation="vertical" sx={{my: 3}}>
                 <Step>
-                    <StepButton onClick={() => setActiveStep(0)}>How many winners?</StepButton>
+                    <StepButton name='edit-multiwinner' onClick={() => setActiveStep(0)}>How many winners?</StepButton>
                     <StepContent>
                         <RadioGroup
                             aria-labelledby="method-family-radio-group"
@@ -203,9 +205,9 @@ export default function RaceForm({ race_index, editedRace, errors, setErrors, ap
                                 setMethodFamily(e.target.value)
                             }}
                         >
-                            <FormControlLabel value="single_winner" control={<Radio />} label={t('edit_race.single_winner')} sx={{ mb: 0, pb: 0 }} />
-                            <FormControlLabel value="bloc_multi_winner" control={<Radio />} label={t('edit_race.bloc_multi_winner')} sx={{ mb: 0, pb: 0 }} />
-                            <FormControlLabel value="proportional_multi_winner" control={<Radio />} label={t('edit_race.proportional_multi_winner')} sx={{ mb: 0, pb: 0 }} />
+                            <FormControlLabel disabled={election.state != 'draft'} value="single_winner" control={<Radio />} label={t('edit_race.single_winner')} sx={{ mb: 0, pb: 0 }} />
+                            <FormControlLabel disabled={election.state != 'draft'} value="bloc_multi_winner" control={<Radio />} label={t('edit_race.bloc_multi_winner')} sx={{ mb: 0, pb: 0 }} />
+                            <FormControlLabel disabled={election.state != 'draft'} value="proportional_multi_winner" control={<Radio />} label={t('edit_race.proportional_multi_winner')} sx={{ mb: 0, pb: 0 }} />
                         </RadioGroup>
                         <Box sx={{
                             height: methodFamily == 'single_winner' ? 0 : '105px', // copied from the value for auto
@@ -241,7 +243,7 @@ export default function RaceForm({ race_index, editedRace, errors, setErrors, ap
                 </Step>
 
                 <Step>
-                    <StepButton onClick={() => setActiveStep(1)}>Voting Method</StepButton>
+                    <StepButton name='edit-voting-method' onClick={() => setActiveStep(1)}>Voting Method</StepButton>
                     <StepContent>
                         <FormControl component="fieldset" variant="standard">
                             <RadioGroup
@@ -249,28 +251,29 @@ export default function RaceForm({ race_index, editedRace, errors, setErrors, ap
                                 name="voter-method-radio-buttons-group"
                                 value={editedRace.voting_method}
                                 onChange={(e) => applyRaceUpdate(race => { race.voting_method = e.target.value })}
+                                
                             >
-                                <FormControlLabel value="STAR" control={<Radio />} label="STAR" sx={{ mb: 0, pb: 0 }} />
+                                <FormControlLabel disabled={election.state != 'draft'} value="STAR" control={<Radio />} label="STAR" sx={{ mb: 0, pb: 0 }} />
                                 <FormHelperText sx={{ pl: 4, mt: -1 }}>
                                     Score candidates 0-5
                                 </FormHelperText>
 
                                 {flags.isSet('METHOD_STAR_PR') && <>
-                                    <FormControlLabel value="STAR_PR" control={<Radio />} label="Proportional STAR" />
+                                    <FormControlLabel disabled={election.state != 'draft'} value="STAR_PR" control={<Radio />} label="Proportional STAR" />
                                     <FormHelperText sx={{ pl: 4, mt: -1 }}>
                                         Score candidates 0-5
                                     </FormHelperText>
                                 </>}
 
                                 {flags.isSet('METHOD_RANKED_ROBIN') && <>
-                                    <FormControlLabel value="RankedRobin" control={<Radio />} label="Ranked Robin" />
+                                    <FormControlLabel disabled={election.state != 'draft'} value="RankedRobin" control={<Radio />} label="Ranked Robin" />
                                     <FormHelperText sx={{ pl: 4, mt: -1 }}>
                                         Rank candidates in order of preference
                                     </FormHelperText>
                                 </>}
 
                                 {flags.isSet('METHOD_APPROVAL') && <>
-                                    <FormControlLabel value="Approval" control={<Radio />} label="Approval" />
+                                    <FormControlLabel disabled={election.state != 'draft'} value="Approval" control={<Radio />} label="Approval" />
                                     <FormHelperText sx={{ pl: 4, mt: -1 }}>
                                         Mark all candidates you approve of
                                     </FormHelperText>
@@ -283,11 +286,11 @@ export default function RaceForm({ race_index, editedRace, errors, setErrors, ap
                                     sx={{ width: '100%', ml: -1 }}>
 
                                     {!showsAllMethods &&
-                                        <IconButton aria-label="Home" onClick={() => { setShowsAllMethods(true) }}>
+                                        <IconButton disabled={election.state != 'draft'} aria-label="Home" onClick={() => { setShowsAllMethods(true) }}>
                                             <ExpandMore />
                                         </IconButton>}
                                     {showsAllMethods &&
-                                        <IconButton aria-label="Home" onClick={() => { setShowsAllMethods(false) }}>
+                                        <IconButton disabled={election.state != 'draft'} aria-label="Home" onClick={() => { setShowsAllMethods(false) }}>
                                             <ExpandLess />
                                         </IconButton>}
                                     <Typography variant="body1" >
@@ -311,20 +314,20 @@ export default function RaceForm({ race_index, editedRace, errors, setErrors, ap
                                             These voting methods do not guarantee every voter an equally powerful vote if there are more than two candidates.
                                         </FormHelperText>
                                     </Box>
-                                    <FormControlLabel value="Plurality" control={<Radio />} label="Plurality" />
+                                    <FormControlLabel disabled={election.state != 'draft'} value="Plurality" control={<Radio />} label="Plurality" />
                                     <FormHelperText sx={{ pl: 4, mt: -1 }}>
                                         Mark one candidate only. Not recommended with more than 2 candidates.
                                     </FormHelperText>
 
                                     {flags.isSet('METHOD_RANKED_CHOICE') && <>
-                                        <FormControlLabel value="IRV" control={<Radio />} label="Ranked Choice" />
+                                        <FormControlLabel disabled={election.state != 'draft'} value="IRV" control={<Radio />} label="Ranked Choice" />
                                         <FormHelperText sx={{ pl: 4, mt: -1 }}>
                                             Rank candidates in order of preference, only recommended for educational purposes
                                         </FormHelperText>
                                     </>}
 
                                     {flags.isSet('METHOD_RANKED_CHOICE') && <>
-                                        <FormControlLabel value="STV" control={<Radio />} label="STV" />
+                                        <FormControlLabel disabled={election.state != 'draft'} value="STV" control={<Radio />} label="STV" />
                                         <FormHelperText sx={{ pl: 4, mt: -1 }}>
                                             Proportaionl Version of RCV
                                         </FormHelperText>
@@ -349,7 +352,7 @@ export default function RaceForm({ race_index, editedRace, errors, setErrors, ap
             <Stack spacing={2}>
                 {
                     <SortableList
-                        items={ephemeralCandidates}
+                        items={election.state === 'draft' ? ephemeralCandidates : editedRace.candidates}
                         identifierKey="candidate_id"
                         onChange={handleChangeCandidates}
                         renderItem={(candidate, index) => (
@@ -360,9 +363,10 @@ export default function RaceForm({ race_index, editedRace, errors, setErrors, ap
                                     candidate={candidate}
                                     index={index}
                                     onDeleteCandidate={() => onDeleteCandidate(index)}
-                                    disabled={ephemeralCandidates.length - 1 === index}
-                                    inputRef={el => inputRefs.current[index] = el}
-                                    onKeyDown={event => handleKeyDown(event, index)}/>
+                                    disabled={ephemeralCandidates.length - 1 === index || election.state !== 'draft'}
+                                    inputRef={(el:React.MutableRefObject<any[]>) => inputRefs.current[index] = el}
+                                    onKeyDown={(event: React.KeyboardEvent<HTMLInputElement>) => handleKeyDown(event, index)}
+                                    electionState={election.state}/>
                             </SortableList.Item>
                         )}
                     />
diff --git a/packages/frontend/src/components/styles.tsx b/packages/frontend/src/components/styles.tsx
index 8f2b0bc8..818ae228 100644
--- a/packages/frontend/src/components/styles.tsx
+++ b/packages/frontend/src/components/styles.tsx
@@ -45,6 +45,7 @@ export const Tip = (props: {name: TipName, electionTermType: TermType | undefine
 
 export const StyledButton = (props) => (
     <Button
+        role='button'
         fullWidth
         sx={{
             p: 1,
diff --git a/packages/frontend/src/index.css b/packages/frontend/src/index.css
index 0557648f..fb131a82 100644
--- a/packages/frontend/src/index.css
+++ b/packages/frontend/src/index.css
@@ -293,6 +293,7 @@ code {
   -webkit-border-radius: 50%;
   text-align: center;
   justify-content: center;
+  margin: auto;
 }
 
 /* :enabled doesn't work, but :not(:disabled) does */
diff --git a/testing/.gitignore b/testing/.gitignore
index 68c5d18f..5f15c95d 100644
--- a/testing/.gitignore
+++ b/testing/.gitignore
@@ -3,3 +3,4 @@ node_modules/
 /playwright-report/
 /blob-report/
 /playwright/.cache/
+/playwright
\ No newline at end of file
diff --git a/testing/playwright.config.ts b/testing/playwright.config.ts
index e6385031..0bbcec11 100644
--- a/testing/playwright.config.ts
+++ b/testing/playwright.config.ts
@@ -1,4 +1,5 @@
 import { defineConfig, devices } from '@playwright/test';
+import path from 'path';
 
 /**
  * Read environment variables from file.
@@ -31,22 +32,40 @@ export default defineConfig({
     /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
     trace: 'on-first-retry',
   },
+  timeout: 100000,
 
   /* Configure projects for major browsers */
   projects: [
+    {
+      name: 'setup',
+      testMatch: /.*\.setup\.ts/ 
+    },
     {
       name: 'chromium',
-      use: { ...devices['Desktop Chrome'] },
+      use: {
+        ...devices['Desktop Chrome'],
+        storageState: path.join(__dirname, '/playwright/auth/user.json')
+      },
+      dependencies: ['setup'],
+
     },
 
     {
       name: 'firefox',
-      use: { ...devices['Desktop Firefox'] },
+      use: { 
+        ...devices['Desktop Firefox'],
+        storageState: path.join(__dirname, '/playwright/auth/user.json')
+       },
+      dependencies: ['setup'],
     },
 
     {
       name: 'webkit',
-      use: { ...devices['Desktop Safari'] },
+      use: { 
+        ...devices['Desktop Safari'],
+        storageState: path.join(__dirname, '/playwright/auth/user.json')
+      },
+      dependencies: ['setup'],
     },
 
     /* Test against mobile viewports. */
diff --git a/testing/tests/auth.setup.ts b/testing/tests/auth.setup.ts
new file mode 100644
index 00000000..0cbf4a42
--- /dev/null
+++ b/testing/tests/auth.setup.ts
@@ -0,0 +1,31 @@
+import { test as setup, expect } from '@playwright/test';
+import path from 'path';
+
+const authFile = path.join(__dirname, '../playwright/auth/user.json');
+
+setup('log in', async ({ page }) => {
+    await page.goto('/');
+
+    // find SIGN IN button and click it
+    await page.getByRole('button', { name: 'Sign In', exact: true }).click();
+    console.log('clicked SIGN IN button');
+
+    // find username input and fill it
+    await page.fill('input[name="username"]', 'PlayWrightTest');
+    console.log('filled username');
+
+    // find password input and fill it
+    await page.fill('input[name="password"]', 'test');
+    console.log('filled password');
+
+    // find Sign In button and click it
+    await page.getByRole('button', { name: 'Sign In', exact: true }).click();
+
+    // check if "Hello, Test" button is visible
+    await expect(page.getByRole('button', { name: 'Hello, Test' })).toBeVisible();
+
+    // save the user data to a file
+    await page.context().storageState({ path: authFile });
+
+
+});
\ No newline at end of file
diff --git a/testing/tests/create-election.spec.ts b/testing/tests/create-election.spec.ts
new file mode 100644
index 00000000..e13035b5
--- /dev/null
+++ b/testing/tests/create-election.spec.ts
@@ -0,0 +1,122 @@
+import { createElection, API_BASE_URL } from './helperfunctions';
+import { test, expect, Page } from '@playwright/test';
+
+let electionId = '';
+test.describe('Create Election', () => {
+    test('create poll', async ({ page }) => {
+        page.goto('/');
+        await page.getByRole('button', { name: 'New Election' }).click();
+        await page.getByLabel('Poll', { exact: true }).click();
+        await page.getByRole('button', { name: 'Continue' }).click();
+        await page.fill('input[name="election-title"]', 'Playwright Test Poll');
+        //wait until there is only one continue button
+        while ((await page.getByRole('button', { name: 'Continue' }).evaluateAll((el) => el)).length > 1) {
+        continue
+        }
+        await page.getByRole('button', { name: 'Continue' }).click();
+        await page.getByLabel('No').click();
+        await page.getByRole('button', { name: 'Continue' }).click();
+        await page.getByText('Allows multiple votes per device').click();
+        await expect(page.getByText('draft')).toBeVisible();
+        const url = await page.url();
+        const urlArray = url.split('/');
+        electionId = urlArray[urlArray.length - 2];
+        expect(await page.getByLabel('no limit')).toBeChecked();
+
+    });
+
+    test('create election with email list', async ({ page }) => {
+        await page.goto('/');
+        await page.getByRole('button', { name: 'New Election' }).click();
+        await page.getByLabel('Election', { exact: true }).click();
+        await page.getByRole('button', { name: 'Continue' }).click();
+        await page.fill('input[name="election-title"]', 'Playwright Test Election');
+        //wait until there is only one continue button
+        while ((await page.getByRole('button', { name: 'Continue' }).evaluateAll((el) => el)).length > 1) {
+        continue
+        }
+        await page.getByRole('button', { name: 'Continue' }).click();
+        await page.getByLabel('Yes').click();
+        await page.getByRole('button', { name: 'Continue' }).click();
+        await page.getByRole('button', { name: 'Email List Provide a list of' }).click();
+        await expect(page.getByText('draft')).toBeVisible();
+        const url = await page.url();
+        const urlArray = url.split('/');
+        electionId = urlArray[urlArray.length - 2];
+        await page.getByRole('link', { name: 'Voters' }).click();
+        await page.getByRole('button', { name: 'Add Voters' }).click();
+        await expect(await page.getByLabel('Email')).toBeChecked();
+
+
+    });
+
+    test('create election with ID List', async ({ page }) => {
+            await page.goto('/');
+        await page.getByRole('button', { name: 'New Election' }).click();
+        await page.getByLabel('Election', { exact: true }).click();
+        await page.getByRole('button', { name: 'Continue' }).click();
+        await page.fill('input[name="election-title"]', 'Playwright Test Election');
+        //wait until there is only one continue button
+        while ((await page.getByRole('button', { name: 'Continue' }).evaluateAll((el) => el)).length > 1) {
+        continue
+        }
+        await page.getByRole('button', { name: 'Continue' }).click();
+        await page.getByLabel('Yes').click();
+        await page.getByRole('button', { name: 'Continue' }).click();
+        await page.getByText('ID List').click();
+        await expect(page.getByText('draft')).toBeVisible();
+        const url = await page.url();
+        const urlArray = url.split('/');
+        electionId = urlArray[urlArray.length - 2];
+        await page.getByRole('link', { name: 'Voters' }).click();
+        
+
+    });
+
+    test('create election with one per device', async ({ page }) => {
+        await page.goto('/');
+        await page.getByRole('button', { name: 'New Election' }).click();
+        await page.getByLabel('Election', { exact: true }).click();
+        await page.getByRole('button', { name: 'Continue' }).click();
+        await page.fill('input[name="election-title"]', 'Playwright Test Election');
+        //wait until there is only one continue button
+        while ((await page.getByRole('button', { name: 'Continue' }).evaluateAll((el) => el)).length > 1) {
+        continue
+        }
+        await page.getByRole('button', { name: 'Continue' }).click();
+        await page.getByLabel('No').click();
+        await page.getByRole('button', { name: 'Continue' }).click();
+        await page.getByText('one person, one vote').click();
+        await expect(page.getByText('draft')).toBeVisible();
+        const url = await page.url();
+        const urlArray = url.split('/');
+        electionId = urlArray[urlArray.length - 2];
+        expect(await page.getByLabel('device')).toBeChecked();
+    });
+
+    test('create election with whitespace title', async ({ page }) => {
+        await page.goto('/');
+        await page.getByRole('button', { name: 'New Election' }).click();
+        await page.getByLabel('Election', { exact: true }).click();
+        await page.getByRole('button', { name: 'Continue' }).click();
+        await page.fill('input[name="election-title"]', ' ');
+        await expect(page.getByRole('button', { name: 'Continue' })).toBeDisabled();
+    });
+
+    test('create election with too long title', async ({ page }) => {
+        await page.goto('/');
+        await page.getByRole('button', { name: 'New Election' }).click();
+        await page.getByLabel('Election', { exact: true }).click();
+        await page.getByRole('button', { name: 'Continue' }).click();
+        await page.fill('input[name="election-title"]', 'a'.repeat(51));
+        await expect(page.getByRole('button', { name: 'Continue' }).first()).toBeDisabled();
+    });
+
+    test.afterEach(async ({ page }) => {
+        //delete election when finished
+        if (electionId) {
+        await page.request.delete(`${API_BASE_URL}/election/${electionId}`);
+        console.log(`deleted election: ${electionId}`);
+        }
+    });
+});
\ No newline at end of file
diff --git a/testing/tests/election-with-rolls.spec.ts b/testing/tests/election-with-rolls.spec.ts
new file mode 100644
index 00000000..59427d37
--- /dev/null
+++ b/testing/tests/election-with-rolls.spec.ts
@@ -0,0 +1,269 @@
+import {test, expect, Page, } from '@playwright/test';
+import { Election } from '@equal-vote/star-vote-shared/domain_model/Election';
+import path from 'path';
+import { randomUUID } from 'crypto';
+
+let electionId = '';
+const voterIds = ['1', '2', '3', '4', '5'];
+const API_BASE_URL = 'http://localhost:5000/API';
+const makeVotes = (numVotes: number, minRank:number) => {
+    const votes:{ candidateName: string, value: number }[] = [];
+    for (let i = 0; i < numVotes; i++) {
+        votes.push({ candidateName: `Candidate ${i + 1}`, value: i + minRank });
+    }
+    return votes;
+}
+
+test.describe('Add Voters', () => {
+    test.beforeEach(async ({page}) => {
+        const apiContext =  page.request;
+        const response = await apiContext.post(`${API_BASE_URL}/elections`, {
+            data: {
+                "Election": {
+                    "title": "Playwright Test Election",
+                    "owner_id": "892d46a9-59fd-4d13-a8ea-99af2635f6cf",
+                    "description": "",
+                    "state": "draft",
+                    "frontend_url": "",
+                    "races": [
+                        {
+                            "title": "Race 1",
+                            "race_id": randomUUID(),
+                            "num_winners": 1,
+                            "voting_method": "STAR",
+                            "candidates": [
+                                {
+                                    "candidate_id": randomUUID(),
+                                    "candidate_name": "Candidate 1"
+                                },
+                                {
+                                    "candidate_id": randomUUID(),
+                                    "candidate_name": "Candidate 2"
+                                },
+                                {
+                                    "candidate_id": randomUUID(),
+                                    "candidate_name": "Candidate 3"
+                                },
+                                {
+                                    "candidate_id": randomUUID(),
+                                    "candidate_name": "Candidate 4"
+                                },
+                                {
+                                    "candidate_id": randomUUID(),
+                                    "candidate_name": "Candidate 5"
+                                },
+                                {
+                                    "candidate_id": randomUUID(),
+                                    "candidate_name": "Candidate 6"
+                                }
+                            ],
+                            "description": "Race 1 Description"
+                        },
+                        {
+                            "title": "Race 2",
+                            "race_id": randomUUID(),
+                            "num_winners": 1,
+                            "voting_method": "RankedRobin",
+                            "candidates": [
+                                {
+                                    "candidate_id": randomUUID(),
+                                    "candidate_name": "Candidate 1"
+                                },
+                                {
+                                    "candidate_id": randomUUID(),
+                                    "candidate_name": "Candidate 2"
+                                },
+                                {
+                                    "candidate_id": randomUUID(),
+                                    "candidate_name": "Candidate 3"
+                                },
+                                {
+                                    "candidate_id": randomUUID(),
+                                    "candidate_name": "Candidate 4"
+                                },
+                                {
+                                    "candidate_id": randomUUID(),
+                                    "candidate_name": "Candidate 5"
+                                },
+                                {
+                                    "candidate_id": randomUUID(),
+                                    "candidate_name": "Candidate 6"
+                                },
+                                {
+                                    "candidate_id": randomUUID(),
+                                    "candidate_name": "Candidate 7"
+                                },
+                                {
+                                    "candidate_id": randomUUID(),
+                                    "candidate_name": "Candidate 8"
+                                },
+                                {
+                                    "candidate_id": randomUUID(),
+                                    "candidate_name": "Candidate 9"
+                                },
+                                {
+                                    "candidate_id": randomUUID(),
+                                    "candidate_name": "Candidate 10"
+                                }
+                            ],
+                            "description": "Race 2 Description"
+                        }
+                    ],
+                    "settings": {
+                        "voter_authentication": {
+                            "voter_id": true,
+                            "email": false,
+                            "ip_address": false
+                        },
+                        "ballot_updates": false,
+                        "public_results": true,
+                        "time_zone": "America/Denver",
+                        "random_candidate_order": false,
+                        "require_instruction_confirmation": true,
+                        "term_type": "election",
+                        "voter_access": "closed"
+                    },
+                    "is_public": false
+                }
+            }
+        })
+        const responseBody = await response.json();
+        const election = responseBody.election as Election;
+        electionId = election.election_id;
+    });
+
+    test('add voters', async ({page}) => {
+    
+        await page.goto(`/${electionId}/admin/voters`);
+        await page.getByRole('button', {name: 'Add Voters'}).click();
+        await page.getByLabel('Voter Data').fill(voterIds.join('\n'));
+        await page.getByRole('button', {name: 'Submit'}).click();
+
+
+    });
+    test('vote in election restricted by ID', async ({page}) => {
+        await page.goto(`/`);
+        const response = await page.request.post(`${API_BASE_URL}/Election/${electionId}/rolls`, {
+            data: {
+                "electionRoll": [
+                    {
+                        "state": "approved",
+                        "voter_id": "1"
+                    },
+                    {
+                        "state": "approved",
+                        "voter_id": "2"
+                    },
+                    {
+                        "state": "approved",
+                        "voter_id": "3"
+                    },
+                    {
+                        "state": "approved",
+                        "voter_id": "4"
+                    },
+                    {
+                        "state": "approved",
+                        "voter_id": "5"
+                    }
+                ]
+            }
+        });
+        const responseJson = await response.ok();
+        console.log(`response status: ${responseJson}`);
+        await expect(responseJson).toBe(true);
+        await page.goto(`/${electionId}/admin/voters`);
+
+        await expect(page.getByRole('button', { name: 'Add Voters' })).toBeVisible();
+        await expect(page.getByText('1–5 of 5')).toBeVisible();
+        await page.getByRole('link', { name: 'Admin Home' }).click();
+        await page.getByRole('button', { name: 'Finalize Election' }).click();
+        await page.getByRole('button', { name: 'Submit' }).click();
+        await expect(page.getByText('open')).toBeVisible();
+        await expect(page.getByRole('button', { name: 'edit-election-details' })).toBeDisabled();
+        await expect(page.getByRole('button', { name: 'Add' })).toBeDisabled();
+        await page.getByLabel('edit-Race 1').click();
+        await expect(page.getByRole('button', { name: 'delete-candidate-number-6' })).toBeDisabled();
+        await expect(page.getByRole('button', { name: 'drag-candidate-number-6' })).toBeDisabled();
+        await expect(page.locator('#candidate-name-7')).not.toBeVisible();
+    
+        await expect(page.getByRole('radiogroup').locator('label').filter({ hasText: 'Single-Winner' })).toBeDisabled();
+        await page.getByRole('button', { name: 'Voting Method' }).click();
+        await expect(page.getByLabel('STAR', { exact: true })).toBeDisabled();
+        await expect(page.getByRole('textbox', { name: 'Title' })).toBeDisabled();
+        await expect(page.getByRole('textbox', { name: 'Description' })).toBeDisabled();
+        await expect(page.getByRole('button', { name: 'Save' })).toBeDisabled();
+        await page.getByRole('button', { name: 'Cancel' }).click();
+        await expect(page.getByRole('heading', { name: '(no description)' })).toBeVisible();
+        await expect(page.getByText('(start and end times disabled)')).toBeVisible();
+        await expect(page.getByRole('button', { name: 'View Results' })).toBeVisible();
+        await expect(page.getByRole('button', { name: 'Share Election' })).toBeVisible();
+        await expect(page.getByRole('button', { name: 'Make results private' })).toBeVisible();
+        await page.getByRole('link', { name: 'Voting Page' }).click();
+        await page.getByLabel('Voter ID').fill(voterIds[0]);
+        await page.getByRole('button', { name: 'Submit' }).click();
+        await page.getByRole('button', { name: 'Vote' }).click();
+
+        await page.getByLabel(('I have read the instructions')).click();
+        let votes = makeVotes(6, 0);
+        for (const vote of votes) {
+            await page.locator(`button[name="${vote.candidateName}_rank-${vote.value}"]`).click();
+        }
+        const submitButton = await page.getByRole('button', { name: 'Submit Ballot' });
+        await expect(submitButton).toBeDisabled();
+        await page.getByRole('button', { name: 'Next' }).click();
+        await page.getByLabel(('I have read the instructions')).click();
+        await expect(submitButton).toBeEnabled();
+        votes = makeVotes(6, 1);
+        for (const vote of votes) {
+            await page.locator(`button[name="${vote.candidateName}_rank-${vote.value}"]`).click();
+        }
+        await submitButton.click();
+        await page.getByLabel('Send Ballot Receipt Email?').click();
+        await page.getByRole('button', { name: 'Submit' }).click();
+        await page.getByRole('link', { name: 'Voting Page' }).click();
+        await page.getByLabel('Voter ID').fill(voterIds[0]);
+        await page.getByRole('button', { name: 'Submit' }).click();
+        await expect(page.getByRole('button', { name: 'Vote' })).not.toBeVisible();
+        expect(page.getByRole('heading', { name: 'Ballot Submitted' })).toBeVisible();
+        expect(page.getByRole('link', { name: 'View Results' })).toBeVisible();
+        await page.getByRole('button', { name: 'Clear' }).click();
+        await page.getByLabel('Voter ID').fill(voterIds[1]);
+        await page.getByRole('button', { name: 'Submit' }).click();
+        await page.getByRole('button', { name: 'Vote' }).click();
+        await page.getByLabel(('I have read the instructions')).click();
+        votes = makeVotes(6, 0);
+        for (const vote of votes) {
+            await page.locator(`button[name="${vote.candidateName}_rank-${vote.value}"]`).click();
+        }
+        await page.getByRole('button', { name: 'Next' }).click();
+        await page.getByLabel(('I have read the instructions')).click();
+        votes = makeVotes(6, 1);
+        for (const vote of votes) {
+            await page.locator(`button[name="${vote.candidateName}_rank-${vote.value}"]`).click();
+        }
+        await submitButton.click();
+        await page.getByLabel('Send Ballot Receipt Email?').click();
+        await page.getByRole('button', { name: 'Submit' }).click();
+        await expect(page.getByRole('heading', { name: 'Thank you for voting!' })).toBeVisible();
+        await page.getByRole('link', { name: 'Voters' }).click();
+        await page.getByLabel('Voters').getByRole('combobox').click();
+        await page.getByRole('option', { name: 'false' }).getByRole('checkbox').click();
+        await page.locator('#menu- > .MuiBackdrop-root').click();
+        await expect(page.getByText('1–2 of 2')).toBeVisible();
+        expect(page.getByRole('rowheader', { name: '1' })).toBeVisible();
+        expect(page.getByRole('rowheader', { name: '2' })).toBeVisible();
+
+
+
+
+    });
+
+        
+    test.afterEach(async ({ page }) => {
+        //delete election when finished
+        if (electionId) {
+        await page.request.delete(`${API_BASE_URL}/election/${electionId}`);
+        console.log(`deleted election: ${electionId}`);
+    }})
+});
diff --git a/testing/tests/election-without-rolls.spec.ts b/testing/tests/election-without-rolls.spec.ts
new file mode 100644
index 00000000..4cf39e0a
--- /dev/null
+++ b/testing/tests/election-without-rolls.spec.ts
@@ -0,0 +1,208 @@
+import { test, expect } from '@playwright/test';
+import { API_BASE_URL } from './helperfunctions';
+import { randomUUID } from 'crypto';
+import { Election } from '@equal-vote/star-vote-shared/domain_model/Election';
+
+let electionId = '';
+test.beforeEach(async ({page}) => {
+    const apiContext =  page.request;
+    const response = await apiContext.post(`${API_BASE_URL}/elections`, {
+        data: {
+            "Election": {
+                "title": "Playwright Test Election",
+                "owner_id": "892d46a9-59fd-4d13-a8ea-99af2635f6cf",
+                "description": "",
+                "state": "draft",
+                "frontend_url": "",
+                "races": [
+                    {
+                        "title": "Race 1",
+                        "race_id": randomUUID(),
+                        "num_winners": 1,
+                        "voting_method": "STAR",
+                        "candidates": [
+                            {
+                                "candidate_id": randomUUID(),
+                                "candidate_name": "Candidate 1"
+                            },
+                            {
+                                "candidate_id": randomUUID(),
+                                "candidate_name": "Candidate 2"
+                            },
+                            {
+                                "candidate_id": randomUUID(),
+                                "candidate_name": "Candidate 3"
+                            },
+                            {
+                                "candidate_id": randomUUID(),
+                                "candidate_name": "Candidate 4"
+                            },
+                            {
+                                "candidate_id": randomUUID(),
+                                "candidate_name": "Candidate 5"
+                            },
+                            {
+                                "candidate_id": randomUUID(),
+                                "candidate_name": "Candidate 6"
+                            }
+                        ],
+                        "description": "Race 1 Description"
+                    },
+                    {
+                        "title": "Race 2",
+                        "race_id": randomUUID(),
+                        "num_winners": 1,
+                        "voting_method": "IRV",
+                        "candidates": [
+                            {
+                                "candidate_id": randomUUID(),
+                                "candidate_name": "Candidate 1"
+                            },
+                            {
+                                "candidate_id": randomUUID(),
+                                "candidate_name": "Candidate 2"
+                            },
+                            {
+                                "candidate_id": randomUUID(),
+                                "candidate_name": "Candidate 3"
+                            },
+                            {
+                                "candidate_id": randomUUID(),
+                                "candidate_name": "Candidate 4"
+                            },
+                            {
+                                "candidate_id": randomUUID(),
+                                "candidate_name": "Candidate 5"
+                            },
+                            {
+                                "candidate_id": randomUUID(),
+                                "candidate_name": "Candidate 6"
+                            },
+                            {
+                                "candidate_id": randomUUID(),
+                                "candidate_name": "Candidate 7"
+                            },
+                            {
+                                "candidate_id": randomUUID(),
+                                "candidate_name": "Candidate 8"
+                            },
+                            {
+                                "candidate_id": randomUUID(),
+                                "candidate_name": "Candidate 9"
+                            },
+                            {
+                                "candidate_id": randomUUID(),
+                                "candidate_name": "Candidate 10"
+                            }
+                        ],
+                        "description": "Race 2 Description"
+                    }
+                ],
+                "settings": {
+                    "voter_authentication": {
+                        "voter_id": false,
+                        "email": false,
+                        "ip_address": false
+                    },
+                    "ballot_updates": false,
+                    "public_results": true,
+                    "time_zone": "America/Denver",
+                    "random_candidate_order": false,
+                    "require_instruction_confirmation": true,
+                    "term_type": "election",
+                    "voter_access": "open"
+                },
+                "is_public": false
+            }
+        }
+    })
+    const responseBody = await response.json();
+    const election = responseBody.election as Election;
+    electionId = election.election_id;
+});
+
+test('vote in election restricted by account', async ({page}) => {
+    await page.goto(`/${electionId}/admin`);
+    await page.getByLabel('user (login required)').click();
+    await expect(page.getByLabel('user (login required)')).toBeChecked();
+    await page.getByRole('button', { name: 'Finalize Election' }).click();
+    await page.getByRole('button', { name: 'Submit' }).click();
+    await page.getByRole('link', { name: 'Voting Page' }).click();
+    await page.getByRole('button', { name: 'Vote' }).click();
+    await page.getByLabel('I have read the instructions').check();
+    await page.locator('button[name="Candidate 1_rank-0"]').click();
+    await page.locator('button[name="Candidate 2_rank-1"]').click();
+    await page.locator('button[name="Candidate 3_rank-2"]').click();
+    await page.locator('button[name="Candidate 4_rank-3"]').click();
+    await page.locator('button[name="Candidate 5_rank-4"]').click();
+    await page.locator('button[name="Candidate 6_rank-5"]').click();
+    await page.getByRole('button', { name: 'Next' }).click();
+    await page.getByLabel('I have read the instructions').check();
+    await page.locator('button[name="Candidate 10_rank-1"]').click();
+    await page.locator('button[name="Candidate 8_rank-2"]').click();
+    await page.locator('button[name="Candidate 9_rank-4"]').click();
+    await page.locator('button[name="Candidate 6_rank-4"]').click();
+    await expect(page.getByLabel('warning-skipped-column-')).toBeVisible();
+    await expect(page.locator('button[name="Candidate 6_rank-4"]')).toHaveClass(/alert/);
+    await expect(page.locator('button[name="Candidate 9_rank-4"]')).toHaveClass(/alert/);
+    await expect(page.getByText('Do not skip rankings. Rank')).toBeVisible();
+    await expect(page.getByText('Do not rank multiple')).toBeVisible();    await page.locator('button[name="Candidate 9_rank-3"]').click();
+    await page.locator('button[name="Candidate 6_rank-5"]').click();
+    await page.locator('button[name="Candidate 3_rank-6"]').click();
+    await page.locator('button[name="Candidate 7_rank-3"]').click();
+    await page.locator('button[name="Candidate 7_rank-4"]').click();
+    await page.getByRole('button', { name: 'Submit Ballot' }).click();
+    await page.getByLabel('Send Ballot Receipt Email?').uncheck();
+    await page.getByRole('button', { name: 'Submit' }).click();
+    await page.getByRole('link', { name: 'Voting Page' }).click();
+    await page.getByRole('heading', { name: 'Ballot Submitted' }).click();
+    await expect(page.locator('#root')).toContainText('Ballot Submitted');
+    await page.getByRole('button', { name: 'Hello, Test' }).click();
+    await page.getByRole('menuitem', { name: 'Logout' }).click();
+    await page.getByLabel('I have read the instructions').check();
+    await page.locator('button[name="Candidate 1_rank-0"]').click();
+    await page.getByRole('button', { name: 'Next' }).click();
+    await page.getByLabel('I have read the instructions').check();
+    await page.getByRole('button', { name: 'Submit Ballot' }).click();
+    await page.getByRole('button', { name: 'Submit' }).click();
+    await expect(page.locator('#root')).toContainText('Error making request: 401: Email Validation Required');
+    await page.getByLabel('Close').click();
+    await page.getByRole('button', { name: 'Cancel' }).click();
+    await page.getByRole('button', { name: 'Sign In' }).click();
+    await page.getByLabel('Username or email').fill('PlayWrightTest2');
+    await page.getByLabel('Username or email').press('Tab');
+    await page.getByLabel('Password', { exact: true }).fill('test');
+    await page.getByRole('button', { name: 'Sign In' }).click();
+    await page.getByLabel('I have read the instructions').check();
+    await page.locator('button[name="Candidate 1_rank-0"]').click();
+    await page.locator('button[name="Candidate 2_rank-1"]').click();
+    await page.locator('button[name="Candidate 3_rank-2"]').click();
+    await page.locator('button[name="Candidate 4_rank-3"]').click();
+    await page.locator('button[name="Candidate 5_rank-4"]').click();
+    await page.locator('button[name="Candidate 6_rank-5"]').click();
+    await page.getByRole('button', { name: 'Next' }).click();
+    await page.getByLabel('I have read the instructions').check();
+    await page.getByRole('button', { name: 'Submit Ballot' }).click();
+    await page.getByLabel('Send Ballot Receipt Email?').uncheck();
+    await page.getByRole('button', { name: 'Submit' }).click();
+    await expect(page.getByRole('heading', { name: 'Thank you for voting!' })).toBeVisible();
+});
+// test('clean up all elections', async ({page}) => {
+//     page.goto('/ElectionsYouManage');
+//     let moreElections = true;  
+//     while (moreElections) {
+        
+//         await page.locator(`#enhanced-table-checkbox-0`).click();
+//         const currentElectionId = await page.url().split('/')[3];
+//         await page.request.delete(`${API_BASE_URL}/election/${currentElectionId}`);
+//         await page.goBack();
+//         const topRowIsVisible = await page.locator(`#enhanced-table-checkbox-0`).isVisible();
+//         moreElections = topRowIsVisible;
+//     }
+// });
+
+
+test.afterEach(async ({page}) => {
+    await page.request.delete(`${API_BASE_URL}/election/${electionId}`);
+    console.log(`deleted election: ${electionId}`);
+});
\ No newline at end of file
diff --git a/testing/tests/example.spec.ts b/testing/tests/example.spec.ts
deleted file mode 100644
index 54a906a4..00000000
--- a/testing/tests/example.spec.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { test, expect } from '@playwright/test';
-
-test('has title', async ({ page }) => {
-  await page.goto('https://playwright.dev/');
-
-  // Expect a title "to contain" a substring.
-  await expect(page).toHaveTitle(/Playwright/);
-});
-
-test('get started link', async ({ page }) => {
-  await page.goto('https://playwright.dev/');
-
-  // Click the get started link.
-  await page.getByRole('link', { name: 'Get started' }).click();
-
-  // Expects page to have a heading with the name of Installation.
-  await expect(page.getByRole('heading', { name: 'Installation' })).toBeVisible();
-});
diff --git a/testing/tests/full-runthrough.spec.ts b/testing/tests/full-runthrough.spec.ts
new file mode 100644
index 00000000..cefab9b8
--- /dev/null
+++ b/testing/tests/full-runthrough.spec.ts
@@ -0,0 +1,143 @@
+import { test, expect } from '@playwright/test';
+
+const API_BASE_URL = 'http://localhost:5000/API';
+let electionId = '';
+
+export const createElection = async (page) => {
+
+}
+
+
+test('full runthrough', async ({ page }) => {
+  await page.goto('/');
+  await page.getByRole('button', { name: 'New Election' }).click();
+  await page.getByLabel('Election', { exact: true }).click();
+  await page.getByRole('button', { name: 'Continue' }).click();
+  await page.fill('input[name="election-title"]', 'Playwright Test Election');
+  //wait until there is only one continue button
+  while ((await page.getByRole('button', { name: 'Continue' }).evaluateAll((el) => el)).length > 1) {
+    continue
+  }
+  await page.getByRole('button', { name: 'Continue' }).click();
+  await page.getByLabel('No').click();
+  await page.getByRole('button', { name: 'Continue' }).click();
+  await page.getByText('Allows multiple votes per device').click();
+  await expect(page.getByText('draft')).toBeVisible();
+  expect(await page.getByLabel('no limit')).toBeChecked();
+  const url = await page.url();
+  const urlArray = url.split('/');
+  electionId = urlArray[urlArray.length - 2];
+  await page.getByRole('button', { name: 'edit-election-details' }).click();
+  await page.fill('input[name="election-title"]', 'Playwright Test Election Updated');
+  await page.fill('textarea[name="election-description"]', 'Playwright Test Election Description');
+  await page.getByLabel('Enable Start/End Times?').click();
+  await page.getByLabel('Time Zone').click();
+  await page.getByRole('option', { name: 'Hawaii' }).click();
+  await page.getByRole('option', { name: 'Hawaii' }).click();
+  const endTimeInput = await page.getByTestId('end-time');
+  const box = await endTimeInput.boundingBox();
+  if (!box) {
+    throw new Error('Could not find bounding box for end time input');
+  }
+  const { width, height } = box;
+  console.log('width:', width, 'height:', height);
+  await endTimeInput.click(
+    { 
+    position: {
+      x: 0.75 * width,
+      y: 16
+    }
+  }
+);
+  await endTimeInput.pressSequentially('12122050');
+  await page.getByRole('button', { name: 'Save' }).click();
+  await page.getByRole('button', { name: 'edit-settings' }).click();
+  await page.getByRole('checkbox', { name: 'Set Number of Rankings' }).click();
+  await page.fill('input[name="rank-limit"]', '8');
+  await page.getByRole('button', { name: 'Save' }).click();
+  await page.getByText('Add').click();
+  await page.getByRole('textbox', { name: 'Title' }).fill('Race 1');
+  await page.getByRole('textbox', { name: 'Description' }).fill('Race 1 Description');
+  await page.getByRole('button', { name: 'Voting Method' }).click();
+  await expect(page.getByLabel('delete-candidate-number-2')).toBeDisabled();
+  await expect(page.getByRole('button', { name: 'drag-candidate-number-2' })).toBeDisabled();
+  for (let i = 1; i <= 6; i++) {
+    await expect(page.locator(`#candidate-name-${i}`)).toBeEnabled();
+    await page.locator(`#candidate-name-${i}`).fill(`Candidate ${i}`);
+  }
+  await page.getByRole('button', { name: 'Save' }).click();
+  await page.getByRole('button', { name: 'Add' }).click({timeout: 100000000});
+  const raceDialog = await page.getByRole('dialog', { name: 'Edit Race' });
+  await raceDialog.getByRole('textbox', { name: 'Title' }).fill('Race 2');
+  await raceDialog.getByRole('textbox', { name: 'Description' }).fill("Race 2 Description");
+  await raceDialog.getByRole('button', { name: 'Voting Method' }).click();
+  await page.getByLabel('Ranked Robin').click();
+  for (let i = 1; i <= 10; i++) {
+    
+    await raceDialog.locator(`#candidate-name-${i}`).fill(`Candidate ${i}`);
+  }
+
+  await page.getByLabel('drag-candidate-number-10').click();
+  await page.getByLabel('delete-candidate-number-10').click();
+  await page.getByRole('button', { name: 'Submit' }).click();
+  await expect(page.getByLabel('candidate-form-11')).not.toBeVisible();
+  await page.locator('#candidate-name-10').fill('Candidate 10');
+  const dragSource = await page.getByLabel('drag-candidate-number-10')
+  const dragTarget = await page.getByRole('button', { name: 'drag-candidate-number-6' })
+  await dragSource.dragTo(dragTarget);
+  await expect(raceDialog.locator('#candidate-name-6')).toHaveValue('Candidate 10');
+  await raceDialog.getByRole('button', { name: 'Save' }).click();
+  await page.getByRole('button', { name: 'Cast Ballot' }).click();
+  const vote = async (page) => {
+    await page.getByRole('button', { name: 'Vote' }).click();
+    await expect(page.getByText('Test Mode')).toBeVisible({ timeout: 10000000 });
+    const submitButton = await page.getByRole('button', { name: 'Submit Ballot' });
+    await expect(submitButton).toBeDisabled();
+    await page.getByLabel('I have read the instructions').click();
+    await page.locator('button[name="Candidate 1_rank-5"]').click();
+    await page.locator('button[name="Candidate 2_rank-4"]').click();
+    await page.locator('button[name="Candidate 3_rank-3"]').click();
+    await page.locator('button[name="Candidate 4_rank-2"]').click();
+    await page.locator('button[name="Candidate 5_rank-1"]').click();
+    await page.locator('button[name="Candidate 6_rank-0"]').click();
+    await expect(submitButton).toBeDisabled();
+    await page.getByRole('button', { name: 'Next' }).click();
+    await page.getByLabel('I have read the instructions').click();
+    await expect(submitButton).toBeEnabled();
+    //check that the highest rank is 8
+    const columnHeadings = await (page.locator('.column-headings'));
+    const columnHeadingElements = await columnHeadings.evaluateAll((elements) => elements.map(element => element.textContent));
+    expect(columnHeadingElements.length).toBe(8);
+    await page.locator('button[name="Candidate 1_rank-8"]').click();
+    await expect(submitButton).toBeDisabled();
+    await page.locator('button[name="Candidate 2_rank-7"]').click();
+    await page.locator('button[name="Candidate 3_rank-6"]').click();
+    await page.locator('button[name="Candidate 4_rank-5"]').click();
+    await page.locator('button[name="Candidate 5_rank-4"]').click();
+    await page.locator('button[name="Candidate 6_rank-3"]').click();
+    await page.locator('button[name="Candidate 7_rank-2"]').click();
+    await page.locator('button[name="Candidate 8_rank-1"]').click();
+    await submitButton.click();
+    await page.getByLabel('Send Ballot Receipt Email?').click();
+    await page.getByRole('button', { name: 'Submit' }).click();
+  };
+  await vote(page);
+  await page.getByRole('button', { name: 'Results' }).click();
+  await expect(page.getByText("There's only one vote so far.").first()).toBeVisible({ timeout: 100000000 });
+  await page.getByRole('link', { name: 'Ballots' }).click();
+  await expect(page.getByText('View Ballots')).toBeVisible({ timeout: 10000000 });
+  await page.getByRole('link', { name: 'Voting Page' }).click();
+  await vote(page);
+  await page.getByRole('button', { name: 'Results' }).click();
+  await expect(page.getByText('Candidate 1 Wins!')).toBeVisible({ timeout: 10000000 });
+});
+
+
+
+test.afterEach(async ({ page }) => {
+  //delete election when finished
+  if (electionId) {
+    await page.request.delete(`${API_BASE_URL}/election/${electionId}`);
+    console.log(`deleted election: ${electionId}`);
+  }
+});
diff --git a/testing/tests/helperfunctions.ts b/testing/tests/helperfunctions.ts
new file mode 100644
index 00000000..6e20eed6
--- /dev/null
+++ b/testing/tests/helperfunctions.ts
@@ -0,0 +1,27 @@
+import { type Page, expect } from '@playwright/test';
+export const createElection = async (
+    page:Page, 
+    electionOrPoll:'Election' | 'Poll', 
+    title:string, restricted:boolean, 
+    choseVoters: 'Email List' | 'ID List' | 'Allows multiple votes per device' | 'one person, one vote') => 
+    {
+    await page.goto('/');
+    await page.getByRole('button', { name: 'New Election' }).click();
+    await page.getByLabel(electionOrPoll, { exact: true }).click();
+    await page.getByRole('button', { name: 'Continue' }).click();
+    await page.fill('input[name="election-title"]', title);
+    //wait until there is only one continue button
+    while ((await page.getByRole('button', { name: 'Continue' }).evaluateAll((el) => el)).length > 1) {
+      continue
+    }
+    await page.getByRole('button', { name: 'Continue' }).click();
+    await page.getByLabel(restricted ? 'No' : 'Yes').click();
+    await page.getByRole('button', { name: 'Continue' }).click();
+    await page.getByText(choseVoters).click();
+    await expect(page.getByText('draft')).toBeVisible();
+    const url = await page.url();
+    const urlArray = url.split('/');
+    return urlArray[urlArray.length - 2];
+  }
+  
+  export const API_BASE_URL = 'http://localhost:5000/API';
diff --git a/testing/tests/test-1.spec.ts b/testing/tests/test-1.spec.ts
new file mode 100644
index 00000000..5b3d48cf
--- /dev/null
+++ b/testing/tests/test-1.spec.ts
@@ -0,0 +1,5 @@
+import { test, expect } from '@playwright/test';
+
+test('test', async ({ page }) => {
+  // Recording...
+});
\ No newline at end of file