Use new Fluent-based Resource Tree for all environments (#1841)

Co-authored-by: Laurent Nguyen <laurent.nguyen@microsoft.com>
2025-12-18 16:31:31 +00:00 · 2024-05-29 09:56:27 -07:00
parent cebf044803
commit 98c5fe65e6
38 changed files with 5866 additions and 1333 deletions
--- a/test/cassandra/container.spec.ts
+++ b/test/cassandra/container.spec.ts
@@ -1,6 +1,14 @@
 import { jest } from "@jest/globals";
 import "expect-playwright";
-import { generateUniqueName, getAzureCLICredentialsToken } from "../utils/shared";
+import {
+  AccountType,
+  generateUniqueName,
+  getPanelSelector,
+  getTestExplorerUrl,
+  getTreeMenuItemSelector,
+  getTreeNodeSelector,
+  openContextMenu,
+} from "../utils/shared";
 import { waitForExplorer } from "../utils/waitForExplorer";
 jest.setTimeout(120000);

@@ -8,30 +16,42 @@ test("Cassandra keyspace and table CRUD", async () => {
  const keyspaceId = generateUniqueName("keyspace");
  const tableId = generateUniqueName("table");

-  // We can't retrieve AZ CLI credentials from the browser so we get them here.
-  const token = await getAzureCLICredentialsToken();
  page.setDefaultTimeout(50000);

-  await page.goto(`https://localhost:1234/testExplorer.html?accountName=portal-cassandra-runner&token=${token}`);
+  const url = await getTestExplorerUrl(AccountType.Cassandra);
+  await page.goto(url);
  await page.waitForSelector("iframe");
  const explorer = await waitForExplorer();

  await explorer.click('[data-test="New Table"]');
+
+  await explorer.waitForSelector(getPanelSelector("Add Table"));
  await explorer.click('[aria-label="Keyspace id"]');
  await explorer.fill('[aria-label="Keyspace id"]', keyspaceId);
  await explorer.click('[aria-label="addCollection-table Id Create table"]');
  await explorer.fill('[aria-label="addCollection-table Id Create table"]', tableId);
+  await explorer.fill('[aria-label="Table max RU/s"]', "1000");
  await explorer.click("#sidePanelOkButton");
-  await explorer.click(`.nodeItem >> text=${keyspaceId}`);
-  await explorer.click(`[data-test="${tableId}"] [aria-label="More options"]`);
-  await explorer.click('button[role="menuitem"]:has-text("Delete Table")');
+  await explorer.waitForSelector(getPanelSelector("Add Table"), { state: "detached" });
+
+  await explorer.click(getTreeNodeSelector(`DATA/${keyspaceId}`));
+  await openContextMenu(explorer, `DATA/${keyspaceId}/${tableId}`);
+  await explorer.click(getTreeMenuItemSelector(`DATA/${keyspaceId}/${tableId}`, "Delete Table"));
+
+  await explorer.waitForSelector(getPanelSelector("Delete Table"));
  await explorer.fill('text=* Confirm by typing the table id >> input[type="text"]', tableId);
  await explorer.click('[aria-label="OK"]');
-  await explorer.click(`[data-test="${keyspaceId}"] [aria-label="More options"]`);
-  await explorer.click('button[role="menuitem"]:has-text("Delete Keyspace")');
+  await explorer.waitForSelector(getPanelSelector("Delete Table"), { state: "detached" });
+
+  await openContextMenu(explorer, `DATA/${keyspaceId}`);
+  await explorer.click(getTreeMenuItemSelector(`DATA/${keyspaceId}`, "Delete Keyspace"));
+
+  await explorer.waitForSelector(getPanelSelector("Delete Keyspace"));
  await explorer.click('text=* Confirm by typing the database id >> input[type="text"]');
  await explorer.fill('text=* Confirm by typing the database id >> input[type="text"]', keyspaceId);
  await explorer.click("#sidePanelOkButton");
+  await explorer.waitForSelector(getPanelSelector("Delete Keyspace"), { state: "detached" });
+
  await expect(explorer).not.toHaveText(".dataResourceTree", keyspaceId);
  await expect(explorer).not.toHaveText(".dataResourceTree", tableId);
 });
--- a/test/graph/container.spec.ts
+++ b/test/graph/container.spec.ts
@@ -1,6 +1,14 @@
 import { jest } from "@jest/globals";
 import "expect-playwright";
-import { generateDatabaseNameWithTimestamp, generateUniqueName, getAzureCLICredentialsToken } from "../utils/shared";
+import {
+  generateDatabaseNameWithTimestamp,
+  generateUniqueName,
+  getAzureCLICredentialsToken,
+  getPanelSelector,
+  getTreeMenuItemSelector,
+  getTreeNodeSelector,
+  openContextMenu,
+} from "../utils/shared";
 import { waitForExplorer } from "../utils/waitForExplorer";
 jest.setTimeout(240000);

@@ -17,22 +25,34 @@ test("Graph CRUD", async () => {

  // Create new database and graph
  await explorer.click('[data-test="New Graph"]');
+
+  await explorer.waitForSelector(getPanelSelector("New Graph"));
  await explorer.fill('[aria-label="New database id, Type a new database id"]', databaseId);
  await explorer.fill('[aria-label="Graph id, Example Graph1"]', containerId);
  await explorer.fill('[aria-label="Partition key"]', "/pk");
  await explorer.click("#sidePanelOkButton");
-  await explorer.click(`.nodeItem >> text=${databaseId}`);
-  await explorer.click(`.nodeItem >> text=${containerId}`);
+  await explorer.waitForSelector(getPanelSelector("New Graph"), { state: "detached" });
+
  // Delete database and graph
-  await explorer.click(`[data-test="${containerId}"] [aria-label="More options"]`);
-  await explorer.click('button[role="menuitem"]:has-text("Delete Graph")');
+
+  await explorer.click(getTreeNodeSelector(`DATA/${databaseId}`));
+  await openContextMenu(explorer, `DATA/${databaseId}/${containerId}`);
+  await explorer.click(getTreeMenuItemSelector(`DATA/${databaseId}/${containerId}`, "Delete Graph"));
+
+  await explorer.waitForSelector(getPanelSelector("Delete Graph"));
  await explorer.fill('text=* Confirm by typing the graph id >> input[type="text"]', containerId);
  await explorer.click('[aria-label="OK"]');
-  await explorer.click(`[data-test="${databaseId}"] [aria-label="More options"]`);
-  await explorer.click('button[role="menuitem"]:has-text("Delete Database")');
+  await explorer.waitForSelector(getPanelSelector("Delete Graph"), { state: "detached" });
+
+  await openContextMenu(explorer, `DATA/${databaseId}`);
+  await explorer.click(getTreeMenuItemSelector(`DATA/${databaseId}`, "Delete Database"));
+
+  await explorer.waitForSelector(getPanelSelector("Delete Database"));
  await explorer.click('text=* Confirm by typing the database id >> input[type="text"]');
  await explorer.fill('text=* Confirm by typing the database id >> input[type="text"]', databaseId);
  await explorer.click("#sidePanelOkButton");
+  await explorer.waitForSelector(getPanelSelector("Delete Database"), { state: "detached" });
+
  await expect(explorer).not.toHaveText(".dataResourceTree", databaseId);
  await expect(explorer).not.toHaveText(".dataResourceTree", containerId);
 });
--- a/test/mongo/container.spec.ts
+++ b/test/mongo/container.spec.ts
@@ -1,6 +1,15 @@
 import { jest } from "@jest/globals";
 import "expect-playwright";
-import { generateDatabaseNameWithTimestamp, generateUniqueName, getAzureCLICredentialsToken } from "../utils/shared";
+import {
+  AccountType,
+  generateDatabaseNameWithTimestamp,
+  generateUniqueName,
+  getPanelSelector,
+  getTestExplorerUrl,
+  getTreeMenuItemSelector,
+  getTreeNodeSelector,
+  openContextMenu,
+} from "../utils/shared";
 import { waitForExplorer } from "../utils/waitForExplorer";
 jest.setTimeout(240000);

@@ -8,42 +17,56 @@ test("Mongo CRUD", async () => {
  const databaseId = generateDatabaseNameWithTimestamp();
  const containerId = generateUniqueName("container");

-  // We can't retrieve AZ CLI credentials from the browser so we get them here.
-  const token = await getAzureCLICredentialsToken();
  page.setDefaultTimeout(50000);

-  await page.goto(`https://localhost:1234/testExplorer.html?accountName=portal-mongo-runner&token=${token}`);
+  const url = await getTestExplorerUrl(AccountType.Mongo);
+  await page.goto(url);
  const explorer = await waitForExplorer();

  // Create new database and collection
  await explorer.click('[data-test="New Collection"]');
+
+  await explorer.waitForSelector(getPanelSelector("New Collection"));
  await explorer.fill('[aria-label="New database id, Type a new database id"]', databaseId);
  await explorer.fill('[aria-label="Collection id, Example Collection1"]', containerId);
  await explorer.fill('[aria-label="Shard key"]', "pk");
  await explorer.click("#sidePanelOkButton");
-  await explorer.click(`.nodeItem >> text=${databaseId}`);
-  await explorer.click(`.nodeItem >> text=${containerId}`);
+  await explorer.waitForSelector(getPanelSelector("New Collection"), { state: "detached" });
+
+  await explorer.click(getTreeNodeSelector(`DATA/${databaseId}`));
+  await explorer.click(getTreeNodeSelector(`DATA/${databaseId}/${containerId}`));
+
  // Create indexing policy
-  await explorer.click(".nodeItem >> text=Settings");
+  await explorer.click(getTreeNodeSelector(`DATA/${databaseId}/${containerId}/Settings`));
  await explorer.click('button[role="tab"]:has-text("Indexing Policy")');
  await explorer.click('[aria-label="Index Field Name 0"]');
  await explorer.fill('[aria-label="Index Field Name 0"]', "foo");
  await explorer.click("text=Select an index type");
  await explorer.click('button[role="option"]:has-text("Single Field")');
  await explorer.click('[data-test="Save"]');
+
  // Remove indexing policy
  await explorer.click('[aria-label="Delete index Button"]');
  await explorer.click('[data-test="Save"]');
+
  // Delete database and collection
-  await explorer.click(`[data-test="${containerId}"] [aria-label="More options"]`);
-  await explorer.click('button[role="menuitem"]:has-text("Delete Collection")');
+  await openContextMenu(explorer, `DATA/${databaseId}/${containerId}`);
+  await explorer.click(getTreeMenuItemSelector(`DATA/${databaseId}/${containerId}`, "Delete Collection"));
+
+  await explorer.waitForSelector(getPanelSelector("Delete Collection"));
  await explorer.fill('text=* Confirm by typing the collection id >> input[type="text"]', containerId);
  await explorer.click('[aria-label="OK"]');
-  await explorer.click(`[data-test="${databaseId}"] [aria-label="More options"]`);
-  await explorer.click('button[role="menuitem"]:has-text("Delete Database")');
+  await explorer.waitForSelector(getPanelSelector("Delete Collection"), { state: "detached" });
+
+  await openContextMenu(explorer, `DATA/${databaseId}`);
+  await explorer.click(getTreeMenuItemSelector(`DATA/${databaseId}`, "Delete Database"));
+
+  await explorer.waitForSelector(getPanelSelector("Delete Database"));
  await explorer.click('text=* Confirm by typing the database id >> input[type="text"]');
  await explorer.fill('text=* Confirm by typing the database id >> input[type="text"]', databaseId);
  await explorer.click("#sidePanelOkButton");
+  await explorer.waitForSelector(getPanelSelector("Delete Database"), { state: "detached" });
+
  await expect(explorer).not.toHaveText(".dataResourceTree", databaseId);
  await expect(explorer).not.toHaveText(".dataResourceTree", containerId);
 });
--- a/test/mongo/container32.spec.ts
+++ b/test/mongo/container32.spec.ts
@@ -1,6 +1,15 @@
 import { jest } from "@jest/globals";
 import "expect-playwright";
-import { generateDatabaseNameWithTimestamp, generateUniqueName, getAzureCLICredentialsToken } from "../utils/shared";
+import {
+  AccountType,
+  generateDatabaseNameWithTimestamp,
+  generateUniqueName,
+  getPanelSelector,
+  getTestExplorerUrl,
+  getTreeMenuItemSelector,
+  getTreeNodeSelector,
+  openContextMenu,
+} from "../utils/shared";
 import { waitForExplorer } from "../utils/waitForExplorer";
 jest.setTimeout(240000);

@@ -8,31 +17,43 @@ test("Mongo CRUD", async () => {
  const databaseId = generateDatabaseNameWithTimestamp();
  const containerId = generateUniqueName("container");

-  // We can't retrieve AZ CLI credentials from the browser so we get them here.
-  const token = await getAzureCLICredentialsToken();
  page.setDefaultTimeout(50000);

-  await page.goto(`https://localhost:1234/testExplorer.html?accountName=portal-mongo32-runner&token=${token}`);
+  const url = await getTestExplorerUrl(AccountType.Mongo32);
+  await page.goto(url);
  const explorer = await waitForExplorer();

  // Create new database and collection
  await explorer.click('[data-test="New Collection"]');
+
+  await explorer.waitForSelector(getPanelSelector("New Collection"));
  await explorer.fill('[aria-label="New database id, Type a new database id"]', databaseId);
  await explorer.fill('[aria-label="Collection id, Example Collection1"]', containerId);
  await explorer.fill('[aria-label="Shard key"]', "pk");
  await explorer.click("#sidePanelOkButton");
-  explorer.click(`.nodeItem >> text=${databaseId}`);
-  explorer.click(`.nodeItem >> text=${containerId}`);
+  await explorer.waitForSelector(getPanelSelector("New Collection"), { state: "detached" });
+
+  await explorer.click(getTreeNodeSelector(`DATA/${databaseId}`));
+  await explorer.click(getTreeNodeSelector(`DATA/${databaseId}/${containerId}`));
+
  // Delete database and collection
-  explorer.click(`[data-test="${containerId}"] [aria-label="More options"]`);
-  explorer.click('button[role="menuitem"]:has-text("Delete Collection")');
+  await openContextMenu(explorer, `DATA/${databaseId}/${containerId}`);
+  await explorer.click(getTreeMenuItemSelector(`DATA/${databaseId}/${containerId}`, "Delete Collection"));
+
+  await explorer.waitForSelector(getPanelSelector("Delete Collection"));
  await explorer.fill('text=* Confirm by typing the collection id >> input[type="text"]', containerId);
  await explorer.click('[aria-label="OK"]');
-  await explorer.click(`[data-test="${databaseId}"] [aria-label="More options"]`);
-  await explorer.click('button[role="menuitem"]:has-text("Delete Database")');
+  await explorer.waitForSelector(getPanelSelector("Delete Collection"), { state: "detached" });
+
+  await openContextMenu(explorer, `DATA/${databaseId}`);
+  await explorer.click(getTreeMenuItemSelector(`DATA/${databaseId}`, "Delete Database"));
+
+  await explorer.waitForSelector(getPanelSelector("Delete Database"));
  await explorer.click('text=* Confirm by typing the database id >> input[type="text"]');
  await explorer.fill('text=* Confirm by typing the database id >> input[type="text"]', databaseId);
  await explorer.click("#sidePanelOkButton");
+  await explorer.waitForSelector(getPanelSelector("Delete Database"), { state: "detached" });
+
  await expect(explorer).not.toHaveText(".dataResourceTree", databaseId);
  await expect(explorer).not.toHaveText(".dataResourceTree", containerId);
 });
--- a/test/sql/container.spec.ts
+++ b/test/sql/container.spec.ts
@@ -1,6 +1,14 @@
 import { jest } from "@jest/globals";
 import "expect-playwright";
-import { generateUniqueName, getAzureCLICredentialsToken } from "../utils/shared";
+import {
+  AccountType,
+  generateUniqueName,
+  getPanelSelector,
+  getTestExplorerUrl,
+  getTreeMenuItemSelector,
+  getTreeNodeSelector,
+  openContextMenu,
+} from "../utils/shared";
 import { waitForExplorer } from "../utils/waitForExplorer";
 jest.setTimeout(120000);

@@ -8,28 +16,40 @@ test("SQL CRUD", async () => {
  const databaseId = generateUniqueName("db");
  const containerId = generateUniqueName("container");

-  // We can't retrieve AZ CLI credentials from the browser so we get them here.
-  const token = await getAzureCLICredentialsToken();
  page.setDefaultTimeout(50000);

-  await page.goto(`https://localhost:1234/testExplorer.html?accountName=portal-sql-runner-west-us&token=${token}`);
+  const url = await getTestExplorerUrl(AccountType.SQL);
+  await page.goto(url);
  const explorer = await waitForExplorer();

  await explorer.click('[data-test="New Container"]');
+
+  await explorer.waitForSelector(getPanelSelector("New Container"));
  await explorer.fill('[aria-label="New database id, Type a new database id"]', databaseId);
  await explorer.fill('[aria-label="Container id, Example Container1"]', containerId);
  await explorer.fill('[aria-label="Partition key"]', "/pk");
  await explorer.click("#sidePanelOkButton");
-  await explorer.click(`.nodeItem >> text=${databaseId}`);
-  await explorer.click(`[data-test="${containerId}"] [aria-label="More options"]`);
-  await explorer.click('button[role="menuitem"]:has-text("Delete Container")');
+  await explorer.waitForSelector(getPanelSelector("New Container"), { state: "detached" });
+
+  await explorer.click(getTreeNodeSelector(`DATA/${databaseId}`));
+  await explorer.hover(getTreeNodeSelector(`DATA/${databaseId}/${containerId}`));
+  await openContextMenu(explorer, `DATA/${databaseId}/${containerId}`);
+  await explorer.click(getTreeMenuItemSelector(`DATA/${databaseId}/${containerId}`, "Delete Container"));
+
+  await explorer.waitForSelector(getPanelSelector("Delete Container"));
  await explorer.fill('text=* Confirm by typing the container id >> input[type="text"]', containerId);
  await explorer.click('[aria-label="OK"]');
-  await explorer.click(`[data-test="${databaseId}"] [aria-label="More options"]`);
-  await explorer.click('button[role="menuitem"]:has-text("Delete Database")');
+  await explorer.waitForSelector(getPanelSelector("Delete Container"), { state: "detached" });
+
+  await openContextMenu(explorer, `DATA/${databaseId}`);
+  await explorer.click(getTreeMenuItemSelector(`DATA/${databaseId}`, "Delete Database"));
+
+  await explorer.waitForSelector(getPanelSelector("Delete Database"));
  await explorer.click('text=* Confirm by typing the database id >> input[type="text"]');
  await explorer.fill('text=* Confirm by typing the database id >> input[type="text"]', databaseId);
  await explorer.click("#sidePanelOkButton");
+  await explorer.waitForSelector(getPanelSelector("Delete Database"), { state: "detached" });
+
  await expect(explorer).not.toHaveText(".dataResourceTree", databaseId);
  await expect(explorer).not.toHaveText(".dataResourceTree", containerId);
 });
--- a/test/sql/resourceToken.spec.ts
+++ b/test/sql/resourceToken.spec.ts
@@ -2,7 +2,8 @@ import { CosmosDBManagementClient } from "@azure/arm-cosmosdb";
 import { CosmosClient, PermissionMode } from "@azure/cosmos";
 import { jest } from "@jest/globals";
 import "expect-playwright";
-import { generateUniqueName, getAzureCLICredentials } from "../utils/shared";
+import { generateUniqueName, getAzureCLICredentials, getTreeNodeSelector } from "../utils/shared";
+import { waitForExplorer } from "../utils/waitForExplorer";
 jest.setTimeout(120000);

 const subscriptionId = process.env["AZURE_SUBSCRIPTION_ID"] ?? "";
@@ -16,7 +17,7 @@ test("Resource token", async () => {
  const dbId = generateUniqueName("db");
  const collectionId = generateUniqueName("col");
  const client = new CosmosClient({
-    endpoint: account.documentEndpoint,
+    endpoint: account.documentEndpoint!,
    key: keys.primaryMasterKey,
  });
  const { database } = await client.databases.createIfNotExists({ id: dbId });
@@ -32,11 +33,10 @@ test("Resource token", async () => {
  await page.goto("https://localhost:1234/hostedExplorer.html");
  await page.waitForSelector("div > p.switchConnectTypeText");
  await page.click("div > p.switchConnectTypeText");
-  await page.type("input[class='inputToken']", resourceTokenConnectionString);
+  await page.fill("input[class='inputToken']", resourceTokenConnectionString);
  await page.click("input[value='Connect']");
-  await page.waitForSelector("iframe");
-  const explorer = await page.frame({
-    name: "explorer",
-  });
-  await explorer.textContent(`css=.dataResourceTree >> "${collectionId}"`);
+  const explorer = await waitForExplorer();
+
+  const collectionNodeLabel = await explorer.textContent(getTreeNodeSelector(`DATA/${collectionId}`));
+  expect(collectionNodeLabel).toBe(collectionId);
 });
--- a/test/tables/container.spec.ts
+++ b/test/tables/container.spec.ts
@@ -1,27 +1,40 @@
 import { jest } from "@jest/globals";
 import "expect-playwright";
-import { generateUniqueName, getAzureCLICredentialsToken } from "../utils/shared";
+import {
+  AccountType,
+  generateUniqueName,
+  getPanelSelector,
+  getTestExplorerUrl,
+  getTreeMenuItemSelector,
+  openContextMenu,
+} from "../utils/shared";
 import { waitForExplorer } from "../utils/waitForExplorer";

 jest.setTimeout(120000);

 test("Tables CRUD", async () => {
  const tableId = generateUniqueName("table");
-  // We can't retrieve AZ CLI credentials from the browser so we get them here.
-  const token = await getAzureCLICredentialsToken();
  page.setDefaultTimeout(50000);

-  await page.goto(`https://localhost:1234/testExplorer.html?accountName=portal-tables-runner&token=${token}`);
+  const url = await getTestExplorerUrl(AccountType.Tables);
+  await page.goto(url);
  const explorer = await waitForExplorer();

  await page.waitForSelector('text="Querying databases"', { state: "detached" });
  await explorer.click('[data-test="New Table"]');
+
+  await explorer.waitForSelector(getPanelSelector("New Table"));
  await explorer.fill('[aria-label="Table id, Example Table1"]', tableId);
  await explorer.click("#sidePanelOkButton");
-  await explorer.click(`[data-test="TablesDB"]`);
-  await explorer.click(`[data-test="${tableId}"] [aria-label="More options"]`);
-  await explorer.click('button[role="menuitem"]:has-text("Delete Table")');
+  await explorer.waitForSelector(getPanelSelector("New Table"), { state: "detached" });
+
+  await openContextMenu(explorer, `DATA/TablesDB/${tableId}`);
+  await explorer.click(getTreeMenuItemSelector(`DATA/TablesDB/${tableId}`, "Delete Table"));
+
+  await explorer.waitForSelector(getPanelSelector("Delete Table"));
  await explorer.fill('text=* Confirm by typing the table id >> input[type="text"]', tableId);
  await explorer.click('[aria-label="OK"]');
+  await explorer.waitForSelector(getPanelSelector("Delete Table"), { state: "detached" });
+
  await expect(explorer).not.toHaveText(".dataResourceTree", tableId);
 });
--- a/test/testExplorer/TestExplorer.ts
+++ b/test/testExplorer/TestExplorer.ts
@@ -4,9 +4,9 @@ import { DataExplorerInputsFrame } from "../../src/Contracts/ViewModels";
 import { updateUserContext } from "../../src/UserContext";
 import { get, listKeys } from "../../src/Utils/arm/generatedClients/cosmos/databaseAccounts";

-const resourceGroup = process.env.RESOURCE_GROUP || "";
-const subscriptionId = process.env.SUBSCRIPTION_ID || "";
 const urlSearchParams = new URLSearchParams(window.location.search);
+const resourceGroup = urlSearchParams.get("resourceGroup") || process.env.RESOURCE_GROUP || "";
+const subscriptionId = urlSearchParams.get("subscriptionId") || process.env.SUBSCRIPTION_ID || "";
 const accountName = urlSearchParams.get("accountName") || "portal-sql-runner-west-us";
 const selfServeType = urlSearchParams.get("selfServeType") || "example";
 const iframeSrc = urlSearchParams.get("iframeSrc") || "explorer.html?platform=Portal&disablePortalInitCache";
--- a/test/utils/shared.ts
+++ b/test/utils/shared.ts
@@ -1,5 +1,35 @@
 import { AzureCliCredentials } from "@azure/ms-rest-nodeauth";
 import crypto from "crypto";
+import { Frame } from "playwright";
+
+export enum AccountType {
+  Tables = "Tables",
+  Cassandra = "Cassandra",
+  Gremlin = "Gremlin",
+  Mongo = "Mongo",
+  Mongo32 = "Mongo32",
+  SQL = "SQL",
+}
+
+export const defaultAccounts: Record<AccountType, string> = {
+  [AccountType.Tables]: "portal-tables-runner",
+  [AccountType.Cassandra]: "portal-cassandra-runner",
+  [AccountType.Gremlin]: "portal-gremlin-runner",
+  [AccountType.Mongo]: "portal-mongo-runner",
+  [AccountType.Mongo32]: "portal-mongo32-runner",
+  [AccountType.SQL]: "portal-sql-runner-west-us",
+};
+
+const resourceGroup = process.env.DE_TEST_RESOURCE_GROUP ?? "runners";
+const subscriptionId = process.env.DE_TEST_SUBSCRIPTION_ID ?? "69e02f2d-f059-4409-9eac-97e8a276ae2c";
+
+export async function getTestExplorerUrl(accountType: AccountType) {
+  // We can't retrieve AZ CLI credentials from the browser so we get them here.
+  const token = await getAzureCLICredentialsToken();
+  const accountName =
+    process.env[`DE_TEST_ACCOUNT_NAME_${accountType.toLocaleUpperCase()}`] ?? defaultAccounts[accountType];
+  return `https://localhost:1234/testExplorer.html?accountName=${accountName}&resourceGroup=${resourceGroup}&subscriptionId=${subscriptionId}&token=${token}`;
+}

 export function generateUniqueName(baseName = "", length = 4): string {
  return `${baseName}${crypto.randomBytes(length).toString("hex")}`;
@@ -18,3 +48,22 @@ export async function getAzureCLICredentialsToken(): Promise<string> {
  const token = (await credentials.getToken()).accessToken;
  return token;
 }
+
+export function getPanelSelector(title: string) {
+  return `[data-test="Panel:${title}"]`;
+}
+
+export function getTreeNodeSelector(id: string) {
+  return `[data-test="TreeNode:${id}"]`;
+}
+
+export function getTreeMenuItemSelector(nodeId: string, itemLabel: string) {
+  return `[data-test="TreeNode/ContextMenu:${nodeId}"] [data-test="TreeNode/ContextMenuItem:${itemLabel}"]`;
+}
+
+export async function openContextMenu(explorer: Frame, nodeIdentifier: string) {
+  const nodeSelector = getTreeNodeSelector(nodeIdentifier);
+  await explorer.hover(nodeSelector);
+  await explorer.click(`${nodeSelector} [data-test="TreeNode/ContextMenuTrigger"]`);
+  await explorer.waitForSelector(`[data-test="TreeNode/ContextMenu:${nodeIdentifier}"]`);
+}