fix(browser): iframe scale by macarie · Pull Request #9745 · vitest-dev/vitest

macarie · 2026-02-25T23:23:40Z

Description

Highly WIP and needs a lot of testing, but so far seems to work with Playwright with chromium, firefox, and webkit.

Have to look into WebdriverIO (🫣)

Fixes #9124
Fixes #9363

Please don't delete this checklist! Before submitting the PR, please make sure you do the following:

It's really useful if your PR references an issue where it is discussed ahead of time. If the feature is substantial or introduces breaking changes without a discussion, PR might be closed.
Ideally, include a test that fails without this PR but passes with it.
Please, don't make changes to pnpm-lock.yaml unless you introduce a new test example.
Please check Allow edits by maintainers to make review process faster. Note that this option is not available for repositories that are owned by Github organizations.

Tests

Run the tests with pnpm test:ci.

Documentation

If you introduce new functionality, document it. You can run documentation with pnpm run docs command.

Changesets

Changes in changelog are generated from PR name. Please, make sure that it explains your changes in an understandable manner. Please, prefix changeset messages with feat:, fix:, perf:, docs:, or chore:.

netlify · 2026-02-25T23:24:52Z

✅ Deploy Preview for vitest-dev ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	`5ea6c4c`
🔍 Latest deploy log	https://app.netlify.com/projects/vitest-dev/deploys/69cd9f0b99fc760008ffc7e8
😎 Deploy Preview	https://deploy-preview-9745--vitest-dev.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

sheremet-va · 2026-03-14T19:30:38Z

Any news here? 👀

macarie · 2026-03-15T21:17:49Z

From my testing seems to be working fairly well with Playwright, but I've had no time to implement the WebdriverIO version yet. Hopefully this week 🤞🏼

packages/browser/src/client/orchestrator.ts

test/browser/specs/to-match-screenshot.test.ts

macarie · 2026-04-02T08:19:12Z

packages/ui/client/components/BrowserIframe.vue

      />
      <span class="pointer-events-none" text-sm>
        {{ viewport[0] }}x{{ viewport[1] }}px
-        <span v-if="scale < 1">({{ (scale * 100).toFixed(0) }}%)</span>


I think I can add this back now if necessary.

Why would we remove it? The window is still scaled

I removed it initially when I wasn't sure about what approach to go with. I'll add it back 👍🏼

macarie · 2026-04-02T09:34:07Z

I moved the scaling part to be CSS-only, which allowed removing some JS. I think resizing the browser window and the panels now feels more fluid and less janky, especially on old(er) hardware.

When taking screenshots a bit of CSS is injected to remove the scaling from the iframe and making it escape the pane. This should fix the "low resolution" issues, removing the scaling also leads to not having to deal with different sub pixel sizes and GPU rendering differences.

In headless mode (with no UI), Playwright now uses the set viewport, same as WebdriverIO, this should allow capturing screenshots larger than the default viewport size. In UI mode this is not done to prevent having flashing windows (more than we already have), so it's up to the user to make sure the rendered elements fit in the window.

macarie · 2026-04-02T09:44:27Z

packages/browser-playwright/src/commands/screenshot.ts

+  iframe {
+    position: absolute !important;
+    inset: 0  !important;
+    z-index: ${Number.MAX_SAFE_INTEGER} !important;
+    transform: none !important;
+  }


We might have to opacity: 0 everything else. When the iframe doesn't have a background, the UI peeks through.

This can be fixed by setting a background color. I'm not sure if it should change with the theme or if it should stay white tho 🤔

packages/browser-playwright/src/locators.ts

packages/browser-playwright/src/commands/viewport.ts

sheremet-va · 2026-04-06T19:18:27Z

packages/browser-playwright/src/commands/screenshot.ts

 }
