Merge branch 'master' into clusters

.eslintrc.json

@@ -13,6 +13,7 @@
       "src/headless/tsconfig.json",
       "test/api/tsconfig.json",
       "test/benchmark/tsconfig.json",
+      "test/playwright/tsconfig.json",
       "addons/xterm-addon-attach/src/tsconfig.json",
       "addons/xterm-addon-attach/test/tsconfig.json",
       "addons/xterm-addon-canvas/src/tsconfig.json",

.github/workflows/ci.yml

@@ -90,14 +90,15 @@ jobs:
     - uses: actions/download-artifact@v3
       with:
         name: build-artifacts
-    - name: Unzip artifacts (Linux, macOS)
-      if: runner.os != 'Windows'
-      run: unzip -o compressed-build.zip
-    - name: Unzip artifacts (Windows)
-      if: runner.os == 'Windows'
-      run: 7z x compressed-build.zip -aoa -o${{ github.workspace }}
-    - name: Print directory structure
-      run: ls -R
+    - name: Unzip artifacts
+      shell: bash
+      run: |
+        if [ "$RUNNER_OS" == "Windows" ]; then
+          pwsh -Command "7z x compressed-build.zip -aoa -o${{ github.workspace }}"
+        else
+          unzip -o compressed-build.zip
+        fi
+        ls -R
     - name: Unit test coverage
       run: |
         yarn test-unit-coverage --forbid-only
@@ -131,14 +132,15 @@ jobs:
     - uses: actions/download-artifact@v3
       with:
         name: build-artifacts
-    - name: Unzip artifacts (Linux, macOS)
-      if: runner.os != 'Windows'
-      run: unzip -o compressed-build.zip
-    - name: Unzip artifacts (Windows)
-      if: runner.os == 'Windows'
-      run: 7z x compressed-build.zip -aoa -o${{ github.workspace }}
-    - name: Print directory structure
-      run: ls -R
+    - name: Unzip artifacts
+      shell: bash
+      run: |
+        if [ "$RUNNER_OS" == "Windows" ]; then
+          pwsh -Command "7z x compressed-build.zip -aoa -o${{ github.workspace }}"
+        else
+          unzip -o compressed-build.zip
+        fi
+        ls -R
     - name: Unit tests
       run: yarn test-unit --forbid-only
 
@@ -164,14 +166,15 @@ jobs:
     - uses: actions/download-artifact@v3
       with:
         name: build-artifacts
-    - name: Unzip artifacts (Linux, macOS)
-      if: runner.os != 'Windows'
-      run: unzip -o compressed-build.zip
-    - name: Unzip artifacts (Windows)
-      if: runner.os == 'Windows'
-      run: 7z x compressed-build.zip -aoa -o${{ github.workspace }}
-    - name: Print directory structure
-      run: ls -R
+    - name: Unzip artifacts
+      shell: bash
+      run: |
+        if [ "$RUNNER_OS" == "Windows" ]; then
+          pwsh -Command "7z x compressed-build.zip -aoa -o${{ github.workspace }}"
+        else
+          unzip -o compressed-build.zip
+        fi
+        ls -R
     - name: Unit tests
       run: yarn test-unit --forbid-only
 
@@ -204,17 +207,61 @@ jobs:
     - uses: actions/download-artifact@v3
       with:
         name: build-artifacts
-    - name: Unzip artifacts (Linux, macOS)
-      if: runner.os != 'Windows'
-      run: unzip -o compressed-build.zip
-    - name: Unzip artifacts (Windows)
-      if: runner.os == 'Windows'
-      run: 7z x compressed-build.zip -aoa -o${{ github.workspace }}
-    - name: Print directory structure
-      run: ls -R
+    - name: Unzip artifacts
+      shell: bash
+      run: |
+        if [ "$RUNNER_OS" == "Windows" ]; then
+          pwsh -Command "7z x compressed-build.zip -aoa -o${{ github.workspace }}"
+        else
+          unzip -o compressed-build.zip
+        fi
+        ls -R
     - name: Integration tests (${{ matrix.browser }})
       run: yarn test-api-${{ matrix.browser }} --headless --forbid-only
 
+  test-playwright-parallel:
+    timeout-minutes: 20
+    strategy:
+      matrix:
+        node-version: [18] # just one as integration tests are about testing in browser
+        runs-on: [ubuntu] # macos is flaky
+        browser: [chromium, firefox, webkit]
+    runs-on: ${{ matrix.runs-on }}-latest
+    steps:
+    - uses: actions/checkout@v3
+    - name: Use Node.js ${{ matrix.node-version }}.x
+      uses: actions/setup-node@v3
+      with:
+        node-version: ${{ matrix.node-version }}.x
+        cache: 'yarn'
+    - name: Install dependencies
+      run: |
+        yarn --frozen-lockfile
+        yarn install-addons
+    - name: Install playwright
+      run: npx playwright install --with-deps ${{ matrix.browser }}
+    - name: Wait for build job
+      uses: NathanFirmo/wait-for-other-job@v1.1.1
+      with:
+        token: ${{ secrets.GITHUB_TOKEN }}
+        job: build
+    - uses: actions/download-artifact@v3
+      with:
+        name: build-artifacts
+    - name: Unzip artifacts
+      shell: bash
+      run: |
+        if [ "$RUNNER_OS" == "Windows" ]; then
+          pwsh -Command "7z x compressed-build.zip -aoa -o${{ github.workspace }}"
+        else
+          unzip -o compressed-build.zip
+        fi
+        ls -R
+    - name: Build demo
+      run: yarn build-demo
+    - name: Integration tests
+      run: yarn test-playwright-${{ matrix.browser }} --forbid-only
+
   test-api:
     needs: build
     timeout-minutes: 20
@@ -240,13 +287,14 @@ jobs:
     - uses: actions/download-artifact@v3
       with:
         name: build-artifacts
-    - name: Unzip artifacts (Linux, macOS)
-      if: runner.os != 'Windows'
-      run: unzip -o compressed-build.zip
-    - name: Unzip artifacts (Windows)
-      if: runner.os == 'Windows'
-      run: 7z x compressed-build.zip -aoa -o${{ github.workspace }}
-    - name: Print directory structure
-      run: ls -R
+    - name: Unzip artifacts
+      shell: bash
+      run: |
+        if [ "$RUNNER_OS" == "Windows" ]; then
+          pwsh -Command "7z x compressed-build.zip -aoa -o${{ github.workspace }}"
+        else
+          unzip -o compressed-build.zip
+        fi
+        ls -R
     - name: Integration tests (${{ matrix.browser }})
       run: yarn test-api-${{ matrix.browser }} --headless --forbid-only

addons/xterm-addon-attach/test/AttachAddon.api.ts

@@ -5,7 +5,7 @@
 
 import WebSocket = require('ws');
 import { openTerminal, pollFor, launchBrowser } from '../../../out-test/api/TestUtils';
-import { Browser, Page } from 'playwright';
+import { Browser, Page } from '@playwright/test';
 
 const APP = 'http://127.0.0.1:3001/test';
 

addons/xterm-addon-fit/test/FitAddon.api.ts

@@ -5,7 +5,7 @@
 
 import { assert } from 'chai';
 import { openTerminal, launchBrowser } from '../../../out-test/api/TestUtils';
-import { Browser, Page } from 'playwright';
+import { Browser, Page } from '@playwright/test';
 
 const APP = 'http://127.0.0.1:3001/test';
 

addons/xterm-addon-image/test/ImageAddon.api.ts

@@ -5,7 +5,7 @@
 
 import { assert } from 'chai';
 import { openTerminal, launchBrowser, pollFor } from '../../../out-test/api/TestUtils';
-import { Browser, Page } from 'playwright';
+import { Browser, Page } from '@playwright/test';
 import { IImageAddonOptions } from '../src/Types';
 import { FINALIZER, introducer, sixelEncode } from 'sixel';
 import { readFileSync } from 'fs';

addons/xterm-addon-search/test/SearchAddon.api.ts

@@ -7,7 +7,7 @@ import { assert } from 'chai';
 import { readFile } from 'fs';
 import { resolve } from 'path';
 import { openTerminal, writeSync, launchBrowser, timeout } from '../../../out-test/api/TestUtils';
-import { Browser, Page } from 'playwright';
+import { Browser, Page } from '@playwright/test';
 
 const APP = 'http://127.0.0.1:3001/test';
 

addons/xterm-addon-serialize/test/SerializeAddon.api.ts

@@ -5,7 +5,7 @@
 
 import { assert } from 'chai';
 import { openTerminal, writeSync, launchBrowser } from '../../../out-test/api/TestUtils';
-import { Browser, Page } from 'playwright';
+import { Browser, Page } from '@playwright/test';
 
 const APP = 'http://127.0.0.1:3001/test';
 

addons/xterm-addon-unicode11/test/Unicode11Addon.api.ts

@@ -5,7 +5,7 @@
 
 import { assert } from 'chai';
 import { openTerminal, launchBrowser } from '../../../out-test/api/TestUtils';
-import { Browser, Page } from 'playwright';
+import { Browser, Page } from '@playwright/test';
 
 const APP = 'http://127.0.0.1:3001/test';
 

addons/xterm-addon-web-links/test/WebLinksAddon.api.ts

@@ -5,7 +5,7 @@
 
 import { assert } from 'chai';
 import { openTerminal, pollFor, writeSync, launchBrowser } from '../../../out-test/api/TestUtils';
-import { Browser, Page } from 'playwright';
+import { Browser, Page } from '@playwright/test';
 
 const APP = 'http://127.0.0.1:3001/test';
 

addons/xterm-addon-webgl/test/WebglRenderer.api.ts

@@ -4,7 +4,7 @@
  */
 
 import { assert } from 'chai';
