Testing

Browser Testing

Expressive, fluent end-to-end browser testing. User interaction, page assertions, and JavaScript testing, powered by Puppeteer but with a developer-friendly API.

Fluent API

Chainable methods like visit().type().press().

Visual Testing

See what your user sees with headless or headed modes.

Writing Tests

Use the browse helper to spin up a browser instance. It automatically handles launching and closing the browser.

tests/browser/login.test.ts

1// tests/browser/login.test.ts
2import { browse } from "canxjs/testing";
3import { describe, test } from "bun:test";
4
5describe("Login Flow", () => {
6  test("user can login", async () => {
7    await browse(async (browser) => {
8      await browser.visit("/login")
9                   .type("email", "test@example.com")
10                   .type("password", "password")
11                   .press("Login")
12                   .waitForText("Dashboard")
13                   .assertPathIs("/dashboard")
14                   .assertSee("Welcome, Test User");
15    });
16  });
17});

Available Methods

Browser API

1await browse(async (browser) => {
2  // Navigation
3  await browser.visit("/");
4  await browser.back();
5  await browser.refresh();
6
7  // Interaction
8  await browser.type("input[name=search]", "Laptop");
9  await browser.click("#search-btn");
10  await browser.press("Enter");
11  await browser.check("terms");
12
13  // Assertions
14  await browser.assertSee("Results");
15  await browser.assertDontSee("Error");
16  await browser.assertPathIs("/search");
17  await browser.assertTitle("Search Results - My App");
18  
19  // Waiting
20  await browser.waitFor(".modal");
21  await browser.waitForText("Success");
22});

More Testing

Check out other testing utilities including HTTP and database assertions.