E2E tests: copy plot to clipboard test (#5474)

Simple check of whether plot copy works by checking the clipboard post
click for an image.

Also a fix for shiny test.

### QA Notes

All smoke tests pass.

Author: testlabauto

test/automation/src/index.ts

@@ -54,5 +54,6 @@ export * from './positron/positronExplorer';
 export * from './positron/utils/positronAWSUtils';
 export * from './positron/positronQuickaccess';
 export * from './positron/positronOutline';
+export * from './positron/positronClipboard';
 // --- End Positron ---
 export { getDevElectronPath, getBuildElectronPath, getBuildVersion } from './electron';

test/automation/src/playwrightDriver.ts

@@ -35,8 +35,8 @@ export class PlaywrightDriver {
 
 	constructor(
 		private readonly application: playwright.Browser | playwright.ElectronApplication,
-		private readonly context: playwright.BrowserContext,
-		// --- Start Positron ---
+		// --- Start Positron --
+		readonly context: playwright.BrowserContext,
 		readonly page: playwright.Page,
 		// --- End Positron ---
 		private readonly serverProcess: ChildProcess | undefined,

test/automation/src/positron/positronClipboard.ts

@@ -0,0 +1,30 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (C) 2024 Posit Software, PBC. All rights reserved.
+ *  Licensed under the Elastic License 2.0. See LICENSE.txt for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+import { Code } from '../code';
+
+export class PositronClipboard {
+
+	constructor(private code: Code) { }
+
+	async getClipboardImage(): Promise<Buffer | null> {
+		// Grant permissions to read from clipboard
+		await this.code.driver.context.grantPermissions(['clipboard-read']);
+
+		const clipboardImageBuffer = await this.code.driver.page.evaluate(async () => {
+			const clipboardItems = await navigator.clipboard.read();
+			for (const item of clipboardItems) {
+				if (item.types.includes('image/png')) {
+					const blob = await item.getType('image/png');
+					const arrayBuffer = await blob.arrayBuffer();
+					return Array.from(new Uint8Array(arrayBuffer));
+				}
+			}
+			return null;
+		});
+
+		return clipboardImageBuffer ? Buffer.from(clipboardImageBuffer) : null;
+	}
+}

test/automation/src/positron/positronPlots.ts

@@ -91,4 +91,11 @@ export class PositronPlots {
 	async getCurrentStaticPlotAsBuffer(): Promise<Buffer> {
 		return this.code.driver.getLocator(CURRENT_STATIC_PLOT).screenshot();
 	}
+
+	async copyCurrentPlotToClipboard() {
+		await this.code.driver.page.locator('.codicon-copy').click();
+
+		// wait for clipboard to be populated
+		await this.code.wait(500);
+	}
 }

test/automation/src/workbench.ts

@@ -46,6 +46,7 @@ import { PositronEditor } from './positron/positronEditor';
 import { PositronTestExplorer } from './positron/positronTestExplorer';
 import { PositronQuickAccess } from './positron/positronQuickaccess';
 import { PositronOutline } from './positron/positronOutline';
+import { PositronClipboard } from './positron/positronClipboard';
 // --- End Positron ---
 
 export interface Commands {
@@ -96,6 +97,7 @@ export class Workbench {
 	readonly positronTestExplorer: PositronTestExplorer;
 	readonly positronQuickaccess: PositronQuickAccess;
 	readonly positronOutline: PositronOutline;
+	readonly positronClipboard: PositronClipboard;
 	// --- End Positron ---
 
 	constructor(code: Code) {
@@ -141,6 +143,7 @@ export class Workbench {
 		this.positronTestExplorer = new PositronTestExplorer(code);
 		this.positronQuickaccess = new PositronQuickAccess(this.quickinput, this.quickaccess);
 		this.positronOutline = new PositronOutline(code, this.quickaccess);
+		this.positronClipboard = new PositronClipboard(code);
 		// --- End Positron ---
 	}
 }

test/smoke/src/areas/positron/apps/shiny.test.ts

@@ -31,7 +31,9 @@ test.describe('Shiny Application', {
 		await app.workbench.quickaccess.openFile(join(app.workspacePathOrFolder, 'workspaces', 'shiny-py-example', 'app.py'));
 		await app.workbench.quickaccess.runCommand('shiny.python.runApp');
 		const headerLocator = app.workbench.positronViewer.getViewerLocator('h1');
-		await expect(headerLocator).toHaveText('Restaurant tipping', { timeout: 20000 });
+		await expect(async () => {
+			await expect(headerLocator).toHaveText('Restaurant tipping', { timeout: 20000 });
+		}).toPass({ timeout: 60000 });
 	});
 
 	test('R - Verify Basic Shiny App [C699100]', async function ({ app, r }) {
@@ -40,7 +42,9 @@ runExample("01_hello")`;
 		await app.workbench.positronConsole.pasteCodeToConsole(code);
 		await app.workbench.positronConsole.sendEnterKey();
 		const headerLocator = app.workbench.positronViewer.getViewerLocator('h1');
-		await expect(headerLocator).toHaveText('Hello Shiny!', { timeout: 20000 });
+		await expect(async () => {
+			await expect(headerLocator).toHaveText('Hello Shiny!', { timeout: 20000 });
+		}).toPass({ timeout: 60000 });
 	});
 });
 

test/smoke/src/areas/positron/plots/plots.test.ts

@@ -30,7 +30,7 @@ test.describe('Plots', () => {
 
 		test('Python - Verifies basic plot functionality - Dynamic Plot [C608114]', {
 			tag: ['@pr', '@web']
-		}, async function ({ app, logger }) {
+		}, async function ({ app, logger, headless }) {
 			// modified snippet from https://www.geeksforgeeks.org/python-pandas-dataframe/
 			logger.log('Sending code to console');
 			await app.workbench.positronConsole.executeCode('Python', pythonDynamicPlot, '>>>');
@@ -53,6 +53,13 @@ test.describe('Plots', () => {
 				fail(`Image comparison failed with mismatch percentage: ${data.rawMisMatchPercentage}`);
 			}
 
+			if (!headless) {
+				await app.workbench.positronPlots.copyCurrentPlotToClipboard();
+
+				const clipboardImageBuffer = await app.workbench.positronClipboard.getClipboardImage();
+				expect(clipboardImageBuffer).not.toBeNull();
+			}
+
 			await app.workbench.positronLayouts.enterLayout('fullSizedAuxBar');
 			await app.workbench.positronPlots.clearPlots();
 			await app.workbench.positronLayouts.enterLayout('stacked');
@@ -276,7 +283,7 @@ test.describe('Plots', () => {
 			await interpreter.set('R');
 		});
 
-		test('R - Verifies basic plot functionality [C628633]', { tag: ['@pr', '@web'] }, async function ({ app, logger }) {
+		test('R - Verifies basic plot functionality [C628633]', { tag: ['@pr', '@web'] }, async function ({ app, logger, headless }) {
 			logger.log('Sending code to console');
 			await app.workbench.positronConsole.executeCode('R', rBasicPlot, '>');
 			await app.workbench.positronPlots.waitForCurrentPlot();
@@ -296,6 +303,13 @@ test.describe('Plots', () => {
 				fail(`Image comparison failed with mismatch percentage: ${data.rawMisMatchPercentage}`);
 			}
 
+			if (!headless) {
+				await app.workbench.positronPlots.copyCurrentPlotToClipboard();
+
+				const clipboardImageBuffer = await app.workbench.positronClipboard.getClipboardImage();
+				expect(clipboardImageBuffer).not.toBeNull();
+			}
+
 			await app.workbench.positronLayouts.enterLayout('fullSizedAuxBar');
 			await app.workbench.positronPlots.clearPlots();
 			await app.workbench.positronLayouts.enterLayout('stacked');