chore: use strict typing in tests

.gitignore

@@ -3,7 +3,7 @@
 /.dev_profile*
 /.local-chromium/
 /.local-firefox/
-/test/test-user-data-dir*
+/test/output-*/
 build/
 coverage
 coverage/

package.json

@@ -86,9 +86,12 @@
     "@microsoft/api-documenter": "7.17.16",
     "@microsoft/api-extractor": "7.24.2",
     "@types/debug": "4.1.7",
+    "@types/diff": "5.0.2",
     "@types/mime": "2.0.3",
     "@types/mocha": "9.1.1",
     "@types/node": "17.0.38",
+    "@types/pixelmatch": "5.2.4",
+    "@types/pngjs": "6.0.1",
     "@types/progress": "2.0.5",
     "@types/proxy-from-env": "1.0.1",
     "@types/rimraf": "3.0.2",
@@ -101,6 +104,7 @@
     "c8": "7.11.3",
     "commonmark": "0.30.0",
     "cross-env": "7.0.3",
+    "diff": "5.1.0",
     "eslint": "8.16.0",
     "eslint-config-prettier": "8.5.0",
     "eslint-formatter-codeframe": "7.32.1",

src/common/AriaQueryHandler.ts

@@ -111,7 +111,9 @@ const waitFor = async (
   return domWorld._waitForSelectorInPage(
     (_: Element, selector: string) =>
       (
-        globalThis as unknown as { ariaQuerySelector(selector: string): void }
+        globalThis as any as unknown as {
+          ariaQuerySelector(selector: string): void;
+        }
       ).ariaQuerySelector(selector),
     selector,
     options,

src/common/DOMWorld.ts

@@ -719,10 +719,10 @@ export class DOMWorld {
     function deliverResult(name: string, seq: number, result: unknown): void {
       // eslint-disable-next-line @typescript-eslint/ban-ts-comment
       // @ts-ignore Code is evaluated in a different context.
-      globalThis[name].callbacks.get(seq).resolve(result);
+      (globalThis as any)[name].callbacks.get(seq).resolve(result);
       // eslint-disable-next-line @typescript-eslint/ban-ts-comment
       // @ts-ignore Code is evaluated in a different context.
-      globalThis[name].callbacks.delete(seq);
+      (globalThis as any)[name].callbacks.delete(seq);
     }
   };
 

src/common/Debug.ts

@@ -65,7 +65,7 @@ export const debug = (prefix: string): ((...args: unknown[]) => void) => {
   }
 
   return (...logArgs: unknown[]): void => {
-    const debugLevel = globalThis.__PUPPETEER_DEBUG;
+    const debugLevel = (globalThis as any).__PUPPETEER_DEBUG;
     if (!debugLevel) {
       return;
     }

src/common/DeviceDescriptors.ts

@@ -1527,6 +1527,7 @@ const devices: Device[] = [
     },
   },
 ];
+
 /**
  * @public
  */

src/common/Errors.ts

@@ -36,6 +36,7 @@ export class CustomError extends Error {
  * @public
  */
 export class TimeoutError extends CustomError {}
+
 /**
  * ProtocolError is emitted whenever there is an error from the protocol.
  *
@@ -45,13 +46,19 @@ export class ProtocolError extends CustomError {
   public code?: number;
   public originalMessage = '';
 }
+
 /**
  * @public
  */
-export type PuppeteerErrors = Record<string, typeof CustomError>;
+export interface PuppeteerErrors {
+  TimeoutError: typeof TimeoutError;
+  ProtocolError: typeof ProtocolError;
+}
+
 /**
  * @public
  */
-export const puppeteerErrors: PuppeteerErrors = {
+export const puppeteerErrors: PuppeteerErrors = Object.freeze({
   TimeoutError,
-};
+  ProtocolError,
+});

src/common/Page.ts

@@ -2293,7 +2293,9 @@ export class Page extends EventEmitter {
    */
   async emulateMediaType(type?: string): Promise<void> {
     assert(
-      type === 'screen' || type === 'print' || type === null,
+      type === 'screen' ||
+        type === 'print' ||
+        (type ?? undefined) === undefined,
       'Unsupported media type: ' + type
     );
     await this.#client.send('Emulation.setEmulatedMedia', {

src/common/fetch.ts

@@ -16,5 +16,5 @@
 
 /* Use the global version if we're in the browser, else load the node-fetch module. */
 export const getFetch = async (): Promise<typeof fetch> => {
-  return globalThis.fetch || (await import('cross-fetch')).fetch;
+  return (globalThis as any).fetch || (await import('cross-fetch')).fetch;
 };

test/.eslintrc.js

@@ -1,5 +1,6 @@
 module.exports = {
   rules: {
+    'arrow-body-style': ['error', 'always'],
     'no-restricted-imports': [
       'error',
       {

test/fixtures/dumpio.js

@@ -2,7 +2,9 @@
   const [, , puppeteerRoot, options] = process.argv;
   const browser = await require(puppeteerRoot).launch(JSON.parse(options));
   const page = await browser.newPage();
-  await page.evaluate(() => console.error('message from dumpio'));
+  await page.evaluate(() => {
+    return console.error('message from dumpio');
+  });
   await page.close();
   await browser.close();
 })();

test/src/CDPSession.spec.ts

@@ -21,7 +21,8 @@ import {
   setupTestBrowserHooks,
   setupTestPageAndContextHooks,
   describeChromeOnly,
-} from './mocha-utils'; // eslint-disable-line import/extensions
+} from './mocha-utils.js';
+import { isErrorLike } from '../../lib/cjs/puppeteer/common/util.js';
 
 describeChromeOnly('Target.createCDPSession', function () {
   setupTestBrowserHooks();
@@ -36,7 +37,9 @@ describeChromeOnly('Target.createCDPSession', function () {
       client.send('Runtime.enable'),
       client.send('Runtime.evaluate', { expression: 'window.foo = "bar"' }),
     ]);
-    const foo = await page.evaluate(() => globalThis.foo);
+    const foo = await page.evaluate(() => {
+      return (globalThis as any).foo;
+    });
     expect(foo).toBe('bar');
   });
   it('should send events', async () => {
@@ -45,7 +48,9 @@ describeChromeOnly('Target.createCDPSession', function () {
     const client = await page.target().createCDPSession();
     await client.send('Network.enable');
     const events = [];
-    client.on('Network.requestWillBeSent', (event) => events.push(event));
+    client.on('Network.requestWillBeSent', (event) => {
+      return events.push(event);
+    });
     await page.goto(server.EMPTY_PAGE);
     expect(events.length).toBe(1);
   });
@@ -77,22 +82,26 @@ describeChromeOnly('Target.createCDPSession', function () {
     });
     expect(evalResponse.result.value).toBe(3);
     await client.detach();
-    let error = null;
+    let error!: Error;
     try {
       await client.send('Runtime.evaluate', {
         expression: '3 + 1',
         returnByValue: true,
       });
     } catch (error_) {
-      error = error_;
+      if (isErrorLike(error_)) {
+        error = error_ as Error;
+      }
     }
     expect(error.message).toContain('Session closed.');
   });
   it('should throw nice errors', async () => {
     const { page } = getTestState();
 
     const client = await page.target().createCDPSession();
-    const error = await theSourceOfTheProblems().catch((error) => error);
+    const error = await theSourceOfTheProblems().catch((error) => {
+      return error;
+    });
     expect(error.stack).toContain('theSourceOfTheProblems');
     expect(error.message).toContain('ThisCommand.DoesNotExist');
 

test/src/EventEmitter.spec.ts

@@ -19,7 +19,7 @@ import sinon from 'sinon';
 import expect from 'expect';
 
 describe('EventEmitter', () => {
-  let emitter;
+  let emitter: EventEmitter;
 
   beforeEach(() => {
     emitter = new EventEmitter();
@@ -40,7 +40,7 @@ describe('EventEmitter', () => {
         emitter[methodName]('foo', listener);
         emitter.emit('foo', data);
         expect(listener.callCount).toEqual(1);
-        expect(listener.firstCall.args[0]).toBe(data);
+        expect(listener.firstCall.args[0]!).toBe(data);
       });
 
       it(`${methodName}: supports chaining`, () => {
@@ -116,7 +116,7 @@ describe('EventEmitter', () => {
 
       emitter.emit('foo', data);
       expect(listener.callCount).toEqual(1);
-      expect(listener.firstCall.args[0]).toBe(data);
+      expect(listener.firstCall.args[0]!).toBe(data);
     });
 
     it('returns true if the event has listeners', () => {

test/src/NetworkManager.spec.ts

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { describeChromeOnly } from './mocha-utils'; // eslint-disable-line import/extensions
+import { describeChromeOnly } from './mocha-utils.js';
 
 import expect from 'expect';
 import {