diff --git a/addons/addon-fit/test/FitAddon.api.ts b/addons/addon-fit/test/FitAddon.api.ts
deleted file mode 100644
index 24641fc6..00000000
--- a/addons/addon-fit/test/FitAddon.api.ts
+++ /dev/null
@@ -1,135 +0,0 @@
-/**
- * Copyright (c) 2019 The xterm.js authors. All rights reserved.
- * @license MIT
- */
-
-import { assert } from 'chai';
-import { openTerminal, launchBrowser, timeout } from '../../../out-test/api/TestUtils';
-import { Browser, Page } from '@playwright/test';
-
-const APP = 'http://127.0.0.1:3001/test';
-
-let browser: Browser;
-let page: Page;
-const width = 1024;
-const height = 768;
-
-describe('FitAddon', () => {
-  before(async function(): Promise<any> {
-    browser = await launchBrowser();
-    page = await (await browser.newContext()).newPage();
-    await page.setViewportSize({ width, height });
-    await page.goto(APP);
-  });
-
-  beforeEach(async function(): Promise<any> {
-    await page.evaluate(`document.querySelector('#terminal-container').style.display=''`);
-    await openTerminal(page);
-  });
-
-  after(async () => {
-    await browser.close();
-  });
-
-  afterEach(async function(): Promise<any> {
-    await page.evaluate(`window.term.dispose()`);
-  });
-
-  it('no terminal', async function(): Promise<any> {
-    await page.evaluate(`window.fit = new FitAddon();`);
-    assert.equal(await page.evaluate(`window.fit.proposeDimensions()`), undefined);
-  });
-
-  describe('proposeDimensions', () => {
-    afterEach(() => unloadFit());
-
-    it('default', async function(): Promise<any> {
-      await loadFit();
-      const dimensions: {cols: number, rows: number} = await page.evaluate(`window.fit.proposeDimensions()`);
-      assert.isAbove(dimensions.cols, 85);
-      assert.isBelow(dimensions.cols, 88);
-      assert.isAbove(dimensions.rows, 24);
-      assert.isBelow(dimensions.rows, 29);
-    });
-
-    it('width', async function(): Promise<any> {
-      await loadFit(1008);
-      const dimensions: {cols: number, rows: number} = await page.evaluate(`window.fit.proposeDimensions()`);
-      assert.isAbove(dimensions.cols, 108);
-      assert.isBelow(dimensions.cols, 111);
-      assert.isAbove(dimensions.rows, 24);
-      assert.isBelow(dimensions.rows, 29);
-    });
-
-    it('small', async function(): Promise<any> {
-      await loadFit(1, 1);
-      assert.deepEqual(await page.evaluate(`window.fit.proposeDimensions()`), {
-        cols: 2,
-        rows: 1
-      });
-    });
-
-    it('hidden', async function(): Promise<any> {
-      await page.evaluate(`window.term.dispose()`);
-      await page.evaluate(`document.querySelector('#terminal-container').style.display='none'`);
-      await page.evaluate(`window.term = new Terminal()`);
-      await page.evaluate(`window.term.open(document.querySelector('#terminal-container'))`);
-      await loadFit();
-      const dimensions: { cols: number, rows: number } | undefined = await page.evaluate(`window.fit.proposeDimensions()`);
-      // The value of dims will be undefined if the char measure strategy falls back to the DOM
-      // method, so only assert if it's not undefined.
-      if (dimensions) {
-        assert.isAbove(dimensions.cols, 85);
-        assert.isBelow(dimensions.cols, 88);
-        assert.isAbove(dimensions.rows, 24);
-        assert.isBelow(dimensions.rows, 29);
-      }
-    });
-  });
-
-  describe('fit', () => {
-    afterEach(() => unloadFit());
-
-    it('default', async function(): Promise<any> {
-      await loadFit();
-      await page.evaluate(`window.fit.fit()`);
-      const cols: number = await page.evaluate(`window.term.cols`);
-      const rows: number = await page.evaluate(`window.term.rows`);
-      assert.isAbove(cols, 85);
-      assert.isBelow(cols, 88);
-      assert.isAbove(rows, 24);
-      assert.isBelow(rows, 29);
-    });
-
-    it('width', async function(): Promise<any> {
-      await loadFit(1008);
-      await page.evaluate(`window.fit.fit()`);
-      const cols: number = await page.evaluate(`window.term.cols`);
-      const rows: number = await page.evaluate(`window.term.rows`);
-      assert.isAbove(cols, 108);
-      assert.isBelow(cols, 111);
-      assert.isAbove(rows, 24);
-      assert.isBelow(rows, 29);
-    });
-
-    it('small', async function(): Promise<any> {
-      await loadFit(1, 1);
-      await page.evaluate(`window.fit.fit()`);
-      assert.equal(await page.evaluate(`window.term.cols`), 2);
-      assert.equal(await page.evaluate(`window.term.rows`), 1);
-    });
-  });
-});
-
-async function loadFit(width: number = 800, height: number = 450): Promise<void> {
-  await page.evaluate(`
-    window.fit = new FitAddon();
-    window.term.loadAddon(window.fit);
-    document.querySelector('#terminal-container').style.width='${width}px';
-    document.querySelector('#terminal-container').style.height='${height}px';
-  `);
-}
-
-async function unloadFit(): Promise<void> {
-  await page.evaluate(`window.fit.dispose();`);
-}
diff --git a/addons/addon-fit/test/FitAddon.test.ts b/addons/addon-fit/test/FitAddon.test.ts
new file mode 100644
index 00000000..8c186b43
--- /dev/null
+++ b/addons/addon-fit/test/FitAddon.test.ts
@@ -0,0 +1,138 @@
+/**
+ * Copyright (c) 2019 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+import test from '@playwright/test';
+import { deepEqual, ok, strictEqual } from 'assert';
+import { ITestContext, createTestContext, openTerminal, timeout } from '../../../out-test/playwright/TestUtils';
+
+let ctx: ITestContext;
+test.beforeAll(async ({ browser }) => {
+  ctx = await createTestContext(browser);
+  await openTerminal(ctx);
+});
+test.afterAll(async () => await ctx.page.close());
+
+test.describe('FitAddon', () => {
+  test.beforeEach(async function(): Promise<any> {
+    await ctx.page.evaluate(`
+      window.term.reset()
+      window.fit?.dispose();
+      window.fit = new FitAddon();
+      window.term.loadAddon(window.fit);
+    `);
+  });
+
+  // test.beforeEach(async function(): Promise<any> {
+  //   await ctx.page.evaluate(`document.querySelector('#terminal-container').style.display=''`);
+  //   await openTerminal(page);
+  // });
+
+  // after(async () => {
+  //   await browser.close();
+  // });
+
+  // afterEach(async function(): Promise<any> {
+  //   await ctx.proxy.dispose();
+  // });
+
+  test('no terminal', async function(): Promise<any> {
+    await ctx.page.evaluate(`window.fit = new FitAddon();`);
+    strictEqual(await ctx.page.evaluate(`window.fit.proposeDimensions()`), undefined);
+  });
+
+  test.describe('proposeDimensions', () => {
+    // test.afterEach(() => unloadFit());
+
+    test('default', async function(): Promise<any> {
+      await loadFit();
+      const dimensions: {cols: number, rows: number} = await ctx.page.evaluate(`window.fit.proposeDimensions()`);
+      ok(dimensions.cols > 85);
+      ok(dimensions.cols < 88);
+      ok(dimensions.rows > 24);
+      ok(dimensions.rows < 29);
+    });
+
+    test('width', async function(): Promise<any> {
+      await loadFit(1008);
+      const dimensions: {cols: number, rows: number} = await ctx.page.evaluate(`window.fit.proposeDimensions()`);
+      ok(dimensions.cols > 108);
+      ok(dimensions.cols < 111);
+      ok(dimensions.rows > 24);
+      ok(dimensions.rows < 29);
+    });
+
+    test('small', async function(): Promise<any> {
+      await loadFit(1, 1);
+      deepEqual(await ctx.page.evaluate(`window.fit.proposeDimensions()`), {
+        cols: 2,
+        rows: 1
+      });
+    });
+
+    test('hidden', async function(): Promise<any> {
+      await ctx.proxy.dispose();
+      await ctx.page.evaluate(`document.querySelector('#terminal-container').style.display='none'`);
+      await ctx.page.evaluate(`window.term = new Terminal()`);
+      await ctx.page.evaluate(`window.term.open(document.querySelector('#terminal-container'))`);
+      await loadFit();
+      const dimensions: { cols: number, rows: number } | undefined = await ctx.page.evaluate(`window.fit.proposeDimensions()`);
+      // The value of dims will be undefined if the char measure strategy falls back to the DOM
+      // method, so only assert if it's not undefined.
+      if (dimensions) {
+        ok(dimensions.cols > 85);
+        ok(dimensions.cols < 88);
+        ok(dimensions.rows > 24);
+        ok(dimensions.rows < 29);
+      }
+      await ctx.page.evaluate(`document.querySelector('#terminal-container').style.display='block'`);
+    });
+  });
+
+  test.describe('fit', () => {
+    test.afterEach(() => unloadFit());
+
+    test('default', async function(): Promise<any> {
+      await loadFit();
+      await ctx.page.evaluate(`window.fit.fit()`);
+      const cols: number = await ctx.proxy.cols;
+      const rows: number = await ctx.proxy.rows;
+      ok(cols > 85);
+      ok(cols < 88);
+      ok(rows > 24);
+      ok(rows < 29);
+    });
+
+    test('width', async function(): Promise<any> {
+      await loadFit(1008);
+      await ctx.page.evaluate(`window.fit.fit()`);
+      const cols: number = await ctx.proxy.cols;
+      const rows: number = await ctx.proxy.rows;
+      ok(cols > 108);
+      ok(cols < 111);
+      ok(rows > 24);
+      ok(rows < 29);
+    });
+
+    test('small', async function(): Promise<any> {
+      await loadFit(1, 1);
+      await ctx.page.evaluate(`window.fit.fit()`);
+      strictEqual(await ctx.proxy.cols, 2);
+      strictEqual(await ctx.proxy.rows, 1);
+    });
+  });
+});
+
+async function loadFit(width: number = 800, height: number = 450): Promise<void> {
+  await ctx.page.evaluate(`
+    window.fit = new FitAddon();
+    window.term.loadAddon(window.fit);
+    document.querySelector('#terminal-container').style.width='${width}px';
+    document.querySelector('#terminal-container').style.height='${height}px';
+  `);
+}
+
+async function unloadFit(): Promise<void> {
+  await ctx.page.evaluate(`window.fit.dispose();`);
+}
diff --git a/addons/addon-fit/test/playwright.config.ts b/addons/addon-fit/test/playwright.config.ts
new file mode 100644
index 00000000..79cf9f02
--- /dev/null
+++ b/addons/addon-fit/test/playwright.config.ts
@@ -0,0 +1,35 @@
+import { PlaywrightTestConfig } from '@playwright/test';
+
+const config: PlaywrightTestConfig = {
+  testDir: '.',
+  timeout: 10000,
+  projects: [
+    {
+      name: 'ChromeStable',
+      use: {
+        browserName: 'chromium',
+        channel: 'chrome'
+      }
+    },
+    {
+      name: 'FirefoxStable',
+      use: {
+        browserName: 'firefox'
+      }
+    },
+    {
+      name: 'WebKit',
+      use: {
+        browserName: 'webkit'
+      }
+    }
+  ],
+  reporter: 'list',
+  webServer: {
+    command: 'npm run start-server-only',
+    port: 3000,
+    timeout: 120000,
+    reuseExistingServer: !process.env.CI
+  }
+};
+export default config;
diff --git a/addons/addon-fit/test/tsconfig.json b/addons/addon-fit/test/tsconfig.json
index 67ad42b7..cb6fed28 100644
--- a/addons/addon-fit/test/tsconfig.json
+++ b/addons/addon-fit/test/tsconfig.json
@@ -3,21 +3,37 @@
     "module": "commonjs",
     "target": "es2021",
     "lib": [
-      "es2015"
+      "es2021",
     ],
     "rootDir": ".",
     "outDir": "../out-test",
     "sourceMap": true,
     "removeComments": true,
+    "baseUrl": ".",
+    "paths": {
+      "common/*": [
+        "../../../src/common/*"
+      ],
+      "browser/*": [
+        "../../../src/browser/*"
+      ]
+    },
     "strict": true,
     "types": [
-      "../../../node_modules/@types/mocha",
       "../../../node_modules/@types/node",
-      "../../../out-test/api/TestUtils"
+      "../../../out-test/playwright/TestUtils"
     ]
   },
   "include": [
     "./**/*",
     "../../../typings/xterm.d.ts"
