Merge pull request #8 from Jobflow-io/page-frames-and-waitforloadstate

fiws · web-flow · commit 7f4fa1cf0470 · 2026-01-20T15:55:31.000+01:00
diff --git a/src/frame.test.ts b/src/frame.test.ts
@@ -3,7 +3,7 @@ import { Effect } from "effect";
 import { chromium } from "playwright-core";
 import { PlaywrightBrowser } from "./browser";
 import { PlaywrightEnvironment } from "./experimental";
-import { PlaywrightFrame } from "./frame";
+import type { PlaywrightFrameService } from "./frame";
 
 layer(PlaywrightEnvironment.layer(chromium))("PlaywrightFrame", (it) => {
   it.scoped("should wrap frame methods", () =>
@@ -20,41 +20,76 @@ layer(PlaywrightEnvironment.layer(chromium))("PlaywrightFrame", (it) => {
         document.body.appendChild(iframe);
       });
 
+      // wait for iframe to load or something. has to be networkidle for some reason
+      yield* page.waitForLoadState("networkidle");
+
       // Get the frame
-      const frameService = yield* page.use(async (p) => {
-        let frame = p.frames().find((f) => f.name() === "test-frame");
-        if (!frame) {
-          // Wait a bit if not found immediately (though srcdoc is sync-ish, iframe loading is async)
-          await p.waitForLoadState("networkidle");
-          frame = p.frames().find((f) => f.name() === "test-frame");
-        }
-        if (!frame) throw new Error("Frame not found");
-        return PlaywrightFrame.make(frame);
-      });
+      const frames = yield* page.frames;
+
+      const isTestFrame = (f: PlaywrightFrameService) =>
+        f.name.pipe(Effect.map((n) => n === "test-frame"));
+
+      const frame = yield* Effect.findFirst(frames, isTestFrame).pipe(
+        Effect.flatten,
+        Effect.retry({
+          times: 3,
+        }),
+      );
+
+      assert.isOk(frame, "Frame not found");
 
       // Test title
-      const title = yield* frameService.title;
+      const title = yield* frame.title;
       assert.strictEqual(title, "Frame Title");
 
       // Test content
-      const content = yield* frameService.content;
+      const content = yield* frame.content;
       assert.isTrue(content.includes("Hello from Frame"));
 
       // Test evaluate
-      const result = yield* frameService.evaluate(() => 1 + 1);
+      const result = yield* frame.evaluate(() => 1 + 1);
       assert.strictEqual(result, 2);
 
       // Test locator
-      const text = yield* frameService.locator("#target").textContent();
+      const text = yield* frame.locator("#target").textContent();
       assert.strictEqual(text, "Hello from Frame");
 
       // Test getByText
-      const byText = yield* frameService.getByText("Hello from Frame").count;
+      const byText = yield* frame.getByText("Hello from Frame").count;
       assert.strictEqual(byText, 1);
 
       // Test name
-      const name = yield* frameService.name;
+      const name = yield* frame.name;
       assert.strictEqual(name, "test-frame");
     }).pipe(PlaywrightEnvironment.withBrowser),
   );
+
+  it.scoped("waitForLoadState should resolve on frame", () =>
+    Effect.gen(function* () {
+      const browser = yield* PlaywrightBrowser;
+      const page = yield* browser.newPage();
+
+      // Load a page that already has an iframe
+      yield* page.goto(
+        "data:text/html,<html><body><iframe name='test-frame' src='about:blank'></iframe></body></html>",
+      );
+
+      // Wait for the main page to settle
+      yield* page.waitForLoadState("load");
+
+      // Get the frame - it should be there now
+      // Get the frame - it should be there now
+      const frames = yield* page.frames;
+      const frameService = frames.find((f) =>
+        Effect.runSync(f.name.pipe(Effect.map((n) => n === "test-frame"))),
+      );
+
+      assert.isOk(frameService, "Frame not found");
+
+      // Wait for 'load' state on the frame
+      yield* frameService.waitForLoadState("load");
+
+      assert.ok(true);
+    }).pipe(PlaywrightEnvironment.withBrowser),
+  );
 });
diff --git a/src/frame.ts b/src/frame.ts
@@ -30,6 +30,16 @@ export interface PlaywrightFrameService {
     url: Parameters<Frame["waitForURL"]>[0],
     options?: Parameters<Frame["waitForURL"]>[1],
   ) => Effect.Effect<void, PlaywrightError>;
