Merge pull request #4735 from Tyriar/playwright

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>