chore: migrate to ESM (#303)

- [Why do I need `.js`
extension?](https://stackoverflow.com/a/77150985/6512681)
- [Why setting `rootDir` in the
`tsconfig.json`?](https://stackoverflow.com/a/58941798/6512681)
- [How to ensure that we add the `.js` extension via
ESLint](https://github.com/import-js/eslint-plugin-import/blob/main/docs/rules/extensions.md#importextensions)

Fixes https://github.com/microsoft/playwright-mcp/issues/302

tests/capabilities.spec.ts

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { test, expect } from './fixtures';
+import { test, expect } from './fixtures.js';
 
 test('test snapshot tool list', async ({ client }) => {
   const { tools } = await client.listTools();

tests/cdp.spec.ts

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { test, expect } from './fixtures';
+import { test, expect } from './fixtures.js';
 
 test('cdp server', async ({ cdpEndpoint, startClient }) => {
   const client = await startClient({ args: [`--cdp-endpoint=${cdpEndpoint}`] });

tests/console.spec.ts

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { test, expect } from './fixtures';
+import { test, expect } from './fixtures.js';
 
 test('browser_console_messages', async ({ client }) => {
   await client.callTool({

tests/core.spec.ts

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { test, expect } from './fixtures';
+import { test, expect } from './fixtures.js';
 
 test('browser_navigate', async ({ client }) => {
   expect(await client.callTool({

tests/device.spec.ts

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { test, expect } from './fixtures';
+import { test, expect } from './fixtures.js';
 
 test('browser_take_screenshot (viewport)', async ({ startClient, server }) => {
   const client = await startClient({

tests/dialogs.spec.ts

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { test, expect } from './fixtures';
+import { test, expect } from './fixtures.js';
 
 // https://github.com/microsoft/playwright/issues/35663
 test.skip(({ mcpBrowser, mcpHeadless }) => mcpBrowser === 'webkit' && mcpHeadless);

tests/files.spec.ts

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { test, expect } from './fixtures';
+import { test, expect } from './fixtures.js';
 import fs from 'fs/promises';
 
 test('browser_file_upload', async ({ client }) => {

tests/fixtures.ts

@@ -15,6 +15,7 @@
  */
 
 import fs from 'fs';
+import url from 'url';
 import path from 'path';
 import { chromium } from 'playwright';
 
@@ -22,7 +23,7 @@ import { test as baseTest, expect as baseExpect } from '@playwright/test';
 import { StdioClientTransport } from '@modelcontextprotocol/sdk/client/stdio.js';
 import { Client } from '@modelcontextprotocol/sdk/client/index.js';
 import { spawn } from 'child_process';
-import { TestServer } from './testserver';
+import { TestServer } from './testserver/index.ts';
 
 import type { Config } from '../config';
 
@@ -69,9 +70,11 @@ export const test = baseTest.extend<TestFixtures, WorkerFixtures>({
         await fs.promises.writeFile(configFile, JSON.stringify(options.config, null, 2));
         args.push(`--config=${configFile}`);
       }
+      // NOTE: Can be removed when we drop Node.js 18 support and changed to import.meta.filename.
+      const __filename = url.fileURLToPath(import.meta.url);
       const transport = new StdioClientTransport({
         command: 'node',
-        args: [path.join(__dirname, '../cli.js'), ...args],
+        args: [path.join(path.dirname(__filename), '../cli.js'), ...args],
       });
       client = new Client({ name: 'test', version: '1.0.0' });
       await client.connect(transport);

tests/headed.spec.ts

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { test, expect } from './fixtures';
+import { test, expect } from './fixtures.js';
 
 for (const mcpHeadless of [false, true]) {
   test.describe(`mcpHeadless: ${mcpHeadless}`, () => {

tests/iframes.spec.ts

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { test, expect } from './fixtures';
+import { test, expect } from './fixtures.js';
 
 test('stitched aria frames', async ({ client }) => {
   expect(await client.callTool({

tests/launch.spec.ts

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { test, expect } from './fixtures';
+import { test, expect } from './fixtures.js';
 
 test('test reopen browser', async ({ client }) => {
   await client.callTool({

tests/network.spec.ts

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { test, expect } from './fixtures';
+import { test, expect } from './fixtures.js';
 
 test('browser_network_requests', async ({ client, server }) => {
   server.route('/', (req, res) => {

tests/pdf.spec.ts

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { test, expect } from './fixtures';
+import { test, expect } from './fixtures.js';
 
 test('save as pdf unavailable', async ({ startClient }) => {
   const client = await startClient({ args: ['--caps="no-pdf"'] });

tests/screenshot.spec.ts

@@ -16,7 +16,7 @@
 
 import fs from 'fs';
 
-import { test, expect } from './fixtures';
+import { test, expect } from './fixtures.js';
 
 test('browser_take_screenshot (viewport)', async ({ client }) => {
   expect(await client.callTool({

tests/sse.spec.ts

@@ -14,14 +14,18 @@
  * limitations under the License.
  */
 
+import url from 'node:url';
 import { spawn } from 'node:child_process';
 import path from 'node:path';
-import { test as baseTest } from './fixtures';
+import { test as baseTest } from './fixtures.js';
 import { expect } from 'playwright/test';
 
+// NOTE: Can be removed when we drop Node.js 18 support and changed to import.meta.filename.
+const __filename = url.fileURLToPath(import.meta.url);
+
 const test = baseTest.extend<{ serverEndpoint: string }>({
   serverEndpoint: async ({}, use) => {
-    const cp = spawn('node', [path.join(__dirname, '../cli.js'), '--port', '0'], { stdio: 'pipe' });
+    const cp = spawn('node', [path.join(path.dirname(__filename), '../cli.js'), '--port', '0'], { stdio: 'pipe' });
     try {
       let stdout = '';
       const url = await new Promise<string>(resolve => cp.stdout?.on('data', data => {

tests/tabs.spec.ts

@@ -16,7 +16,7 @@
 
 import { chromium } from 'playwright';
 
-import { test, expect } from './fixtures';
+import { test, expect } from './fixtures.js';
 
 import type { Client } from '@modelcontextprotocol/sdk/client/index.js';
 

tests/testserver/index.ts

@@ -16,13 +16,18 @@
  */
 
 import fs from 'fs';
+import url from 'node:url';
 import http from 'http';
 import https from 'https';
 import path from 'path';
+import debug from 'debug';
 
 const fulfillSymbol = Symbol('fulfil callback');
 const rejectSymbol = Symbol('reject callback');
 
+// NOTE: Can be removed when we drop Node.js 18 support and changed to import.meta.filename.
+const __filename = url.fileURLToPath(import.meta.url);
+
 export class TestServer {
   private _server: http.Server;
   readonly debugServer: any;
@@ -42,8 +47,8 @@ export class TestServer {
 
   static async createHTTPS(port: number): Promise<TestServer> {
     const server = new TestServer(port, {
-      key: await fs.promises.readFile(path.join(__dirname, 'key.pem')),
-      cert: await fs.promises.readFile(path.join(__dirname, 'cert.pem')),
+      key: await fs.promises.readFile(path.join(path.dirname(__filename), 'key.pem')),
+      cert: await fs.promises.readFile(path.join(path.dirname(__filename), 'cert.pem')),
       passphrase: 'aaaa',
     });
     await new Promise(x => server._server.once('listening', x));
@@ -56,7 +61,7 @@ export class TestServer {
     else
       this._server = http.createServer(this._onRequest.bind(this));
     this._server.listen(port);
-    this.debugServer = require('debug')('pw:testserver');
+    this.debugServer = debug('pw:testserver');
 
     const cross_origin = '127.0.0.1';
     const same_origin = 'localhost';

tests/webdriver.spec.ts

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { test, expect } from './fixtures';
+import { test, expect } from './fixtures.js';
 
 test('do not falsely advertise user agent as a test driver', async ({ client, server, mcpBrowser }) => {
   test.skip(mcpBrowser === 'firefox');