e2e: add outline for copy as code test & refactor popups/modals/dialogs POMs (#8581)

### Summary
We were previously mixing the responsibilities of popups, modals,
dialogs, and toasts into a single POM, which made it unclear which
methods applied to which UI components. This PR separates them into
dedicated, focused POMs:
* `dialog-modals.ts`
* `dialog-popups.ts`
* `dialog-toasts.ts`

Also, added a basic outline for the `Copy as Code` Data Explorer test.
The test is currently skipped as the feature is still under development.
* `data-explorer/copy-code.test.ts`

### QA Notes
@:console @:web

Running full suite:
https://github.com/posit-dev/positron/actions/runs/16378500737

Author: midleman

test/e2e/infra/index.ts

@@ -12,7 +12,9 @@ export * from './test-teardown.js';
 
 // pages
 export * from '../pages/console';
-export * from '../pages/popups';
+export * from '../pages/dialog-modals';
+export * from '../pages/dialog-toasts';
+export * from '../pages/dialog-popups.js';
 export * from '../pages/variables';
 export * from '../pages/dataExplorer';
 export * from '../pages/sideBar';
@@ -47,6 +49,6 @@ export * from '../pages/hotKeys';
 
 // utils
 export * from '../pages/utils/aws';
-export * from '../pages/utils/contextMenu';
+export * from '../pages/dialog-contextMenu';
 export * from '../pages/utils/vscodeSettings';
 export { getDevElectronPath, getBuildElectronPath, getBuildVersion } from './electron';

test/e2e/infra/workbench.ts

@@ -4,7 +4,9 @@
  *--------------------------------------------------------------------------------------------*/
 
 import { Code } from './code';
-import { Popups } from '../pages/popups';
+import { Modals } from '../pages/dialog-modals';
+import { Toasts } from '../pages/dialog-toasts';
+import { Popups } from '../pages/dialog-popups.js';
 import { Console } from '../pages/console';
 import { Variables } from '../pages/variables';
 import { DataExplorer } from '../pages/dataExplorer';
@@ -49,6 +51,8 @@ export interface Commands {
 
 export class Workbench {
 
+	readonly modals: Modals;
+	readonly toasts: Toasts;
 	readonly popups: Popups;
 	readonly console: Console;
 	readonly variables: Variables;
@@ -90,6 +94,8 @@ export class Workbench {
 
 	constructor(code: Code) {
 		this.hotKeys = new HotKeys(code);
+		this.toasts = new Toasts(code);
+		this.modals = new Modals(code, this.toasts);
 		this.popups = new Popups(code);
 		this.variables = new Variables(code, this.hotKeys);
 		this.dataExplorer = new DataExplorer(code, this);
@@ -112,7 +118,7 @@ export class Workbench {
 		this.notebooksPositron = new PositronNotebooks(code, this.quickInput, this.quickaccess);
 		this.welcome = new Welcome(code);
 		this.clipboard = new Clipboard(code, this.hotKeys);
-		this.terminal = new Terminal(code, this.quickaccess, this.clipboard, this.popups);
+		this.terminal = new Terminal(code, this.quickaccess, this.clipboard);
 		this.viewer = new Viewer(code);
 		this.editor = new Editor(code);
 		this.testExplorer = new TestExplorer(code);

test/e2e/pages/console.ts

@@ -8,7 +8,7 @@ import { Code } from '../infra/code';
 import { QuickInput } from './quickInput';
 import { HotKeys } from './hotKeys.js';
 import { availableRuntimes, SessionRuntimes } from './sessions.js';
-import { ContextMenu } from './utils/contextMenu.js';
+import { ContextMenu } from './dialog-contextMenu.js';
 import { QuickAccess } from './quickaccess.js';
 
 const CONSOLE_INPUT = '.console-input';

test/e2e/pages/dataExplorer.ts

@@ -45,14 +45,20 @@ export class DataExplorer {
 	selectColumnButton: Locator;
 	selectConditionButton: Locator;
 	applyFilterButton: Locator;
+	selectFilterModalValue: (value: string) => Locator;
+	filteringMenu: Locator;
+	menuItemClearFilters: Locator;
 
 	constructor(private code: Code, private workbench: Workbench) {
 		this.clearSortingButton = this.code.driver.page.locator(CLEAR_SORTING_BUTTON);
 		this.clearFilterButton = this.code.driver.page.locator(CLEAR_FILTER_BUTTON);
 		this.addFilterButton = this.code.driver.page.getByRole('button', { name: 'Add Filter' });
 		this.selectColumnButton = this.code.driver.page.getByRole('button', { name: 'Select Column' });
 		this.selectConditionButton = this.code.driver.page.getByRole('button', { name: 'Select Condition' });
+		this.selectFilterModalValue = (value: string) => this.code.driver.page.locator('.positron-modal-popup').getByRole('button', { name: value });
 		this.applyFilterButton = this.code.driver.page.getByRole('button', { name: 'Apply Filter' });
+		this.filteringMenu = this.code.driver.page.getByRole('button', { name: 'Filtering' });
+		this.menuItemClearFilters = this.code.driver.page.getByRole('button', { name: 'Clear Filters' });
 	}
 
 	async clearAllFilters() {
@@ -109,20 +115,23 @@ export class DataExplorer {
 	/*
 	 * Add a filter to the data explorer.  Only works for a single filter at the moment.
 	 */
-	async addFilter(columnName: string, functionText: string, filterValue: string) {
-		await test.step(`Add filter: ${columnName} ${functionText} ${filterValue}`, async () => {
+	async addFilter(columnName: string, condition: string, value?: string) {
+		await test.step(`Add filter: ${columnName} ${condition} ${value}`, async () => {
 			await this.addFilterButton.click();
 
 			// select column
 			await this.selectColumnButton.click();
-			await this.code.driver.page.getByRole('button', { name: columnName }).click();
+			await this.selectFilterModalValue(columnName).click();
 
 			// select condition
 			await this.selectConditionButton.click();
-			await this.code.driver.page.getByRole('button', { name: functionText, exact: true }).click();
+			await this.selectFilterModalValue(condition).click();
 
 			// enter value
-			await this.code.driver.page.getByRole('textbox', { name: 'value' }).fill(filterValue);
+			if (value) {
+				await this.code.driver.page.getByRole('textbox', { name: 'value' }).fill(value);
+			}
+
 			await this.applyFilterButton.click();
 		});
 	}
@@ -285,23 +294,40 @@ export class DataExplorer {
 		});
 	}
 
-	async verifyTableData(expectedData: Array<{ [key: string]: string }>, timeout = 60000) {
+	async verifyTableData(expectedData: Array<{ [key: string]: string | number }>, timeout = 60000) {
 		await test.step('Verify data explorer data', async () => {
 			await expect(async () => {
 				const tableData = await this.getDataExplorerTableData();
-
 				expect(tableData.length).toBe(expectedData.length);
 
 				for (let i = 0; i < expectedData.length; i++) {
 					const row = expectedData[i];
-					for (const [key, value] of Object.entries(row)) {
-						expect(tableData[i][key]).toBe(value);
+					for (const [key, expectedValue] of Object.entries(row)) {
+						const actualValue = tableData[i][key];
+						expect(this.normalize(actualValue)).toBe(this.normalize(expectedValue));
 					}
 				}
 			}).toPass({ timeout });
 		});
 	}
 
+	private normalize(value: unknown): string {
+		const str = String(value).trim().toUpperCase();
+
+		// Handle true missing values only
+		if (value === null || value === undefined || ['NA', 'NAN', 'NULL'].includes(str)) {
+			return '__MISSING__';
+		}
+
+		// If value is numeric (e.g., '25.0'), normalize precision
+		const num = Number(value);
+		if (!isNaN(num)) {
+			return String(num);
+		}
+
+		return String(value).trim();
+	}
+
 	async verifyTableDataLength(expectedLength: number) {
 		await test.step('Verify data explorer table data length', async () => {
 			await expect(async () => {
@@ -394,4 +420,8 @@ export class DataExplorer {
 			await cellLocator.click();
 		});
 	}
+
+	async clickCopyAsCodeButton() {
+		await this.workbench.editorActionBar.clickButton('Copy as Code');
+	}
 }

test/e2e/pages/utils/contextMenu.ts renamed to test/e2e/pages/dialog-contextMenu.ts

@@ -3,7 +3,7 @@
  *  Licensed under the Elastic License 2.0. See LICENSE.txt for license information.
  *--------------------------------------------------------------------------------------------*/
 
-import { Code } from '../../infra/code.js';
+import { Code } from '../infra/code.js';
 import test, { Locator } from '@playwright/test';
 
 export class ContextMenu {

test/e2e/pages/dialog-modals.ts

@@ -0,0 +1,99 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (C) 2025 Posit Software, PBC. All rights reserved.
+ *  Licensed under the Elastic License 2.0. See LICENSE.txt for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+import test, { expect } from '@playwright/test';
+import { Code } from '../infra/code.js';
+import { Toasts } from './dialog-toasts.js';
+
+export class Modals {
+	public modalBox = this.code.driver.page.locator('.positron-modal-dialog-box');
+	public modalTitle = this.modalBox.locator('.simple-title-bar-title');
+	public modalMessage = this.code.driver.page.locator('.dialog-box .message');
+	public okButton = this.modalBox.getByRole('button', { name: 'OK' });
+	public cancelButton = this.modalBox.getByRole('button', { name: 'Cancel' });
+	public button = (label: string | RegExp) => this.modalBox.getByRole('button', { name: label });
+
+	constructor(private readonly code: Code, private toasts: Toasts) { }
+
+	// --- Actions ---
+
+	async clickOk() {
+		await test.step('Click `OK` on modal dialog box', async () => {
+			await this.okButton.click();
+		});
+	}
+
+	async clickCancel() {
+		await test.step('Click `Cancel` on modal dialog box', async () => {
+			await this.cancelButton.click();
+		});
+	}
+
+	async clickButton(label: string | RegExp) {
+		await test.step(`Click button in modal dialog box: ${label}`, async () => {
+			await this.button(label).click();
+		});
+	}
+
+	async installIPyKernel() {
+
+		try {
+			this.code.logger.log('Checking for modal dialog box');
+			// fail fast if the modal is not present
+			await this.expectToBeVisible();
+			await this.clickOk();
+			this.code.logger.log('Installing ipykernel');
+			await this.toasts.expectToBeVisible();
+			await this.toasts.expectNotToBeVisible();
+			this.code.logger.log('Installed ipykernel');
+			// after toast disappears console may not yet be refreshed (still on old interpreter)
+			// TODO: make this smart later, perhaps by getting the console state from the API
+			await this.code.wait(5000);
+		} catch {
+			this.code.logger.log('Did not find modal dialog box for ipykernel install');
+		}
+	}
+
+	/**
+	 * Interacts with the Renv install modal dialog box. This dialog box appears when a user opts to
+	 * use Renv in the New Folder Flow and creates a new folder, but Renv is not installed.
+	 * @param action The action to take on the modal dialog box. Either 'install' or 'cancel'.
+	 */
+	async installRenvModal(action: 'install' | 'cancel') {
+		try {
+			await expect(this.code.driver.page.locator('.simple-title-bar').filter({ hasText: 'Missing R package' })).toBeVisible({ timeout: 30000 });
+
+			if (action === 'install') {
+				this.code.logger.log('Install Renv modal detected: clicking `Install now`');
+				await this.button('Install now').click();
+			} else if (action === 'cancel') {
+				this.code.logger.log('Install Renv modal detected: clicking `Cancel`');
+				await this.button('Cancel').click();
+			}
+		} catch (error) {
+			this.code.logger.log('No Renv modal detected');
+			if (process.env.CI) {
+				throw new Error('Renv modal not detected');
+			}
+		}
+	}
+
+	// --- Verifications ---
+
+	async expectMessageToContain(text: string | RegExp) {
+		await test.step(`Verify modal dialog box contains text: ${text}`, async () => {
+			await expect(this.modalMessage).toContainText(text);
+		});
+	}
+
+	async expectToBeVisible(title?: string) {
+		await test.step(`Verify modal dialog box is visible${title ? ` : ${title}` : ''}`, async () => {
+			await expect(this.modalBox).toBeVisible({ timeout: 30000 });
+			if (title) {
+				await expect(this.modalTitle).toHaveText(title, { timeout: 30000 });
+			}
+		});
+	}
+}

test/e2e/pages/dialog-popups.ts

@@ -0,0 +1,22 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (C) 2025 Posit Software, PBC. All rights reserved.
+ *  Licensed under the Elastic License 2.0. See LICENSE.txt for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+import test from '@playwright/test';
+import { Code } from '../infra/code.js';
+
+export class Popups {
+	public popupBox = this.code.driver.page.locator('.positron-modal-popup');
+	public popupItem = (label: string | RegExp) => this.popupBox.locator('.positron-welcome-menu-item').getByText(label);
+
+	constructor(private readonly code: Code) { }
+
+	// --- Actions ---
+
+	async clickItem(label: string | RegExp) {
+		await test.step(`Click item in popup dialog box: ${label}`, async () => {
+			await this.popupItem(label).click();
+		});
+	}
+}

test/e2e/pages/dialog-toasts.ts

@@ -0,0 +1,90 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (C) 2025 Posit Software, PBC. All rights reserved.
+ *  Licensed under the Elastic License 2.0. See LICENSE.txt for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+import test, { expect } from '@playwright/test';
+import { Code } from '../infra/code.js';
+
+export class Toasts {
+
+	public toastNotification = this.code.driver.page.locator('.notification-toast');
+	public closeButton = this.toastNotification.locator('.codicon-notifications-clear');
+	public optionButton = (button: string) => this.toastNotification.getByRole('button', { name: button });
+
+	constructor(private readonly code: Code) { }
+
+	// --- Actions ---
+
+	async waitForAppear(timeout = 20000) {
+		await this.toastNotification.waitFor({ state: 'attached', timeout });
+	}
+
+	async waitForDisappear(timeout = 20000) {
+		await this.toastNotification.waitFor({ state: 'detached', timeout });
+	}
+
+	async clickButton(button: string) {
+		await test.step(`Click toast button: ${button}`, async () => {
+			await this.optionButton(button).click();
+		});
+	}
+
+	async closeAll() {
+		const count = await this.toastNotification.count();
+		for (let i = 0; i < count; i++) {
+			try {
+				await this.toastNotification.nth(i).hover();
+				await this.closeButton.nth(i).click();
+			} catch {
+				this.code.logger.log(`Toast ${i} already closed`);
+			}
+		}
+	}
+
+	async closeWithText(message: string) {
+		try {
+			const toast = this.toastNotification.filter({ hasText: message });
+			await toast.hover();
+			await this.closeButton.filter({ hasText: message }).click();
+		} catch {
+			this.code.logger.log(`Toast "${message}" not found`);
+		}
+	}
+
+	// --- Verifications ---
+
+	async expectToBeVisible(title?: string | RegExp, timeoutMs = 3000) {
+		await test.step(`Verify toast ${title ? `visible: ${title}` : 'visible'}`, async () => {
+			if (title) {
+				await expect(this.toastNotification.filter({ hasText: title })).toBeVisible({ timeout: timeoutMs });
+			} else {
+				await expect(this.toastNotification).toBeVisible({ timeout: timeoutMs });
+			}
+		});
+	}
+
+	async expectImportSettingsToastToBeVisible(visible = true) {
+		await test.step(`Verify import settings toast is ${visible ? '' : 'NOT'} visible`, async () => {
+			const buttons = [
+				this.toastNotification.getByRole('button', { name: 'Compare settings' }),
+				this.toastNotification.getByRole('button', { name: 'Later' }),
+				this.toastNotification.getByRole('button', { name: "Don't Show Again" }),
+			];
+
+			for (const btn of buttons) {
+				visible ? await expect(btn).toBeVisible() : await expect(btn).not.toBeVisible();
+			}
+		});
+	}
+
+	async expectNotToBeVisible(timeoutMs = 3000) {
+		const end = Date.now() + timeoutMs;
+		while (Date.now() < end) {
+			if (await this.toastNotification.count() > 0) {
+				throw new Error('Toast appeared unexpectedly');
+			}
+			await this.code.driver.page.waitForTimeout(1000);
+		}
+	}
+}