+
+const SCREENSHOT_STYLES = /* css */`
+  iframe {


Shouldn't this be [data-vitest=true]?

Yes, should be more specific. Do you prefer data-vitest or its name (or both)?

I think we use data-vitest everywhere in locators), but I’m not sure

Used data-vitest, looks like it's the one that's used in some other places too.

sheremet-va · 2026-04-06T19:20:02Z

packages/ui/client/components/BrowserIframe.vue

      />
      <span class="pointer-events-none" text-sm>
        {{ viewport[0] }}x{{ viewport[1] }}px
-        <span v-if="scale < 1">({{ (scale * 100).toFixed(0) }}%)</span>


Why would we remove it? The window is still scaled

sheremet-va · 2026-04-06T19:22:27Z

test/browser/specs/to-match-screenshot.test.ts

            enabled: true,
            screenshotFailures: false,
-            provider: playwright(),
+            provider: ${provider.name}(),


runInlineTests can inject these automatically if you just pass down an object instead of a file content string (so passing down provider in the test will correctly specify it in the config)

packages/browser-webdriverio/src/commands/screenshot.ts

This reverts commit 99be09e.

sheremet-va · 2026-04-08T16:27:45Z

packages/browser/src/client/tester/tester-utils.ts

  }
+
+  // we can safely use `a` as both vertical and horizontal scale are the same
+  const scale = new DOMMatrix(getComputedStyle(iframe).transform).a


Can you add an explanation (as a comment) of what is going on here? I've never seen this usage before

I've updated the comment, does this version explain it better? 🤔

sheremet-va · 2026-04-08T16:29:11Z

test/browser/specs/to-match-screenshot.test.ts


-        expect(vitest.stdout).toContain('✓ |chromium| basic.test.ts > screenshot-snapshot')
+        for (const instance of instances) {
+          expect(`✓ |${instance.browser}| basic.test.ts > screenshot-snapshot`)


This doesn't test anything?

I wonder if we should throw an error if expect was called without a matcher

Fixed it, messed up with the multi-cursor (again) 😅

I wonder if we should throw an error if expect was called without a matcher

That would be nice, or maybe a lint issue 👀

macarie force-pushed the fix/scale-iframe branch 2 times, most recently from 22cdbd6 to b1916ae Compare March 3, 2026 11:14

macarie commented Mar 15, 2026

View reviewed changes

packages/browser/src/client/orchestrator.ts Outdated Show resolved Hide resolved

macarie force-pushed the fix/scale-iframe branch 3 times, most recently from 77883ff to 6e15663 Compare March 18, 2026 20:35

macarie added 4 commits April 2, 2026 00:41

fix(browser): iframe scale

3893ec6

test: run toMatchScreenshot tests on all providers

fadca47

fix: resize viewport in Playwright

1470e91

fix: scaling issue

5ea6c4c

macarie force-pushed the fix/scale-iframe branch from 4182a00 to 5ea6c4c Compare April 1, 2026 22:41

macarie commented Apr 2, 2026

View reviewed changes

test/browser/specs/to-match-screenshot.test.ts Outdated Show resolved Hide resolved

macarie commented Apr 2, 2026

View reviewed changes

macarie marked this pull request as ready for review April 2, 2026 09:34

macarie commented Apr 2, 2026

View reviewed changes

packages/browser-playwright/src/locators.ts Outdated Show resolved Hide resolved

macarie added 2 commits April 3, 2026 22:25

revert: ResizeObserver in locators

6585d1e

chore: remove double space

0e51888

sheremet-va reviewed Apr 6, 2026

View reviewed changes

macarie added 7 commits April 6, 2026 22:26

chore: use page from context

99fa6e8

chore: restore scaling indicator

4a90101

fix: height-based scaling

4f244e5

chore: use context directly

a775b87

chore: iframe selector specificity

25b9d8a

chore: iframe selector

7f62bf7

fix: webdriverio CSS injection

7aaee84

macarie added 3 commits April 8, 2026 00:33

test: check that non-ui screenshot matches ui

e3c0566

chore: remove webdriverio panel resize

99be09e

fix: apply background color to iframe

bae1fc6

macarie commented Apr 7, 2026

View reviewed changes

packages/browser-webdriverio/src/commands/screenshot.ts Outdated Show resolved Hide resolved

macarie added 3 commits April 8, 2026 15:27

Revert "chore: remove webdriverio panel resize"

fdbc616

This reverts commit 99be09e.

chore: remove injected CSS from webdriverio as it doesn't scale

cc7e0ce

test: improve reliability and config

83b5def

sheremet-va reviewed Apr 8, 2026

View reviewed changes

macarie added 2 commits April 8, 2026 22:12

chore: explain DOMMatrix usage

b95dbbe

test: add missing assertion

79d53e1

Uh oh!

Conversation

macarie commented Feb 25, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Please don't delete this checklist! Before submitting the PR, please make sure you do the following:

Tests

Documentation

Changesets

Uh oh!

netlify bot commented Feb 25, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for vitest-dev ready!

Uh oh!

sheremet-va commented Mar 14, 2026

Uh oh!

macarie commented Mar 15, 2026

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

macarie commented Apr 2, 2026

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

sheremet-va Apr 8, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

macarie commented Feb 25, 2026 •

edited

Loading

netlify bot commented Feb 25, 2026 •

edited

Loading

sheremet-va Apr 8, 2026 •

edited

Loading