add user defined function playwright test

.github/workflows/ci.yml

@@ -164,8 +164,8 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        shardIndex: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20]
-        shardTotal: [20]
+        shardIndex: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16]
+        shardTotal: [16]
     steps:
       - uses: actions/checkout@v4
       - name: Use Node.js 18.x
@@ -198,20 +198,18 @@ jobs:
             GREMLIN_TESTACCOUNT_TOKEN=$(az account get-access-token --scope "https://github-e2etests-gremlin.documents.azure.com/.default" -o tsv --query accessToken)
             echo "::add-mask::$GREMLIN_TESTACCOUNT_TOKEN"
             echo GREMLIN_TESTACCOUNT_TOKEN=$GREMLIN_TESTACCOUNT_TOKEN >> $GITHUB_ENV
-            # CASSANDRA_TESTACCOUNT_TOKEN=$(az account get-access-token --scope "https://github-e2etests-cassandra.documents.azure.com/.default" -o tsv --query accessToken)
-            # echo "::add-mask::$CASSANDRA_TESTACCOUNT_TOKEN"
-            # echo CASSANDRA_TESTACCOUNT_TOKEN=$CASSANDRA_TESTACCOUNT_TOKEN >> $GITHUB_ENV
-            # MONGO_TESTACCOUNT_TOKEN=$(az account get-access-token --scope "https://github-e2etests-mongo.documents.azure.com/.default" -o tsv --query accessToken)
-            # echo "::add-mask::$MONGO_TESTACCOUNT_TOKEN"
-            # echo MONGO_TESTACCOUNT_TOKEN=$MONGO_TESTACCOUNT_TOKEN >> $GITHUB_ENV
-            # MONGO32_TESTACCOUNT_TOKEN=$(az account get-access-token --scope "https://github-e2etests-mongo32.documents.azure.com/.default" -o tsv --query accessToken)
-            # echo "::add-mask::$MONGO32_TESTACCOUNT_TOKEN"
-            # echo MONGO32_TESTACCOUNT_TOKEN=$MONGO32_TESTACCOUNT_TOKEN >> $GITHUB_ENV
-            # MONGO_READONLY_TESTACCOUNT_TOKEN=$(az account get-access-token --scope "https://github-e2etests-mongo-readonly.documents.azure.com/.default" -o tsv --query accessToken)
-            # echo "::add-mask::$MONGO_READONLY_TESTACCOUNT_TOKEN"
-            # echo MONGO_READONLY_TESTACCOUNT_TOKEN=$MONGO_READONLY_TESTACCOUNT_TOKEN >> $GITHUB_ENV
-      - name: List tests in this shard
-        run: npx playwright test --shard=${{ matrix.shardIndex }}/${{ matrix.shardTotal }} --list
+            CASSANDRA_TESTACCOUNT_TOKEN=$(az account get-access-token --scope "https://github-e2etests-cassandra.documents.azure.com/.default" -o tsv --query accessToken)
+            echo "::add-mask::$CASSANDRA_TESTACCOUNT_TOKEN"
+            echo CASSANDRA_TESTACCOUNT_TOKEN=$CASSANDRA_TESTACCOUNT_TOKEN >> $GITHUB_ENV
+            MONGO_TESTACCOUNT_TOKEN=$(az account get-access-token --scope "https://github-e2etests-mongo.documents.azure.com/.default" -o tsv --query accessToken)
+            echo "::add-mask::$MONGO_TESTACCOUNT_TOKEN"
+            echo MONGO_TESTACCOUNT_TOKEN=$MONGO_TESTACCOUNT_TOKEN >> $GITHUB_ENV
+            MONGO32_TESTACCOUNT_TOKEN=$(az account get-access-token --scope "https://github-e2etests-mongo32.documents.azure.com/.default" -o tsv --query accessToken)
+            echo "::add-mask::$MONGO32_TESTACCOUNT_TOKEN"
+            echo MONGO32_TESTACCOUNT_TOKEN=$MONGO32_TESTACCOUNT_TOKEN >> $GITHUB_ENV
+            MONGO_READONLY_TESTACCOUNT_TOKEN=$(az account get-access-token --scope "https://github-e2etests-mongo-readonly.documents.azure.com/.default" -o tsv --query accessToken)
+            echo "::add-mask::$MONGO_READONLY_TESTACCOUNT_TOKEN"
+            echo MONGO_READONLY_TESTACCOUNT_TOKEN=$MONGO_READONLY_TESTACCOUNT_TOKEN >> $GITHUB_ENV
       - name: Run test shard ${{ matrix['shardIndex'] }} of ${{ matrix['shardTotal']}}
         run: npx playwright test --shard=${{ matrix.shardIndex }}/${{ matrix.shardTotal }} --workers=3
       - name: Upload blob report to GitHub Actions Artifacts

package-lock.json

@@ -116,8 +116,8 @@
         "tinykeys": "2.1.0",
         "underscore": "1.12.1",
         "utility-types": "3.10.0",
-        "uuid": "9.0.0",
         "web-vitals": "4.2.4",
