Skip to content

Commit ce6c8ac

Browse files
9aoy9aoy
authored
docs: add browser viewport config (#1428)
1 parent 84ccf9e commit ce6c8ac

2 files changed

Lines changed: 200 additions & 0 deletions

File tree

‎website/docs/en/config/test/browser.mdx‎

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,39 @@ import { ApiMeta } from '@components/ApiMeta';
99
- **Type:**
1010

1111
```ts
12+
type BrowserViewport =
13+
| {
14+
width: number;
15+
height: number;
16+
}
17+
| DevicePreset;
18+
19+
type DevicePreset =
20+
| 'iPhoneSE'
21+
| 'iPhoneXR'
22+
| 'iPhone12Pro'
23+
| 'iPhone14ProMax'
24+
| 'Pixel7'
25+
| 'SamsungGalaxyS8Plus'
26+
| 'SamsungGalaxyS20Ultra'
27+
| 'iPadMini'
28+
| 'iPadAir'
29+
| 'iPadPro'
30+
| 'SurfacePro7'
31+
| 'SurfaceDuo'
32+
| 'GalaxyZFold5'
33+
| 'AsusZenbookFold'
34+
| 'SamsungGalaxyA51A71'
35+
| 'NestHub'
36+
| 'NestHubMax';
37+
1238
type BrowserModeConfig = {
1339
enabled?: boolean;
1440
provider: 'playwright';
1541
browser?: 'chromium' | 'firefox' | 'webkit';
1642
headless?: boolean;
1743
port?: number;
44+
viewport?: BrowserViewport;
1845
strictPort?: boolean;
1946
providerOptions?: Record<string, unknown>;
2047
};
@@ -29,6 +56,7 @@ const defaultBrowser = {
2956
browser: 'chromium',
3057
headless: true, // CI environment; false for local development
3158
port: undefined, // Random available port
59+
viewport: undefined, // Browser UI fills the preview panel
3260
strictPort: false,
3361
providerOptions: {},
3462
};
@@ -185,6 +213,78 @@ export default defineConfig({
185213

186214
:::
187215

216+
### viewport
217+
218+
<ApiMeta addedVersion="0.8.4" />
219+
220+
- **Type:** `BrowserViewport`
221+
- **Default:** `undefined`
222+
223+
Set the default runner iframe viewport for Browser Mode tests. When not specified, the Browser UI fills the preview panel.
224+
225+
```ts
226+
type BrowserViewport =
227+
| {
228+
width: number;
229+
height: number;
230+
}
231+
| DevicePreset;
232+
```
233+
234+
Use an explicit size when you want all files in a browser project to run with the same viewport:
235+
236+
```ts title="rstest.config.ts"
237+
import { defineConfig } from '@rstest/core';
238+
239+
export default defineConfig({
240+
browser: {
241+
enabled: true,
242+
provider: 'playwright',
243+
viewport: { width: 390, height: 844 },
244+
},
245+
});
246+
```
247+
248+
You can also use a built-in device preset:
249+
250+
```ts title="rstest.config.ts"
251+
import { defineConfig } from '@rstest/core';
252+
253+
export default defineConfig({
254+
browser: {
255+
enabled: true,
256+
provider: 'playwright',
257+
viewport: 'iPhone12Pro',
258+
},
259+
});
260+
```
261+
262+
Supported presets:
263+
264+
| Preset | Size |
265+
| ----------------------- | ----------- |
266+
| `iPhoneSE` | 375 x 667 |
267+
| `iPhoneXR` | 414 x 896 |
268+
| `iPhone12Pro` | 390 x 844 |
269+
| `iPhone14ProMax` | 430 x 932 |
270+
| `Pixel7` | 412 x 915 |
271+
| `SamsungGalaxyS8Plus` | 360 x 740 |
272+
| `SamsungGalaxyS20Ultra` | 412 x 915 |
273+
| `iPadMini` | 768 x 1024 |
274+
| `iPadAir` | 820 x 1180 |
275+
| `iPadPro` | 1024 x 1366 |
276+
| `SurfacePro7` | 912 x 1368 |
277+
| `SurfaceDuo` | 540 x 720 |
278+
| `GalaxyZFold5` | 344 x 882 |
279+
| `AsusZenbookFold` | 853 x 1280 |
280+
| `SamsungGalaxyA51A71` | 412 x 914 |
281+
| `NestHub` | 1024 x 600 |
282+
| `NestHubMax` | 1280 x 800 |
283+
284+
:::tip
285+
`browser.viewport` controls the test runner iframe viewport. If you need Playwright context options such as locale, color scheme, or permissions, configure them through [`providerOptions.context`](#provider-options).
286+
:::
287+
188288
### port
189289

190290
- **Type:** `number`

‎website/docs/zh/config/test/browser.mdx‎

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,39 @@ import { ApiMeta } from '@components/ApiMeta';
99
- **类型：**
1010

1111
```ts
12+
type BrowserViewport =
13+
| {
14+
width: number;
15+
height: number;
16+
}
17+
| DevicePreset;
18+
19+
type DevicePreset =
20+
| 'iPhoneSE'
21+
| 'iPhoneXR'
22+
| 'iPhone12Pro'
23+
| 'iPhone14ProMax'
24+
| 'Pixel7'
25+
| 'SamsungGalaxyS8Plus'
26+
| 'SamsungGalaxyS20Ultra'
27+
| 'iPadMini'
28+
| 'iPadAir'
29+
| 'iPadPro'
30+
| 'SurfacePro7'
31+
| 'SurfaceDuo'
32+
| 'GalaxyZFold5'
33+
| 'AsusZenbookFold'
34+
| 'SamsungGalaxyA51A71'
35+
| 'NestHub'
36+
| 'NestHubMax';
37+
1238
type BrowserModeConfig = {
1339
enabled?: boolean;
1440
provider: 'playwright';
1541
browser?: 'chromium' | 'firefox' | 'webkit';
1642
headless?: boolean;
1743
port?: number;
44+
viewport?: BrowserViewport;
1845
strictPort?: boolean;
1946
providerOptions?: Record<string, unknown>;
2047
};
@@ -29,6 +56,7 @@ const defaultBrowser = {
2956
browser: 'chromium',
3057
headless: true, // CI 环境；本地开发为 false
3158
port: undefined, // 随机可用端口
59+
viewport: undefined, // Browser UI 填满预览面板
3260
strictPort: false,
3361
providerOptions: {},
3462
};
@@ -185,6 +213,78 @@ export default defineConfig({
185213

186214
:::
187215

216+
### viewport
217+
218+
<ApiMeta addedVersion="0.8.4" />
219+
220+
- **类型：** `BrowserViewport`
221+
- **默认值：** `undefined`
222+
223+
设置 Browser Mode 测试的默认 runner iframe viewport。如果未指定，Browser UI 会填满预览面板。
224+
225+
```ts
226+
type BrowserViewport =
227+
| {
228+
width: number;
229+
height: number;
230+
}
231+
| DevicePreset;
232+
```
233+
234+
如果你希望一个 browser 项目中的所有文件都使用同一个 viewport，可以显式指定尺寸：
235+
236+
```ts title="rstest.config.ts"
237+
import { defineConfig } from '@rstest/core';
238+
239+
export default defineConfig({
240+
browser: {
241+
enabled: true,
242+
provider: 'playwright',
243+
viewport: { width: 390, height: 844 },
244+
},
245+
});
246+
```
247+
248+
你也可以使用内置设备 preset：
249+
250+
```ts title="rstest.config.ts"
251+
import { defineConfig } from '@rstest/core';
252+
253+
export default defineConfig({
254+
browser: {
255+
enabled: true,
256+
provider: 'playwright',
257+
viewport: 'iPhone12Pro',
258+
},
259+
});
260+
```
261+
262+
支持的 preset：
263+
264+
| Preset | 尺寸 |
265+
| ----------------------- | ----------- |
266+
| `iPhoneSE` | 375 x 667 |
267+
| `iPhoneXR` | 414 x 896 |
268+
| `iPhone12Pro` | 390 x 844 |
269+
| `iPhone14ProMax` | 430 x 932 |
270+
| `Pixel7` | 412 x 915 |
271+
| `SamsungGalaxyS8Plus` | 360 x 740 |
272+
| `SamsungGalaxyS20Ultra` | 412 x 915 |
273+
| `iPadMini` | 768 x 1024 |
274+
| `iPadAir` | 820 x 1180 |
275+
| `iPadPro` | 1024 x 1366 |
276+
| `SurfacePro7` | 912 x 1368 |
277+
| `SurfaceDuo` | 540 x 720 |
278+
| `GalaxyZFold5` | 344 x 882 |
279+
| `AsusZenbookFold` | 853 x 1280 |
280+
| `SamsungGalaxyA51A71` | 412 x 914 |
281+
| `NestHub` | 1024 x 600 |
282+
| `NestHubMax` | 1280 x 800 |
283+
284+
:::tip
285+
`browser.viewport` 控制测试 runner iframe 的 viewport。如果你需要 Playwright context 选项，例如 locale、color scheme 或 permissions，请通过 [`providerOptions.context`](#provider-选项) 配置。
286+
:::
287+
188288
### port
189289

190290
- **类型：** `number`

0 commit comments

Comments
 (0)