feat(browser): make iframe scalable, improve documentation

[sheremet-va]

Description

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.

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:.

[sheremet-va]

@userquin I would also love to have https://github.com/user-attachments/assets/29e796ae-6c84-4cf7-8328-b846e3df1f35 in "Running Tests" section - could you help me with that? (need dark mode)

[userquin]

check this 2 dead links: https://app.netlify.com/sites/vitest-dev/deploys/66ab9d78d3068b00084d4d00#L358-L359

[sheremet-va]

check this 2 dead links: app.netlify.com/sites/vitest-dev/deploys/66ab9d78d3068b00084d4d00

Fixed just now

[netlify]

✅ Deploy Preview for vitest-dev ready!

Name	Link
🔨 Latest commit	2209d3c
🔍 Latest deploy log	https://app.netlify.com/sites/vitest-dev/deploys/66b09853b726730008e13698
😎 Deploy Preview	https://deploy-preview-6257--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 site configuration.

[userquin]

So, now the only way to access the browser mode page is from the navbar, maybe we can add the link in the left aside. On mobile the browser mode link will be on top right menu and missing from the left menu hamburger button.

(just add the Browser Mode link without expandable children)

[sheremet-va]

So, now the only way to access the browser mode page is from the navbar, maybe we can add the link in the left aside. On mobile the browser mode link will be on top right menu and missing from the left menu hamburger button.

(just add the Browser Mode link without expandable children)

My logic was that it is still displayed in the right hamburger on mobile. Isn't it enough?

[userquin]

It is fine, no other entries in the navbar present.

FYI: maybe we can remove mastodon, X and discord links from resources navbar menu, already present in the navbar

[sheremet-va]

@userquin @JessicaSachs made iframe scalable (similarly to how cypress implements it) - please check when you have time 🙏🏻

Note: I didn't change the viewport reset yet, it's a bit tricky (it won't be changed in this PR)

[sheremet-va]

Oof, I forgot about the "Select a test to run" use case 👀

[userquin]

Oof, I forgot about the "Select a test to run" use case

from the ui?

[userquin]

The ui doesn't start, Vitest hangs when running nr test:browser:preview or any other provider.

[userquin]

LGTM

Remember to update images for Vitest ui and coverage (6 in total, 3 per theme): /guide/ui.html and /guide/coverage.html#vitest-ui pages

[rhengles]

I searched the rationale for the decision to make the iframe scaled, but I didn't find any explanation, except for the comment above saying that "Cypress did it". #6257 (comment)

When I'm trying to make visual tests and save snapshots/screenshots, they also appear scaled because of this.
The visual tests should never be scaled (imho).
At least, Vitest could add an option to disable scaling or forcing some custom factor.