fix(e2e): Use button instead of checkbox in parallel test (#1034)

* fix(e2e): Use button instead of checkbox in parallel test

* Revert "fix(e2e): Workaround for parallel.test.ts (#1031)"

This reverts commit a334ff2.

Author: sommeeeer

examples/app-pages-router/app/parallel/layout.tsx

@@ -17,29 +17,13 @@ export default function Layout({
 
   return (
     <div>
-      <div className="flex flex-col mb-10">
-        <label htmlFor="a">
-          Enable A
-          <input
-            name="a"
-            type="checkbox"
-            checked={routeA}
-            onChange={(e) => {
-              setRouteA(e.target.checked);
-            }}
-          />
-        </label>
-        <label htmlFor="b">
-          Enable B
-          <input
-            name="b"
-            type="checkbox"
-            checked={routeB}
-            onChange={(e) => {
-              setRouteB(e.target.checked);
-            }}
-          />
-        </label>
+      <div className="flex flex-col items-start mb-10">
+        <button onClick={() => setRouteA(!routeA)} data-testid="enable-a">
+          {routeA ? "Disable A" : "Enable A"}
+        </button>
+        <button onClick={() => setRouteB(!routeB)} data-testid="enable-b">
+          {routeB ? "Disable B" : "Enable B"}
+        </button>
       </div>
 
       {routeA && a}

examples/app-router/app/parallel/layout.tsx

@@ -17,29 +17,13 @@ export default function Layout({
 
   return (
     <div>
-      <div className="flex flex-col mb-10">
-        <label htmlFor="a">
-          Enable A
-          <input
-            name="a"
-            type="checkbox"
-            checked={routeA}
-            onChange={(e) => {
-              setRouteA(e.target.checked);
-            }}
-          />
-        </label>
-        <label htmlFor="b">
-          Enable B
-          <input
-            name="b"
-            type="checkbox"
-            checked={routeB}
-            onChange={(e) => {
-              setRouteB(e.target.checked);
-            }}
-          />
-        </label>
+      <div className="flex flex-col items-start mb-10">
+        <button onClick={() => setRouteA(!routeA)} data-testid="enable-a">
+          {routeA ? "Disable A" : "Enable A"}
+        </button>
+        <button onClick={() => setRouteB(!routeB)} data-testid="enable-b">
+          {routeB ? "Disable B" : "Enable B"}
+        </button>
       </div>
 
       {routeA && a}

packages/tests-e2e/playwright.config.js

@@ -31,14 +31,4 @@ export default defineConfig({
       },
     },
   ],
-  // Workaround for https://github.com/microsoft/playwright/issues/36371
-  // It seems to be failing in our Github action
-  // https://github.com/opennextjs/opennextjs-aws/actions/runs/19116336570/job/54627469525#step:15:171
-  use: {
-    launchOptions: {
-      args: [
-        "--disable-features=AcceptCHFrame,AutoExpandDetailsElement,AvoidUnnecessaryBeforeUnloadCheckSync,CertificateTransparencyComponentUpdater,DestroyProfileOnBrowserClose,DialMediaRouteProvider,ExtensionManifestV2Disabled,GlobalMediaControls,HttpsUpgrades,ImprovedCookieControls,LazyFrameLoading,LensOverlay,MediaRouter,PaintHolding,ThirdPartyStoragePartitioning,Translate,DeferRendererTasksAfterInput",
-      ],
-    },
-  },
 });

packages/tests-e2e/tests/appPagesRouter/parallel.test.ts

@@ -2,7 +2,7 @@ import { expect, test } from "@playwright/test";
 
 test("Parallel routes", async ({ page }) => {
   await page.goto("/");
-  await page.locator('[href="/parallel"]').click();
+  await page.getByRole("link", { name: "Parallel" }).click();
 
   await page.waitForURL("/parallel");
 
@@ -13,13 +13,13 @@ test("Parallel routes", async ({ page }) => {
   await expect(routeB).not.toBeVisible();
 
   // Enable A, which should be visible but not B
-  await page.locator('input[name="a"]').check();
+  await page.getByTestId("enable-a").click();
   routeA = page.getByText("Parallel Route A");
   await expect(routeA).toBeVisible();
   await expect(routeB).not.toBeVisible();
 
   // Enable B, both should be visible
-  await page.locator('input[name="b"]').check();
+  await page.getByTestId("enable-b").click();
   routeB = page.getByText("Parallel Route B");
   await expect(routeA).toBeVisible();
   await expect(routeB).toBeVisible();

packages/tests-e2e/tests/appRouter/parallel.test.ts

@@ -13,13 +13,13 @@ test("Parallel routes", async ({ page }) => {
   await expect(routeB).not.toBeVisible();
 
   // Enable A, which should be visible but not B
-  await page.locator('input[name="a"]').check();
+  await page.getByTestId("enable-a").click();
   routeA = page.getByText("Parallel Route A");
   await expect(routeA).toBeVisible();
   await expect(routeB).not.toBeVisible();
 
   // Enable B, both should be visible
-  await page.locator('input[name="b"]').check();
+  await page.getByTestId("enable-b").click();
   routeB = page.getByText("Parallel Route B");
   await expect(routeA).toBeVisible();
   await expect(routeB).toBeVisible();