Merge pull request #2712 from jmbockhorst/playwright

Use playwright instead of puppeteer
xtermjs · Feb 15, 2020 · 708c6bd · 708c6bd
2 parents 5f0217c + c73adf0
commit 708c6bd
Show file tree

Hide file tree

Showing 19 changed files with 464 additions and 316 deletions.
diff --git a/addons/xterm-addon-attach/src/AttachAddon.api.ts b/addons/xterm-addon-attach/src/AttachAddon.api.ts
@@ -3,39 +3,35 @@
  * @license MIT
  */
 
-import * as puppeteer from 'puppeteer';
 import WebSocket = require('ws');
-import { openTerminal, pollFor } from '../../../out-test/api/TestUtils';
+import { openTerminal, pollFor, getBrowserType } from '../../../out-test/api/TestUtils';
+import { Browser, Page } from 'playwright-core';
 
 const APP = 'http://127.0.0.1:3000/test';
 
-let browser: puppeteer.Browser;
-let page: puppeteer.Page;
+let browser: Browser;
+let page: Page;
 const width = 800;
 const height = 600;
 
 describe('AttachAddon', () => {
   before(async function(): Promise<any> {
-    this.timeout(20000);
-    browser = await puppeteer.launch({
+    const browserType = getBrowserType();
+    browser = await browserType.launch({
       headless: process.argv.indexOf('--headless') !== -1,
       args: [`--window-size=${width},${height}`, `--no-sandbox`]
     });
-    page = (await browser.pages())[0];
-    await page.setViewport({ width, height });
+    page = await (await browser.newContext()).newPage();
+    await page.setViewportSize({ width, height });
   });
 
   after(async () => {
     await browser.close();
   });
 
-  beforeEach(async function(): Promise<any> {
-    this.timeout(20000);
-    await page.goto(APP);
-  });
+  beforeEach(async () => await page.goto(APP));
 
   it('string', async function(): Promise<any> {
-    this.timeout(20000);
     await openTerminal(page, { rendererType: 'dom' });
     const port = 8080;
     const server = new WebSocket.Server({ port });
@@ -46,7 +42,6 @@ describe('AttachAddon', () => {
   });
 
   it('utf8', async function(): Promise<any> {
-    this.timeout(20000);
     await openTerminal(page, { rendererType: 'dom' });
     const port = 8080;
     const server = new WebSocket.Server({ port });

diff --git a/addons/xterm-addon-fit/src/FitAddon.api.ts b/addons/xterm-addon-fit/src/FitAddon.api.ts
@@ -3,28 +3,34 @@
  * @license MIT
  */
 
-import * as puppeteer from 'puppeteer';
 import { assert } from 'chai';
-import { openTerminal } from '../../../out-test/api/TestUtils';
+import { openTerminal, getBrowserType } from '../../../out-test/api/TestUtils';
+import { Browser, Page } from 'playwright-core';
 
 const APP = 'http://127.0.0.1:3000/test';
 
-let browser: puppeteer.Browser;
-let page: puppeteer.Page;
+let browser: Browser;
+let page: Page;
 const width = 1024;
 const height = 768;
 
+let isFirefox = false;
+
 describe('FitAddon', () => {
   before(async function(): Promise<any> {
-    this.timeout(20000);
-    browser = await puppeteer.launch({
+    const browserType = getBrowserType();
+    browser = await browserType.launch({
       headless: process.argv.indexOf('--headless') !== -1,
       args: [`--window-size=${width},${height}`, `--no-sandbox`]
     });
-    page = (await browser.pages())[0];
-    await page.setViewport({ width, height });
+    page = await (await browser.newContext()).newPage();
+    await page.setViewportSize({ width, height });
     await page.goto(APP);
     await openTerminal(page);
+    // This is used to do conditional assertions since cell height is 1 pixel higher with the
+    // default font on Firefox. Minor differences in font rendering/sizing is expected so this is
+    // fine.
+    isFirefox = await page.evaluate(`navigator.userAgent.toLowerCase().indexOf('firefox') > -1`);
   });
 
   after(async () => {
@@ -45,15 +51,15 @@ describe('FitAddon', () => {
       await loadFit();
       assert.deepEqual(await page.evaluate(`window.fit.proposeDimensions()`), {
         cols: 87,
-        rows: 26
+        rows: isFirefox ? 28 : 26
       });
     });
 
     it('width', async function(): Promise<any> {
       await loadFit(1008);
       assert.deepEqual(await page.evaluate(`window.fit.proposeDimensions()`), {
         cols: 110,
-        rows: 26
+        rows: isFirefox ? 28 : 26
       });
     });
 
@@ -75,14 +81,14 @@ describe('FitAddon', () => {
       await loadFit();
       await page.evaluate(`window.fit.fit()`);
       assert.equal(await page.evaluate(`window.term.cols`), 87);
-      assert.equal(await page.evaluate(`window.term.rows`), 26);
+      assert.equal(await page.evaluate(`window.term.rows`), isFirefox ? 28 : 26);
     });
 
     it('width', async function(): Promise<any> {
       await loadFit(1008);
       await page.evaluate(`window.fit.fit()`);
       assert.equal(await page.evaluate(`window.term.cols`), 110);
-      assert.equal(await page.evaluate(`window.term.rows`), 26);
+      assert.equal(await page.evaluate(`window.term.rows`), isFirefox ? 28 : 26);
     });
 
     it('small', async function(): Promise<any> {

diff --git a/addons/xterm-addon-search/src/SearchAddon.api.ts b/addons/xterm-addon-search/src/SearchAddon.api.ts
@@ -3,29 +3,28 @@
  * @license MIT
  */
 
-import * as puppeteer from 'puppeteer';
 import { assert } from 'chai';
 import { readFile } from 'fs';
 import { resolve } from 'path';
-import { openTerminal, writeSync } from '../../../out-test/api/TestUtils';
+import { openTerminal, writeSync, getBrowserType } from '../../../out-test/api/TestUtils';
+import { Browser, Page } from 'playwright-core';
 
 const APP = 'http://127.0.0.1:3000/test';
 
-let browser: puppeteer.Browser;
-let page: puppeteer.Page;
+let browser: Browser;
+let page: Page;
 const width = 800;
 const height = 600;
 
 describe('Search Tests', function(): void {
-  this.timeout(20000);
-
   before(async function(): Promise<any> {
-    browser = await puppeteer.launch({
+    const browserType = getBrowserType();
+    browser = await browserType.launch({
       headless: process.argv.indexOf('--headless') !== -1,
       args: [`--window-size=${width},${height}`, `--no-sandbox`]
     });
-    page = (await browser.pages())[0];
-    await page.setViewport({ width, height });
+    page = await (await browser.newContext()).newPage();
+    await page.setViewportSize({ width, height });
     await page.goto(APP);
     await openTerminal(page);
     await page.evaluate(`window.search = new SearchAddon();`);

diff --git a/addons/xterm-addon-serialize/src/SerializeAddon.api.ts b/addons/xterm-addon-serialize/src/SerializeAddon.api.ts
@@ -3,25 +3,26 @@
  * @license MIT
  */
 
-import * as puppeteer from 'puppeteer';
 import { assert } from 'chai';
-import { openTerminal, writeSync } from '../../../out-test/api/TestUtils';
+import { openTerminal, writeSync, getBrowserType } from '../../../out-test/api/TestUtils';
+import { Browser, Page } from 'playwright-core';
 
 const APP = 'http://127.0.0.1:3000/test';
 
-let browser: puppeteer.Browser;
-let page: puppeteer.Page;
+let browser: Browser;
+let page: Page;
 const width = 800;
 const height = 600;
 
 describe('SerializeAddon', () => {
-  before(async function (): Promise<any> {
-    browser = await puppeteer.launch({
+  before(async function(): Promise<any> {
+    const browserType = getBrowserType();
+    browser = await browserType.launch({
       headless: process.argv.indexOf('--headless') !== -1,
       args: [`--window-size=${width},${height}`]
     });
-    page = (await browser.pages())[0];
-    await page.setViewport({ width, height });
+    page = await (await browser.newContext()).newPage();
+    await page.setViewportSize({ width, height });
     await page.goto(APP);
     await openTerminal(page, { rows: 10, cols: 10, rendererType: 'dom' });
     await page.evaluate(`
@@ -33,13 +34,13 @@ describe('SerializeAddon', () => {
   after(async () => await browser.close());
   beforeEach(async () => await page.evaluate(`window.term.reset()`));
 
-  it('empty content', async function (): Promise<any> {
+  it('empty content', async function(): Promise<any> {
     const rows = 10;
     const cols = 10;
     assert.equal(await page.evaluate(`serializeAddon.serialize();`), '');
   });
 
-  it('trim last empty lines', async function (): Promise<any> {
+  it('trim last empty lines', async function(): Promise<any> {
     const cols = 10;
     const lines = [
       '',
@@ -58,7 +59,7 @@ describe('SerializeAddon', () => {
     assert.equal(await page.evaluate(`serializeAddon.serialize();`), lines.slice(0, 8).join('\r\n'));
   });
 
-  it('digits content', async function (): Promise<any> {
+  it('digits content', async function(): Promise<any> {
     const rows = 10;
     const cols = 10;
     const digitsLine = digitsString(cols);
@@ -67,7 +68,7 @@ describe('SerializeAddon', () => {
     assert.equal(await page.evaluate(`serializeAddon.serialize();`), lines.join('\r\n'));
   });
 
-  it('serialize half rows of content', async function (): Promise<any> {
+  it('serialize half rows of content', async function(): Promise<any> {
     const rows = 10;
     const halfRows = rows >> 1;
     const cols = 10;
@@ -76,15 +77,15 @@ describe('SerializeAddon', () => {
     assert.equal(await page.evaluate(`serializeAddon.serialize(${halfRows});`), lines.slice(halfRows, 2 * halfRows).join('\r\n'));
   });
 
-  it('serialize 0 rows of content', async function (): Promise<any> {
+  it('serialize 0 rows of content', async function(): Promise<any> {
     const rows = 10;
     const cols = 10;
     const lines = newArray<string>((index: number) => digitsString(cols, index), rows);
     await writeSync(page, lines.join('\\r\\n'));
     assert.equal(await page.evaluate(`serializeAddon.serialize(0);`), '');
   });
 
-  it('serialize all rows of content with color16', async function (): Promise<any> {
+  it('serialize all rows of content with color16', async function(): Promise<any> {
     const cols = 10;
     const color16 = [
       30, 31, 32, 33, 34, 35, 36, 37, // Set foreground color
@@ -101,7 +102,7 @@ describe('SerializeAddon', () => {
     assert.equal(await page.evaluate(`serializeAddon.serialize();`), lines.join('\r\n'));
   });
 
-  it('serialize all rows of content with fg/bg flags', async function (): Promise<any> {
+  it('serialize all rows of content with fg/bg flags', async function(): Promise<any> {
     const cols = 10;
     const line = '+'.repeat(cols);
     const lines: string[] = [
@@ -122,7 +123,7 @@ describe('SerializeAddon', () => {
     assert.equal(await page.evaluate(`serializeAddon.serialize();`), lines.join('\r\n'));
   });
 
-  it('serialize all rows of content with color256', async function (): Promise<any> {
+  it('serialize all rows of content with color256', async function(): Promise<any> {
     const rows = 32;
     const cols = 10;
     const lines = newArray<string>(
@@ -133,7 +134,7 @@ describe('SerializeAddon', () => {
     assert.equal(await page.evaluate(`serializeAddon.serialize();`), lines.join('\r\n'));
   });
 
-  it('serialize all rows of content with color16 and style separately', async function (): Promise<any> {
+  it('serialize all rows of content with color16 and style separately', async function(): Promise<any> {
     const cols = 10;
     const line = '+'.repeat(cols);
     const lines: string[] = [
@@ -152,7 +153,7 @@ describe('SerializeAddon', () => {
     assert.equal(await page.evaluate(`serializeAddon.serialize();`), lines.join('\r\n'));
   });
 
-  it('serialize all rows of content with color16 and style together', async function (): Promise<any> {
+  it('serialize all rows of content with color16 and style together', async function(): Promise<any> {
     const cols = 10;
     const line = '+'.repeat(cols);
     const lines: string[] = [
@@ -174,7 +175,7 @@ describe('SerializeAddon', () => {
     assert.equal(await page.evaluate(`serializeAddon.serialize();`), lines.join('\r\n'));
   });
 
-  it('serialize all rows of content with color256 and style separately', async function (): Promise<any> {
+  it('serialize all rows of content with color256 and style separately', async function(): Promise<any> {
     const cols = 10;
     const line = '+'.repeat(cols);
     const lines: string[] = [
@@ -193,7 +194,7 @@ describe('SerializeAddon', () => {
     assert.equal(await page.evaluate(`serializeAddon.serialize();`), lines.join('\r\n'));
   });
 
-  it('serialize all rows of content with color256 and style together', async function (): Promise<any> {
+  it('serialize all rows of content with color256 and style together', async function(): Promise<any> {
     const cols = 10;
     const line = '+'.repeat(cols);
     const lines: string[] = [
@@ -215,7 +216,7 @@ describe('SerializeAddon', () => {
     assert.equal(await page.evaluate(`serializeAddon.serialize();`), lines.join('\r\n'));
   });
 
-  it('serialize all rows of content with colorRGB and style separately', async function (): Promise<any> {
+  it('serialize all rows of content with colorRGB and style separately', async function(): Promise<any> {
     const cols = 10;
     const line = '+'.repeat(cols);
     const lines: string[] = [
@@ -234,7 +235,7 @@ describe('SerializeAddon', () => {
     assert.equal(await page.evaluate(`serializeAddon.serialize();`), lines.join('\r\n'));
   });
 
-  it('serialize all rows of content with colorRGB and style together', async function (): Promise<any> {
+  it('serialize all rows of content with colorRGB and style together', async function(): Promise<any> {
     const cols = 10;
     const line = '+'.repeat(cols);
     const lines: string[] = [

diff --git a/addons/xterm-addon-unicode11/src/Unicode11Addon.api.ts b/addons/xterm-addon-unicode11/src/Unicode11Addon.api.ts
@@ -3,34 +3,33 @@
  * @license MIT
  */
 
-import * as puppeteer from 'puppeteer';
 import { assert } from 'chai';
-import { openTerminal } from '../../../out-test/api/TestUtils';
+import { openTerminal, getBrowserType } from '../../../out-test/api/TestUtils';
+import { Browser, Page } from 'playwright-core';
 
 const APP = 'http://127.0.0.1:3000/test';
 
-let browser: puppeteer.Browser;
-let page: puppeteer.Page;
+let browser: Browser;
+let page: Page;
 const width = 800;
 const height = 600;
 
 describe('Unicode11Addon', () => {
   before(async function(): Promise<any> {
-    this.timeout(20000);
-    browser = await puppeteer.launch({
+    const browserType = getBrowserType();
+    browser = await browserType.launch({
       headless: process.argv.indexOf('--headless') !== -1,
       args: [`--window-size=${width},${height}`, `--no-sandbox`]
     });
-    page = (await browser.pages())[0];
-    await page.setViewport({ width, height });
+    page = await (await browser.newContext()).newPage();
+    await page.setViewportSize({ width, height });
   });
 
   after(async () => {
     await browser.close();
   });
 
   beforeEach(async function(): Promise<any> {
-    this.timeout(20000);
     await page.goto(APP);
     await openTerminal(page);
   });