Puppeteer E2E test: Auto-download browser (#25380)

* Make Puppeteer autodownload browser

* Update CONTRIBUTING.md

* Fix indentation

* Fix merge

.github/CONTRIBUTING.md

@@ -1,7 +1,7 @@
 # Contribution
 ## Introduction
 
-It is assumed that you know a little about node.js and git. If not, [here's some help to get started with git](https://help.github.com/en/github/using-git) and [here’s some help to get started with node.js.](https://nodejs.org/en/docs/guides/getting-started-guide/)
+It is assumed that you know a little about Node.js and Git. If not, [here's some help to get started with Git](https://help.github.com/en/github/using-git) and [here’s some help to get started with Node.js.](https://nodejs.org/en/docs/guides/getting-started-guide/)
 
 * Install [Node.js](https://nodejs.org/)
 * Install [Git](https://git-scm.com/)
@@ -26,25 +26,20 @@ As per the npm standard, ‘start’ is the place to begin the package.
 
     npm start
 
-This script will start a local server similar to [threejs.org](https://threejs.org/), but instead will be hosted on your local machine. Browse to http://localhost:8080/ to check it out. It also automatically creates the ‘build/three.module.js’ script anytime there is a change within your three.js directory.
+This script will start a local server similar to [threejs.org](https://threejs.org/), but instead will be hosted on your local machine. Browse to https://localhost:8080/ to check it out. It also automatically creates the `build/three.module.js` script anytime there is a change `src` directory.
 
-The next most important script runs all the appropriate testing. The E-2-E testing is intended to be run by GitHub Actions.
+Next scripts run all the appropriate testing.
 
-Run this command from the root folder to install test dependencies.
-
-    npm install --prefix test
-
-And run tests.
-
-    npm test
+- `npm run test` - Lint testing and unit testing (individually being `npm run lint` and `npm run test-unit`)
+- `npm run test-e2e` - E2E testing. This one can take quite a long time and installs ~200 MB Chromium browser - it is primarily intended to be run only by GitHub Actions
 
 The linting is there to keep a consistent code style across all of the code and the testing is there to help catch bugs and check that the code behaves as expected. It is important that neither of these steps comes up with any errors due to your changes.
 
-Many linting errors can be fixed automatically by running
+Most linting errors can be fixed automatically by running
 
-    npm lint-fix
+    npm run lint-fix
 
-If you’d like to make a minified version of the build files i.e. ‘build/three.min.js’ run:
+If you’d like to make a build of the source files (e.g. `build/three.module.js`) run:
 
     npm run build
 

.github/workflows/ci.yml

@@ -45,9 +45,7 @@ jobs:
           node-version: 16
           cache: 'npm'
       - name: Install packages
-        run: |
-          npm ci
-          npm ci --prefix test
+        run: npm ci
       - name: Build
         run: npm run build
 
@@ -73,9 +71,7 @@ jobs:
           node-version: 16
           cache: 'npm'
       - name: Install packages
-        run: |
-          npm ci
-          npm ci --prefix test
+        run: npm ci
       - name: Build
         run: npm run build
 

.gitignore

@@ -7,21 +7,11 @@ npm-debug.log
 .jshintrc
 .vs/
 
-# The command'npm install --prefix test' adds files in the test folder (https://docs.npmjs.com/configuring-npm/folders.html#executables).
-# There are 2 kinds of files, those without extension and those with cmd extension.
-# To ignore files without a extension, following procedure is nessecary:
-# - ignore all files in the test folder
-# - unignore all files in subdirectories of the test folder
-# - unignore all files with an extension in the test folder
-test/*
-!test/*/
-!test/*.*
-test/*.cmd
 test/unit/build
 test/treeshake/index.bundle.js
 test/treeshake/index.bundle.min.js
 test/treeshake/index-src.bundle.min.js
 test/treeshake/stats.html
-
+test/e2e/chromium
 
 **/node_modules

package.json

@@ -111,7 +111,7 @@
     "lint-utils": "eslint utils",
     "lint": "npm run lint-core",
     "lint-fix": "npm run lint-core -- --fix && npm run lint-addons -- --fix && npm run lint-examples -- --fix && npm run lint-docs -- --fix && npm run lint-editor -- --fix && npm run lint-manual -- --fix && npm run lint-test -- --fix && npm run lint-utils -- --fix",
-    "test-unit": "npm run unit --prefix test",
+    "test-unit": "qunit -r failonlyreporter -f !-webonly test/unit/three.source.unit.js",
     "test-e2e": "node test/e2e/puppeteer.js",
     "test-e2e-cov": "node test/e2e/check-coverage.js",
     "test-treeshake": "rollup -c test/rollup.treeshake.config.js",
@@ -149,11 +149,20 @@
     "eslint-plugin-compat": "^4.0.2",
     "eslint-plugin-html": "^7.1.0",
     "eslint-plugin-import": "^2.27.5",
+    "failonlyreporter": "^1.0.0",
+    "jimp": "^0.16.0",
+    "node-fetch": "^3.2.6",
+    "pixelmatch": "^5.3.0",
+    "puppeteer-core": "^19.6.2",
+    "qunit": "^2.19.1",
     "rollup": "^3.12.0",
     "rollup-plugin-filesize": "^9.1.2",
     "rollup-plugin-visualizer": "^5.9.0",
     "servez": "^1.14.1"
   },
+  "overrides": {
+    "jpeg-js": "^0.4.4"
+  },
   "jspm": {
     "files": [
       "package.json",

test/README.md

@@ -1,3 +0,0 @@
-### Install test dependencies
-
-- Execute `npm i --prefix test` from root folder

test/e2e/puppeteer.js

@@ -1,10 +1,11 @@
 import chalk from 'chalk';
-import puppeteer from 'puppeteer';
+import puppeteer, { BrowserFetcher } from 'puppeteer-core';
 import express from 'express';
 import path from 'path';
 import pixelmatch from 'pixelmatch';
 import jimp from 'jimp';
 import * as fs from 'fs/promises';
+import fetch from 'node-fetch';
 
 /* CONFIG VARIABLES START */
 
@@ -45,6 +46,14 @@ const exceptionList = [
 
 /* CONFIG VARIABLES END */
 
+const LAST_REVISION_URLS = {
+	linux: 'https://storage.googleapis.com/chromium-browser-snapshots/Linux_x64/LAST_CHANGE',
+	mac: 'https://storage.googleapis.com/chromium-browser-snapshots/Mac/LAST_CHANGE',
+	mac_arm: 'https://storage.googleapis.com/chromium-browser-snapshots/Mac_Arm/LAST_CHANGE',
+	win32: 'https://storage.googleapis.com/chromium-browser-snapshots/Win/LAST_CHANGE',
+	win64: 'https://storage.googleapis.com/chromium-browser-snapshots/Win_x64/LAST_CHANGE'
+};
+
 const port = 1234;
 const pixelThreshold = 0.1; // threshold error in one pixel
 const maxFailedPixels = 0.05; // at most 5% failed pixels
@@ -118,6 +127,10 @@ async function main() {
 
 	}
 
+	/* Download browser */
+
+	const { executablePath } = await downloadLatestChromium();
+
 	/* Launch browser */
 
 	const flags = [ '--hide-scrollbars', '--enable-unsafe-webgpu' ];
@@ -127,6 +140,7 @@ async function main() {
 	const viewport = { width: width * viewScale, height: height * viewScale };
 
 	browser = await puppeteer.launch( {
+		executablePath,
 		headless: ! process.env.VISIBLE,
 		args: flags,
 		defaultViewport: viewport,
@@ -186,6 +200,29 @@ async function main() {
 
 }
 
+async function downloadLatestChromium() {
+
+	const browserFetcher = new BrowserFetcher( { path: 'test/e2e/chromium' } );
+
+	const lastRevisionURL = LAST_REVISION_URLS[ browserFetcher.platform() ];
+	const revision = await ( await fetch( lastRevisionURL ) ).text();
+
+	let revisionInfo = browserFetcher.revisionInfo( revision );
+	if ( revisionInfo.local === true ) {
+
+		console.log( 'Latest Chromium has been already downloaded.' );
+
+	} else {
+
+		console.log( 'Downloading latest Chromium...' );
+		revisionInfo = await browserFetcher.download( revision );
+		console.log( 'Downloaded.' );
+
+	}
+	return revisionInfo;
+
+}
+
 async function preparePage( page, injection, build, errorMessages ) {
 
 	/* let page.file, page.pageSize, page.error */

test/package.json

@@ -1,25 +0,0 @@
-{
-  "name": "test-deps-intaller",
-  "private": true,
-  "version": "1.0.0",
-  "description": "This package hiding test dependincies from main repo because puppeteer is pretty big.",
-  "license": "MIT",
-  "type": "module",
-  "scripts": {
-    "unit": "qunit -r failonlyreporter -f !-webonly unit/three.source.unit.js"
-  },
-  "devDependencies": {
-    "failonlyreporter": "^1.0.0",
-    "jimp": "^0.16.0",
-    "pixelmatch": "^5.3.0",
-    "puppeteer": "^19.4.0",
-    "qunit": "^2.19.1",
-    "serve-handler": "^6.1.5"
-  },
-  "dependencies": {
-    "three": "file:.."
-  },
-  "overrides": {
-    "jpeg-js": "^0.4.4"
-  }
-}