Skip to content

Commit 3255f48

Browse files
colinaaacolinaaa
authored
test: stabilize ports and modernize Playwright tests (#75)
## Summary - Remove custom getRandomPort helper in tests and rely on --workers 1 for port stability - Simplify Playwright tests by using page.locator() instead of manual document.getElementById - Apply lint/formatting fixes in test files ## Details - All dev/preview servers in tests now use default ports; this eliminates random port assignment and related flakiness - DOM assertions use Playwright locators with auto-waiting, improving readability and robustness - Verified with pnpm test (playwright test --workers 1), 28 tests passing
1 parent b0e739b commit 3255f48

File tree

15 files changed

+102
-497
lines changed

15 files changed

+102
-497
lines changed

‎test/basic/index.test.ts‎

Lines changed: 3 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ import { fileURLToPath } from 'node:url';
44
import { expect, test } from '@playwright/test';
55
import { createRsbuild } from '@rsbuild/core';
66
import { pluginTailwindCSS } from '../../src';
7-
import { getRandomPort } from '../helper';
87

98
const __dirname = dirname(fileURLToPath(import.meta.url));
109

@@ -13,27 +12,14 @@ test('should dev with tailwind utilities', async ({ page }) => {
1312
cwd: __dirname,
1413
rsbuildConfig: {
1514
plugins: [pluginTailwindCSS()],
16-
server: {
17-
port: getRandomPort(),
18-
},
1915
},
2016
});
2117

2218
const { server, urls } = await rsbuild.startDevServer();
2319

2420
await page.goto(urls[0]);
2521

26-
const display = await page.evaluate(() => {
27-
const el = document.getElementById('test');
28-
29-
if (!el) {
30-
throw new Error('#test not found');
31-
}
32-
33-
return window.getComputedStyle(el).getPropertyValue('display');
34-
});
35-
36-
expect(display).toBe('flex');
22+
await expect(page.locator('#test')).toHaveCSS('display', 'flex');
3723

3824
await server.close();
3925
});
@@ -43,9 +29,6 @@ test('should build with tailwind utilities', async ({ page }) => {
4329
cwd: __dirname,
4430
rsbuildConfig: {
4531
plugins: [pluginTailwindCSS()],
46-
server: {
47-
port: getRandomPort(),
48-
},
4932
},
5033
});
5134

@@ -54,17 +37,7 @@ test('should build with tailwind utilities', async ({ page }) => {
5437

5538
await page.goto(urls[0]);
5639

57-
const display = await page.evaluate(() => {
58-
const el = document.getElementById('test');
59-
60-
if (!el) {
61-
throw new Error('#test not found');
62-
}
63-
64-
return window.getComputedStyle(el).getPropertyValue('display');
65-
});
66-
67-
expect(display).toBe('flex');
40+
await expect(page.locator('#test')).toHaveCSS('display', 'flex');
6841

6942
await server.close();
7043
});
@@ -92,26 +65,14 @@ test('should dev with nested entry', async ({ page }) => {
9265
},
9366
},
9467
plugins: [pluginTailwindCSS()],
95-
server: {
96-
port: getRandomPort(),
97-
},
9868
},
9969
});
10070

10171
const { server, urls } = await rsbuild.startDevServer();
10272

10373
await page.goto(`${urls[0]}/nested/output/folder/bundle`);
10474

105-
const display = await page.evaluate(() => {
106-
const el = document.getElementById('test');
107-
if (!el) {
108-
throw new Error('#test not found');
109-
}
110-
111-
return window.getComputedStyle(el).getPropertyValue('display');
112-
});
113-
114-
expect(display).toBe('flex');
75+
await expect(page.locator('#test')).toHaveCSS('display', 'flex');
11576

11677
await server.close();
11778
});

‎test/cjs/index.test.ts‎

Lines changed: 3 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import { fileURLToPath } from 'node:url';
33
import { expect, test } from '@playwright/test';
44
import { createRsbuild } from '@rsbuild/core';
55
import { pluginTailwindCSS } from '../../src';
6-
import { getRandomPort } from '../helper';
76

87
const __dirname = dirname(fileURLToPath(import.meta.url));
98

@@ -16,9 +15,6 @@ test('should build with relative config', async ({ page }) => {
1615
config: './config/tailwind.config.js',
1716
}),
1817
],
19-
server: {
20-
port: getRandomPort(),
21-
},
2218
},
2319
});
2420

