From Playwright

​

Before and after

import { expect, test } from "@playwright/test";

test.use({ storageState: "playwright/.auth/user.json" });

test.describe("checkout", () => {
  test.beforeEach(async ({ page }) => {
    await page.goto("https://shop.example.com/products/42");
  });

  test("guest can buy a blanket", async ({ page }) => {
    await page.getByRole("button", { name: "Add to cart" }).click();
    await page.getByTestId("cart-icon").click();
    await expect(page.getByText("Gravity Blanket")).toBeVisible();
    await page.getByRole("button", { name: "Checkout" }).click();
    await page.getByLabel("Email").fill("jeff@example.com");
    await page.getByRole("button", { name: "Place order" }).click();
    await expect(page).toHaveURL(/\/orders\/\w+/);
    await expect(page.getByText("Order confirmed")).toBeVisible();
  });
});

fileType: momentic/test/v2
id: guest-checkout
url: https://shop.example.com/products/42
labels: [checkout]
before:
  - authLoad: ./playwright/.auth/user.json # reuse the same storage-state file
steps:
  - click: Add to cart
  - click: the cart icon
  - assert: The cart lists "Gravity Blanket"
  - click: Checkout
  - type:
      text: jeff@example.com
      into: the Email field
  - click: Place order
  - waitForUrl:
      regex: /\/orders\/\w+/
  - assert: An order confirmation is visible

npx momentic run checkout.test.yaml

​

API mapping

​

Fixture and helper mapping

​

What keeps working unchanged

• Storage state. authLoad reads the exact storageState JSON Playwright writes. Your existing auth bootstrap (global setup that saves cookies and localStorage) carries over with no conversion.
• Your seed scripts. A javascript step runs Node code in a sandbox with fetch, faker, and file access. Call your existing seed endpoints or database helpers from before.
• Your CI job. Momentic installs and runs in the same GitHub Actions job; see Run in CI.
• JUnit dashboards. --reporter junit keeps your existing test analytics.

​

What does not map

• Playwright’s element handles and locator chains. Momentic re-resolves a target from its description each run (with a step cache to skip the model call when the page has not changed). There is no way to hold a locator object across steps; express the intent in the target text instead.
• Multi-page browserContext control. Momentic manages the browser context. newTab, closeTab, and navigate cover tab workflows, but you do not create isolated contexts mid-test. Use separate tests or authLoad per test for different identities.
• page.on("console")-style listeners. There is no equivalent passive console assert; extract what you need with a javascript step.
• Codegen. Momentic’s equivalent is the local editor and AI authoring, not a recorder that emits code.

​

Incremental strategy

1. Keep the Playwright suite running. Momentic and Playwright can coexist in the same repo; momentic.config.yaml does not conflict with playwright.config.ts.
2. Port the highest-value flows first: login, checkout, the flows that page you. Give each ported test a label such as migrated.
3. Run both suites in CI during the overlap. Gate PRs on the Playwright suite; run Momentic with --labels migrated in parallel until you trust it.
4. Delete a spec only after its Momentic replacement passes several consecutive runs and you have reviewed a failure or two to confirm it catches what it should.
5. When Playwright is fully retired, remove its job, playwright.config.ts, browsers install step, and node_modules dependency.

​

Porting at scale with a coding agent

Port the Playwright specs in e2e/checkout.spec.ts to Momentic tests.
Read the momentic-test skill first. Write one *.test.yaml per Playwright
test() under tests/, keep the describe names as directory structure, reuse
playwright/.auth/user.json via authLoad, and run each new test with
npx momentic run <file> before moving on.

​

Related

• Test portability
• Web steps reference
• JavaScript integration
• Authentication guides