Start @playwright/test migration

.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/[email protected]
+      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,14 +13,21 @@ 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';
 import { WebglAddon } from '../addons/xterm-addon-webgl/out/WebglAddon';
 import { Unicode11Addon } from '../addons/xterm-addon-unicode11/out/Unicode11Addon';
 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';
@@ -42,7 +49,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
@@ -68,7 +75,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 :
@@ -80,7 +87,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>