+  /**
+   * Waits for the frame to reach the given load state.
+   *
+   * @see {@link Frame.waitForLoadState}
+   * @since 0.2.0
+   */
+  readonly waitForLoadState: (
+    state?: Parameters<Frame["waitForLoadState"]>[0],
+    options?: Parameters<Frame["waitForLoadState"]>[1],
+  ) => Effect.Effect<void, PlaywrightError>;
   /**
    * Evaluates a function in the context of the frame.
    *
@@ -164,6 +174,8 @@ export class PlaywrightFrame extends Context.Tag(
     return PlaywrightFrame.of({
       goto: (url, options) => use((f) => f.goto(url, options)),
       waitForURL: (url, options) => use((f) => f.waitForURL(url, options)),
+      waitForLoadState: (state, options) =>
+        use((f) => f.waitForLoadState(state, options)),
       evaluate: <R, Arg>(f: PageFunction<Arg, R>, arg?: Arg) =>
         use((frame) => frame.evaluate<R, Arg>(f, arg as Arg)),
       title: use((f) => f.title()),
diff --git a/src/page.test.ts b/src/page.test.ts
@@ -215,4 +215,21 @@ layer(PlaywrightEnvironment.layer(chromium))("PlaywrightPage", (it) => {
       );
     }).pipe(PlaywrightEnvironment.withBrowser),
   );
+
+  it.scoped("waitForLoadState should resolve", () =>
+    Effect.gen(function* () {
+      const browser = yield* PlaywrightBrowser;
+      const page = yield* browser.newPage();
+
+      // Using about:blank and history API to simulate some activity, but networkidle is tricky on blank page.
+      // load and domcontentloaded are safer.
+      yield* page.goto("about:blank");
+
+      // Wait for 'load' state which should already be true or happen quickly
+      yield* page.waitForLoadState("load");
+
+      // No assertion needed other than it doesn't timeout/error
+      assert.ok(true);
+    }).pipe(PlaywrightEnvironment.withBrowser),
+  );
 });
diff --git a/src/page.ts b/src/page.ts
@@ -109,6 +109,23 @@ export interface PlaywrightPageService {
     url: Parameters<Page["waitForURL"]>[0],
     options?: Parameters<Page["waitForURL"]>[1],
   ) => Effect.Effect<void, PlaywrightError>;
+  /**
+   * Waits for the page to reach the given load state.
+   *
+   * NOTE: Most of the time, this method is not needed because Playwright auto-waits before every action.
+   *
+   * @example
+   * ```ts
+   * yield* page.waitForLoadState("domcontentloaded");
+   * ```
+   *
+   * @see {@link Page.waitForLoadState}
+   * @since 0.2.0
+   */
+  readonly waitForLoadState: (
+    state?: Parameters<Page["waitForLoadState"]>[0],
+    options?: Parameters<Page["waitForLoadState"]>[1],
+  ) => Effect.Effect<void, PlaywrightError>;
   /**
    * Evaluates a function in the context of the page.
    *
@@ -232,6 +249,17 @@ export interface PlaywrightPageService {
    */
   readonly url: Effect.Effect<string, PlaywrightError>;
 
+  /**
+   * Returns all frames attached to the page.
+   *
+   * @see {@link Page.frames}
+   * @since 0.2.0
+   */
+  readonly frames: Effect.Effect<
+    ReadonlyArray<typeof PlaywrightFrame.Service>,
+    PlaywrightError
+  >;
+
   /**
    * Creates a stream of the given event from the page.
    *
@@ -284,6 +312,8 @@ export class PlaywrightPage extends Context.Tag(
     return PlaywrightPage.of({
       goto: (url, options) => use((p) => p.goto(url, options)),
       waitForURL: (url, options) => use((p) => p.waitForURL(url, options)),
+      waitForLoadState: (state, options) =>
+        use((p) => p.waitForLoadState(state, options)),
       title: use((p) => p.title()),
       evaluate: <R, Arg>(f: PageFunction<Arg, R>, arg?: Arg) =>
         use((p) => p.evaluate<R, Arg>(f, arg as Arg)),
@@ -297,6 +327,7 @@ export class PlaywrightPage extends Context.Tag(
         PlaywrightLocator.make(page.getByLabel(label, options)),
       getByTestId: (testId) => PlaywrightLocator.make(page.getByTestId(testId)),
       url: Effect.sync(() => page.url()),
+      frames: use((p) => Promise.resolve(p.frames().map(PlaywrightFrame.make))),
       reload: use((p) => p.reload()),
       close: use((p) => p.close()),
       click: (selector, options) => use((p) => p.click(selector, options)),