@@ -27,17 +23,7 @@ test('should build with relative config', async ({ page }) => {
2723

2824
await page.goto(urls[0]);
2925

30-
const display = await page.evaluate(() => {
31-
const el = document.getElementById('test');
32-
33-
if (!el) {
34-
throw new Error('#test not found');
35-
}
36-
37-
return window.getComputedStyle(el).getPropertyValue('display');
38-
});
39-
40-
expect(display).toBe('flex');
26+
await expect(page.locator('#test')).toHaveCSS('display', 'flex');
4127

4228
await server.close();
4329
});
@@ -51,9 +37,6 @@ test('should build with absolute config', async ({ page }) => {
5137
config: resolve(__dirname, './config/tailwind.config.js'),
5238
}),
5339
],
54-
server: {
55-
port: getRandomPort(),
56-
},
5740
},
5841
});
5942

@@ -62,17 +45,7 @@ test('should build with absolute config', async ({ page }) => {
6245

6346
await page.goto(urls[0]);
6447

65-
const display = await page.evaluate(() => {
66-
const el = document.getElementById('test');
67-
68-
if (!el) {
69-
throw new Error('#test not found');
70-
}
71-
72-
return window.getComputedStyle(el).getPropertyValue('display');
73-
});
74-
75-
expect(display).toBe('flex');
48+
await expect(page.locator('#test')).toHaveCSS('display', 'flex');
7649

7750
await server.close();
7851
});
@@ -81,9 +54,6 @@ test('should build without tailwind.config.js', async ({ page }) => {
8154
const rsbuild = await createRsbuild({
8255
cwd: __dirname,
8356
rsbuildConfig: {
84-
server: {
85-
port: getRandomPort(),
86-
},
8757
plugins: [pluginTailwindCSS()],
8858
},
8959
});
@@ -93,17 +63,7 @@ test('should build without tailwind.config.js', async ({ page }) => {
9363

9464
await page.goto(urls[0]);
9565

96-
const display = await page.evaluate(() => {
97-
const el = document.getElementById('test');
98-
99-
if (!el) {
100-
throw new Error('#test not found');
101-
}
102-
103-
return window.getComputedStyle(el).getPropertyValue('display');
104-
});
105-
106-
expect(display).toBe('flex');
66+
await expect(page.locator('#test')).toHaveCSS('display', 'flex');
10767

10868
await server.close();
10969
});

‎test/config/index.test.ts‎

Lines changed: 4 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { fileURLToPath } from 'node:url';
33
import { expect, test } from '@playwright/test';
44
import { createRsbuild } from '@rsbuild/core';
55
import { pluginTailwindCSS } from '../../src';
6-
import { getRandomPort, supportESM } from '../helper';
6+
import { supportESM } from '../helper';
77

88
const __dirname = dirname(fileURLToPath(import.meta.url));
99

@@ -21,9 +21,6 @@ test('should build with relative config', async ({ page }) => {
2121
config: './config/tailwind.config.js',
2222
}),
2323
],
24-
server: {
25-
port: getRandomPort(),
26-
},
2724
},
2825
});
2926

@@ -32,17 +29,7 @@ test('should build with relative config', async ({ page }) => {
3229

3330
await page.goto(urls[0]);
3431

35-
const display = await page.evaluate(() => {
36-
const el = document.getElementById('test');
37-
38-
if (!el) {
39-
throw new Error('#test not found');
40-
}
41-
42-
return window.getComputedStyle(el).getPropertyValue('display');
43-
});
44-
45-
expect(display).toBe('flex');
32+
await expect(page.locator('#test')).toHaveCSS('display', 'flex');
4633

4734
await server.close();
4835
});
@@ -61,9 +48,6 @@ test('should build with absolute config', async ({ page }) => {
6148
config: resolve(__dirname, './config/tailwind.config.js'),
6249
}),
6350
],
64-
server: {
65-
port: getRandomPort(),
66-
},
6751
},
6852
});
6953

@@ -72,17 +56,7 @@ test('should build with absolute config', async ({ page }) => {
7256

7357
await page.goto(urls[0]);
7458

75-
const display = await page.evaluate(() => {
76-
const el = document.getElementById('test');
77-
78-
if (!el) {
79-
throw new Error('#test not found');
80-
}
81-
82-
return window.getComputedStyle(el).getPropertyValue('display');
83-
});
84-
85-
expect(display).toBe('flex');
59+
await expect(page.locator('#test')).toHaveCSS('display', 'flex');
8660

8761
await server.close();
8862
});
@@ -92,9 +66,6 @@ test('should build without tailwind.config.js', async ({ page }) => {
9266
cwd: __dirname,
9367
rsbuildConfig: {
9468
plugins: [pluginTailwindCSS()],
95-
server: {
96-
port: getRandomPort(),
97-
},
9869
},
9970
});
10071

