fix(e2e): fillAndSubmitCommand now checks the stdout and stderr after the stdin if passed expectStdout or expectStderr

Avoids false positives

Author: topheman

packages/web-host/src/components/ReplHistory.tsx

@@ -23,6 +23,7 @@ export function ReplHistory({
             <pre
               className="bg-gray-50 whitespace-pre-wrap word-break-word"
               data-stdtype="stdin"
+              data-std-index={index}
             >
               {entry.stdin}
             </pre>
@@ -31,6 +32,7 @@ export function ReplHistory({
             <pre
               className="bg-gray-50 whitespace-pre-wrap word-break-word"
               data-stdtype="stdin"
+              data-std-index={index}
               // biome-ignore lint/security/noDangerouslySetInnerHtml: need to pass `allowHtml:true` to the addReplHistoryEntry function - only used for adding links to source of plugins when loaded
               dangerouslySetInnerHTML={{ __html: entry.stdin }}
             />
@@ -40,6 +42,7 @@ export function ReplHistory({
               className="bg-green-100 whitespace-pre-wrap before:content-[attr(data-status)] relative before:absolute before:right-0 before:top-0 word-break-word"
               data-status={entry.status === "success" ? "✅" : "❌"}
               data-stdtype="stdout"
+              data-std-index={index}
             >
               {entry.stdout}
             </pre>
@@ -49,6 +52,7 @@ export function ReplHistory({
               className="bg-red-100 whitespace-pre-wrap before:content-[attr(data-status)] relative before:absolute before:right-0 before:top-0 word-break-word"
               data-status={entry.status === "success" ? "✅" : "❌"}
               data-stdtype="stderr"
+              data-std-index={index}
             >
               {entry.stderr}
             </pre>

packages/web-host/tests/utils.ts

@@ -1,4 +1,6 @@
-import { expect, type Page } from "@playwright/test";
+import { expect, type Locator, type Page } from "@playwright/test";
+
+const NEXT_FRAME_DELAY = 64;
 
 /**
  * Get the last std output of the given type
@@ -10,6 +12,26 @@ export async function getLastStd(
   return await page.locator(`[data-stdtype='${type}']`).last();
 }
 
+/**
+ * Get the last std output of the given type after the given locator
+ * This is useful to get the last std output after a command has been submitted
+ * This ensures you don't have false positives when checking the last std output
+ */
+export async function getLastStdAfter(
+  page: Page,
+  type: "stdin" | "stdout" | "stderr",
+  stdLocator: Locator,
+) {
+  const stdinIndex = await stdLocator.getAttribute("data-std-index");
+  return await page
+    .locator(`[data-std-index='${stdinIndex}'] ~ [data-stdtype='${type}']`)
+    .last();
+}
+
+async function sleep(ms: number) {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
 /**
  * Fill the input with the command and submit it
  * Pass the expected stdin, stdout and stderr to check the results
@@ -30,14 +52,15 @@ export async function fillAndSubmitCommand(
   const input = await page.getByPlaceholder("Type a command...");
   await input.fill(command);
   await input.press("Enter");
+  await sleep(NEXT_FRAME_DELAY);
   const stdin = await getLastStd(page, "stdin");
   await expect(stdin).toHaveText(expectStdin);
   if (expectStdout) {
-    const stdout = await getLastStd(page, "stdout");
+    const stdout = await getLastStdAfter(page, "stdout", stdin);
     await expect(stdout).toHaveText(expectStdout);
   }
   if (expectStderr) {
-    const stderr = await getLastStd(page, "stderr");
+    const stderr = await getLastStdAfter(page, "stderr", stdin);
     await expect(stderr).toHaveText(expectStderr);
   }
 }