-import { Browser, Page } from 'playwright';
+import { Browser, Page } from '@playwright/test';
 import { ITheme } from 'xterm';
 import { getBrowserType, launchBrowser, openTerminal, pollFor, writeSync } from '../../../out-test/api/TestUtils';
 import { ITerminalOptions } from '../../../src/common/Types';

demo/client.ts

@@ -13,7 +13,6 @@ import { Terminal } from '../out/browser/public/Terminal';
 import { AttachAddon } from '../addons/xterm-addon-attach/out/AttachAddon';
 import { CanvasAddon } from '../addons/xterm-addon-canvas/out/CanvasAddon';
 import { FitAddon } from '../addons/xterm-addon-fit/out/FitAddon';
-import { ImageAddon, IImageAddonOptions } from '../addons/xterm-addon-image/out/ImageAddon';
 import { SearchAddon, ISearchOptions } from '../addons/xterm-addon-search/out/SearchAddon';
 import { SerializeAddon } from '../addons/xterm-addon-serialize/out/SerializeAddon';
 import { WebLinksAddon } from '../addons/xterm-addon-web-links/out/WebLinksAddon';
@@ -22,6 +21,14 @@ import { Unicode11Addon } from '../addons/xterm-addon-unicode11/out/Unicode11Add
 import { UnicodeGraphemesAddon } from '../addons/xterm-addon-unicode-graphemes/out/UnicodeGraphemesAddon';
 import { LigaturesAddon } from '../addons/xterm-addon-ligatures/out/LigaturesAddon';
 
+// Playwright/WebKit on Windows does not support WebAssembly https://stackoverflow.com/q/62311688/1156119
+import type { ImageAddonType, IImageAddonOptions } from '../addons/xterm-addon-image/out/ImageAddon';
+let ImageAddon: ImageAddonType | undefined; // eslint-disable-line @typescript-eslint/naming-convention
+if ('WebAssembly' in window) {
+  const imageAddon = require('../addons/xterm-addon-image/out/ImageAddon');
+  ImageAddon = imageAddon.ImageAddon;
+}
+
 // Use webpacked version (yarn package)
 // import { Terminal } from '../lib/xterm';
 // import { AttachAddon } from 'xterm-addon-attach';