+        "uuid": "9.0.0",
         "zustand": "3.5.0"
       },
       "devDependencies": {

playwright.config.ts

@@ -4,12 +4,6 @@ import { defineConfig, devices } from "@playwright/test";
  */
 export default defineConfig({
   testDir: "test",
-  testIgnore: [
-    "**/mongo/**",
-    "**/cassandra/**",
-    "**/gremlin/**",
-    "**/tables/**",
-  ],
   fullyParallel: true,
   forbidOnly: !!process.env.CI,
   retries: process.env.CI ? 3 : 0,
@@ -17,8 +11,8 @@ export default defineConfig({
   reporter: process.env.CI ? "blob" : "html",
   timeout: 10 * 60 * 1000,
   use: {
-    trace: "on-all-retries",
-    video: "on-first-retry",
+    trace: "off",
+    video: "off",
     screenshot: "on",
     testIdAttribute: "data-test",
     contextOptions: {

src/Common/dataAccess/deleteStoredProcedure.ts

@@ -28,6 +28,7 @@ export async function deleteStoredProcedure(
     } else {
       await client().database(databaseId).container(collectionId).scripts.storedProcedure(storedProcedureId).delete();
     }
+    logConsoleProgress(`Successfully deleted stored procedure ${storedProcedureId}`);
   } catch (error) {
     handleError(error, "DeleteStoredProcedure", `Error while deleting stored procedure ${storedProcedureId}`);
     throw error;

src/Common/dataAccess/deleteUserDefinedFunction.ts

@@ -24,6 +24,7 @@ export async function deleteUserDefinedFunction(databaseId: string, collectionId
     } else {
       await client().database(databaseId).container(collectionId).scripts.userDefinedFunction(id).delete();
     }
+    logConsoleProgress(`Successfully deleted user defined function ${id}`);
   } catch (error) {
     handleError(error, "DeleteUserDefinedFunction", `Error while deleting user defined function ${id}`);
     throw error;

src/Explorer/Controls/Settings/SettingsSubComponents/ComputedPropertiesComponent.tsx

@@ -155,7 +155,12 @@ export class ComputedPropertiesComponent extends React.Component<
           </Link>
           &#160; about how to define computed properties and how to use them.
         </Text>
-        <div className="settingsV2Editor" tabIndex={0} ref={this.computedPropertiesDiv}></div>
+        <div
+          className="settingsV2Editor"
+          tabIndex={0}
+          ref={this.computedPropertiesDiv}
+          data-test="computed-properties-editor"
+        ></div>
       </Stack>
     );
   }

src/Explorer/Controls/Settings/SettingsSubComponents/PartitionKeyComponent.tsx

@@ -187,7 +187,7 @@ export const PartitionKeyComponent: React.FC<PartitionKeyComponentProps> = ({
             <Text styles={textSubHeadingStyle}>Current {partitionKeyName.toLowerCase()}</Text>
             <Text styles={textSubHeadingStyle}>Partitioning</Text>
           </Stack>
-          <Stack tokens={{ childrenGap: 5 }} data-test="partition-key-values">
+          <Stack tokens={{ childrenGap: 5 }}>
             <Text styles={textSubHeadingStyle1}>{partitionKeyValue}</Text>
             <Text styles={textSubHeadingStyle1}>
               {isHierarchicalPartitionedContainer() ? "Hierarchical" : "Non-hierarchical"}
@@ -199,7 +199,6 @@ export const PartitionKeyComponent: React.FC<PartitionKeyComponentProps> = ({
       {!isReadOnly && (
         <>
           <MessageBar
-            data-test="partition-key-warning"
             messageBarType={MessageBarType.warning}
             messageBarIconProps={{ iconName: "WarningSolid", className: "messageBarWarningIcon" }}
             styles={darkThemeMessageBarStyles}
@@ -221,7 +220,6 @@ export const PartitionKeyComponent: React.FC<PartitionKeyComponentProps> = ({
           </Text>
           {configContext.platform !== Platform.Emulator && (
             <PrimaryButton
-              data-test="change-partition-key-button"
               styles={{ root: { width: "fit-content" } }}
               text="Change"
               onClick={startPartitionkeyChangeWorkflow}

src/Explorer/Controls/Settings/SettingsSubComponents/SubSettingsComponent.tsx

@@ -302,8 +302,8 @@ export class SubSettingsComponent extends React.Component<SubSettingsComponentPr
   );
 
   private geoSpatialConfigTypeChoiceGroupOptions: IChoiceGroupOption[] = [
-    { key: GeospatialConfigType.Geography, text: "Geography" },
-    { key: GeospatialConfigType.Geometry, text: "Geometry" },
+    { key: GeospatialConfigType.Geography, text: "Geography", ariaLabel: "geography-option" },
+    { key: GeospatialConfigType.Geometry, text: "Geometry", ariaLabel: "geometry-option" },
   ];
 
   private getGeoSpatialComponent = (): JSX.Element => (

src/Explorer/Controls/Settings/SettingsSubComponents/__snapshots__/ComputedPropertiesComponent.test.tsx.snap

@@ -31,6 +31,7 @@ exports[`ComputedPropertiesComponent renders 1`] = `
   </Text>
   <div
     className="settingsV2Editor"
+    data-test="computed-properties-editor"
     tabIndex={0}
   />
 </Stack>

src/Explorer/Controls/Settings/SettingsSubComponents/__snapshots__/PartitionKeyComponent.test.tsx.snap

@@ -78,7 +78,6 @@ exports[`PartitionKeyComponent renders default component and matches snapshot 1`
         </Text>
       </Stack>
       <Stack
-        data-test="partition-key-values"
         tokens={
           {
             "childrenGap": 5,
@@ -109,7 +108,6 @@ exports[`PartitionKeyComponent renders default component and matches snapshot 1`
     </Stack>
   </Stack>
   <StyledMessageBar
-    data-test="partition-key-warning"
     messageBarIconProps={
       {
         "className": "messageBarWarningIcon",
@@ -162,7 +160,6 @@ exports[`PartitionKeyComponent renders default component and matches snapshot 1`
     To change the partition key, a new destination container must be created or an existing destination container selected. Data will then be copied to the destination container.
   </Text>
   <CustomizedPrimaryButton
-    data-test="change-partition-key-button"
     onClick={[Function]}
     styles={
       {
@@ -240,7 +237,6 @@ exports[`PartitionKeyComponent renders read-only component and matches snapshot
         </Text>
       </Stack>
       <Stack
-        data-test="partition-key-values"
         tokens={
           {
             "childrenGap": 5,

src/Explorer/Controls/Settings/SettingsSubComponents/__snapshots__/SubSettingsComponent.test.tsx.snap

@@ -167,10 +167,12 @@ exports[`SubSettingsComponent analyticalTimeToLive hidden 1`] = `
     options={
       [
         {
+          "ariaLabel": "geography-option",
           "key": "Geography",
           "text": "Geography",
         },
         {
+          "ariaLabel": "geometry-option",
           "key": "Geometry",
           "text": "Geometry",
         },
@@ -652,10 +654,12 @@ exports[`SubSettingsComponent analyticalTimeToLiveSeconds hidden 1`] = `
     options={
       [
         {
+          "ariaLabel": "geography-option",
           "key": "Geography",
           "text": "Geography",
         },
         {
+          "ariaLabel": "geometry-option",
           "key": "Geometry",
           "text": "Geometry",
         },
@@ -1224,10 +1228,12 @@ exports[`SubSettingsComponent changeFeedPolicy hidden 1`] = `
     options={
       [
         {
+          "ariaLabel": "geography-option",
           "key": "Geography",
           "text": "Geography",
         },
         {
+          "ariaLabel": "geometry-option",
           "key": "Geometry",
           "text": "Geometry",
         },
@@ -1760,10 +1766,12 @@ exports[`SubSettingsComponent renders 1`] = `
     options={
       [
         {
+          "ariaLabel": "geography-option",
           "key": "Geography",
           "text": "Geography",
         },
         {
+          "ariaLabel": "geometry-option",
           "key": "Geometry",
           "text": "Geometry",
         },
@@ -2330,10 +2338,12 @@ exports[`SubSettingsComponent timeToLiveSeconds hidden 1`] = `
     options={
       [
         {
+          "ariaLabel": "geography-option",
           "key": "Geography",
           "text": "Geography",
         },
         {
+          "ariaLabel": "geometry-option",
           "key": "Geometry",
           "text": "Geometry",
         },

src/Explorer/Explorer.tsx

@@ -437,14 +437,13 @@ export default class Explorer {
   public onRefreshResourcesClick = async (): Promise<void> => {
     if (isFabricMirroredKey()) {
       scheduleRefreshFabricToken(true).then(() => this.refreshAllDatabases());
-    } else {
-      await (userContext.authType === AuthType.ResourceToken
-        ? this.refreshDatabaseForResourceToken()
-        : this.refreshAllDatabases());
-      await this.refreshNotebookList();
+      return;
     }
 
-    logConsoleInfo("Successfully refreshed databases");
+    await (userContext.authType === AuthType.ResourceToken
+      ? this.refreshDatabaseForResourceToken()
+      : this.refreshAllDatabases());
+    await this.refreshNotebookList();
   };
 
   // Facade

src/Explorer/Panes/ChangePartitionKeyPane/ChangePartitionKeyPane.tsx

@@ -208,7 +208,7 @@ export const ChangePartitionKeyPane: React.FC<ChangePartitionKeyPaneProps> = ({
           </div>
         </Stack>
         {createNewContainer ? (
-          <Stack data-test="create-new-container-form">
+          <Stack>
             <MessageBar>All configurations except for unique keys will be copied from the source container</MessageBar>
             <Stack className="panelGroupSpacing">
               <Stack horizontal>
@@ -230,7 +230,6 @@ export const ChangePartitionKeyPane: React.FC<ChangePartitionKeyPaneProps> = ({
                 </TooltipHost>
               </Stack>
               <input
-                data-test="new-container-id-input"
                 name="collectionId"
                 id="collectionId"
                 type="text"
@@ -272,7 +271,6 @@ export const ChangePartitionKeyPane: React.FC<ChangePartitionKeyPaneProps> = ({
 
               <input
                 type="text"
-                data-test="new-container-partition-key-input"
                 id="addCollection-partitionKeyValue"
                 aria-required
                 required
@@ -306,7 +304,6 @@ export const ChangePartitionKeyPane: React.FC<ChangePartitionKeyPaneProps> = ({
                       type="text"
                       id="addCollection-partitionKeyValue"
                       key={`addCollection-partitionKeyValue_${index}`}
-                      data-test={`new-container-sub-partition-key-input-${index}`}
                       aria-required
                       required
                       size={40}
@@ -330,8 +327,6 @@ export const ChangePartitionKeyPane: React.FC<ChangePartitionKeyPaneProps> = ({
                       }}
                     />
                     <IconButton
-                      data-test={`remove-sub-partition-key-button-${index}`}
-                      ariaLabel="Remove hierarchical partition key"
                       iconProps={{ iconName: "Delete" }}
                       style={{ height: 27 }}
                       onClick={() => {
@@ -344,7 +339,6 @@ export const ChangePartitionKeyPane: React.FC<ChangePartitionKeyPaneProps> = ({
               })}
               <Stack className="panelGroupSpacing">
                 <DefaultButton
-                  data-test="add-sub-partition-key-button"
                   styles={{ root: { padding: 0, width: 200, height: 30 }, label: { fontSize: 12 } }}
                   disabled={subPartitionKeys.length >= Constants.BackendDefaults.maxNumMultiHashPartition}
                   onClick={() => setSubPartitionKeys([...subPartitionKeys, ""])}
@@ -352,11 +346,7 @@ export const ChangePartitionKeyPane: React.FC<ChangePartitionKeyPaneProps> = ({
                   Add hierarchical partition key
                 </DefaultButton>
                 {subPartitionKeys.length > 0 && (
-                  <Text
-                    data-test="hierarchical-partitioning-info-text"
-                    variant="small"
-                    style={{ color: "var(--colorNeutralForeground1)" }}
-                  >
+                  <Text variant="small" style={{ color: "var(--colorNeutralForeground1)" }}>
                     <Icon iconName="InfoSolid" className="removeIcon" tabIndex={0} /> This feature allows you to
                     partition your data with up to three levels of keys for better data distribution. Requires .NET V3,
                     Java V4 SDK, or preview JavaScript V3 SDK.{" "}
@@ -369,7 +359,7 @@ export const ChangePartitionKeyPane: React.FC<ChangePartitionKeyPaneProps> = ({
             </Stack>
           </Stack>
         ) : (
-          <Stack data-test="use-existing-container-form">
+          <Stack>
             <Stack horizontal>
               <span className="mandatoryStar">*&nbsp;</span>
               <Text className="panelTextBold" variant="small">
@@ -400,7 +390,6 @@ export const ChangePartitionKeyPane: React.FC<ChangePartitionKeyPaneProps> = ({
               }}
               defaultSelectedKey={targetCollectionId}
               responsiveMode={999}
-              ariaLabel="Existing Containers"
             />
           </Stack>
         )}

src/Explorer/Panes/UploadItemsPane/UploadItemsPane.tsx

@@ -205,7 +205,7 @@ export const UploadItemsPane: FunctionComponent<UploadItemsPaneProps> = ({ onUpl
           tooltip="Select one or more JSON files to upload. Each file can contain a single JSON document or an array of JSON documents. The combined size of all files in an individual upload operation must be less than 2 MB. You can perform multiple upload operations for larger data sets."
         />
         {uploadFileData?.length > 0 && (
-          <div className="fileUploadSummaryContainer">
+          <div className="fileUploadSummaryContainer" data-test="file-upload-status">
             <b style={{ color: "var(--colorNeutralForeground1)" }}>File upload status</b>
             <DetailsList
               items={uploadFileData}

src/Explorer/Tabs/StoredProcedureTab/StoredProcedureTabComponent.tsx

@@ -1,6 +1,7 @@
 import { Resource, StoredProcedureDefinition } from "@azure/cosmos";
 import { Pivot, PivotItem } from "@fluentui/react";
 import { KeyboardAction } from "KeyboardShortcuts";
+import { logConsoleInfo } from "Utils/NotificationConsoleUtils";
 import { ValidCosmosDbIdDescription, ValidCosmosDbIdInputPattern } from "Utils/ValidationUtils";
 import React from "react";
 import ExecuteQueryIcon from "../../../../images/ExecuteQuery.svg";
@@ -435,7 +436,7 @@ export default class StoredProcedureTabComponent extends React.Component<
             });
             useCommandBar.getState().setContextButtons(this.getTabsButtons());
           }, 100);
-
+          logConsoleInfo(`Sucessfully created stored procedure ${createdResource.id}`);
           return createdResource;
         },
         (createError) => {

src/Explorer/Tabs/UserDefinedFunctionTabContent.tsx

@@ -2,6 +2,7 @@ import { UserDefinedFunctionDefinition } from "@azure/cosmos";
 import { Label, TextField } from "@fluentui/react";
 import { FluentProvider, webDarkTheme, webLightTheme } from "@fluentui/react-components";
 import { KeyboardAction } from "KeyboardShortcuts";
+import { logConsoleInfo } from "Utils/NotificationConsoleUtils";
 import { ValidCosmosDbIdDescription, ValidCosmosDbIdInputPattern } from "Utils/ValidationUtils";
 import { useThemeStore } from "hooks/useTheme";
 import React, { Component } from "react";
@@ -170,6 +171,7 @@ export default class UserDefinedFunctionTabContent extends Component<
           startKey,
         );
         this.props.editorState(ViewModels.ScriptEditorState.existingNoEdits);
+        logConsoleInfo(`Sucessfully created user defined function ${createdResource.id}`);
       }
     } catch (createError) {
       this.props.isExecutionError(true);

src/Explorer/Tree/Collection.ts

@@ -598,9 +598,6 @@ export default class Collection implements ViewModels.Collection {
   public onSettingsClick = async (): Promise<void> => {
     useSelectedNode.getState().setSelectedNode(this);
     const throughputCap = userContext.databaseAccount?.properties.capacity?.totalThroughputLimit;
-    // // Refresh all databases in case they were deleted outside of user session
-    await this.container.onRefreshResourcesClick();
-
     throughputCap && throughputCap !== -1 ? await useDatabases.getState().loadAllOffers() : await this.loadOffer();
     this.selectedSubnodeKind(ViewModels.CollectionTabKind.Settings);
     TelemetryProcessor.trace(Action.SelectItem, ActionModifiers.Mark, {

test/cassandra/container.spec.ts

@@ -8,8 +8,7 @@ test("Cassandra keyspace and table CRUD", async ({ page }) => {
 
   const explorer = await DataExplorer.open(page, TestAccount.Cassandra);
 
-  const newTableButton = await explorer.globalCommandButton("New Table");
-  await newTableButton.click();
+  await explorer.globalCommandButton("New Table").click();
   await explorer.whilePanelOpen(
     "Add Table",
     async (panel, okButton) => {

test/fx.ts

@@ -325,7 +325,9 @@ type PanelOpenOptions = {
 
 export enum CommandBarButton {
   Save = "Save",
+  Execute = "Execute",
   ExecuteQuery = "Execute Query",
+  UploadItem = "Upload Item",
 }
 
 /** Helper class that provides locator methods for DataExplorer components, on top of a Frame */
@@ -352,9 +354,8 @@ export class DataExplorer {
    *
    * There's only a single "primary" button, but we still require you to pass the label to confirm you're selecting the right button.
    */
-  async globalCommandButton(label: string): Promise<Locator> {
-    await this.frame.getByTestId("GlobalCommands").click();
-    return this.frame.getByRole("menuitem", { name: label });
+  globalCommandButton(label: string): Locator {
+    return this.frame.getByTestId("GlobalCommands").getByText(label);
   }
 
   /** Select the command bar button with the specified label */
@@ -460,15 +461,6 @@ export class DataExplorer {
     const containerNode = await this.waitForContainerNode(context.database.id, context.container.id);
     await containerNode.expand();
 
-    // // refresh tree to remove deleted database
-    // const consoleMessages = await this.getNotificationConsoleMessages();
-    // const refreshButton = this.frame.getByTestId("Sidebar/RefreshButton");
-    // await refreshButton.click();
-    // await expect(consoleMessages).toContainText("Successfully refreshed databases", {
-    //   timeout: ONE_MINUTE_MS,
-    // });
-    // await this.collapseNotificationConsole();
-
     const scaleAndSettingsButton = this.frame.getByTestId(
       `TreeNode:${context.database.id}/${context.container.id}/Scale & Settings`,
     );
@@ -476,44 +468,10 @@ export class DataExplorer {
   }
 
   /** Gets the console message element */
-  getConsoleHeaderStatus(): Locator {
+  getConsoleMessage(): Locator {
     return this.frame.getByTestId("notification-console/header-status");
   }
 
-  async expandNotificationConsole(): Promise<void> {
-    await this.setNotificationConsoleExpanded(true);
-  }
-
-  async collapseNotificationConsole(): Promise<void> {
-    await this.setNotificationConsoleExpanded(false);
-  }
-
-  async setNotificationConsoleExpanded(expanded: boolean): Promise<void> {
-    const notificationConsoleToggleButton = this.frame.getByTestId("NotificationConsole/ExpandCollapseButton");
-    const alt = await notificationConsoleToggleButton.locator("img").getAttribute("alt");
-
-    // When expanded, the icon says "Collapse icon"
-    if (expanded && alt === "Expand icon") {
-      await notificationConsoleToggleButton.click();
-    } else if (!expanded && alt === "Collapse icon") {
-      await notificationConsoleToggleButton.click();
-    }
-  }
-
-  async getNotificationConsoleMessages(): Promise<Locator> {
-    await this.setNotificationConsoleExpanded(true);
-    return this.frame.getByTestId("NotificationConsole/Contents");
-  }
-
-  async getDropdownItemByName(name: string, ariaLabel?: string): Promise<Locator> {
-    const dropdownItemsWrapper = this.frame.locator("div.ms-Dropdown-items");
-    if (ariaLabel) {
-      expect(await dropdownItemsWrapper.getAttribute("aria-label")).toEqual(ariaLabel);
-    }
-    const containerDropdownItems = dropdownItemsWrapper.locator("button.ms-Dropdown-item[role='option']");
-    return containerDropdownItems.filter({ hasText: name });
-  }
-
   /** Waits for the Data Explorer app to load */
   static async waitForExplorer(page: Page) {
     const iframeElement = await page.getByTestId("DataExplorerFrame").elementHandle();

test/gremlin/container.spec.ts

@@ -9,8 +9,7 @@ test("Gremlin graph CRUD", async ({ page }) => {
   const explorer = await DataExplorer.open(page, TestAccount.Gremlin);
 
   // Create new database and graph
-  const newGraphButton = await explorer.globalCommandButton("New Graph");
-  await newGraphButton.click();
+  await explorer.globalCommandButton("New Graph").click();
   await explorer.whilePanelOpen(
     "New Graph",
     async (panel, okButton) => {

test/mongo/container.spec.ts

@@ -14,8 +14,7 @@ import { DataExplorer, TEST_AUTOSCALE_THROUGHPUT_RU, TestAccount, generateUnique
 
     const explorer = await DataExplorer.open(page, accountType);
 
-    const newCollectionButton = await explorer.globalCommandButton("New Collection");
-    await newCollectionButton.click();
+    await explorer.globalCommandButton("New Collection").click();
     await explorer.whilePanelOpen(
       "New Collection",
       async (panel, okButton) => {

test/sql/container.spec.ts

@@ -8,8 +8,7 @@ test("SQL database and container CRUD", async ({ page }) => {
 
   const explorer = await DataExplorer.open(page, TestAccount.SQL);
 
-  const newContainerButton = await explorer.globalCommandButton("New Container");
-  await newContainerButton.click();
+  await explorer.globalCommandButton("New Container").click();
   await explorer.whilePanelOpen(
     "New Container",
     async (panel, okButton) => {

test/sql/document.spec.ts

@@ -1,7 +1,17 @@
 import { expect, test } from "@playwright/test";
 
-import { DataExplorer, DocumentsTab, TestAccount } from "../fx";
-import { retry, setPartitionKeys } from "../testData";
+import { existsSync, unlinkSync, writeFileSync } from "fs";
+import path from "path";
+import { CommandBarButton, DataExplorer, DocumentsTab, ONE_MINUTE_MS, TestAccount } from "../fx";
+import {
+  createTestSQLContainer,
+  itemsPerPartition,
+  partitionCount,
+  retry,
+  setPartitionKeys,
+  TestContainerContext,
+  TestData,
+} from "../testData";
 import { documentTestCases } from "./testCases";
 
 let explorer: DataExplorer = null!;
@@ -95,3 +105,108 @@ for (const { name, databaseId, containerId, documents } of documentTestCases) {
     }
   });
 }
+
+test.describe.serial("Upload Item", () => {
+  let context: TestContainerContext = null!;
+  const uploadDocumentFilePath: string = path.join(__dirname, "uploadDocument.json");
+
+  test.beforeEach("Create Test Database and Open documents tab", async ({ page }) => {
+    context = await createTestSQLContainer();
+    explorer = await DataExplorer.open(page, TestAccount.SQL);
+
+    const containerNode = await explorer.waitForContainerNode(context.database.id, context.container.id);
+    await containerNode.expand();
+
+    const containerMenuNode = await explorer.waitForContainerItemsNode(context.database.id, context.container.id);
+    await containerMenuNode.element.click();
+  });
+
+  test.afterEach("Delete Test Database and uploadDocument.json", async () => {
+    if (existsSync(uploadDocumentFilePath)) {
+      unlinkSync(uploadDocumentFilePath);
+    }
+    await context?.dispose();
+  });
+
+  test("upload document", async () => {
+    // Create file to upload
+    const TestDataJsonString: string = JSON.stringify(TestData, null, 2);
+    writeFileSync(uploadDocumentFilePath, TestDataJsonString);
+
+    const uploadItemCommandBar = explorer.commandBarButton(CommandBarButton.UploadItem);
+    await uploadItemCommandBar.click();
+
+    // Select file to upload
+    await explorer.frame.setInputFiles("#importFileInput", uploadDocumentFilePath);
+
+    const uploadButton = explorer.frame.getByTestId("Panel/OkButton");
+    await uploadButton.click();
+
+    // Verify upload success message
+    const fileUploadStatusExpected: string = `${partitionCount * itemsPerPartition} created, 0 throttled, 0 errors`;
+    const fileUploadStatus = explorer.frame.getByTestId("file-upload-status");
+    await expect(fileUploadStatus).toContainText(fileUploadStatusExpected, {
+      timeout: ONE_MINUTE_MS,
+    });
+  });
+
+  test("upload same document twice", async () => {
+    // Create file to upload
+    const TestDataJsonString: string = JSON.stringify(TestData, null, 2);
+    writeFileSync(uploadDocumentFilePath, TestDataJsonString);
+
+    const uploadItemCommandBar = explorer.commandBarButton(CommandBarButton.UploadItem);
+    await uploadItemCommandBar.click();
+
+    // Select file to upload
+    await explorer.frame.setInputFiles("#importFileInput", uploadDocumentFilePath);
+
+    const uploadButton = explorer.frame.getByTestId("Panel/OkButton");
+    await uploadButton.click();
+
+    // Verify upload success message
+    const fileUploadStatusExpected: string = `${partitionCount * itemsPerPartition} created, 0 throttled, 0 errors`;
+    const fileUploadStatus = explorer.frame.getByTestId("file-upload-status");
+    await expect(fileUploadStatus).toContainText(fileUploadStatusExpected, {
+      timeout: ONE_MINUTE_MS,
+    });
+
+    // Select file to upload again
+    await explorer.frame.setInputFiles("#importFileInput", uploadDocumentFilePath);
+    await uploadButton.click();
+
+    // Verify upload failure message
+    const errorIcon = explorer.frame.getByRole("img", { name: "error" });
+    await expect(errorIcon).toBeVisible({ timeout: ONE_MINUTE_MS });
+    await expect(fileUploadStatus).toContainText(
+      `0 created, 0 throttled, ${partitionCount * itemsPerPartition} errors`,
+      {
+        timeout: ONE_MINUTE_MS,
+      },
+    );
+  });
+
+  test("upload invalid json", async () => {
+    // Create file to upload
+    let TestDataJsonString: string = JSON.stringify(TestData, null, 2);
+    // Remove the first '[' so that it becomes invalid json
+    TestDataJsonString = TestDataJsonString.substring(1);
+    writeFileSync(uploadDocumentFilePath, TestDataJsonString);
+
+    const uploadItemCommandBar = explorer.commandBarButton(CommandBarButton.UploadItem);
+    await uploadItemCommandBar.click();
+
+    // Select file to upload
+    await explorer.frame.setInputFiles("#importFileInput", uploadDocumentFilePath);
+
+    const uploadButton = explorer.frame.getByTestId("Panel/OkButton");
+    await uploadButton.click();
+
+    // Verify upload failure message
+    const fileUploadStatusExpected: string = "Unexpected non-whitespace character after JSON";
+    const fileUploadErrorList = explorer.frame.getByLabel("error list");
+    await expect(fileUploadErrorList).toContainText(fileUploadStatusExpected, {
+      timeout: ONE_MINUTE_MS,
+    });
+  });
+});

test/sql/query.spec.ts

@@ -9,7 +9,7 @@ let queryTab: QueryTab = null!;
 let queryEditor: Editor = null!;
 
 test.beforeAll("Create Test Database", async () => {
-  context = await createTestSQLContainer({ includeTestData: true });
+  context = await createTestSQLContainer(true);
 });
 
 test.beforeEach("Open new query tab", async ({ page }) => {

test/sql/scaleAndSettings/changePartitionKey.spec.ts

@@ -1,102 +0,0 @@
-import { expect, Page, test } from "@playwright/test";
-import { DataExplorer, TestAccount } from "../../fx";
-import { createTestSQLContainer, TestContainerContext } from "../../testData";
-
-test.describe("Change Partition Key", () => {
-  let pageInstance: Page;
-  let context: TestContainerContext = null!;
-  let explorer: DataExplorer = null!;
-  const newPartitionKeyPath = "newPartitionKey";
-  const newContainerId = "testcontainer_1";
-
-  test.beforeAll("Create Test Database", async () => {
-    context = await createTestSQLContainer();
-  });
-
-  test.beforeEach("Open container settings", async ({ page }) => {
-    pageInstance = page;
-    explorer = await DataExplorer.open(page, TestAccount.SQL);
-
-    // Click Scale & Settings and open Partition Key tab
-    await explorer.openScaleAndSettings(context);
-    const PartitionKeyTab = explorer.frame.getByTestId("settings-tab-header/PartitionKeyTab");
-    
-    await expect(PartitionKeyTab).toBeVisible();
-    await PartitionKeyTab.click();
-  });
-
-  if (!process.env.CI) {
-    test.afterEach("Delete Test Database", async () => {
-      await context?.dispose();
-    });
-  }
-
-  test("Change partition key path", async () => {
-    await expect(explorer.frame.getByText("/partitionKey")).toBeVisible();
-    await expect(explorer.frame.getByText("Change partition key")).toBeVisible();
-    await expect(explorer.frame.getByText(/To safeguard the integrity of/)).toBeVisible();
-    await expect(explorer.frame.getByText(/To change the partition key/)).toBeVisible();
-
-    const changePartitionKeyButton = explorer.frame.getByTestId("change-partition-key-button");
-    expect(changePartitionKeyButton).toBeVisible();
-    await changePartitionKeyButton.click();
-
-    // Fill out new partition key form in the panel
-    const changePkPanel = explorer.frame.getByTestId(`Panel:Change partition key`);
-    await expect(changePkPanel.getByText(context.database.id)).toBeVisible();
-    await expect(explorer.frame.getByRole("heading", { name: "Change partition key" })).toBeVisible();
-    await expect(explorer.frame.getByText(/When changing a container/)).toBeVisible();
-
-    // Try to switch to new container
-    await expect(changePkPanel.getByText("New container")).toBeVisible();
-    await expect(changePkPanel.getByText("Existing container")).toBeVisible();
-    await expect(changePkPanel.getByTestId("new-container-id-input")).toBeVisible();
-
-    changePkPanel.getByTestId("new-container-id-input").fill(newContainerId);
-    await expect(changePkPanel.getByTestId("new-container-partition-key-input")).toBeVisible();
-    changePkPanel.getByTestId("new-container-partition-key-input").fill(newPartitionKeyPath);
-
-    await expect(changePkPanel.getByTestId("add-sub-partition-key-button")).toBeVisible();
-    changePkPanel.getByTestId("add-sub-partition-key-button").click();
-    await expect(changePkPanel.getByTestId("new-container-sub-partition-key-input-0")).toBeVisible();
-    await expect(changePkPanel.getByTestId("remove-sub-partition-key-button-0")).toBeVisible();
-    await expect(changePkPanel.getByTestId("hierarchical-partitioning-info-text")).toBeVisible();
-    changePkPanel.getByTestId("new-container-sub-partition-key-input-0").fill("customerId");
-
-    await changePkPanel.getByTestId("Panel/OkButton").click();
-
-    await pageInstance.waitForLoadState("networkidle");
-    await expect(changePkPanel).not.toBeVisible({ timeout: 60 * 1000 });
-
-    // Verify partition key change job
-    const jobText = explorer.frame.getByText(/Partition key change job/);
-    await expect(jobText).toBeVisible();
-    await expect(explorer.frame.locator(".ms-ProgressIndicator-itemName")).toContainText("Portal_testcontainer_1");
-
-    const jobRow = explorer.frame.locator(".ms-ProgressIndicator-itemDescription");
-    await expect(jobRow.getByText("Completed")).toBeVisible({ timeout: 30 * 1000 });
-
-    const newContainerNode = await explorer.waitForContainerNode(context.database.id, newContainerId);
-    expect(newContainerNode).not.toBeNull();
-
-    // Now try to switch to existing container
-    await changePartitionKeyButton.click();
-    await changePkPanel.getByText("Existing container").click();
-    await changePkPanel.getByLabel("Use existing container").check();
-    await changePkPanel.getByText("Choose an existing container").click();
-
-    const containerDropdownItem = await explorer.getDropdownItemByName(newContainerId, "Existing Containers");
-    await containerDropdownItem.click();
-
-    await changePkPanel.getByTestId("Panel/OkButton").click();
-    await explorer.frame.getByRole("button", { name: "Cancel" }).click();
-
-    // Dismiss overlay if it appears
-    const overlayFrame = explorer.frame.locator("#webpack-dev-server-client-overlay").first();
-    if (await overlayFrame.count()) {
-      await overlayFrame.contentFrame().getByLabel("Dismiss").click();
-    }
-    const cancelledJobRow = explorer.frame.getByTestId("Tab:tab0");
-    await expect(cancelledJobRow.getByText("Cancelled")).toBeVisible({ timeout: 30 * 1000 });
-  });
-});

test/sql/scaleAndSettings/computedProperties.spec.ts

@@ -0,0 +1,103 @@
+import { expect, test } from "@playwright/test";
+import * as DataModels from "../../../src/Contracts/DataModels";
+import { CommandBarButton, DataExplorer, ONE_MINUTE_MS, TestAccount } from "../../fx";
+import { createTestSQLContainer, TestContainerContext } from "../../testData";
+
+test.describe("Computed Properties", () => {
+  let context: TestContainerContext = null!;
+  let explorer: DataExplorer = null!;
+
+  test.beforeAll("Create Test Database", async () => {
+    context = await createTestSQLContainer(true);
+  });
+
+  test.beforeEach("Open Settings tab under Scale & Settings", async ({ page }) => {
+    explorer = await DataExplorer.open(page, TestAccount.SQL);
+    const containerNode = await explorer.waitForContainerNode(context.database.id, context.container.id);
+    await containerNode.expand();
+
+    // Click Scale & Settings and open Settings tab
+    await explorer.openScaleAndSettings(context);
+    const computedPropertiesTab = explorer.frame.getByTestId("settings-tab-header/ComputedPropertiesTab");
+    await computedPropertiesTab.click();
+  });
+
+  test.afterAll("Delete Test Database", async () => {
+    await context?.dispose();
+  });
+
+  test("Add valid computed property", async ({ page }) => {
+    await clearComputedPropertiesTextBoxContent({ page });
+
+    // Create computed property
+    const computedProperties: DataModels.ComputedProperties = [
+      {
+        name: "cp_lowerName",
+        query: "SELECT VALUE LOWER(c.name) FROM c",
+      },
+    ];
+    const computedPropertiesString: string = JSON.stringify(computedProperties);
+    await page.keyboard.type(computedPropertiesString);
+
+    // Save changes
+    const saveButton = explorer.commandBarButton(CommandBarButton.Save);
+    await expect(saveButton).toBeEnabled();
+    await saveButton.click();
+    await expect(explorer.getConsoleMessage()).toContainText(`Successfully updated container ${context.container.id}`, {
+      timeout: ONE_MINUTE_MS,
+    });
+  });
+
+  test("Add computed property with invalid query", async ({ page }) => {
+    await clearComputedPropertiesTextBoxContent({ page });
+
+    // Create computed property with no VALUE keyword in query
+    const computedProperties: DataModels.ComputedProperties = [
+      {
+        name: "cp_lowerName",
+        query: "SELECT LOWER(c.name) FROM c",
+      },
+    ];
+    const computedPropertiesString: string = JSON.stringify(computedProperties);
+    await page.keyboard.type(computedPropertiesString);
+
+    // Save changes
+    const saveButton = explorer.commandBarButton(CommandBarButton.Save);
+    await expect(saveButton).toBeEnabled();
+    await saveButton.click();
+    await expect(explorer.getConsoleMessage()).toContainText(`Failed to update container ${context.container.id}`, {
+      timeout: ONE_MINUTE_MS,
+    });
+  });
+
+  test("Add computed property with invalid json", async ({ page }) => {
+    await clearComputedPropertiesTextBoxContent({ page });
+
+    // Create computed property with no VALUE keyword in query
+    const computedProperties: DataModels.ComputedProperties = [
+      {
+        name: "cp_lowerName",
+        query: "SELECT LOWER(c.name) FROM c",
+      },
+    ];
+    const computedPropertiesString: string = JSON.stringify(computedProperties);
+    await page.keyboard.type(computedPropertiesString + "]");
+
+    // Save button should remain disabled due to invalid json
+    const saveButton = explorer.commandBarButton(CommandBarButton.Save);
+    await expect(saveButton).toBeDisabled();
+  });
+
+  const clearComputedPropertiesTextBoxContent = async ({ page }): Promise<void> => {
+    // Get computed properties text box
+    const computedPropertiesTextBox = explorer.frame.getByRole("textbox", { name: "Computed properties" });
+    await computedPropertiesTextBox.waitFor();
+    const computedPropertiesEditor = explorer.frame.getByTestId("computed-properties-editor");
+    await computedPropertiesEditor.click();
+
+    // Clear existing content
+    const isMac: boolean = process.platform === "darwin";
+    await page.keyboard.press(isMac ? "Meta+A" : "Control+A");
+    await page.keyboard.press("Backspace");
+  };
+});

test/sql/scaleAndSettings/scale.spec.ts

@@ -9,38 +9,39 @@ import {
 } from "../../fx";
 import { createTestSQLContainer, TestContainerContext } from "../../testData";
 
-test.describe("Autoscale throughput", () => {
+test.describe("Autoscale and Manual throughput", () => {
   let context: TestContainerContext = null!;
   let explorer: DataExplorer = null!;
 
-  test.beforeAll("Create Test Database", async ({ browser }) => {
-    context = await createTestSQLContainer();
-    const page = await browser.newPage();
+  test.beforeAll("Create Test Database", async () => {
+    context = await createTestSQLContainer(true);
+  });
+
+  test.beforeEach("Open container settings", async ({ page }) => {
     explorer = await DataExplorer.open(page, TestAccount.SQL);
 
     // Click Scale & Settings and open Scale tab
     await explorer.openScaleAndSettings(context);
     const scaleTab = explorer.frame.getByTestId("settings-tab-header/ScaleTab");
     await scaleTab.click();
-
-    await switchManualToAutoscaleThroughput();
   });
 
-  if (!process.env.CI) {
-    test.afterAll("Delete Test Database", async () => {
-      await context?.dispose();
-    });
-  }
+  test.afterAll("Delete Test Database", async () => {
+    await context?.dispose();
+  });
 
   test("Update autoscale max throughput", async () => {
+    // By default the created container has manual throughput (Containers created via JS SDK v4.7.0 cannot be created with autoscale throughput)
+    await switchManualToAutoscaleThroughput();
+
     // Update autoscale max throughput
-    await getThroughputInput(explorer, "autopilot").fill(TEST_AUTOSCALE_MAX_THROUGHPUT_RU_2K.toString());
+    await getThroughputInput("autopilot").fill(TEST_AUTOSCALE_MAX_THROUGHPUT_RU_2K.toString());
 
     // Save
     await explorer.commandBarButton(CommandBarButton.Save).click();
 
     // Read console message
-    await expect(explorer.getConsoleHeaderStatus()).toContainText(
+    await expect(explorer.getConsoleMessage()).toContainText(
       `Successfully updated offer for collection ${context.container.id}`,
       {
         timeout: 2 * ONE_MINUTE_MS,
@@ -49,6 +50,9 @@ test.describe("Autoscale throughput", () => {
   });
 
   test("Update autoscale max throughput passed allowed limit", async () => {
+    // By default the created container has manual throughput (Containers created via JS SDK v4.7.0 cannot be created with autoscale throughput)
+    await switchManualToAutoscaleThroughput();
+
     // Get soft allowed max throughput and remove commas
     const softAllowedMaxThroughputString = await explorer.frame
       .getByTestId("soft-allowed-maximum-throughput")
@@ -56,65 +60,29 @@ test.describe("Autoscale throughput", () => {
     const softAllowedMaxThroughput = Number(softAllowedMaxThroughputString.replace(/,/g, ""));
 
     // Try to set autoscale max throughput above allowed limit
-    await getThroughputInput(explorer, "autopilot").fill((softAllowedMaxThroughput * 10).toString());
+    await getThroughputInput("autopilot").fill((softAllowedMaxThroughput * 10).toString());
     await expect(explorer.commandBarButton(CommandBarButton.Save)).toBeDisabled();
-    await expect(getThroughputInputErrorMessage(explorer, "autopilot")).toContainText(
+    await expect(getThroughputInputErrorMessage("autopilot")).toContainText(
       "This update isn't possible because it would increase the total throughput",
     );
   });
 
   test("Update autoscale max throughput with invalid increment", async () => {
+    // By default the created container has manual throughput (Containers created via JS SDK v4.7.0 cannot be created with autoscale throughput)
+    await switchManualToAutoscaleThroughput();
+
     // Try to set autoscale max throughput with invalid increment
-    await getThroughputInput(explorer, "autopilot").fill("1100");
+    await getThroughputInput("autopilot").fill("1100");
     await expect(explorer.commandBarButton(CommandBarButton.Save)).toBeDisabled();
-    await expect(getThroughputInputErrorMessage(explorer, "autopilot")).toContainText(
+    await expect(getThroughputInputErrorMessage("autopilot")).toContainText(
       "Throughput value must be in increments of 1000",
     );
   });
 
-  const switchManualToAutoscaleThroughput = async (): Promise<void> => {
-    const autoscaleRadioButton = explorer.frame.getByText("Autoscale", { exact: true });
-    await autoscaleRadioButton.click();
-    await expect(explorer.commandBarButton(CommandBarButton.Save)).toBeEnabled();
-    await explorer.commandBarButton(CommandBarButton.Save).click();
-    await expect(explorer.getConsoleHeaderStatus()).toContainText(
-      `Successfully updated offer for collection ${context.container.id}`,
-      {
-        timeout: ONE_MINUTE_MS,
-      },
-    );
-  };
-});
-
-test.describe("Manual throughput", () => {
-  let context: TestContainerContext = null!;
-  let explorer: DataExplorer = null!;
-
-  test.beforeAll("Create Test Database & Open container settings", async ({ browser }) => {
-    context = await createTestSQLContainer();
-    const page = await browser.newPage();
-    explorer = await DataExplorer.open(page, TestAccount.SQL);
-
-    // Click Scale & Settings and open Scale tab
-    await explorer.openScaleAndSettings(context);
-    const scaleTab = explorer.frame.getByTestId("settings-tab-header/ScaleTab");
-    await scaleTab.click();
-  });
-
-  // test.beforeEach("Open container settings", async ({ page }) => {
-
-  // });
-
-  if (!process.env.CI) {
-    test.afterAll("Delete Test Database", async () => {
-      await context?.dispose();
-    });
-  }
-
   test("Update manual throughput", async () => {
-    await getThroughputInput(explorer, "manual").fill(TEST_MANUAL_THROUGHPUT_RU_2K.toString());
+    await getThroughputInput("manual").fill(TEST_MANUAL_THROUGHPUT_RU_2K.toString());
     await explorer.commandBarButton(CommandBarButton.Save).click();
-    await expect(explorer.getConsoleHeaderStatus()).toContainText(
+    await expect(explorer.getConsoleMessage()).toContainText(
       `Successfully updated offer for collection ${context.container.id}`,
       {
         timeout: 2 * ONE_MINUTE_MS,
@@ -130,19 +98,32 @@ test.describe("Manual throughput", () => {
     const softAllowedMaxThroughput = Number(softAllowedMaxThroughputString.replace(/,/g, ""));
 
     // Try to set manual throughput above allowed limit
-    await getThroughputInput(explorer, "manual").fill((softAllowedMaxThroughput * 10).toString());
+    await getThroughputInput("manual").fill((softAllowedMaxThroughput * 10).toString());
     await expect(explorer.commandBarButton(CommandBarButton.Save)).toBeDisabled();
-    await expect(getThroughputInputErrorMessage(explorer, "manual")).toContainText(
+    await expect(getThroughputInputErrorMessage("manual")).toContainText(
       "This update isn't possible because it would increase the total throughput",
     );
   });
+
+  // Helper methods
+  const getThroughputInput = (type: "manual" | "autopilot"): Locator => {
+    return explorer.frame.getByTestId(`${type}-throughput-input`);
+  };
+
+  const getThroughputInputErrorMessage = (type: "manual" | "autopilot"): Locator => {
+    return explorer.frame.getByTestId(`${type}-throughput-input-error`);
+  };
+
+  const switchManualToAutoscaleThroughput = async (): Promise<void> => {
+    const autoscaleRadioButton = explorer.frame.getByText("Autoscale", { exact: true });
+    await autoscaleRadioButton.click();
+    await expect(explorer.commandBarButton(CommandBarButton.Save)).toBeEnabled();
+    await explorer.commandBarButton(CommandBarButton.Save).click();
+    await expect(explorer.getConsoleMessage()).toContainText(
+      `Successfully updated offer for collection ${context.container.id}`,
+      {
+        timeout: ONE_MINUTE_MS,
+      },
+    );
+  };
 });
-
-// Helper methods
-const getThroughputInput = (explorer: DataExplorer, type: "manual" | "autopilot"): Locator => {
-  return explorer.frame.getByTestId(`${type}-throughput-input`);
-};
-
-const getThroughputInputErrorMessage = (explorer: DataExplorer, type: "manual" | "autopilot"): Locator => {
-  return explorer.frame.getByTestId(`${type}-throughput-input-error`);
-};

test/sql/scaleAndSettings/settings.spec.ts

@@ -2,66 +2,109 @@ import { expect, test } from "@playwright/test";
 import { CommandBarButton, DataExplorer, ONE_MINUTE_MS, TestAccount } from "../../fx";
 import { createTestSQLContainer, TestContainerContext } from "../../testData";
 
-test.describe.serial("Settings under Scale & Settings", () => {
+test.describe("Settings under Scale & Settings", () => {
   let context: TestContainerContext = null!;
   let explorer: DataExplorer = null!;
 
-  test.beforeAll("Create Test Database", async ({ browser }) => {
-    context = await createTestSQLContainer();
-    const page = await browser.newPage();
-    explorer = await DataExplorer.open(page, TestAccount.SQL);
+  test.beforeAll("Create Test Database", async () => {
+    context = await createTestSQLContainer(true);
+  });
 
-    // Click Scale & Settings and open Scale tab
+  test.beforeEach("Open Settings tab under Scale & Settings", async ({ page }) => {
+    explorer = await DataExplorer.open(page, TestAccount.SQL);
+    const containerNode = await explorer.waitForContainerNode(context.database.id, context.container.id);
+    await containerNode.expand();
+
+    // Click Scale & Settings and open Settings tab
     await explorer.openScaleAndSettings(context);
     const settingsTab = explorer.frame.getByTestId("settings-tab-header/SubSettingsTab");
     await settingsTab.click();
   });
 
-  // test.beforeEach("Open container settings", async ({ page }) => {
-  //   explorer = await DataExplorer.open(page, TestAccount.SQL);
-
-  //   // Click Scale & Settings and open Scale tab
-  //   await explorer.openScaleAndSettings(context);
-  //   const settingsTab = explorer.frame.getByTestId("settings-tab-header/SubSettingsTab");
-  //   await settingsTab.click();
-  // });
-
-  // test.afterEach("Delete Test Database", async () => {
-  //   await context?.dispose();
-  // });
-  if (!process.env.CI) {
-    test.afterAll("Delete Test Database", async () => {
-      await context?.dispose();
-    });
-  }
-
-  test("Update TTL to On (no default)", async () => {
-    const ttlOnNoDefaultRadioButton = explorer.frame.getByRole("radio", { name: "ttl-on-no-default-option" });
-    await ttlOnNoDefaultRadioButton.click();
-
-    await explorer.commandBarButton(CommandBarButton.Save).click();
-    await expect(explorer.getConsoleHeaderStatus()).toContainText(
-      `Successfully updated container ${context.container.id}`,
-      {
-        timeout: ONE_MINUTE_MS,
-      },
-    );
+  test.afterAll("Delete Test Database", async () => {
+    await context?.dispose();
   });
 
-  test("Update TTL to On (with user entry)", async () => {
-    const ttlOnRadioButton = explorer.frame.getByRole("radio", { name: "ttl-on-option" });
-    await ttlOnRadioButton.click();
+  test.describe("Set TTL", () => {
+    test("Update TTL to On (no default)", async () => {
+      const ttlOnNoDefaultRadioButton = explorer.frame.getByRole("radio", { name: "ttl-on-no-default-option" });
+      await ttlOnNoDefaultRadioButton.click();
 
-    // Enter TTL seconds
-    const ttlInput = explorer.frame.getByTestId("ttl-input");
-    await ttlInput.fill("30000");
+      await explorer.commandBarButton(CommandBarButton.Save).click();
+      await expect(explorer.getConsoleMessage()).toContainText(
+        `Successfully updated container ${context.container.id}`,
+        {
+          timeout: ONE_MINUTE_MS,
+        },
+      );
+    });
 
-    await explorer.commandBarButton(CommandBarButton.Save).click();
-    await expect(explorer.getConsoleHeaderStatus()).toContainText(
-      `Successfully updated container ${context.container.id}`,
-      {
-        timeout: ONE_MINUTE_MS,
-      },
-    );
+    test("Update TTL to On (with user entry)", async () => {
+      const ttlOnRadioButton = explorer.frame.getByRole("radio", { name: "ttl-on-option" });
+      await ttlOnRadioButton.click();
+
+      // Enter TTL seconds
+      const ttlInput = explorer.frame.getByTestId("ttl-input");
+      await ttlInput.fill("30000");
+
+      await explorer.commandBarButton(CommandBarButton.Save).click();
+      await expect(explorer.getConsoleMessage()).toContainText(
+        `Successfully updated container ${context.container.id}`,
+        {
+          timeout: ONE_MINUTE_MS,
+        },
+      );
+    });
+
+    test("Update TTL to Off", async () => {
+      // By default TTL is set to off so we need to first set it to On
+      const ttlOnNoDefaultRadioButton = explorer.frame.getByRole("radio", { name: "ttl-on-no-default-option" });
+      await ttlOnNoDefaultRadioButton.click();
+      await explorer.commandBarButton(CommandBarButton.Save).click();
+      await expect(explorer.getConsoleMessage()).toContainText(
+        `Successfully updated container ${context.container.id}`,
+        {
+          timeout: ONE_MINUTE_MS,
+        },
+      );
+
+      // Set it to Off
+      const ttlOffRadioButton = explorer.frame.getByRole("radio", { name: "ttl-off-option" });
+      await ttlOffRadioButton.click();
+
+      await explorer.commandBarButton(CommandBarButton.Save).click();
+      await expect(explorer.getConsoleMessage()).toContainText(
+        `Successfully updated container ${context.container.id}`,
+        {
+          timeout: ONE_MINUTE_MS,
+        },
+      );
+    });
+  });
+
+  test.describe("Set Geospatial Config", () => {
+    test("Set Geospatial Config to Geometry then Geography", async () => {
+      const geometryRadioButton = explorer.frame.getByRole("radio", { name: "geometry-option" });
+      await geometryRadioButton.click();
+
+      await explorer.commandBarButton(CommandBarButton.Save).click();
+      await expect(explorer.getConsoleMessage()).toContainText(
+        `Successfully updated container ${context.container.id}`,
+        {
+          timeout: ONE_MINUTE_MS,
+        },
+      );
+
+      const geographyRadioButton = explorer.frame.getByRole("radio", { name: "geography-option" });
+      await geographyRadioButton.click();
+
+      await explorer.commandBarButton(CommandBarButton.Save).click();
+      await expect(explorer.getConsoleMessage()).toContainText(
+        `Successfully updated container ${context.container.id}`,
+        {
+          timeout: ONE_MINUTE_MS,
+        },
+      );
+    });
   });
 });

test/sql/scripts/storedProcedure.spec.ts

@@ -0,0 +1,75 @@
+import { expect, test } from "@playwright/test";
+import { CommandBarButton, DataExplorer, ONE_MINUTE_MS, TestAccount } from "../../fx";
+import { createTestSQLContainer, TestContainerContext } from "../../testData";
+
+test.describe("Stored Procedures", () => {
+  let context: TestContainerContext = null!;
+  let explorer: DataExplorer = null!;
+
+  test.beforeAll("Create Test Database", async () => {
+    context = await createTestSQLContainer(true);
+  });
+
+  test.beforeEach("Open container", async ({ page }) => {
+    explorer = await DataExplorer.open(page, TestAccount.SQL);
+  });
+
+  test.afterAll("Delete Test Database", async () => {
+    await context?.dispose();
+  });
+
+  test("Add, execute, and delete stored procedure", async () => {
+    // Open container context menu and click New Stored Procedure
+    const containerNode = await explorer.waitForContainerNode(context.database.id, context.container.id);
+    await containerNode.openContextMenu();
+    await containerNode.contextMenuItem("New Stored Procedure").click();
+
+    // Type stored procedure id and use stock procedure
+    const storedProcedureIdTextBox = explorer.frame.getByLabel("Stored procedure id");
+    await storedProcedureIdTextBox.isVisible();
+    const storedProcedureName = "stored-procedure-1";
+    await storedProcedureIdTextBox.fill(storedProcedureName);
+
+    const saveButton = explorer.commandBarButton(CommandBarButton.Save);
+    await expect(saveButton).toBeEnabled();
+    await saveButton.click();
+
+    await expect(explorer.getConsoleMessage()).toContainText(
+      `Sucessfully created stored procedure ${storedProcedureName}`,
+      {
+        timeout: ONE_MINUTE_MS,
+      },
+    );
+
+    // Execute stored procedure
+    const executeButton = explorer.commandBarButton(CommandBarButton.Execute);
+    await executeButton.click();
+    const executeSidePanelButton = explorer.frame.getByTestId("Panel/OkButton");
+    await executeSidePanelButton.click();
+
+    const executeStoredProcedureResult = explorer.frame.getByLabel("Execute stored procedure result");
+    await expect(executeStoredProcedureResult).toBeVisible();
+
+    // Delete stored procedure
+    await containerNode.expand();
+    const storedProceduresNode = await explorer.waitForNode(
+      `${context.database.id}/${context.container.id}/Stored Procedures`,
+    );
+    await storedProceduresNode.expand();
+    const storedProcedureNode = await explorer.waitForNode(
+      `${context.database.id}/${context.container.id}/Stored Procedures/${storedProcedureName}`,
+    );
+
+    await storedProcedureNode.openContextMenu();
+    await storedProcedureNode.contextMenuItem("Delete Stored Procedure").click();
+    const deleteStoredProcedureButton = explorer.frame.getByTestId("DialogButton:Delete");
+    await deleteStoredProcedureButton.click();
+
+    await expect(explorer.getConsoleMessage()).toContainText(
+      `Successfully deleted stored procedure ${storedProcedureName}`,
+      {
+        timeout: ONE_MINUTE_MS,
+      },
+    );
+  });
+});

test/sql/scripts/userDefinedFunction.spec.ts

@@ -0,0 +1,74 @@
+import { expect, test } from "@playwright/test";
+import { CommandBarButton, DataExplorer, ONE_MINUTE_MS, TestAccount } from "../../fx";
+import { createTestSQLContainer, TestContainerContext } from "../../testData";
+
+test.describe("User Defined Functions", () => {
+  let context: TestContainerContext = null!;
+  let explorer: DataExplorer = null!;
+  const udfBody = `function extractDocumentId(doc) {
+    return {
+        id: doc.id
+    };
+   }`;
+
+  test.beforeAll("Create Test Database", async () => {
+    context = await createTestSQLContainer(true);
+  });
+
+  test.beforeEach("Open container", async ({ page }) => {
+    explorer = await DataExplorer.open(page, TestAccount.SQL);
+  });
+
+  test.afterAll("Delete Test Database", async () => {
+    await context?.dispose();
+  });
+
+  test("Add, execute, and delete user defined function", async ({ page }) => {
+    // Open container context menu and click New UDF
+    const containerNode = await explorer.waitForContainerNode(context.database.id, context.container.id);
+    await containerNode.openContextMenu();
+    await containerNode.contextMenuItem("New UDF").click();
+
+    // Assign UDF id
+    const udfIdTextBox = explorer.frame.getByLabel("User Defined Function Id");
+    const udfName: string = "extractDocumentId";
+    await udfIdTextBox.fill(udfName);
+
+    // Create UDF body that extracts the document id from a document
+    const udfBodyTextArea = explorer.frame.getByTestId("EditorReact/Host/Loaded");
+    await udfBodyTextArea.click();
+
+    // Clear existing content
+    const isMac: boolean = process.platform === "darwin";
+    await page.keyboard.press(isMac ? "Meta+A" : "Control+A");
+    await page.keyboard.press("Backspace");
+
+    await page.keyboard.type(udfBody);
+
+    // Save changes
+    const saveButton = explorer.commandBarButton(CommandBarButton.Save);
+    await expect(saveButton).toBeEnabled();
+    await saveButton.click();
+    await expect(explorer.getConsoleMessage()).toContainText(`Sucessfully created user defined function ${udfName}`, {
+      timeout: ONE_MINUTE_MS,
+    });
+
+    // Delete UDF
+    await containerNode.expand();
+    const udfsNode = await explorer.waitForNode(
+      `${context.database.id}/${context.container.id}/User Defined Functions`,
+    );
+    await udfsNode.expand();
+    const udfNode = await explorer.waitForNode(
+      `${context.database.id}/${context.container.id}/User Defined Functions/${udfName}`,
+    );
+    await udfNode.openContextMenu();
+    await udfNode.contextMenuItem("Delete User Defined Function").click();
+    const deleteUserDefinedFunctionButton = explorer.frame.getByTestId("DialogButton:Delete");
+    await deleteUserDefinedFunctionButton.click();
+
+    await expect(explorer.getConsoleMessage()).toContainText(`Successfully deleted user defined function ${udfName}`, {
+      timeout: ONE_MINUTE_MS,
+    });
+  });
+});

test/tables/container.spec.ts

@@ -7,8 +7,7 @@ test("Tables CRUD", async ({ page }) => {
 
   const explorer = await DataExplorer.open(page, TestAccount.Tables);
 
-  const newTableButton = explorer.frame.getByTestId("GlobalCommands").getByRole("button", { name: "New Table" });
-  await newTableButton.click();
+  await explorer.globalCommandButton("New Table").click();
   await explorer.whilePanelOpen(
     "New Table",
     async (panel, okButton) => {

test/testData.ts

@@ -37,27 +37,35 @@ export interface PartitionKey {
   value: string | null;
 }
 
-const partitionCount = 4;
+export const partitionCount = 4;
 
 // If we increase this number, we need to split bulk creates into multiple batches.
 // Bulk operations are limited to 100 items per partition.
-const itemsPerPartition = 100;
+export const itemsPerPartition = 100;
 
 function createTestItems(): TestItem[] {
   const items: TestItem[] = [];
   for (let i = 0; i < partitionCount; i++) {
     for (let j = 0; j < itemsPerPartition; j++) {
-      const id = crypto.randomBytes(32).toString("base64");
+      const id = createSafeRandomString(32);
       items.push({
         id,
         partitionKey: `partition_${i}`,
-        randomData: crypto.randomBytes(32).toString("base64"),
+        randomData: createSafeRandomString(32),
       });
     }
   }
   return items;
 }
 
+// Document IDs cannot contain '/', '\', or '#'
+function createSafeRandomString(byteLength: number): string {
+  return crypto
+    .randomBytes(byteLength)
+    .toString("base64")
+    .replace(/[/\\#]/g, "_");
+}
+
 export const TestData: TestItem[] = createTestItems();
 
 export class TestContainerContext {
@@ -74,18 +82,8 @@ export class TestContainerContext {
   }
 }
 
-type createTestSqlContainerConfig = {
-  includeTestData?: boolean;
-  partitionKey?: string;
-  databaseName?: string;
-};
-
-export async function createTestSQLContainer({
-  includeTestData = false,
-  partitionKey = "/partitionKey",
-  databaseName = "",
-}: createTestSqlContainerConfig = {}) {
-  const databaseId = databaseName ? databaseName : generateUniqueName("db");
+export async function createTestSQLContainer(includeTestData?: boolean) {
+  const databaseId = generateUniqueName("db");
   const containerId = "testcontainer"; // A unique container name isn't needed because the database is unique
   const credentials = getAzureCLICredentials();
   const adaptedCredentials = new AzureIdentityCredentialAdapter(credentials);
@@ -114,7 +112,7 @@ export async function createTestSQLContainer({
   try {
     const { container } = await database.containers.createIfNotExists({
       id: containerId,
-      partitionKey,
+      partitionKey: "/partitionKey",
     });
     if (includeTestData) {
       const batchCount = TestData.length / 100;