test: Add firefox support for playwright pasteInMonaco (#1463)

Doesn't seem to be a single solution that works in all 3 browsers in
headless mode, but between 2 solutions we can cover pasting in all 3
browsers

Author: mattrunyon

tests/console.spec.ts

@@ -17,15 +17,6 @@ test.afterAll(async () => {
 });
 
 test.describe('console input tests', () => {
-  test.beforeEach(async () => {
-    // Find the console input
-    const consoleInput = page.locator('.console-input');
-
-    // Monaco editor doesn't have a native input, so need to just click into it and type on the page
-    // https://github.com/microsoft/playwright/issues/14126
-    await consoleInput.click();
-  });
-
   test('print commands get logged', async () => {
     const message = `Hello ${shortid()}!`;
     const command = `print("${message}")`;

tests/notebook.spec.ts

@@ -1,6 +1,6 @@
 import { test, expect } from '@playwright/test';
-import { pasteInMonaco } from './utils';
 import shortid from 'shortid';
+import { pasteInMonaco } from './utils';
 
 test('test creating a file, saving it, closing it, re-opening it, running it, then deleting it', async ({
   page,

tests/table-operations.spec.ts

@@ -109,7 +109,6 @@ test.beforeEach(async ({ page }) => {
   await page.goto('');
 
   const consoleInput = page.locator('.console-input');
-  await consoleInput.click();
 
   const command = makeTableCommand(undefined, TableTypes.AllTypes);
 
@@ -516,7 +515,6 @@ test('advanced settings', async ({ page }) => {
 
   await test.step('create 2nd table', async () => {
     const consoleInput = page.locator('.console-input');
-    await consoleInput.click();
 
     const command = makeTableCommand(table2Name, TableTypes.AllTypes);
 

tests/table.spec.ts

@@ -1,12 +1,11 @@
 import { test, expect, Page } from '@playwright/test';
-import { makeTableCommand, pasteInMonaco, TableTypes } from './utils';
+import { makeTableCommand, pasteInMonaco } from './utils';
 
 // Run tests serially since they all use the same table
 test.describe.configure({ mode: 'serial' });
 
 async function openSimpleTable(page: Page) {
   const consoleInput = page.locator('.console-input');
-  await consoleInput.click();
 
   const command = makeTableCommand();
 
@@ -42,7 +41,6 @@ test('can open a simple table', async ({ page }) => {
 test('can open a table with column header groups', async ({ page }) => {
   await page.goto('');
   const consoleInput = page.locator('.console-input');
-  await consoleInput.click();
 
   const command = `${makeTableCommand('column_header_group')}
 column_groups = [{ 'name': 'YandZ', 'children': ['y', 'z'] }, { 'name': 'All', 'children': ['x', 'YandZ'], 'color': 'white' }]
@@ -71,7 +69,6 @@ test('can open a table with column header groups and hidden columns', async ({
 }) => {
   await page.goto('');
   const consoleInput = page.locator('.console-input');
-  await consoleInput.click();
 
   const command = `${makeTableCommand('column_header_group')}
 column_groups = [{ 'name': 'YandZ', 'children': ['y', 'z'] }, { 'name': 'All', 'children': ['x', 'YandZ'], 'color': 'white' }]

tests/utils.ts

@@ -1,4 +1,5 @@
 import { Locator, expect, Page } from '@playwright/test';
+import os from 'node:os';
 import shortid from 'shortid';
 
 export enum TableTypes {
@@ -99,18 +100,44 @@ export async function typeInMonaco(
 }
 
 /**
- * Pastes text into a monaco input
+ * Pastes text into a monaco input. The input will have focus after pasting.
  * @param locator Locator to use for monaco editor
  * @param text Text to be pasted
  */
 export async function pasteInMonaco(
   locator: Locator,
   text: string
 ): Promise<void> {
+  const page = locator.page();
+  const isMac = os.platform() === 'darwin';
+  const modifier = isMac ? 'Meta' : 'Control';
+
+  // Create a hidden textarea with the contents to paste
+  const inputId = await page.evaluate(async evalText => {
+    const tempInput = document.createElement('textarea');
+    tempInput.id = 'super-secret-temp-input-id';
+    tempInput.value = evalText;
+    tempInput.style.width = '0';
+    tempInput.style.height = '0';
+    document.body.appendChild(tempInput);
+    tempInput.select();
+    return tempInput.id;
+  }, text);
+
+  // Copy the contents of the textarea which was selected above
+  await page.keyboard.press(`${modifier}+C`);
+
+  // Remove the textarea
+  await page.evaluate(id => {
+    document.getElementById(id)?.remove();
+  }, inputId);
+
+  // Focus monaco
+  await locator.click();
+
   const browserName = locator.page().context().browser()?.browserType().name();
-  if (browserName === 'firefox') {
-    await typeInMonaco(locator, text);
-  } else {
+  if (browserName === 'webkit') {
+    // Webkit doesn't seem to paste w/ the keyboard shortcut in headless mode
     await locator.locator('textarea').evaluate(async (element, evalText) => {
       const clipboardData = new DataTransfer();
       clipboardData.setData('text/plain', evalText);
@@ -119,6 +146,13 @@ export async function pasteInMonaco(
       });
       element.dispatchEvent(clipboardEvent);
     }, text);
+  } else {
+    await page.keyboard.press(`${modifier}+V`);
+  }
+
+  if (text.length > 0) {
+    // Sanity check the paste happened
+    await expect(locator.locator('textarea')).not.toBeEmpty();
   }
 }