+  ],
+  "references": [
+    {
+      "path": "../../../src/common"
+    },
+    {
+      "path": "../../../src/browser"
+    }
   ]
 }
diff --git a/addons/addon-search/test/SearchAddon.test.ts b/addons/addon-search/test/SearchAddon.test.ts
index 0adf2bfe..80b0a120 100644
--- a/addons/addon-search/test/SearchAddon.test.ts
+++ b/addons/addon-search/test/SearchAddon.test.ts
@@ -3,20 +3,16 @@
  * @license MIT
  */
 
-import { deepStrictEqual, strictEqual } from 'assert';
-import { ITestContext, createTestContext, openTerminal, timeout } from '../../../out-test/playwright/TestUtils';
 import test from '@playwright/test';
+import { deepStrictEqual, strictEqual } from 'assert';
 import { readFile } from 'fs';
 import { resolve } from 'path';
+import { ITestContext, createTestContext, openTerminal, timeout } from '../../../out-test/playwright/TestUtils';
 
 let ctx: ITestContext;
 test.beforeAll(async ({ browser }) => {
   ctx = await createTestContext(browser);
   await openTerminal(ctx);
-  await ctx.page.evaluate(`
-    window.addon = new window.SearchAddon();
-    window.term.loadAddon(window.addon);
-  `);
 });
 test.afterAll(async () => await ctx.page.close());
 
