Merge branch 'master' into users/srnara/pupeteerForNotebooks

2026-01-01 07:11:23 +00:00 · 2020-11-17 11:07:16 -08:00
parent ca29ccb703 84b6075ee8
commit 9b6d261d2b
169 changed files with 2554 additions and 6136 deletions
--- a/test/cassandra/container.spec.ts
+++ b/test/cassandra/container.spec.ts
@@ -1,15 +1,18 @@
 import "expect-puppeteer";
+import { Frame } from "puppeteer";
 import { generateUniqueName, login } from "../utils/shared";

 jest.setTimeout(300000);
-const RENDER_DELAY = 400;
+const RENDER_DELAY = 800;
+const RETRY_DELAY = 5000;
+const CREATE_DELAY = 10000;
 const LOADING_STATE_DELAY = 2500;

 describe("Collection Add and Delete Cassandra spec", () => {
  it("creates a collection", async () => {
    try {
-      const keyspaceId = generateUniqueName("keyspaceid");
-      const tableId = generateUniqueName("tableid");
+      const keyspaceId = generateUniqueName("key");
+      const tableId = generateUniqueName("tab");
      const frame = await login(process.env.CASSANDRA_CONNECTION_STRING);

      // create new table
@@ -31,38 +34,69 @@ describe("Collection Add and Delete Cassandra spec", () => {

      // open database menu
      await frame.waitForSelector('div[class="splashScreen"] > div[class="title"]', { visible: true });
-
-      await frame.waitFor(`div[data-test="${keyspaceId}"]`, { visible: true });
-      await frame.waitFor(LOADING_STATE_DELAY);
-      await frame.waitFor(`div[data-test="${keyspaceId}"]`, { visible: true });
-      await frame.click(`div[data-test="${keyspaceId}"]`);
-      await frame.waitFor(`span[title="${tableId}"]`, { visible: true });
-
-      // delete container
-
-      // click context menu for container
-      await frame.waitFor(`div[data-test="${tableId}"] > div > button`, { visible: true });
-      await frame.click(`div[data-test="${tableId}"] > div > button`);
-
-      // click delete container
-      await frame.waitForSelector("body > div.ms-Layer.ms-Layer--fixed");
-      await frame.waitFor(RENDER_DELAY);
-      const elements = await frame.$$('span[class="treeComponentMenuItemLabel deleteCollectionMenuItemLabel"]');
-      await elements[0].click();
-
-      // confirm delete container
-      await frame.type('input[data-test="confirmCollectionId"]', tableId.trim());
-
-      // click delete
-      await frame.click('input[data-test="deleteCollection"]');
-      await frame.waitForSelector('div[class="splashScreen"] > div[class="title"]', { visible: true });
      await frame.waitFor(LOADING_STATE_DELAY);
      await frame.waitForSelector('div[class="splashScreen"] > div[class="title"]', { visible: true });

-      await expect(page).not.toMatchElement(`div[data-test="${tableId}"]`);
+      const databases = await frame.$$(`div[class="databaseHeader main1 nodeItem "] > div[class="treeNodeHeader "]`);
+      const selectedDbId = await frame.evaluate(element => {
+        return element.attributes["data-test"].textContent;
+      }, databases[0]);
+
+      await frame.waitFor(`div[data-test="${selectedDbId}"]`), { visible: true };
+      await frame.waitFor(CREATE_DELAY);
+      await frame.waitFor("div[class='rowData'] > span[class='message']");
+
+      const didCreateContainer = await frame.$$eval("div[class='rowData'] > span[class='message']", elements => {
+        return elements.some(el => el.textContent.includes("Successfully created"));
+      });
+
+      expect(didCreateContainer).toBe(true);
+
+      await frame.waitFor(`div[data-test="${selectedDbId}"]`), { visible: true };
+      await frame.waitFor(LOADING_STATE_DELAY);
+
+      await clickDBMenu(selectedDbId, frame);
+
+      const collections = await frame.$$(
+        `div[class="collectionHeader main2 nodeItem "] > div[class="treeNodeHeader "]`
+      );
+
+      if (collections.length) {
+        await frame.waitFor(`div[class="collectionHeader main2 nodeItem "] > div[class="treeNodeHeader "]`, {
+          visible: true
+        });
+
+        const textId = await frame.evaluate(element => {
+          return element.attributes["data-test"].textContent;
+        }, collections[0]);
+        await frame.waitFor(`div[data-test="${textId}"]`, { visible: true });
+        // delete container
+
+        // click context menu for container
+        await frame.waitFor(`div[data-test="${textId}"] > div > button`, { visible: true });
+        await frame.click(`div[data-test="${textId}"] > div > button`);
+
+        // click delete container
+        await frame.waitFor(RENDER_DELAY);
+        await frame.waitFor('span[class="treeComponentMenuItemLabel deleteCollectionMenuItemLabel"]');
+        await frame.click('span[class="treeComponentMenuItemLabel deleteCollectionMenuItemLabel"]');
+
+        // confirm delete container
+        await frame.waitFor('input[data-test="confirmCollectionId"]', { visible: true });
+        await frame.type('input[data-test="confirmCollectionId"]', textId);
+
+        // click delete
+        await frame.waitFor('input[data-test="deleteCollection"]', { visible: true });
+        await frame.click('input[data-test="deleteCollection"]');
+        await frame.waitFor(LOADING_STATE_DELAY);
+        await frame.waitForSelector('div[class="splashScreen"] > div[class="title"]', { visible: true });
+
+        await expect(page).not.toMatchElement(`div[data-test="${textId}"]`);
+      }

      // click context menu for database
      await frame.waitFor(`div[data-test="${keyspaceId}"] > div > button`);
+      await frame.waitFor(RENDER_DELAY);
      const button = await frame.$(`div[data-test="${keyspaceId}"] > div > button`);
      await button.focus();
      await button.asElement().click();
@@ -80,12 +114,35 @@ describe("Collection Add and Delete Cassandra spec", () => {
      // click delete
      await frame.click('input[data-test="deleteDatabase"]');
      await frame.waitForSelector('div[class="splashScreen"] > div[class="title"]', { visible: true });
+      await frame.waitFor(LOADING_STATE_DELAY);
+      await frame.waitForSelector('div[class="splashScreen"] > div[class="title"]', { visible: true });
      await expect(page).not.toMatchElement(`div[data-test="${keyspaceId}"]`);
    } catch (error) {
      // eslint-disable-next-line @typescript-eslint/no-explicit-any
      const testName = (expect as any).getState().currentTestName;
-      await page.screenshot({ path: `Test Failed ${testName}.png` });
+      await page.screenshot({ path: `failed-${testName}.jpg` });
      throw error;
    }
  });
 });
+
+async function clickDBMenu(dbId: string, frame: Frame, retries = 0) {
+  const button = await frame.$(`div[data-test="${dbId}"]`);
+  await button.focus();
+  const handler = await button.asElement();
+  await handler.click();
+  await ensureMenuIsOpen(dbId, frame, retries);
+  return button;
+}
+
+async function ensureMenuIsOpen(dbId: string, frame: Frame, retries: number) {
+  await frame.waitFor(RETRY_DELAY);
+  const button = await frame.$(`div[data-test="${dbId}"]`);
+  const classList = await frame.evaluate(button => {
+    return button.parentElement.classList;
+  }, button);
+  if (!Object.values(classList).includes("selected") && retries < 5) {
+    retries = retries + 1;
+    await clickDBMenu(dbId, frame, retries);
+  }
+}
--- a/test/index.spec.ts
+++ b/test/index.spec.ts
@@ -1,58 +0,0 @@
-import "expect-puppeteer";
-import { trackEvent, trackException } from "./utils";
-
-jest.setTimeout(300000);
-
-describe.skip("Collection CRUD", () => {
-  it("should complete collection crud", async () => {
-    try {
-      // Login to Azure Portal
-      await page.goto("https://portal.azure.com");
-      await page.waitFor("input[name=loginfmt]");
-      await page.type("input[name=loginfmt]", process.env.PORTAL_RUNNER_USERNAME);
-      await page.click("input[type=submit]");
-      await page.waitFor(3000);
-      await page.waitFor("input[name=loginfmt]");
-      await page.type("input[name=passwd]", process.env.PORTAL_RUNNER_PASSWORD);
-      await page.click("input[type=submit]");
-      await page.waitFor(3000);
-      await page.waitForNavigation();
-      await page.goto(
-        `https://ms.portal.azure.com/#@microsoft.onmicrosoft.com/resource/subscriptions/${process.env.PORTAL_RUNNER_SUBSCRIPTION}/resourceGroups/${process.env.PORTAL_RUNNER_RESOURCE_GROUP}/providers/Microsoft.DocumentDb/databaseAccounts/${process.env.PORTAL_RUNNER_DATABASE_ACCOUNT}/dataExplorer`
-      );
-      // Wait for page to settle
-      await page.waitFor(10000);
-      // Find Data Explorer iFrame
-      const frames = page.frames();
-      const dataExplorer = frames.find(frame => frame.url().includes("cosmos.azure.com"));
-      // Click "New Container"
-      const newContainerButton = await dataExplorer.$('button[data-test="New Container"]');
-      await newContainerButton.click();
-      // Wait for side pane to appear
-      await dataExplorer.waitFor(".contextual-pane-in");
-      // Fill out New Container form
-      const databaseIdInput = await dataExplorer.$("#databaseId");
-      await databaseIdInput.type("foo");
-      const collectionIdInput = await dataExplorer.$("#containerId");
-      await collectionIdInput.type("foo");
-      const partitionKeyInput = await dataExplorer.$('input[data-test="addCollection-partitionKeyValue"]');
-      await partitionKeyInput.type("/partitionKey");
-      trackEvent({ name: "ProductionRunnerSuccess" });
-
-      // TODO: Submit form and assert results
-      //     cy.wrap($body)
-      //       .find("#submitBtnAddCollection")
-      //       .click();
-      //     cy.wait(10000);
-      //     cy.wrap($body)
-      //       .find('div[data-test="resourceTreeId"]')
-      //       .should("exist")
-      //       .find('div[class="treeComponent dataResourceTree"]')
-      //       .should("contain", dbId);
-    } catch (error) {
-      await page.screenshot({ path: "failure.png" });
-      trackException(error);
-      throw error;
-    }
-  });
-});
--- a/test/mongo/container.spec.ts
+++ b/test/mongo/container.spec.ts
@@ -1,17 +1,19 @@
 import "expect-puppeteer";
+import { Frame } from "puppeteer";
 import { generateUniqueName, login } from "../utils/shared";

 jest.setTimeout(300000);
-
 const LOADING_STATE_DELAY = 2500;
+const RETRY_DELAY = 5000;
+const CREATE_DELAY = 10000;
 const RENDER_DELAY = 1000;

 describe("Collection Add and Delete Mongo spec", () => {
-  it("creates and deletes a collection", async () => {
+  it("creates a collection", async () => {
    try {
-      const dbId = generateUniqueName("TestDatabase");
-      const collectionId = generateUniqueName("TestCollection");
-      const sharedKey = generateUniqueName("SharedKey");
+      const dbId = generateUniqueName("db");
+      const collectionId = generateUniqueName("col");
+      const sharedKey = `${generateUniqueName()}`;
      const frame = await login(process.env.MONGO_CONNECTION_STRING);

      // create new collection
@@ -52,39 +54,70 @@ describe("Collection Add and Delete Mongo spec", () => {
      // validate created
      // open database menu
      await frame.waitForSelector('div[class="splashScreen"] > div[class="title"]', { visible: true });
-
-      await frame.waitFor(`div[data-test="${dbId}"]`), { visible: true };
-      await frame.waitFor(LOADING_STATE_DELAY);
-      await frame.waitFor(`div[data-test="${dbId}"]`), { visible: true };
-      await frame.click(`div[data-test="${dbId}"]`);
-      await frame.waitFor(`div[data-test="${collectionId}"]`, { visible: true });
-
-      // delete container
-
-      // click context menu for container
-      await frame.waitFor(`div[data-test="${collectionId}"] > div > button`, { visible: true });
-      await frame.click(`div[data-test="${collectionId}"] > div > button`);
-
-      // click delete container
-      await frame.waitFor(RENDER_DELAY);
-      await frame.waitFor('span[class="treeComponentMenuItemLabel deleteCollectionMenuItemLabel"]', { visible: true });
-      await frame.click('span[class="treeComponentMenuItemLabel deleteCollectionMenuItemLabel"]');
-
-      // confirm delete container
-      await frame.waitFor('input[data-test="confirmCollectionId"]', { visible: true });
-      await frame.type('input[data-test="confirmCollectionId"]', collectionId.trim());
-
-      // click delete
-      await frame.waitFor('input[data-test="deleteCollection"]', { visible: true });
-      await frame.click('input[data-test="deleteCollection"]');
      await frame.waitFor(LOADING_STATE_DELAY);
      await frame.waitForSelector('div[class="splashScreen"] > div[class="title"]', { visible: true });

-      await expect(page).not.toMatchElement(`div[data-test="${collectionId}"]`);
+      const databases = await frame.$$(`div[class="databaseHeader main1 nodeItem "] > div[class="treeNodeHeader "]`);
+      const selectedDbId = await frame.evaluate(element => {
+        return element.attributes["data-test"].textContent;
+      }, databases[0]);
+
+      await frame.waitFor(`div[data-test="${selectedDbId}"]`), { visible: true };
+      await frame.waitFor(CREATE_DELAY);
+      await frame.waitFor("div[class='rowData'] > span[class='message']");
+
+      const didCreateContainer = await frame.$$eval("div[class='rowData'] > span[class='message']", elements => {
+        return elements.some(el => el.textContent.includes("Successfully created"));
+      });
+
+      expect(didCreateContainer).toBe(true);
+
+      await frame.waitFor(`div[data-test="${selectedDbId}"]`), { visible: true };
+      await frame.waitFor(LOADING_STATE_DELAY);
+
+      await clickDBMenu(selectedDbId, frame);
+
+      const collections = await frame.$$(
+        `div[class="collectionHeader main2 nodeItem "] > div[class="treeNodeHeader "]`
+      );
+
+      if (collections.length) {
+        await frame.waitFor(`div[class="collectionHeader main2 nodeItem "] > div[class="treeNodeHeader "]`, {
+          visible: true
+        });
+
+        const textId = await frame.evaluate(element => {
+          return element.attributes["data-test"].textContent;
+        }, collections[0]);
+        await frame.waitFor(`div[data-test="${textId}"]`, { visible: true });
+        // delete container
+
+        // click context menu for container
+        await frame.waitFor(`div[data-test="${textId}"] > div > button`, { visible: true });
+        await frame.click(`div[data-test="${textId}"] > div > button`);
+
+        // click delete container
+        await frame.waitFor(RENDER_DELAY);
+        await frame.waitFor('span[class="treeComponentMenuItemLabel deleteCollectionMenuItemLabel"]');
+        await frame.click('span[class="treeComponentMenuItemLabel deleteCollectionMenuItemLabel"]');
+
+        // confirm delete container
+        await frame.waitFor('input[data-test="confirmCollectionId"]', { visible: true });
+        await frame.type('input[data-test="confirmCollectionId"]', textId);
+
+        // click delete
+        await frame.waitFor('input[data-test="deleteCollection"]', { visible: true });
+        await frame.click('input[data-test="deleteCollection"]');
+        await frame.waitFor(LOADING_STATE_DELAY);
+        await frame.waitForSelector('div[class="splashScreen"] > div[class="title"]', { visible: true });
+
+        await expect(page).not.toMatchElement(`div[data-test="${textId}"]`);
+      }

      // click context menu for database
-      await frame.waitFor(`div[data-test="${dbId}"] > div > button`);
-      const button = await frame.$(`div[data-test="${dbId}"] > div > button`);
+      await frame.waitFor(`div[data-test="${selectedDbId}"] > div > button`);
+      await frame.waitFor(RENDER_DELAY);
+      const button = await frame.$(`div[data-test="${selectedDbId}"] > div > button`);
      await button.focus();
      await button.asElement().click();

@@ -96,17 +129,40 @@ describe("Collection Add and Delete Mongo spec", () => {
      // confirm delete database
      await frame.waitForSelector('input[data-test="confirmDatabaseId"]', { visible: true });
      await frame.waitFor(RENDER_DELAY);
-      await frame.type('input[data-test="confirmDatabaseId"]', dbId.trim());
+      await frame.type('input[data-test="confirmDatabaseId"]', selectedDbId);

      // click delete
      await frame.click('input[data-test="deleteDatabase"]');
      await frame.waitForSelector('div[class="splashScreen"] > div[class="title"]', { visible: true });
-      await expect(page).not.toMatchElement(`div[data-test="${dbId}"]`);
+      await frame.waitFor(LOADING_STATE_DELAY);
+      await frame.waitForSelector('div[class="splashScreen"] > div[class="title"]', { visible: true });
+      await expect(page).not.toMatchElement(`div[data-test="${selectedDbId}"]`);
    } catch (error) {
      // eslint-disable-next-line @typescript-eslint/no-explicit-any
      const testName = (expect as any).getState().currentTestName;
-      await page.screenshot({ path: `Test Failed ${testName}.png` });
+      await page.screenshot({ path: `failed-${testName}.jpg` });
      throw error;
    }
  });
 });
+
+async function clickDBMenu(dbId: string, frame: Frame, retries = 0) {
+  const button = await frame.$(`div[data-test="${dbId}"]`);
+  await button.focus();
+  const handler = await button.asElement();
+  await handler.click();
+  await ensureMenuIsOpen(dbId, frame, retries);
+  return button;
+}
+
+async function ensureMenuIsOpen(dbId: string, frame: Frame, retries: number) {
+  await frame.waitFor(RETRY_DELAY);
+  const button = await frame.$(`div[data-test="${dbId}"]`);
+  const classList = await frame.evaluate(button => {
+    return button.parentElement.classList;
+  }, button);
+  if (!Object.values(classList).includes("selected") && retries < 5) {
+    retries = retries + 1;
+    await clickDBMenu(dbId, frame, retries);
+  }
+}
--- a/test/sql/container.spec.ts
+++ b/test/sql/container.spec.ts
@@ -1,16 +1,19 @@
 import "expect-puppeteer";
+import { Frame } from "puppeteer";
 import { generateUniqueName, login } from "../utils/shared";

 jest.setTimeout(300000);
 const LOADING_STATE_DELAY = 2500;
+const RETRY_DELAY = 5000;
+const CREATE_DELAY = 10000;
 const RENDER_DELAY = 1000;

 describe("Collection Add and Delete SQL spec", () => {
  it("creates a collection", async () => {
    try {
-      const dbId = generateUniqueName("TestDatabase");
-      const collectionId = generateUniqueName("TestCollection");
-      const sharedKey = generateUniqueName("SharedKey");
+      const dbId = generateUniqueName("db");
+      const collectionId = generateUniqueName("col");
+      const sharedKey = `/skey${generateUniqueName()}`;
      const frame = await login(process.env.PORTAL_RUNNER_CONNECTION_STRING);

      // create new collection
@@ -51,39 +54,69 @@ describe("Collection Add and Delete SQL spec", () => {
      // validate created
      // open database menu
      await frame.waitForSelector('div[class="splashScreen"] > div[class="title"]', { visible: true });
-
-      await frame.waitFor(`div[data-test="${dbId}"]`), { visible: true };
-      await frame.waitFor(LOADING_STATE_DELAY);
-      await frame.waitFor(`div[data-test="${dbId}"]`), { visible: true };
-      await frame.click(`div[data-test="${dbId}"]`);
-      await frame.waitFor(`div[data-test="${collectionId}"]`, { visible: true });
-
-      // delete container
-
-      // click context menu for container
-      await frame.waitFor(`div[data-test="${collectionId}"] > div > button`, { visible: true });
-      await frame.click(`div[data-test="${collectionId}"] > div > button`);
-
-      // click delete container
-      await frame.waitFor(RENDER_DELAY);
-      await frame.waitFor('span[class="treeComponentMenuItemLabel deleteCollectionMenuItemLabel"]');
-      await frame.click('span[class="treeComponentMenuItemLabel deleteCollectionMenuItemLabel"]');
-
-      // confirm delete container
-      await frame.waitFor('input[data-test="confirmCollectionId"]', { visible: true });
-      await frame.type('input[data-test="confirmCollectionId"]', collectionId);
-
-      // click delete
-      await frame.waitFor('input[data-test="deleteCollection"]', { visible: true });
-      await frame.click('input[data-test="deleteCollection"]');
      await frame.waitFor(LOADING_STATE_DELAY);
      await frame.waitForSelector('div[class="splashScreen"] > div[class="title"]', { visible: true });
+      const databases = await frame.$$(`div[class="databaseHeader main1 nodeItem "] > div[class="treeNodeHeader "]`);
+      const selectedDbId = await frame.evaluate(element => {
+        return element.attributes["data-test"].textContent;
+      }, databases[0]);

-      await expect(page).not.toMatchElement(`div[data-test="${collectionId}"]`);
+      await frame.waitFor(`div[data-test="${selectedDbId}"]`), { visible: true };
+      await frame.waitFor(CREATE_DELAY);
+      await frame.waitFor("div[class='rowData'] > span[class='message']");
+
+      const didCreateContainer = await frame.$$eval("div[class='rowData'] > span[class='message']", elements => {
+        return elements.some(el => el.textContent.includes("Successfully created"));
+      });
+
+      expect(didCreateContainer).toBe(true);
+
+      await frame.waitFor(`div[data-test="${selectedDbId}"]`), { visible: true };
+      await frame.waitFor(LOADING_STATE_DELAY);
+
+      await clickDBMenu(selectedDbId, frame);
+
+      const collections = await frame.$$(
+        `div[class="collectionHeader main2 nodeItem "] > div[class="treeNodeHeader "]`
+      );
+
+      if (collections.length) {
+        await frame.waitFor(`div[class="collectionHeader main2 nodeItem "] > div[class="treeNodeHeader "]`, {
+          visible: true
+        });
+
+        const textId = await frame.evaluate(element => {
+          return element.attributes["data-test"].textContent;
+        }, collections[0]);
+        await frame.waitFor(`div[data-test="${textId}"]`, { visible: true });
+        // delete container
+
+        // click context menu for container
+        await frame.waitFor(`div[data-test="${textId}"] > div > button`, { visible: true });
+        await frame.click(`div[data-test="${textId}"] > div > button`);
+
+        // click delete container
+        await frame.waitFor(RENDER_DELAY);
+        await frame.waitFor('span[class="treeComponentMenuItemLabel deleteCollectionMenuItemLabel"]');
+        await frame.click('span[class="treeComponentMenuItemLabel deleteCollectionMenuItemLabel"]');
+
+        // confirm delete container
+        await frame.waitFor('input[data-test="confirmCollectionId"]', { visible: true });
+        await frame.type('input[data-test="confirmCollectionId"]', textId);
+
+        // click delete
+        await frame.waitFor('input[data-test="deleteCollection"]', { visible: true });
+        await frame.click('input[data-test="deleteCollection"]');
+        await frame.waitFor(LOADING_STATE_DELAY);
+        await frame.waitForSelector('div[class="splashScreen"] > div[class="title"]', { visible: true });
+
+        await expect(page).not.toMatchElement(`div[data-test="${textId}"]`);
+      }

      // click context menu for database
-      await frame.waitFor(`div[data-test="${dbId}"] > div > button`);
-      const button = await frame.$(`div[data-test="${dbId}"] > div > button`);
+      await frame.waitFor(`div[data-test="${selectedDbId}"] > div > button`);
+      await frame.waitFor(RENDER_DELAY);
+      const button = await frame.$(`div[data-test="${selectedDbId}"] > div > button`);
      await button.focus();
      await button.asElement().click();

@@ -95,17 +128,40 @@ describe("Collection Add and Delete SQL spec", () => {
      // confirm delete database
      await frame.waitForSelector('input[data-test="confirmDatabaseId"]', { visible: true });
      await frame.waitFor(RENDER_DELAY);
-      await frame.type('input[data-test="confirmDatabaseId"]', dbId.trim());
+      await frame.type('input[data-test="confirmDatabaseId"]', selectedDbId);

      // click delete
      await frame.click('input[data-test="deleteDatabase"]');
      await frame.waitForSelector('div[class="splashScreen"] > div[class="title"]', { visible: true });
-      await expect(page).not.toMatchElement(`div[data-test="${dbId}"]`);
+      await frame.waitFor(LOADING_STATE_DELAY);
+      await frame.waitForSelector('div[class="splashScreen"] > div[class="title"]', { visible: true });
+      await expect(page).not.toMatchElement(`div[data-test="${selectedDbId}"]`);
    } catch (error) {
      // eslint-disable-next-line @typescript-eslint/no-explicit-any
      const testName = (expect as any).getState().currentTestName;
-      await page.screenshot({ path: `Test Failed ${testName}.jpg` });
+      await page.screenshot({ path: `failed-${testName}.jpg` });
      throw error;
    }
  });
 });
+
+async function clickDBMenu(dbId: string, frame: Frame, retries = 0) {
+  const button = await frame.$(`div[data-test="${dbId}"]`);
+  await button.focus();
+  const handler = await button.asElement();
+  await handler.click();
+  await ensureMenuIsOpen(dbId, frame, retries);
+  return button;
+}
+
+async function ensureMenuIsOpen(dbId: string, frame: Frame, retries: number) {
+  await frame.waitFor(RETRY_DELAY);
+  const button = await frame.$(`div[data-test="${dbId}"]`);
+  const classList = await frame.evaluate(button => {
+    return button.parentElement.classList;
+  }, button);
+  if (!Object.values(classList).includes("selected") && retries < 5) {
+    retries = retries + 1;
+    await clickDBMenu(dbId, frame, retries);
+  }
+}
--- a/test/tables/container.spec.ts
+++ b/test/tables/container.spec.ts
@@ -0,0 +1,111 @@
+import "expect-puppeteer";
+import { Frame } from "puppeteer";
+import { generateUniqueName, login } from "../utils/shared";
+
+jest.setTimeout(300000);
+const RETRY_DELAY = 5000;
+const LOADING_STATE_DELAY = 2500;
+const RENDER_DELAY = 1000;
+
+describe("Collection Add and Delete Tables spec", () => {
+  it("creates a collection", async () => {
+    try {
+      const tableId = generateUniqueName("tab");
+      const frame = await login(process.env.TABLES_CONNECTION_STRING);
+
+      // create new collection
+      await frame.waitFor('button[data-test="New Table"]', { visible: true });
+      await frame.waitForSelector('div[class="splashScreen"] > div[class="title"]', { visible: true });
+      await frame.click('button[data-test="New Table"]');
+
+      // type database id
+      await frame.waitFor('input[data-test="addCollection-newDatabaseId"]');
+      const dbInput = await frame.$('input[data-test="addCollection-newDatabaseId"]');
+      await dbInput.press("Backspace");
+      await dbInput.type(tableId);
+
+      // click submit
+      await frame.waitFor("#submitBtnAddCollection");
+      await frame.click("#submitBtnAddCollection");
+
+      // validate created
+      // open database menu
+      await frame.waitForSelector('div[class="splashScreen"] > div[class="title"]', { visible: true });
+      await frame.waitFor(LOADING_STATE_DELAY);
+      await frame.waitForSelector('div[class="splashScreen"] > div[class="title"]', { visible: true });
+
+      await frame.waitFor(`div[data-test="TablesDB"]`), { visible: true };
+      await frame.waitFor(LOADING_STATE_DELAY);
+
+      const didCreateContainer = await frame.$$eval("div[class='rowData'] > span[class='message']", elements => {
+        return elements.some(el => el.textContent.includes("Successfully created"));
+      });
+
+      expect(didCreateContainer).toBe(true);
+
+      await frame.waitFor(`div[data-test="TablesDB"]`), { visible: true };
+      await frame.waitFor(LOADING_STATE_DELAY);
+
+      await clickTablesMenu(frame);
+
+      const collections = await frame.$$(
+        `div[class="collectionHeader main2 nodeItem "] > div[class="treeNodeHeader "]`
+      );
+      const textId = await frame.evaluate(element => {
+        return element.attributes["data-test"].textContent;
+      }, collections[0]);
+      await frame.waitFor(`div[data-test="${textId}"]`, { visible: true });
+
+      // delete container
+
+      // click context menu for container
+      await frame.waitFor(`div[data-test="${textId}"] > div > button`, { visible: true });
+      await frame.click(`div[data-test="${textId}"] > div > button`);
+
+      // click delete container
+      await frame.waitFor(RENDER_DELAY);
+      await frame.waitFor('span[class="treeComponentMenuItemLabel deleteCollectionMenuItemLabel"]');
+      await frame.click('span[class="treeComponentMenuItemLabel deleteCollectionMenuItemLabel"]');
+
+      // confirm delete container
+      await frame.waitFor('input[data-test="confirmCollectionId"]', { visible: true });
+      await frame.type('input[data-test="confirmCollectionId"]', textId);
+
+      // click delete
+      await frame.waitFor('input[data-test="deleteCollection"]', { visible: true });
+      await frame.click('input[data-test="deleteCollection"]');
+      await frame.waitFor(LOADING_STATE_DELAY);
+      await frame.waitForSelector('div[class="splashScreen"] > div[class="title"]', { visible: true });
+      await frame.waitFor(LOADING_STATE_DELAY);
+      await frame.waitForSelector('div[class="splashScreen"] > div[class="title"]', { visible: true });
+
+      await expect(page).not.toMatchElement(`div[data-test="${textId}"]`);
+    } catch (error) {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const testName = (expect as any).getState().currentTestName;
+      await page.screenshot({ path: `failed-${testName}.jpg` });
+      throw error;
+    }
+  });
+});
+
+async function clickTablesMenu(frame: Frame, retries = 0) {
+  const button = await frame.$(`div[data-test="TablesDB"]`);
+  await button.focus();
+  const handler = await button.asElement();
+  await handler.click();
+  await ensureMenuIsOpen(frame, retries);
+  return button;
+}
+
+async function ensureMenuIsOpen(frame: Frame, retries: number) {
+  await frame.waitFor(RETRY_DELAY);
+  const button = await frame.$(`div[data-test="TablesDB"]`);
+  const classList = await frame.evaluate(button => {
+    return button.parentElement.classList;
+  }, button);
+  if (!Object.values(classList).includes("selected") && retries < 5) {
+    retries = retries + 1;
+    await clickTablesMenu(frame, retries);
+  }
+}
--- a/test/utils/shared.ts
+++ b/test/utils/shared.ts
@@ -2,9 +2,12 @@ import crypto from "crypto";
 import { Frame } from "puppeteer";

 export async function login(connectionString: string): Promise<Frame> {
-  const prodUrl = "https://localhost:1234/hostedExplorer.html";
-  page.goto(prodUrl);
+  const prodUrl = process.env.DATA_EXPLORER_ENDPOINT;
+  await page.goto(prodUrl);

+  if (process.env.PLATFORM === "Emulator") {
+    return page.mainFrame();
+  }
  // log in with connection string
  const handle = await page.waitForSelector("iframe");
  const frame = await handle.contentFrame();
@@ -16,6 +19,6 @@ export async function login(connectionString: string): Promise<Frame> {
  return frame;
 }

-export function generateUniqueName(baseName: string, length = 8): string {
+export function generateUniqueName(baseName = "", length = 4): string {
  return `${baseName}${crypto.randomBytes(length).toString("hex")}`;
 }