@@ -103,17 +74,7 @@ test('should build without tailwind.config.js', async ({ page }) => {
10374

10475
await page.goto(urls[0]);
10576

106-
const display = await page.evaluate(() => {
107-
const el = document.getElementById('test');
108-
109-
if (!el) {
110-
throw new Error('#test not found');
111-
}
112-
113-
return window.getComputedStyle(el).getPropertyValue('display');
114-
});
115-
116-
expect(display).toBe('flex');
77+
await expect(page.locator('#test')).toHaveCSS('display', 'flex');
11778

11879
await server.close();
11980
});

‎test/exclude-include/index.test.ts‎

Lines changed: 10 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,6 @@ import { fileURLToPath } from 'node:url';
33
import { expect, test } from '@playwright/test';
44
import { createRsbuild } from '@rsbuild/core';
55

6-
import { getRandomPort } from '../helper';
7-
86
const __dirname = dirname(fileURLToPath(import.meta.url));
97

108
test('should build with included and excluded modules', async ({ page }) => {
@@ -18,9 +16,6 @@ test('should build with included and excluded modules', async ({ page }) => {
1816
exclude: './src/exclude.js',
1917
}),
2018
],
21-
server: {
22-
port: getRandomPort(),
23-
},
2419
},
2520
});
2621

@@ -29,72 +24,21 @@ test('should build with included and excluded modules', async ({ page }) => {
2924

3025
await page.goto(urls[0]);
3126

32-
const display = await page.evaluate(() => {
33-
const el = document.getElementById('test');
34-
35-
if (!el) {
36-
throw new Error('#test not found');
37-
}
38-
39-
return window.getComputedStyle(el).getPropertyValue('display');
40-
});
41-
42-
expect(display).toBe('flex');
27+
await expect(page.locator('#test')).toHaveCSS('display', 'flex');
4328

4429
// Exclude
45-
{
46-
const textAlign = await page.evaluate(() => {
47-
const el = document.getElementById('exclude');
48-
49-
if (!el) {
50-
throw new Error('#exclude not found');
51-
}
52-
53-
return window.getComputedStyle(el).getPropertyValue('text-align');
54-
});
55-
56-
expect(textAlign).not.toBe('center');
57-
58-
// The `not-exclude.js` imported by `exclude.js` should not be excluded.
59-
const paddingTop = await page.evaluate(() => {
60-
const el = document.getElementById('not-exclude');
30+
await expect(page.locator('#exclude')).not.toHaveCSS('text-align', 'center');
6131

62-
if (!el) {
63-
throw new Error('#not-exclude not found');
64-
}
65-
66-
return window.getComputedStyle(el).getPropertyValue('padding-top');
67-
});
68-
69-
expect(paddingTop).toBe('16px');
70-
}
32+
// The `not-exclude.js` imported by `exclude.js` should not be excluded.
33+
await expect(page.locator('#not-exclude')).toHaveCSS('padding-top', '16px');
7134

7235
// Include
73-
{
74-
const textAlign = await page.evaluate(() => {
75-
const el = document.getElementById('not-include');
76-
77-
if (!el) {
78-
throw new Error('#not-include not found');
79-
}
80-
81-
return window.getComputedStyle(el).getPropertyValue('text-align');
82-
});
83-
84-
expect(textAlign).not.toBe('center');
85-
86-
// The `include.js` imported by `not-include.ts` should be included.
87-
const paddingTop = await page.evaluate(() => {
88-
const el = document.getElementById('include');
89-
90-
if (!el) {
91-
throw new Error('#include not found');
92-
}
93-
94-
return window.getComputedStyle(el).getPropertyValue('padding-top');
95-
});
36+
await expect(page.locator('#not-include')).not.toHaveCSS(
37+
'text-align',
38+
'center',
39+
);
9640

97-
expect(paddingTop).toBe('16px');
98-
}
41+
// The `include.js` imported by `not-include.ts` should be included.
42+
await expect(page.locator('#include')).toHaveCSS('padding-top', '16px');
9943
await server.close();
10044
});

0 commit comments

Comments
 (0)