diff --git a/addons/addon-search/test/tsconfig.json b/addons/addon-search/test/tsconfig.json
index 395be00d..cb6fed28 100644
--- a/addons/addon-search/test/tsconfig.json
+++ b/addons/addon-search/test/tsconfig.json
@@ -21,7 +21,6 @@
     "strict": true,
     "types": [
       "../../../node_modules/@types/node",
-      "../../../node_modules/@lunapaint/png-codec",
       "../../../out-test/playwright/TestUtils"
     ]
   },
diff --git a/bin/test_playwright.js b/bin/test_playwright.js
index 34738122..30d21e95 100644
--- a/bin/test_playwright.js
+++ b/bin/test_playwright.js
@@ -18,10 +18,11 @@ while (argv.some(e => e.startsWith('--suite='))) {
 }
 
 let configs = [
-  { name: 'core', path: 'out-test/playwright/playwright.config.js' },
+  { name: 'core',         path: 'out-test/playwright/playwright.config.js' },
   { name: 'addon-canvas', path: 'addons/addon-canvas/out-test/playwright.config.js' },
+  { name: 'addon-fit',    path: 'addons/addon-fit/out-test/playwright.config.js' },
   { name: 'addon-search', path: 'addons/addon-search/out-test/playwright.config.js' },
-  { name: 'addon-webgl', path: 'addons/addon-webgl/out-test/playwright.config.js' }
+  { name: 'addon-webgl',  path: 'addons/addon-webgl/out-test/playwright.config.js' }
 ];
 
 if (suiteFilter) {