@@ -44,7 +51,7 @@ export interface IWindowWithTerminal extends Window {
   Terminal?: typeof TerminalType; // eslint-disable-line @typescript-eslint/naming-convention
   AttachAddon?: typeof AttachAddon; // eslint-disable-line @typescript-eslint/naming-convention
   FitAddon?: typeof FitAddon; // eslint-disable-line @typescript-eslint/naming-convention
-  ImageAddon?: typeof ImageAddon; // eslint-disable-line @typescript-eslint/naming-convention
+  ImageAddon?: typeof ImageAddonType; // eslint-disable-line @typescript-eslint/naming-convention
   SearchAddon?: typeof SearchAddon; // eslint-disable-line @typescript-eslint/naming-convention
   SerializeAddon?: typeof SerializeAddon; // eslint-disable-line @typescript-eslint/naming-convention
   WebLinksAddon?: typeof WebLinksAddon; // eslint-disable-line @typescript-eslint/naming-convention
@@ -71,7 +78,7 @@ interface IDemoAddon<T extends AddonType> {
     T extends 'attach' ? typeof AttachAddon :
       T extends 'canvas' ? typeof CanvasAddon :
         T extends 'fit' ? typeof FitAddon :
-          T extends 'image' ? typeof ImageAddon :
+          T extends 'image' ? typeof ImageAddonType :
             T extends 'search' ? typeof SearchAddon :
               T extends 'serialize' ? typeof SerializeAddon :
                 T extends 'webLinks' ? typeof WebLinksAddon :
@@ -84,7 +91,7 @@ interface IDemoAddon<T extends AddonType> {
     T extends 'attach' ? AttachAddon :
       T extends 'canvas' ? CanvasAddon :
         T extends 'fit' ? FitAddon :
-          T extends 'image' ? ImageAddon :
+          T extends 'image' ? ImageAddonType :
             T extends 'search' ? SearchAddon :
               T extends 'serialize' ? SerializeAddon :
                 T extends 'webLinks' ? WebLinksAddon :

demo/start.js

@@ -5,69 +5,12 @@
 
 // @ts-check
 
-const path = require('path');
+const clientConfig = require('./webpack.config');
 const webpack = require('webpack');
 const startServer = require('./server.js');
 
 startServer();
 
-/**
- * This webpack config builds and watches the demo project. It works by taking the output from tsc
- * (via `yarn watch`) which is put into `out/` and then webpacks it into `demo/dist/`. The aliases
- * are used fix up the absolute paths output by tsc (because of `baseUrl` and `paths` in
- * `tsconfig.json`.
- *
- * For production builds see `webpack.config.js` in the root directory. If that is built the demo
- * can use that by switching out which `Terminal` is imported in `client.ts`, this is useful for
- * validating that the packaged version works correctly.
- *
- * @type {import('webpack').Configuration}
- */
-const clientConfig = {
-  entry: path.resolve(__dirname, 'client.ts'),
-  devtool: 'inline-source-map',
-  module: {
-    rules: [
-      {
-        test: /\.tsx?$/,
-        use: 'ts-loader',
-        exclude: /node_modules/
-      },
-      {
-        test: /\.js$/,
-        use: ["source-map-loader"],
-        enforce: "pre",
-        exclude: /node_modules/
-      }
-    ]
-  },
-  resolve: {
-    modules: [
-      'node_modules',
-      path.resolve(__dirname, '..'),
-      path.resolve(__dirname, '../addons')
-    ],
-    extensions: [ '.tsx', '.ts', '.js' ],
-    alias: {
-      common: path.resolve('./out/common'),
-      browser: path.resolve('./out/browser')
-    },
-    fallback: {
-      // The ligature modules contains fallbacks for node environments, we never want to browserify them
-      stream: false,
-      util: false,
-      os: false,
-      path: false,
-      fs: false
-    }
-  },
-  output: {
-    filename: 'client-bundle.js',
-    path: path.resolve(__dirname, 'dist')
-  },
-  mode: 'development',
-  watch: true
-};
 const compiler = webpack(clientConfig);
 
 compiler.watch({

demo/test.html

@@ -7,6 +7,6 @@
   </head>
   <body>
     <div id="terminal-container"></div>
-    <script src="dist/client-bundle.js" defer ></script>
+    <script src="/dist/client-bundle.js" defer></script>
   </body>
 </html>

demo/webpack.config.js

@@ -0,0 +1,62 @@
+/**
+ * Copyright (c) 2019 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+// @ts-check
+
+const path = require('path');
+
+/**
+ * This webpack config does a production build for xterm.js. It works by taking the output from tsc
+ * (via `yarn watch` or `yarn prebuild`) which are put into `out/` and webpacks them into a
+ * production mode umd library module in `lib/`. The aliases are used fix up the absolute paths
+ * output by tsc (because of `baseUrl` and `paths` in `tsconfig.json`.
+ *
+ * @type {import('webpack').Configuration}
+ */
+const config = {
+  entry: path.resolve(__dirname, 'client.ts'),
+  devtool: 'inline-source-map',
+  module: {
+    rules: [
+      {
+        test: /\.tsx?$/,
+        use: 'ts-loader',
+        exclude: /node_modules/
+      },
+      {
+        test: /\.js$/,
+        use: ["source-map-loader"],
+        enforce: "pre",
+        exclude: /node_modules/
+      }
+    ]
+  },
+  resolve: {
+    modules: [
+      'node_modules',
+      path.resolve(__dirname, '..'),
+      path.resolve(__dirname, '../addons')
+    ],
+    extensions: [ '.tsx', '.ts', '.js' ],
+    alias: {
+      common: path.resolve('./out/common'),
+      browser: path.resolve('./out/browser')
+    },
+    fallback: {
+      // The ligature modules contains fallbacks for node environments, we never want to browserify them
+      stream: false,
+      util: false,
+      os: false,
+      path: false,
+      fs: false
+    }
+  },
+  output: {
+    filename: 'client-bundle.js',
+    path: path.resolve(__dirname, 'dist')
+  },
+  mode: 'development'
+};
+module.exports = config;

package.json

@@ -28,6 +28,7 @@
     "package-headless": "webpack --config ./webpack.config.headless.js",
     "postpackage-headless": "node ./bin/package_headless.js",
     "start": "node demo/start",
+    "build-demo": "webpack --config ./demo/webpack.config.js",
     "start-debug": "node --inspect-brk demo/start",
     "lint": "eslint -c .eslintrc.json --max-warnings 0 --ext .ts src/ addons/",
     "lint-api": "eslint --no-eslintrc -c .eslintrc.json.typings --max-warnings 0 --no-ignore --ext .d.ts typings/",
@@ -37,6 +38,11 @@
     "test-api-chromium": "node ./bin/test_api.js --browser=chromium --timeout=20000",
     "test-api-firefox": "node ./bin/test_api.js --browser=firefox --timeout=20000",
     "test-api-webkit": "node ./bin/test_api.js --browser=webkit --timeout=20000",
+    "test-playwright": "playwright test -c ./out-test/playwright/playwright.config.js --workers 4",
+    "test-playwright-chromium": "playwright test -c ./out-test/playwright/playwright.config.js --workers 4 --project='Chrome Stable'",
+    "test-playwright-firefox": "playwright test -c ./out-test/playwright/playwright.config.js --workers 4 --project='Firefox Stable'",
+    "test-playwright-webkit": "playwright test -c ./out-test/playwright/playwright.config.js --workers 4 --project='WebKit'",
+    "test-playwright-debug": "playwright test -c ./out-test/playwright/playwright.config.js --headed --workers 1 --timeout 30000",
     "test-unit": "node ./bin/test.js",
     "test-unit-coverage": "node ./bin/test.js --coverage",
     "test-unit-dev": "cross-env NODE_PATH='./out' mocha",
@@ -53,6 +59,7 @@
     "vtfeatures": "node bin/extract_vtfeatures.js src/**/*.ts src/*.ts"
   },
   "devDependencies": {
+    "@playwright/test": "^1.37.1",
     "@types/chai": "^4.2.22",
     "@types/debug": "^4.1.7",
     "@types/deep-equal": "^1.0.1",
@@ -80,7 +87,6 @@
     "mustache": "^4.2.0",
     "node-pty": "^0.10.1",
     "nyc": "^15.1.0",
-    "playwright": "^1.22.1",
     "source-map-loader": "^3.0.0",
     "source-map-support": "^0.5.20",
     "ts-loader": "^9.3.1",

src/browser/renderer/shared/CustomGlyphs.ts

@@ -366,11 +366,11 @@ export const powerlineDefinitions: { [index: string]: IVectorShape } = {
   // Right semi-circle solid
   '\u{E0B4}': { d: 'M0,0 L0,1 C0.552,1,1,0.776,1,.5 C1,0.224,0.552,0,0,0', type: VectorType.FILL, rightPadding: 1 },
   // Right semi-circle line
-  '\u{E0B5}': { d: 'M0,1 C0.552,1,1,0.776,1,.5 C1,0.224,0.552,0,0,0', type: VectorType.STROKE, rightPadding: 1 },
+  '\u{E0B5}': { d: 'M.2,1 C.422,1,.8,.826,.78,.5 C.8,.174,0.422,0,.2,0', type: VectorType.STROKE, rightPadding: 1 },
   // Left semi-circle solid
   '\u{E0B6}': { d: 'M1,0 L1,1 C0.448,1,0,0.776,0,.5 C0,0.224,0.448,0,1,0', type: VectorType.FILL, leftPadding: 1 },
   // Left semi-circle line
-  '\u{E0B7}': { d: 'M1,1 C0.448,1,0,0.776,0,.5 C0,0.224,0.448,0,1,0', type: VectorType.STROKE, leftPadding: 1 },
+  '\u{E0B7}': { d: 'M.8,1 C0.578,1,0.2,.826,.22,.5 C0.2,0.174,0.578,0,0.8,0', type: VectorType.STROKE, leftPadding: 1 },
   // Lower left triangle
   '\u{E0B8}': { d: 'M-.5,-.5 L1.5,1.5 L-.5,1.5', type: VectorType.FILL },
   // Backslash separator

src/common/EventEmitter.ts

@@ -57,10 +57,14 @@ export class EventEmitter<T, U = void> implements IEventEmitter<T, U> {
   }
 
   public dispose(): void {
+    this.clearListeners();
+    this._disposed = true;
+  }
+
+  public clearListeners(): void {
     if (this._listeners) {
       this._listeners.length = 0;
     }
-    this._disposed = true;
   }
 }
 

test/api/CharWidth.api.ts

@@ -1,96 +0,0 @@
-/**
- * Copyright (c) 2017 The xterm.js authors. All rights reserved.
- * @license MIT
- */
-
-import { pollFor, openTerminal, launchBrowser } from './TestUtils';
-import { Browser, Page } from 'playwright';
-
-const APP = 'http://127.0.0.1:3001/test';
-
-let browser: Browser;
-let page: Page;
-const width = 800;
-const height = 600;
-
-describe('CharWidth Integration Tests', function(): void {
-  before(async function(): Promise<any> {
-    browser = await launchBrowser();
-    page = await (await browser.newContext()).newPage();
-    await page.setViewportSize({ width, height });
-    await page.goto(APP);
-    await openTerminal(page, { rows: 5, cols: 30 });
-  });
-
-  after(() => {
-    browser.close();
-  });
-
-  describe('getStringCellWidth', () => {
-    beforeEach(async () => {
-      await page.evaluate(`window.term.reset()`);
-    });
-
-    it('ASCII chars', async function(): Promise<void> {
-      const input = 'This is just ASCII text.#';
-      await page.evaluate(`window.term.write('${input}')`);
-      await pollFor(page, () => sumWidths(0, 1, '#'), 25);
-    });
-
-    it('combining chars', async function(): Promise<void> {
-      const input = 'e\u0301e\u0301e\u0301e\u0301e\u0301e\u0301e\u0301e\u0301e\u0301#';
-      await page.evaluate(`window.term.write('${input}')`);
-      await pollFor(page, () => sumWidths(0, 1, '#'), 10);
-    });
-
-    it('surrogate chars', async function(): Promise<void> {
-      const input = '𝄞𝄞𝄞𝄞𝄞𝄞𝄞𝄞𝄞𝄞𝄞𝄞𝄞𝄞𝄞𝄞𝄞𝄞𝄞𝄞𝄞𝄞𝄞𝄞𝄞𝄞𝄞#';
-      await page.evaluate(`window.term.write('${input}')`);
-      await pollFor(page, () => sumWidths(0, 1, '#'), 28);
-    });
-
-    it('surrogate combining chars', async function(): Promise<void> {
-      const input = '𓂀\u0301𓂀\u0301𓂀\u0301𓂀\u0301𓂀\u0301𓂀\u0301𓂀\u0301𓂀\u0301𓂀\u0301𓂀\u0301𓂀\u0301#';
-      await page.evaluate(`window.term.write('${input}')`);
-      await pollFor(page, () => sumWidths(0, 1, '#'), 12);
-    });
-
-    it('fullwidth chars', async function(): Promise<void> {
-      const input = '１２３４５６７８９０#';
-      await page.evaluate(`window.term.write('${input}')`);
-      await pollFor(page, () => sumWidths(0, 1, '#'), 21);
-    });
-
-    it('fullwidth chars offset 1', async function(): Promise<void> {
-      const input = 'a１２３４５６７８９０#';
-      await page.evaluate(`window.term.write('${input}')`);
-      await pollFor(page, () => sumWidths(0, 1, '#'), 22);
-    });
-
-    // TODO: multiline tests once #1685 is resolved
-  });
-});
-
-async function sumWidths(start: number, end: number, sentinel: string): Promise<number> {
-  await page.evaluate(`
-    (function() {
-      window.result = 0;
-      const buffer = window.term.buffer.active;
-      for (let i = ${start}; i < ${end}; i++) {
-        const line = buffer.getLine(i);
-        let j = 0;
-        while (true) {
-          const cell = line.getCell(j++);
-          if (!cell) {
-            break;
-          }
-          window.result += cell.getWidth();
-          if (cell.getChars() === '${sentinel}') {
-            return;
-          }
-        }
-      }
-    })();
-  `);
-  return await page.evaluate(`window.result`);
-}

test/api/Parser.api.ts

@@ -1,213 +0,0 @@
-/**
- * Copyright (c) 2019 The xterm.js authors. All rights reserved.
- * @license MIT
- */
-
-import { assert } from 'chai';
-import { writeSync, openTerminal, launchBrowser } from './TestUtils';
-import { Browser, Page } from 'playwright';
-
-const APP = 'http://127.0.0.1:3001/test';
-
-let browser: Browser;
-let page: Page;
-const width = 800;
-const height = 600;
-
-describe('Parser Integration Tests', function (): void {
-  before(async function (): Promise<any> {
-    browser = await launchBrowser();
-    page = await (await browser.newContext()).newPage();
-    await page.setViewportSize({ width, height });
-    await page.goto(APP);
-    await openTerminal(page);
-  });
-
-  after(async () => browser.close());
-
-  describe('registerCsiHandler', () => {
-    it('should call custom CSI handler with js array params', async () => {
-      await page.evaluate(`
-        window.term.reset();
-        window._customCsiHandlerParams = [];
-        const _customCsiHandler = window.term.parser.registerCsiHandler({final: 'm'}, (params, collect) => {
-          window._customCsiHandlerParams.push(params);
-          return false;
-        }, '');
-      `);
-      await writeSync(page, '\x1b[38;5;123mparams\x1b[38:2::50:100:150msubparams');
-      assert.deepEqual(await page.evaluate(`window._customCsiHandlerParams`), [
-        [38, 5, 123],
-        [38, [2, -1, 50, 100, 150]]
-      ]);
-    });
-    it('async', async () => {
-      await page.evaluate(`
-        window.term.reset();
-        window._customCsiHandlerCallStack = [];
-        const _customCsiHandlerA = window.term.parser.registerCsiHandler({intermediates:'+', final: 'Z'}, params => {
-          window._customCsiHandlerCallStack.push(['A', params]);
-          return false;
-        });
-        const _customCsiHandlerB = window.term.parser.registerCsiHandler({intermediates:'+', final: 'Z'}, async params => {
-          await new Promise(res => setTimeout(res, 50));
-          window._customCsiHandlerCallStack.push(['B', params]);
-          return false;
-        });
-        const _customCsiHandlerC = window.term.parser.registerCsiHandler({intermediates:'+', final: 'Z'}, params => {
-          window._customCsiHandlerCallStack.push(['C', params]);
-          return false;
-        });
-      `);
-      await writeSync(page, '\x1b[1;2+Z');
-      assert.deepEqual(await page.evaluate(`window._customCsiHandlerCallStack`), [
-        ['C', [1, 2]],
-        ['B', [1, 2]],
-        ['A', [1, 2]]
-      ]);
-    });
-  });
-  describe('registerDcsHandler', () => {
-    it('should respects return value', async () => {
-      await page.evaluate(`
-        window.term.reset();
-        window._customDcsHandlerCallStack = [];
-        const _customDcsHandlerA = window.term.parser.registerDcsHandler({intermediates:'+', final: 'p'}, (data, params) => {
-          window._customDcsHandlerCallStack.push(['A', params, data]);
-          return false;
-        });
-        const _customDcsHandlerB = window.term.parser.registerDcsHandler({intermediates:'+', final: 'p'}, (data, params) => {
-          window._customDcsHandlerCallStack.push(['B', params, data]);
-          return true;
-        });
-        const _customDcsHandlerC = window.term.parser.registerDcsHandler({intermediates:'+', final: 'p'}, (data, params) => {
-          window._customDcsHandlerCallStack.push(['C', params, data]);
-          return false;
-        });
-      `);
-      await writeSync(page, '\x1bP1;2+psome data\x1b\\\\');
-      assert.deepEqual(await page.evaluate(`window._customDcsHandlerCallStack`), [
-        ['C', [1, 2], 'some data'],
-        ['B', [1, 2], 'some data']
-      ]);
-    });
-    it('async', async () => {
-      await page.evaluate(`
-        window.term.reset();
-        window._customDcsHandlerCallStack = [];
-        const _customDcsHandlerA = window.term.parser.registerDcsHandler({intermediates:'+', final: 'q'}, (data, params) => {
-          window._customDcsHandlerCallStack.push(['A', params, data]);
-          return false;
-        });
-        const _customDcsHandlerB = window.term.parser.registerDcsHandler({intermediates:'+', final: 'q'}, async (data, params) => {
-          await new Promise(res => setTimeout(res, 50));
-          window._customDcsHandlerCallStack.push(['B', params, data]);
-          return false;
-        });
-        const _customDcsHandlerC = window.term.parser.registerDcsHandler({intermediates:'+', final: 'q'}, (data, params) => {
-          window._customDcsHandlerCallStack.push(['C', params, data]);
-          return false;
-        });
-      `);
-      await writeSync(page, '\x1bP1;2+qsome data\x1b\\\\');
-      assert.deepEqual(await page.evaluate(`window._customDcsHandlerCallStack`), [
-        ['C', [1, 2], 'some data'],
-        ['B', [1, 2], 'some data'],
-        ['A', [1, 2], 'some data']
-      ]);
-    });
-  });
-  describe('registerEscHandler', () => {
-    it('should respects return value', async () => {
-      await page.evaluate(`
-        window.term.reset();
-        window._customEscHandlerCallStack = [];
-        const _customEscHandlerA = window.term.parser.registerEscHandler({intermediates:'(', final: 'B'}, () => {
-          window._customEscHandlerCallStack.push('A');
-          return false;
-        });
-        const _customEscHandlerB = window.term.parser.registerEscHandler({intermediates:'(', final: 'B'}, () => {
-          window._customEscHandlerCallStack.push('B');
-          return true;
-        });
-        const _customEscHandlerC = window.term.parser.registerEscHandler({intermediates:'(', final: 'B'}, () => {
-          window._customEscHandlerCallStack.push('C');
-          return false;
-        });
-      `);
-      await writeSync(page, '\x1b(B');
-      assert.deepEqual(await page.evaluate(`window._customEscHandlerCallStack`), ['C', 'B']);
-    });
-    it('async', async () => {
-      await page.evaluate(`
-        window.term.reset();
-        window._customEscHandlerCallStack = [];
-        const _customEscHandlerA = window.term.parser.registerEscHandler({intermediates:'(', final: 'Z'}, () => {
-          window._customEscHandlerCallStack.push('A');
-          return false;
-        });
-        const _customEscHandlerB = window.term.parser.registerEscHandler({intermediates:'(', final: 'Z'}, async () => {
-          await new Promise(res => setTimeout(res, 50));
-          window._customEscHandlerCallStack.push('B');
-          return false;
-        });
-        const _customEscHandlerC = window.term.parser.registerEscHandler({intermediates:'(', final: 'Z'}, () => {
-          window._customEscHandlerCallStack.push('C');
-          return false;
-        });
-      `);
-      await writeSync(page, '\x1b(Z');
-      assert.deepEqual(await page.evaluate(`window._customEscHandlerCallStack`), ['C', 'B', 'A']);
-    });
-  });
-  describe('registerOscHandler', () => {
-    it('should respects return value', async () => {
-      await page.evaluate(`
-        window.term.reset();
-        window._customOscHandlerCallStack = [];
-        const _customOscHandlerA = window.term.parser.registerOscHandler(1234, data => {
-          window._customOscHandlerCallStack.push(['A', data]);
-          return false;
-        });
-        const _customOscHandlerB = window.term.parser.registerOscHandler(1234, data => {
-          window._customOscHandlerCallStack.push(['B', data]);
-          return true;
-        });
-        const _customOscHandlerC = window.term.parser.registerOscHandler(1234, data => {
-          window._customOscHandlerCallStack.push(['C', data]);
-          return false;
-        });
-      `);
-      await writeSync(page, '\x1b]1234;some data\x07');
-      assert.deepEqual(await page.evaluate(`window._customOscHandlerCallStack`), [
-        ['C', 'some data'],
-        ['B', 'some data']
-      ]);
-    });
-    it('async', async () => {
-      await page.evaluate(`
-        window.term.reset();
-        window._customOscHandlerCallStack = [];
-        const _customOscHandlerA = window.term.parser.registerOscHandler(666, data => {
-          window._customOscHandlerCallStack.push(['A', data]);
-          return false;
-        });
-        const _customOscHandlerB = window.term.parser.registerOscHandler(666, async data => {
-          await new Promise(res => setTimeout(res, 50));
-          window._customOscHandlerCallStack.push(['B', data]);
-          return false;
-        });
-        const _customOscHandlerC = window.term.parser.registerOscHandler(666, data => {
-          window._customOscHandlerCallStack.push(['C', data]);
-          return false;
-        });
-      `);
-      await writeSync(page, '\x1b]666;some data\x07');
-      assert.deepEqual(await page.evaluate(`window._customOscHandlerCallStack`), [
-        ['C', 'some data'],
-        ['B', 'some data'],
-        ['A', 'some data']
-      ]);
-    });
-  });
-});

test/api/README.md

@@ -0,0 +1 @@
+This project contains helpers for the legacy playwright tests. Currently addons use this as a dependency, when all addons have moved over to use `@playright/test` this can be removed.

test/api/TestUtils.ts

@@ -3,10 +3,10 @@
  * @license MIT
  */
 
-import * as playwright from 'playwright';
+import * as playwright from '@playwright/test';
 import deepEqual = require('deep-equal');
 import { ITerminalInitOnlyOptions, ITerminalOptions } from 'xterm';
-import { deepStrictEqual, fail } from 'assert';
+import { deepStrictEqual } from 'assert';
 
 export async function pollFor<T>(page: playwright.Page, evalOrFn: string | (() => Promise<T>), val: T, preFn?: () => Promise<void>, maxDuration?: number): Promise<void> {
   if (preFn) {

test/playwright/CharWidth.test.ts

@@ -0,0 +1,76 @@
+/**
+ * Copyright (c) 2017 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+import { test } from '@playwright/test';
+import { createTestContext, ITestContext, openTerminal, pollFor } from './TestUtils';
+
+let ctx: ITestContext;
+test.beforeAll(async ({ browser }) => {
+  ctx = await createTestContext(browser);
+  await openTerminal(ctx);
+});
+test.afterAll(async () => await ctx.page.close());
+
+test.beforeEach(async () => await ctx.proxy.reset());
+
+test.describe('CharWidth Integration Tests', () => {
+  test.describe('getStringCellWidth', () => {
+    test('ASCII chars', async () => {
+      await ctx.proxy.write('This is just ASCII text.#');
+      await pollFor(ctx.page, () => sumWidths(0, 1, '#'), 25);
+    });
+
+    test('combining chars', async () => {
+      await ctx.proxy.write('e\u0301e\u0301e\u0301e\u0301e\u0301e\u0301e\u0301e\u0301e\u0301#');
+      await pollFor(ctx.page, () => sumWidths(0, 1, '#'), 10);
+    });
+
+    test('surrogate chars', async () => {
+      await ctx.proxy.write('𝄞𝄞𝄞𝄞𝄞𝄞𝄞𝄞𝄞𝄞𝄞𝄞𝄞𝄞𝄞𝄞𝄞𝄞𝄞𝄞𝄞𝄞𝄞𝄞𝄞𝄞𝄞#');
+      await pollFor(ctx.page, () => sumWidths(0, 1, '#'), 28);
+    });
+
+    test('surrogate combining chars', async () => {
+      await ctx.proxy.write('𓂀\u0301𓂀\u0301𓂀\u0301𓂀\u0301𓂀\u0301𓂀\u0301𓂀\u0301𓂀\u0301𓂀\u0301𓂀\u0301𓂀\u0301#');
+      await pollFor(ctx.page, () => sumWidths(0, 1, '#'), 12);
+    });
+
+    test('fullwidth chars', async () => {
+      await ctx.proxy.write('１２３４５６７８９０#');
+      await pollFor(ctx.page, () => sumWidths(0, 1, '#'), 21);
+    });
+
+    test('fullwidth chars offset 1', async () => {
+      await ctx.proxy.write('a１２３４５６７８９０#');
+      await pollFor(ctx.page, () => sumWidths(0, 1, '#'), 22);
+    });
+
+    // TODO: multiline tests once #1685 is resolved
+  });
+});
+
+async function sumWidths(start: number, end: number, sentinel: string): Promise<number> {
+  await ctx.page.evaluate(`
+    (function() {
+      window.result = 0;
+      const buffer = window.term.buffer.active;
+      for (let i = ${start}; i < ${end}; i++) {
+        const line = buffer.getLine(i);
+        let j = 0;
+        while (true) {
+          const cell = line.getCell(j++);
+          if (!cell) {
+            break;
+          }
+          window.result += cell.getWidth();
+          if (cell.getChars() === '${sentinel}') {
+            return;
+          }
+        }
+      }
+    })();
+  `);
+  return await ctx.page.evaluate(`window.result`);
+}

test/playwright/Parser.test.ts

@@ -0,0 +1,244 @@
+/**
+ * Copyright (c) 2019 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+import { test } from '@playwright/test';
+import { deepStrictEqual, ok, strictEqual } from 'assert';
+import type { IDisposable } from 'xterm';
+import { createTestContext, ITestContext, openTerminal, pollFor } from './TestUtils';
+
+let ctx: ITestContext;
+test.beforeAll(async ({ browser }) => {
+  ctx = await createTestContext(browser);
+  await openTerminal(ctx);
+});
+test.afterAll(async () => await ctx.page.close());
+
+declare global {
+  interface Window { // eslint-disable-line @typescript-eslint/naming-convention
+    customCsiHandlerParams?: (number | number[])[][];
+    customCsiHandlerCallStack?: string[];
+    customDcsHandlerCallStack?: [string, (number | number[])[], string][];
+    customEscHandlerCallStack?: string[];
+    customOscHandlerCallStack?: string[][];
+    disposable?: IDisposable;
+    disposables?: IDisposable[];
+  }
+}
+
+test.describe('Parser Integration Tests', () => {
+  test.beforeEach(async () => await ctx.proxy.reset());
+  test.afterEach(async () => {
+    await ctx.page.evaluate(() => {
+      window.disposable?.dispose();
+      window.disposable = undefined;
+      window.disposables?.forEach(e => e.dispose());
+      window.disposables = undefined;
+    });
+  });
+
+  test.describe('registerCsiHandler', () => {
+    test('should call custom CSI handler with js array params', async () => {
+      await ctx.proxy.evaluate(([term]) => {
+        window.customCsiHandlerParams = [];
+        window.disposable = term.parser.registerCsiHandler({final: 'm'}, (params) => {
+          window.customCsiHandlerParams!.push(params);
+          return false;
+        });
+      });
+      await ctx.proxy.write('\x1b[38;5;123mparams\x1b[38:2::50:100:150msubparams');
+      deepStrictEqual(await ctx.page.evaluate(() => window.customCsiHandlerParams), [
+        [38, 5, 123],
+        [38, [2, -1, 50, 100, 150]]
+      ]);
+    });
+    test('async', async () => {
+      await ctx.proxy.evaluate(([term]) => {
+        window.customCsiHandlerCallStack = [];
+        window.customCsiHandlerParams = [];
+        window.disposables = [
+          term.parser.registerCsiHandler({intermediates:'+', final: 'Z'}, params => {
+            window.customCsiHandlerCallStack!.push('A');
+            window.customCsiHandlerParams!.push(params);
+            return false;
+          }),
+          term.parser.registerCsiHandler({intermediates:'+', final: 'Z'}, params => {
+            return new Promise(res => setTimeout(res, 50)).then(() => {
+              window.customCsiHandlerCallStack!.push('B');
+              window.customCsiHandlerParams!.push(params);
+              return false;
+            });
+          }),
+          term.parser.registerCsiHandler({intermediates:'+', final: 'Z'}, params => {
+            window.customCsiHandlerCallStack!.push('C');
+            window.customCsiHandlerParams!.push(params);
+            return false;
+          })
+        ];
+      });
+      await ctx.proxy.write('\x1b[1;2+Z');
+      deepStrictEqual(await ctx.page.evaluate(() => window.customCsiHandlerCallStack), [
+        'C',
+        'B',
+        'A'
+      ]);
+      deepStrictEqual(await ctx.page.evaluate(() => window.customCsiHandlerParams), [
+        [1, 2],
+        [1, 2],
+        [1, 2]
+      ]);
+    });
+  });
+  test.describe('registerDcsHandler', () => {
+    test('should respects return value', async () => {
+      await ctx.proxy.evaluate(([term]) => {
+        window.customDcsHandlerCallStack = [];
+        window.disposables = [
+          term.parser.registerDcsHandler({intermediates:'+', final: 'p'}, (data, params) => {
+            window.customDcsHandlerCallStack!.push(['A', params, data]);
+            return false;
+          }),
+          term.parser.registerDcsHandler({intermediates:'+', final: 'p'}, (data, params) => {
+            window.customDcsHandlerCallStack!.push(['B', params, data]);
+            return true;
+          }),
+          term.parser.registerDcsHandler({intermediates:'+', final: 'p'}, (data, params) => {
+            window.customDcsHandlerCallStack!.push(['C', params, data]);
+            return false;
+          })
+        ];
+      });
+      await ctx.proxy.write('\x1bP1;2+psome data\x1b\\');
+      deepStrictEqual(await ctx.page.evaluate(() => window.customDcsHandlerCallStack), [
+        ['C', [1, 2], 'some data'],
+        ['B', [1, 2], 'some data']
+      ]);
+    });
+    test('async', async () => {
+      await ctx.proxy.evaluate(([term]) => {
+        window.customDcsHandlerCallStack = [];
+        window.disposables = [
+          term.parser.registerDcsHandler({intermediates:'+', final: 'q'}, (data, params) => {
+            window.customDcsHandlerCallStack!.push(['A', params, data]);
+            return false;
+          }),
+          term.parser.registerDcsHandler({intermediates:'+', final: 'q'}, (data, params) => {
+            return new Promise(res => setTimeout(res, 50)).then(() => {
+              window.customDcsHandlerCallStack!.push(['B', params, data]);
+              return false;
+            });
+          }),
+          term.parser.registerDcsHandler({intermediates:'+', final: 'q'}, (data, params) => {
+            window.customDcsHandlerCallStack!.push(['C', params, data]);
+            return false;
+          })
+        ];
+      });
+      await ctx.proxy.write('\x1bP1;2+qsome data\x1b\\');
+      deepStrictEqual(await ctx.page.evaluate(() => window.customDcsHandlerCallStack), [
+        ['C', [1, 2], 'some data'],
+        ['B', [1, 2], 'some data'],
+        ['A', [1, 2], 'some data']
+      ]);
+    });
+  });
+  test.describe('registerEscHandler', () => {
+    test('should respects return value', async () => {
+      await ctx.proxy.evaluate(([term]) => {
+        window.customEscHandlerCallStack = [];
+        window.disposables = [
+          term.parser.registerEscHandler({intermediates:'(', final: 'B'}, () => {
+            window.customEscHandlerCallStack!.push('A');
+            return false;
+          }),
+          term.parser.registerEscHandler({intermediates:'(', final: 'B'}, () => {
+            window.customEscHandlerCallStack!.push('B');
+            return true;
+          }),
+          term.parser.registerEscHandler({intermediates:'(', final: 'B'}, () => {
+            window.customEscHandlerCallStack!.push('C');
+            return false;
+          })
+        ];
+      });
+      await ctx.proxy.write('\x1b(B');
+      deepStrictEqual(await ctx.page.evaluate(() => window.customEscHandlerCallStack), ['C', 'B']);
+    });
+    test('async', async () => {
+      await ctx.proxy.evaluate(([term]) => {
+        window.customEscHandlerCallStack = [];
+        window.disposables = [
+          term.parser.registerEscHandler({intermediates:'(', final: 'Z'}, () => {
+            window.customEscHandlerCallStack!.push('A');
+            return false;
+          }),
+          term.parser.registerEscHandler({intermediates:'(', final: 'Z'}, () => {
+            return new Promise(res => setTimeout(res, 50)).then(() => {
+              window.customEscHandlerCallStack!.push('B');
+              return false;
+            });
+          }),
+          term.parser.registerEscHandler({intermediates:'(', final: 'Z'}, () => {
+            window.customEscHandlerCallStack!.push('C');
+            return false;
+          })
+        ];
+      });
+      await ctx.proxy.write('\x1b(Z');
+      deepStrictEqual(await ctx.page.evaluate(() => window.customEscHandlerCallStack), ['C', 'B', 'A']);
+    });
+  });
+  test.describe('registerOscHandler', () => {
+    test('should respects return value', async () => {
+      await ctx.proxy.evaluate(([term]) => {
+        window.customOscHandlerCallStack = [];
+        window.disposables = [
+          term.parser.registerOscHandler(1234, data => {
+            window.customOscHandlerCallStack!.push(['A', data]);
+            return false;
+          }),
+          term.parser.registerOscHandler(1234, data => {
+            window.customOscHandlerCallStack!.push(['B', data]);
+            return true;
+          }),
+          term.parser.registerOscHandler(1234, data => {
+            window.customOscHandlerCallStack!.push(['C', data]);
+            return false;
+          })
+        ];
+      });
+      await ctx.proxy.write('\x1b]1234;some data\x07');
+      deepStrictEqual(await ctx.page.evaluate(() => window.customOscHandlerCallStack), [
+        ['C', 'some data'],
+        ['B', 'some data']
+      ]);
+    });
+    test('async', async () => {
+      await ctx.proxy.evaluate(([term]) => {
+        window.customOscHandlerCallStack = [];
+        window.disposables = [
+          term.parser.registerOscHandler(666, data => {
+            window.customOscHandlerCallStack!.push(['A', data]);
+            return false;
+          }),
+          term.parser.registerOscHandler(666, data => {
+            return new Promise(res => setTimeout(res, 50)).then(() => {
+              window.customOscHandlerCallStack!.push(['B', data]);
+              return false;
+            });
+          }),
+          term.parser.registerOscHandler(666, data => {
+            window.customOscHandlerCallStack!.push(['C', data]);
+            return false;
+          })
+        ];
+      });
+      await ctx.proxy.write('\x1b]666;some data\x07');
+      deepStrictEqual(await ctx.page.evaluate(() => window.customOscHandlerCallStack), [
+        ['C', 'some data'],
+        ['B', 'some data'],
+        ['A', 'some data']
+      ]);
+    });
+  });
+});

test/playwright/TestUtils.ts

@@ -0,0 +1,455 @@
+/**
+ * Copyright (c) 2019 The xterm.js authors. All rights reserved.
+ * @license MIT
+ */
+
+import { Browser, JSHandle, Page } from '@playwright/test';
+import { deepStrictEqual, strictEqual } from 'assert';
+import type { IRenderDimensions } from 'browser/renderer/shared/Types';
+import type { IRenderService } from 'browser/services/Services';
+import type { ICoreTerminal, IMarker } from 'common/Types';
+import * as playwright from '@playwright/test';
+import { PageFunction } from 'playwright-core/types/structs';
+import { IBuffer, IBufferCell, IBufferLine, IBufferNamespace, IBufferRange, IDecoration, IDecorationOptions, IModes, ITerminalInitOnlyOptions, ITerminalOptions, Terminal } from 'xterm';
+import { EventEmitter } from '../../out/common/EventEmitter';
+// TODO: We could avoid needing this
+import deepEqual = require('deep-equal');
+
+export interface ITestContext {
+  browser: Browser;
+  page: Page;
+  termHandle: JSHandle<Terminal>;
+  proxy: TerminalProxy;
+}
+
+export async function createTestContext(browser: Browser): Promise<ITestContext> {
+  const page = await browser.newPage();
+  page.on('console', e => console.log(`[${browser.browserType().name()}:${e.type()}]`, e));
+  page.on('pageerror', e => console.error(`[${browser.browserType().name()}]`, e));
+  await page.goto('/test');
+  const proxy = new TerminalProxy(page);
+  proxy.initPage();
+  return {
+    browser,
+    page,
+    termHandle: await page.evaluateHandle('window.term'),
+    proxy
+  };
+}
+
+type EnsureAsync<T> = T extends PromiseLike<any> ? T : Promise<T>;
+type EnsureAsyncProperties<T> = {
+  [Key in keyof T]: EnsureAsync<T[Key]>
+};
+type EnsureAsyncMethods<T> = {
+  [K in keyof T]: T[K] extends (...args: infer Args) => infer Return
+    ? (...args: Args) => Promise<Return>
+    : T[K];
+};
+
+/**
+ * A type that proxy objects implement that enables overriding a base interface with a set of types
+ * to override as async (ie. properties that are not synced to the node side), and a set of types to
+ * omit from the interface (ie. properties that map to completely different implementations).
+ */
+type PlaywrightApiProxy<TBaseInterface, TAsyncPropOverrides extends keyof TBaseInterface, TAsyncMethodOverrides extends keyof TBaseInterface, TCustomOverrides extends keyof TBaseInterface> = (
+  // Interfaces that the proxy implements as async
+  EnsureAsyncProperties<Pick<TBaseInterface, TAsyncPropOverrides>> &
+  EnsureAsyncMethods<Pick<TBaseInterface, TAsyncMethodOverrides>> &
+  // Interfaces that the proxy implements as is (exclude async/custom)
+  Omit<TBaseInterface, TAsyncPropOverrides | TAsyncMethodOverrides | TCustomOverrides>
+);
+
+interface ITerminalProxyCustomMethods {
+  evaluate<T>(pageFunction: PageFunction<JSHandle<Terminal>[], T>): Promise<T>;
+  write(data: string | Uint8Array): Promise<void>;
+}
+
+type TerminalProxyAsyncPropOverrides = 'cols' | 'rows' | 'modes';
+type TerminalProxyAsyncMethodOverrides = 'hasSelection' | 'getSelection' | 'getSelectionPosition' | 'registerMarker' | 'registerDecoration';
+type TerminalProxyCustomOverrides = 'buffer' | (
+  // The below are not implemented yet
+  'element' |
+  'textarea' |
+  'markers' |
+  'unicode' |
+  'parser' |
+  'options' |
+  'open' |
+  'attachCustomKeyEventHandler' |
+  'registerLinkProvider' |
+  'registerCharacterJoiner' |
+  'deregisterCharacterJoiner' |
+  'loadAddon'
+);
+export class TerminalProxy implements ITerminalProxyCustomMethods, PlaywrightApiProxy<Terminal, TerminalProxyAsyncPropOverrides, TerminalProxyAsyncMethodOverrides, TerminalProxyCustomOverrides> {
+  constructor(private readonly _page: Page) {
+  }
+
+  /**
+   * Initialize the proxy for a new playwright page.
+   */
+  public async initPage(): Promise<void> {
+    await this._page.exposeFunction('onBell', () => this._onBell.fire());
+    await this._page.exposeFunction('onBinary', (e: string) => this._onBinary.fire(e));
+    await this._page.exposeFunction('onCursorMove', () => this._onCursorMove.fire());
+    await this._page.exposeFunction('onData', (e: string) => this._onData.fire(e));
+    await this._page.exposeFunction('onKey', (e: { key: string, domEvent: KeyboardEvent }) => this._onKey.fire(e));
+    await this._page.exposeFunction('onLineFeed', () => this._onLineFeed.fire());
+    await this._page.exposeFunction('onRender', (e: { start: number, end: number }) => this._onRender.fire(e));
+    await this._page.exposeFunction('onResize', (e: { cols: number, rows: number }) => this._onResize.fire(e));
+    await this._page.exposeFunction('onScroll', (e: number) => this._onScroll.fire(e));
+    await this._page.exposeFunction('onSelectionChange', () => this._onSelectionChange.fire());
+    await this._page.exposeFunction('onTitleChange', (e: string) => this._onTitleChange.fire(e));
+    await this._page.exposeFunction('onWriteParsed', () => this._onWriteParsed.fire());
+  }
+
+  /**
+   * Initialize the proxy for a new terminal object.
+   */
+  public async initTerm(): Promise<void> {
+    for (const emitter of [
+      this._onBell,
+      this._onBinary,
+      this._onCursorMove,
+      this._onData,
+      this._onKey,
+      this._onLineFeed,
+      this._onRender,
+      this._onResize,
+      this._onScroll,
+      this._onSelectionChange,
+      this._onTitleChange,
+      this._onWriteParsed
+    ]) {
+      emitter.clearListeners();
+    }
+    await this.evaluate(([term]) => term.onBell((window as any).onBell));
+    await this.evaluate(([term]) => term.onBinary((window as any).onBinary));
+    await this.evaluate(([term]) => term.onCursorMove((window as any).onCursorMove));
+    await this.evaluate(([term]) => term.onData((window as any).onData));
+    await this.evaluate(([term]) => term.onKey((window as any).onKey));
+    await this.evaluate(([term]) => term.onLineFeed((window as any).onLineFeed));
+    await this.evaluate(([term]) => term.onRender((window as any).onRender));
+    await this.evaluate(([term]) => term.onResize((window as any).onResize));
+    await this.evaluate(([term]) => term.onScroll((window as any).onScroll));
+    await this.evaluate(([term]) => term.onSelectionChange((window as any).onSelectionChange));
+    await this.evaluate(([term]) => term.onTitleChange((window as any).onTitleChange));
+    await this.evaluate(([term]) => term.onWriteParsed((window as any).onWriteParsed));
+  }
+
+  // #region Events
+  private _onBell = new EventEmitter<void>();
+  public readonly onBell = this._onBell.event;
+  private _onBinary = new EventEmitter<string>();
+  public readonly onBinary = this._onBinary.event;
+  private _onCursorMove = new EventEmitter<void>();
+  public readonly onCursorMove = this._onCursorMove.event;
+  private _onData = new EventEmitter<string>();
+  public readonly onData = this._onData.event;
+  private _onKey = new EventEmitter<{ key: string, domEvent: KeyboardEvent }>();
+  public readonly onKey = this._onKey.event;
+  private _onLineFeed = new EventEmitter<void>();
+  public readonly onLineFeed = this._onLineFeed.event;
+  private _onRender = new EventEmitter<{ start: number, end: number }>();
+  public readonly onRender = this._onRender.event;
+  private _onResize = new EventEmitter<{ cols: number, rows: number }>();
+  public readonly onResize = this._onResize.event;
+  private _onScroll = new EventEmitter<number>();
+  public readonly onScroll = this._onScroll.event;
+  private _onSelectionChange = new EventEmitter<void>();
+  public readonly onSelectionChange = this._onSelectionChange.event;
+  private _onTitleChange = new EventEmitter<string>();
+  public readonly onTitleChange = this._onTitleChange.event;
+  private _onWriteParsed = new EventEmitter<void>();
+  public readonly onWriteParsed = this._onWriteParsed.event;
+  // #endregion
+
+  // #region Simple properties
+  public get cols(): Promise<number> { return this.evaluate(([term]) => term.cols); }
+  public get rows(): Promise<number> { return this.evaluate(([term]) => term.rows); }
+  public get modes(): Promise<IModes> { return this.evaluate(([term]) => term.modes); }
+  // #endregion
+
+  // #region Complex properties
+  public get buffer(): TerminalBufferNamespaceProxy { return new TerminalBufferNamespaceProxy(this._page, this); }
+  /**
+   * Exposes somewhat unsafe access to internals for testing things difficult to do with the regular
+   * API
+   */
+  public get core(): TerminalCoreProxy { return new TerminalCoreProxy(this._page, this); }
+  // #endregion
+
+  // #region Proxied methods
+  public async dispose(): Promise<void> { return this.evaluate(([term]) => term.dispose()); }
+  public async reset(): Promise<void> { return this.evaluate(([term]) => term.reset()); }
+  public async clear(): Promise<void> { return this.evaluate(([term]) => term.clear()); }
+  public async focus(): Promise<void> { return this.evaluate(([term]) => term.focus()); }
+  public async blur(): Promise<void> { return this.evaluate(([term]) => term.blur()); }
+  public async hasSelection(): Promise<boolean> { return this.evaluate(([term]) => term.hasSelection()); }
+  public async getSelection(): Promise<string> { return this.evaluate(([term]) => term.getSelection()); }
+  public async getSelectionPosition(): Promise<IBufferRange | undefined> { return this.evaluate(([term]) => term.getSelectionPosition()); }
+  public async selectAll(): Promise<void> { return this.evaluate(([term]) => term.selectAll()); }
+  public async selectLines(start: number, end: number): Promise<void> { return this._page.evaluate(([term, start, end]) => term.selectLines(start, end), [await this.getHandle(), start, end] as const); }
+  public async clearSelection(): Promise<void> { return this.evaluate(([term]) => term.clearSelection()); }
+  public async select(column: number, row: number, length: number): Promise<void> { return this._page.evaluate(([term, column, row, length]) => term.select(column, row, length), [await this.getHandle(), column, row, length] as const); }
+  public async paste(data: string): Promise<void> { return this._page.evaluate(([term, data]) => term.paste(data), [await this.getHandle(), data] as const); }
+  public async refresh(start: number, end: number): Promise<void> { return this._page.evaluate(([term, start, end]) => term.refresh(start, end), [await this.getHandle(), start, end] as const); }
+  public async getOption<T extends keyof ITerminalOptions>(key: T): Promise<ITerminalOptions[T]> { return this._page.evaluate(([term, key]) => term.options[key as T], [await this.getHandle(), key] as const); }
+  public async setOption<T extends keyof ITerminalOptions>(key: T, value: ITerminalOptions[T]): Promise<any> { return this._page.evaluate(([term, key, value]) => term.options[key as T] = (value as ITerminalOptions[T]), [await this.getHandle(), key, value] as const); }
+  public async setOptions(value: Partial<ITerminalOptions>): Promise<any> {
+    return this._page.evaluate(([term, value]) => {
+      term.options = value;
+    }, [await this.getHandle(), value] as const);
+  }
+  public async scrollToTop(): Promise<void> { return this.evaluate(([term]) => term.scrollToTop()); }
+  public async scrollToBottom(): Promise<void> { return this.evaluate(([term]) => term.scrollToBottom()); }
+  public async scrollPages(pageCount: number): Promise<void> { return this._page.evaluate(([term, pageCount]) => term.scrollPages(pageCount), [await this.getHandle(), pageCount] as const); }
+  public async scrollToLine(line: number): Promise<void> { return this._page.evaluate(([term, line]) => term.scrollToLine(line), [await this.getHandle(), line] as const); }
+  public async scrollLines(amount: number): Promise<void> { return this._page.evaluate(([term, amount]) => term.scrollLines(amount), [await this.getHandle(), amount] as const); }
+  public async write(data: string | Uint8Array): Promise<void> {
+    return this._page.evaluate(([term, data]) => {
+      return new Promise(r => term.write(typeof data === 'string' ? data : new Uint8Array(data), r));
+    }, [await this.getHandle(), typeof data === 'string' ? data : Array.from(data)] as const);
+  }
+  public async writeln(data: string | Uint8Array): Promise<void> {
+    return this._page.evaluate(([term, data]) => {
+      return new Promise(r => term.writeln(typeof data === 'string' ? data : new Uint8Array(data), r));
+    }, [await this.getHandle(), typeof data === 'string' ? data : Array.from(data)] as const);
+  }
+  public async resize(cols: number, rows: number): Promise<void> { return this._page.evaluate(([term, cols, rows]) => term.resize(cols, rows), [await this.getHandle(), cols, rows] as const); }
+  public async registerMarker(y?: number | undefined): Promise<IMarker> { return this._page.evaluate(([term, y]) => term.registerMarker(y), [await this.getHandle(), y] as const); }
+  public async registerDecoration(decorationOptions: IDecorationOptions): Promise<IDecoration | undefined> { return this._page.evaluate(([term, decorationOptions]) => term.registerDecoration(decorationOptions), [await this.getHandle(), decorationOptions] as const); }
+  public async clearTextureAtlas(): Promise<void> { return this.evaluate(([term]) => term.clearTextureAtlas()); }
+  // #endregion
+
+  public async evaluate<T>(pageFunction: PageFunction<JSHandle<Terminal>[], T>): Promise<T> {
+    return this._page.evaluate(pageFunction, [await this.getHandle()]);
+  }
+
+  public async evaluateHandle<T>(pageFunction: PageFunction<JSHandle<Terminal>[], T>): Promise<JSHandle<T>> {
+    return this._page.evaluateHandle(pageFunction, [await this.getHandle()]);
+  }
+
+  public async getHandle(): Promise<JSHandle<Terminal>> {
+    // This is async because it must be evaluated each time it is called since term may have changed
+    return this._page.evaluateHandle('window.term');
+  }
+}
+
+class TerminalBufferNamespaceProxy implements PlaywrightApiProxy<IBufferNamespace, never, never, 'active' | 'normal' | 'alternate'> {
+  private _onBufferChange = new EventEmitter<IBuffer>();
+  public readonly onBufferChange = this._onBufferChange.event;
+
+  constructor(
+    private readonly _page: Page,
+    private readonly _proxy: TerminalProxy
+  ) {
+
+  }
+
+  public get active(): TerminalBufferProxy { return new TerminalBufferProxy(this._page, this._proxy, this._proxy.evaluateHandle(([term]) => term.buffer.active)); }
+  public get normal(): TerminalBufferProxy { return new TerminalBufferProxy(this._page, this._proxy, this._proxy.evaluateHandle(([term]) => term.buffer.normal)); }
+  public get alternate(): TerminalBufferProxy { return new TerminalBufferProxy(this._page, this._proxy, this._proxy.evaluateHandle(([term]) => term.buffer.alternate)); }
+}
+
+// TODO: Adopt PlaywrightApiProxy
+class TerminalBufferProxy /* implements EnsureAsyncProperties<IBuffer>*/ {
+  constructor(
+    private readonly _page: Page,
+    private readonly _proxy: TerminalProxy,
+    private readonly _handle: Promise<JSHandle<IBuffer>>
+  ) {
+  }
+
+  public get type(): Promise<'normal' | 'alternate'> { return this.evaluate(([buffer]) => buffer.type); }
+  public get cursorY(): Promise<number> { return this.evaluate(([buffer]) => buffer.cursorY); }
+  public get cursorX(): Promise<number> { return this.evaluate(([buffer]) => buffer.cursorX); }
+  public get viewportY(): Promise<number> { return this.evaluate(([buffer]) => buffer.viewportY); }
+  public get baseY(): Promise<number> { return this.evaluate(([buffer]) => buffer.baseY); }
+  public get length(): Promise<number> { return this.evaluate(([buffer]) => buffer.length); }
+  public async getLine(y: number): Promise<TerminalBufferLine | undefined> {
+    const lineHandle = await this._page.evaluateHandle(([buffer, y]) => buffer.getLine(y), [await this._handle, y] as const);
+    const value = await lineHandle.jsonValue();
+    if (value) {
+      return new TerminalBufferLine(this._page, lineHandle as JSHandle<IBufferLine>);
+    }
+    return undefined;
+  }
+
+  public async evaluate<T>(pageFunction: PageFunction<JSHandle<IBuffer>[], T>): Promise<T> {
+    return this._page.evaluate(pageFunction, [await this._handle]);
+  }
+}
+
+// TODO: Adopt PlaywrightApiProxy
+class TerminalBufferLine {
+  constructor(
+    private readonly _page: Page,
+    private readonly _handle: JSHandle<IBufferLine>
+  ) {
+  }
+
+  public get length(): Promise<number> { return this.evaluate(([bufferLine]) => bufferLine.length); }
+  public get isWrapped(): Promise<boolean> { return this.evaluate(([bufferLine]) => bufferLine.isWrapped); }
+
+  public translateToString(trimRight?: boolean, startColumn?: number, endColumn?: number): Promise<string> {
+    return this._page.evaluate(([bufferLine, trimRight, startColumn, endColumn]) => {
+      return bufferLine.translateToString(trimRight, startColumn, endColumn);
+    }, [this._handle, trimRight, startColumn, endColumn] as const);
+  }
+
+  public async getCell(x: number): Promise<TerminalBufferCell | undefined> {
+    const cellHandle = await this._page.evaluateHandle(([bufferLine, x]) => bufferLine.getCell(x), [this._handle, x] as const);
+    const value = await cellHandle.jsonValue();
+    if (value) {
+      return new TerminalBufferCell(this._page, cellHandle as JSHandle<IBufferCell>);
+    }
+    return undefined;
+  }
+
+  public async evaluate<T>(pageFunction: PageFunction<JSHandle<IBufferLine>[], T>): Promise<T> {
+    return this._page.evaluate(pageFunction, [this._handle]);
+  }
+}
+
+// TODO: Adopt PlaywrightApiProxy
+class TerminalBufferCell {
+  constructor(
+    private readonly _page: Page,
+    private readonly _handle: JSHandle<IBufferCell>
+  ) {
+  }
+
+  public getWidth(): Promise<number> { return this.evaluate(([line]) => line.getWidth()); }
+  public getChars(): Promise<string> { return this.evaluate(([line]) => line.getChars()); }
+
+  public async evaluate<T>(pageFunction: PageFunction<JSHandle<IBufferCell>[], T>): Promise<T> {
+    return this._page.evaluate(pageFunction, [this._handle]);
+  }
+}
+
+class TerminalCoreProxy {
+  constructor(
+    private readonly _page: Page,
+    private readonly _proxy: TerminalProxy
+  ) {
+  }
+
+  public get isDisposed(): Promise<boolean> { return this.evaluate(([core]) => (core as any)._isDisposed); }
+  public get renderDimensions(): Promise<IRenderDimensions> { return this.evaluate(([core]) => ((core as any)._renderService as IRenderService).dimensions); }
+
+  public async triggerBinaryEvent(data: string): Promise<void> {
+    return this._page.evaluate(([core, data]) => core.coreService.triggerBinaryEvent(data), [await this._getCoreHandle(), data] as const);
+  }
+
+
+  private async _getCoreHandle(): Promise<JSHandle<ICoreTerminal>> {
+    return this._proxy.evaluateHandle(([term]) => (term as any)._core as ICoreTerminal);
+  }
+
+  public async evaluate<T>(pageFunction: PageFunction<JSHandle<ICoreTerminal>[], T>): Promise<T> {
+    return this._page.evaluate(pageFunction, [await this._getCoreHandle()]);
+  }
+}
+
+export async function openTerminal(ctx: ITestContext, options: ITerminalOptions | ITerminalInitOnlyOptions = {}, testOptions: any = { loadUnicodeGraphemesAddon: true}): Promise<void> {
+  await ctx.page.evaluate(`
+  if ('term' in window) {
+    try {
+      window.term.dispose();
+    } catch {}
+  }
+  `);
+  // HACK: Tests may have side effects that could cause the terminal not to be removed. This
+  //       assertion catches this case early.
+  strictEqual(await ctx.page.evaluate(`document.querySelector('#terminal-container').children.length`), 0, 'there must be no terminals on the page');
+  await ctx.page.evaluate(`
+    window.term = new Terminal(${JSON.stringify({ allowProposedApi: true, ...options })});
+    window.term.open(document.querySelector('#terminal-container'));
+  `);
+  // See https://github.com/xtermjs/xterm.js/pull/4519#discussion_r1285234453
+  if (testOptions.loadUnicodeGraphemesAddon) {
+    await ctx.page.evaluate(`
+      window.unicode = new UnicodeGraphemesAddon();
+      window.term.loadAddon(window.unicode);
+      window.term.unicode.activeVersion = '15-graphemes';
+    `);
+  }
+  await ctx.page.waitForSelector('.xterm-rows');
+  ctx.termHandle = await ctx.page.evaluateHandle('window.term');
+  await ctx.proxy.initTerm();
+}
+
+
+
+export async function pollFor<T>(page: playwright.Page, evalOrFn: string | (() => Promise<T>), val: T, preFn?: () => Promise<void>, maxDuration?: number, stack?: string): Promise<void> {
+  stack ??= new Error().stack;
+  if (preFn) {
+    await preFn();
+  }
+  const result = typeof evalOrFn === 'string' ? await page.evaluate(evalOrFn) : await evalOrFn();
+
+  if (process.env.DEBUG) {
+    console.log('pollFor result: ', JSON.stringify(result));
+  }
+
+  if (!deepEqual(result, val)) {
+    if (maxDuration === undefined) {
+      maxDuration = 2000;
+    }
+    if (maxDuration <= 0) {
+      deepStrictEqual(result, val, ([
+        `pollFor max duration exceeded.`,
+        (`Last comparison: ` +
+          `${typeof result === 'object' ? JSON.stringify(result) : result} !== ` +
+          `${typeof val === 'object' ? JSON.stringify(val) : val}`),
+        `Stack: ${stack}`
+      ].join('\n')));
+    }
+    return new Promise<void>(r => {
+      setTimeout(() => r(pollFor(page, evalOrFn, val, preFn, maxDuration! - 10, stack)), 10);
+    });
+  }
+}
+
+export async function writeSync(page: playwright.Page, data: string): Promise<void> {
+  await page.evaluate(`
+    window.ready = false;
+    window.term.write('${data}', () => window.ready = true);
+  `);
+  await pollFor(page, 'window.ready', true);
+}
+
+export async function timeout(ms: number): Promise<void> {
+  return new Promise<void>(r => setTimeout(r, ms));
+}
+
+export function getBrowserType(): playwright.BrowserType<playwright.WebKitBrowser> | playwright.BrowserType<playwright.ChromiumBrowser> | playwright.BrowserType<playwright.FirefoxBrowser> {
+  // Default to chromium
+  let browserType: playwright.BrowserType<playwright.WebKitBrowser> | playwright.BrowserType<playwright.ChromiumBrowser> | playwright.BrowserType<playwright.FirefoxBrowser> = playwright['chromium'];
+
+  const index = process.argv.indexOf('--browser');
+  if (index !== -1 && process.argv.length > index + 1 && typeof process.argv[index + 1] === 'string') {
+    const string = process.argv[index + 1];
+    if (string === 'firefox' || string === 'webkit') {
+      browserType = playwright[string];
+    }
+  }
+
+  return browserType;
+}
+
+export function launchBrowser(): Promise<playwright.Browser> {
+  const browserType = getBrowserType();
+  const options: Record<string, unknown> = {
+    headless: process.argv.includes('--headless')
+  };
+
+  const index = process.argv.indexOf('--executablePath');
+  if (index > 0 && process.argv.length > index + 1 && typeof process.argv[index + 1] === 'string') {
+    options.executablePath = process.argv[index + 1];
+  }
+
+  return browserType.launch(options);
+}

test/playwright/playwright.config.ts

@@ -0,0 +1,35 @@
+import { PlaywrightTestConfig } from '@playwright/test';
+
+const config: PlaywrightTestConfig = {
+  testDir: '.',
+  timeout: 10000,
+  projects: [
+    {
+      name: 'Chrome Stable',
+      use: {
+        browserName: 'chromium',
+        channel: 'chrome'
+      }
+    },
+    {
+      name: 'Firefox Stable',
+      use: {
+        browserName: 'firefox'
+      }
+    },
+    {
+      name: 'WebKit',
+      use: {
+        browserName: 'webkit'
+      }
+    }
+  ],
+  reporter: 'list',
+  webServer: {
+    command: 'npm start',
+    port: 3000,
+    timeout: 120000,
+    reuseExistingServer: !process.env.CI
+  }
+};
+export default config;

test/playwright/tsconfig.json

@@ -0,0 +1,41 @@
+{
+  "compilerOptions": {
+    "lib": [
+      "dom",
+      "es6"
+    ],
+    "rootDir": ".",
+    "outDir": "../../out-test/playwright",
+    "types": [
+      "../../node_modules/@types/node"
+    ],
+    "sourceMap": true,
+    "removeComments": true,
+    "pretty": true,
+    "strict": true,
+    "declaration": true,
+    "baseUrl": ".",
+    "paths": {
+      "browser/*": [
+        "../../src/browser/*"
+      ],
+      "common/*": [
+        "../../src/common/*"
+      ]
+    },
+    "target": "es2016",
+    "module": "commonjs",
+  },
+  "include": [
+    "./**/*",
+    "../../typings/xterm.d.ts"
+  ],
+  "references": [
+    {
+      "path": "../../src/browser"
+    },
+    {
+      "path": "../../src/common"
+    }
+  ]
+}

tsconfig.all.json

@@ -6,6 +6,7 @@
     { "path": "./src/headless" },
     { "path": "./test/api" },
     { "path": "./test/benchmark" },
+    { "path": "./test/playwright" },
     { "path": "./addons/xterm-addon-attach" },
     { "path": "./addons/xterm-addon-canvas" },
     { "path": "./addons/xterm-addon-fit" },

yarn.lock

@@ -347,6 +347,16 @@
     "@nodelib/fs.scandir" "2.1.5"
     fastq "^1.6.0"
 
+"@playwright/test@^1.37.1":
+  version "1.37.1"
+  resolved "https://registry.yarnpkg.com/@playwright/test/-/test-1.37.1.tgz#e7f44ae0faf1be52d6360c6bbf689fd0057d9b6f"
+  integrity sha512-bq9zTli3vWJo8S3LwB91U0qDNQDpEXnw7knhxLM0nwDvexQAwx9tO8iKDZSqqneVq+URd/WIoz+BALMqUTgdSg==
+  dependencies:
+    "@types/node" "*"
+    playwright-core "1.37.1"
+  optionalDependencies:
+    fsevents "2.3.2"
+
 "@tootallnate/once@2":
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/@tootallnate/once/-/once-2.0.0.tgz#f544a148d3ab35801c1f633a7441fd87c2e484bf"
@@ -1920,7 +1930,7 @@ fs.realpath@^1.0.0:
   resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
   integrity sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==
 
-fsevents@~2.3.2:
+fsevents@2.3.2, fsevents@~2.3.2:
   version "2.3.2"
   resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.2.tgz#8a526f78b8fdf4623b709e0b975c52c24c02fd1a"
   integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==
@@ -3061,17 +3071,10 @@ pkg-dir@^4.1.0, pkg-dir@^4.2.0:
   dependencies:
     find-up "^4.0.0"
 
-playwright-core@1.36.2:
-  version "1.36.2"
-  resolved "https://registry.yarnpkg.com/playwright-core/-/playwright-core-1.36.2.tgz#32382f2d96764c24c65a86ea336cf79721c2e50e"
-  integrity sha512-sQYZt31dwkqxOrP7xy2ggDfEzUxM1lodjhsQ3NMMv5uGTRDsLxU0e4xf4wwMkF2gplIxf17QMBCodSFgm6bFVQ==
-
-playwright@^1.22.1:
-  version "1.36.2"
-  resolved "https://registry.yarnpkg.com/playwright/-/playwright-1.36.2.tgz#4f25272209a31ad1138d7b9868e0325159f003e3"
-  integrity sha512-4Fmlq3KWsl85Bl4InJw1NC21aeQV0iSZuFvTDcy1F8zVmXmgQRe89GxF8zMSRt/KIS+2tUolak7EXVl9aC+JdA==
-  dependencies:
-    playwright-core "1.36.2"
+playwright-core@1.37.1:
+  version "1.37.1"
+  resolved "https://registry.yarnpkg.com/playwright-core/-/playwright-core-1.37.1.tgz#cb517d52e2e8cb4fa71957639f1cd105d1683126"
+  integrity sha512-17EuQxlSIYCmEMwzMqusJ2ztDgJePjrbttaefgdsiqeLWidjYz9BxXaTaZWxH1J95SHGk6tjE+dwgWILJoUZfA==
 
 prelude-ls@^1.2.1:
   version "1.2.1"