website: Add e2e tests of creating an assistant/prompter reply

These are intended to function as a minimal smoke test that the API interaction with the backend is functional.

website/src/components/TaskInfo/TaskInfo.tsx

@@ -2,7 +2,7 @@ export const TaskInfo = ({ id, output }: { id: string; output: string }) => {
   return (
     <div className="grid grid-cols-[min-content_auto] gap-x-2 text-gray-700">
       <b>Prompt</b>
-      <span>{id}</span>
+      <span data-cy="task-id">{id}</span>
       <b>Output</b>
       <span>{output}</span>
     </div>

website/src/pages/create/assistant_reply.tsx

@@ -63,7 +63,7 @@ const AssistantReply = () => {
           <p className="text-lg py-1">Given the following conversation, provide an adequate reply</p>
           <Messages messages={task.conversation.messages} post_id={task.id} />
         </>
-        <Textarea name="reply" placeholder="Reply..." ref={inputRef} />
+        <Textarea name="reply" data-cy="reply" placeholder="Reply..." ref={inputRef} />
       </TwoColumns>
 
       <section className="mb-8 p-4 rounded-lg shadow-lg bg-white flex flex-row justify-items-stretch ">
@@ -72,9 +72,13 @@ const AssistantReply = () => {
         <Flex justify="center" ml="auto" gap={2}>
           <SkipButton>Skip</SkipButton>
           {endTask.task.type !== "task_done" ? (
-            <SubmitButton onClick={() => submitResponse(tasks[0])}>Submit</SubmitButton>
+            <SubmitButton data-cy="submit" onClick={() => submitResponse(tasks[0])}>
+              Submit
+            </SubmitButton>
           ) : (
-            <SubmitButton onClick={fetchNextTask}>Next Task</SubmitButton>
+            <SubmitButton data-cy="next-task" onClick={fetchNextTask}>
+              Next Task
+            </SubmitButton>
           )}
         </Flex>
       </section>

website/src/pages/create/user_reply.tsx

@@ -64,7 +64,7 @@ const UserReply = () => {
           <Messages messages={task.conversation.messages} post_id={task.id} />
           {task.hint && <p className="text-lg py-1">Hint: {task.hint}</p>}
         </>
-        <Textarea name="reply" placeholder="Reply..." ref={inputRef} />
+        <Textarea name="reply" data-cy="reply" placeholder="Reply..." ref={inputRef} />
       </TwoColumns>
 
       <section className="mb-8 p-4 rounded-lg shadow-lg bg-white flex flex-row justify-items-stretch ">
@@ -72,9 +72,13 @@ const UserReply = () => {
         <Flex justify="center" ml="auto" gap={2}>
           <SkipButton>Skip</SkipButton>
           {endTask.task.type !== "task_done" ? (
-            <SubmitButton onClick={() => submitResponse(tasks[0])}>Submit</SubmitButton>
+            <SubmitButton data-cy="submit" onClick={() => submitResponse(tasks[0])}>
+              Submit
+            </SubmitButton>
           ) : (
-            <SubmitButton onClick={fetchNextTask}>Next Task</SubmitButton>
+            <SubmitButton data-cy="next-task" onClick={fetchNextTask}>
+              Next Task
+            </SubmitButton>
           )}
         </Flex>
       </section>