Skip to content

Add first-class viewport resize API #7

Description

@schalkneethling

Summary

Add first-class API support for changing the browser viewport during a css-expect runtime so tests can run against multiple dimensions without creating separate runtimes.

Context

createCssExpect() already accepts an initial viewport option and passes it to Playwright when creating the browser context. That supports starting a test run at a specific size, but the runtime does not currently expose a way to resize the existing page/context between expectation groups.

This would let users express flows such as:

const css = await createCssExpect({ css });

await css.viewport({ width: 1440, height: 900 });
await css.function("--space", []).as("margin-left").equals("24px");

await css.viewport({ width: 390, height: 844 });
await css.function("--space", []).as("margin-left").equals("16px");

Proposed API

Expose a runtime method such as:

await css.viewport({ width: 390, height: 844 });

Possible naming alternatives: setViewport(), resize(), or atViewport().

Acceptance criteria

  • Users can resize the active browser page after createCssExpect() without recreating the runtime.
  • Existing viewport creation option continues to work.
  • Runtime tests cover initial viewport and runtime resize behavior.
  • README documents multi-viewport usage with desktop and mobile examples.
  • Diagnostics include enough viewport context to debug failures that differ by size, if practical.

Notes

Implementation likely maps to Playwright page resizing, while preserving the current private runtime/page encapsulation.

Metadata

Metadata

Assignees

No one assigned

    Labels

    p2Medium priority: useful, goal-aligned, not urgent

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions