Skip to content

Commit ddd9f52

Browse files
RaananWRaananW
committed
Validation tests with playwright
1 parent 230cf2d commit ddd9f52

12 files changed

+10017
-9787
lines changed

‎.gitignore

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,5 @@
11
node_modules
22
dist
3+
/test-results/
4+
/playwright-report/
5+
/playwright/.cache/

‎package-lock.json

Lines changed: 9782 additions & 9728 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 59 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -1,59 +1,61 @@
11
{
2-
"name": "babylonjs-typescript-webpack-simple-scene",
3-
"version": "0.0.1",
4-
"description": "A simple scene using Babylon.js, typescript and webpack. What could go wrong?",
5-
"main": "index.ts",
6-
"dependencies": {
7-
"@babylonjs/core": "^5.29.0",
8-
"@babylonjs/gui-editor": "^5.29.0",
9-
"@babylonjs/inspector": "^5.29.0",
10-
"@babylonjs/loaders": "^5.29.0",
11-
"@babylonjs/materials": "^5.29.0",
12-
"ammo.js": "github:kripken/ammo.js",
13-
"recast-detour": "^1.6.1"
14-
},
15-
"devDependencies": {
16-
"@typescript-eslint/eslint-plugin": "^5.12.0",
17-
"@typescript-eslint/parser": "^5.12",
18-
"clean-webpack-plugin": "^4.0.0",
19-
"eslint": "^8.9.0",
20-
"file-loader": "^6.2.0",
21-
"html-webpack-plugin": "^5.5.0",
22-
"source-map-loader": "^3.0.1",
23-
"ts-loader": "^8.3.0",
24-
"ts-shader-loader": "^2.0.1",
25-
"typescript": "^4.5.5",
26-
"url-loader": "^4.1.1",
27-
"webpack": "^5.68.0",
28-
"webpack-cli": "^4.9.2",
29-
"webpack-dev-server": "^4.7.4",
30-
"webpack-merge": "^5.8.0"
31-
},
32-
"scripts": {
33-
"start": "npx webpack serve --config webpack.dev.js",
34-
"build:dev": "npx webpack --config webpack.dev.js",
35-
"build": "npx webpack --config webpack.prod.js",
36-
"lint": "npx eslint . --ext .ts,.tsx"
37-
},
38-
"repository": {
39-
"type": "git",
40-
"url": "git+https://github.com/RaananW/babylonjs-webpack-es6.git"
41-
},
42-
"keywords": [
43-
"Babylon.js",
44-
"webpack",
45-
"getting started",
46-
"typescript",
47-
"es6"
48-
],
49-
"author": {
50-
"name": "Raanan Weber",
51-
"email": "[email protected]",
52-
"url": "http://blog.raananweber.com/"
53-
},
54-
"license": "Apache-2.0",
55-
"bugs": {
56-
"url": "https://github.com/RaananW/babylonjs-webpack-es6/issues"
57-
},
58-
"homepage": "https://github.com/RaananW/babylonjs-webpack-es6"
2+
"name": "babylonjs-typescript-webpack-simple-scene",
3+
"version": "0.0.1",
4+
"description": "A simple scene using Babylon.js, typescript and webpack. What could go wrong?",
5+
"main": "index.ts",
6+
"dependencies": {
7+
"@babylonjs/core": "^5.29.0",
8+
"@babylonjs/gui-editor": "^5.29.0",
9+
"@babylonjs/inspector": "^5.29.0",
10+
"@babylonjs/loaders": "^5.29.0",
11+
"@babylonjs/materials": "^5.29.0",
12+
"ammo.js": "github:kripken/ammo.js",
13+
"recast-detour": "^1.6.1"
14+
},
15+
"devDependencies": {
16+
"@playwright/test": "^1.31.1",
17+
"@typescript-eslint/eslint-plugin": "^5.12.0",
18+
"@typescript-eslint/parser": "^5.12",
19+
"clean-webpack-plugin": "^4.0.0",
20+
"eslint": "^8.9.0",
21+
"file-loader": "^6.2.0",
22+
"html-webpack-plugin": "^5.5.0",
23+
"source-map-loader": "^3.0.1",
24+
"ts-loader": "^8.3.0",
25+
"ts-shader-loader": "^2.0.1",
26+
"typescript": "^4.5.5",
27+
"url-loader": "^4.1.1",
28+
"webpack": "^5.68.0",
29+
"webpack-cli": "^5.0.1",
30+
"webpack-dev-server": "^4.7.4",
31+
"webpack-merge": "^5.8.0"
32+
},
33+
"scripts": {
34+
"start": "npx webpack serve --config webpack.dev.js",
35+
"start:test": "npx webpack serve --config webpack.tests.js",
36+
"build:dev": "npx webpack --config webpack.dev.js",
37+
"build": "npx webpack --config webpack.prod.js",
38+
"lint": "npx eslint . --ext .ts,.tsx"
39+
},
40+
"repository": {
41+
"type": "git",
42+
"url": "git+https://github.com/RaananW/babylonjs-webpack-es6.git"
43+
},
44+
"keywords": [
45+
"Babylon.js",
46+
"webpack",
47+
"getting started",
48+
"typescript",
49+
"es6"
50+
],
51+
"author": {
52+
"name": "Raanan Weber",
53+
"email": "[email protected]",
54+
"url": "http://blog.raananweber.com/"
55+
},
56+
"license": "Apache-2.0",
57+
"bugs": {
58+
"url": "https://github.com/RaananW/babylonjs-webpack-es6/issues"
59+
},
60+
"homepage": "https://github.com/RaananW/babylonjs-webpack-es6"
5961
}

‎playwright.config.ts

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
import { defineConfig, devices } from '@playwright/test';
2+
3+
/**
4+
* See https://playwright.dev/docs/test-configuration.
5+
*/
6+
export default defineConfig({
7+
testDir: './tests',
8+
/* Maximum time one test can run for. */
9+
timeout: 30 * 1000,
10+
expect: {
11+
/**
12+
* Maximum time expect() should wait for the condition to be met.
13+
* For example in `await expect(locator).toHaveText();`
14+
*/
15+
timeout: 5000
16+
},
17+
/* Run tests in files in parallel */
18+
fullyParallel: true,
19+
/* Fail the build on CI if you accidentally left test.only in the source code. */
20+
forbidOnly: !!process.env.CI,
21+
/* Retry on CI only */
22+
retries: process.env.CI ? 2 : 0,
23+
/* Opt out of parallel tests on CI. */
24+
workers: process.env.CI ? 1 : undefined,
25+
/* Reporter to use. See https://playwright.dev/docs/test-reporters */
26+
reporter: 'html',
27+
/* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
28+
webServer: {
29+
command: 'npm run start:test',
30+
url: 'http://localhost:8080/',
31+
timeout: 120 * 1000,
32+
reuseExistingServer: !process.env.CI,
33+
},
34+
use: {
35+
baseURL: 'http://localhost:8080/',
36+
/* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */
37+
actionTimeout: 0,
38+
/* Base URL to use in actions like `await page.goto('/')`. */
39+
// baseURL: 'http://localhost:3000',
40+
41+
/* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
42+
trace: 'on-first-retry',
43+
},
44+
45+
/* Configure projects for major browsers */
46+
projects: [
47+
{
48+
name: 'chromium',
49+
use: { ...devices['Desktop Chrome'] },
50+
},
51+
52+
// {
53+
// name: 'firefox',
54+
// use: { ...devices['Desktop Firefox'] },
55+
// },
56+
57+
// {
58+
// name: 'webkit',
59+
// use: { ...devices['Desktop Safari'] },
60+
// },
61+
62+
/* Test against mobile viewports. */
63+
// {
64+
// name: 'Mobile Chrome',
65+
// use: { ...devices['Pixel 5'] },
66+
// },
67+
// {
68+
// name: 'Mobile Safari',
69+
// use: { ...devices['iPhone 12'] },
70+
// },
71+
72+
/* Test against branded browsers. */
73+
// {
74+
// name: 'Microsoft Edge',
75+
// use: { channel: 'msedge' },
76+
// },
77+
// {
78+
// name: 'Google Chrome',
79+
// use: { channel: 'chrome' },
80+
// },
81+
],
82+
83+
/* Folder for test artifacts such as screenshots, videos, traces, etc. */
84+
// outputDir: 'test-results/',
85+
86+
/* Run your local dev server before starting the tests */
87+
// webServer: {
88+
// command: 'npm run start',
89+
// port: 3000,
90+
// },
91+
});

‎src/index.ts

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ export const babylonInit = async (): Promise<void> => {
2323
if (webGPUSupported) {
2424
const webgpu = engine = new WebGPUEngine(canvas, {
2525
adaptToDeviceRatio: true,
26-
antialiasing: true,
26+
antialias: true,
2727
});
2828
await webgpu.initAsync();
2929
engine = webgpu;
@@ -37,6 +37,9 @@ export const babylonInit = async (): Promise<void> => {
3737
// Create the scene
3838
const scene = await createSceneModule.createScene(engine, canvas);
3939

40+
// JUST FOR TESTING. Not needed for anything else
41+
(window as any).scene = scene;
42+
4043
// Register a render loop to repeatedly render the scene
4144
engine.runRenderLoop(function () {
4245
scene.render();

‎tests/validation.spec.ts

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
import { test, expect, } from '@playwright/test';
2+
3+
const scenes = [
4+
{
5+
name: 'Default',
6+
url: '/?scene=defaultWithTexture',
7+
},
8+
{
9+
name: 'Fresnel Shader',
10+
url: '/?scene=fresnelShader',
11+
},
12+
{
13+
name: 'Load model and env',
14+
url: '/?scene=loadModelAndEnv',
15+
},
16+
{
17+
name: 'Navigation mesh recast',
18+
url: '/?scene=navigationMeshRecast',
19+
},
20+
// {
21+
// name: 'Physics (ammo)',
22+
// url: '/?scene=physicsWithAmmo',
23+
// renderCount: 5,
24+
// },
25+
]
26+
27+
const engines = [
28+
"WebGL2",
29+
// "WebGPU"
30+
]
31+
32+
for (const scene of scenes) {
33+
for (const engine of engines) {
34+
test(`Render ${scene.name} with ${engine}`, async ({ page }, testInfo) => {
35+
await page.goto(scene.url);
36+
if (scene.renderCount) {
37+
await page.evaluate(() => {
38+
const raf = window.requestAnimationFrame;
39+
(window as any).renderCount = 0;
40+
window.requestAnimationFrame = (cb: FrameRequestCallback) => {
41+
(window as any).renderCount++;
42+
return raf(cb);
43+
}
44+
});
45+
46+
}
47+
await page.waitForFunction(() => (window as any).scene && (window as any).scene.isReady(), { timeout: 5000 });
48+
// reset render count
49+
await page.evaluate(() => {
50+
(window as any).renderCount = 0;
51+
});
52+
// await page.waitForFunction(() => (window as any).renderCount === scene.renderCount || 1, { timeout: 5000 });
53+
await expect(page).toHaveScreenshot({
54+
timeout: 0,
55+
});
56+
expect(testInfo.stderr).toHaveLength(0);
57+
});
58+
}
59+
}
60+

‎tests/validation.spec.ts-snapshots/Render-Default-with-WebGL2-1-chromium-win32.png

277 KB
Loading

‎tests/validation.spec.ts-snapshots/Render-Fresnel-Shader-with-WebGL2-1-chromium-win32.png

286 KB
Loading

‎tests/validation.spec.ts-snapshots/Render-Load-model-and-env-with-WebGL2-1-chromium-win32.png

836 KB
Loading

‎tests/validation.spec.ts-snapshots/Render-Navigation-mesh-recast-with-WebGL2-1-chromium-win32.png

17.3 KB
Loading

0 commit comments

Comments
 (0)