diff --git a/cypress/elements/account/left-menu/left-menu-selectors.js b/cypress/elements/account/left-menu/left-menu-selectors.js
index fd19aabfe..a6aa78a56 100644
--- a/cypress/elements/account/left-menu/left-menu-selectors.js
+++ b/cypress/elements/account/left-menu/left-menu-selectors.js
@@ -15,7 +15,7 @@ export const DISCOUNTS_MENU_SELECTORS = {
 };
 export const ORDERS = {
   orders: "[data-test='submenu-item-label'][data-test-id='orders']",
-  draftOrders: "[data-test='submenu-item-label'][data-test-id='order drafts']"
+  draftOrders: "[data-test='submenu-item-label'][data-test-id='order-drafts']"
 };
 export const CATALOG = {
   products: "[data-test='submenu-item-label'][data-test-id='products']",
diff --git a/cypress/elements/account/login-selectors.js b/cypress/elements/account/login-selectors.js
index d14245082..6e351eb5c 100644
--- a/cypress/elements/account/login-selectors.js
+++ b/cypress/elements/account/login-selectors.js
@@ -1,12 +1,12 @@
 export const LOGIN_SELECTORS = {
-  accountSettings: "[data-test=accountSettingsButton]",
+  accountSettings: "[data-test-id=account-settings-button]",
   emailAddressInput: "input[name='email']",
   emailPasswordInput: "input[name='password']",
-  signInButton: "[data-test=submit]",
+  signInButton: "[data-test-id=submit]",
   userMenu: "[data-test=userMenu]",
-  warningCredentialMessage: "[data-test=loginErrorMessage]",
-  welcomePage: "[data-test=welcomeHeader]",
-  logOutButton: "[data-test='logOutButton']",
+  warningCredentialMessage: "[data-test-id=login-error-message]",
+  welcomePage: "[data-test-id=welcome-header]",
+  logOutButton: "[data-test-id='log-out-button']",
   resetPasswordLink: "[data-test-id='reset-password-link']",
   confirmPassword: "[name='confirmPassword']"
 };
diff --git a/cypress/elements/account/setPassword.js b/cypress/elements/account/setPassword.js
index cc8bc9905..b3643a289 100644
--- a/cypress/elements/account/setPassword.js
+++ b/cypress/elements/account/setPassword.js
@@ -1,4 +1,4 @@
 export const SET_PASSWORD = {
-  passwordInput: '[data-test="password"]',
-  confirmPasswordInput: '[data-test="confirm-password"]'
+  passwordInput: '[data-test-id="password"]',
+  confirmPasswordInput: '[data-test-id="confirm-password"]'
 };
diff --git a/cypress/elements/apps/appDetails.js b/cypress/elements/apps/appDetails.js
index d54642cd9..8cdefc9c5 100644
--- a/cypress/elements/apps/appDetails.js
+++ b/cypress/elements/apps/appDetails.js
@@ -1,12 +1,12 @@
 export const APP_DETAILS = {
   nameInput: '[name="name"]',
   manageAppsPermissionCheckbox: '[id="MANAGE_APPS"]',
-  createWebhookButton: '[data-test-id = "createWebhook"]',
-  createTokenButton: '[data-test-id="createToken"]',
+  createWebhookButton: '[data-test-id = "create-webhook"]',
+  createTokenButton: '[data-test-id="create-token"]',
   createTokenForm: {
     tokenDialog: '[role="dialog"]',
     nameInput: '[name="name"]',
-    tokenToCopy: '[data-test-id="generatedToken"]',
+    tokenToCopy: '[data-test-id="generated-token"]',
     doneButton: '[data-test-id="done"]'
   }
 };
diff --git a/cypress/elements/apps/appsList.js b/cypress/elements/apps/appsList.js
index 96b3e7b28..d026f1b9d 100644
--- a/cypress/elements/apps/appsList.js
+++ b/cypress/elements/apps/appsList.js
@@ -1,3 +1,3 @@
 export const APPS_LIST = {
-  createLocalAppButton: '[data-test-id="createApp"]'
+  createLocalAppButton: '[data-test-id="create-app"]'
 };
diff --git a/cypress/elements/attribute/attributes_details.js b/cypress/elements/attribute/attributes_details.js
index 8b196aa73..601b59faf 100644
--- a/cypress/elements/attribute/attributes_details.js
+++ b/cypress/elements/attribute/attributes_details.js
@@ -2,47 +2,47 @@ export const ATTRIBUTES_DETAILS = {
   nameInput: '[name="name"]',
   codeInput: '[name="slug"]',
   inputTypeSelect: '[id="mui-component-select-inputType"]',
-  assignValuesButton: '[data-test-id="assignValueButton"]',
+  assignValuesButton: '[data-test-id="assign-value-button"]',
   valueRequired: '[name="valueRequired"]',
-  valueNameInput: '[data-test-id="valueName"]',
+  valueNameInput: '[data-test-id="value-name"]',
   dashboardProperties: {
     useInFilteringCheckbox: '[name="filterableInDashboard"]'
   },
   attributesInputTypes: {
-    DROPDOWN: '[data-test-id="DROPDOWN"]',
-    DATE: '[data-test-id="DATE"]',
-    DATE_TIME: '[data-test-id="DATE_TIME"]',
-    MULTISELECT: '[data-test-id="MULTISELECT"]',
-    FILE: '[data-test-id="FILE"]',
-    REFERENCE: '[data-test-id="REFERENCE"]',
-    RICH_TEXT: '[data-test-id="RICH_TEXT"]',
-    NUMERIC: '[data-test-id="NUMERIC"]',
-    BOOLEAN: '[data-test-id="BOOLEAN"]',
-    SWATCH: '[data-test-id="SWATCH"]'
+    DROPDOWN: '[data-test-id="select-field-option-DROPDOWN"]',
+    DATE: '[data-test-id="select-field-option-DATE"]',
+    DATE_TIME: '[data-test-id="select-field-option-DATE_TIME"]',
+    MULTISELECT: '[data-test-id="select-field-option-MULTISELECT"]',
+    FILE: '[data-test-id="select-field-option-FILE"]',
+    REFERENCE: '[data-test-id="select-field-option-REFERENCE"]',
+    RICH_TEXT: '[data-test-id="select-field-option-RICH_TEXT"]',
+    NUMERIC: '[data-test-id="select-field-option-NUMERIC"]',
+    BOOLEAN: '[data-test-id="select-field-option-BOOLEAN"]',
+    SWATCH: '[data-test-id="select-field-option-SWATCH"]'
   },
   entityTypeSelect: '[id="mui-component-select-entityType"]',
   entityTypeOptions: {
-    PRODUCT: '[data-test-id="PRODUCT"]',
-    PAGE: '[data-test-id="PAGE"]'
+    PRODUCT: '[data-test-id*="PRODUCT"]',
+    PAGE: '[data-test-id*="PAGE"]'
   },
   selectUnitCheckbox: '[name="selectUnit"]',
   unitSystemSelect: '[data-test-id="unit-system"]',
   unitSystemsOptions: {
-    IMPERIAL: '[data-test-id="imperial"]',
-    METRIC: '[data-test-id="metric"]'
+    IMPERIAL: '[data-test-id="select-field-option-imperial"]',
+    METRIC: '[data-test-id="select-field-option-metric"]'
   },
   unitOfSelect: '[data-test-id="unit-of"]',
   unitsOfOptions: {
-    VOLUME: '[data-test-id="volume"]',
-    DISTANCE: '[data-test-id="distance"]'
+    VOLUME: '[data-test-id="select-field-option-volume"]',
+    DISTANCE: '[data-test-id="select-field-option-distance"]'
   },
   unitSelect: '[data-test-id="unit"]',
   unitsOptions: {
-    CUBIC_CENTIMETER: '[data-test-id="CUBIC_CENTIMETER"]',
-    FT: '[data-test-id="FT"]'
+    CUBIC_CENTIMETER: '[data-test-id="select-field-option-CUBIC_CENTIMETER"]',
+    FT: '[data-test-id="select-field-option-FT"]'
   },
   imageCheckbox: '[value= "image"]',
-  uploadFileButton: '[data-test="button-upload-file"]',
+  uploadFileButton: '[data-test-id="button-upload-file"]',
   pageTypeAttributeCheckbox: '[value="PAGE_TYPE"]',
   swatchValueImage: '[data-test-id="swatch-image"]'
 };
diff --git a/cypress/elements/attribute/attributes_list.js b/cypress/elements/attribute/attributes_list.js
index c6c0e559a..8c905b611 100644
--- a/cypress/elements/attribute/attributes_list.js
+++ b/cypress/elements/attribute/attributes_list.js
@@ -1,3 +1,3 @@
 export const ATTRIBUTES_LIST = {
-  createAttributeButton: '[data-test-id="createAttributeButton"]'
+  createAttributeButton: '[data-test-id="create-attribute-button"]'
 };
diff --git a/cypress/elements/catalog/categories/categories-list.js b/cypress/elements/catalog/categories/categories-list.js
index d67101909..d455b3e73 100644
--- a/cypress/elements/catalog/categories/categories-list.js
+++ b/cypress/elements/catalog/categories/categories-list.js
@@ -1,5 +1,5 @@
 export const CATEGORIES_LIST = {
-  addCategoryButton: '[data-test-id="createCategory"]'
+  addCategoryButton: '[data-test-id="create-category"]'
 };
 
 export const categoryRow = categoryId => `[data-test-id="${categoryId}"]`;
diff --git a/cypress/elements/catalog/categories/category-details.js b/cypress/elements/catalog/categories/category-details.js
index 035ff5f04..b571eef02 100644
--- a/cypress/elements/catalog/categories/category-details.js
+++ b/cypress/elements/catalog/categories/category-details.js
@@ -1,9 +1,9 @@
 export const CATEGORY_DETAILS = {
   nameInput: '[name="name"]',
-  descriptionInput: '[data-test-id="description"]',
-  createSubcategoryButton: '[data-test-id="createSubcategory"]',
-  categoryChildrenRow: '[data-test="id"]',
-  productsTab: '[data-test-id="productsTab"]',
-  addProducts: '[data-test-id="addProducts"]',
-  productRow: '[data-test-id="productRow"]'
+  descriptionInput: '[data-test-id="rich-text-editor-description"]',
+  createSubcategoryButton: '[data-test-id="create-subcategory"]',
+  categoryChildrenRow: '[data-test-id*="id"]',
+  productsTab: '[data-test-id="products-tab"]',
+  addProducts: '[data-test-id="add-products"]',
+  productRow: '[data-test-id="product-row"]'
 };
diff --git a/cypress/elements/catalog/collection-selectors.js b/cypress/elements/catalog/collection-selectors.js
index 8fea92099..e6bf3ec38 100644
--- a/cypress/elements/catalog/collection-selectors.js
+++ b/cypress/elements/catalog/collection-selectors.js
@@ -3,5 +3,5 @@ export const COLLECTION_SELECTORS = {
   nameInput: "[name='name']",
   saveButton: "[data-test='button-bar-confirm']",
   addProductButton: "[data-test-id='add-product']",
-  descriptionInput: '[data-test-id="description"]'
+  descriptionInput: '[data-test-id="rich-text-editor-description"]'
 };
diff --git a/cypress/elements/catalog/giftCard/giftCardDialog.js b/cypress/elements/catalog/giftCard/giftCardDialog.js
index 620bda951..d7fc90cfe 100644
--- a/cypress/elements/catalog/giftCard/giftCardDialog.js
+++ b/cypress/elements/catalog/giftCard/giftCardDialog.js
@@ -1,7 +1,7 @@
 export const GIFT_CARD_DIALOG = {
   amountInput: '[name="balanceAmount"]',
   currencySelectButton: '[id="mui-component-select-balanceCurrency"]',
-  currenciesOptions: '[data-test="selectFieldOption"]',
+  currenciesOptions: '[data-test-id*="select-field-option"]',
   expirationOptions: {
     setExpiryDateCheckbox: '[name="expirySelected"]',
     neverExpireRadioButton: '[value="NEVER_EXPIRE"]',
@@ -9,10 +9,10 @@ export const GIFT_CARD_DIALOG = {
     expiryDateRadioButton: '[value="EXPIRY_DATE"]',
     expiryPeriodAmount: '[name="expiryPeriodAmount"]',
     expiryPeriodTypeButton: '[id*="select-expiryPeriodType"]',
-    expiryPeriodMonthType: '[data-test-id="MONTH"]',
+    expiryPeriodMonthType: '[data-test-id="select-field-option-MONTH"]',
     expiryDateInput: '[name="expiryDate"]'
   },
   noteInput: '[name="note"]',
-  cardCodeText: '[data-test-id="cardCode"]',
+  cardCodeText: '[data-test-id="card-code"]',
   tagInput: '[data-test-id="gift-card-tag-select-field"]'
 };
diff --git a/cypress/elements/catalog/products/product-details.js b/cypress/elements/catalog/products/product-details.js
index 22fce64f3..cbe0ff7e9 100644
--- a/cypress/elements/catalog/products/product-details.js
+++ b/cypress/elements/catalog/products/product-details.js
@@ -1,33 +1,33 @@
 export const PRODUCT_DETAILS = {
   productNameInput: "[name='name']",
-  productTypeInput: "[data-test='product-type']",
-  categoryInput: "[data-test='category']",
-  categoryItem: "[data-test-id='singleautocomplete-select-option']",
-  collectionInput: "[data-test='collections']",
-  autocompleteDropdown: "[data-test='autocomplete-dropdown']",
+  productTypeInput: "[data-test-id='product-type']",
+  categoryInput: "[data-test-id='category']",
+  categoryItem: "[data-test-id='single-autocomplete-select-option']",
+  collectionInput: "[data-test-id='collections']",
+  autocompleteDropdown: "[data-test-id='autocomplete-dropdown']",
   firstCategoryItem: "#downshift-0-item-0",
   visibleRadioBtn: "[name='isPublished']",
-  channelAvailabilityItem: "[data-test='channel-availability-item']",
-  addVariantsButton: "[data-test*='button-add-variant']",
+  channelAvailabilityItem: "[data-test-id*='channel-availability-item']",
+  addVariantsButton: "[data-test-id*='button-add-variant']",
   addVariantsOptionDialog: {
     optionMultiple: '[data-test-id="variant-create-option-multiple"]',
     optionSingle: '[data-test-id="variant-create-option-single"]'
   },
-  descriptionInput: "[data-test-id='description']",
+  descriptionInput: "[data-test-id='rich-text-editor-description']",
   ratingInput: "[name='rating']",
   skuInput: "[name='sku']",
   variantRow: "[data-test-id='product-variant-row']",
-  variantPrice: '[data-test="price"]',
-  collectionRemoveButtons: '[data-test-id="collectionRemove"]',
-  productImage: '[data-test="product-image"]',
-  uploadImageButton: '[data-test="button-upload-image"]',
-  uploadSavedImagesButton: '[data-test="uploadImages"]',
-  uploadMediaUrlButton: '[data-test="uploadMediaUrl"]',
-  saveUploadUrlButton: '[data-test-id="upload-url-button"]',
+  variantPrice: '[data-test-id="price"]',
+  collectionRemoveButtons: '[data-test-id="collection-remove"]',
   addWarehouseButton: '[data-test-id="add-warehouse"]',
   warehouseOption: "[role='menuitem']",
   stockInput: '[data-test-id="stock-input"]',
   costPriceInput: '[name*="costPrice"]',
   sellingPriceInput: '[name*="channel-price"]',
-  createSingleVariantCheckbox: '[value="single"]'
+  createSingleVariantCheckbox: '[value="single"]',
+  productImage: '[data-test-id="product-image"]',
+  uploadImageButton: '[data-test-id="button-upload-image"]',
+  uploadSavedImagesButton: '[data-test-id="upload-images"]',
+  uploadMediaUrlButton: '[data-test-id="upload-media-url"]',
+  saveUploadUrlButton: '[data-test-id="upload-url-button"]'
 };
diff --git a/cypress/elements/catalog/products/products-list.js b/cypress/elements/catalog/products/products-list.js
index adb071ba3..cface40d4 100644
--- a/cypress/elements/catalog/products/products-list.js
+++ b/cypress/elements/catalog/products/products-list.js
@@ -1,44 +1,43 @@
 export const PRODUCTS_LIST = {
-  productsList: "[data-test-id][data-test='id']",
-  productsNames: "[data-test='name']",
-  createProductBtn: "[data-test='add-product']",
+  productsList: "[data-test-id*='id']",
+  productsNames: "[data-test-id='name']",
+  createProductBtn: "[data-test-id='add-product']",
   searchProducts: "[placeholder='Search Products...']",
   emptyProductRow: "[data-test-id='skeleton']",
   productImage: "[class='MuiAvatar-img']",
-  tableCellAvatar: "[data-test-id='tableCellAvatar']",
+  tableCellAvatar: "[data-test-id='table-cell-avatar']",
   productRowElements: {
-    name: '[data-test="name"]',
-    type: '[data-test="product-type"]',
-    availability: '[data-test="availability"]',
-    price: '[data-test="price"]'
+    name: '[data-test-id="name"]',
+    type: '[data-test-id="product-type"]',
+    availability: '[data-test-id="availability"]',
+    price: '[data-test-id="price"]'
   },
   tableHeaders: {
-    name: "[data-test-id='colNameHeader']",
-    type: "[data-test-id='colTypeHeader']",
-    availability: "[data-test-id='colAvailabilityHeader']",
-    price: "[data-test-id='colPriceHeader']"
+    name: "[data-test-id='col-name-header']",
+    type: "[data-test-id='col-type-header']",
+    availability: "[data-test-id='col-availability-header']",
+    price: "[data-test-id='col-price-header']"
   },
   showFiltersButton: '[data-test-id="show-filters-button"]',
   filters: {
-    filterOption: '[data-test-id="filterOption"]',
-    productsOutOfStockOption: '[data-test-id="OUT_OF_STOCK"]',
+    filterOption: '[data-test-id="filter-option"]',
+    productsOutOfStockOption: '[data-test-id="filter-option-OUT_OF_STOCK"]',
     filterBy: {
-      category: '[data-test="filterGroupActive"][data-test-id="categories"]',
-      collection: '[data-test="filterGroupActive"][data-test-id="collections"]',
-      productType:
-        '[data-test="filterGroupActive"][data-test-id="productType"]',
-      stock: '[data-test="filterGroupActive"][data-test-id="stock"]',
-      channel: '[data-test="filterGroupActive"][data-test-id="channel"]'
+      category: '[data-test-id="filter-group-active-categories"]',
+      collection: '[data-test-id="filter-group-active-collections"]',
+      productType: '[data-test-id="filter-group-active-productType"]',
+      stock: '[data-test-id="filter-group-active-stock"]',
+      channel: '[data-test-id="filter-group-active-channel"]'
     },
     filterField: {
-      filterField: '[data-test="filter-field"]',
-      category: '[data-test="filter-field"][data-test-id="categories"]',
-      collection: '[data-test="filter-field"][data-test-id="collections"]',
-      productType: '[data-test="filter-field"][data-test-id="productType"]',
-      stock: '[data-test="filter-field"][data-test-id="stock"]',
-      channel: '[data-test="filter-field"][data-test-id="channel"]'
+      filterField: '[data-test-id*="filter-field"]',
+      category: '[data-test-id="filter-field-categories"]',
+      collection: '[data-test-id="filter-field-collections"]',
+      productType: '[data-test-id="filter-field-productType"]',
+      stock: '[data-test-id="filter-field-stock"]',
+      channel: '[data-test-id="filter-field-channel"]'
     },
-    filterBySearchInput: '[data-test*="filterField"][data-test*="Input"]'
+    filterBySearchInput: '[data-test-id="filter-field-autocomplete-input"]'
   },
   nextPageButton: "[data-test='button-pagination-next']",
   previousPagePagination: "[data-test='button-pagination-back']",
diff --git a/cypress/elements/catalog/products/variants-selectors.js b/cypress/elements/catalog/products/variants-selectors.js
index 498051164..e490fd803 100644
--- a/cypress/elements/catalog/products/variants-selectors.js
+++ b/cypress/elements/catalog/products/variants-selectors.js
@@ -4,9 +4,9 @@ export const VARIANTS_SELECTORS = {
   nextButton: "[class*='MuiButton-containedPrimary']",
   warehouseCheckboxes: "[name*='warehouse:']",
   skuInput: "[ name='sku']",
-  attributeSelector: "[data-test='attribute-value']",
   attributeOption:
-    "[data-test-type='option'], [data-test='multiautocomplete-select-option']",
+    "[data-test-type='option'], [data-test-id='multi-autocomplete-select-option']",
+  attributeSelector: "[data-test-id='attribute-value']",
   addWarehouseButton: "[data-test-id='add-warehouse']",
   warehouseOption: "[role='menuitem']",
   saveButton: "[data-test='button-bar-confirm']",
diff --git a/cypress/elements/channels/add-channel-form-selectors.js b/cypress/elements/channels/add-channel-form-selectors.js
index 8fd6bbb8a..a37ce37c1 100644
--- a/cypress/elements/channels/add-channel-form-selectors.js
+++ b/cypress/elements/channels/add-channel-form-selectors.js
@@ -2,14 +2,14 @@ export const ADD_CHANNEL_FORM_SELECTORS = {
   channelName: "[name='name']",
   slug: "[name='slug']",
   currency: "[data-test-id='channel-currency-select-input']",
-  currencyOptions: "[data-test-id='singleautocomplete-select-option']",
+  currencyOptions: "[data-test-id='single-autocomplete-select-option']",
   saveButton: "[data-test='button-bar-confirm']",
   backToChannelsList: "[data-test-id='app-header-back-button']",
-  currencyValidationMessage: "[data-testid='currency-text-input-helper-text']",
-  slugValidationMessage: "[data-testid='slug-text-input-helper-text']",
+  currencyValidationMessage: "[data-test-id='currency-text-input-helper-text']",
+  slugValidationMessage: "[data-test-id='slug-text-input-helper-text']",
   currencyAutocompleteDropdown:
-    "[data-test-id='singleautocomplete-select-option'][data-test-type='custom']",
+    "[data-test-id='single-autocomplete-select-option'][data-test-type='custom']",
   addShippingZoneButton: '[data-test-id="add-shipping-zone-button"]',
-  shippingAutocompleteSelect: "[data-test-id='shippingAutoCompleteSelect']",
+  shippingAutocompleteSelect: "[data-test-id='shipping-auto-complete-select']",
   countryAutocompleteInput: '[data-test-id="country-select-input"]'
 };
diff --git a/cypress/elements/channels/available-channels-form.js b/cypress/elements/channels/available-channels-form.js
index 7a14ed705..f6a2798aa 100644
--- a/cypress/elements/channels/available-channels-form.js
+++ b/cypress/elements/channels/available-channels-form.js
@@ -1,10 +1,10 @@
 export const AVAILABLE_CHANNELS_FORM = {
-  menageChannelsButton: "[data-test-id='channels-availiability-manage-button']",
+  menageChannelsButton: "[data-test-id='channels-availability-manage-button']",
   assignedChannels: "[data-test-id='expand-icon']",
   publishedRadioButtons: "[name*='isPublished']",
   availableForPurchaseRadioButtons: "[name*='isAvailableForPurchase']",
   radioButtonsValueTrue: "[value='true']",
   radioButtonsValueFalse: "[value='false']",
   visibleInListingsButton: "[name*='visibleInListings']",
-  availableChannel: "[data-test='channel-availability-item']"
+  availableChannel: "[data-test-id*='channel-availability-item']"
 };
diff --git a/cypress/elements/channels/channel-form-selectors.js b/cypress/elements/channels/channel-form-selectors.js
index 0eb04fc0c..8e61be37d 100644
--- a/cypress/elements/channels/channel-form-selectors.js
+++ b/cypress/elements/channels/channel-form-selectors.js
@@ -1,5 +1,5 @@
 export const CHANNEL_FORM_SELECTORS = {
   channelSelect: "[id='mui-component-select-channels']",
-  channelOption: "[data-test='selectFieldOption']",
-  confirmButton: "[data-test='submit']"
+  channelOption: "[data-test-id*='select-field-option']",
+  confirmButton: "[data-test-id='submit']"
 };
diff --git a/cypress/elements/channels/channels-selectors.js b/cypress/elements/channels/channels-selectors.js
index 0f2509d1e..a055a125d 100644
--- a/cypress/elements/channels/channels-selectors.js
+++ b/cypress/elements/channels/channels-selectors.js
@@ -1,5 +1,5 @@
 export const CHANNELS_SELECTORS = {
-  createChannelButton: "[data-test='add-channel']",
+  createChannelButton: "[data-test-id='add-channel']",
   channelsTable: "[class='MuiTableBody-root']",
-  channelName: "[data-test='name']"
+  channelName: "[data-test-id='name']"
 };
diff --git a/cypress/elements/configuration/configuration-selectors.js b/cypress/elements/configuration/configuration-selectors.js
index 8cb5ddbca..f3e9adbcd 100644
--- a/cypress/elements/configuration/configuration-selectors.js
+++ b/cypress/elements/configuration/configuration-selectors.js
@@ -1,15 +1,14 @@
 export const CONFIGURATION_SELECTORS = {
-  channels: "[data-testid='channels']",
-  shipping: '[data-testid="shipping methods"]',
-  taxes: '[data-test-id="configurationMenuTaxes"]',
-  settings: '[data-test-id="configurationMenuSiteSettings"]',
-  pageTypes: '[data-test-id="configurationMenuPageTypes"]',
-  pages: '[data-test-id="configurationMenuPages"]',
-  navigation: '[data-test-id="configurationMenuNavigation"]',
-  staffMembers: '[data-test-id="configurationMenuStaff"]',
-  permissionGroups: '[data-test-id="configurationMenuPermissionGroups"]',
-  attributes: '[data-test-id="configurationMenuAttributes"]',
-  productTypes: '[data-test-id="configurationMenuProductTypes"]',
-  plugin: '[data-test-id="configurationPluginsPages"]',
-  warehouse: '[data-test-id="configurationMenuWarehouses"]'
+  channels: "[data-test-id*='channels']",
+  shipping: '[data-test-id*="shipping methods"]',
+  taxes: '[data-test-id*="configuration-menu-taxes"]',
+  settings: '[data-test-id*="configuration-menu-site-settings"]',
+  pageTypes: '[data-test-id*="configuration-menu-page-types"]',
+  navigation: '[data-test-id*="configuration-menu-navigation"]',
+  staffMembers: '[data-test-id*="configuration-menu-staff"]',
+  permissionGroups: '[data-test-id*="configuration-menu-permission-groups"]',
+  attributes: '[data-test-id*="configuration-menu-attributes"]',
+  productTypes: '[data-test-id*="configuration-menu-product-types"]',
+  plugin: '[data-test-id*="configuration-plugins-pages"]',
+  warehouse: '[data-test-id*="configuration-menu-warehouses"]'
 };
diff --git a/cypress/elements/customer/customer-details.js b/cypress/elements/customer/customer-details.js
index 418cb0f8e..0c46ef9d9 100644
--- a/cypress/elements/customer/customer-details.js
+++ b/cypress/elements/customer/customer-details.js
@@ -6,7 +6,7 @@ export const CUSTOMER_DETAILS = {
   emailInput: '[name="email"]',
   noteInput: '[name="note"]',
   activeCheckbox: '[name="isActive"]',
-  menageAddressesButton: '[data-test-id="manageAddresses"]',
+  menageAddressesButton: '[data-test-id="manage-addresses"]',
   addAddressButton: '[data-test-id="add-address"]',
   deleteAddressMenuItem: '[data-test-id="delete-address"]',
   setAddressAsDefaultShipping: '[data-test-id="set-default-shipping-address"]',
diff --git a/cypress/elements/customer/customers-list.js b/cypress/elements/customer/customers-list.js
index cab9dd3bd..f75e2f661 100644
--- a/cypress/elements/customer/customers-list.js
+++ b/cypress/elements/customer/customers-list.js
@@ -1,3 +1,3 @@
 export const CUSTOMERS_LIST = {
-  createCustomerButton: '[data-test-id="createCustomer"]'
+  createCustomerButton: '[data-test-id="create-customer"]'
 };
diff --git a/cypress/elements/homePage/homePage-selectors.js b/cypress/elements/homePage/homePage-selectors.js
index 79afbfe93..c58526b03 100644
--- a/cypress/elements/homePage/homePage-selectors.js
+++ b/cypress/elements/homePage/homePage-selectors.js
@@ -6,5 +6,5 @@ export const HOMEPAGE_SELECTORS = {
   ordersReadyToFulfill: "[data-test-id='orders-to-fulfill']",
   paymentsWaitingForCapture: "[data-test-id='orders-to-capture']",
   productsOutOfStock: "[data-test-id='products-out-of-stock']",
-  welcomeMessage: "[data-test='welcomeHeader']"
+  welcomeMessage: "[data-test-id='welcome-header']"
 };
diff --git a/cypress/elements/navigation/menu-details.js b/cypress/elements/navigation/menu-details.js
index 4213d002a..13f2748d6 100644
--- a/cypress/elements/navigation/menu-details.js
+++ b/cypress/elements/navigation/menu-details.js
@@ -1,8 +1,9 @@
 export const MENU_DETAILS = {
-  createNewMenuItemButton: '[data-test-id="createNewMenuItem"]',
+  createNewMenuItemButton: '[data-test-id="create-new-menu-item"]',
   newMenuItemForm: {
     nameInput: '[name="name"]',
-    autocompleteSelectReference: '[data-test-id="containerAutocompleteSelect"]',
+    autocompleteSelectReference:
+      '[data-test-id="container-autocomplete-select"]',
     categoryItem: '[data-test-id="category"]',
     collectionItem: '[data-test-id="collection"]',
     pageItem: '[data-test-id="page"]',
diff --git a/cypress/elements/navigation/menu-list.js b/cypress/elements/navigation/menu-list.js
index 003ffae4f..aec6d1520 100644
--- a/cypress/elements/navigation/menu-list.js
+++ b/cypress/elements/navigation/menu-list.js
@@ -1,5 +1,5 @@
 export const MENU_LIST = {
-  addMenuButton: '[data-test-id="addMenu"]',
+  addMenuButton: '[data-test-id="add-menu"]',
   createMenuForm: {
     nameInput: '[name="name"]'
   }
diff --git a/cypress/elements/orders/order-refund.js b/cypress/elements/orders/order-refund.js
index 266799b2c..928a5cdff 100644
--- a/cypress/elements/orders/order-refund.js
+++ b/cypress/elements/orders/order-refund.js
@@ -1,3 +1,3 @@
 export const ORDER_REFUND = {
-  productsQuantityInput: '[data-test="quantityInput"]'
+  productsQuantityInput: '[data-test-id*="quantity-input"]'
 };
diff --git a/cypress/elements/orders/orders-selectors.js b/cypress/elements/orders/orders-selectors.js
index c35489ec7..fe5d6f207 100644
--- a/cypress/elements/orders/orders-selectors.js
+++ b/cypress/elements/orders/orders-selectors.js
@@ -1,10 +1,12 @@
 export const ORDERS_SELECTORS = {
-  orders: "[data-test='submenu-item-label'][data-test-id='orders']",
+  orders: "[data-test-id='submenu-item-label'][data-test-id='orders']",
   createOrder: "[data-test-id='create-order-button']",
   orderRow: "[data-test-id='order-table-row']",
   salesChannel: "[data-test-id='order-sales-channel']",
-  cancelFulfillment: "[data-test-id='cancelFulfillmentButton']",
-  cancelFulfillmentSelectField: "[data-test-id='cancelFulfillmentSelectField']",
-  orderFulfillmentFrame: "[data-test-id='orderFulfillment']",
-  refundButton: '[data-test-id="refund-button"]'
+  cancelFulfillment: "[data-test-id='cancel-fulfillment-button']",
+  cancelFulfillmentSelectField:
+    "[data-test-id='cancel-fulfillment-select-field']",
+  orderFulfillmentFrame: "[data-test-id='order-fulfillment']",
+  refundButton: '[data-test-id="refund-button"]',
+  fulfillMenuButton: '[data-test-id="fulfill-menu"]'
 };
diff --git a/cypress/elements/pageTypes/pageTypeDetails.js b/cypress/elements/pageTypes/pageTypeDetails.js
index 713892866..ddc197d50 100644
--- a/cypress/elements/pageTypes/pageTypeDetails.js
+++ b/cypress/elements/pageTypes/pageTypeDetails.js
@@ -1,4 +1,4 @@
 export const PAGE_TYPE_DETAILS = {
   nameInput: '[name="name"]',
-  assignAttributesButton: '[data-test-id="assignAttributes"]'
+  assignAttributesButton: '[data-test-id="assign-attributes"]'
 };
diff --git a/cypress/elements/pageTypes/pageTypesList.js b/cypress/elements/pageTypes/pageTypesList.js
index 54f0231dd..911621802 100644
--- a/cypress/elements/pageTypes/pageTypesList.js
+++ b/cypress/elements/pageTypes/pageTypesList.js
@@ -1,3 +1,3 @@
 export const PAGE_TYPES_LIST = {
-  createPageTypeButton: '[data-test-id="createPageType"]'
+  createPageTypeButton: '[data-test-id="create-page-type"]'
 };
diff --git a/cypress/elements/pages/page-details.js b/cypress/elements/pages/page-details.js
index 4252ef65b..123562916 100644
--- a/cypress/elements/pages/page-details.js
+++ b/cypress/elements/pages/page-details.js
@@ -1,9 +1,10 @@
 export const PAGE_DETAILS = {
   nameInput: '[name="title"]',
-  pageTypesAutocompleteSelect: '[data-test-id="pageTypesAutocompleteSelect"]',
-  attributeValues: '[data-test="attribute-value"]',
+  pageTypesAutocompleteSelect:
+    '[data-test-id="page-types-autocomplete-select"]',
+  attributeValues: '[data-test-id="attribute-value"]',
   isPublishedCheckbox: '[name="isPublished"][value=true]',
-  uploadFileButton: '[data-test="button-upload-file"]',
+  uploadFileButton: '[data-test-id="button-upload-file"]',
   richTextEditorAttributeValue: '[class*="ce-paragraph"]',
   booleanAttributeValueCheckbox: '[name*="attribute:"][type="checkbox"]',
   numericAttributeValueInput: '[name*="attribute:"]'
diff --git a/cypress/elements/pages/pages-list.js b/cypress/elements/pages/pages-list.js
index e42145d77..2fcfd7cd9 100644
--- a/cypress/elements/pages/pages-list.js
+++ b/cypress/elements/pages/pages-list.js
@@ -1,3 +1,3 @@
 export const PAGES_LIST = {
-  createPageButton: '[data-test-id="createPage"]'
+  createPageButton: '[data-test-id="create-page"]'
 };
diff --git a/cypress/elements/permissionGroup/permissionGroupDetails.js b/cypress/elements/permissionGroup/permissionGroupDetails.js
index 41acd5e13..90cb3fa04 100644
--- a/cypress/elements/permissionGroup/permissionGroupDetails.js
+++ b/cypress/elements/permissionGroup/permissionGroupDetails.js
@@ -5,6 +5,6 @@ export const PERMISSION_GROUP_DETAILS = {
     '[id="MANAGE_PRODUCT_TYPES_AND_ATTRIBUTES"]',
   assignMemberButton: '[data-test-id="assign-members"]',
   searchField: '[name="query"]',
-  removeUserButton: '[data-test-id="removeUser"]',
-  userRow: '[data-test-id="userRow"]'
+  removeUserButton: '[data-test-id="remove-user"]',
+  userRow: '[data-test-id="user-row"]'
 };
diff --git a/cypress/elements/permissionGroup/permissionGroupsList.js b/cypress/elements/permissionGroup/permissionGroupsList.js
index d66cc17bf..a576d61bf 100644
--- a/cypress/elements/permissionGroup/permissionGroupsList.js
+++ b/cypress/elements/permissionGroup/permissionGroupsList.js
@@ -1,4 +1,4 @@
 export const PERMISSION_GROUP_LIST = {
-  createPermissionButton: '[data-test-id="createPermissionGroup"]',
-  permissionGroupRow: '[data-test="id"]'
+  createPermissionButton: '[data-test-id="create-permission-group"]',
+  permissionGroupRow: '[data-test-id*="id-"]'
 };
diff --git a/cypress/elements/productTypes/productTypeDetails.js b/cypress/elements/productTypes/productTypeDetails.js
index e1568e3e4..303e57e5e 100644
--- a/cypress/elements/productTypes/productTypeDetails.js
+++ b/cypress/elements/productTypes/productTypeDetails.js
@@ -1,8 +1,8 @@
 export const PRODUCT_TYPE_DETAILS = {
   nameInput: '[name="name"]',
   isShippingRequired: '[name="isShippingRequired"]',
-  assignProductAttributeButton: '[data-test-id="assignProductsAttributes"]',
-  assignVariantAttributeButton: '[data-test-id="assignVariantsAttributes"]',
+  assignProductAttributeButton: '[data-test-id="assign-products-attributes"]',
+  assignVariantAttributeButton: '[data-test-id="assign-variants-attributes"]',
   hasVariantsButton: '[name="hasVariants"]',
   shippingWeightInput: '[name="weight"]',
   giftCardKindCheckbox: '[data-test-id="product-type-kind-option-GIFT_CARD"]',
diff --git a/cypress/elements/productTypes/productTypesList.js b/cypress/elements/productTypes/productTypesList.js
index b7e8a75c1..81649d4fb 100644
--- a/cypress/elements/productTypes/productTypesList.js
+++ b/cypress/elements/productTypes/productTypesList.js
@@ -1,3 +1,3 @@
 export const PRODUCT_TYPES_LIST = {
-  addProductTypeButton: '[data-test-id="addProductType"]'
+  addProductTypeButton: '[data-test-id="add-product-type"]'
 };
diff --git a/cypress/elements/shared/assign-elements-selectors.js b/cypress/elements/shared/assign-elements-selectors.js
index 31995395e..7d2e31d7d 100644
--- a/cypress/elements/shared/assign-elements-selectors.js
+++ b/cypress/elements/shared/assign-elements-selectors.js
@@ -5,5 +5,5 @@ export const ASSIGN_ELEMENTS_SELECTORS = {
   variantTableRow: "[data-test-id='assign-variant-table-row']",
   checkbox: "[type='checkbox']",
   submitButton: "[type='submit']",
-  dialogContent: '[data-test-id="searchQuery"]'
+  dialogContent: '[data-test-id="search-query"]'
 };
diff --git a/cypress/elements/shared/button-selectors.js b/cypress/elements/shared/button-selectors.js
index d896fc499..4f944fbae 100644
--- a/cypress/elements/shared/button-selectors.js
+++ b/cypress/elements/shared/button-selectors.js
@@ -1,6 +1,6 @@
 export const BUTTON_SELECTORS = {
   back: '[data-test-id="app-header-back-button"]',
-  submit: '[data-test="submit"], [data-test-id="submit"]',
+  submit: '[data-test-id="submit"]',
   confirm: '[data-test="button-bar-confirm"]',
   goBackButton: "[data-test-id='app-header-back-button']",
   checkbox: "[type='checkbox']",
@@ -11,7 +11,7 @@ export const BUTTON_SELECTORS = {
   expandIcon: '[data-test-id="expand-icon"]',
   nextPaginationButton: '[data-test="button-pagination-next"]',
   deleteIcon: '[data-test-id="delete-icon"]',
-  showMoreButton: '[data-test-id="showMoreButton"]',
+  showMoreButton: '[data-test-id="show-more-button"]',
   button: "button",
   deleteAssignedItemsConsentCheckbox: '[name="delete-assigned-items-consent"]'
 };
diff --git a/cypress/elements/shared/metadata/metadata-form.js b/cypress/elements/shared/metadata/metadata-form.js
index 84d5798aa..dcae71559 100644
--- a/cypress/elements/shared/metadata/metadata-form.js
+++ b/cypress/elements/shared/metadata/metadata-form.js
@@ -1,8 +1,9 @@
 export const METADATA_FORM = {
-  metadataForm: "[data-test='metadataEditor'][data-test-is-private='false']",
+  metadataForm:
+    "[data-test-id='metadata-editor'][data-test-is-private='false']",
   privateMetadataForm:
-    "[data-test='metadataEditor'][data-test-is-private='true']",
-  addFieldButton: "[data-test='addField']",
+    "[data-test-id='metadata-editor'][data-test-is-private='true']",
+  addFieldButton: "[data-test-id='add-field']",
   nameInput: "[name*='name']",
   valueField: "[name*='value']"
 };
diff --git a/cypress/elements/shared/sharedElements.js b/cypress/elements/shared/sharedElements.js
index dfde657cb..b7c79ada0 100644
--- a/cypress/elements/shared/sharedElements.js
+++ b/cypress/elements/shared/sharedElements.js
@@ -5,11 +5,11 @@ export const SHARED_ELEMENTS = {
   autocompleteCircle: '[class*="arrowInnerContainer"]',
   skeleton: '[data-test-id="skeleton"]',
   table: 'table[class*="Table"]',
-  tableRow: '[data-test="id"], [class*="MuiTableRow"]',
+  tableRow: '[data-test-id*="id"], [class*="MuiTableRow"]',
   notificationSuccess: '[data-test="notification"][data-test-type="success"]',
   dialog: '[role="dialog"]',
-  searchInput: '[data-test-id="searchInput"]',
-  selectOption: '[data-test="selectFieldOption"]',
+  searchInput: '[data-test-id="search-input"]',
+  selectOption: '[data-test-id*="select-field-option"]',
   svgImage: "svg",
   fileInput: 'input[type="file"]',
   urlInput: 'input[type="url"]',
@@ -19,8 +19,8 @@ export const SHARED_ELEMENTS = {
   },
   contentEditable: '[contenteditable="true"]',
   filters: {
-    filterGroupActivateCheckbox: '[data-test="filterGroupActive"]',
-    filterRow: '[data-test="channel-availability-item"]'
+    filterGroupActivateCheckbox: '[data-test-id*="filter-group-active"]',
+    filterRow: '[data-test-id*="channel-availability-item"]'
   },
   warningDialog: '[data-test-id="warning-dialog"]'
 };
@@ -28,4 +28,4 @@ export const SHARED_ELEMENTS = {
 export const selectorWithDataValue = value => `[data-value="${value}"]`;
 
 export const getElementByDataTestId = dataTestId =>
-  `[data-test-id=${dataTestId}]`;
+  `[data-test-id*=${dataTestId}]`;
diff --git a/cypress/elements/shipping/select-shipping-method-form.js b/cypress/elements/shipping/select-shipping-method-form.js
index 4aa93f777..ba97146a4 100644
--- a/cypress/elements/shipping/select-shipping-method-form.js
+++ b/cypress/elements/shipping/select-shipping-method-form.js
@@ -1,5 +1,5 @@
 export const SELECT_SHIPPING_METHOD_FORM = {
   selectShippingMethod: "[id='mui-component-select-shippingMethod']",
-  shippingMethodOption: "[data-test='selectFieldOption']",
+  shippingMethodOption: "[data-test-id*='select-field-option']",
   submitButton: "[type='submit']"
 };
diff --git a/cypress/elements/shipping/shipping-rate-details.js b/cypress/elements/shipping/shipping-rate-details.js
index 4738dcfec..59da1e618 100644
--- a/cypress/elements/shipping/shipping-rate-details.js
+++ b/cypress/elements/shipping/shipping-rate-details.js
@@ -3,7 +3,7 @@ export const SHIPPING_RATE_DETAILS = {
   priceInput: "[name='price']",
   includePostalCodesCheckbox: '[value="INCLUDE"]',
   excludePostalCodesCheckbox: '[value="EXCLUDE"]',
-  addPostalCodesButton: '[data-test="add-postal-code-range"]',
+  addPostalCodesButton: '[data-test-id="add-postal-code-range"]',
   postalCodesForm: {
     min: '[name="min"]',
     max: '[name="max"]'
diff --git a/cypress/elements/shipping/shipping-zone-details.js b/cypress/elements/shipping/shipping-zone-details.js
index e7a54d534..329f9d78e 100644
--- a/cypress/elements/shipping/shipping-zone-details.js
+++ b/cypress/elements/shipping/shipping-zone-details.js
@@ -13,5 +13,5 @@ export const SHIPPING_ZONE_DETAILS = {
   option: "[data-test-id='multi-autocomplete-select-option']",
   warehouseSelector: "[placeholder*='Warehouse']",
   channelSelector: "[placeholder*='Channel']",
-  removeWarehouseButton: "[data-test-id='warehousesRemove']"
+  removeWarehouseButton: "[data-test-id='warehouses-remove']"
 };
diff --git a/cypress/elements/shipping/shipping-zones-list.js b/cypress/elements/shipping/shipping-zones-list.js
index a95c278fa..69c24a374 100644
--- a/cypress/elements/shipping/shipping-zones-list.js
+++ b/cypress/elements/shipping/shipping-zones-list.js
@@ -1,5 +1,5 @@
 export const SHIPPING_ZONES_LIST = {
   addShippingZone: "[data-test-id='add-shipping-zone']",
   unitSelect: "[id='mui-component-select-unit']",
-  saveUnit: '[data-test-id="saveUnit"]'
+  saveUnit: '[data-test-id="save-unit"]'
 };
diff --git a/cypress/elements/staffMembers/staffMemberDetails.js b/cypress/elements/staffMembers/staffMemberDetails.js
index e6206526f..f7440e3ac 100644
--- a/cypress/elements/staffMembers/staffMemberDetails.js
+++ b/cypress/elements/staffMembers/staffMemberDetails.js
@@ -1,5 +1,5 @@
 export const STAFF_MEMBER_DETAILS = {
-  permissionsSelect: '[data-test="permissionGroups"]',
+  permissionsSelect: '[data-test-id="permission-groups"]',
   isActiveCheckBox: '[name="isActive"]',
   removePermissionButton: '[data-test-id="remove"]'
 };
diff --git a/cypress/elements/staffMembers/staffMembersList.js b/cypress/elements/staffMembers/staffMembersList.js
index d2cf59b7b..2a2b29098 100644
--- a/cypress/elements/staffMembers/staffMembersList.js
+++ b/cypress/elements/staffMembers/staffMembersList.js
@@ -1,3 +1,3 @@
 export const STAFF_MEMBERS_LIST = {
-  inviteStaffMemberButton: '[data-test-id="inviteStaffMember"]'
+  inviteStaffMemberButton: '[data-test-id="invite-staff-member"]'
 };
diff --git a/cypress/elements/translations/element-translation.js b/cypress/elements/translations/element-translation.js
index c5b77a3f7..e71a956f2 100644
--- a/cypress/elements/translations/element-translation.js
+++ b/cypress/elements/translations/element-translation.js
@@ -3,5 +3,5 @@ export const ELEMENT_TRANSLATION = {
   editDescriptionButton: '[data-test-id="edit-description"]',
   editSeoTitleButton: '[data-test-id="edit-seoTitle"]',
   editSeoDescriptionButton: '[data-test-id="edit-seoDescription"]',
-  translationInputField: '[data-test-id="translation"]'
+  translationInputField: 'div[data-test-id*="translation"]'
 };
diff --git a/cypress/elements/warehouses/warehouses-list.js b/cypress/elements/warehouses/warehouses-list.js
index 6fa7ba3cc..fba26ed86 100644
--- a/cypress/elements/warehouses/warehouses-list.js
+++ b/cypress/elements/warehouses/warehouses-list.js
@@ -1,3 +1,3 @@
 export const WAREHOUSES_LIST = {
-  createNewButton: '[data-test-id="createWarehouse"]'
+  createNewButton: '[data-test-id="create-warehouse"]'
 };
diff --git a/cypress/fixtures/permissions.js b/cypress/fixtures/permissions.js
index bdf2051cb..478433887 100644
--- a/cypress/fixtures/permissions.js
+++ b/cypress/fixtures/permissions.js
@@ -24,7 +24,7 @@ export const PERMISSIONS = {
     },
     permissionSelectors: [
       menuSelectors.DISCOUNTS_MENU_SELECTORS.sales,
-      menuSelectors.DISCOUNTS_MENU_SELECTORS.sales
+      menuSelectors.DISCOUNTS_MENU_SELECTORS.vouchers
     ]
   },
   order: {
@@ -41,7 +41,7 @@ export const PERMISSIONS = {
     parent: configurationAsParent,
     permissionSelectors: [
       CONFIGURATION_SELECTORS.pageTypes,
-      CONFIGURATION_SELECTORS.pages
+      menuSelectors.LEFT_MENU_SELECTORS.pages
     ]
   },
   plugin: {
diff --git a/cypress/integration/login.js b/cypress/integration/login.js
index d0c26bd99..524ff02a8 100644
--- a/cypress/integration/login.js
+++ b/cypress/integration/login.js
@@ -2,6 +2,7 @@
 /// <reference types="../support"/>
 
 import { LOGIN_SELECTORS } from "../elements/account/login-selectors";
+import { HOMEPAGE_SELECTORS } from "../elements/homePage/homePage-selectors";
 import { urlList } from "../fixtures/urlList";
 import filterTests from "../support/filterTests";
 
diff --git a/cypress/integration/preorders/createAndEditVariantsInPreorder.js b/cypress/integration/preorders/createAndEditVariantsInPreorder.js
index 426ac9870..15366e7ba 100644
--- a/cypress/integration/preorders/createAndEditVariantsInPreorder.js
+++ b/cypress/integration/preorders/createAndEditVariantsInPreorder.js
@@ -3,6 +3,7 @@
 
 import { PRODUCT_DETAILS } from "../../elements/catalog/products/product-details";
 import { BUTTON_SELECTORS } from "../../elements/shared/button-selectors";
+import { SHARED_ELEMENTS } from "../../elements/shared/sharedElements";
 import { productDetailsUrl, variantDetailsUrl } from "../../fixtures/urlList";
 import {
   activatePreorderOnVariant,
@@ -71,7 +72,11 @@ filterTests({ definedTags: ["all"], version: "3.1.0" }, () => {
       saveVariant()
         .then(({ response }) => {
           variant = response.body.data.productVariantCreate.productVariant;
-          cy.get(BUTTON_SELECTORS.back).click();
+          cy.get(SHARED_ELEMENTS.progressBar)
+            .should("be.visible")
+            .waitForProgressBarToNotBeVisible()
+            .get(BUTTON_SELECTORS.back)
+            .click();
           selectChannelForVariantAndFillUpPrices({
             channelName: defaultChannel.name,
             attributeName: attributeValues[1],
diff --git a/cypress/integration/products/productsList/pagination.js b/cypress/integration/products/productsList/pagination.js
index ec9b69057..7626d24dd 100644
--- a/cypress/integration/products/productsList/pagination.js
+++ b/cypress/integration/products/productsList/pagination.js
@@ -16,10 +16,9 @@ filterTests({ definedTags: ["all"] }, () => {
       cy.clearSessionData().loginUserViaRequest();
       cy.visit(urlList.products);
     });
+
     it("Should go to the next page", () => {
-      cy.softExpectSkeletonIsVisible();
-      cy.get(PRODUCTS_LIST.productsList)
-        .should("be.visible")
+      cy.softExpectSkeletonIsVisible()
         .get(PRODUCTS_LIST.emptyProductRow)
         .should("not.exist")
         .get(PRODUCTS_LIST.previousPagePagination)
diff --git a/cypress/support/pages/shippingMethodPage.js b/cypress/support/pages/shippingMethodPage.js
index 12bb91174..89fe13cc0 100644
--- a/cypress/support/pages/shippingMethodPage.js
+++ b/cypress/support/pages/shippingMethodPage.js
@@ -29,6 +29,9 @@ export function fillUpShippingZoneData({
     .clearAndType(shippingName)
     .get(SHIPPING_ZONE_DETAILS.descriptionInput)
     .clearAndType(shippingName)
+    .get(BUTTON_SELECTORS.confirm)
+    .click()
+    .confirmationMessageShouldDisappear()
     .get(SHIPPING_ZONE_DETAILS.assignCountryButton)
     .click()
     .get(SHIPPING_ZONE_DETAILS.searchInput)
diff --git a/src/apps/components/CustomAppTokens/CustomAppTokens.tsx b/src/apps/components/CustomAppTokens/CustomAppTokens.tsx
index 726c0f496..7671eefef 100644
--- a/src/apps/components/CustomAppTokens/CustomAppTokens.tsx
+++ b/src/apps/components/CustomAppTokens/CustomAppTokens.tsx
@@ -40,7 +40,7 @@ const CustomAppTokens: React.FC<CustomAppTokensProps> = props => {
           <Button
             variant="secondary"
             onClick={onCreate}
-            data-test-id="createToken"
+            data-test-id="create-token"
           >
             <FormattedMessage
               defaultMessage="Create Token"
diff --git a/src/apps/components/CustomApps/CustomApps.tsx b/src/apps/components/CustomApps/CustomApps.tsx
index 9d0cb26c2..ef4e467ed 100644
--- a/src/apps/components/CustomApps/CustomApps.tsx
+++ b/src/apps/components/CustomApps/CustomApps.tsx
@@ -43,7 +43,7 @@ const CustomApps: React.FC<CustomAppsProps> = ({
             <Button
               variant="secondary"
               onClick={navigateToCustomAppCreate}
-              data-test-id="createApp"
+              data-test-id="create-app"
             >
               <FormattedMessage
                 defaultMessage="Create App"
diff --git a/src/apps/components/TokenCreateDialog/TokenCreateDialog.tsx b/src/apps/components/TokenCreateDialog/TokenCreateDialog.tsx
index 3c5c9c86e..df6ae609a 100644
--- a/src/apps/components/TokenCreateDialog/TokenCreateDialog.tsx
+++ b/src/apps/components/TokenCreateDialog/TokenCreateDialog.tsx
@@ -89,7 +89,7 @@ const TokenCreateDialog: React.FC<TokenCreateDialogProps> = props => {
                     <Typography variant="caption">
                       <FormattedMessage defaultMessage="Generated Token" />
                     </Typography>
-                    <Typography data-test-id="generatedToken">
+                    <Typography data-test-id="generated-token">
                       {token}
                     </Typography>
                     <Button
@@ -110,7 +110,7 @@ const TokenCreateDialog: React.FC<TokenCreateDialogProps> = props => {
                 <>
                   <BackButton className={classes.cancel} onClick={onClose} />
                   <ConfirmButton
-                    data-test="submit"
+                    data-test-id="submit"
                     transitionState={confirmButtonState}
                     onClick={submit}
                   >
diff --git a/src/attributes/components/AttributeDetails/NumericUnits.tsx b/src/attributes/components/AttributeDetails/NumericUnits.tsx
index 5d08561f0..da2b1647d 100644
--- a/src/attributes/components/AttributeDetails/NumericUnits.tsx
+++ b/src/attributes/components/AttributeDetails/NumericUnits.tsx
@@ -128,7 +128,7 @@ export const NumericUnits: React.FC<NumericUnitsProps> = ({
     <div>
       <div className={classes.hr} />
       <ControlledCheckbox
-        data-test="numeric-with-unit"
+        data-test-id="numeric-with-unit"
         name="selectUnit"
         label={formatMessage(M.messages.selectUnit)}
         checked={data.unit !== null}
diff --git a/src/attributes/components/AttributeList/AttributeList.tsx b/src/attributes/components/AttributeList/AttributeList.tsx
index 105124d86..760b6e7a6 100644
--- a/src/attributes/components/AttributeList/AttributeList.tsx
+++ b/src/attributes/components/AttributeList/AttributeList.tsx
@@ -190,8 +190,7 @@ const AttributeList: React.FC<AttributeListProps> = ({
                 key={attribute ? attribute.id : "skeleton"}
                 onClick={attribute && onRowClick(attribute.id)}
                 className={classes.link}
-                data-test="id"
-                data-test-id={maybe(() => attribute.id)}
+                data-test-id={"id-" + maybe(() => attribute.id)}
               >
                 <TableCell padding="checkbox">
                   <Checkbox
@@ -201,15 +200,15 @@ const AttributeList: React.FC<AttributeListProps> = ({
                     onChange={() => toggle(attribute.id)}
                   />
                 </TableCell>
-                <TableCell className={classes.colSlug} data-test="slug">
+                <TableCell className={classes.colSlug} data-test-id="slug">
                   {attribute ? attribute.slug : <Skeleton />}
                 </TableCell>
-                <TableCell className={classes.colName} data-test="name">
+                <TableCell className={classes.colName} data-test-id="name">
                   {attribute ? attribute.name : <Skeleton />}
                 </TableCell>
                 <TableCell
                   className={classes.colVisible}
-                  data-test="visible"
+                  data-test-id="visible"
                   data-test-visible={maybe(() => attribute.visibleInStorefront)}
                 >
                   {attribute ? (
@@ -220,7 +219,7 @@ const AttributeList: React.FC<AttributeListProps> = ({
                 </TableCell>
                 <TableCell
                   className={classes.colSearchable}
-                  data-test="searchable"
+                  data-test-id="searchable"
                   data-test-searchable={maybe(
                     () => attribute.filterableInDashboard
                   )}
@@ -233,7 +232,7 @@ const AttributeList: React.FC<AttributeListProps> = ({
                 </TableCell>
                 <TableCell
                   className={classes.colFaceted}
-                  data-test="use-in-faceted-search"
+                  data-test-id="use-in-faceted-search"
                   data-test-use-in-faceted-search={maybe(
                     () => attribute.filterableInStorefront
                   )}
diff --git a/src/attributes/components/AttributeListPage/AttributeListPage.tsx b/src/attributes/components/AttributeListPage/AttributeListPage.tsx
index 88fc6c779..83d2dbfd6 100644
--- a/src/attributes/components/AttributeListPage/AttributeListPage.tsx
+++ b/src/attributes/components/AttributeListPage/AttributeListPage.tsx
@@ -61,7 +61,7 @@ const AttributeListPage: React.FC<AttributeListPageProps> = ({
         <Button
           onClick={onAdd}
           variant="primary"
-          data-test-id="createAttributeButton"
+          data-test-id="create-attribute-button"
         >
           <FormattedMessage
             defaultMessage="Create attribute"
diff --git a/src/attributes/components/AttributeSwatchField/AttributeSwatchField.tsx b/src/attributes/components/AttributeSwatchField/AttributeSwatchField.tsx
index 346941607..68cdbdca8 100644
--- a/src/attributes/components/AttributeSwatchField/AttributeSwatchField.tsx
+++ b/src/attributes/components/AttributeSwatchField/AttributeSwatchField.tsx
@@ -88,7 +88,7 @@ const AttributeSwatchField: React.FC<AttributeSwatchFieldProps<
         name="swatch"
         value={type}
         onChange={event => setType(event.target.value)}
-        data-test="swatch-radio"
+        data-test-id="swatch-radio"
       />
       {type === "image" ? (
         <>
diff --git a/src/attributes/components/AttributeValueEditDialog/AttributeValueEditDialog.tsx b/src/attributes/components/AttributeValueEditDialog/AttributeValueEditDialog.tsx
index c2a3fd65b..9967a4819 100644
--- a/src/attributes/components/AttributeValueEditDialog/AttributeValueEditDialog.tsx
+++ b/src/attributes/components/AttributeValueEditDialog/AttributeValueEditDialog.tsx
@@ -78,7 +78,7 @@ const AttributeValueEditDialog: React.FC<AttributeValueEditDialogProps> = ({
           <>
             <DialogContent>
               <TextField
-                data-test-id="valueName"
+                data-test-id="value-name"
                 autoFocus
                 disabled={disabled}
                 error={!!formErrors.name}
@@ -108,7 +108,7 @@ const AttributeValueEditDialog: React.FC<AttributeValueEditDialogProps> = ({
             <DialogActions>
               <BackButton onClick={onClose} />
               <ConfirmButton
-                data-test="submit"
+                data-test-id="submit"
                 transitionState={confirmButtonState}
                 onClick={submit}
               >
diff --git a/src/attributes/components/AttributeValues/AttributeValues.tsx b/src/attributes/components/AttributeValues/AttributeValues.tsx
index 6f3840d98..a752f3596 100644
--- a/src/attributes/components/AttributeValues/AttributeValues.tsx
+++ b/src/attributes/components/AttributeValues/AttributeValues.tsx
@@ -98,7 +98,7 @@ const AttributeValues: React.FC<AttributeValuesProps> = ({
             disabled={disabled}
             variant="tertiary"
             onClick={onValueAdd}
-            data-test-id="assignValueButton"
+            data-test-id="assign-value-button"
           >
             <FormattedMessage
               defaultMessage="Assign value"
diff --git a/src/auth/components/LoginPage/LoginPage.tsx b/src/auth/components/LoginPage/LoginPage.tsx
index 267447036..fafb7d48a 100644
--- a/src/auth/components/LoginPage/LoginPage.tsx
+++ b/src/auth/components/LoginPage/LoginPage.tsx
@@ -61,7 +61,7 @@ const LoginCard: React.FC<LoginCardProps> = props => {
             />
           </Typography>
           {error && (
-            <div className={classes.panel} data-test="loginErrorMessage">
+            <div className={classes.panel} data-test-id="login-error-message">
               {getErrorMessage(error, intl)}
             </div>
           )}
@@ -74,7 +74,7 @@ const LoginCard: React.FC<LoginCardProps> = props => {
             onChange={handleChange}
             value={data.email}
             inputProps={{
-              "data-test": "email"
+              "data-test-id": "email"
             }}
             disabled={disabled}
           />
@@ -91,7 +91,7 @@ const LoginCard: React.FC<LoginCardProps> = props => {
               type={showPassword ? "text" : "password"}
               value={data.password}
               inputProps={{
-                "data-test": "password"
+                "data-test-id": "password"
               }}
               disabled={disabled}
             />
@@ -111,6 +111,7 @@ const LoginCard: React.FC<LoginCardProps> = props => {
             className={classes.link}
             onClick={onPasswordRecovery}
             variant="body2"
+            data-test-id="reset-password-link"
           >
             <FormattedMessage
               defaultMessage="Forgot password?"
@@ -124,7 +125,7 @@ const LoginCard: React.FC<LoginCardProps> = props => {
               variant="primary"
               onClick={submit}
               type="submit"
-              data-test="submit"
+              data-test-id="submit"
             >
               <FormattedMessage defaultMessage="Sign in" description="button" />
             </Button>
@@ -151,7 +152,7 @@ const LoginCard: React.FC<LoginCardProps> = props => {
                 onClick={() =>
                   onExternalAuthentication(externalAuthentication.id)
                 }
-                data-test="external-authentication"
+                data-test-id="external-authentication"
                 disabled={disabled}
               >
                 {externalAuthentication.name}
diff --git a/src/auth/components/NewPasswordPage/NewPasswordPage.tsx b/src/auth/components/NewPasswordPage/NewPasswordPage.tsx
index d8d25d67b..717918ce1 100644
--- a/src/auth/components/NewPasswordPage/NewPasswordPage.tsx
+++ b/src/auth/components/NewPasswordPage/NewPasswordPage.tsx
@@ -67,7 +67,7 @@ const NewPasswordPage: React.FC<NewPasswordPageProps> = props => {
               type="password"
               value={data.password}
               inputProps={{
-                "data-test": "password"
+                "data-test-id": "password"
               }}
             />
             <FormSpacer />
@@ -90,7 +90,7 @@ const NewPasswordPage: React.FC<NewPasswordPageProps> = props => {
                 })
               }
               inputProps={{
-                "data-test": "confirm-password"
+                "data-test-id": "confirm-password"
               }}
             />
             <FormSpacer />
diff --git a/src/auth/components/ResetPasswordPage/ResetPasswordPage.tsx b/src/auth/components/ResetPasswordPage/ResetPasswordPage.tsx
index 89fbba0c9..c3fafc100 100644
--- a/src/auth/components/ResetPasswordPage/ResetPasswordPage.tsx
+++ b/src/auth/components/ResetPasswordPage/ResetPasswordPage.tsx
@@ -53,12 +53,12 @@ const ResetPasswordPage: React.FC<ResetPasswordPageProps> = props => {
             onChange={handleChange}
             value={data.email}
             inputProps={{
-              "data-test": "email"
+              "data-test-id": "email"
             }}
           />
           <FormSpacer />
           <Button
-            data-test="submit"
+            data-test-id="submit"
             className={classes.submit}
             disabled={disabled}
             variant="primary"
diff --git a/src/categories/components/CategoryList/CategoryList.tsx b/src/categories/components/CategoryList/CategoryList.tsx
index bacf207a7..7559914c2 100644
--- a/src/categories/components/CategoryList/CategoryList.tsx
+++ b/src/categories/components/CategoryList/CategoryList.tsx
@@ -161,8 +161,7 @@ const CategoryList: React.FC<CategoryListProps> = props => {
                 onClick={category ? onRowClick(category.id) : undefined}
                 key={category ? category.id : "skeleton"}
                 selected={isSelected}
-                data-test="id"
-                data-test-id={maybe(() => category.id)}
+                data-test-id={"id-" + maybe(() => category.id)}
               >
                 <TableCell padding="checkbox">
                   <Checkbox
@@ -172,7 +171,7 @@ const CategoryList: React.FC<CategoryListProps> = props => {
                     onChange={() => toggle(category.id)}
                   />
                 </TableCell>
-                <TableCell className={classes.colName} data-test="name">
+                <TableCell className={classes.colName} data-test-id="name">
                   {category && category.name ? category.name : <Skeleton />}
                 </TableCell>
                 <TableCell className={classes.colSubcategories}>
diff --git a/src/categories/components/CategoryListPage/CategoryListPage.tsx b/src/categories/components/CategoryListPage/CategoryListPage.tsx
index 832d1ca1d..04f5fe5bb 100644
--- a/src/categories/components/CategoryListPage/CategoryListPage.tsx
+++ b/src/categories/components/CategoryListPage/CategoryListPage.tsx
@@ -57,7 +57,11 @@ export const CategoryListPage: React.FC<CategoryTableProps> = ({
   return (
     <Container>
       <PageHeader title={intl.formatMessage(sectionNames.categories)}>
-        <Button variant="primary" onClick={onAdd} data-test-id="createCategory">
+        <Button
+          variant="primary"
+          onClick={onAdd}
+          data-test-id="create-category"
+        >
           <FormattedMessage
             defaultMessage="Create category"
             description="button"
diff --git a/src/categories/components/CategoryProductList/CategoryProductList.tsx b/src/categories/components/CategoryProductList/CategoryProductList.tsx
index f848c6ab8..9b758c541 100644
--- a/src/categories/components/CategoryProductList/CategoryProductList.tsx
+++ b/src/categories/components/CategoryProductList/CategoryProductList.tsx
@@ -115,7 +115,7 @@ export const CategoryProductList: React.FC<CategoryProductListProps> = props =>
 
               return (
                 <TableRow
-                  data-test-id="productRow"
+                  data-test-id="product-row"
                   selected={isSelected}
                   hover={!!product}
                   key={product ? product.id : "skeleton"}
diff --git a/src/categories/components/CategoryProducts/CategoryProducts.tsx b/src/categories/components/CategoryProducts/CategoryProducts.tsx
index 1d5b6a329..4c3370676 100644
--- a/src/categories/components/CategoryProducts/CategoryProducts.tsx
+++ b/src/categories/components/CategoryProducts/CategoryProducts.tsx
@@ -54,7 +54,7 @@ export const CategoryProducts: React.FC<CategoryProductsProps> = ({
                 categories: [categoryId]
               })}
             >
-              <Button variant="tertiary" data-test-id="viewProducts">
+              <Button variant="tertiary" data-test-id="view-products">
                 <FormattedMessage
                   defaultMessage="View products"
                   description="button"
@@ -65,7 +65,7 @@ export const CategoryProducts: React.FC<CategoryProductsProps> = ({
             <Button
               variant="tertiary"
               onClick={onAdd}
-              data-test-id="addProducts"
+              data-test-id="add-products"
             >
               <FormattedMessage
                 defaultMessage="Add product"
diff --git a/src/categories/components/CategoryUpdatePage/CategoryUpdatePage.tsx b/src/categories/components/CategoryUpdatePage/CategoryUpdatePage.tsx
index 54e564aa8..6c1e0bf2e 100644
--- a/src/categories/components/CategoryUpdatePage/CategoryUpdatePage.tsx
+++ b/src/categories/components/CategoryUpdatePage/CategoryUpdatePage.tsx
@@ -147,7 +147,7 @@ export const CategoryUpdatePage: React.FC<CategoryUpdatePageProps> = ({
               />
             </CategoriesTab>
             <ProductsTab
-              testId="productsTab"
+              testId="products-tab"
               isActive={currentTab === CategoryPageTab.products}
               changeTab={changeTab}
             >
@@ -169,7 +169,7 @@ export const CategoryUpdatePage: React.FC<CategoryUpdatePageProps> = ({
                   <Button
                     variant="tertiary"
                     onClick={onAddCategory}
-                    data-test-id="createSubcategory"
+                    data-test-id="create-subcategory"
                   >
                     <FormattedMessage
                       defaultMessage="Create subcategory"
diff --git a/src/channels/components/ChannelForm/ChannelForm.tsx b/src/channels/components/ChannelForm/ChannelForm.tsx
index 57992745c..b10c04213 100644
--- a/src/channels/components/ChannelForm/ChannelForm.tsx
+++ b/src/channels/components/ChannelForm/ChannelForm.tsx
@@ -94,7 +94,7 @@ export const ChannelForm: React.FC<ChannelFormProps> = ({
             fullWidth
             FormHelperTextProps={
               {
-                "data-testid": "slug-text-input-helper-text"
+                "data-test-id": "slug-text-input-helper-text"
               } as ExtendedFormHelperTextProps
             }
             label={intl.formatMessage({
@@ -146,7 +146,7 @@ export const ChannelForm: React.FC<ChannelFormProps> = ({
               error={!!formErrors.currencyCode}
               FormHelperTextProps={
                 {
-                  "data-testid": "currency-text-input-helper-text"
+                  "data-test-id": "currency-text-input-helper-text"
                 } as ExtendedFormHelperTextProps
               }
               helperText={getChannelsErrorMessage(
@@ -181,7 +181,7 @@ export const ChannelForm: React.FC<ChannelFormProps> = ({
             error={!!formErrors.defaultCountry}
             FormHelperTextProps={
               {
-                "data-testid": "country-text-input-helper-text"
+                "data-test-id": "country-text-input-helper-text"
               } as ExtendedFormHelperTextProps
             }
             helperText={getChannelsErrorMessage(
diff --git a/src/channels/components/ChannelForm/types.ts b/src/channels/components/ChannelForm/types.ts
index fffa9d986..70a80c5eb 100644
--- a/src/channels/components/ChannelForm/types.ts
+++ b/src/channels/components/ChannelForm/types.ts
@@ -1,5 +1,5 @@
 import { FormHelperTextProps } from "@material-ui/core/FormHelperText";
 
 export type ExtendedFormHelperTextProps = FormHelperTextProps & {
-  "data-testid": string;
+  "data-test-id": string;
 };
diff --git a/src/channels/components/ShippingZonesCard/ShippingZonesCardListFooter.tsx b/src/channels/components/ShippingZonesCard/ShippingZonesCardListFooter.tsx
index 4affd5b0b..08da04554 100644
--- a/src/channels/components/ShippingZonesCard/ShippingZonesCardListFooter.tsx
+++ b/src/channels/components/ShippingZonesCard/ShippingZonesCardListFooter.tsx
@@ -54,7 +54,7 @@ const ShippingZonesCardListFooter: React.FC<ShippingZonesCardListFooterProps> =
     <ClickAwayListener onClickAway={handleFooterClickAway}>
       <div className={classes.root}>
         <SingleAutocompleteSelectField
-          data-test-id="shippingAutoCompleteSelect"
+          data-test-id="shipping-auto-complete-select"
           value=""
           displayValue=""
           nakedInput
diff --git a/src/channels/pages/ChannelsListPage/ChannelsListPage.tsx b/src/channels/pages/ChannelsListPage/ChannelsListPage.tsx
index 9dce7edac..929ad469e 100644
--- a/src/channels/pages/ChannelsListPage/ChannelsListPage.tsx
+++ b/src/channels/pages/ChannelsListPage/ChannelsListPage.tsx
@@ -71,7 +71,7 @@ export const ChannelsListPage: React.FC<ChannelsListPageProps> = ({
           disabled={limitReached}
           onClick={navigateToChannelCreate}
           variant="primary"
-          data-test="add-channel"
+          data-test-id="add-channel"
         >
           <FormattedMessage
             defaultMessage="Create Channel"
@@ -118,7 +118,7 @@ export const ChannelsListPage: React.FC<ChannelsListPageProps> = ({
                   onClick={!!channel ? onRowClick(channel.id) : undefined}
                 >
                   <TableCell className={classes.colName}>
-                    <span data-test="name">
+                    <span data-test-id="name">
                       {channel?.name || <Skeleton />}
                     </span>
                   </TableCell>
diff --git a/src/collections/components/CollectionList/CollectionList.tsx b/src/collections/components/CollectionList/CollectionList.tsx
index a1992d79c..761f6a36e 100644
--- a/src/collections/components/CollectionList/CollectionList.tsx
+++ b/src/collections/components/CollectionList/CollectionList.tsx
@@ -169,8 +169,7 @@ const CollectionList: React.FC<CollectionListProps> = props => {
                 onClick={collection ? onRowClick(collection.id) : undefined}
                 key={collection ? collection.id : "skeleton"}
                 selected={isSelected}
-                data-test="id"
-                data-test-id={maybe(() => collection.id)}
+                data-test-id={"id-" + maybe(() => collection.id)}
               >
                 <TableCell padding="checkbox">
                   <Checkbox
@@ -180,7 +179,7 @@ const CollectionList: React.FC<CollectionListProps> = props => {
                     onChange={() => toggle(collection.id)}
                   />
                 </TableCell>
-                <TableCell className={classes.colName} data-test="name">
+                <TableCell className={classes.colName} data-test-id="name">
                   {maybe<React.ReactNode>(() => collection.name, <Skeleton />)}
                 </TableCell>
                 <TableCell className={classes.colProducts}>
@@ -191,7 +190,7 @@ const CollectionList: React.FC<CollectionListProps> = props => {
                 </TableCell>
                 <TableCell
                   className={classes.colAvailability}
-                  data-test="availability"
+                  data-test-id="availability"
                   data-test-availability={!!collection?.channelListings?.length}
                 >
                   {(!collection && <Skeleton />) ||
diff --git a/src/components/AccountPermissionGroups/AccountPermissionGroups.tsx b/src/components/AccountPermissionGroups/AccountPermissionGroups.tsx
index 269915e01..51e424b38 100644
--- a/src/components/AccountPermissionGroups/AccountPermissionGroups.tsx
+++ b/src/components/AccountPermissionGroups/AccountPermissionGroups.tsx
@@ -59,7 +59,7 @@ const AccountPermissionGroups: React.FC<AccountPermissionGroupsProps> = props =>
         value={formData?.permissionGroups}
         onChange={onChange}
         fetchChoices={onSearchChange}
-        data-test="permissionGroups"
+        data-test-id="permission-groups"
         onFetchMore={onFetchMore}
         hasMore={hasMore}
         loading={loading}
diff --git a/src/components/AccountPermissions/AccountPermissions.tsx b/src/components/AccountPermissions/AccountPermissions.tsx
index 75978fc21..ff878c6e3 100644
--- a/src/components/AccountPermissions/AccountPermissions.tsx
+++ b/src/components/AccountPermissions/AccountPermissions.tsx
@@ -136,7 +136,7 @@ const AccountPermissions: React.FC<AccountPermissionsProps> = props => {
             >
               <ListItemIcon>
                 <Checkbox
-                  data-test-id="fullAccess"
+                  data-test-id="full-access"
                   color="primary"
                   edge="start"
                   checked={data.hasFullAccess}
diff --git a/src/components/ActionDialog/DialogButtons.tsx b/src/components/ActionDialog/DialogButtons.tsx
index f852a420a..3662e0f25 100644
--- a/src/components/ActionDialog/DialogButtons.tsx
+++ b/src/components/ActionDialog/DialogButtons.tsx
@@ -44,7 +44,6 @@ const DialogButtons: React.FC<DialogButtonsProps> = props => {
           onClick={onConfirm}
           error={variant === "delete"}
           data-test-id="submit"
-          data-test="submit"
         >
           {confirmButtonLabel ||
             (variant === "delete"
diff --git a/src/components/AppLayout/menuStructure.ts b/src/components/AppLayout/menuStructure.ts
index 9dc5f5e7b..a042107a4 100644
--- a/src/components/AppLayout/menuStructure.ts
+++ b/src/components/AppLayout/menuStructure.ts
@@ -124,7 +124,7 @@ function useMenuStructure(
           ariaLabel: "order drafts",
           label: intl.formatMessage(commonMessages.drafts),
           permissions: [PermissionEnum.MANAGE_ORDERS],
-          id: "order drafts",
+          id: "order-drafts",
           url: orderDraftListUrl()
         },
         ...mapToExtensionsItems(
diff --git a/src/components/AssignProductDialog/AssignProductDialog.tsx b/src/components/AssignProductDialog/AssignProductDialog.tsx
index 52811292b..dd967f4aa 100644
--- a/src/components/AssignProductDialog/AssignProductDialog.tsx
+++ b/src/components/AssignProductDialog/AssignProductDialog.tsx
@@ -165,7 +165,7 @@ const AssignProductDialog: React.FC<AssignProductDialogProps> = props => {
       <DialogActions>
         <BackButton onClick={onClose} />
         <ConfirmButton
-          data-test="submit"
+          data-test-id="submit"
           transitionState={confirmButtonState}
           type="submit"
           onClick={handleSubmit}
diff --git a/src/components/AssignVariantDialog/AssignVariantDialog.tsx b/src/components/AssignVariantDialog/AssignVariantDialog.tsx
index 9b9d89ded..c3b6b18d4 100644
--- a/src/components/AssignVariantDialog/AssignVariantDialog.tsx
+++ b/src/components/AssignVariantDialog/AssignVariantDialog.tsx
@@ -280,7 +280,7 @@ const AssignVariantDialog: React.FC<AssignVariantDialogProps> = props => {
       <DialogActions>
         <BackButton onClick={onClose} />
         <ConfirmButton
-          data-test="submit"
+          data-test-id="submit"
           transitionState={confirmButtonState}
           type="submit"
           onClick={handleSubmit}
diff --git a/src/components/Attributes/Attributes.tsx b/src/components/Attributes/Attributes.tsx
index 3f8c5e367..2d391204b 100644
--- a/src/components/Attributes/Attributes.tsx
+++ b/src/components/Attributes/Attributes.tsx
@@ -146,7 +146,7 @@ const Attributes: React.FC<AttributesProps> = ({
             variant="secondary"
             className={classes.expansionBarButton}
             onClick={toggleExpansion}
-            data-test="attributes-expand"
+            data-test-id="attributes-expand"
           >
             <ArrowDropDownIcon
               className={classNames(classes.expansionBarButtonIcon, {
diff --git a/src/components/Attributes/BasicAttributeRow.tsx b/src/components/Attributes/BasicAttributeRow.tsx
index 3acdfd0b6..562e618f8 100644
--- a/src/components/Attributes/BasicAttributeRow.tsx
+++ b/src/components/Attributes/BasicAttributeRow.tsx
@@ -51,12 +51,12 @@ const BasicAttributeRow: React.FC<BasicAttributeRowProps> = ({
     <Grid className={classes.attributeSection} variant="uniform">
       <div
         className={classes.attributeSectionLabel}
-        data-test="attribute-label"
+        data-test-id="attribute-label"
       >
         <Typography>{label}</Typography>
       </div>
       <div
-        data-test="attribute-value"
+        data-test-id="attribute-value"
         className={classNames(classes.value, {
           [classes.flex]: flexValueContainer
         })}
diff --git a/src/components/Attributes/ExtendedAttributeRow.tsx b/src/components/Attributes/ExtendedAttributeRow.tsx
index a6b866cc7..4d5cc2852 100644
--- a/src/components/Attributes/ExtendedAttributeRow.tsx
+++ b/src/components/Attributes/ExtendedAttributeRow.tsx
@@ -38,23 +38,23 @@ const ExtendedAttributeRow: React.FC<ExtendedAttributeRowProps> = props => {
       <Grid className={classes.attributeSection} variant="uniform">
         <div
           className={classes.attributeSectionLabel}
-          data-test="attribute-label"
+          data-test-id="attribute-label"
         >
           <Typography>{label}</Typography>
         </div>
-        <div data-test="attribute-selector">
+        <div data-test-id="attribute-selector">
           <Button
             className={classes.attributeSectionButton}
             disabled={disabled}
             variant="tertiary"
-            data-test="button-attribute-selector"
+            data-test-id="button-attribute-selector"
             onClick={onSelect}
           >
             {selectLabel}
           </Button>
         </div>
       </Grid>
-      <div data-test="attribute-value">{children}</div>
+      <div data-test-id="attribute-value">{children}</div>
     </>
   );
 };
diff --git a/src/components/AutocompleteSelectMenu/AutocompleteSelectMenu.tsx b/src/components/AutocompleteSelectMenu/AutocompleteSelectMenu.tsx
index 9cab93c2e..0f43a1915 100644
--- a/src/components/AutocompleteSelectMenu/AutocompleteSelectMenu.tsx
+++ b/src/components/AutocompleteSelectMenu/AutocompleteSelectMenu.tsx
@@ -117,7 +117,7 @@ const AutocompleteSelectMenu: React.FC<AutocompleteSelectMenuProps> = props => {
           {({ getItemProps, isOpen, openMenu, closeMenu, selectItem }) => (
             <div
               className={classes.container}
-              data-test-id="containerAutocompleteSelect"
+              data-test-id="container-autocomplete-select"
             >
               <TextField
                 InputProps={{
diff --git a/src/components/BackButton.tsx b/src/components/BackButton.tsx
index ccaab7113..b1b43e0bb 100644
--- a/src/components/BackButton.tsx
+++ b/src/components/BackButton.tsx
@@ -4,7 +4,7 @@ import React from "react";
 import { FormattedMessage } from "react-intl";
 
 const BackButton: React.FC<ButtonProps> = props => (
-  <Button data-test="back" variant="secondary" color="text" {...props}>
+  <Button data-test-id="back" variant="secondary" color="text" {...props}>
     <FormattedMessage {...buttonMessages.back} />
   </Button>
 );
diff --git a/src/components/CardMenu/CardMenu.tsx b/src/components/CardMenu/CardMenu.tsx
index 386099524..628f14598 100644
--- a/src/components/CardMenu/CardMenu.tsx
+++ b/src/components/CardMenu/CardMenu.tsx
@@ -122,7 +122,7 @@ const CardMenu: React.FC<CardMenuProps> = props => {
   return (
     <div className={className} {...rest}>
       <IconButton
-        data-test-id="showMoreButton"
+        data-test-id="show-more-button"
         aria-label="More"
         aria-owns={open ? "long-menu" : null}
         aria-haspopup="true"
@@ -163,7 +163,6 @@ const CardMenu: React.FC<CardMenuProps> = props => {
                       disabled={menuItem.loading || menuItem.disabled}
                       onClick={() => handleMenuClick(menuItemIndex)}
                       key={menuItem.label}
-                      data-test={menuItem.testId}
                     >
                       <div
                         className={classNames(className, {
diff --git a/src/components/ChannelsAvailabilityCard/Channel/ChannelAvailabilityItemWrapper.tsx b/src/components/ChannelsAvailabilityCard/Channel/ChannelAvailabilityItemWrapper.tsx
index f9c9f71da..74127163b 100644
--- a/src/components/ChannelsAvailabilityCard/Channel/ChannelAvailabilityItemWrapper.tsx
+++ b/src/components/ChannelsAvailabilityCard/Channel/ChannelAvailabilityItemWrapper.tsx
@@ -72,7 +72,10 @@ const ChannelContentWrapper: React.FC<ChannelContentWrapperProps> = ({
   const { name } = data;
 
   return (
-    <Accordion classes={expanderClasses} data-test="channel-availability-item">
+    <Accordion
+      classes={expanderClasses}
+      data-test-id="channel-availability-item"
+    >
       <AccordionSummary
         expandIcon={<IconChevronDown />}
         classes={summaryClasses}
diff --git a/src/components/ChannelsAvailabilityCard/ChannelsAvailabilityCardWrapper.tsx b/src/components/ChannelsAvailabilityCard/ChannelsAvailabilityCardWrapper.tsx
index 7b976a627..6e9875999 100644
--- a/src/components/ChannelsAvailabilityCard/ChannelsAvailabilityCardWrapper.tsx
+++ b/src/components/ChannelsAvailabilityCard/ChannelsAvailabilityCardWrapper.tsx
@@ -57,7 +57,7 @@ export const ChannelsAvailabilityWrapper: React.FC<ChannelsAvailabilityWrapperPr
             >
               <Button
                 onClick={openModal}
-                data-test-id="channels-availiability-manage-button"
+                data-test-id="channels-availability-manage-button"
               >
                 {intl.formatMessage({
                   defaultMessage: "Manage",
diff --git a/src/components/DeleteButton/DeleteButton.tsx b/src/components/DeleteButton/DeleteButton.tsx
index f46b3b09f..374eb89b3 100644
--- a/src/components/DeleteButton/DeleteButton.tsx
+++ b/src/components/DeleteButton/DeleteButton.tsx
@@ -35,7 +35,7 @@ const DeleteButton: React.FC<DeleteButtonProps> = ({
       variant="primary"
       onClick={onClick}
       className={classes.button}
-      data-test="button-bar-delete"
+      data-test-id="button-bar-delete"
       disabled={disabled}
     >
       {label || intl.formatMessage(buttonMessages.delete)}
diff --git a/src/components/FileUploadField/FileUploadField.tsx b/src/components/FileUploadField/FileUploadField.tsx
index 016bbffe9..0d07d2923 100644
--- a/src/components/FileUploadField/FileUploadField.tsx
+++ b/src/components/FileUploadField/FileUploadField.tsx
@@ -105,7 +105,7 @@ const FileUploadField: React.FC<FileUploadFieldProps> = props => {
               color="primary"
               onClick={handleFileDelete}
               disabled={disabled || loading}
-              data-test="button-delete-file"
+              data-test-id="button-delete-file"
             >
               <DeleteIcon />
             </IconButton>
@@ -116,7 +116,7 @@ const FileUploadField: React.FC<FileUploadFieldProps> = props => {
               onClick={clickFileInput}
               disabled={disabled || loading}
               variant="secondary"
-              data-test="button-upload-file"
+              data-test-id="button-upload-file"
             >
               {intl.formatMessage(commonMessages.chooseFile)}
             </Button>
@@ -133,7 +133,7 @@ const FileUploadField: React.FC<FileUploadFieldProps> = props => {
         id="fileUpload"
         onChange={event => onFileUpload(event.target.files[0])}
         type="file"
-        data-test="upload-file-input"
+        data-test-id="upload-file-input"
         ref={fileInputAnchor}
         {...inputProps}
       />
diff --git a/src/components/Filter/FilterAutocompleteField.tsx b/src/components/Filter/FilterAutocompleteField.tsx
index c69c73e95..3b181b3fe 100644
--- a/src/components/Filter/FilterAutocompleteField.tsx
+++ b/src/components/Filter/FilterAutocompleteField.tsx
@@ -118,7 +118,7 @@ const FilterAutocompleteField: React.FC<FilterAutocompleteFieldProps> = ({
     <div {...rest}>
       {filterField?.onSearchChange && (
         <TextField
-          data-test="filterFieldAutocompleteInput"
+          data-test-id="filter-field-autocomplete-input"
           className={classes.inputContainer}
           fullWidth
           name={filterField.name + "_autocomplete"}
@@ -135,8 +135,9 @@ const FilterAutocompleteField: React.FC<FilterAutocompleteFieldProps> = ({
           <FormControlLabel
             control={
               <Checkbox
-                data-test="filterFieldAutocompleteSelected"
-                data-test-id={filterField.value}
+                data-test-id={
+                  "filter-field-autocomplete-selected-" + filterField.value
+                }
                 checked={filterField.value.includes(displayValue.value)}
               />
             }
@@ -149,7 +150,7 @@ const FilterAutocompleteField: React.FC<FilterAutocompleteFieldProps> = ({
       {displayHr && <Hr className={classes.hr} />}
       {displayNoResults && (
         <Typography
-          data-test="filterFieldAutocompleteNoResults"
+          data-test-id="filter-field-autocomplete-no-results"
           className={classes.noResults}
           color="textSecondary"
         >
@@ -160,13 +161,14 @@ const FilterAutocompleteField: React.FC<FilterAutocompleteFieldProps> = ({
         <div
           className={classes.option}
           key={option.value}
-          data-test-id="filterOption"
+          data-test-id="filter-option"
         >
           <FormControlLabel
             control={
               <Checkbox
-                data-test="filterFieldAutocompleteOption"
-                data-test-id={filterField.value}
+                data-test-id={
+                  "filter-field-autocomplete-option-" + filterField.value
+                }
                 checked={filterField.value.includes(option.value)}
               />
             }
@@ -178,7 +180,7 @@ const FilterAutocompleteField: React.FC<FilterAutocompleteFieldProps> = ({
       ))}
       {filterField.hasMore && (
         <Link
-          data-test="filterFieldAutocompleteHasMore"
+          data-test-id="filter-field-autocomplete-has-more"
           className={classes.showMore}
           underline
           onClick={filterField.onFetchMore}
diff --git a/src/components/Filter/FilterContent/FilterContent.tsx b/src/components/Filter/FilterContent/FilterContent.tsx
index c418325e3..f19c830a1 100644
--- a/src/components/Filter/FilterContent/FilterContent.tsx
+++ b/src/components/Filter/FilterContent/FilterContent.tsx
@@ -216,8 +216,7 @@ const FilterContent: React.FC<FilterContentProps> = ({
               <Accordion
                 key={filter.name}
                 classes={expanderClasses}
-                data-test="channel-availability-item"
-                data-test-id={filter.name}
+                data-test-id={"channel-availability-item-" + filter.name}
                 expanded={filter.name === openedFilter?.name}
               >
                 <AccordionSummary
diff --git a/src/components/Filter/FilterContent/FilterContentBody.tsx b/src/components/Filter/FilterContent/FilterContentBody.tsx
index 88ecdcb19..c54558ee9 100644
--- a/src/components/Filter/FilterContent/FilterContentBody.tsx
+++ b/src/components/Filter/FilterContent/FilterContentBody.tsx
@@ -35,7 +35,7 @@ const useStyles = makeStyles(
   { name: "FilterContentBody" }
 );
 
-const filterTestingContext = "filter-field";
+const filterTestingContext = "filter-field-";
 
 export interface FilterContentBodyProps<T extends string = string> {
   children?: React.ReactNode;
@@ -77,8 +77,7 @@ const FilterContentBody: React.FC<FilterContentBodyProps> = ({
       {children}
       {filter.type === FieldType.text && (
         <TextField
-          data-test={filterTestingContext}
-          data-test-id={filter.name}
+          data-test-id={filterTestingContext + filter.name}
           fullWidth
           name={filter.name}
           InputProps={{ classes: { input: commonClasses.input } }}
@@ -124,8 +123,7 @@ const FilterContentBody: React.FC<FilterContentBodyProps> = ({
 
       {filter.type === FieldType.options && (
         <FilterOptionField
-          data-test={filterTestingContext}
-          data-test-id={filter.name}
+          data-test-id={filterTestingContext + filter.name}
           filterField={filter}
           onFilterPropertyChange={onFilterPropertyChange}
         />
@@ -139,7 +137,7 @@ const FilterContentBody: React.FC<FilterContentBodyProps> = ({
             <FormControlLabel
               control={
                 <Radio
-                  data-test="filterBoolean"
+                  data-test-id="filter-boolean"
                   data-test-is-checked={filter.value[0] === option.value}
                   checked={filter.value[0] === option.value}
                   color="primary"
@@ -163,8 +161,7 @@ const FilterContentBody: React.FC<FilterContentBodyProps> = ({
         ))}
       {filter.type === FieldType.autocomplete && (
         <FilterAutocompleteField
-          data-test={filterTestingContext}
-          data-test-id={filter.name}
+          data-test-id={filterTestingContext + filter.name}
           displayValues={autocompleteDisplayValues}
           filterField={filter}
           setDisplayValues={setAutocompleteDisplayValues}
diff --git a/src/components/Filter/FilterContent/FilterContentBodyNameField.tsx b/src/components/Filter/FilterContent/FilterContentBodyNameField.tsx
index a5fbe64b6..0063b1460 100644
--- a/src/components/Filter/FilterContent/FilterContentBodyNameField.tsx
+++ b/src/components/Filter/FilterContent/FilterContentBodyNameField.tsx
@@ -33,8 +33,7 @@ const FilterContentBodyNameField: React.FC<FilterContentBodyNameFieldProps> = ({
       <FormControlLabel
         control={
           <Checkbox
-            data-test="filterGroupActive"
-            data-test-id={filter.name}
+            data-test-id={"filter-group-active-" + filter.name}
             checked={filter.active}
           />
         }
diff --git a/src/components/Filter/FilterContent/FilterContentHeader.tsx b/src/components/Filter/FilterContent/FilterContentHeader.tsx
index 555e5ba89..b3fc91628 100644
--- a/src/components/Filter/FilterContent/FilterContentHeader.tsx
+++ b/src/components/Filter/FilterContent/FilterContentHeader.tsx
@@ -38,14 +38,14 @@ const FilterContentHeader: React.FC<FilterContentHeaderProps> = ({
       </Typography>
       <div>
         <Button
-          data-test="clear"
+          data-test-id="clear"
           variant="secondary"
           className={classes.clear}
           onClick={onClear}
         >
           <FormattedMessage {...buttonMessages.clear} />
         </Button>
-        <Button data-test="submit" variant="primary" type="submit">
+        <Button data-test-id="submit" variant="primary" type="submit">
           <FormattedMessage {...buttonMessages.done} />
         </Button>
       </div>
diff --git a/src/components/Filter/FilterContent/FilterDateTimeField.tsx b/src/components/Filter/FilterContent/FilterDateTimeField.tsx
index 3fdd78eac..468a24c76 100644
--- a/src/components/Filter/FilterContent/FilterDateTimeField.tsx
+++ b/src/components/Filter/FilterContent/FilterDateTimeField.tsx
@@ -42,8 +42,7 @@ export const FilterDateTimeField: React.FC<FilterDateTimeFieldProps> = ({
         </div>
         <TextField
           {...(isMultiple && { "data-test-range-type": "min" })}
-          data-test={filterTestingContext}
-          data-test-id={filter.name}
+          data-test-id={filterTestingContext + filter.name}
           fullWidth
           name={filter.name + (isMultiple ? "_min" : "")}
           InputProps={{
@@ -64,8 +63,7 @@ export const FilterDateTimeField: React.FC<FilterDateTimeFieldProps> = ({
         />
         {isDateTime && (
           <TextField
-            data-test={filterTestingContext}
-            data-test-id={filter.name}
+            data-test-id={filterTestingContext + filter.name}
             data-test-range-type="time_min"
             className={classes.inputTime}
             name={filter.name + (isMultiple ? "_time_min" : "")}
@@ -98,8 +96,7 @@ export const FilterDateTimeField: React.FC<FilterDateTimeFieldProps> = ({
           <div className={classes.inputRange}>
             <div className={classes.spacer} />
             <TextField
-              data-test={filterTestingContext}
-              data-test-id={filter.name}
+              data-test-id={filterTestingContext + filter.name}
               data-test-range-type="max"
               fullWidth
               name={filter.name + "_max"}
@@ -123,8 +120,7 @@ export const FilterDateTimeField: React.FC<FilterDateTimeFieldProps> = ({
             />
             {isDateTime && (
               <TextField
-                data-test={filterTestingContext}
-                data-test-id={filter.name}
+                data-test-id={filterTestingContext + filter.name}
                 className={classes.inputTime}
                 data-test-range-type="time_max"
                 name={filter.name + "_time_max"}
diff --git a/src/components/Filter/FilterContent/FilterGroupLabel.tsx b/src/components/Filter/FilterContent/FilterGroupLabel.tsx
index a3da1b197..c76dd807c 100644
--- a/src/components/Filter/FilterContent/FilterGroupLabel.tsx
+++ b/src/components/Filter/FilterContent/FilterGroupLabel.tsx
@@ -37,8 +37,7 @@ const FilterGroupLabel: React.FC<FilterGroupLabelProps> = ({
       <FormControlLabel
         control={
           <Checkbox
-            data-test="filterGroupActive"
-            data-test-id={filter.name}
+            data-test-id={"filter-group-active-" + filter.name}
             checked={filter.active}
           />
         }
diff --git a/src/components/Filter/FilterContent/FilterNumericField.tsx b/src/components/Filter/FilterContent/FilterNumericField.tsx
index 17013f87a..395a25593 100644
--- a/src/components/Filter/FilterContent/FilterNumericField.tsx
+++ b/src/components/Filter/FilterContent/FilterNumericField.tsx
@@ -41,8 +41,7 @@ export const FilterNumericField: React.FC<FilterNumericFieldProps> = ({
         </div>
         <TextField
           {...(isMultiple && { "data-test-range-type": "min" })}
-          data-test={filterTestingContext}
-          data-test-id={filter.name}
+          data-test-id={filterTestingContext + filter.name}
           fullWidth
           name={filter.name + (isMultiple ? "_min" : "")}
           InputProps={{
@@ -72,8 +71,7 @@ export const FilterNumericField: React.FC<FilterNumericFieldProps> = ({
           <div className={classes.inputRange}>
             <div className={classes.spacer} />
             <TextField
-              data-test={filterTestingContext}
-              data-test-id={filter.name}
+              data-test-id={filterTestingContext + filter.name}
               data-test-range-type="max"
               fullWidth
               name={filter.name + "_max"}
diff --git a/src/components/Filter/FilterContent/FilterRangeField.tsx b/src/components/Filter/FilterContent/FilterRangeField.tsx
index a70887d03..6468bb817 100644
--- a/src/components/Filter/FilterContent/FilterRangeField.tsx
+++ b/src/components/Filter/FilterContent/FilterRangeField.tsx
@@ -23,8 +23,7 @@ const FilterRangeField: React.FC<FilterRangeFieldProps> = ({
   return (
     <>
       <TextField
-        data-test={filterTestingContext}
-        data-test-id={filter.name}
+        data-test-id={filterTestingContext + filter.name}
         data-test-range-type="min"
         fullWidth
         name={filter.name + "_min"}
@@ -55,8 +54,7 @@ const FilterRangeField: React.FC<FilterRangeFieldProps> = ({
         />
       </span>
       <TextField
-        data-test={filterTestingContext}
-        data-test-id={filter.name}
+        data-test-id={filterTestingContext + filter.name}
         data-test-range-type="max"
         fullWidth
         name={filter.name + "_max"}
diff --git a/src/components/Filter/FilterContent/FilterSingleSelectField.tsx b/src/components/Filter/FilterContent/FilterSingleSelectField.tsx
index 6545832f6..044bfba4a 100644
--- a/src/components/Filter/FilterContent/FilterSingleSelectField.tsx
+++ b/src/components/Filter/FilterContent/FilterSingleSelectField.tsx
@@ -22,7 +22,7 @@ export const FilterSingleSelectField: React.FC<FilterSingleSelectFieldProps> = (
   return (
     <>
       <SingleSelectField
-        data-test="filterRangeTypeChoice"
+        data-test-id="filter-range-type-choice"
         choices={getIsFilterMultipleChoices(intl)}
         value={filter.multiple ? FilterType.MULTIPLE : FilterType.SINGULAR}
         InputProps={{
diff --git a/src/components/Filter/FilterContent/FilterTextField.tsx b/src/components/Filter/FilterContent/FilterTextField.tsx
index f52959e0e..dcc2f6402 100644
--- a/src/components/Filter/FilterContent/FilterTextField.tsx
+++ b/src/components/Filter/FilterContent/FilterTextField.tsx
@@ -21,8 +21,7 @@ const FilterTextField: React.FC<FilterTextFieldProps> = ({
 
   return (
     <TextField
-      data-test={filterTestingContext}
-      data-test-id={filter.name}
+      data-test-id={filterTestingContext + filter.name}
       fullWidth
       name={filter.name}
       InputProps={{
diff --git a/src/components/Filter/FilterContent/utils.ts b/src/components/Filter/FilterContent/utils.ts
index 48cdcaa82..262c20ca5 100644
--- a/src/components/Filter/FilterContent/utils.ts
+++ b/src/components/Filter/FilterContent/utils.ts
@@ -7,7 +7,7 @@ import { IntlShape } from "react-intl";
 
 import { FilterType, IFilterElement } from "../types";
 
-export const filterTestingContext = "filter-field";
+export const filterTestingContext = "filter-field-";
 
 export interface FilterFieldBaseProps<T extends string = string> {
   filter: IFilterElement<T>;
diff --git a/src/components/Filter/FilterOptionField.tsx b/src/components/Filter/FilterOptionField.tsx
index 71dda7e28..dedf67638 100644
--- a/src/components/Filter/FilterOptionField.tsx
+++ b/src/components/Filter/FilterOptionField.tsx
@@ -54,14 +54,12 @@ const FilterOptionField: React.FC<FilterBaseFieldProps> = ({
             control={
               filterField.multiple ? (
                 <Checkbox
-                  data-test="filterOption"
-                  data-test-id={option.value}
+                  data-test-id={"filter-option-" + option.value}
                   checked={filterField.value.includes(option.value)}
                 />
               ) : (
                 <Radio
-                  data-test="filterOption"
-                  data-test-id={option.value}
+                  data-test-id={"filter-option-" + option.value}
                   checked={filterField.value[0] === option.value}
                   color="primary"
                 />
diff --git a/src/components/Form/ExitFormDialog.tsx b/src/components/Form/ExitFormDialog.tsx
index 37aa57672..94f87232a 100644
--- a/src/components/Form/ExitFormDialog.tsx
+++ b/src/components/Form/ExitFormDialog.tsx
@@ -52,7 +52,12 @@ const ExitFormDialog: React.FC<ExitFormDialogProps> = ({
             {intl.formatMessage(messages.cancelButton)}
           </Button>
           <HorizontalSpacer />
-          <Button variant="contained" color="primary" onClick={onSubmit}>
+          <Button
+            variant="contained"
+            color="primary"
+            onClick={onSubmit}
+            data-test-id="save-and-continue"
+          >
             {intl.formatMessage(messages.confirmButton)}
           </Button>
         </div>
diff --git a/src/components/LinkChoice/LinkChoice.tsx b/src/components/LinkChoice/LinkChoice.tsx
index 115eafe3d..9459f5231 100644
--- a/src/components/LinkChoice/LinkChoice.tsx
+++ b/src/components/LinkChoice/LinkChoice.tsx
@@ -141,7 +141,7 @@ const LinkChoice: React.FC<LinkChoiceProps> = ({
                 selected={choice.value === value}
                 key={choice.value}
                 onClick={() => handleChange(choice.value)}
-                data-test="select-option"
+                data-test-id="select-option"
               >
                 {choice.label}
               </MenuItem>
diff --git a/src/components/MediaTile/MediaTile.tsx b/src/components/MediaTile/MediaTile.tsx
index 24b10683a..90ca30228 100644
--- a/src/components/MediaTile/MediaTile.tsx
+++ b/src/components/MediaTile/MediaTile.tsx
@@ -73,7 +73,7 @@ const MediaTile: React.FC<MediaTileProps> = props => {
   const mediaUrl = parsedMediaOembedData?.thumbnail_url || media.url;
 
   return (
-    <div className={classes.mediaContainer} data-test="product-image">
+    <div className={classes.mediaContainer} data-test-id="product-image">
       <div
         className={classNames(classes.mediaOverlay, {
           [classes.mediaOverlayShadow]: loading
diff --git a/src/components/Metadata/Metadata.test.tsx b/src/components/Metadata/Metadata.test.tsx
index 8cb49c4eb..0be02e61e 100644
--- a/src/components/Metadata/Metadata.test.tsx
+++ b/src/components/Metadata/Metadata.test.tsx
@@ -10,7 +10,7 @@ import Metadata from "./Metadata";
 
 configure({ adapter: new Adapter() });
 
-const expandButton = 'data-test="expand"';
+const expandButton = 'data-test-id="expand"';
 
 const Component: React.FC = () => {
   const { change, data } = useForm(props.data, jest.fn());
@@ -111,8 +111,8 @@ describe("Metadata editor", () => {
   it("can delete field", () => {
     const wrapper = mount(<Component />);
 
-    const fieldSelector = 'tr[data-test="field"]';
-    const deleteButtonSelector = '[data-test="deleteField"]';
+    const fieldSelector = 'tr[data-test-id="field"]';
+    const deleteButtonSelector = '[data-test-id*="delete-field"]';
 
     // Expand to reveal fields
     wrapper
@@ -137,8 +137,8 @@ describe("Metadata editor", () => {
   it("can add field", () => {
     const wrapper = mount(<Component />);
 
-    const fieldSelector = 'tr[data-test="field"]';
-    const addButtonSelector = '[data-test="addField"]';
+    const fieldSelector = 'tr[data-test-id="field"]';
+    const addButtonSelector = '[data-test-id="add-field"]';
 
     // Expand to reveal fields
     wrapper
diff --git a/src/components/Metadata/MetadataCard.tsx b/src/components/Metadata/MetadataCard.tsx
index 075134900..f8163665e 100644
--- a/src/components/Metadata/MetadataCard.tsx
+++ b/src/components/Metadata/MetadataCard.tsx
@@ -54,7 +54,7 @@ const MetadataCard: React.FC<MetadataCardProps> = ({
 
   return (
     <Card
-      data-test="metadataEditor"
+      data-test-id="metadata-editor"
       data-test-is-private={isPrivate}
       data-test-expanded={expanded}
     >
@@ -77,7 +77,7 @@ const MetadataCard: React.FC<MetadataCardProps> = ({
               })}
               hoverOutline={false}
               variant="secondary"
-              data-test="expand"
+              data-test-id="expand"
               onClick={() => setExpanded(!expanded)}
             >
               <ExpandIcon />
@@ -141,7 +141,7 @@ const MetadataCard: React.FC<MetadataCardProps> = ({
                   </TableHead>
                   <TableBody>
                     {data.map((field, fieldIndex) => (
-                      <TableRow data-test="field" key={fieldIndex}>
+                      <TableRow data-test-id="field" key={fieldIndex}>
                         <TableCell className={classes.colName}>
                           <TextField
                             InputProps={{
@@ -172,8 +172,7 @@ const MetadataCard: React.FC<MetadataCardProps> = ({
                         <TableCell className={classes.colAction}>
                           <IconButton
                             variant="secondary"
-                            data-test="deleteField"
-                            data-test-id={fieldIndex}
+                            data-test-id={"delete-field-" + fieldIndex}
                             onClick={() =>
                               onChange({
                                 target: {
@@ -194,7 +193,7 @@ const MetadataCard: React.FC<MetadataCardProps> = ({
               <CardActions className={classes.actions}>
                 <Button
                   variant="secondary"
-                  data-test="addField"
+                  data-test-id="add-field"
                   onClick={() =>
                     onChange({
                       target: {
diff --git a/src/components/MultiAutocompleteSelectField/MultiAutocompleteSelectField.tsx b/src/components/MultiAutocompleteSelectField/MultiAutocompleteSelectField.tsx
index 12372da15..765896463 100644
--- a/src/components/MultiAutocompleteSelectField/MultiAutocompleteSelectField.tsx
+++ b/src/components/MultiAutocompleteSelectField/MultiAutocompleteSelectField.tsx
@@ -261,7 +261,7 @@ const MultiAutocompleteSelectFieldComponent: React.FC<MultiAutocompleteSelectFie
               <IconButton
                 hoverOutline={false}
                 variant="secondary"
-                data-test-id={testId ? `${testId}Remove` : "remove"}
+                data-test-id={testId ? `${testId}-remove` : "remove"}
                 className={classes.chipClose}
                 disabled={value.disabled}
                 onClick={() => handleSelect(value.value)}
diff --git a/src/components/MultiAutocompleteSelectField/MultiAutocompleteSelectFieldContent.tsx b/src/components/MultiAutocompleteSelectField/MultiAutocompleteSelectFieldContent.tsx
index 7c75eb6b9..f432de3d2 100644
--- a/src/components/MultiAutocompleteSelectField/MultiAutocompleteSelectFieldContent.tsx
+++ b/src/components/MultiAutocompleteSelectField/MultiAutocompleteSelectFieldContent.tsx
@@ -309,7 +309,7 @@ const MultiAutocompleteSelectFieldContent: React.FC<MultiAutocompleteSelectField
         <MenuItem
           disabled={true}
           component="div"
-          data-test="multi-autocomplete-select-no-options"
+          data-test-id="multi-autocomplete-select-no-options"
         >
           <FormattedMessage defaultMessage={"No results found"} />
         </MenuItem>
diff --git a/src/components/NavigatorButton/NavigatorButton.tsx b/src/components/NavigatorButton/NavigatorButton.tsx
index 023f521b8..21118dc53 100644
--- a/src/components/NavigatorButton/NavigatorButton.tsx
+++ b/src/components/NavigatorButton/NavigatorButton.tsx
@@ -99,7 +99,7 @@ const NavigatorButton: React.FC<NavigatorButtonProps> = ({
     <>
       <LayoutButton
         className={classNames(className, classes.root)}
-        data-test="navigator"
+        data-test-id="navigator"
         onMouseEnter={setHelper}
         onMouseLeave={clearHelper}
         {...props}
diff --git a/src/components/RichTextEditor/RichTextEditor.tsx b/src/components/RichTextEditor/RichTextEditor.tsx
index 6342bfc40..6d76f983e 100644
--- a/src/components/RichTextEditor/RichTextEditor.tsx
+++ b/src/components/RichTextEditor/RichTextEditor.tsx
@@ -105,8 +105,7 @@ const RichTextEditor: React.FC<RichTextEditorProps> = ({
 
   return (
     <FormControl
-      data-test="richTextEditor"
-      data-test-id={name}
+      data-test-id={"rich-text-editor-" + name}
       disabled={disabled}
       error={error}
       fullWidth
diff --git a/src/components/RowNumberSelect/RowNumberSelect.tsx b/src/components/RowNumberSelect/RowNumberSelect.tsx
index 7b3557939..2e81a64c0 100644
--- a/src/components/RowNumberSelect/RowNumberSelect.tsx
+++ b/src/components/RowNumberSelect/RowNumberSelect.tsx
@@ -50,7 +50,7 @@ const RowNumberSelect: React.FC<RowNumberSelectProps> = ({
         <FormattedMessage defaultMessage="No of Rows:" />
       </span>
       <Select
-        data-test-id="rowNumberSelect"
+        data-test-id="row-number-select"
         className={classes.select}
         value={rowNumber}
         onChange={event => onChange(event.target.value as number)}
@@ -60,7 +60,7 @@ const RowNumberSelect: React.FC<RowNumberSelectProps> = ({
             <MenuItem
               value={choice}
               key={choice}
-              data-test-id="rowNumberOption"
+              data-test-id="row-number-option"
             >
               {choice}
             </MenuItem>
diff --git a/src/components/SearchBar/SearchInput.tsx b/src/components/SearchBar/SearchInput.tsx
index a5584c7db..8778aefd9 100644
--- a/src/components/SearchBar/SearchInput.tsx
+++ b/src/components/SearchBar/SearchInput.tsx
@@ -41,7 +41,7 @@ const SearchInput: React.FC<SearchInputProps> = props => {
 
         return (
           <TextField
-            data-test-id="searchInput"
+            data-test-id="search-input"
             className={classes.root}
             inputProps={{
               className: classes.input,
diff --git a/src/components/SingleAutocompleteSelectField/SingleAutocompleteSelectFieldContent.tsx b/src/components/SingleAutocompleteSelectField/SingleAutocompleteSelectFieldContent.tsx
index e5f31865f..0a59ed121 100644
--- a/src/components/SingleAutocompleteSelectField/SingleAutocompleteSelectFieldContent.tsx
+++ b/src/components/SingleAutocompleteSelectField/SingleAutocompleteSelectFieldContent.tsx
@@ -205,7 +205,7 @@ const SingleAutocompleteSelectFieldContent: React.FC<SingleAutocompleteSelectFie
       <div
         className={classes.content}
         ref={anchor}
-        data-test="autocomplete-dropdown"
+        data-test-id="autocomplete-dropdown"
       >
         {choices.length > 0 || displayCustomValue ? (
           <>
@@ -213,7 +213,7 @@ const SingleAutocompleteSelectFieldContent: React.FC<SingleAutocompleteSelectFie
               <MenuItem
                 className={classes.menuItem}
                 component="div"
-                data-test-id="singleautocomplete-select-option"
+                data-test-id="single-autocomplete-select-option"
                 data-test-type="empty"
                 {...emptyOptionProps}
               >
@@ -229,7 +229,7 @@ const SingleAutocompleteSelectFieldContent: React.FC<SingleAutocompleteSelectFie
                 {...getItemProps({
                   item: inputValue
                 })}
-                data-test-id="singleautocomplete-select-option-add"
+                data-test-id="single-autocomplete-select-option-add"
                 data-test-type="add"
                 onClick={add.onClick}
               >
@@ -246,7 +246,7 @@ const SingleAutocompleteSelectFieldContent: React.FC<SingleAutocompleteSelectFie
                 {...getItemProps({
                   item: inputValue
                 })}
-                data-test-id="singleautocomplete-select-option"
+                data-test-id="single-autocomplete-select-option"
                 data-test-type="custom"
               >
                 <FormattedMessage
@@ -284,7 +284,7 @@ const SingleAutocompleteSelectFieldContent: React.FC<SingleAutocompleteSelectFie
                     index: choiceIndex,
                     item: suggestion.value
                   })}
-                  data-test-id="singleautocomplete-select-option"
+                  data-test-id="single-autocomplete-select-option"
                   data-test-value={suggestion.value}
                   data-test-type="option"
                 >
@@ -305,7 +305,7 @@ const SingleAutocompleteSelectFieldContent: React.FC<SingleAutocompleteSelectFie
           <MenuItem
             disabled={true}
             component="div"
-            data-test="singleautocomplete-select-no-options"
+            data-test-id="single-autocomplete-select-no-options"
           >
             <FormattedMessage defaultMessage="No results found" />
           </MenuItem>
diff --git a/src/components/SingleSelectField/SingleSelectField.tsx b/src/components/SingleSelectField/SingleSelectField.tsx
index fe0133044..7b3082b00 100644
--- a/src/components/SingleSelectField/SingleSelectField.tsx
+++ b/src/components/SingleSelectField/SingleSelectField.tsx
@@ -127,8 +127,7 @@ export const SingleSelectField: React.FC<SingleSelectFieldProps> = props => {
           choices.map(choice => (
             <MenuItem
               disabled={choice.disabled}
-              data-test="selectFieldOption"
-              data-test-id={choice.value}
+              data-test-id={"select-field-option-" + choice.value}
               value={choice.value}
               key={choice.value}
             >
@@ -137,7 +136,7 @@ export const SingleSelectField: React.FC<SingleSelectFieldProps> = props => {
           ))
         ) : (
           <MenuItem
-            data-test="selectFieldOption"
+            data-test-id="select-field-option"
             data-test-disabled
             disabled={true}
           >
diff --git a/src/components/SortableChip/SortableChip.tsx b/src/components/SortableChip/SortableChip.tsx
index 46406b543..8c71295a5 100644
--- a/src/components/SortableChip/SortableChip.tsx
+++ b/src/components/SortableChip/SortableChip.tsx
@@ -49,14 +49,14 @@ const SortableChip = SortableElement<SortableChipProps>(props => {
       <div className={classes.content}>
         <SortableHandle
           className={classes.sortableHandle}
-          data-test="button-drag-handle"
+          data-test-id="button-drag-handle"
         />
-        <Typography data-test="chip-label">{label}</Typography>
+        <Typography data-test-id="chip-label">{label}</Typography>
         {onClose && (
           <CloseIcon
             className={classes.closeIcon}
             onClick={onClose}
-            data-test="button-close"
+            data-test-id="button-close"
           />
         )}
       </div>
diff --git a/src/components/TableCellAvatar/TableCellAvatar.tsx b/src/components/TableCellAvatar/TableCellAvatar.tsx
index 1d5db6130..cdb5dd86f 100644
--- a/src/components/TableCellAvatar/TableCellAvatar.tsx
+++ b/src/components/TableCellAvatar/TableCellAvatar.tsx
@@ -31,7 +31,7 @@ const TableCellAvatar: React.FC<TableCellAvatarProps> = props => {
   return (
     <TableCell
       className={classNames(classes.root, className)}
-      data-test-id="tableCellAvatar"
+      data-test-id="table-cell-avatar"
       {...rest}
     >
       <Avatar {...rest} />
diff --git a/src/components/TablePagination/TablePaginationActions.tsx b/src/components/TablePagination/TablePaginationActions.tsx
index 402bffb32..5e3b4d83b 100644
--- a/src/components/TablePagination/TablePaginationActions.tsx
+++ b/src/components/TablePagination/TablePaginationActions.tsx
@@ -88,7 +88,7 @@ export const TablePaginationActions: React.FC<TablePaginationActionsProps> = pro
         })}
         onClick={onPreviousPage}
         disabled={!hasPreviousPage}
-        data-test="button-pagination-back"
+        data-test-id="button-pagination-back"
         {...backIconButtonProps}
       >
         {direction === "rtl" ? <ArrowRight /> : <ArrowLeft />}
@@ -100,7 +100,7 @@ export const TablePaginationActions: React.FC<TablePaginationActionsProps> = pro
         })}
         onClick={onNextPage}
         disabled={!hasNextPage}
-        data-test="button-pagination-next"
+        data-test-id="button-pagination-next"
         {...nextIconButtonProps}
       >
         {direction === "rtl" ? <ArrowLeft /> : <ArrowRight />}
diff --git a/src/components/UserChip/UserChip.tsx b/src/components/UserChip/UserChip.tsx
index ea456c145..2d2cf53e9 100644
--- a/src/components/UserChip/UserChip.tsx
+++ b/src/components/UserChip/UserChip.tsx
@@ -44,19 +44,19 @@ const UserChip: React.FC<UserChipProps> = ({
     >
       <UserChipMenuItem
         onClick={onProfileClick}
-        data-test="accountSettingsButton"
+        data-test-id="account-settings-button"
       >
         <FormattedMessage
           defaultMessage="Account Settings"
           description="button"
         />
       </UserChipMenuItem>
-      <UserChipMenuItem onClick={onLogout} data-test="logOutButton">
+      <UserChipMenuItem onClick={onLogout} data-test-id="log-out-button">
         <FormattedMessage defaultMessage="Log out" description="button" />
       </UserChipMenuItem>
       <UserChipMenuItem
         leaveOpen
-        data-test="themeSwitch"
+        data-test-id="theme-switch"
         data-test-is-dark={isDarkThemeEnabled}
       >
         <FormControlLabel
diff --git a/src/configuration/ConfigurationPage.tsx b/src/configuration/ConfigurationPage.tsx
index e90ac65ee..f1ece6c77 100644
--- a/src/configuration/ConfigurationPage.tsx
+++ b/src/configuration/ConfigurationPage.tsx
@@ -137,9 +137,11 @@ export const ConfigurationPage: React.FC<ConfigurationPageProps> = props => {
                       icon={item.icon}
                       title={item.title}
                       description={item.description}
-                      data-test="settingsSubsection"
-                      data-testid={item.title.toLowerCase()}
-                      data-test-id={item.testId}
+                      data-test-id={
+                        item.testId +
+                        "-settings-subsection-" +
+                        item.title.toLowerCase()
+                      }
                     />
                   </Link>
                 ))}
diff --git a/src/configuration/index.tsx b/src/configuration/index.tsx
index e0253f326..5303379ea 100644
--- a/src/configuration/index.tsx
+++ b/src/configuration/index.tsx
@@ -53,7 +53,7 @@ export function createConfigurationMenu(intl: IntlShape): MenuSection[] {
           ],
           title: intl.formatMessage(sectionNames.attributes),
           url: attributeListUrl(),
-          testId: "configurationMenuAttributes"
+          testId: "configuration-menu-attributes"
         },
         {
           description: intl.formatMessage({
@@ -64,7 +64,7 @@ export function createConfigurationMenu(intl: IntlShape): MenuSection[] {
           permissions: [PermissionEnum.MANAGE_PRODUCT_TYPES_AND_ATTRIBUTES],
           title: intl.formatMessage(sectionNames.productTypes),
           url: productTypeListUrl(),
-          testId: "configurationMenuProductTypes"
+          testId: "configuration-menu-product-types"
         }
       ]
     },
@@ -82,7 +82,7 @@ export function createConfigurationMenu(intl: IntlShape): MenuSection[] {
           permissions: [PermissionEnum.MANAGE_SETTINGS],
           title: intl.formatMessage(sectionNames.taxes),
           url: taxSection,
-          testId: "configurationMenuTaxes"
+          testId: "configuration-menu-taxes"
         }
       ]
     },
@@ -100,7 +100,7 @@ export function createConfigurationMenu(intl: IntlShape): MenuSection[] {
           permissions: [PermissionEnum.MANAGE_STAFF],
           title: intl.formatMessage(sectionNames.staff),
           url: staffListUrl(),
-          testId: "configurationMenuStaff"
+          testId: "configuration-menu-staff"
         },
         {
           description: intl.formatMessage({
@@ -112,7 +112,7 @@ export function createConfigurationMenu(intl: IntlShape): MenuSection[] {
           permissions: [PermissionEnum.MANAGE_STAFF],
           title: intl.formatMessage(sectionNames.permissionGroups),
           url: permissionGroupListUrl(),
-          testId: "configurationMenuPermissionGroups"
+          testId: "configuration-menu-permission-groups"
         }
       ]
     },
@@ -141,7 +141,7 @@ export function createConfigurationMenu(intl: IntlShape): MenuSection[] {
           permissions: [PermissionEnum.MANAGE_PRODUCTS],
           title: intl.formatMessage(sectionNames.warehouses),
           url: warehouseSection,
-          testId: "configurationMenuWarehouses"
+          testId: "configuration-menu-warehouses"
         }
       ]
     },
@@ -159,7 +159,7 @@ export function createConfigurationMenu(intl: IntlShape): MenuSection[] {
           permissions: [PermissionEnum.MANAGE_CHANNELS],
           title: intl.formatMessage(sectionNames.channels),
           url: channelsListUrl(),
-          testId: "configurationMenuChannels"
+          testId: "configuration-menu-channels"
         }
       ]
     },
@@ -180,7 +180,7 @@ export function createConfigurationMenu(intl: IntlShape): MenuSection[] {
           ],
           title: intl.formatMessage(sectionNames.pageTypes),
           url: pageTypeListUrl(),
-          testId: "configurationMenuPageTypes"
+          testId: "configuration-menu-page-types"
         }
       ]
     },
@@ -198,7 +198,7 @@ export function createConfigurationMenu(intl: IntlShape): MenuSection[] {
           permissions: [PermissionEnum.MANAGE_MENUS],
           title: intl.formatMessage(sectionNames.navigation),
           url: menuListUrl(),
-          testId: "configurationMenuNavigation"
+          testId: "configuration-menu-navigation"
         },
         {
           description: intl.formatMessage({
@@ -209,7 +209,7 @@ export function createConfigurationMenu(intl: IntlShape): MenuSection[] {
           permissions: [PermissionEnum.MANAGE_SETTINGS],
           title: intl.formatMessage(sectionNames.siteSettings),
           url: siteSettingsUrl(),
-          testId: "configurationMenuSiteSettings"
+          testId: "configuration-menu-site-settings"
         },
         {
           description: intl.formatMessage({
@@ -226,7 +226,7 @@ export function createConfigurationMenu(intl: IntlShape): MenuSection[] {
           permissions: [PermissionEnum.MANAGE_PLUGINS],
           title: intl.formatMessage(sectionNames.plugins),
           url: pluginListUrl(),
-          testId: "configurationPluginsPages"
+          testId: "configuration-plugins-pages"
         }
       ]
     }
diff --git a/src/customers/components/CustomerAddresses/CustomerAddresses.tsx b/src/customers/components/CustomerAddresses/CustomerAddresses.tsx
index 167530d02..1ca9d850e 100644
--- a/src/customers/components/CustomerAddresses/CustomerAddresses.tsx
+++ b/src/customers/components/CustomerAddresses/CustomerAddresses.tsx
@@ -41,7 +41,7 @@ const CustomerAddresses: React.FC<CustomerAddressesProps> = props => {
         })}
         toolbar={
           <Button
-            data-test-id="manageAddresses"
+            data-test-id="manage-addresses"
             disabled={disabled}
             variant="tertiary"
             onClick={onAddressManageClick}
diff --git a/src/customers/components/CustomerListPage/CustomerListPage.tsx b/src/customers/components/CustomerListPage/CustomerListPage.tsx
index c2ded9a39..d06f502a8 100644
--- a/src/customers/components/CustomerListPage/CustomerListPage.tsx
+++ b/src/customers/components/CustomerListPage/CustomerListPage.tsx
@@ -53,7 +53,11 @@ const CustomerListPage: React.FC<CustomerListPageProps> = ({
   return (
     <Container>
       <PageHeader title={intl.formatMessage(sectionNames.customers)}>
-        <Button variant="primary" onClick={onAdd} data-test-id="createCustomer">
+        <Button
+          variant="primary"
+          onClick={onAdd}
+          data-test-id="create-customer"
+        >
           <FormattedMessage
             defaultMessage="Create customer"
             description="button"
diff --git a/src/giftCards/GiftCardSettings/GiftCardExpirySettingsCard/GiftCardExpirySettingsCard.tsx b/src/giftCards/GiftCardSettings/GiftCardExpirySettingsCard/GiftCardExpirySettingsCard.tsx
index b125ff463..d04f768a7 100644
--- a/src/giftCards/GiftCardSettings/GiftCardExpirySettingsCard/GiftCardExpirySettingsCard.tsx
+++ b/src/giftCards/GiftCardSettings/GiftCardExpirySettingsCard/GiftCardExpirySettingsCard.tsx
@@ -25,7 +25,7 @@ const GiftCardExpirySettingsCard: React.FC<GiftCardExpirySettingsCardProps> = ({
   const intl = useIntl();
 
   return (
-    <Card data-test="giftCardSettings">
+    <Card data-test-id="gift-card-settings">
       <CardTitle title={intl.formatMessage(messages.expiryDateTitle)} />
       <CardContent>
         <GiftCardSettingsExpirySelect
diff --git a/src/giftCards/GiftCardsList/GiftCardsListHeader/GiftCardsListHeader.tsx b/src/giftCards/GiftCardsList/GiftCardsListHeader/GiftCardsListHeader.tsx
index 594f4497c..7d58598a7 100644
--- a/src/giftCards/GiftCardsList/GiftCardsListHeader/GiftCardsListHeader.tsx
+++ b/src/giftCards/GiftCardsList/GiftCardsListHeader/GiftCardsListHeader.tsx
@@ -46,7 +46,7 @@ const GiftCardsListHeader: React.FC = () => {
     <>
       <PageHeader
         title={intl.formatMessage(sectionNames.giftCards)}
-        cardMenu={<CardMenu menuItems={menuItems} data-test="menu" />}
+        cardMenu={<CardMenu menuItems={menuItems} data-test-id="menu" />}
       >
         <HorizontalSpacer spacing={2} />
         <Button
diff --git a/src/giftCards/components/GiftCardSettingsExpirySelect/GiftCardSettingsExpirySelect.tsx b/src/giftCards/components/GiftCardSettingsExpirySelect/GiftCardSettingsExpirySelect.tsx
index 64602987b..e8c1a2fd7 100644
--- a/src/giftCards/components/GiftCardSettingsExpirySelect/GiftCardSettingsExpirySelect.tsx
+++ b/src/giftCards/components/GiftCardSettingsExpirySelect/GiftCardSettingsExpirySelect.tsx
@@ -45,7 +45,7 @@ const GiftCardSettingsExpirySelect: React.FC<GiftCardSettingsExpirySelectProps>
         checked={expiryPeriodActive}
         onChange={change}
         disabled={disabled}
-        data-test="expiryPeriodActive"
+        data-test-id="expiry-period-active"
       />
 
       {expiryPeriodActive && (
diff --git a/src/home/components/HomeHeader/HomeHeader.tsx b/src/home/components/HomeHeader/HomeHeader.tsx
index 5e3ca02eb..72cfe6b2e 100644
--- a/src/home/components/HomeHeader/HomeHeader.tsx
+++ b/src/home/components/HomeHeader/HomeHeader.tsx
@@ -32,12 +32,12 @@ const HomeOrdersCard: React.FC<HomeOrdersCardProps> = props => {
   const classes = useStyles(props);
 
   return (
-    <div className={classes.headerContainer} data-test="home-header">
+    <div className={classes.headerContainer} data-test-id="home-header">
       <div>
         <Typography
           className={classes.pageHeader}
           variant="h4"
-          data-test="welcomeHeader"
+          data-test-id="welcome-header"
         >
           {userName ? (
             <FormattedMessage
diff --git a/src/navigation/components/MenuCreateDialog/MenuCreateDialog.tsx b/src/navigation/components/MenuCreateDialog/MenuCreateDialog.tsx
index 85837a8e4..fe37a3ca8 100644
--- a/src/navigation/components/MenuCreateDialog/MenuCreateDialog.tsx
+++ b/src/navigation/components/MenuCreateDialog/MenuCreateDialog.tsx
@@ -77,7 +77,7 @@ const MenuCreateDialog: React.FC<MenuCreateDialogProps> = ({
               <ConfirmButton
                 transitionState={confirmButtonState}
                 onClick={submit}
-                data-test="submit"
+                data-test-id="submit"
               >
                 <FormattedMessage {...buttonMessages.save} />
               </ConfirmButton>
diff --git a/src/navigation/components/MenuItemDialog/MenuItemDialog.tsx b/src/navigation/components/MenuItemDialog/MenuItemDialog.tsx
index d3cea385a..dc5f755e3 100644
--- a/src/navigation/components/MenuItemDialog/MenuItemDialog.tsx
+++ b/src/navigation/components/MenuItemDialog/MenuItemDialog.tsx
@@ -293,7 +293,7 @@ const MenuItemDialog: React.FC<MenuItemDialogProps> = ({
       <DialogActions>
         <BackButton onClick={onClose} />
         <ConfirmButton
-          data-test="submit"
+          data-test-id="submit"
           transitionState={confirmButtonState}
           onClick={handleSubmit}
         >
diff --git a/src/navigation/components/MenuItems/MenuItems.tsx b/src/navigation/components/MenuItems/MenuItems.tsx
index decd195d0..b6030411d 100644
--- a/src/navigation/components/MenuItems/MenuItems.tsx
+++ b/src/navigation/components/MenuItems/MenuItems.tsx
@@ -268,7 +268,7 @@ const MenuItems: React.FC<MenuItemsProps> = props => {
         )}
       </div>
       <CardActions className={classes.actions}>
-        <Button onClick={onItemAdd} data-test-id="createNewMenuItem">
+        <Button onClick={onItemAdd} data-test-id="create-new-menu-item">
           <FormattedMessage
             defaultMessage="Create new item"
             description="add new menu item"
diff --git a/src/navigation/components/MenuListPage/MenuListPage.tsx b/src/navigation/components/MenuListPage/MenuListPage.tsx
index f0af840ec..91b47c8cd 100644
--- a/src/navigation/components/MenuListPage/MenuListPage.tsx
+++ b/src/navigation/components/MenuListPage/MenuListPage.tsx
@@ -31,7 +31,7 @@ const MenuListPage: React.FC<MenuListPageProps> = ({
         {intl.formatMessage(sectionNames.configuration)}
       </Backlink>
       <PageHeader title={intl.formatMessage(sectionNames.navigation)}>
-        <Button variant="primary" onClick={onAdd} data-test-id="addMenu">
+        <Button variant="primary" onClick={onAdd} data-test-id="add-menu">
           <FormattedMessage
             defaultMessage="Create Menu"
             description="button"
diff --git a/src/orders/components/OrderCustomerAddressesEditDialog/OrderCustomerAddressEdit.tsx b/src/orders/components/OrderCustomerAddressesEditDialog/OrderCustomerAddressEdit.tsx
index 2c0d21e36..954548c46 100644
--- a/src/orders/components/OrderCustomerAddressesEditDialog/OrderCustomerAddressEdit.tsx
+++ b/src/orders/components/OrderCustomerAddressesEditDialog/OrderCustomerAddressEdit.tsx
@@ -85,8 +85,9 @@ const OrderCustomerAddressEdit: React.FC<OrderCustomerAddressEditProps> = props
         control={
           <Radio
             color="primary"
-            data-test="addressInputOption"
-            data-test-id={AddressInputOptionEnum.CUSTOMER_ADDRESS}
+            data-test-id={
+              addressInputOption + AddressInputOptionEnum.CUSTOMER_ADDRESS
+            }
           />
         }
         label={intl.formatMessage(addressEditMessages.customerAddress)}
@@ -111,8 +112,9 @@ const OrderCustomerAddressEdit: React.FC<OrderCustomerAddressEditProps> = props
         control={
           <Radio
             color="primary"
-            data-test={addressInputOption}
-            data-test-id={AddressInputOptionEnum.NEW_ADDRESS}
+            data-test-id={
+              addressInputOption + AddressInputOptionEnum.NEW_ADDRESS
+            }
           />
         }
         label={intl.formatMessage(addressEditMessages.newAddress)}
diff --git a/src/orders/components/OrderCustomerAddressesEditDialog/OrderCustomerAddressesEditDialog.tsx b/src/orders/components/OrderCustomerAddressesEditDialog/OrderCustomerAddressesEditDialog.tsx
index 06fe4ecdf..239be6764 100644
--- a/src/orders/components/OrderCustomerAddressesEditDialog/OrderCustomerAddressesEditDialog.tsx
+++ b/src/orders/components/OrderCustomerAddressesEditDialog/OrderCustomerAddressesEditDialog.tsx
@@ -338,7 +338,7 @@ const OrderCustomerAddressesEditDialog: React.FC<OrderCustomerAddressesEditDialo
                                   }
                                 })
                               }
-                              data-test="billingSameAsShipping"
+                              data-test-id="billing-same-as-shipping"
                             />
                           }
                           label={intl.formatMessage(
@@ -391,7 +391,7 @@ const OrderCustomerAddressesEditDialog: React.FC<OrderCustomerAddressesEditDialo
                                       }
                                     })
                                   }
-                                  data-test="billingSameAsShipping"
+                                  data-test-id="billing-same-as-shipping"
                                 />
                               }
                               label={intl.formatMessage(
@@ -426,7 +426,7 @@ const OrderCustomerAddressesEditDialog: React.FC<OrderCustomerAddressesEditDialo
                                       }
                                     })
                                   }
-                                  data-test="billingSameAsShipping"
+                                  data-test-id="billing-same-as-shipping"
                                 />
                               }
                               label={intl.formatMessage(
@@ -443,7 +443,7 @@ const OrderCustomerAddressesEditDialog: React.FC<OrderCustomerAddressesEditDialo
                       transitionState={confirmButtonState}
                       variant="primary"
                       type="submit"
-                      data-test="submit"
+                      data-test-id="submit"
                     >
                       <FormattedMessage
                         {...(continueToSearchAddressesState(data)
diff --git a/src/orders/components/OrderDetailsPage/OrderDetailsPage.tsx b/src/orders/components/OrderDetailsPage/OrderDetailsPage.tsx
index 94c9c5eb3..be4a9251c 100644
--- a/src/orders/components/OrderDetailsPage/OrderDetailsPage.tsx
+++ b/src/orders/components/OrderDetailsPage/OrderDetailsPage.tsx
@@ -241,7 +241,7 @@ const OrderDetailsPage: React.FC<OrderDetailsPageProps> = props => {
               )}
             </div>
             <Grid>
-              <div data-test-id="orderFulfillment">
+              <div data-test-id="order-fulfillment">
                 {!isOrderUnconfirmed ? (
                   <OrderUnfulfilledProductsCard
                     showFulfillmentAction={canFulfill}
diff --git a/src/orders/components/OrderDiscountCommonModal/OrderDiscountCommonModal.tsx b/src/orders/components/OrderDiscountCommonModal/OrderDiscountCommonModal.tsx
index 4afe5bb97..1fd0c1510 100644
--- a/src/orders/components/OrderDiscountCommonModal/OrderDiscountCommonModal.tsx
+++ b/src/orders/components/OrderDiscountCommonModal/OrderDiscountCommonModal.tsx
@@ -320,7 +320,7 @@ const OrderDiscountCommonModal: React.FC<OrderDiscountCommonModalProps> = ({
           {existingDiscount && (
             <div className={classes.buttonWrapper}>
               <ConfirmButton
-                data-test="button-remove"
+                data-test-id="button-remove"
                 onClick={onRemove}
                 className={classes.removeButton}
                 transitionState={removeStatus}
diff --git a/src/orders/components/OrderFulfilledProductsCard/OrderFulfilledProductsCard.tsx b/src/orders/components/OrderFulfilledProductsCard/OrderFulfilledProductsCard.tsx
index d3fcccf16..971b247ee 100644
--- a/src/orders/components/OrderFulfilledProductsCard/OrderFulfilledProductsCard.tsx
+++ b/src/orders/components/OrderFulfilledProductsCard/OrderFulfilledProductsCard.tsx
@@ -78,7 +78,7 @@ const OrderFulfilledProductsCard: React.FC<OrderFulfilledProductsCardProps> = pr
                 variant="secondary"
                 className={classes.deleteIcon}
                 onClick={onOrderFulfillmentCancel}
-                data-test-id="cancelFulfillmentButton"
+                data-test-id="cancel-fulfillment-button"
               >
                 <TrashIcon />
               </IconButton>
diff --git a/src/orders/components/OrderFulfillmentApproveDialog/OrderFulfillmentApproveDialog.tsx b/src/orders/components/OrderFulfillmentApproveDialog/OrderFulfillmentApproveDialog.tsx
index 84e5457e2..36fca7516 100644
--- a/src/orders/components/OrderFulfillmentApproveDialog/OrderFulfillmentApproveDialog.tsx
+++ b/src/orders/components/OrderFulfillmentApproveDialog/OrderFulfillmentApproveDialog.tsx
@@ -48,7 +48,7 @@ const OrderFulfillmentAcceptDialog: React.FC<OrderFulfillmentAcceptDialogProps>
                 <FormattedMessage {...messages.description} />
               </DialogContentText>
               <ControlledCheckbox
-                data-test="notify-customer"
+                data-test-id="notify-customer"
                 name={
                   "notifyCustomer" as keyof OrderFulfillmentAcceptDialogFormData
                 }
diff --git a/src/orders/components/OrderFulfillmentCancelDialog/OrderFulfillmentCancelDialog.tsx b/src/orders/components/OrderFulfillmentCancelDialog/OrderFulfillmentCancelDialog.tsx
index 3a3240a68..af42aeab2 100644
--- a/src/orders/components/OrderFulfillmentCancelDialog/OrderFulfillmentCancelDialog.tsx
+++ b/src/orders/components/OrderFulfillmentCancelDialog/OrderFulfillmentCancelDialog.tsx
@@ -97,7 +97,7 @@ const OrderFulfillmentCancelDialog: React.FC<OrderFulfillmentCancelDialogProps>
                 </DialogContentText>
                 <div
                   className={classes.selectCcontainer}
-                  data-test-id="cancelFulfillmentSelectField"
+                  data-test-id="cancel-fulfillment-select-field"
                 >
                   <SingleAutocompleteSelectField
                     choices={choices}
@@ -125,7 +125,7 @@ const OrderFulfillmentCancelDialog: React.FC<OrderFulfillmentCancelDialogProps>
               <DialogActions>
                 <BackButton onClick={onClose} />
                 <ConfirmButton
-                  data-test="submit"
+                  data-test-id="submit"
                   disabled={formData.warehouseId === null}
                   transitionState={confirmButtonState}
                   onClick={submit}
diff --git a/src/orders/components/OrderFulfillmentSettings/OrderFulfillmentSettings.tsx b/src/orders/components/OrderFulfillmentSettings/OrderFulfillmentSettings.tsx
index 5dcfd3d1f..9793500ef 100644
--- a/src/orders/components/OrderFulfillmentSettings/OrderFulfillmentSettings.tsx
+++ b/src/orders/components/OrderFulfillmentSettings/OrderFulfillmentSettings.tsx
@@ -21,7 +21,7 @@ const OrderFulfillmentSettings: React.FC<OrderFulfillmentSettingsProps> = ({
   const intl = useIntl();
 
   return (
-    <Card data-test="OrderFulfillmentSettings">
+    <Card data-test-id="order-fulfillment-settings">
       <CardTitle
         title={intl.formatMessage({
           defaultMessage: "Fulfillment settings",
@@ -48,7 +48,7 @@ const OrderFulfillmentSettings: React.FC<OrderFulfillmentSettingsProps> = ({
           checked={data.fulfillmentAutoApprove}
           onChange={onChange}
           disabled={disabled}
-          data-test="fulfillmentAutoApproveCheckbox"
+          data-test-id="fulfillment-auto-approve-checkbox"
         />
         <FormSpacer />
         <ControlledCheckbox
@@ -70,7 +70,7 @@ const OrderFulfillmentSettings: React.FC<OrderFulfillmentSettingsProps> = ({
           checked={data.fulfillmentAllowUnpaid}
           onChange={onChange}
           disabled={disabled}
-          data-test="fulfillmentAllowUnpaidCheckbox"
+          data-test-id="fulfillment-allow-unpaid-checkbox"
         />
       </CardContent>
     </Card>
diff --git a/src/orders/components/OrderProductAddDialog/OrderProductAddDialog.tsx b/src/orders/components/OrderProductAddDialog/OrderProductAddDialog.tsx
index 37c9629c7..48383611a 100644
--- a/src/orders/components/OrderProductAddDialog/OrderProductAddDialog.tsx
+++ b/src/orders/components/OrderProductAddDialog/OrderProductAddDialog.tsx
@@ -255,7 +255,7 @@ const OrderProductAddDialog: React.FC<OrderProductAddDialogProps> = props => {
           description="dialog header"
         />
       </DialogTitle>
-      <DialogContent className={classes.topArea} data-test-id="searchQuery">
+      <DialogContent className={classes.topArea} data-test-id="search-query">
         <TextField
           name="query"
           value={query}
diff --git a/src/orders/components/OrderRefundFulfilledProducts/OrderRefundFulfilledProducts.tsx b/src/orders/components/OrderRefundFulfilledProducts/OrderRefundFulfilledProducts.tsx
index b99fadd93..b9f810b81 100644
--- a/src/orders/components/OrderRefundFulfilledProducts/OrderRefundFulfilledProducts.tsx
+++ b/src/orders/components/OrderRefundFulfilledProducts/OrderRefundFulfilledProducts.tsx
@@ -105,8 +105,9 @@ const OrderRefundFulfilledProducts: React.FC<OrderRefundFulfilledProductsProps>
         <Button
           className={classes.setMaximalQuantityButton}
           onClick={onSetMaximalQuantities}
-          data-test="setMaximalQuantityFulfilledButton"
-          data-test-id={fulfillment?.id}
+          data-test-id={
+            "set-maximal-quantity-fulfilled-button-" + fulfillment?.id
+          }
         >
           <FormattedMessage
             defaultMessage="Set maximal quantities"
@@ -177,8 +178,7 @@ const OrderRefundFulfilledProducts: React.FC<OrderRefundFulfilledProductsProps>
                         type="number"
                         inputProps={{
                           className: classes.quantityInnerInput,
-                          "data-test": "quantityInput",
-                          "data-test-id": line?.id,
+                          "data-test-id": "quantityInput" + line?.id,
                           max: (line?.quantity).toString(),
                           min: 0,
                           style: { textAlign: "right" }
diff --git a/src/orders/components/OrderRefundReturnAmount/OrderRefundReturnAmount.tsx b/src/orders/components/OrderRefundReturnAmount/OrderRefundReturnAmount.tsx
index 575825b09..db9b3923a 100644
--- a/src/orders/components/OrderRefundReturnAmount/OrderRefundReturnAmount.tsx
+++ b/src/orders/components/OrderRefundReturnAmount/OrderRefundReturnAmount.tsx
@@ -302,7 +302,7 @@ const OrderRefundAmount: React.FC<OrderRefundAmountProps> = props => {
           onClick={onRefund}
           className={classes.refundButton}
           disabled={disableRefundButton}
-          data-test="submit"
+          data-test-id="submit"
         >
           {!disableRefundButton && !isReturn ? (
             <FormattedMessage
diff --git a/src/orders/components/OrderRefundReturnAmount/RefundAmountInput.tsx b/src/orders/components/OrderRefundReturnAmount/RefundAmountInput.tsx
index bfe1b7bc9..2cb0da762 100644
--- a/src/orders/components/OrderRefundReturnAmount/RefundAmountInput.tsx
+++ b/src/orders/components/OrderRefundReturnAmount/RefundAmountInput.tsx
@@ -92,7 +92,7 @@ const RefundAmountInput: React.FC<RefundAmountInputProps> = props => {
       className={classes.priceField}
       InputProps={{ inputProps: { max: maxRefund?.amount } }}
       inputProps={{
-        "data-test": "amountInput",
+        "data-test-id": "amountInput",
         max: maxRefund?.amount
       }}
       error={isError}
diff --git a/src/orders/components/OrderRefundUnfulfilledProducts/OrderRefundUnfulfilledProducts.tsx b/src/orders/components/OrderRefundUnfulfilledProducts/OrderRefundUnfulfilledProducts.tsx
index 757213dbe..4eb1564e0 100644
--- a/src/orders/components/OrderRefundUnfulfilledProducts/OrderRefundUnfulfilledProducts.tsx
+++ b/src/orders/components/OrderRefundUnfulfilledProducts/OrderRefundUnfulfilledProducts.tsx
@@ -102,7 +102,7 @@ const OrderRefundUnfulfilledProducts: React.FC<OrderRefundUnfulfilledProductsPro
         <Button
           className={classes.setMaximalQuantityButton}
           onClick={onSetMaximalQuantities}
-          data-test="setMaximalQuantityUnfulfilledButton"
+          data-test-id="set-maximal-quantity-unfulfilled-button"
         >
           <FormattedMessage
             defaultMessage="Set maximal quantities"
@@ -170,8 +170,7 @@ const OrderRefundUnfulfilledProducts: React.FC<OrderRefundUnfulfilledProductsPro
                         type="number"
                         inputProps={{
                           className: classes.quantityInnerInput,
-                          "data-test": "quantityInput",
-                          "data-test-id": line?.id,
+                          "data-test-id": "quantity-input" + line?.id,
                           max: lineQuantity.toString(),
                           min: 0,
                           style: { textAlign: "right" }
diff --git a/src/orders/components/OrderReturnPage/OrderReturnRefundItemsCard/MaximalButton.tsx b/src/orders/components/OrderReturnPage/OrderReturnRefundItemsCard/MaximalButton.tsx
index 91ba7db74..8f8c18616 100644
--- a/src/orders/components/OrderReturnPage/OrderReturnRefundItemsCard/MaximalButton.tsx
+++ b/src/orders/components/OrderReturnPage/OrderReturnRefundItemsCard/MaximalButton.tsx
@@ -25,7 +25,7 @@ const MaximalButton: React.FC<MaximalButtonProps> = ({ onClick }) => {
     <Button
       className={classes.button}
       onClick={onClick}
-      data-test="setMaximalQuantityUnfulfilledButton"
+      data-test-id="set-maximal-quantity-unfulfilled-button"
     >
       <FormattedMessage
         defaultMessage="Set maximal quantities"
diff --git a/src/orders/components/OrderSettings/OrderSettings.tsx b/src/orders/components/OrderSettings/OrderSettings.tsx
index 72eea8d13..aadb2c2ca 100644
--- a/src/orders/components/OrderSettings/OrderSettings.tsx
+++ b/src/orders/components/OrderSettings/OrderSettings.tsx
@@ -21,7 +21,7 @@ const OrderSettings: React.FC<OrderSettingsProps> = ({
   const intl = useIntl();
 
   return (
-    <Card data-test="orderSettings">
+    <Card data-test-id="order-settings">
       <CardTitle
         title={intl.formatMessage({
           defaultMessage: "Settings",
@@ -48,7 +48,7 @@ const OrderSettings: React.FC<OrderSettingsProps> = ({
           checked={data.automaticallyConfirmAllNewOrders}
           onChange={onChange}
           disabled={disabled}
-          data-test="automaticallyConfirmAllNewOrdersCheckbox"
+          data-test-id="automatically-confirm-all-new-orders-checkbox"
         />
         <CardSpacer />
         <ControlledCheckbox
@@ -70,7 +70,7 @@ const OrderSettings: React.FC<OrderSettingsProps> = ({
           checked={data.automaticallyFulfillNonShippableGiftCard}
           onChange={onChange}
           disabled={disabled}
-          data-test="automaticallyFulfillNonShippableGiftCardsCheckbox"
+          data-test-id="automatically-fulfill-non-shippable-gift-cards-checkbox"
         />
       </CardContent>
     </Card>
diff --git a/src/pageTypes/components/PageTypeAttributes/PageTypeAttributes.tsx b/src/pageTypes/components/PageTypeAttributes/PageTypeAttributes.tsx
index 7bb81d4d6..6e7450de4 100644
--- a/src/pageTypes/components/PageTypeAttributes/PageTypeAttributes.tsx
+++ b/src/pageTypes/components/PageTypeAttributes/PageTypeAttributes.tsx
@@ -73,7 +73,7 @@ const PageTypeAttributes: React.FC<PageTypeAttributesProps> = props => {
   const intl = useIntl();
 
   return (
-    <Card data-test="page-attributes">
+    <Card data-test-id="page-attributes">
       <CardTitle
         title={intl.formatMessage({
           defaultMessage: "Content Attributes",
@@ -83,7 +83,7 @@ const PageTypeAttributes: React.FC<PageTypeAttributesProps> = props => {
           <Button
             variant="tertiary"
             onClick={() => onAttributeAssign(AttributeTypeEnum[type])}
-            data-test-id="assignAttributes"
+            data-test-id="assign-attributes"
           >
             <FormattedMessage
               defaultMessage="Assign attribute"
@@ -140,8 +140,7 @@ const PageTypeAttributes: React.FC<PageTypeAttributesProps> = props => {
                   }
                   key={attribute?.id}
                   index={attributeIndex || 0}
-                  data-test="id"
-                  data-test-id={attribute?.id}
+                  data-test-id={"id-" + attribute?.id}
                 >
                   <TableCell padding="checkbox">
                     <Checkbox
@@ -151,10 +150,10 @@ const PageTypeAttributes: React.FC<PageTypeAttributesProps> = props => {
                       onChange={() => toggle(attribute.id)}
                     />
                   </TableCell>
-                  <TableCell className={classes.colName} data-test="name">
+                  <TableCell className={classes.colName} data-test-id="name">
                     {attribute?.name || <Skeleton />}
                   </TableCell>
-                  <TableCell className={classes.colSlug} data-test="slug">
+                  <TableCell className={classes.colSlug} data-test-id="slug">
                     {attribute?.slug || <Skeleton />}
                   </TableCell>
                   <TableCell className={classes.colAction}>
diff --git a/src/pageTypes/components/PageTypeList/PageTypeList.tsx b/src/pageTypes/components/PageTypeList/PageTypeList.tsx
index 1f1df7477..179caa921 100644
--- a/src/pageTypes/components/PageTypeList/PageTypeList.tsx
+++ b/src/pageTypes/components/PageTypeList/PageTypeList.tsx
@@ -104,8 +104,7 @@ const PageTypeList: React.FC<PageTypeListProps> = props => {
                 key={pageType ? pageType.id : "skeleton"}
                 onClick={pageType ? onRowClick(pageType.id) : undefined}
                 selected={isSelected}
-                data-test="id"
-                data-test-id={pageType?.id}
+                data-test-id={"id-" + pageType?.id}
               >
                 <TableCell padding="checkbox">
                   <Checkbox
@@ -117,7 +116,7 @@ const PageTypeList: React.FC<PageTypeListProps> = props => {
                 </TableCell>
                 <TableCell className={classes.colName}>
                   {pageType ? (
-                    <span data-test="name">{pageType.name}</span>
+                    <span data-test-id="name">{pageType.name}</span>
                   ) : (
                     <Skeleton />
                   )}
diff --git a/src/pageTypes/components/PageTypeListPage/PageTypeListPage.tsx b/src/pageTypes/components/PageTypeListPage/PageTypeListPage.tsx
index b79d61be4..636fe9949 100644
--- a/src/pageTypes/components/PageTypeListPage/PageTypeListPage.tsx
+++ b/src/pageTypes/components/PageTypeListPage/PageTypeListPage.tsx
@@ -48,7 +48,11 @@ const PageTypeListPage: React.FC<PageTypeListPageProps> = ({
         {intl.formatMessage(sectionNames.configuration)}
       </Backlink>
       <PageHeader title={intl.formatMessage(sectionNames.pageTypes)}>
-        <Button variant="primary" onClick={onAdd} data-test-id="createPageType">
+        <Button
+          variant="primary"
+          onClick={onAdd}
+          data-test-id="create-page-type"
+        >
           <FormattedMessage
             defaultMessage="Create page type"
             description="button"
diff --git a/src/pages/components/PageListPage/PageListPage.tsx b/src/pages/components/PageListPage/PageListPage.tsx
index 858fd83af..659865898 100644
--- a/src/pages/components/PageListPage/PageListPage.tsx
+++ b/src/pages/components/PageListPage/PageListPage.tsx
@@ -23,7 +23,7 @@ const PageListPage: React.FC<PageListPageProps> = ({ onAdd, ...listProps }) => {
   return (
     <Container>
       <PageHeader title={intl.formatMessage(sectionNames.pages)}>
-        <Button onClick={onAdd} variant="primary" data-test-id="createPage">
+        <Button onClick={onAdd} variant="primary" data-test-id="create-page">
           <FormattedMessage defaultMessage="Create page" description="button" />
         </Button>
       </PageHeader>
diff --git a/src/pages/components/PageOrganizeContent/PageOrganizeContent.tsx b/src/pages/components/PageOrganizeContent/PageOrganizeContent.tsx
index 350a53a63..44323b508 100644
--- a/src/pages/components/PageOrganizeContent/PageOrganizeContent.tsx
+++ b/src/pages/components/PageOrganizeContent/PageOrganizeContent.tsx
@@ -67,7 +67,7 @@ const PageOrganizeContent: React.FC<PageOrganizeContentProps> = props => {
       <CardContent>
         {canChangeType ? (
           <SingleAutocompleteSelectField
-            data-test-id="pageTypesAutocompleteSelect"
+            data-test-id="page-types-autocomplete-select"
             disabled={disabled}
             displayValue={pageTypeInputDisplayValue}
             label={intl.formatMessage({
diff --git a/src/permissionGroups/components/AssignMembersDialog/AssignMembersDialog.tsx b/src/permissionGroups/components/AssignMembersDialog/AssignMembersDialog.tsx
index 734e2eef0..a1a86a24c 100644
--- a/src/permissionGroups/components/AssignMembersDialog/AssignMembersDialog.tsx
+++ b/src/permissionGroups/components/AssignMembersDialog/AssignMembersDialog.tsx
@@ -228,7 +228,7 @@ const AssignMembersDialog: React.FC<AssignMembersDialogProps> = ({
                   );
 
                   return (
-                    <TableRow key={member.id} data-test-id="userRow">
+                    <TableRow key={member.id} data-test-id="user-row">
                       <TableCell
                         padding="checkbox"
                         className={classes.checkboxCell}
@@ -302,7 +302,7 @@ const AssignMembersDialog: React.FC<AssignMembersDialogProps> = ({
       >
         <BackButton onClick={onClose} />
         <ConfirmButton
-          data-test="submit"
+          data-test-id="submit"
           type="submit"
           transitionState={confirmButtonState}
           onClick={() => {
diff --git a/src/permissionGroups/components/PermissionGroupList/PermissionGroupList.tsx b/src/permissionGroups/components/PermissionGroupList/PermissionGroupList.tsx
index dbb8e229f..78b641f93 100644
--- a/src/permissionGroups/components/PermissionGroupList/PermissionGroupList.tsx
+++ b/src/permissionGroups/components/PermissionGroupList/PermissionGroupList.tsx
@@ -124,19 +124,18 @@ const PermissionGroupList: React.FC<PermissionGroupListProps> = props => {
               onClick={
                 permissionGroup ? onRowClick(permissionGroup.id) : undefined
               }
-              data-test="id"
-              data-test-id={maybe(() => permissionGroup.id)}
+              data-test-id={"id-" + maybe(() => permissionGroup.id)}
             >
               <TableCell className={classes.colName}>
                 {permissionGroup ? (
-                  <span data-test="name">{permissionGroup.name}</span>
+                  <span data-test-id="name">{permissionGroup.name}</span>
                 ) : (
                   <Skeleton />
                 )}
               </TableCell>
               <TableCell className={classes.colMembers}>
                 {permissionGroup ? (
-                  <span data-test="members">
+                  <span data-test-id="members">
                     {permissionGroup.users.length}
                   </span>
                 ) : (
diff --git a/src/permissionGroups/components/PermissionGroupListPage/PermissionGroupListPage.tsx b/src/permissionGroups/components/PermissionGroupListPage/PermissionGroupListPage.tsx
index b0232ff4c..4ac528d6e 100644
--- a/src/permissionGroups/components/PermissionGroupListPage/PermissionGroupListPage.tsx
+++ b/src/permissionGroups/components/PermissionGroupListPage/PermissionGroupListPage.tsx
@@ -36,7 +36,7 @@ const PermissionGroupListPage: React.FC<PermissionGroupListPageProps> = ({
         <Button
           variant="primary"
           onClick={onAdd}
-          data-test-id="createPermissionGroup"
+          data-test-id="create-permission-group"
         >
           <FormattedMessage
             defaultMessage="create permission group"
diff --git a/src/permissionGroups/components/PermissionGroupMemberList/PermissionGroupMemberList.tsx b/src/permissionGroups/components/PermissionGroupMemberList/PermissionGroupMemberList.tsx
index a5d0aa271..e65766dc5 100644
--- a/src/permissionGroups/components/PermissionGroupMemberList/PermissionGroupMemberList.tsx
+++ b/src/permissionGroups/components/PermissionGroupMemberList/PermissionGroupMemberList.tsx
@@ -254,7 +254,7 @@ const PermissionGroupMemberList: React.FC<PermissionGroupProps> = props => {
                         <>
                           <IconButton
                             variant="secondary"
-                            data-test-id="removeUser"
+                            data-test-id="remove-user"
                             disabled={disabled}
                             color="primary"
                             onClick={stopPropagation(() =>
diff --git a/src/productTypes/components/ProductTypeAttributes/ProductTypeAttributes.tsx b/src/productTypes/components/ProductTypeAttributes/ProductTypeAttributes.tsx
index 8829b581b..fa468b13b 100644
--- a/src/productTypes/components/ProductTypeAttributes/ProductTypeAttributes.tsx
+++ b/src/productTypes/components/ProductTypeAttributes/ProductTypeAttributes.tsx
@@ -82,7 +82,7 @@ const ProductTypeAttributes: React.FC<ProductTypeAttributesProps> = props => {
   const intl = useIntl();
 
   return (
-    <Card data-test="product-attributes">
+    <Card data-test-id="product-attributes">
       <CardTitle
         title={intl.formatMessage({
           defaultMessage: "Product Attributes",
@@ -150,8 +150,7 @@ const ProductTypeAttributes: React.FC<ProductTypeAttributesProps> = props => {
                   }
                   key={maybe(() => attribute.id)}
                   index={attributeIndex || 0}
-                  data-test="id"
-                  data-test-id={maybe(() => attribute.id)}
+                  data-test-id={"id" + maybe(() => attribute.id)}
                 >
                   <TableCell padding="checkbox">
                     <Checkbox
@@ -161,14 +160,14 @@ const ProductTypeAttributes: React.FC<ProductTypeAttributesProps> = props => {
                       onChange={() => toggle(attribute.id)}
                     />
                   </TableCell>
-                  <TableCell className={classes.colName} data-test="name">
+                  <TableCell className={classes.colName} data-test-id="name">
                     {maybe(() => attribute.name) ? (
                       attribute.name
                     ) : (
                       <Skeleton />
                     )}
                   </TableCell>
-                  <TableCell className={classes.colSlug} data-test="slug">
+                  <TableCell className={classes.colSlug} data-test-id="slug">
                     {maybe(() => attribute.slug) ? (
                       attribute.slug
                     ) : (
diff --git a/src/productTypes/components/ProductTypeDetailsPage/ProductTypeDetailsPage.tsx b/src/productTypes/components/ProductTypeDetailsPage/ProductTypeDetailsPage.tsx
index 52a3861e6..a17bb9568 100644
--- a/src/productTypes/components/ProductTypeDetailsPage/ProductTypeDetailsPage.tsx
+++ b/src/productTypes/components/ProductTypeDetailsPage/ProductTypeDetailsPage.tsx
@@ -196,7 +196,7 @@ const ProductTypeDetailsPage: React.FC<ProductTypeDetailsPageProps> = ({
                 />
                 <CardSpacer />
                 <ProductTypeAttributes
-                  testId="assignProductsAttributes"
+                  testId="assign-products-attributes"
                   attributes={maybe(() => productType.productAttributes)}
                   disabled={disabled}
                   type={ProductAttributeType.PRODUCT}
@@ -223,7 +223,7 @@ const ProductTypeDetailsPage: React.FC<ProductTypeDetailsPageProps> = ({
                   <>
                     <CardSpacer />
                     <ProductTypeVariantAttributes
-                      testId="assignVariantsAttributes"
+                      testId="assign-variants-attributes"
                       assignedVariantAttributes={
                         productType?.assignedVariantAttributes
                       }
diff --git a/src/productTypes/components/ProductTypeList/ProductTypeList.tsx b/src/productTypes/components/ProductTypeList/ProductTypeList.tsx
index bc09fc2dc..63daf117a 100644
--- a/src/productTypes/components/ProductTypeList/ProductTypeList.tsx
+++ b/src/productTypes/components/ProductTypeList/ProductTypeList.tsx
@@ -144,8 +144,7 @@ const ProductTypeList: React.FC<ProductTypeListProps> = props => {
                 key={productType ? productType.id : "skeleton"}
                 onClick={productType ? onRowClick(productType.id) : undefined}
                 selected={isSelected}
-                data-test="id"
-                data-test-id={maybe(() => productType.id)}
+                data-test-id={"id-" + maybe(() => productType.id)}
               >
                 <TableCell padding="checkbox">
                   <Checkbox
@@ -158,7 +157,7 @@ const ProductTypeList: React.FC<ProductTypeListProps> = props => {
                 <TableCell className={classes.colName}>
                   {productType ? (
                     <>
-                      <span data-test="name">{productType.name}</span>
+                      <span data-test-id="name">{productType.name}</span>
                       <Typography variant="caption">
                         {maybe(() => productType.hasVariants)
                           ? intl.formatMessage({
diff --git a/src/productTypes/components/ProductTypeListPage/ProductTypeListPage.tsx b/src/productTypes/components/ProductTypeListPage/ProductTypeListPage.tsx
index 07767ef9d..07902b79d 100644
--- a/src/productTypes/components/ProductTypeListPage/ProductTypeListPage.tsx
+++ b/src/productTypes/components/ProductTypeListPage/ProductTypeListPage.tsx
@@ -58,7 +58,11 @@ const ProductTypeListPage: React.FC<ProductTypeListPageProps> = ({
         {intl.formatMessage(sectionNames.configuration)}
       </Backlink>
       <PageHeader title={intl.formatMessage(sectionNames.productTypes)}>
-        <Button variant="primary" onClick={onAdd} data-test-id="addProductType">
+        <Button
+          variant="primary"
+          onClick={onAdd}
+          data-test-id="add-product-type"
+        >
           <FormattedMessage
             defaultMessage="create product type"
             description="button"
diff --git a/src/productTypes/components/ProductTypeVariantAttributes/ProductTypeVariantAttributes.tsx b/src/productTypes/components/ProductTypeVariantAttributes/ProductTypeVariantAttributes.tsx
index 991eb6907..0bb636fc1 100644
--- a/src/productTypes/components/ProductTypeVariantAttributes/ProductTypeVariantAttributes.tsx
+++ b/src/productTypes/components/ProductTypeVariantAttributes/ProductTypeVariantAttributes.tsx
@@ -129,7 +129,7 @@ const ProductTypeVariantAttributes: React.FC<ProductTypeVariantAttributesProps>
   }, []);
 
   return (
-    <Card data-test="variant-attributes">
+    <Card data-test-id="variant-attributes">
       <CardTitle
         title={intl.formatMessage({
           defaultMessage: "Variant Attributes",
@@ -220,8 +220,7 @@ const ProductTypeVariantAttributes: React.FC<ProductTypeVariantAttributesProps>
                   }
                   key={maybe(() => attribute.id)}
                   index={attributeIndex || 0}
-                  data-test="id"
-                  data-test-id={maybe(() => attribute.id)}
+                  data-test-id={"id-" + +maybe(() => attribute.id)}
                 >
                   <TableCell padding="checkbox">
                     <Checkbox
@@ -231,10 +230,10 @@ const ProductTypeVariantAttributes: React.FC<ProductTypeVariantAttributesProps>
                       onChange={() => toggle(attribute.id)}
                     />
                   </TableCell>
-                  <TableCell className={classes.colName} data-test="name">
+                  <TableCell className={classes.colName} data-test-id="name">
                     {attribute.name ?? <Skeleton />}
                   </TableCell>
-                  <TableCell className={classes.colSlug} data-test="slug">
+                  <TableCell className={classes.colSlug} data-test-id="slug">
                     {maybe(() => attribute.slug) ? (
                       attribute.slug
                     ) : (
diff --git a/src/products/components/ProductExportDialog/ProductExportDialog.tsx b/src/products/components/ProductExportDialog/ProductExportDialog.tsx
index e81f279ab..d3a5b2b6f 100644
--- a/src/products/components/ProductExportDialog/ProductExportDialog.tsx
+++ b/src/products/components/ProductExportDialog/ProductExportDialog.tsx
@@ -289,7 +289,7 @@ const ProductExportDialog: React.FC<ProductExportDialogProps> = ({
               variant="secondary"
               color="text"
               onClick={onClose}
-              data-test="cancel"
+              data-test-id="cancel"
             >
               <FormattedMessage {...buttonMessages.cancel} />
             </Button>
@@ -299,13 +299,13 @@ const ProductExportDialog: React.FC<ProductExportDialogProps> = ({
               variant="secondary"
               color="text"
               onClick={prev}
-              data-test="back"
+              data-test-id="back"
             >
               <FormattedMessage {...buttonMessages.back} />
             </Button>
           )}
           {step === ProductExportStep.INFO && (
-            <Button variant="primary" onClick={next} data-test="next">
+            <Button variant="primary" onClick={next} data-test-id="next">
               <FormattedMessage {...buttonMessages.nextStep} />
             </Button>
           )}
@@ -313,7 +313,7 @@ const ProductExportDialog: React.FC<ProductExportDialogProps> = ({
             <ConfirmButton
               transitionState={confirmButtonState}
               type="submit"
-              data-test="submit"
+              data-test-id="submit"
               onClick={submit}
             >
               <FormattedMessage {...messages.confirmButtonLabel} />
diff --git a/src/products/components/ProductExportDialog/ProductExportDialogInfo.tsx b/src/products/components/ProductExportDialog/ProductExportDialogInfo.tsx
index dc72ec296..3fca5025f 100644
--- a/src/products/components/ProductExportDialog/ProductExportDialogInfo.tsx
+++ b/src/products/components/ProductExportDialog/ProductExportDialogInfo.tsx
@@ -342,7 +342,7 @@ const ProductExportDialogInfo: React.FC<ProductExportDialogInfoProps> = ({
               </div>
             )
           }
-          data-test="channels"
+          data-test-id="channels"
         >
           <ChannelsAvailabilityDialogContentWrapper
             hasAnyChannelsToDisplay={!!channels.length}
@@ -374,7 +374,7 @@ const ProductExportDialogInfo: React.FC<ProductExportDialogInfoProps> = ({
           ]}
           onChange={handleFieldChange}
           onToggleAll={handleToggleAllFields}
-          data-test="organization"
+          data-test-id="organization"
         />
         <Accordion
           className={classes.accordion}
@@ -411,7 +411,7 @@ const ProductExportDialogInfo: React.FC<ProductExportDialogInfoProps> = ({
               </div>
             )
           }
-          data-test="attributes"
+          data-test-id="attributes"
         >
           <TextField
             name="query"
@@ -465,7 +465,7 @@ const ProductExportDialogInfo: React.FC<ProductExportDialogInfoProps> = ({
           fields={[ProductFieldEnum.CHARGE_TAXES]}
           onChange={handleFieldChange}
           onToggleAll={handleToggleAllFields}
-          data-test="financial"
+          data-test-id="financial"
         />
         <Accordion
           className={classes.accordion}
@@ -530,7 +530,7 @@ const ProductExportDialogInfo: React.FC<ProductExportDialogInfoProps> = ({
               </div>
             )
           }
-          data-test="inventory"
+          data-test-id="inventory"
         >
           <div>
             <Option
@@ -609,7 +609,7 @@ const ProductExportDialogInfo: React.FC<ProductExportDialogInfoProps> = ({
           ]}
           onChange={handleFieldChange}
           onToggleAll={handleToggleAllFields}
-          data-test="seo"
+          data-test-id="seo"
         />
       </div>
     </>
diff --git a/src/products/components/ProductList/ProductList.tsx b/src/products/components/ProductList/ProductList.tsx
index 70cd163d2..6892f1758 100644
--- a/src/products/components/ProductList/ProductList.tsx
+++ b/src/products/components/ProductList/ProductList.tsx
@@ -185,7 +185,7 @@ export const ProductList: React.FC<ProductListProps> = props => {
           toolbar={toolbar}
         >
           <TableCellHeader
-            data-test-id="colNameHeader"
+            data-test-id="col-name-header"
             arrowPosition="right"
             className={classNames(classes.colName, {
               [classes.colNameFixed]: settings.columns.length > 4
@@ -203,7 +203,7 @@ export const ProductList: React.FC<ProductListProps> = props => {
           </TableCellHeader>
           <DisplayColumn column="productType" displayColumns={settings.columns}>
             <TableCellHeader
-              data-test-id="colTypeHeader"
+              data-test-id="col-type-header"
               className={classes.colType}
               direction={
                 sort.sort === ProductListUrlSortField.productType
@@ -220,7 +220,7 @@ export const ProductList: React.FC<ProductListProps> = props => {
             displayColumns={settings.columns}
           >
             <TooltipTableCellHeader
-              data-test-id="colAvailabilityHeader"
+              data-test-id="col-availability-header"
               className={classes.colPublished}
               direction={
                 sort.sort === ProductListUrlSortField.status
@@ -273,7 +273,7 @@ export const ProductList: React.FC<ProductListProps> = props => {
           })}
           <DisplayColumn column="date" displayColumns={settings.columns}>
             <TableCellHeader
-              data-test-id="colDateHeader"
+              data-test-id="col-date-header"
               className={classes.colDate}
               direction={
                 sort.sort === ProductListUrlSortField.date
@@ -287,7 +287,7 @@ export const ProductList: React.FC<ProductListProps> = props => {
           </DisplayColumn>
           <DisplayColumn column="price" displayColumns={settings.columns}>
             <TooltipTableCellHeader
-              data-test-id="colPriceHeader"
+              data-test-id="col-price-header"
               className={classes.colPrice}
               direction={
                 sort.sort === ProductListUrlSortField.price
@@ -339,8 +339,7 @@ export const ProductList: React.FC<ProductListProps> = props => {
                   key={product ? product.id : "skeleton"}
                   onClick={product && onRowClick(product.id)}
                   className={classes.link}
-                  data-test="id"
-                  data-test-id={product ? product?.id : "skeleton"}
+                  data-test-id={"id-" + (product ? product?.id : "skeleton")}
                 >
                   <TableCell padding="checkbox">
                     <Checkbox
@@ -355,7 +354,7 @@ export const ProductList: React.FC<ProductListProps> = props => {
                   >
                     {product?.productType ? (
                       <div className={classes.colNameWrapper}>
-                        <span data-test="name">{product.name}</span>
+                        <span data-test-id="name">{product.name}</span>
                         {product?.productType && (
                           <Typography variant="caption">
                             {product.productType.hasVariants ? (
@@ -382,7 +381,7 @@ export const ProductList: React.FC<ProductListProps> = props => {
                   >
                     <TableCell
                       className={classes.colType}
-                      data-test="product-type"
+                      data-test-id="product-type"
                     >
                       {product?.productType?.name || <Skeleton />}
                     </TableCell>
@@ -393,7 +392,7 @@ export const ProductList: React.FC<ProductListProps> = props => {
                   >
                     <TableCell
                       className={classes.colPublished}
-                      data-test="availability"
+                      data-test-id="availability"
                       data-test-availability={
                         !!product?.channelListings?.length
                       }
@@ -418,7 +417,7 @@ export const ProductList: React.FC<ProductListProps> = props => {
                     <TableCell
                       className={classes.colAttribute}
                       key={gridAttribute}
-                      data-test="attribute"
+                      data-test-id="attribute"
                       data-test-attribute={getAttributeIdFromColumnValue(
                         gridAttribute
                       )}
@@ -442,7 +441,7 @@ export const ProductList: React.FC<ProductListProps> = props => {
                     column="date"
                     displayColumns={settings.columns}
                   >
-                    <TableCell className={classes.colDate} data-test="date">
+                    <TableCell className={classes.colDate} data-test-id="date">
                       {product?.updatedAt ? (
                         <Date date={product.updatedAt} />
                       ) : (
@@ -454,7 +453,10 @@ export const ProductList: React.FC<ProductListProps> = props => {
                     column="price"
                     displayColumns={settings.columns}
                   >
-                    <TableCell className={classes.colPrice} data-test="price">
+                    <TableCell
+                      className={classes.colPrice}
+                      data-test-id="price"
+                    >
                       {product?.channelListings ? (
                         <MoneyRange
                           from={channel?.pricing?.priceRange?.start?.net}
diff --git a/src/products/components/ProductListPage/ProductListPage.tsx b/src/products/components/ProductListPage/ProductListPage.tsx
index 2556824fa..3321f4718 100644
--- a/src/products/components/ProductListPage/ProductListPage.tsx
+++ b/src/products/components/ProductListPage/ProductListPage.tsx
@@ -164,7 +164,7 @@ export const ProductListPage: React.FC<ProductListPageProps> = props => {
               },
               ...extensionMenuItems
             ]}
-            data-test="menu"
+            data-test-id="menu"
           />
         }
         title={intl.formatMessage(sectionNames.products)}
@@ -198,7 +198,7 @@ export const ProductListPage: React.FC<ProductListPageProps> = props => {
         />
         <ButtonWithSelect
           options={extensionCreateButtonItems}
-          data-test="add-product"
+          data-test-id="add-product"
           disabled={limitReached}
           onClick={onAdd}
         >
diff --git a/src/products/components/ProductMedia/ProductMedia.tsx b/src/products/components/ProductMedia/ProductMedia.tsx
index 16cf80a28..221e0c04f 100644
--- a/src/products/components/ProductMedia/ProductMedia.tsx
+++ b/src/products/components/ProductMedia/ProductMedia.tsx
@@ -228,7 +228,7 @@ const ProductMedia: React.FC<ProductMediaProps> = props => {
             <Button
               onClick={() => setPopperOpenStatus(true)}
               variant="tertiary"
-              data-test="button-upload-image"
+              data-test-id="button-upload-image"
               ref={anchor}
             >
               {intl.formatMessage(messages.upload)}
diff --git a/src/products/components/ProductMediaPopper/ProductMediaPopper.tsx b/src/products/components/ProductMediaPopper/ProductMediaPopper.tsx
index 6c3f8cf97..b56ad70e3 100644
--- a/src/products/components/ProductMediaPopper/ProductMediaPopper.tsx
+++ b/src/products/components/ProductMediaPopper/ProductMediaPopper.tsx
@@ -54,14 +54,14 @@ export const ProductMediaPopper = ({
               <Menu>
                 <MenuItem
                   onClick={() => imagesUploadRef.click()}
-                  data-test="uploadImages"
+                  data-test-id="upload-images"
                   key="upload-images"
                 >
                   {intl.formatMessage(messages.uploadImages)}
                 </MenuItem>
                 <MenuItem
                   onClick={openMediaUrlModal}
-                  data-test="uploadMediaUrl"
+                  data-test-id="upload-media-url"
                   key="upload-media-url"
                 >
                   {intl.formatMessage(messages.uploadUrl)}
diff --git a/src/products/components/ProductOrganization/ProductOrganization.tsx b/src/products/components/ProductOrganization/ProductOrganization.tsx
index 033edc05a..812053929 100644
--- a/src/products/components/ProductOrganization/ProductOrganization.tsx
+++ b/src/products/components/ProductOrganization/ProductOrganization.tsx
@@ -124,7 +124,7 @@ const ProductOrganization: React.FC<ProductOrganizationProps> = props => {
             value={data.productType?.id}
             onChange={onProductTypeChange}
             fetchChoices={fetchProductTypes}
-            data-test="product-type"
+            data-test-id="product-type"
             {...fetchMoreProductTypes}
           />
         ) : (
@@ -175,7 +175,7 @@ const ProductOrganization: React.FC<ProductOrganizationProps> = props => {
           value={data.category}
           onChange={onCategoryChange}
           fetchChoices={fetchCategories}
-          data-test="category"
+          data-test-id="category"
           {...fetchMoreCategories}
         />
         <FormSpacer />
@@ -200,7 +200,7 @@ const ProductOrganization: React.FC<ProductOrganizationProps> = props => {
           }
           onChange={onCollectionChange}
           fetchChoices={fetchCollections}
-          data-test="collections"
+          data-test-id="collections"
           testId="collection"
           {...fetchMoreCollections}
         />
diff --git a/src/products/components/ProductTaxes/ProductTaxes.tsx b/src/products/components/ProductTaxes/ProductTaxes.tsx
index d6eb29499..50dda7310 100644
--- a/src/products/components/ProductTaxes/ProductTaxes.tsx
+++ b/src/products/components/ProductTaxes/ProductTaxes.tsx
@@ -58,7 +58,7 @@ const ProductTaxes: React.FC<ProductTaxesProps> = ({
         <ControlledCheckbox
           checked={data.changeTaxCode}
           disabled={disabled}
-          data-test="override-tax-type"
+          data-test-id="override-tax-type"
           label={intl.formatMessage({
             defaultMessage: "Override the product type's tax rate",
             description: "checkbox"
@@ -70,7 +70,7 @@ const ProductTaxes: React.FC<ProductTaxesProps> = ({
         <ControlledCheckbox
           checked={data.chargeTaxes}
           disabled={disabled}
-          data-test="charge-taxes"
+          data-test-id="charge-taxes"
           label={intl.formatMessage({
             defaultMessage: "Charge taxes on this product",
             description: "checkbox"
@@ -83,7 +83,7 @@ const ProductTaxes: React.FC<ProductTaxesProps> = ({
             className={classes.select}
             disabled={disabled}
             displayValue={selectedTaxTypeDisplayName}
-            data-test="select-tax-type"
+            data-test-id="select-tax-type"
             label={intl.formatMessage({
               defaultMessage: "Tax Rate",
               description: "select tax ratte"
diff --git a/src/products/components/ProductUpdatePage/ProductUpdatePage.test.tsx b/src/products/components/ProductUpdatePage/ProductUpdatePage.test.tsx
index 195526f49..63affdb77 100644
--- a/src/products/components/ProductUpdatePage/ProductUpdatePage.test.tsx
+++ b/src/products/components/ProductUpdatePage/ProductUpdatePage.test.tsx
@@ -90,9 +90,9 @@ const props: ProductUpdatePageProps = {
 };
 
 const selectors = {
-  dropdown: `[data-test="autocomplete-dropdown"]`,
+  dropdown: `[data-test-id="autocomplete-dropdown"]`,
   empty: `[data-test-type="empty"]`,
-  input: `[data-test="attribute-value"] input`
+  input: `[data-test-id="attribute-value"] input`
 };
 
 describe("Product details page", () => {
diff --git a/src/products/components/ProductUpdatePage/ProductUpdatePage.tsx b/src/products/components/ProductUpdatePage/ProductUpdatePage.tsx
index e7713ef20..76ef9155f 100644
--- a/src/products/components/ProductUpdatePage/ProductUpdatePage.tsx
+++ b/src/products/components/ProductUpdatePage/ProductUpdatePage.tsx
@@ -300,7 +300,7 @@ export const ProductUpdatePage: React.FC<ProductUpdatePageProps> = ({
             </Backlink>
             <PageHeader title={header}>
               {extensionMenuItems.length > 0 && (
-                <CardMenu menuItems={extensionMenuItems} data-test="menu" />
+                <CardMenu menuItems={extensionMenuItems} data-test-id="menu" />
               )}
             </PageHeader>
             <Grid>
diff --git a/src/products/components/ProductVariantAttributes/ProductVariantAttributes.tsx b/src/products/components/ProductVariantAttributes/ProductVariantAttributes.tsx
index 40d5705ea..7fc82659b 100644
--- a/src/products/components/ProductVariantAttributes/ProductVariantAttributes.tsx
+++ b/src/products/components/ProductVariantAttributes/ProductVariantAttributes.tsx
@@ -113,7 +113,7 @@ const ProductVariantAttributes: React.FC<ProductVariantAttributesProps> = ({
                   value={getAttributeValue(attribute.id, attributes)}
                   choices={getAttributeValueChoices(attribute.id, attributes)}
                   allowCustomValues
-                  data-test="variant-attribute-input"
+                  data-test-id="variant-attribute-input"
                 />
               );
             })
diff --git a/src/products/components/ProductVariantCreateDialog/ProductVariantCreateDialog.tsx b/src/products/components/ProductVariantCreateDialog/ProductVariantCreateDialog.tsx
index d1822c352..fa0cf2d08 100644
--- a/src/products/components/ProductVariantCreateDialog/ProductVariantCreateDialog.tsx
+++ b/src/products/components/ProductVariantCreateDialog/ProductVariantCreateDialog.tsx
@@ -104,7 +104,6 @@ const ProductVariantCreateDialog: React.FC<ProductVariantCreateDialogProps> = pr
                 transitionState="default"
                 type="submit"
                 data-test-id="submit"
-                data-test="submit"
               >
                 <FormattedMessage {...buttonMessages.create} />
               </ConfirmButton>
diff --git a/src/products/components/ProductVariantSetDefault/ProductVariantSetDefault.tsx b/src/products/components/ProductVariantSetDefault/ProductVariantSetDefault.tsx
index 3cd48ee09..5f2e929d4 100644
--- a/src/products/components/ProductVariantSetDefault/ProductVariantSetDefault.tsx
+++ b/src/products/components/ProductVariantSetDefault/ProductVariantSetDefault.tsx
@@ -23,7 +23,7 @@ const ProductVariantSetDefault: React.FC<ProductVariantSetDefaultProps> = ({
           testId: "setDefault"
         }
       ]}
-      data-test="menu"
+      data-test-id="menu"
     />
   );
 };
diff --git a/src/products/components/ProductVariants/ProductVariants.tsx b/src/products/components/ProductVariants/ProductVariants.tsx
index 5d840d9c2..3dd98fef4 100644
--- a/src/products/components/ProductVariants/ProductVariants.tsx
+++ b/src/products/components/ProductVariants/ProductVariants.tsx
@@ -256,7 +256,7 @@ export const ProductVariants: React.FC<ProductVariantsProps> = props => {
               disabled={limitReached}
               onClick={onVariantAdd}
               variant="tertiary"
-              data-test="button-add-variant"
+              data-test-id="button-add-variant"
             >
               <FormattedMessage
                 defaultMessage="Create variant"
@@ -268,7 +268,7 @@ export const ProductVariants: React.FC<ProductVariantsProps> = props => {
               disabled={limitReached}
               onClick={onVariantsAdd}
               variant="tertiary"
-              data-test="button-add-variants"
+              data-test-id="button-add-variants"
             >
               <FormattedMessage
                 defaultMessage="Create variants"
@@ -393,7 +393,7 @@ export const ProductVariants: React.FC<ProductVariantsProps> = props => {
                       onChange={() => toggle(variant.id)}
                     />
                   </TableCell>
-                  <TableCell className={classes.colName} data-test="name">
+                  <TableCell className={classes.colName} data-test-id="name">
                     {variant ? variant.name || variant.sku : <Skeleton />}
                     {isDefault && (
                       <span className={classes.defaultVariant}>
@@ -404,11 +404,14 @@ export const ProductVariants: React.FC<ProductVariantsProps> = props => {
                       </span>
                     )}
                   </TableCell>
-                  <TableCell className={classes.colSku} data-test="sku">
+                  <TableCell className={classes.colSku} data-test-id="sku">
                     {variant ? variant.sku : <Skeleton />}
                   </TableCell>
                   <Hidden smDown>
-                    <TableCell className={classes.colPrice} data-test="price">
+                    <TableCell
+                      className={classes.colPrice}
+                      data-test-id="price"
+                    >
                       {variant ? (
                         <Money money={channel?.price} />
                       ) : (
@@ -418,7 +421,7 @@ export const ProductVariants: React.FC<ProductVariantsProps> = props => {
                   </Hidden>
                   <TableCell
                     className={classes.colInventory}
-                    data-test="inventory"
+                    data-test-id="inventory"
                   >
                     {numAvailable === null ? (
                       <Skeleton />
@@ -433,7 +436,7 @@ export const ProductVariants: React.FC<ProductVariantsProps> = props => {
                   </TableCell>
                   <TableCell
                     className={classes.colActions}
-                    data-test="actions"
+                    data-test-id="actions"
                     onClick={e => e.stopPropagation()}
                   >
                     {variant?.id !== product?.defaultVariant?.id && (
diff --git a/src/shipping/components/ShippingWeightUnitForm/ShippingWeightUnitForm.tsx b/src/shipping/components/ShippingWeightUnitForm/ShippingWeightUnitForm.tsx
index 14fb30db1..27fb08b76 100644
--- a/src/shipping/components/ShippingWeightUnitForm/ShippingWeightUnitForm.tsx
+++ b/src/shipping/components/ShippingWeightUnitForm/ShippingWeightUnitForm.tsx
@@ -58,7 +58,7 @@ const ShippingWeightUnitForm: React.FC<ShippingWeightUnitFormProps> = ({
             />
           </CardContent>
           <CardActions>
-            <Button onClick={submit} data-test-id="saveUnit">
+            <Button onClick={submit} data-test-id="save-unit">
               <FormattedMessage {...buttonMessages.save} />
             </Button>
           </CardActions>
diff --git a/src/shipping/components/ShippingZoneInfo/ShippingZoneInfo.tsx b/src/shipping/components/ShippingZoneInfo/ShippingZoneInfo.tsx
index db614861f..90f80acb2 100644
--- a/src/shipping/components/ShippingZoneInfo/ShippingZoneInfo.tsx
+++ b/src/shipping/components/ShippingZoneInfo/ShippingZoneInfo.tsx
@@ -72,7 +72,7 @@ const ShippingZoneInfo: React.FC<ShippingZoneInfoProps> = ({
           helperText={getShippingErrorMessage(formErrors.name, intl)}
           label={intl.formatMessage(messages.name)}
           inputProps={{
-            "data-test": "name"
+            "data-test-id": "name"
           }}
           name="name"
           value={data.name}
diff --git a/src/shipping/components/ShippingZonePostalCodeRangeDialog/ShippingZonePostalCodeRangeDialog.tsx b/src/shipping/components/ShippingZonePostalCodeRangeDialog/ShippingZonePostalCodeRangeDialog.tsx
index a448b1c77..580136b0c 100644
--- a/src/shipping/components/ShippingZonePostalCodeRangeDialog/ShippingZonePostalCodeRangeDialog.tsx
+++ b/src/shipping/components/ShippingZonePostalCodeRangeDialog/ShippingZonePostalCodeRangeDialog.tsx
@@ -89,7 +89,7 @@ const ShippingZonePostalCodeRangeDialog: React.FC<ShippingZonePostalCodeRangeDia
                 disabled={!hasChanged || !data.min}
                 transitionState={confirmButtonState}
                 type="submit"
-                data-test="submit"
+                data-test-id="submit"
               >
                 <FormattedMessage
                   defaultMessage="Add"
diff --git a/src/shipping/components/ShippingZonePostalCodes/ShippingZonePostalCodes.tsx b/src/shipping/components/ShippingZonePostalCodes/ShippingZonePostalCodes.tsx
index c068be0a9..9aa2db30e 100644
--- a/src/shipping/components/ShippingZonePostalCodes/ShippingZonePostalCodes.tsx
+++ b/src/shipping/components/ShippingZonePostalCodes/ShippingZonePostalCodes.tsx
@@ -111,7 +111,7 @@ const ShippingZonePostalCodes: React.FC<ShippingZonePostalCodesProps> = ({
         toolbar={
           <Button
             onClick={onPostalCodeRangeAdd}
-            data-test="add-postal-code-range"
+            data-test-id="add-postal-code-range"
           >
             <FormattedMessage
               defaultMessage="Add postal code range"
@@ -212,8 +212,7 @@ const ShippingZonePostalCodes: React.FC<ShippingZonePostalCodesProps> = ({
                       disabled={disabled}
                       color="primary"
                       onClick={() => onPostalCodeDelete(postalCodeRange)}
-                      data-test="delete-postal-code"
-                      data-test-id={postalCodeRange?.id}
+                      data-test-id={"delete-postal-code-" + postalCodeRange?.id}
                     >
                       <DeleteIcon />
                     </IconButton>
diff --git a/src/staff/components/StaffAddMemberDialog/StaffAddMemberDialog.tsx b/src/staff/components/StaffAddMemberDialog/StaffAddMemberDialog.tsx
index c151717c8..b76c9a738 100644
--- a/src/staff/components/StaffAddMemberDialog/StaffAddMemberDialog.tsx
+++ b/src/staff/components/StaffAddMemberDialog/StaffAddMemberDialog.tsx
@@ -136,7 +136,7 @@ const StaffAddMemberDialog: React.FC<StaffAddMemberDialogProps> = props => {
             <DialogActions>
               <BackButton onClick={onClose} />
               <ConfirmButton
-                data-test="submit"
+                data-test-id="submit"
                 disabled={!hasChanged}
                 type="submit"
                 transitionState={confirmButtonState}
diff --git a/src/staff/components/StaffListPage/StaffListPage.tsx b/src/staff/components/StaffListPage/StaffListPage.tsx
index c77a839c7..043c4a047 100644
--- a/src/staff/components/StaffListPage/StaffListPage.tsx
+++ b/src/staff/components/StaffListPage/StaffListPage.tsx
@@ -79,7 +79,7 @@ const StaffListPage: React.FC<StaffListPageProps> = ({
         }
       >
         <Button
-          data-test-id="inviteStaffMember"
+          data-test-id="invite-staff-member"
           disabled={reachedLimit}
           variant="primary"
           onClick={onAdd}
diff --git a/src/storybook/__snapshots__/Stories.test.ts.snap b/src/storybook/__snapshots__/Stories.test.ts.snap
index 6c83c2bd4..abb0f8592 100644
--- a/src/storybook/__snapshots__/Stories.test.ts.snap
+++ b/src/storybook/__snapshots__/Stories.test.ts.snap
@@ -61,7 +61,7 @@ exports[`Storyshots Attributes / Attributes default 1`] = `
         </div>
         <button
           class="MuiButtonBase-root-id IconButton-secondary-id Attributes-expansionBarButton-id IconButton-hoverOutline-id"
-          data-test="attributes-expand"
+          data-test-id="attributes-expand"
           tabindex="0"
           type="button"
         >
@@ -85,7 +85,7 @@ exports[`Storyshots Attributes / Attributes default 1`] = `
       >
         <div
           class="BasicAttributeRow-attributeSectionLabel-id"
-          data-test="attribute-label"
+          data-test-id="attribute-label"
         >
           <div
             class="MuiTypography-root-id MuiTypography-body1-id"
@@ -95,7 +95,7 @@ exports[`Storyshots Attributes / Attributes default 1`] = `
         </div>
         <div
           class="BasicAttributeRow-value-id"
-          data-test="attribute-value"
+          data-test-id="attribute-value"
         >
           <div
             class="SingleAutocompleteSelectField-container-id"
@@ -165,7 +165,7 @@ exports[`Storyshots Attributes / Attributes default 1`] = `
       >
         <div
           class="BasicAttributeRow-attributeSectionLabel-id"
-          data-test="attribute-label"
+          data-test-id="attribute-label"
         >
           <div
             class="MuiTypography-root-id MuiTypography-body1-id"
@@ -175,7 +175,7 @@ exports[`Storyshots Attributes / Attributes default 1`] = `
         </div>
         <div
           class="BasicAttributeRow-value-id"
-          data-test="attribute-value"
+          data-test-id="attribute-value"
         >
           <div
             class="MultiAutocompleteSelectField-container-id"
@@ -248,7 +248,7 @@ exports[`Storyshots Attributes / Attributes default 1`] = `
       >
         <div
           class="BasicAttributeRow-attributeSectionLabel-id"
-          data-test="attribute-label"
+          data-test-id="attribute-label"
         >
           <div
             class="MuiTypography-root-id MuiTypography-body1-id"
@@ -258,7 +258,7 @@ exports[`Storyshots Attributes / Attributes default 1`] = `
         </div>
         <div
           class="BasicAttributeRow-value-id"
-          data-test="attribute-value"
+          data-test-id="attribute-value"
         >
           <div
             class="AttributeRow-fileField-id"
@@ -266,7 +266,7 @@ exports[`Storyshots Attributes / Attributes default 1`] = `
             <div>
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-                data-test="button-upload-file"
+                data-test-id="button-upload-file"
                 tabindex="0"
                 type="button"
               >
@@ -280,7 +280,7 @@ exports[`Storyshots Attributes / Attributes default 1`] = `
           </div>
           <input
             class="FileUploadField-fileField-id"
-            data-test="upload-file-input"
+            data-test-id="upload-file-input"
             id="fileUpload"
             name="attribute:File Attribute"
             type="file"
@@ -295,7 +295,7 @@ exports[`Storyshots Attributes / Attributes default 1`] = `
       >
         <div
           class="ExtendedAttributeRow-attributeSectionLabel-id"
-          data-test="attribute-label"
+          data-test-id="attribute-label"
         >
           <div
             class="MuiTypography-root-id MuiTypography-body1-id"
@@ -304,11 +304,11 @@ exports[`Storyshots Attributes / Attributes default 1`] = `
           </div>
         </div>
         <div
-          data-test="attribute-selector"
+          data-test-id="attribute-selector"
         >
           <button
             class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id ExtendedAttributeRow-attributeSectionButton-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-            data-test="button-attribute-selector"
+            data-test-id="button-attribute-selector"
             tabindex="0"
             type="button"
           >
@@ -321,7 +321,7 @@ exports[`Storyshots Attributes / Attributes default 1`] = `
         </div>
       </div>
       <div
-        data-test="attribute-value"
+        data-test-id="attribute-value"
       >
         <div />
       </div>
@@ -333,7 +333,7 @@ exports[`Storyshots Attributes / Attributes default 1`] = `
       >
         <div
           class="BasicAttributeRow-attributeSectionLabel-id"
-          data-test="attribute-label"
+          data-test-id="attribute-label"
         >
           <div
             class="MuiTypography-root-id MuiTypography-body1-id"
@@ -343,12 +343,11 @@ exports[`Storyshots Attributes / Attributes default 1`] = `
         </div>
         <div
           class="BasicAttributeRow-value-id"
-          data-test="attribute-value"
+          data-test-id="attribute-value"
         >
           <div
             class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-            data-test="richTextEditor"
-            data-test-id="attribute:Text Attribute"
+            data-test-id="rich-text-editor-attribute:Text Attribute"
           >
             <label
               class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-focused-id MuiInputLabel-focused-id"
@@ -373,7 +372,7 @@ exports[`Storyshots Attributes / Attributes default 1`] = `
       >
         <div
           class="BasicAttributeRow-attributeSectionLabel-id"
-          data-test="attribute-label"
+          data-test-id="attribute-label"
         >
           <div
             class="MuiTypography-root-id MuiTypography-body1-id"
@@ -383,7 +382,7 @@ exports[`Storyshots Attributes / Attributes default 1`] = `
         </div>
         <div
           class="BasicAttributeRow-value-id"
-          data-test="attribute-value"
+          data-test-id="attribute-value"
         >
           <div
             class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -436,7 +435,7 @@ exports[`Storyshots Attributes / Attributes default 1`] = `
       >
         <div
           class="BasicAttributeRow-attributeSectionLabel-id"
-          data-test="attribute-label"
+          data-test-id="attribute-label"
         >
           <div
             class="MuiTypography-root-id MuiTypography-body1-id"
@@ -446,7 +445,7 @@ exports[`Storyshots Attributes / Attributes default 1`] = `
         </div>
         <div
           class="BasicAttributeRow-value-id"
-          data-test="attribute-value"
+          data-test-id="attribute-value"
         >
           <div
             class="AttributeRow-pullRight-id"
@@ -496,7 +495,7 @@ exports[`Storyshots Attributes / Attributes default 1`] = `
       >
         <div
           class="BasicAttributeRow-attributeSectionLabel-id"
-          data-test="attribute-label"
+          data-test-id="attribute-label"
         >
           <div
             class="MuiTypography-root-id MuiTypography-body1-id"
@@ -506,7 +505,7 @@ exports[`Storyshots Attributes / Attributes default 1`] = `
         </div>
         <div
           class="BasicAttributeRow-value-id BasicAttributeRow-flex-id"
-          data-test="attribute-value"
+          data-test-id="attribute-value"
         >
           <div
             class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -550,7 +549,7 @@ exports[`Storyshots Attributes / Attributes default 1`] = `
       >
         <div
           class="BasicAttributeRow-attributeSectionLabel-id"
-          data-test="attribute-label"
+          data-test-id="attribute-label"
         >
           <div
             class="MuiTypography-root-id MuiTypography-body1-id"
@@ -560,7 +559,7 @@ exports[`Storyshots Attributes / Attributes default 1`] = `
         </div>
         <div
           class="BasicAttributeRow-value-id BasicAttributeRow-flex-id"
-          data-test="attribute-value"
+          data-test-id="attribute-value"
         >
           <div
             class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -638,7 +637,7 @@ exports[`Storyshots Attributes / Attributes default 1`] = `
       >
         <div
           class="BasicAttributeRow-attributeSectionLabel-id"
-          data-test="attribute-label"
+          data-test-id="attribute-label"
         >
           <div
             class="MuiTypography-root-id MuiTypography-body1-id"
@@ -648,7 +647,7 @@ exports[`Storyshots Attributes / Attributes default 1`] = `
         </div>
         <div
           class="BasicAttributeRow-value-id"
-          data-test="attribute-value"
+          data-test-id="attribute-value"
         >
           <div
             class="SingleAutocompleteSelectField-container-id"
@@ -755,7 +754,7 @@ exports[`Storyshots Attributes / Attributes disabled 1`] = `
         </div>
         <button
           class="MuiButtonBase-root-id IconButton-secondary-id Attributes-expansionBarButton-id IconButton-hoverOutline-id"
-          data-test="attributes-expand"
+          data-test-id="attributes-expand"
           tabindex="0"
           type="button"
         >
@@ -779,7 +778,7 @@ exports[`Storyshots Attributes / Attributes disabled 1`] = `
       >
         <div
           class="BasicAttributeRow-attributeSectionLabel-id"
-          data-test="attribute-label"
+          data-test-id="attribute-label"
         >
           <div
             class="MuiTypography-root-id MuiTypography-body1-id"
@@ -789,7 +788,7 @@ exports[`Storyshots Attributes / Attributes disabled 1`] = `
         </div>
         <div
           class="BasicAttributeRow-value-id"
-          data-test="attribute-value"
+          data-test-id="attribute-value"
         >
           <div
             class="SingleAutocompleteSelectField-container-id"
@@ -860,7 +859,7 @@ exports[`Storyshots Attributes / Attributes disabled 1`] = `
       >
         <div
           class="BasicAttributeRow-attributeSectionLabel-id"
-          data-test="attribute-label"
+          data-test-id="attribute-label"
         >
           <div
             class="MuiTypography-root-id MuiTypography-body1-id"
@@ -870,7 +869,7 @@ exports[`Storyshots Attributes / Attributes disabled 1`] = `
         </div>
         <div
           class="BasicAttributeRow-value-id"
-          data-test="attribute-value"
+          data-test-id="attribute-value"
         >
           <div
             class="MultiAutocompleteSelectField-container-id"
@@ -944,7 +943,7 @@ exports[`Storyshots Attributes / Attributes disabled 1`] = `
       >
         <div
           class="BasicAttributeRow-attributeSectionLabel-id"
-          data-test="attribute-label"
+          data-test-id="attribute-label"
         >
           <div
             class="MuiTypography-root-id MuiTypography-body1-id"
@@ -954,7 +953,7 @@ exports[`Storyshots Attributes / Attributes disabled 1`] = `
         </div>
         <div
           class="BasicAttributeRow-value-id"
-          data-test="attribute-value"
+          data-test-id="attribute-value"
         >
           <div
             class="AttributeRow-fileField-id"
@@ -962,7 +961,7 @@ exports[`Storyshots Attributes / Attributes disabled 1`] = `
             <div>
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-disabled-id MuiButtonBase-disabled-id"
-                data-test="button-upload-file"
+                data-test-id="button-upload-file"
                 disabled=""
                 tabindex="-1"
                 type="button"
@@ -977,7 +976,7 @@ exports[`Storyshots Attributes / Attributes disabled 1`] = `
           </div>
           <input
             class="FileUploadField-fileField-id"
-            data-test="upload-file-input"
+            data-test-id="upload-file-input"
             id="fileUpload"
             name="attribute:File Attribute"
             type="file"
@@ -992,7 +991,7 @@ exports[`Storyshots Attributes / Attributes disabled 1`] = `
       >
         <div
           class="ExtendedAttributeRow-attributeSectionLabel-id"
-          data-test="attribute-label"
+          data-test-id="attribute-label"
         >
           <div
             class="MuiTypography-root-id MuiTypography-body1-id"
@@ -1001,11 +1000,11 @@ exports[`Storyshots Attributes / Attributes disabled 1`] = `
           </div>
         </div>
         <div
-          data-test="attribute-selector"
+          data-test-id="attribute-selector"
         >
           <button
             class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id ExtendedAttributeRow-attributeSectionButton-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id MuiButton-disabled-id MuiButtonBase-disabled-id"
-            data-test="button-attribute-selector"
+            data-test-id="button-attribute-selector"
             disabled=""
             tabindex="-1"
             type="button"
@@ -1019,7 +1018,7 @@ exports[`Storyshots Attributes / Attributes disabled 1`] = `
         </div>
       </div>
       <div
-        data-test="attribute-value"
+        data-test-id="attribute-value"
       >
         <div />
       </div>
@@ -1031,7 +1030,7 @@ exports[`Storyshots Attributes / Attributes disabled 1`] = `
       >
         <div
           class="BasicAttributeRow-attributeSectionLabel-id"
-          data-test="attribute-label"
+          data-test-id="attribute-label"
         >
           <div
             class="MuiTypography-root-id MuiTypography-body1-id"
@@ -1041,12 +1040,11 @@ exports[`Storyshots Attributes / Attributes disabled 1`] = `
         </div>
         <div
           class="BasicAttributeRow-value-id"
-          data-test="attribute-value"
+          data-test-id="attribute-value"
         >
           <div
             class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-            data-test="richTextEditor"
-            data-test-id="attribute:Text Attribute"
+            data-test-id="rich-text-editor-attribute:Text Attribute"
           >
             <label
               class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiFormLabel-focused-id MuiInputLabel-focused-id"
@@ -1071,7 +1069,7 @@ exports[`Storyshots Attributes / Attributes disabled 1`] = `
       >
         <div
           class="BasicAttributeRow-attributeSectionLabel-id"
-          data-test="attribute-label"
+          data-test-id="attribute-label"
         >
           <div
             class="MuiTypography-root-id MuiTypography-body1-id"
@@ -1081,7 +1079,7 @@ exports[`Storyshots Attributes / Attributes disabled 1`] = `
         </div>
         <div
           class="BasicAttributeRow-value-id"
-          data-test="attribute-value"
+          data-test-id="attribute-value"
         >
           <div
             class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -1135,7 +1133,7 @@ exports[`Storyshots Attributes / Attributes disabled 1`] = `
       >
         <div
           class="BasicAttributeRow-attributeSectionLabel-id"
-          data-test="attribute-label"
+          data-test-id="attribute-label"
         >
           <div
             class="MuiTypography-root-id MuiTypography-body1-id"
@@ -1145,7 +1143,7 @@ exports[`Storyshots Attributes / Attributes disabled 1`] = `
         </div>
         <div
           class="BasicAttributeRow-value-id"
-          data-test="attribute-value"
+          data-test-id="attribute-value"
         >
           <div
             class="AttributeRow-pullRight-id"
@@ -1197,7 +1195,7 @@ exports[`Storyshots Attributes / Attributes disabled 1`] = `
       >
         <div
           class="BasicAttributeRow-attributeSectionLabel-id"
-          data-test="attribute-label"
+          data-test-id="attribute-label"
         >
           <div
             class="MuiTypography-root-id MuiTypography-body1-id"
@@ -1207,7 +1205,7 @@ exports[`Storyshots Attributes / Attributes disabled 1`] = `
         </div>
         <div
           class="BasicAttributeRow-value-id BasicAttributeRow-flex-id"
-          data-test="attribute-value"
+          data-test-id="attribute-value"
         >
           <div
             class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -1252,7 +1250,7 @@ exports[`Storyshots Attributes / Attributes disabled 1`] = `
       >
         <div
           class="BasicAttributeRow-attributeSectionLabel-id"
-          data-test="attribute-label"
+          data-test-id="attribute-label"
         >
           <div
             class="MuiTypography-root-id MuiTypography-body1-id"
@@ -1262,7 +1260,7 @@ exports[`Storyshots Attributes / Attributes disabled 1`] = `
         </div>
         <div
           class="BasicAttributeRow-value-id BasicAttributeRow-flex-id"
-          data-test="attribute-value"
+          data-test-id="attribute-value"
         >
           <div
             class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -1342,7 +1340,7 @@ exports[`Storyshots Attributes / Attributes disabled 1`] = `
       >
         <div
           class="BasicAttributeRow-attributeSectionLabel-id"
-          data-test="attribute-label"
+          data-test-id="attribute-label"
         >
           <div
             class="MuiTypography-root-id MuiTypography-body1-id"
@@ -1352,7 +1350,7 @@ exports[`Storyshots Attributes / Attributes disabled 1`] = `
         </div>
         <div
           class="BasicAttributeRow-value-id"
-          data-test="attribute-value"
+          data-test-id="attribute-value"
         >
           <div
             class="SingleAutocompleteSelectField-container-id"
@@ -1460,7 +1458,7 @@ exports[`Storyshots Attributes / Attributes selected 1`] = `
         </div>
         <button
           class="MuiButtonBase-root-id IconButton-secondary-id Attributes-expansionBarButton-id IconButton-hoverOutline-id"
-          data-test="attributes-expand"
+          data-test-id="attributes-expand"
           tabindex="0"
           type="button"
         >
@@ -1484,7 +1482,7 @@ exports[`Storyshots Attributes / Attributes selected 1`] = `
       >
         <div
           class="BasicAttributeRow-attributeSectionLabel-id"
-          data-test="attribute-label"
+          data-test-id="attribute-label"
         >
           <div
             class="MuiTypography-root-id MuiTypography-body1-id"
@@ -1494,7 +1492,7 @@ exports[`Storyshots Attributes / Attributes selected 1`] = `
         </div>
         <div
           class="BasicAttributeRow-value-id"
-          data-test="attribute-value"
+          data-test-id="attribute-value"
         >
           <div
             class="SingleAutocompleteSelectField-container-id"
@@ -1564,7 +1562,7 @@ exports[`Storyshots Attributes / Attributes selected 1`] = `
       >
         <div
           class="BasicAttributeRow-attributeSectionLabel-id"
-          data-test="attribute-label"
+          data-test-id="attribute-label"
         >
           <div
             class="MuiTypography-root-id MuiTypography-body1-id"
@@ -1574,7 +1572,7 @@ exports[`Storyshots Attributes / Attributes selected 1`] = `
         </div>
         <div
           class="BasicAttributeRow-value-id"
-          data-test="attribute-value"
+          data-test-id="attribute-value"
         >
           <div
             class="MultiAutocompleteSelectField-container-id"
@@ -1708,7 +1706,7 @@ exports[`Storyshots Attributes / Attributes selected 1`] = `
       >
         <div
           class="BasicAttributeRow-attributeSectionLabel-id"
-          data-test="attribute-label"
+          data-test-id="attribute-label"
         >
           <div
             class="MuiTypography-root-id MuiTypography-body1-id"
@@ -1718,7 +1716,7 @@ exports[`Storyshots Attributes / Attributes selected 1`] = `
         </div>
         <div
           class="BasicAttributeRow-value-id"
-          data-test="attribute-value"
+          data-test-id="attribute-value"
         >
           <div
             class="AttributeRow-fileField-id"
@@ -1740,7 +1738,7 @@ exports[`Storyshots Attributes / Attributes selected 1`] = `
               <button
                 class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                 color="primary"
-                data-test="button-delete-file"
+                data-test-id="button-delete-file"
                 tabindex="0"
                 type="button"
               >
@@ -1762,7 +1760,7 @@ exports[`Storyshots Attributes / Attributes selected 1`] = `
           </div>
           <input
             class="FileUploadField-fileField-id"
-            data-test="upload-file-input"
+            data-test-id="upload-file-input"
             id="fileUpload"
             name="attribute:File Attribute"
             type="file"
@@ -1777,7 +1775,7 @@ exports[`Storyshots Attributes / Attributes selected 1`] = `
       >
         <div
           class="ExtendedAttributeRow-attributeSectionLabel-id"
-          data-test="attribute-label"
+          data-test-id="attribute-label"
         >
           <div
             class="MuiTypography-root-id MuiTypography-body1-id"
@@ -1786,11 +1784,11 @@ exports[`Storyshots Attributes / Attributes selected 1`] = `
           </div>
         </div>
         <div
-          data-test="attribute-selector"
+          data-test-id="attribute-selector"
         >
           <button
             class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id ExtendedAttributeRow-attributeSectionButton-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-            data-test="button-attribute-selector"
+            data-test-id="button-attribute-selector"
             tabindex="0"
             type="button"
           >
@@ -1803,7 +1801,7 @@ exports[`Storyshots Attributes / Attributes selected 1`] = `
         </div>
       </div>
       <div
-        data-test="attribute-value"
+        data-test-id="attribute-value"
       >
         <div>
           <div
@@ -1815,7 +1813,7 @@ exports[`Storyshots Attributes / Attributes selected 1`] = `
               <svg
                 aria-hidden="true"
                 class="MuiSvgIcon-root-id SortableHandle-drag-id SortableChip-sortableHandle-id"
-                data-test="button-drag-handle"
+                data-test-id="button-drag-handle"
                 focusable="false"
                 viewBox="0 0 24 24"
               >
@@ -1828,14 +1826,14 @@ exports[`Storyshots Attributes / Attributes selected 1`] = `
               </svg>
               <div
                 class="MuiTypography-root-id MuiTypography-body1-id"
-                data-test="chip-label"
+                data-test-id="chip-label"
               >
                 References First Value
               </div>
               <svg
                 aria-hidden="true"
                 class="MuiSvgIcon-root-id SortableChip-closeIcon-id"
-                data-test="button-close"
+                data-test-id="button-close"
                 focusable="false"
                 viewBox="0 0 24 24"
               >
@@ -1854,7 +1852,7 @@ exports[`Storyshots Attributes / Attributes selected 1`] = `
               <svg
                 aria-hidden="true"
                 class="MuiSvgIcon-root-id SortableHandle-drag-id SortableChip-sortableHandle-id"
-                data-test="button-drag-handle"
+                data-test-id="button-drag-handle"
                 focusable="false"
                 viewBox="0 0 24 24"
               >
@@ -1867,14 +1865,14 @@ exports[`Storyshots Attributes / Attributes selected 1`] = `
               </svg>
               <div
                 class="MuiTypography-root-id MuiTypography-body1-id"
-                data-test="chip-label"
+                data-test-id="chip-label"
               >
                 References Second Value
               </div>
               <svg
                 aria-hidden="true"
                 class="MuiSvgIcon-root-id SortableChip-closeIcon-id"
-                data-test="button-close"
+                data-test-id="button-close"
                 focusable="false"
                 viewBox="0 0 24 24"
               >
@@ -1893,7 +1891,7 @@ exports[`Storyshots Attributes / Attributes selected 1`] = `
               <svg
                 aria-hidden="true"
                 class="MuiSvgIcon-root-id SortableHandle-drag-id SortableChip-sortableHandle-id"
-                data-test="button-drag-handle"
+                data-test-id="button-drag-handle"
                 focusable="false"
                 viewBox="0 0 24 24"
               >
@@ -1906,14 +1904,14 @@ exports[`Storyshots Attributes / Attributes selected 1`] = `
               </svg>
               <div
                 class="MuiTypography-root-id MuiTypography-body1-id"
-                data-test="chip-label"
+                data-test-id="chip-label"
               >
                 References Third Value
               </div>
               <svg
                 aria-hidden="true"
                 class="MuiSvgIcon-root-id SortableChip-closeIcon-id"
-                data-test="button-close"
+                data-test-id="button-close"
                 focusable="false"
                 viewBox="0 0 24 24"
               >
@@ -1933,7 +1931,7 @@ exports[`Storyshots Attributes / Attributes selected 1`] = `
       >
         <div
           class="BasicAttributeRow-attributeSectionLabel-id"
-          data-test="attribute-label"
+          data-test-id="attribute-label"
         >
           <div
             class="MuiTypography-root-id MuiTypography-body1-id"
@@ -1943,12 +1941,11 @@ exports[`Storyshots Attributes / Attributes selected 1`] = `
         </div>
         <div
           class="BasicAttributeRow-value-id"
-          data-test="attribute-value"
+          data-test-id="attribute-value"
         >
           <div
             class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-            data-test="richTextEditor"
-            data-test-id="attribute:Text Attribute"
+            data-test-id="rich-text-editor-attribute:Text Attribute"
           >
             <label
               class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-focused-id MuiInputLabel-focused-id"
@@ -1973,7 +1970,7 @@ exports[`Storyshots Attributes / Attributes selected 1`] = `
       >
         <div
           class="BasicAttributeRow-attributeSectionLabel-id"
-          data-test="attribute-label"
+          data-test-id="attribute-label"
         >
           <div
             class="MuiTypography-root-id MuiTypography-body1-id"
@@ -1983,7 +1980,7 @@ exports[`Storyshots Attributes / Attributes selected 1`] = `
         </div>
         <div
           class="BasicAttributeRow-value-id"
-          data-test="attribute-value"
+          data-test-id="attribute-value"
         >
           <div
             class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -2037,7 +2034,7 @@ exports[`Storyshots Attributes / Attributes selected 1`] = `
       >
         <div
           class="BasicAttributeRow-attributeSectionLabel-id"
-          data-test="attribute-label"
+          data-test-id="attribute-label"
         >
           <div
             class="MuiTypography-root-id MuiTypography-body1-id"
@@ -2047,7 +2044,7 @@ exports[`Storyshots Attributes / Attributes selected 1`] = `
         </div>
         <div
           class="BasicAttributeRow-value-id"
-          data-test="attribute-value"
+          data-test-id="attribute-value"
         >
           <div
             class="AttributeRow-pullRight-id"
@@ -2108,7 +2105,7 @@ exports[`Storyshots Attributes / Attributes selected 1`] = `
       >
         <div
           class="BasicAttributeRow-attributeSectionLabel-id"
-          data-test="attribute-label"
+          data-test-id="attribute-label"
         >
           <div
             class="MuiTypography-root-id MuiTypography-body1-id"
@@ -2118,7 +2115,7 @@ exports[`Storyshots Attributes / Attributes selected 1`] = `
         </div>
         <div
           class="BasicAttributeRow-value-id BasicAttributeRow-flex-id"
-          data-test="attribute-value"
+          data-test-id="attribute-value"
         >
           <div
             class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -2163,7 +2160,7 @@ exports[`Storyshots Attributes / Attributes selected 1`] = `
       >
         <div
           class="BasicAttributeRow-attributeSectionLabel-id"
-          data-test="attribute-label"
+          data-test-id="attribute-label"
         >
           <div
             class="MuiTypography-root-id MuiTypography-body1-id"
@@ -2173,7 +2170,7 @@ exports[`Storyshots Attributes / Attributes selected 1`] = `
         </div>
         <div
           class="BasicAttributeRow-value-id BasicAttributeRow-flex-id"
-          data-test="attribute-value"
+          data-test-id="attribute-value"
         >
           <div
             class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -2251,7 +2248,7 @@ exports[`Storyshots Attributes / Attributes selected 1`] = `
       >
         <div
           class="BasicAttributeRow-attributeSectionLabel-id"
-          data-test="attribute-label"
+          data-test-id="attribute-label"
         >
           <div
             class="MuiTypography-root-id MuiTypography-body1-id"
@@ -2261,7 +2258,7 @@ exports[`Storyshots Attributes / Attributes selected 1`] = `
         </div>
         <div
           class="BasicAttributeRow-value-id"
-          data-test="attribute-value"
+          data-test-id="attribute-value"
         >
           <div
             class="SingleAutocompleteSelectField-container-id"
@@ -3303,7 +3300,7 @@ exports[`Storyshots Generics / Account Permission Groups Widget default 1`] = `
 >
   <div
     class="MultiAutocompleteSelectField-container-id"
-    data-test="permissionGroups"
+    data-test-id="permission-groups"
   >
     <div
       class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -3434,7 +3431,7 @@ exports[`Storyshots Generics / Account Permission Groups Widget error 1`] = `
 >
   <div
     class="MultiAutocompleteSelectField-container-id"
-    data-test="permissionGroups"
+    data-test-id="permission-groups"
   >
     <div
       class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -4101,7 +4098,7 @@ exports[`Storyshots Generics / Autocomplete Menu default 1`] = `
     >
       <div
         class="AutocompleteSelectMenu-container-id"
-        data-test-id="containerAutocompleteSelect"
+        data-test-id="container-autocomplete-select"
       >
         <div
           class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -4155,7 +4152,7 @@ exports[`Storyshots Generics / Autocomplete Menu error 1`] = `
     >
       <div
         class="AutocompleteSelectMenu-container-id"
-        data-test-id="containerAutocompleteSelect"
+        data-test-id="container-autocomplete-select"
       >
         <div
           class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -4215,7 +4212,7 @@ exports[`Storyshots Generics / Autocomplete Menu interactive 1`] = `
       <form>
         <div
           class="AutocompleteSelectMenu-container-id"
-          data-test-id="containerAutocompleteSelect"
+          data-test-id="container-autocomplete-select"
         >
           <div
             class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -4270,7 +4267,7 @@ exports[`Storyshots Generics / Autocomplete Menu loading 1`] = `
     >
       <div
         class="AutocompleteSelectMenu-container-id"
-        data-test-id="containerAutocompleteSelect"
+        data-test-id="container-autocomplete-select"
       >
         <div
           class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -4321,7 +4318,7 @@ exports[`Storyshots Generics / Card menu default 1`] = `
       aria-label="More"
       class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
       color="primary"
-      data-test-id="showMoreButton"
+      data-test-id="show-more-button"
       tabindex="0"
       type="button"
     >
@@ -4367,7 +4364,7 @@ exports[`Storyshots Generics / Channels availability card default 1`] = `
       >
         <button
           class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-          data-test-id="channels-availiability-manage-button"
+          data-test-id="channels-availability-manage-button"
           tabindex="0"
           type="button"
         >
@@ -4451,7 +4448,7 @@ exports[`Storyshots Generics / Channels availability card with onChange 1`] = `
       >
         <button
           class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-          data-test-id="channels-availiability-manage-button"
+          data-test-id="channels-availability-manage-button"
           tabindex="0"
           type="button"
         >
@@ -4476,7 +4473,7 @@ exports[`Storyshots Generics / Channels availability card with onChange 1`] = `
       />
       <div
         class="MuiPaper-root-id MuiAccordion-root-id ChannelContentWrapperExpander-root-id MuiAccordion-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
-        data-test="channel-availability-item"
+        data-test-id="channel-availability-item"
       >
         <div
           aria-disabled="false"
@@ -4825,7 +4822,7 @@ exports[`Storyshots Generics / Channels availability card with onChange 1`] = `
       </div>
       <div
         class="MuiPaper-root-id MuiAccordion-root-id ChannelContentWrapperExpander-root-id MuiAccordion-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
-        data-test="channel-availability-item"
+        data-test-id="channel-availability-item"
       >
         <div
           aria-disabled="false"
@@ -6123,7 +6120,7 @@ exports[`Storyshots Generics / File upload field default 1`] = `
         <div>
           <button
             class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-            data-test="button-upload-file"
+            data-test-id="button-upload-file"
             tabindex="0"
             type="button"
           >
@@ -6137,7 +6134,7 @@ exports[`Storyshots Generics / File upload field default 1`] = `
       </div>
       <input
         class="FileUploadField-fileField-id"
-        data-test="upload-file-input"
+        data-test-id="upload-file-input"
         id="fileUpload"
         name="country"
         placeholder="Select country"
@@ -6163,7 +6160,7 @@ exports[`Storyshots Generics / File upload field interactive 1`] = `
         <div>
           <button
             class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-            data-test="button-upload-file"
+            data-test-id="button-upload-file"
             tabindex="0"
             type="button"
           >
@@ -6177,7 +6174,7 @@ exports[`Storyshots Generics / File upload field interactive 1`] = `
       </div>
       <input
         class="FileUploadField-fileField-id"
-        data-test="upload-file-input"
+        data-test-id="upload-file-input"
         id="fileUpload"
         type="file"
       />
@@ -6201,7 +6198,7 @@ exports[`Storyshots Generics / File upload field with error 1`] = `
         <div>
           <button
             class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-            data-test="button-upload-file"
+            data-test-id="button-upload-file"
             tabindex="0"
             type="button"
           >
@@ -6220,7 +6217,7 @@ exports[`Storyshots Generics / File upload field with error 1`] = `
       </div>
       <input
         class="FileUploadField-fileField-id"
-        data-test="upload-file-input"
+        data-test-id="upload-file-input"
         id="fileUpload"
         name="country"
         placeholder="Select country"
@@ -6259,7 +6256,7 @@ exports[`Storyshots Generics / File upload field with ready to upload file 1`] =
           <button
             class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
             color="primary"
-            data-test="button-delete-file"
+            data-test-id="button-delete-file"
             tabindex="0"
             type="button"
           >
@@ -6281,7 +6278,7 @@ exports[`Storyshots Generics / File upload field with ready to upload file 1`] =
       </div>
       <input
         class="FileUploadField-fileField-id"
-        data-test="upload-file-input"
+        data-test-id="upload-file-input"
         id="fileUpload"
         name="country"
         placeholder="Select country"
@@ -6321,7 +6318,7 @@ exports[`Storyshots Generics / File upload field with uploaded file 1`] = `
           <button
             class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
             color="primary"
-            data-test="button-delete-file"
+            data-test-id="button-delete-file"
             tabindex="0"
             type="button"
           >
@@ -6343,7 +6340,7 @@ exports[`Storyshots Generics / File upload field with uploaded file 1`] = `
       </div>
       <input
         class="FileUploadField-fileField-id"
-        data-test="upload-file-input"
+        data-test-id="upload-file-input"
         id="fileUpload"
         name="country"
         placeholder="Select country"
@@ -6376,7 +6373,7 @@ exports[`Storyshots Generics / Filter default 1`] = `
           <div>
             <button
               class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id FilterContentHeader-clear-id MuiButton-outlinedPrimary-id"
-              data-test="clear"
+              data-test-id="clear"
               tabindex="0"
               type="button"
             >
@@ -6388,7 +6385,7 @@ exports[`Storyshots Generics / Filter default 1`] = `
             </button>
             <button
               class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
-              data-test="submit"
+              data-test-id="submit"
               tabindex="0"
               type="submit"
             >
@@ -6405,8 +6402,7 @@ exports[`Storyshots Generics / Filter default 1`] = `
         />
         <div
           class="MuiPaper-root-id MuiAccordion-root-id FilterContentExpander-root-id MuiAccordion-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
-          data-test="channel-availability-item"
-          data-test-id="createdAt"
+          data-test-id="channel-availability-item-createdAt"
         >
           <div
             aria-disabled="false"
@@ -6427,8 +6423,7 @@ exports[`Storyshots Generics / Filter default 1`] = `
                   <span
                     aria-disabled="false"
                     class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id MuiIconButton-colorPrimary-id"
-                    data-test="filterGroupActive"
-                    data-test-id="createdAt"
+                    data-test-id="filter-group-active-createdAt"
                   >
                     <span
                       class="MuiIconButton-label-id"
@@ -6595,8 +6590,7 @@ exports[`Storyshots Generics / Filter default 1`] = `
                       </div>
                       <div
                         class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                        data-test="filter-field"
-                        data-test-id="createdAt"
+                        data-test-id="filter-field-createdAt"
                         data-test-range-type="min"
                       >
                         <div
@@ -6646,8 +6640,7 @@ exports[`Storyshots Generics / Filter default 1`] = `
                       />
                       <div
                         class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                        data-test="filter-field"
-                        data-test-id="createdAt"
+                        data-test-id="filter-field-createdAt"
                         data-test-range-type="max"
                       >
                         <div
@@ -6685,8 +6678,7 @@ exports[`Storyshots Generics / Filter default 1`] = `
         </div>
         <div
           class="MuiPaper-root-id MuiAccordion-root-id FilterContentExpander-root-id MuiAccordion-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
-          data-test="channel-availability-item"
-          data-test-id="multiplOptions"
+          data-test-id="channel-availability-item-multiplOptions"
         >
           <div
             aria-disabled="false"
@@ -6707,8 +6699,7 @@ exports[`Storyshots Generics / Filter default 1`] = `
                   <span
                     aria-disabled="false"
                     class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
-                    data-test="filterGroupActive"
-                    data-test-id="multiplOptions"
+                    data-test-id="filter-group-active-multiplOptions"
                   >
                     <span
                       class="MuiIconButton-label-id"
@@ -6791,8 +6782,7 @@ exports[`Storyshots Generics / Filter default 1`] = `
                   >
                     <div
                       class="FilterOptionField-root-id"
-                      data-test="filter-field"
-                      data-test-id="multiplOptions"
+                      data-test-id="filter-field-multiplOptions"
                     >
                       <div
                         class="FilterOptionField-option-id"
@@ -6803,8 +6793,7 @@ exports[`Storyshots Generics / Filter default 1`] = `
                           <span
                             aria-disabled="false"
                             class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id MuiIconButton-colorPrimary-id"
-                            data-test="filterOption"
-                            data-test-id="val1"
+                            data-test-id="filter-option-val1"
                           >
                             <span
                               class="MuiIconButton-label-id"
@@ -6863,8 +6852,7 @@ exports[`Storyshots Generics / Filter default 1`] = `
                           <span
                             aria-disabled="false"
                             class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id MuiIconButton-colorPrimary-id"
-                            data-test="filterOption"
-                            data-test-id="val2"
+                            data-test-id="filter-option-val2"
                           >
                             <span
                               class="MuiIconButton-label-id"
@@ -6923,8 +6911,7 @@ exports[`Storyshots Generics / Filter default 1`] = `
                           <span
                             aria-disabled="false"
                             class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
-                            data-test="filterOption"
-                            data-test-id="val3"
+                            data-test-id="filter-option-val3"
                           >
                             <span
                               class="MuiIconButton-label-id"
@@ -6972,8 +6959,7 @@ exports[`Storyshots Generics / Filter default 1`] = `
         </div>
         <div
           class="MuiPaper-root-id MuiAccordion-root-id FilterContentExpander-root-id MuiAccordion-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
-          data-test="channel-availability-item"
-          data-test-id="price"
+          data-test-id="channel-availability-item-price"
         >
           <div
             aria-disabled="false"
@@ -6994,8 +6980,7 @@ exports[`Storyshots Generics / Filter default 1`] = `
                   <span
                     aria-disabled="false"
                     class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
-                    data-test="filterGroupActive"
-                    data-test-id="price"
+                    data-test-id="filter-group-active-price"
                   >
                     <span
                       class="MuiIconButton-label-id"
@@ -7151,8 +7136,7 @@ exports[`Storyshots Generics / Filter default 1`] = `
                       </div>
                       <div
                         class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                        data-test="filter-field"
-                        data-test-id="price"
+                        data-test-id="filter-field-price"
                         data-test-range-type="min"
                       >
                         <div
@@ -7202,8 +7186,7 @@ exports[`Storyshots Generics / Filter default 1`] = `
                       />
                       <div
                         class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                        data-test="filter-field"
-                        data-test-id="price"
+                        data-test-id="filter-field-price"
                         data-test-range-type="max"
                       >
                         <div
@@ -7241,8 +7224,7 @@ exports[`Storyshots Generics / Filter default 1`] = `
         </div>
         <div
           class="MuiPaper-root-id MuiAccordion-root-id FilterContentExpander-root-id MuiAccordion-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
-          data-test="channel-availability-item"
-          data-test-id="status"
+          data-test-id="channel-availability-item-status"
         >
           <div
             aria-disabled="false"
@@ -7263,8 +7245,7 @@ exports[`Storyshots Generics / Filter default 1`] = `
                   <span
                     aria-disabled="false"
                     class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id MuiIconButton-colorPrimary-id"
-                    data-test="filterGroupActive"
-                    data-test-id="status"
+                    data-test-id="filter-group-active-status"
                   >
                     <span
                       class="MuiIconButton-label-id"
@@ -7358,8 +7339,7 @@ exports[`Storyshots Generics / Filter default 1`] = `
                   >
                     <div
                       class="FilterOptionField-root-id"
-                      data-test="filter-field"
-                      data-test-id="status"
+                      data-test-id="filter-field-status"
                     >
                       <div
                         class="FilterOptionField-option-id FilterOptionField-optionRadio-id"
@@ -7370,8 +7350,7 @@ exports[`Storyshots Generics / Filter default 1`] = `
                           <span
                             aria-disabled="false"
                             class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorPrimary-id"
-                            data-test="filterOption"
-                            data-test-id="val1"
+                            data-test-id="filter-option-val1"
                           >
                             <span
                               class="MuiIconButton-label-id"
@@ -7419,8 +7398,7 @@ exports[`Storyshots Generics / Filter default 1`] = `
                           <span
                             aria-disabled="false"
                             class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id MuiIconButton-colorPrimary-id"
-                            data-test="filterOption"
-                            data-test-id="val2"
+                            data-test-id="filter-option-val2"
                           >
                             <span
                               class="MuiIconButton-label-id"
@@ -7463,8 +7441,7 @@ exports[`Storyshots Generics / Filter default 1`] = `
                           <span
                             aria-disabled="false"
                             class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id MuiIconButton-colorPrimary-id"
-                            data-test="filterOption"
-                            data-test-id="val3"
+                            data-test-id="filter-option-val3"
                           >
                             <span
                               class="MuiIconButton-label-id"
@@ -7533,7 +7510,7 @@ exports[`Storyshots Generics / Filter interactive 1`] = `
           <div>
             <button
               class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id FilterContentHeader-clear-id MuiButton-outlinedPrimary-id"
-              data-test="clear"
+              data-test-id="clear"
               tabindex="0"
               type="button"
             >
@@ -7545,7 +7522,7 @@ exports[`Storyshots Generics / Filter interactive 1`] = `
             </button>
             <button
               class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
-              data-test="submit"
+              data-test-id="submit"
               tabindex="0"
               type="submit"
             >
@@ -7562,8 +7539,7 @@ exports[`Storyshots Generics / Filter interactive 1`] = `
         />
         <div
           class="MuiPaper-root-id MuiAccordion-root-id FilterContentExpander-root-id MuiAccordion-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
-          data-test="channel-availability-item"
-          data-test-id="createdAt"
+          data-test-id="channel-availability-item-createdAt"
         >
           <div
             aria-disabled="false"
@@ -7584,8 +7560,7 @@ exports[`Storyshots Generics / Filter interactive 1`] = `
                   <span
                     aria-disabled="false"
                     class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id MuiIconButton-colorPrimary-id"
-                    data-test="filterGroupActive"
-                    data-test-id="createdAt"
+                    data-test-id="filter-group-active-createdAt"
                   >
                     <span
                       class="MuiIconButton-label-id"
@@ -7752,8 +7727,7 @@ exports[`Storyshots Generics / Filter interactive 1`] = `
                       </div>
                       <div
                         class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                        data-test="filter-field"
-                        data-test-id="createdAt"
+                        data-test-id="filter-field-createdAt"
                         data-test-range-type="min"
                       >
                         <div
@@ -7803,8 +7777,7 @@ exports[`Storyshots Generics / Filter interactive 1`] = `
                       />
                       <div
                         class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                        data-test="filter-field"
-                        data-test-id="createdAt"
+                        data-test-id="filter-field-createdAt"
                         data-test-range-type="max"
                       >
                         <div
@@ -7842,8 +7815,7 @@ exports[`Storyshots Generics / Filter interactive 1`] = `
         </div>
         <div
           class="MuiPaper-root-id MuiAccordion-root-id FilterContentExpander-root-id MuiAccordion-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
-          data-test="channel-availability-item"
-          data-test-id="multiplOptions"
+          data-test-id="channel-availability-item-multiplOptions"
         >
           <div
             aria-disabled="false"
@@ -7864,8 +7836,7 @@ exports[`Storyshots Generics / Filter interactive 1`] = `
                   <span
                     aria-disabled="false"
                     class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
-                    data-test="filterGroupActive"
-                    data-test-id="multiplOptions"
+                    data-test-id="filter-group-active-multiplOptions"
                   >
                     <span
                       class="MuiIconButton-label-id"
@@ -7948,8 +7919,7 @@ exports[`Storyshots Generics / Filter interactive 1`] = `
                   >
                     <div
                       class="FilterOptionField-root-id"
-                      data-test="filter-field"
-                      data-test-id="multiplOptions"
+                      data-test-id="filter-field-multiplOptions"
                     >
                       <div
                         class="FilterOptionField-option-id"
@@ -7960,8 +7930,7 @@ exports[`Storyshots Generics / Filter interactive 1`] = `
                           <span
                             aria-disabled="false"
                             class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id MuiIconButton-colorPrimary-id"
-                            data-test="filterOption"
-                            data-test-id="val1"
+                            data-test-id="filter-option-val1"
                           >
                             <span
                               class="MuiIconButton-label-id"
@@ -8020,8 +7989,7 @@ exports[`Storyshots Generics / Filter interactive 1`] = `
                           <span
                             aria-disabled="false"
                             class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id MuiIconButton-colorPrimary-id"
-                            data-test="filterOption"
-                            data-test-id="val2"
+                            data-test-id="filter-option-val2"
                           >
                             <span
                               class="MuiIconButton-label-id"
@@ -8080,8 +8048,7 @@ exports[`Storyshots Generics / Filter interactive 1`] = `
                           <span
                             aria-disabled="false"
                             class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
-                            data-test="filterOption"
-                            data-test-id="val3"
+                            data-test-id="filter-option-val3"
                           >
                             <span
                               class="MuiIconButton-label-id"
@@ -8129,8 +8096,7 @@ exports[`Storyshots Generics / Filter interactive 1`] = `
         </div>
         <div
           class="MuiPaper-root-id MuiAccordion-root-id FilterContentExpander-root-id MuiAccordion-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
-          data-test="channel-availability-item"
-          data-test-id="price"
+          data-test-id="channel-availability-item-price"
         >
           <div
             aria-disabled="false"
@@ -8151,8 +8117,7 @@ exports[`Storyshots Generics / Filter interactive 1`] = `
                   <span
                     aria-disabled="false"
                     class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
-                    data-test="filterGroupActive"
-                    data-test-id="price"
+                    data-test-id="filter-group-active-price"
                   >
                     <span
                       class="MuiIconButton-label-id"
@@ -8308,8 +8273,7 @@ exports[`Storyshots Generics / Filter interactive 1`] = `
                       </div>
                       <div
                         class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                        data-test="filter-field"
-                        data-test-id="price"
+                        data-test-id="filter-field-price"
                         data-test-range-type="min"
                       >
                         <div
@@ -8359,8 +8323,7 @@ exports[`Storyshots Generics / Filter interactive 1`] = `
                       />
                       <div
                         class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
-                        data-test="filter-field"
-                        data-test-id="price"
+                        data-test-id="filter-field-price"
                         data-test-range-type="max"
                       >
                         <div
@@ -8398,8 +8361,7 @@ exports[`Storyshots Generics / Filter interactive 1`] = `
         </div>
         <div
           class="MuiPaper-root-id MuiAccordion-root-id FilterContentExpander-root-id MuiAccordion-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
-          data-test="channel-availability-item"
-          data-test-id="status"
+          data-test-id="channel-availability-item-status"
         >
           <div
             aria-disabled="false"
@@ -8420,8 +8382,7 @@ exports[`Storyshots Generics / Filter interactive 1`] = `
                   <span
                     aria-disabled="false"
                     class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-checked-id MuiCheckbox-checked-id MuiIconButton-colorPrimary-id"
-                    data-test="filterGroupActive"
-                    data-test-id="status"
+                    data-test-id="filter-group-active-status"
                   >
                     <span
                       class="MuiIconButton-label-id"
@@ -8515,8 +8476,7 @@ exports[`Storyshots Generics / Filter interactive 1`] = `
                   >
                     <div
                       class="FilterOptionField-root-id"
-                      data-test="filter-field"
-                      data-test-id="status"
+                      data-test-id="filter-field-status"
                     >
                       <div
                         class="FilterOptionField-option-id FilterOptionField-optionRadio-id"
@@ -8527,8 +8487,7 @@ exports[`Storyshots Generics / Filter interactive 1`] = `
                           <span
                             aria-disabled="false"
                             class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id PrivateSwitchBase-checked-id MuiRadio-checked-id MuiIconButton-colorPrimary-id"
-                            data-test="filterOption"
-                            data-test-id="val1"
+                            data-test-id="filter-option-val1"
                           >
                             <span
                               class="MuiIconButton-label-id"
@@ -8576,8 +8535,7 @@ exports[`Storyshots Generics / Filter interactive 1`] = `
                           <span
                             aria-disabled="false"
                             class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id MuiIconButton-colorPrimary-id"
-                            data-test="filterOption"
-                            data-test-id="val2"
+                            data-test-id="filter-option-val2"
                           >
                             <span
                               class="MuiIconButton-label-id"
@@ -8620,8 +8578,7 @@ exports[`Storyshots Generics / Filter interactive 1`] = `
                           <span
                             aria-disabled="false"
                             class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id MuiIconButton-colorPrimary-id"
-                            data-test="filterOption"
-                            data-test-id="val3"
+                            data-test-id="filter-option-val3"
                           >
                             <span
                               class="MuiIconButton-label-id"
@@ -8910,8 +8867,8 @@ exports[`Storyshots Generics / Metadata default 1`] = `
 >
   <div
     class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-    data-test="metadataEditor"
     data-test-expanded="true"
+    data-test-id="metadata-editor"
     data-test-is-private="false"
   >
     <div
@@ -8926,7 +8883,7 @@ exports[`Storyshots Generics / Metadata default 1`] = `
           Metadata
           <button
             class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-            data-test="expand"
+            data-test-id="expand"
             tabindex="0"
             type="button"
           >
@@ -8998,7 +8955,7 @@ exports[`Storyshots Generics / Metadata default 1`] = `
       >
         <tr
           class="MuiTableRow-root-id MuiTableRow-hover-id"
-          data-test="field"
+          data-test-id="field"
         >
           <td
             class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colName-id"
@@ -9079,8 +9036,7 @@ exports[`Storyshots Generics / Metadata default 1`] = `
           >
             <button
               class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-              data-test="deleteField"
-              data-test-id="0"
+              data-test-id="delete-field-0"
               tabindex="0"
               type="button"
             >
@@ -9102,7 +9058,7 @@ exports[`Storyshots Generics / Metadata default 1`] = `
         </tr>
         <tr
           class="MuiTableRow-root-id MuiTableRow-hover-id"
-          data-test="field"
+          data-test-id="field"
         >
           <td
             class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colName-id"
@@ -9185,8 +9141,7 @@ exports[`Storyshots Generics / Metadata default 1`] = `
           >
             <button
               class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-              data-test="deleteField"
-              data-test-id="1"
+              data-test-id="delete-field-1"
               tabindex="0"
               type="button"
             >
@@ -9208,7 +9163,7 @@ exports[`Storyshots Generics / Metadata default 1`] = `
         </tr>
         <tr
           class="MuiTableRow-root-id MuiTableRow-hover-id"
-          data-test="field"
+          data-test-id="field"
         >
           <td
             class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colName-id"
@@ -9289,8 +9244,7 @@ exports[`Storyshots Generics / Metadata default 1`] = `
           >
             <button
               class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-              data-test="deleteField"
-              data-test-id="2"
+              data-test-id="delete-field-2"
               tabindex="0"
               type="button"
             >
@@ -9317,7 +9271,7 @@ exports[`Storyshots Generics / Metadata default 1`] = `
     >
       <button
         class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-        data-test="addField"
+        data-test-id="add-field"
         tabindex="0"
         type="button"
       >
@@ -9334,8 +9288,8 @@ exports[`Storyshots Generics / Metadata default 1`] = `
   />
   <div
     class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-    data-test="metadataEditor"
     data-test-expanded="true"
+    data-test-id="metadata-editor"
     data-test-is-private="true"
   >
     <div
@@ -9350,7 +9304,7 @@ exports[`Storyshots Generics / Metadata default 1`] = `
           Private Metadata
           <button
             class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-            data-test="expand"
+            data-test-id="expand"
             tabindex="0"
             type="button"
           >
@@ -9396,7 +9350,7 @@ exports[`Storyshots Generics / Metadata default 1`] = `
     >
       <button
         class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-        data-test="addField"
+        data-test-id="add-field"
         tabindex="0"
         type="button"
       >
@@ -9417,8 +9371,8 @@ exports[`Storyshots Generics / Metadata interactive 1`] = `
 >
   <div
     class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-    data-test="metadataEditor"
     data-test-expanded="true"
+    data-test-id="metadata-editor"
     data-test-is-private="false"
   >
     <div
@@ -9433,7 +9387,7 @@ exports[`Storyshots Generics / Metadata interactive 1`] = `
           Metadata
           <button
             class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-            data-test="expand"
+            data-test-id="expand"
             tabindex="0"
             type="button"
           >
@@ -9505,7 +9459,7 @@ exports[`Storyshots Generics / Metadata interactive 1`] = `
       >
         <tr
           class="MuiTableRow-root-id MuiTableRow-hover-id"
-          data-test="field"
+          data-test-id="field"
         >
           <td
             class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colName-id"
@@ -9586,8 +9540,7 @@ exports[`Storyshots Generics / Metadata interactive 1`] = `
           >
             <button
               class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-              data-test="deleteField"
-              data-test-id="0"
+              data-test-id="delete-field-0"
               tabindex="0"
               type="button"
             >
@@ -9609,7 +9562,7 @@ exports[`Storyshots Generics / Metadata interactive 1`] = `
         </tr>
         <tr
           class="MuiTableRow-root-id MuiTableRow-hover-id"
-          data-test="field"
+          data-test-id="field"
         >
           <td
             class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colName-id"
@@ -9692,8 +9645,7 @@ exports[`Storyshots Generics / Metadata interactive 1`] = `
           >
             <button
               class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-              data-test="deleteField"
-              data-test-id="1"
+              data-test-id="delete-field-1"
               tabindex="0"
               type="button"
             >
@@ -9715,7 +9667,7 @@ exports[`Storyshots Generics / Metadata interactive 1`] = `
         </tr>
         <tr
           class="MuiTableRow-root-id MuiTableRow-hover-id"
-          data-test="field"
+          data-test-id="field"
         >
           <td
             class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colName-id"
@@ -9796,8 +9748,7 @@ exports[`Storyshots Generics / Metadata interactive 1`] = `
           >
             <button
               class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-              data-test="deleteField"
-              data-test-id="2"
+              data-test-id="delete-field-2"
               tabindex="0"
               type="button"
             >
@@ -9824,7 +9775,7 @@ exports[`Storyshots Generics / Metadata interactive 1`] = `
     >
       <button
         class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-        data-test="addField"
+        data-test-id="add-field"
         tabindex="0"
         type="button"
       >
@@ -9841,8 +9792,8 @@ exports[`Storyshots Generics / Metadata interactive 1`] = `
   />
   <div
     class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-    data-test="metadataEditor"
     data-test-expanded="true"
+    data-test-id="metadata-editor"
     data-test-is-private="true"
   >
     <div
@@ -9857,7 +9808,7 @@ exports[`Storyshots Generics / Metadata interactive 1`] = `
           Private Metadata
           <button
             class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-            data-test="expand"
+            data-test-id="expand"
             tabindex="0"
             type="button"
           >
@@ -9903,7 +9854,7 @@ exports[`Storyshots Generics / Metadata interactive 1`] = `
     >
       <button
         class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-        data-test="addField"
+        data-test-id="add-field"
         tabindex="0"
         type="button"
       >
@@ -9924,8 +9875,8 @@ exports[`Storyshots Generics / Metadata loading 1`] = `
 >
   <div
     class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-    data-test="metadataEditor"
     data-test-expanded="true"
+    data-test-id="metadata-editor"
     data-test-is-private="false"
   >
     <div
@@ -9940,7 +9891,7 @@ exports[`Storyshots Generics / Metadata loading 1`] = `
           Metadata
           <button
             class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-            data-test="expand"
+            data-test-id="expand"
             tabindex="0"
             type="button"
           >
@@ -9985,8 +9936,8 @@ exports[`Storyshots Generics / Metadata loading 1`] = `
   />
   <div
     class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-    data-test="metadataEditor"
     data-test-expanded="true"
+    data-test-id="metadata-editor"
     data-test-is-private="true"
   >
     <div
@@ -10001,7 +9952,7 @@ exports[`Storyshots Generics / Metadata loading 1`] = `
           Private Metadata
           <button
             class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-            data-test="expand"
+            data-test-id="expand"
             tabindex="0"
             type="button"
           >
@@ -12223,7 +12174,7 @@ exports[`Storyshots Generics / NavigatorButton mac 1`] = `
     >
       <button
         class="MuiButtonBase-root-id LayoutButton-root-id NavigatorButton-root-id"
-        data-test="navigator"
+        data-test-id="navigator"
         tabindex="0"
         type="button"
       >
@@ -12259,7 +12210,7 @@ exports[`Storyshots Generics / NavigatorButton other 1`] = `
     >
       <button
         class="MuiButtonBase-root-id LayoutButton-root-id NavigatorButton-root-id"
-        data-test="navigator"
+        data-test-id="navigator"
         tabindex="0"
         type="button"
       >
@@ -13010,8 +12961,7 @@ exports[`Storyshots Generics / Rich text editor default 1`] = `
     >
       <div
         class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-        data-test="richTextEditor"
-        data-test-id="content"
+        data-test-id="rich-text-editor-content"
       >
         <label
           class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-focused-id MuiInputLabel-focused-id"
@@ -13046,8 +12996,7 @@ exports[`Storyshots Generics / Rich text editor disabled 1`] = `
     >
       <div
         class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-        data-test="richTextEditor"
-        data-test-id="content"
+        data-test-id="rich-text-editor-content"
       >
         <label
           class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiFormLabel-focused-id MuiInputLabel-focused-id"
@@ -13082,8 +13031,7 @@ exports[`Storyshots Generics / Rich text editor error 1`] = `
     >
       <div
         class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-        data-test="richTextEditor"
-        data-test-id="content"
+        data-test-id="rich-text-editor-content"
       >
         <label
           class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-focused-id MuiInputLabel-focused-id"
@@ -13127,11 +13075,11 @@ exports[`Storyshots Generics / Select with autocomplete can load more 1`] = `
       >
         <div
           class="SingleAutocompleteSelectFieldContent-content-id"
-          data-test="autocomplete-dropdown"
+          data-test-id="autocomplete-dropdown"
         >
           <div
             class="MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-selected-id MuiMenuItem-gutters-id MuiListItem-gutters-id MuiListItem-selected-id"
-            data-test-id="singleautocomplete-select-option"
+            data-test-id="single-autocomplete-select-option"
             data-test-type="option"
             data-test-value="AF"
             role="menuitem"
@@ -13141,7 +13089,7 @@ exports[`Storyshots Generics / Select with autocomplete can load more 1`] = `
           </div>
           <div
             class="MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id"
-            data-test-id="singleautocomplete-select-option"
+            data-test-id="single-autocomplete-select-option"
             data-test-type="option"
             data-test-value="AX"
             role="menuitem"
@@ -13151,7 +13099,7 @@ exports[`Storyshots Generics / Select with autocomplete can load more 1`] = `
           </div>
           <div
             class="MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id"
-            data-test-id="singleautocomplete-select-option"
+            data-test-id="single-autocomplete-select-option"
             data-test-type="option"
             data-test-value="AL"
             role="menuitem"
@@ -13161,7 +13109,7 @@ exports[`Storyshots Generics / Select with autocomplete can load more 1`] = `
           </div>
           <div
             class="MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id"
-            data-test-id="singleautocomplete-select-option"
+            data-test-id="single-autocomplete-select-option"
             data-test-type="option"
             data-test-value="DZ"
             role="menuitem"
@@ -13171,7 +13119,7 @@ exports[`Storyshots Generics / Select with autocomplete can load more 1`] = `
           </div>
           <div
             class="MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id"
-            data-test-id="singleautocomplete-select-option"
+            data-test-id="single-autocomplete-select-option"
             data-test-type="option"
             data-test-value="AS"
             role="menuitem"
@@ -13181,7 +13129,7 @@ exports[`Storyshots Generics / Select with autocomplete can load more 1`] = `
           </div>
           <div
             class="MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id"
-            data-test-id="singleautocomplete-select-option"
+            data-test-id="single-autocomplete-select-option"
             data-test-type="option"
             data-test-value="AD"
             role="menuitem"
@@ -13191,7 +13139,7 @@ exports[`Storyshots Generics / Select with autocomplete can load more 1`] = `
           </div>
           <div
             class="MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id"
-            data-test-id="singleautocomplete-select-option"
+            data-test-id="single-autocomplete-select-option"
             data-test-type="option"
             data-test-value="AO"
             role="menuitem"
@@ -13201,7 +13149,7 @@ exports[`Storyshots Generics / Select with autocomplete can load more 1`] = `
           </div>
           <div
             class="MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id"
-            data-test-id="singleautocomplete-select-option"
+            data-test-id="single-autocomplete-select-option"
             data-test-type="option"
             data-test-value="AI"
             role="menuitem"
@@ -13211,7 +13159,7 @@ exports[`Storyshots Generics / Select with autocomplete can load more 1`] = `
           </div>
           <div
             class="MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id"
-            data-test-id="singleautocomplete-select-option"
+            data-test-id="single-autocomplete-select-option"
             data-test-type="option"
             data-test-value="AQ"
             role="menuitem"
@@ -13221,7 +13169,7 @@ exports[`Storyshots Generics / Select with autocomplete can load more 1`] = `
           </div>
           <div
             class="MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id"
-            data-test-id="singleautocomplete-select-option"
+            data-test-id="single-autocomplete-select-option"
             data-test-type="option"
             data-test-value="AG"
             role="menuitem"
@@ -13285,11 +13233,11 @@ exports[`Storyshots Generics / Select with autocomplete default 1`] = `
       >
         <div
           class="SingleAutocompleteSelectFieldContent-content-id"
-          data-test="autocomplete-dropdown"
+          data-test-id="autocomplete-dropdown"
         >
           <div
             class="MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-selected-id MuiMenuItem-gutters-id MuiListItem-gutters-id MuiListItem-selected-id"
-            data-test-id="singleautocomplete-select-option"
+            data-test-id="single-autocomplete-select-option"
             data-test-type="option"
             data-test-value="AF"
             role="menuitem"
@@ -13299,7 +13247,7 @@ exports[`Storyshots Generics / Select with autocomplete default 1`] = `
           </div>
           <div
             class="MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id"
-            data-test-id="singleautocomplete-select-option"
+            data-test-id="single-autocomplete-select-option"
             data-test-type="option"
             data-test-value="AX"
             role="menuitem"
@@ -13309,7 +13257,7 @@ exports[`Storyshots Generics / Select with autocomplete default 1`] = `
           </div>
           <div
             class="MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id"
-            data-test-id="singleautocomplete-select-option"
+            data-test-id="single-autocomplete-select-option"
             data-test-type="option"
             data-test-value="AL"
             role="menuitem"
@@ -13319,7 +13267,7 @@ exports[`Storyshots Generics / Select with autocomplete default 1`] = `
           </div>
           <div
             class="MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id"
-            data-test-id="singleautocomplete-select-option"
+            data-test-id="single-autocomplete-select-option"
             data-test-type="option"
             data-test-value="DZ"
             role="menuitem"
@@ -13329,7 +13277,7 @@ exports[`Storyshots Generics / Select with autocomplete default 1`] = `
           </div>
           <div
             class="MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id"
-            data-test-id="singleautocomplete-select-option"
+            data-test-id="single-autocomplete-select-option"
             data-test-type="option"
             data-test-value="AS"
             role="menuitem"
@@ -13339,7 +13287,7 @@ exports[`Storyshots Generics / Select with autocomplete default 1`] = `
           </div>
           <div
             class="MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id"
-            data-test-id="singleautocomplete-select-option"
+            data-test-id="single-autocomplete-select-option"
             data-test-type="option"
             data-test-value="AD"
             role="menuitem"
@@ -13349,7 +13297,7 @@ exports[`Storyshots Generics / Select with autocomplete default 1`] = `
           </div>
           <div
             class="MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id"
-            data-test-id="singleautocomplete-select-option"
+            data-test-id="single-autocomplete-select-option"
             data-test-type="option"
             data-test-value="AO"
             role="menuitem"
@@ -13359,7 +13307,7 @@ exports[`Storyshots Generics / Select with autocomplete default 1`] = `
           </div>
           <div
             class="MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id"
-            data-test-id="singleautocomplete-select-option"
+            data-test-id="single-autocomplete-select-option"
             data-test-type="option"
             data-test-value="AI"
             role="menuitem"
@@ -13369,7 +13317,7 @@ exports[`Storyshots Generics / Select with autocomplete default 1`] = `
           </div>
           <div
             class="MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id"
-            data-test-id="singleautocomplete-select-option"
+            data-test-id="single-autocomplete-select-option"
             data-test-type="option"
             data-test-value="AQ"
             role="menuitem"
@@ -13379,7 +13327,7 @@ exports[`Storyshots Generics / Select with autocomplete default 1`] = `
           </div>
           <div
             class="MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id"
-            data-test-id="singleautocomplete-select-option"
+            data-test-id="single-autocomplete-select-option"
             data-test-type="option"
             data-test-value="AG"
             role="menuitem"
@@ -13947,11 +13895,11 @@ exports[`Storyshots Generics / Select with autocomplete no data 1`] = `
       >
         <div
           class="SingleAutocompleteSelectFieldContent-content-id"
-          data-test="autocomplete-dropdown"
+          data-test-id="autocomplete-dropdown"
         >
           <div
             class="MuiListItem-root-id MuiMenuItem-root-id MuiMenuItem-gutters-id MuiListItem-gutters-id MuiListItem-disabled-id"
-            data-test="singleautocomplete-select-no-options"
+            data-test-id="single-autocomplete-select-no-options"
             disabled=""
             role="menuitem"
           >
@@ -13980,11 +13928,11 @@ exports[`Storyshots Generics / Select with autocomplete with add 1`] = `
       >
         <div
           class="SingleAutocompleteSelectFieldContent-content-id"
-          data-test="autocomplete-dropdown"
+          data-test-id="autocomplete-dropdown"
         >
           <div
             class="MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id"
-            data-test-id="singleautocomplete-select-option-add"
+            data-test-id="single-autocomplete-select-option-add"
             data-test-type="add"
             role="menuitem"
             tabindex="-1"
@@ -14010,7 +13958,7 @@ exports[`Storyshots Generics / Select with autocomplete with add 1`] = `
           />
           <div
             class="MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-selected-id MuiMenuItem-gutters-id MuiListItem-gutters-id MuiListItem-selected-id"
-            data-test-id="singleautocomplete-select-option"
+            data-test-id="single-autocomplete-select-option"
             data-test-type="option"
             data-test-value="AF"
             role="menuitem"
@@ -14020,7 +13968,7 @@ exports[`Storyshots Generics / Select with autocomplete with add 1`] = `
           </div>
           <div
             class="MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id"
-            data-test-id="singleautocomplete-select-option"
+            data-test-id="single-autocomplete-select-option"
             data-test-type="option"
             data-test-value="AX"
             role="menuitem"
@@ -14030,7 +13978,7 @@ exports[`Storyshots Generics / Select with autocomplete with add 1`] = `
           </div>
           <div
             class="MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id"
-            data-test-id="singleautocomplete-select-option"
+            data-test-id="single-autocomplete-select-option"
             data-test-type="option"
             data-test-value="AL"
             role="menuitem"
@@ -14040,7 +13988,7 @@ exports[`Storyshots Generics / Select with autocomplete with add 1`] = `
           </div>
           <div
             class="MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id"
-            data-test-id="singleautocomplete-select-option"
+            data-test-id="single-autocomplete-select-option"
             data-test-type="option"
             data-test-value="DZ"
             role="menuitem"
@@ -14050,7 +13998,7 @@ exports[`Storyshots Generics / Select with autocomplete with add 1`] = `
           </div>
           <div
             class="MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id"
-            data-test-id="singleautocomplete-select-option"
+            data-test-id="single-autocomplete-select-option"
             data-test-type="option"
             data-test-value="AS"
             role="menuitem"
@@ -14060,7 +14008,7 @@ exports[`Storyshots Generics / Select with autocomplete with add 1`] = `
           </div>
           <div
             class="MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id"
-            data-test-id="singleautocomplete-select-option"
+            data-test-id="single-autocomplete-select-option"
             data-test-type="option"
             data-test-value="AD"
             role="menuitem"
@@ -14070,7 +14018,7 @@ exports[`Storyshots Generics / Select with autocomplete with add 1`] = `
           </div>
           <div
             class="MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id"
-            data-test-id="singleautocomplete-select-option"
+            data-test-id="single-autocomplete-select-option"
             data-test-type="option"
             data-test-value="AO"
             role="menuitem"
@@ -14080,7 +14028,7 @@ exports[`Storyshots Generics / Select with autocomplete with add 1`] = `
           </div>
           <div
             class="MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id"
-            data-test-id="singleautocomplete-select-option"
+            data-test-id="single-autocomplete-select-option"
             data-test-type="option"
             data-test-value="AI"
             role="menuitem"
@@ -14090,7 +14038,7 @@ exports[`Storyshots Generics / Select with autocomplete with add 1`] = `
           </div>
           <div
             class="MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id"
-            data-test-id="singleautocomplete-select-option"
+            data-test-id="single-autocomplete-select-option"
             data-test-type="option"
             data-test-value="AQ"
             role="menuitem"
@@ -14100,7 +14048,7 @@ exports[`Storyshots Generics / Select with autocomplete with add 1`] = `
           </div>
           <div
             class="MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id"
-            data-test-id="singleautocomplete-select-option"
+            data-test-id="single-autocomplete-select-option"
             data-test-type="option"
             data-test-value="AG"
             role="menuitem"
@@ -14728,7 +14676,7 @@ exports[`Storyshots Generics / Sortable chip default 1`] = `
           <svg
             aria-hidden="true"
             class="MuiSvgIcon-root-id SortableHandle-drag-id SortableChip-sortableHandle-id"
-            data-test="button-drag-handle"
+            data-test-id="button-drag-handle"
             focusable="false"
             viewBox="0 0 24 24"
           >
@@ -14741,7 +14689,7 @@ exports[`Storyshots Generics / Sortable chip default 1`] = `
           </svg>
           <div
             class="MuiTypography-root-id MuiTypography-body1-id"
-            data-test="chip-label"
+            data-test-id="chip-label"
           >
             Lorem Ipsum
           </div>
@@ -14772,7 +14720,7 @@ exports[`Storyshots Generics / Sortable chip with x 1`] = `
           <svg
             aria-hidden="true"
             class="MuiSvgIcon-root-id SortableHandle-drag-id SortableChip-sortableHandle-id"
-            data-test="button-drag-handle"
+            data-test-id="button-drag-handle"
             focusable="false"
             viewBox="0 0 24 24"
           >
@@ -14785,14 +14733,14 @@ exports[`Storyshots Generics / Sortable chip with x 1`] = `
           </svg>
           <div
             class="MuiTypography-root-id MuiTypography-body1-id"
-            data-test="chip-label"
+            data-test-id="chip-label"
           >
             Lorem Ipsum
           </div>
           <svg
             aria-hidden="true"
             class="MuiSvgIcon-root-id SortableChip-closeIcon-id"
-            data-test="button-close"
+            data-test-id="button-close"
             focusable="false"
             viewBox="0 0 24 24"
           >
@@ -14828,7 +14776,7 @@ exports[`Storyshots Generics / Sortable chips field default 1`] = `
             <svg
               aria-hidden="true"
               class="MuiSvgIcon-root-id SortableHandle-drag-id SortableChip-sortableHandle-id"
-              data-test="button-drag-handle"
+              data-test-id="button-drag-handle"
               focusable="false"
               viewBox="0 0 24 24"
             >
@@ -14841,14 +14789,14 @@ exports[`Storyshots Generics / Sortable chips field default 1`] = `
             </svg>
             <div
               class="MuiTypography-root-id MuiTypography-body1-id"
-              data-test="chip-label"
+              data-test-id="chip-label"
             >
               Item 1
             </div>
             <svg
               aria-hidden="true"
               class="MuiSvgIcon-root-id SortableChip-closeIcon-id"
-              data-test="button-close"
+              data-test-id="button-close"
               focusable="false"
               viewBox="0 0 24 24"
             >
@@ -14867,7 +14815,7 @@ exports[`Storyshots Generics / Sortable chips field default 1`] = `
             <svg
               aria-hidden="true"
               class="MuiSvgIcon-root-id SortableHandle-drag-id SortableChip-sortableHandle-id"
-              data-test="button-drag-handle"
+              data-test-id="button-drag-handle"
               focusable="false"
               viewBox="0 0 24 24"
             >
@@ -14880,14 +14828,14 @@ exports[`Storyshots Generics / Sortable chips field default 1`] = `
             </svg>
             <div
               class="MuiTypography-root-id MuiTypography-body1-id"
-              data-test="chip-label"
+              data-test-id="chip-label"
             >
               Item 2
             </div>
             <svg
               aria-hidden="true"
               class="MuiSvgIcon-root-id SortableChip-closeIcon-id"
-              data-test="button-close"
+              data-test-id="button-close"
               focusable="false"
               viewBox="0 0 24 24"
             >
@@ -14906,7 +14854,7 @@ exports[`Storyshots Generics / Sortable chips field default 1`] = `
             <svg
               aria-hidden="true"
               class="MuiSvgIcon-root-id SortableHandle-drag-id SortableChip-sortableHandle-id"
-              data-test="button-drag-handle"
+              data-test-id="button-drag-handle"
               focusable="false"
               viewBox="0 0 24 24"
             >
@@ -14919,14 +14867,14 @@ exports[`Storyshots Generics / Sortable chips field default 1`] = `
             </svg>
             <div
               class="MuiTypography-root-id MuiTypography-body1-id"
-              data-test="chip-label"
+              data-test-id="chip-label"
             >
               Item 3
             </div>
             <svg
               aria-hidden="true"
               class="MuiSvgIcon-root-id SortableChip-closeIcon-id"
-              data-test="button-close"
+              data-test-id="button-close"
               focusable="false"
               viewBox="0 0 24 24"
             >
@@ -14945,7 +14893,7 @@ exports[`Storyshots Generics / Sortable chips field default 1`] = `
             <svg
               aria-hidden="true"
               class="MuiSvgIcon-root-id SortableHandle-drag-id SortableChip-sortableHandle-id"
-              data-test="button-drag-handle"
+              data-test-id="button-drag-handle"
               focusable="false"
               viewBox="0 0 24 24"
             >
@@ -14958,14 +14906,14 @@ exports[`Storyshots Generics / Sortable chips field default 1`] = `
             </svg>
             <div
               class="MuiTypography-root-id MuiTypography-body1-id"
-              data-test="chip-label"
+              data-test-id="chip-label"
             >
               Item 4
             </div>
             <svg
               aria-hidden="true"
               class="MuiSvgIcon-root-id SortableChip-closeIcon-id"
-              data-test="button-close"
+              data-test-id="button-close"
               focusable="false"
               viewBox="0 0 24 24"
             >
@@ -14984,7 +14932,7 @@ exports[`Storyshots Generics / Sortable chips field default 1`] = `
             <svg
               aria-hidden="true"
               class="MuiSvgIcon-root-id SortableHandle-drag-id SortableChip-sortableHandle-id"
-              data-test="button-drag-handle"
+              data-test-id="button-drag-handle"
               focusable="false"
               viewBox="0 0 24 24"
             >
@@ -14997,14 +14945,14 @@ exports[`Storyshots Generics / Sortable chips field default 1`] = `
             </svg>
             <div
               class="MuiTypography-root-id MuiTypography-body1-id"
-              data-test="chip-label"
+              data-test-id="chip-label"
             >
               Item 5
             </div>
             <svg
               aria-hidden="true"
               class="MuiSvgIcon-root-id SortableChip-closeIcon-id"
-              data-test="button-close"
+              data-test-id="button-close"
               focusable="false"
               viewBox="0 0 24 24"
             >
@@ -15023,7 +14971,7 @@ exports[`Storyshots Generics / Sortable chips field default 1`] = `
             <svg
               aria-hidden="true"
               class="MuiSvgIcon-root-id SortableHandle-drag-id SortableChip-sortableHandle-id"
-              data-test="button-drag-handle"
+              data-test-id="button-drag-handle"
               focusable="false"
               viewBox="0 0 24 24"
             >
@@ -15036,14 +14984,14 @@ exports[`Storyshots Generics / Sortable chips field default 1`] = `
             </svg>
             <div
               class="MuiTypography-root-id MuiTypography-body1-id"
-              data-test="chip-label"
+              data-test-id="chip-label"
             >
               Item 6
             </div>
             <svg
               aria-hidden="true"
               class="MuiSvgIcon-root-id SortableChip-closeIcon-id"
-              data-test="button-close"
+              data-test-id="button-close"
               focusable="false"
               viewBox="0 0 24 24"
             >
@@ -15104,7 +15052,7 @@ exports[`Storyshots Generics / Sortable chips field with error 1`] = `
             <svg
               aria-hidden="true"
               class="MuiSvgIcon-root-id SortableHandle-drag-id SortableChip-sortableHandle-id"
-              data-test="button-drag-handle"
+              data-test-id="button-drag-handle"
               focusable="false"
               viewBox="0 0 24 24"
             >
@@ -15117,14 +15065,14 @@ exports[`Storyshots Generics / Sortable chips field with error 1`] = `
             </svg>
             <div
               class="MuiTypography-root-id MuiTypography-body1-id"
-              data-test="chip-label"
+              data-test-id="chip-label"
             >
               Item 1
             </div>
             <svg
               aria-hidden="true"
               class="MuiSvgIcon-root-id SortableChip-closeIcon-id"
-              data-test="button-close"
+              data-test-id="button-close"
               focusable="false"
               viewBox="0 0 24 24"
             >
@@ -15143,7 +15091,7 @@ exports[`Storyshots Generics / Sortable chips field with error 1`] = `
             <svg
               aria-hidden="true"
               class="MuiSvgIcon-root-id SortableHandle-drag-id SortableChip-sortableHandle-id"
-              data-test="button-drag-handle"
+              data-test-id="button-drag-handle"
               focusable="false"
               viewBox="0 0 24 24"
             >
@@ -15156,14 +15104,14 @@ exports[`Storyshots Generics / Sortable chips field with error 1`] = `
             </svg>
             <div
               class="MuiTypography-root-id MuiTypography-body1-id"
-              data-test="chip-label"
+              data-test-id="chip-label"
             >
               Item 2
             </div>
             <svg
               aria-hidden="true"
               class="MuiSvgIcon-root-id SortableChip-closeIcon-id"
-              data-test="button-close"
+              data-test-id="button-close"
               focusable="false"
               viewBox="0 0 24 24"
             >
@@ -15182,7 +15130,7 @@ exports[`Storyshots Generics / Sortable chips field with error 1`] = `
             <svg
               aria-hidden="true"
               class="MuiSvgIcon-root-id SortableHandle-drag-id SortableChip-sortableHandle-id"
-              data-test="button-drag-handle"
+              data-test-id="button-drag-handle"
               focusable="false"
               viewBox="0 0 24 24"
             >
@@ -15195,14 +15143,14 @@ exports[`Storyshots Generics / Sortable chips field with error 1`] = `
             </svg>
             <div
               class="MuiTypography-root-id MuiTypography-body1-id"
-              data-test="chip-label"
+              data-test-id="chip-label"
             >
               Item 3
             </div>
             <svg
               aria-hidden="true"
               class="MuiSvgIcon-root-id SortableChip-closeIcon-id"
-              data-test="button-close"
+              data-test-id="button-close"
               focusable="false"
               viewBox="0 0 24 24"
             >
@@ -15221,7 +15169,7 @@ exports[`Storyshots Generics / Sortable chips field with error 1`] = `
             <svg
               aria-hidden="true"
               class="MuiSvgIcon-root-id SortableHandle-drag-id SortableChip-sortableHandle-id"
-              data-test="button-drag-handle"
+              data-test-id="button-drag-handle"
               focusable="false"
               viewBox="0 0 24 24"
             >
@@ -15234,14 +15182,14 @@ exports[`Storyshots Generics / Sortable chips field with error 1`] = `
             </svg>
             <div
               class="MuiTypography-root-id MuiTypography-body1-id"
-              data-test="chip-label"
+              data-test-id="chip-label"
             >
               Item 4
             </div>
             <svg
               aria-hidden="true"
               class="MuiSvgIcon-root-id SortableChip-closeIcon-id"
-              data-test="button-close"
+              data-test-id="button-close"
               focusable="false"
               viewBox="0 0 24 24"
             >
@@ -15260,7 +15208,7 @@ exports[`Storyshots Generics / Sortable chips field with error 1`] = `
             <svg
               aria-hidden="true"
               class="MuiSvgIcon-root-id SortableHandle-drag-id SortableChip-sortableHandle-id"
-              data-test="button-drag-handle"
+              data-test-id="button-drag-handle"
               focusable="false"
               viewBox="0 0 24 24"
             >
@@ -15273,14 +15221,14 @@ exports[`Storyshots Generics / Sortable chips field with error 1`] = `
             </svg>
             <div
               class="MuiTypography-root-id MuiTypography-body1-id"
-              data-test="chip-label"
+              data-test-id="chip-label"
             >
               Item 5
             </div>
             <svg
               aria-hidden="true"
               class="MuiSvgIcon-root-id SortableChip-closeIcon-id"
-              data-test="button-close"
+              data-test-id="button-close"
               focusable="false"
               viewBox="0 0 24 24"
             >
@@ -15299,7 +15247,7 @@ exports[`Storyshots Generics / Sortable chips field with error 1`] = `
             <svg
               aria-hidden="true"
               class="MuiSvgIcon-root-id SortableHandle-drag-id SortableChip-sortableHandle-id"
-              data-test="button-drag-handle"
+              data-test-id="button-drag-handle"
               focusable="false"
               viewBox="0 0 24 24"
             >
@@ -15312,14 +15260,14 @@ exports[`Storyshots Generics / Sortable chips field with error 1`] = `
             </svg>
             <div
               class="MuiTypography-root-id MuiTypography-body1-id"
-              data-test="chip-label"
+              data-test-id="chip-label"
             >
               Item 6
             </div>
             <svg
               aria-hidden="true"
               class="MuiSvgIcon-root-id SortableChip-closeIcon-id"
-              data-test="button-close"
+              data-test-id="button-close"
               focusable="false"
               viewBox="0 0 24 24"
             >
@@ -20306,7 +20254,7 @@ exports[`Storyshots Shipping / ShippingMethodProducts default 1`] = `
             </td>
             <td
               class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ShippingMethodProducts-colName-id"
-              data-test-id="tableCellAvatar"
+              data-test-id="table-cell-avatar"
               thumbnail=""
             >
               <div
@@ -20467,8 +20415,7 @@ exports[`Storyshots Shipping / ShippingZoneRatesCreatePage page create price 1`]
               />
               <div
                 class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-                data-test="richTextEditor"
-                data-test-id="description"
+                data-test-id="rich-text-editor-description"
               >
                 <label
                   class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-focused-id MuiInputLabel-focused-id"
@@ -20960,7 +20907,7 @@ exports[`Storyshots Shipping / ShippingZoneRatesCreatePage page create price 1`]
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                  data-test="add-postal-code-range"
+                  data-test-id="add-postal-code-range"
                   tabindex="0"
                   type="button"
                 >
@@ -21166,8 +21113,7 @@ exports[`Storyshots Shipping / ShippingZoneRatesCreatePage page create price 1`]
                     >
                       <button
                         class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
-                        data-test="delete-postal-code"
-                        data-test-id="1"
+                        data-test-id="delete-postal-code-1"
                         tabindex="0"
                         type="button"
                       >
@@ -21204,8 +21150,7 @@ exports[`Storyshots Shipping / ShippingZoneRatesCreatePage page create price 1`]
                     >
                       <button
                         class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
-                        data-test="delete-postal-code"
-                        data-test-id="1"
+                        data-test-id="delete-postal-code-1"
                         tabindex="0"
                         type="button"
                       >
@@ -21380,8 +21325,7 @@ exports[`Storyshots Shipping / ShippingZoneRatesCreatePage page create weight 1`
               />
               <div
                 class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-                data-test="richTextEditor"
-                data-test-id="description"
+                data-test-id="rich-text-editor-description"
               >
                 <label
                   class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-focused-id MuiInputLabel-focused-id"
@@ -21867,7 +21811,7 @@ exports[`Storyshots Shipping / ShippingZoneRatesCreatePage page create weight 1`
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                  data-test="add-postal-code-range"
+                  data-test-id="add-postal-code-range"
                   tabindex="0"
                   type="button"
                 >
@@ -22073,8 +22017,7 @@ exports[`Storyshots Shipping / ShippingZoneRatesCreatePage page create weight 1`
                     >
                       <button
                         class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
-                        data-test="delete-postal-code"
-                        data-test-id="1"
+                        data-test-id="delete-postal-code-1"
                         tabindex="0"
                         type="button"
                       >
@@ -22111,8 +22054,7 @@ exports[`Storyshots Shipping / ShippingZoneRatesCreatePage page create weight 1`
                     >
                       <button
                         class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
-                        data-test="delete-postal-code"
-                        data-test-id="1"
+                        data-test-id="delete-postal-code-1"
                         tabindex="0"
                         type="button"
                       >
@@ -22304,8 +22246,7 @@ exports[`Storyshots Shipping / ShippingZoneRatesCreatePage page loading 1`] = `
               />
               <div
                 class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-                data-test="richTextEditor"
-                data-test-id="description"
+                data-test-id="rich-text-editor-description"
               >
                 <label
                   class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiFormLabel-focused-id MuiInputLabel-focused-id"
@@ -22804,7 +22745,7 @@ exports[`Storyshots Shipping / ShippingZoneRatesCreatePage page loading 1`] = `
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                  data-test="add-postal-code-range"
+                  data-test-id="add-postal-code-range"
                   tabindex="0"
                   type="button"
                 >
@@ -23010,8 +22951,7 @@ exports[`Storyshots Shipping / ShippingZoneRatesCreatePage page loading 1`] = `
                     >
                       <button
                         class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                        data-test="delete-postal-code"
-                        data-test-id="1"
+                        data-test-id="delete-postal-code-1"
                         disabled=""
                         tabindex="-1"
                         type="button"
@@ -23049,8 +22989,7 @@ exports[`Storyshots Shipping / ShippingZoneRatesCreatePage page loading 1`] = `
                     >
                       <button
                         class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
-                        data-test="delete-postal-code"
-                        data-test-id="1"
+                        data-test-id="delete-postal-code-1"
                         disabled=""
                         tabindex="-1"
                         type="button"
@@ -23658,7 +23597,7 @@ exports[`Storyshots Shipping zones details / Settings Card default 1`] = `
               </div>
               <button
                 class="MuiButtonBase-root-id IconButton-secondary-id MultiAutocompleteSelectField-chipClose-id"
-                data-test-id="warehousesRemove"
+                data-test-id="warehouses-remove"
                 tabindex="0"
                 type="button"
               >
@@ -23688,7 +23627,7 @@ exports[`Storyshots Shipping zones details / Settings Card default 1`] = `
               </div>
               <button
                 class="MuiButtonBase-root-id IconButton-secondary-id MultiAutocompleteSelectField-chipClose-id"
-                data-test-id="warehousesRemove"
+                data-test-id="warehouses-remove"
                 tabindex="0"
                 type="button"
               >
@@ -24716,7 +24655,7 @@ exports[`Storyshots Views / Apps / Apps list default 1`] = `
         >
           <button
             class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-            data-test-id="createApp"
+            data-test-id="create-app"
             tabindex="0"
             type="button"
           >
@@ -24982,7 +24921,7 @@ exports[`Storyshots Views / Apps / Apps list loading 1`] = `
         >
           <button
             class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-            data-test-id="createApp"
+            data-test-id="create-app"
             tabindex="0"
             type="button"
           >
@@ -25222,7 +25161,7 @@ exports[`Storyshots Views / Apps / Apps list no data 1`] = `
         >
           <button
             class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-            data-test-id="createApp"
+            data-test-id="create-app"
             tabindex="0"
             type="button"
           >
@@ -28174,7 +28113,7 @@ exports[`Storyshots Views / Attributes / Attribute details create 1`] = `
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                  data-test-id="assignValueButton"
+                  data-test-id="assign-value-button"
                   tabindex="0"
                   type="button"
                 >
@@ -28402,8 +28341,8 @@ exports[`Storyshots Views / Attributes / Attribute details create 1`] = `
           />
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="metadataEditor"
             data-test-expanded="true"
+            data-test-id="metadata-editor"
             data-test-is-private="false"
           >
             <div
@@ -28418,7 +28357,7 @@ exports[`Storyshots Views / Attributes / Attribute details create 1`] = `
                   Metadata
                   <button
                     class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test="expand"
+                    data-test-id="expand"
                     tabindex="0"
                     type="button"
                   >
@@ -28464,7 +28403,7 @@ exports[`Storyshots Views / Attributes / Attribute details create 1`] = `
             >
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-                data-test="addField"
+                data-test-id="add-field"
                 tabindex="0"
                 type="button"
               >
@@ -28481,8 +28420,8 @@ exports[`Storyshots Views / Attributes / Attribute details create 1`] = `
           />
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="metadataEditor"
             data-test-expanded="true"
+            data-test-id="metadata-editor"
             data-test-is-private="true"
           >
             <div
@@ -28497,7 +28436,7 @@ exports[`Storyshots Views / Attributes / Attribute details create 1`] = `
                   Private Metadata
                   <button
                     class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test="expand"
+                    data-test-id="expand"
                     tabindex="0"
                     type="button"
                   >
@@ -28543,7 +28482,7 @@ exports[`Storyshots Views / Attributes / Attribute details create 1`] = `
             >
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-                data-test="addField"
+                data-test-id="add-field"
                 tabindex="0"
                 type="button"
               >
@@ -29261,7 +29200,7 @@ exports[`Storyshots Views / Attributes / Attribute details default 1`] = `
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                  data-test-id="assignValueButton"
+                  data-test-id="assign-value-button"
                   tabindex="0"
                   type="button"
                 >
@@ -29489,8 +29428,8 @@ exports[`Storyshots Views / Attributes / Attribute details default 1`] = `
           />
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="metadataEditor"
             data-test-expanded="true"
+            data-test-id="metadata-editor"
             data-test-is-private="false"
           >
             <div
@@ -29505,7 +29444,7 @@ exports[`Storyshots Views / Attributes / Attribute details default 1`] = `
                   Metadata
                   <button
                     class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test="expand"
+                    data-test-id="expand"
                     tabindex="0"
                     type="button"
                   >
@@ -29577,7 +29516,7 @@ exports[`Storyshots Views / Attributes / Attribute details default 1`] = `
               >
                 <tr
                   class="MuiTableRow-root-id MuiTableRow-hover-id"
-                  data-test="field"
+                  data-test-id="field"
                 >
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colName-id"
@@ -29658,8 +29597,7 @@ exports[`Storyshots Views / Attributes / Attribute details default 1`] = `
                   >
                     <button
                       class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                      data-test="deleteField"
-                      data-test-id="0"
+                      data-test-id="delete-field-0"
                       tabindex="0"
                       type="button"
                     >
@@ -29686,7 +29624,7 @@ exports[`Storyshots Views / Attributes / Attribute details default 1`] = `
             >
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-                data-test="addField"
+                data-test-id="add-field"
                 tabindex="0"
                 type="button"
               >
@@ -29703,8 +29641,8 @@ exports[`Storyshots Views / Attributes / Attribute details default 1`] = `
           />
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="metadataEditor"
             data-test-expanded="true"
+            data-test-id="metadata-editor"
             data-test-is-private="true"
           >
             <div
@@ -29719,7 +29657,7 @@ exports[`Storyshots Views / Attributes / Attribute details default 1`] = `
                   Private Metadata
                   <button
                     class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test="expand"
+                    data-test-id="expand"
                     tabindex="0"
                     type="button"
                   >
@@ -29765,7 +29703,7 @@ exports[`Storyshots Views / Attributes / Attribute details default 1`] = `
             >
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-                data-test="addField"
+                data-test-id="add-field"
                 tabindex="0"
                 type="button"
               >
@@ -30384,7 +30322,7 @@ exports[`Storyshots Views / Attributes / Attribute details form errors 1`] = `
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                  data-test-id="assignValueButton"
+                  data-test-id="assign-value-button"
                   tabindex="0"
                   type="button"
                 >
@@ -30612,8 +30550,8 @@ exports[`Storyshots Views / Attributes / Attribute details form errors 1`] = `
           />
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="metadataEditor"
             data-test-expanded="true"
+            data-test-id="metadata-editor"
             data-test-is-private="false"
           >
             <div
@@ -30628,7 +30566,7 @@ exports[`Storyshots Views / Attributes / Attribute details form errors 1`] = `
                   Metadata
                   <button
                     class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test="expand"
+                    data-test-id="expand"
                     tabindex="0"
                     type="button"
                   >
@@ -30700,7 +30638,7 @@ exports[`Storyshots Views / Attributes / Attribute details form errors 1`] = `
               >
                 <tr
                   class="MuiTableRow-root-id MuiTableRow-hover-id"
-                  data-test="field"
+                  data-test-id="field"
                 >
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colName-id"
@@ -30781,8 +30719,7 @@ exports[`Storyshots Views / Attributes / Attribute details form errors 1`] = `
                   >
                     <button
                       class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                      data-test="deleteField"
-                      data-test-id="0"
+                      data-test-id="delete-field-0"
                       tabindex="0"
                       type="button"
                     >
@@ -30809,7 +30746,7 @@ exports[`Storyshots Views / Attributes / Attribute details form errors 1`] = `
             >
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-                data-test="addField"
+                data-test-id="add-field"
                 tabindex="0"
                 type="button"
               >
@@ -30826,8 +30763,8 @@ exports[`Storyshots Views / Attributes / Attribute details form errors 1`] = `
           />
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="metadataEditor"
             data-test-expanded="true"
+            data-test-id="metadata-editor"
             data-test-is-private="true"
           >
             <div
@@ -30842,7 +30779,7 @@ exports[`Storyshots Views / Attributes / Attribute details form errors 1`] = `
                   Private Metadata
                   <button
                     class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test="expand"
+                    data-test-id="expand"
                     tabindex="0"
                     type="button"
                   >
@@ -30888,7 +30825,7 @@ exports[`Storyshots Views / Attributes / Attribute details form errors 1`] = `
             >
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-                data-test="addField"
+                data-test-id="add-field"
                 tabindex="0"
                 type="button"
               >
@@ -31506,7 +31443,7 @@ exports[`Storyshots Views / Attributes / Attribute details loading 1`] = `
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id MuiButton-disabled-id MuiButtonBase-disabled-id"
-                  data-test-id="assignValueButton"
+                  data-test-id="assign-value-button"
                   disabled=""
                   tabindex="-1"
                   type="button"
@@ -31692,8 +31629,8 @@ exports[`Storyshots Views / Attributes / Attribute details loading 1`] = `
           />
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="metadataEditor"
             data-test-expanded="true"
+            data-test-id="metadata-editor"
             data-test-is-private="false"
           >
             <div
@@ -31708,7 +31645,7 @@ exports[`Storyshots Views / Attributes / Attribute details loading 1`] = `
                   Metadata
                   <button
                     class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test="expand"
+                    data-test-id="expand"
                     tabindex="0"
                     type="button"
                   >
@@ -31753,8 +31690,8 @@ exports[`Storyshots Views / Attributes / Attribute details loading 1`] = `
           />
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="metadataEditor"
             data-test-expanded="true"
+            data-test-id="metadata-editor"
             data-test-is-private="true"
           >
             <div
@@ -31769,7 +31706,7 @@ exports[`Storyshots Views / Attributes / Attribute details loading 1`] = `
                   Private Metadata
                   <button
                     class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test="expand"
+                    data-test-id="expand"
                     tabindex="0"
                     type="button"
                   >
@@ -32431,7 +32368,7 @@ exports[`Storyshots Views / Attributes / Attribute details multiple select input
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                  data-test-id="assignValueButton"
+                  data-test-id="assign-value-button"
                   tabindex="0"
                   type="button"
                 >
@@ -32659,8 +32596,8 @@ exports[`Storyshots Views / Attributes / Attribute details multiple select input
           />
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="metadataEditor"
             data-test-expanded="true"
+            data-test-id="metadata-editor"
             data-test-is-private="false"
           >
             <div
@@ -32675,7 +32612,7 @@ exports[`Storyshots Views / Attributes / Attribute details multiple select input
                   Metadata
                   <button
                     class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test="expand"
+                    data-test-id="expand"
                     tabindex="0"
                     type="button"
                   >
@@ -32747,7 +32684,7 @@ exports[`Storyshots Views / Attributes / Attribute details multiple select input
               >
                 <tr
                   class="MuiTableRow-root-id MuiTableRow-hover-id"
-                  data-test="field"
+                  data-test-id="field"
                 >
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colName-id"
@@ -32828,8 +32765,7 @@ exports[`Storyshots Views / Attributes / Attribute details multiple select input
                   >
                     <button
                       class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                      data-test="deleteField"
-                      data-test-id="0"
+                      data-test-id="delete-field-0"
                       tabindex="0"
                       type="button"
                     >
@@ -32856,7 +32792,7 @@ exports[`Storyshots Views / Attributes / Attribute details multiple select input
             >
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-                data-test="addField"
+                data-test-id="add-field"
                 tabindex="0"
                 type="button"
               >
@@ -32873,8 +32809,8 @@ exports[`Storyshots Views / Attributes / Attribute details multiple select input
           />
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="metadataEditor"
             data-test-expanded="true"
+            data-test-id="metadata-editor"
             data-test-is-private="true"
           >
             <div
@@ -32889,7 +32825,7 @@ exports[`Storyshots Views / Attributes / Attribute details multiple select input
                   Private Metadata
                   <button
                     class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test="expand"
+                    data-test-id="expand"
                     tabindex="0"
                     type="button"
                   >
@@ -32935,7 +32871,7 @@ exports[`Storyshots Views / Attributes / Attribute details multiple select input
             >
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-                data-test="addField"
+                data-test-id="add-field"
                 tabindex="0"
                 type="button"
               >
@@ -33549,7 +33485,7 @@ exports[`Storyshots Views / Attributes / Attribute details no values 1`] = `
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                  data-test-id="assignValueButton"
+                  data-test-id="assign-value-button"
                   tabindex="0"
                   type="button"
                 >
@@ -33733,8 +33669,8 @@ exports[`Storyshots Views / Attributes / Attribute details no values 1`] = `
           />
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="metadataEditor"
             data-test-expanded="true"
+            data-test-id="metadata-editor"
             data-test-is-private="false"
           >
             <div
@@ -33749,7 +33685,7 @@ exports[`Storyshots Views / Attributes / Attribute details no values 1`] = `
                   Metadata
                   <button
                     class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test="expand"
+                    data-test-id="expand"
                     tabindex="0"
                     type="button"
                   >
@@ -33821,7 +33757,7 @@ exports[`Storyshots Views / Attributes / Attribute details no values 1`] = `
               >
                 <tr
                   class="MuiTableRow-root-id MuiTableRow-hover-id"
-                  data-test="field"
+                  data-test-id="field"
                 >
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colName-id"
@@ -33902,8 +33838,7 @@ exports[`Storyshots Views / Attributes / Attribute details no values 1`] = `
                   >
                     <button
                       class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                      data-test="deleteField"
-                      data-test-id="0"
+                      data-test-id="delete-field-0"
                       tabindex="0"
                       type="button"
                     >
@@ -33930,7 +33865,7 @@ exports[`Storyshots Views / Attributes / Attribute details no values 1`] = `
             >
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-                data-test="addField"
+                data-test-id="add-field"
                 tabindex="0"
                 type="button"
               >
@@ -33947,8 +33882,8 @@ exports[`Storyshots Views / Attributes / Attribute details no values 1`] = `
           />
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="metadataEditor"
             data-test-expanded="true"
+            data-test-id="metadata-editor"
             data-test-is-private="true"
           >
             <div
@@ -33963,7 +33898,7 @@ exports[`Storyshots Views / Attributes / Attribute details no values 1`] = `
                   Private Metadata
                   <button
                     class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test="expand"
+                    data-test-id="expand"
                     tabindex="0"
                     type="button"
                   >
@@ -34009,7 +33944,7 @@ exports[`Storyshots Views / Attributes / Attribute details no values 1`] = `
             >
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-                data-test="addField"
+                data-test-id="add-field"
                 tabindex="0"
                 type="button"
               >
@@ -34380,7 +34315,7 @@ exports[`Storyshots Views / Attributes / Attribute list default 1`] = `
         >
           <button
             class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
-            data-test-id="createAttributeButton"
+            data-test-id="create-attribute-button"
             tabindex="0"
             type="button"
           >
@@ -34453,7 +34388,7 @@ exports[`Storyshots Views / Attributes / Attribute list default 1`] = `
         </div>
         <div
           class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
-          data-test-id="searchInput"
+          data-test-id="search-input"
         >
           <div
             class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
@@ -34688,8 +34623,7 @@ exports[`Storyshots Views / Attributes / Attribute list default 1`] = `
           >
             <tr
               class="MuiTableRow-root-id AttributeList-link-id MuiTableRow-hover-id"
-              data-test="id"
-              data-test-id="UHJvZHVjdEF0dHJpYnV0ZTo5"
+              data-test-id="id-UHJvZHVjdEF0dHJpYnV0ZTo5"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -34730,33 +34664,33 @@ exports[`Storyshots Views / Attributes / Attribute list default 1`] = `
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colSlug-id"
-                data-test="slug"
+                data-test-id="slug"
               >
                 author
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colName-id"
-                data-test="name"
+                data-test-id="name"
               >
                 Author
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colVisible-id"
-                data-test="visible"
+                data-test-id="visible"
                 data-test-visible="true"
               >
                 Yes
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colSearchable-id"
-                data-test="searchable"
+                data-test-id="searchable"
                 data-test-searchable="true"
               >
                 Yes
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colFaceted-id"
-                data-test="use-in-faceted-search"
+                data-test-id="use-in-faceted-search"
                 data-test-use-in-faceted-search="false"
               >
                 No
@@ -34764,8 +34698,7 @@ exports[`Storyshots Views / Attributes / Attribute list default 1`] = `
             </tr>
             <tr
               class="MuiTableRow-root-id AttributeList-link-id MuiTableRow-hover-id"
-              data-test="id"
-              data-test-id="UHJvZHVjdEF0dHJpYnV0ZTo2"
+              data-test-id="id-UHJvZHVjdEF0dHJpYnV0ZTo2"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -34806,33 +34739,33 @@ exports[`Storyshots Views / Attributes / Attribute list default 1`] = `
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colSlug-id"
-                data-test="slug"
+                data-test-id="slug"
               >
                 box-size
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colName-id"
-                data-test="name"
+                data-test-id="name"
               >
                 Box Size
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colVisible-id"
-                data-test="visible"
+                data-test-id="visible"
                 data-test-visible="false"
               >
                 No
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colSearchable-id"
-                data-test="searchable"
+                data-test-id="searchable"
                 data-test-searchable="true"
               >
                 Yes
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colFaceted-id"
-                data-test="use-in-faceted-search"
+                data-test-id="use-in-faceted-search"
                 data-test-use-in-faceted-search="false"
               >
                 No
@@ -34840,8 +34773,7 @@ exports[`Storyshots Views / Attributes / Attribute list default 1`] = `
             </tr>
             <tr
               class="MuiTableRow-root-id AttributeList-link-id MuiTableRow-hover-id"
-              data-test="id"
-              data-test-id="UHJvZHVjdEF0dHJpYnV0ZToz"
+              data-test-id="id-UHJvZHVjdEF0dHJpYnV0ZToz"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -34882,33 +34814,33 @@ exports[`Storyshots Views / Attributes / Attribute list default 1`] = `
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colSlug-id"
-                data-test="slug"
+                data-test-id="slug"
               >
                 brand
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colName-id"
-                data-test="name"
+                data-test-id="name"
               >
                 Brand
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colVisible-id"
-                data-test="visible"
+                data-test-id="visible"
                 data-test-visible="false"
               >
                 No
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colSearchable-id"
-                data-test="searchable"
+                data-test-id="searchable"
                 data-test-searchable="false"
               >
                 No
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colFaceted-id"
-                data-test="use-in-faceted-search"
+                data-test-id="use-in-faceted-search"
                 data-test-use-in-faceted-search="true"
               >
                 Yes
@@ -34916,8 +34848,7 @@ exports[`Storyshots Views / Attributes / Attribute list default 1`] = `
             </tr>
             <tr
               class="MuiTableRow-root-id AttributeList-link-id MuiTableRow-hover-id"
-              data-test="id"
-              data-test-id="UHJvZHVjdEF0dHJpYnV0ZTo4"
+              data-test-id="id-UHJvZHVjdEF0dHJpYnV0ZTo4"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -34958,33 +34889,33 @@ exports[`Storyshots Views / Attributes / Attribute list default 1`] = `
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colSlug-id"
-                data-test="slug"
+                data-test-id="slug"
               >
                 candy-box-size
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colName-id"
-                data-test="name"
+                data-test-id="name"
               >
                 Candy Box Size
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colVisible-id"
-                data-test="visible"
+                data-test-id="visible"
                 data-test-visible="false"
               >
                 No
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colSearchable-id"
-                data-test="searchable"
+                data-test-id="searchable"
                 data-test-searchable="true"
               >
                 Yes
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colFaceted-id"
-                data-test="use-in-faceted-search"
+                data-test-id="use-in-faceted-search"
                 data-test-use-in-faceted-search="true"
               >
                 Yes
@@ -34992,8 +34923,7 @@ exports[`Storyshots Views / Attributes / Attribute list default 1`] = `
             </tr>
             <tr
               class="MuiTableRow-root-id AttributeList-link-id MuiTableRow-hover-id"
-              data-test="id"
-              data-test-id="UHJvZHVjdEF0dHJpYnV0ZTo1"
+              data-test-id="id-UHJvZHVjdEF0dHJpYnV0ZTo1"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -35034,33 +34964,33 @@ exports[`Storyshots Views / Attributes / Attribute list default 1`] = `
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colSlug-id"
-                data-test="slug"
+                data-test-id="slug"
               >
                 coffee-genre
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colName-id"
-                data-test="name"
+                data-test-id="name"
               >
                 Coffee Genre
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colVisible-id"
-                data-test="visible"
+                data-test-id="visible"
                 data-test-visible="true"
               >
                 Yes
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colSearchable-id"
-                data-test="searchable"
+                data-test-id="searchable"
                 data-test-searchable="true"
               >
                 Yes
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colFaceted-id"
-                data-test="use-in-faceted-search"
+                data-test-id="use-in-faceted-search"
                 data-test-use-in-faceted-search="true"
               >
                 Yes
@@ -35068,8 +34998,7 @@ exports[`Storyshots Views / Attributes / Attribute list default 1`] = `
             </tr>
             <tr
               class="MuiTableRow-root-id AttributeList-link-id MuiTableRow-hover-id"
-              data-test="id"
-              data-test-id="UHJvZHVjdEF0dHJpYnV0ZToy"
+              data-test-id="id-UHJvZHVjdEF0dHJpYnV0ZToy"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -35110,33 +35039,33 @@ exports[`Storyshots Views / Attributes / Attribute list default 1`] = `
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colSlug-id"
-                data-test="slug"
+                data-test-id="slug"
               >
                 collar
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colName-id"
-                data-test="name"
+                data-test-id="name"
               >
                 Collar
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colVisible-id"
-                data-test="visible"
+                data-test-id="visible"
                 data-test-visible="true"
               >
                 Yes
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colSearchable-id"
-                data-test="searchable"
+                data-test-id="searchable"
                 data-test-searchable="false"
               >
                 No
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colFaceted-id"
-                data-test="use-in-faceted-search"
+                data-test-id="use-in-faceted-search"
                 data-test-use-in-faceted-search="true"
               >
                 Yes
@@ -35144,8 +35073,7 @@ exports[`Storyshots Views / Attributes / Attribute list default 1`] = `
             </tr>
             <tr
               class="MuiTableRow-root-id AttributeList-link-id MuiTableRow-hover-id"
-              data-test="id"
-              data-test-id="UHJvZHVjdEF0dHJpYnV0ZTox"
+              data-test-id="id-UHJvZHVjdEF0dHJpYnV0ZTox"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -35186,33 +35114,33 @@ exports[`Storyshots Views / Attributes / Attribute list default 1`] = `
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colSlug-id"
-                data-test="slug"
+                data-test-id="slug"
               >
                 color
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colName-id"
-                data-test="name"
+                data-test-id="name"
               >
                 Color
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colVisible-id"
-                data-test="visible"
+                data-test-id="visible"
                 data-test-visible="true"
               >
                 Yes
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colSearchable-id"
-                data-test="searchable"
+                data-test-id="searchable"
                 data-test-searchable="false"
               >
                 No
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colFaceted-id"
-                data-test="use-in-faceted-search"
+                data-test-id="use-in-faceted-search"
                 data-test-use-in-faceted-search="false"
               >
                 No
@@ -35220,8 +35148,7 @@ exports[`Storyshots Views / Attributes / Attribute list default 1`] = `
             </tr>
             <tr
               class="MuiTableRow-root-id AttributeList-link-id MuiTableRow-hover-id"
-              data-test="id"
-              data-test-id="UHJvZHVjdEF0dHJpYnV0ZToxMg=="
+              data-test-id="id-UHJvZHVjdEF0dHJpYnV0ZToxMg=="
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -35262,33 +35189,33 @@ exports[`Storyshots Views / Attributes / Attribute list default 1`] = `
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colSlug-id"
-                data-test="slug"
+                data-test-id="slug"
               >
                 cover
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colName-id"
-                data-test="name"
+                data-test-id="name"
               >
                 Cover
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colVisible-id"
-                data-test="visible"
+                data-test-id="visible"
                 data-test-visible="false"
               >
                 No
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colSearchable-id"
-                data-test="searchable"
+                data-test-id="searchable"
                 data-test-searchable="true"
               >
                 Yes
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colFaceted-id"
-                data-test="use-in-faceted-search"
+                data-test-id="use-in-faceted-search"
                 data-test-use-in-faceted-search="false"
               >
                 No
@@ -35296,8 +35223,7 @@ exports[`Storyshots Views / Attributes / Attribute list default 1`] = `
             </tr>
             <tr
               class="MuiTableRow-root-id AttributeList-link-id MuiTableRow-hover-id"
-              data-test="id"
-              data-test-id="UHJvZHVjdEF0dHJpYnV0ZTo3"
+              data-test-id="id-UHJvZHVjdEF0dHJpYnV0ZTo3"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -35338,33 +35264,33 @@ exports[`Storyshots Views / Attributes / Attribute list default 1`] = `
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colSlug-id"
-                data-test="slug"
+                data-test-id="slug"
               >
                 flavor
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colName-id"
-                data-test="name"
+                data-test-id="name"
               >
                 Flavor
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colVisible-id"
-                data-test="visible"
+                data-test-id="visible"
                 data-test-visible="true"
               >
                 Yes
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colSearchable-id"
-                data-test="searchable"
+                data-test-id="searchable"
                 data-test-searchable="true"
               >
                 Yes
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colFaceted-id"
-                data-test="use-in-faceted-search"
+                data-test-id="use-in-faceted-search"
                 data-test-use-in-faceted-search="true"
               >
                 Yes
@@ -35372,8 +35298,7 @@ exports[`Storyshots Views / Attributes / Attribute list default 1`] = `
             </tr>
             <tr
               class="MuiTableRow-root-id AttributeList-link-id MuiTableRow-hover-id"
-              data-test="id"
-              data-test-id="UHJvZHVjdEF0dHJpYnV0ZToxMQ=="
+              data-test-id="id-UHJvZHVjdEF0dHJpYnV0ZToxMQ=="
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -35414,33 +35339,33 @@ exports[`Storyshots Views / Attributes / Attribute list default 1`] = `
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colSlug-id"
-                data-test="slug"
+                data-test-id="slug"
               >
                 language
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colName-id"
-                data-test="name"
+                data-test-id="name"
               >
                 Language
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colVisible-id"
-                data-test="visible"
+                data-test-id="visible"
                 data-test-visible="true"
               >
                 Yes
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colSearchable-id"
-                data-test="searchable"
+                data-test-id="searchable"
                 data-test-searchable="false"
               >
                 No
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colFaceted-id"
-                data-test="use-in-faceted-search"
+                data-test-id="use-in-faceted-search"
                 data-test-use-in-faceted-search="true"
               >
                 Yes
@@ -35448,8 +35373,7 @@ exports[`Storyshots Views / Attributes / Attribute list default 1`] = `
             </tr>
             <tr
               class="MuiTableRow-root-id AttributeList-link-id MuiTableRow-hover-id"
-              data-test="id"
-              data-test-id="UHJvZHVjdEF0dHJpYnV0ZToxMA=="
+              data-test-id="id-UHJvZHVjdEF0dHJpYnV0ZToxMA=="
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -35490,33 +35414,33 @@ exports[`Storyshots Views / Attributes / Attribute list default 1`] = `
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colSlug-id"
-                data-test="slug"
+                data-test-id="slug"
               >
                 publisher
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colName-id"
-                data-test="name"
+                data-test-id="name"
               >
                 Publisher
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colVisible-id"
-                data-test="visible"
+                data-test-id="visible"
                 data-test-visible="true"
               >
                 Yes
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colSearchable-id"
-                data-test="searchable"
+                data-test-id="searchable"
                 data-test-searchable="true"
               >
                 Yes
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colFaceted-id"
-                data-test="use-in-faceted-search"
+                data-test-id="use-in-faceted-search"
                 data-test-use-in-faceted-search="true"
               >
                 Yes
@@ -35524,8 +35448,7 @@ exports[`Storyshots Views / Attributes / Attribute list default 1`] = `
             </tr>
             <tr
               class="MuiTableRow-root-id AttributeList-link-id MuiTableRow-hover-id"
-              data-test="id"
-              data-test-id="UHJvZHVjdEF0dHJpYnV0ZTo0"
+              data-test-id="id-UHJvZHVjdEF0dHJpYnV0ZTo0"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -35566,33 +35489,33 @@ exports[`Storyshots Views / Attributes / Attribute list default 1`] = `
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colSlug-id"
-                data-test="slug"
+                data-test-id="slug"
               >
                 size
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colName-id"
-                data-test="name"
+                data-test-id="name"
               >
                 Size
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colVisible-id"
-                data-test="visible"
+                data-test-id="visible"
                 data-test-visible="true"
               >
                 Yes
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colSearchable-id"
-                data-test="searchable"
+                data-test-id="searchable"
                 data-test-searchable="true"
               >
                 Yes
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colFaceted-id"
-                data-test="use-in-faceted-search"
+                data-test-id="use-in-faceted-search"
                 data-test-use-in-faceted-search="true"
               >
                 Yes
@@ -35634,7 +35557,7 @@ exports[`Storyshots Views / Attributes / Attribute list loading 1`] = `
         >
           <button
             class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
-            data-test-id="createAttributeButton"
+            data-test-id="create-attribute-button"
             tabindex="0"
             type="button"
           >
@@ -35707,7 +35630,7 @@ exports[`Storyshots Views / Attributes / Attribute list loading 1`] = `
         </div>
         <div
           class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
-          data-test-id="searchInput"
+          data-test-id="search-input"
         >
           <div
             class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
@@ -35945,7 +35868,7 @@ exports[`Storyshots Views / Attributes / Attribute list loading 1`] = `
           >
             <tr
               class="MuiTableRow-root-id AttributeList-link-id"
-              data-test="id"
+              data-test-id="id-undefined"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -35988,7 +35911,7 @@ exports[`Storyshots Views / Attributes / Attribute list loading 1`] = `
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colSlug-id"
-                data-test="slug"
+                data-test-id="slug"
               >
                 <span
                   class="Skeleton-skeleton-id"
@@ -35999,7 +35922,7 @@ exports[`Storyshots Views / Attributes / Attribute list loading 1`] = `
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colName-id"
-                data-test="name"
+                data-test-id="name"
               >
                 <span
                   class="Skeleton-skeleton-id"
@@ -36010,7 +35933,7 @@ exports[`Storyshots Views / Attributes / Attribute list loading 1`] = `
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colVisible-id"
-                data-test="visible"
+                data-test-id="visible"
               >
                 <span
                   class="Skeleton-skeleton-id"
@@ -36021,7 +35944,7 @@ exports[`Storyshots Views / Attributes / Attribute list loading 1`] = `
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colSearchable-id"
-                data-test="searchable"
+                data-test-id="searchable"
               >
                 <span
                   class="Skeleton-skeleton-id"
@@ -36032,7 +35955,7 @@ exports[`Storyshots Views / Attributes / Attribute list loading 1`] = `
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colFaceted-id"
-                data-test="use-in-faceted-search"
+                data-test-id="use-in-faceted-search"
               >
                 <span
                   class="Skeleton-skeleton-id"
@@ -36078,7 +36001,7 @@ exports[`Storyshots Views / Attributes / Attribute list no data 1`] = `
         >
           <button
             class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
-            data-test-id="createAttributeButton"
+            data-test-id="create-attribute-button"
             tabindex="0"
             type="button"
           >
@@ -36151,7 +36074,7 @@ exports[`Storyshots Views / Attributes / Attribute list no data 1`] = `
         </div>
         <div
           class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
-          data-test-id="searchInput"
+          data-test-id="search-input"
         >
           <div
             class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
@@ -36398,7 +36321,7 @@ exports[`Storyshots Views / Authentication / Log in default 1`] = `
               autocomplete="username"
               autofocus=""
               class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-              data-test="email"
+              data-test-id="email"
               name="email"
               type="text"
               value=""
@@ -36439,7 +36362,7 @@ exports[`Storyshots Views / Authentication / Log in default 1`] = `
                 aria-invalid="false"
                 autocomplete="password"
                 class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                data-test="password"
+                data-test-id="password"
                 name="password"
                 type="password"
                 value=""
@@ -36480,6 +36403,7 @@ exports[`Storyshots Views / Authentication / Log in default 1`] = `
         </div>
         <a
           class="MuiTypography-root-id Login-link-id MuiTypography-body2-id"
+          data-test-id="reset-password-link"
         >
           Forgot password?
         </a>
@@ -36488,7 +36412,7 @@ exports[`Storyshots Views / Authentication / Log in default 1`] = `
         >
           <button
             class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id Login-loginButton-id MuiButton-containedPrimary-id"
-            data-test="submit"
+            data-test-id="submit"
             tabindex="0"
             type="submit"
           >
@@ -36518,7 +36442,7 @@ exports[`Storyshots Views / Authentication / Log in default 1`] = `
         />
         <button
           class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-fullWidth-id"
-          data-test="external-authentication"
+          data-test-id="external-authentication"
           tabindex="0"
           type="button"
         >
@@ -36568,7 +36492,7 @@ exports[`Storyshots Views / Authentication / Log in disabled 1`] = `
               autocomplete="username"
               autofocus=""
               class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
-              data-test="email"
+              data-test-id="email"
               disabled=""
               name="email"
               type="text"
@@ -36610,7 +36534,7 @@ exports[`Storyshots Views / Authentication / Log in disabled 1`] = `
                 aria-invalid="false"
                 autocomplete="password"
                 class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
-                data-test="password"
+                data-test-id="password"
                 disabled=""
                 name="password"
                 type="password"
@@ -36652,6 +36576,7 @@ exports[`Storyshots Views / Authentication / Log in disabled 1`] = `
         </div>
         <a
           class="MuiTypography-root-id Login-link-id MuiTypography-body2-id"
+          data-test-id="reset-password-link"
         >
           Forgot password?
         </a>
@@ -36660,7 +36585,7 @@ exports[`Storyshots Views / Authentication / Log in disabled 1`] = `
         >
           <button
             class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id Login-loginButton-id MuiButton-containedPrimary-id MuiButton-disabled-id MuiButtonBase-disabled-id"
-            data-test="submit"
+            data-test-id="submit"
             disabled=""
             tabindex="-1"
             type="submit"
@@ -36691,7 +36616,7 @@ exports[`Storyshots Views / Authentication / Log in disabled 1`] = `
         />
         <button
           class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-disabled-id MuiButton-fullWidth-id MuiButtonBase-disabled-id"
-          data-test="external-authentication"
+          data-test-id="external-authentication"
           disabled=""
           tabindex="-1"
           type="button"
@@ -36727,7 +36652,7 @@ exports[`Storyshots Views / Authentication / Log in error external login 1`] = `
         </div>
         <div
           class="Login-panel-id"
-          data-test="loginErrorMessage"
+          data-test-id="login-error-message"
         >
           Sorry, login went wrong. Please try again.
         </div>
@@ -36748,7 +36673,7 @@ exports[`Storyshots Views / Authentication / Log in error external login 1`] = `
               autocomplete="username"
               autofocus=""
               class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-              data-test="email"
+              data-test-id="email"
               name="email"
               type="text"
               value=""
@@ -36789,7 +36714,7 @@ exports[`Storyshots Views / Authentication / Log in error external login 1`] = `
                 aria-invalid="false"
                 autocomplete="password"
                 class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                data-test="password"
+                data-test-id="password"
                 name="password"
                 type="password"
                 value=""
@@ -36830,6 +36755,7 @@ exports[`Storyshots Views / Authentication / Log in error external login 1`] = `
         </div>
         <a
           class="MuiTypography-root-id Login-link-id MuiTypography-body2-id"
+          data-test-id="reset-password-link"
         >
           Forgot password?
         </a>
@@ -36838,7 +36764,7 @@ exports[`Storyshots Views / Authentication / Log in error external login 1`] = `
         >
           <button
             class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id Login-loginButton-id MuiButton-containedPrimary-id"
-            data-test="submit"
+            data-test-id="submit"
             tabindex="0"
             type="submit"
           >
@@ -36868,7 +36794,7 @@ exports[`Storyshots Views / Authentication / Log in error external login 1`] = `
         />
         <button
           class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-fullWidth-id"
-          data-test="external-authentication"
+          data-test-id="external-authentication"
           tabindex="0"
           type="button"
         >
@@ -36903,7 +36829,7 @@ exports[`Storyshots Views / Authentication / Log in error login 1`] = `
         </div>
         <div
           class="Login-panel-id"
-          data-test="loginErrorMessage"
+          data-test-id="login-error-message"
         >
           Sorry, your username and/or password are incorrect. Please try again.
         </div>
@@ -36924,7 +36850,7 @@ exports[`Storyshots Views / Authentication / Log in error login 1`] = `
               autocomplete="username"
               autofocus=""
               class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-              data-test="email"
+              data-test-id="email"
               name="email"
               type="text"
               value=""
@@ -36965,7 +36891,7 @@ exports[`Storyshots Views / Authentication / Log in error login 1`] = `
                 aria-invalid="false"
                 autocomplete="password"
                 class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                data-test="password"
+                data-test-id="password"
                 name="password"
                 type="password"
                 value=""
@@ -37006,6 +36932,7 @@ exports[`Storyshots Views / Authentication / Log in error login 1`] = `
         </div>
         <a
           class="MuiTypography-root-id Login-link-id MuiTypography-body2-id"
+          data-test-id="reset-password-link"
         >
           Forgot password?
         </a>
@@ -37014,7 +36941,7 @@ exports[`Storyshots Views / Authentication / Log in error login 1`] = `
         >
           <button
             class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id Login-loginButton-id MuiButton-containedPrimary-id"
-            data-test="submit"
+            data-test-id="submit"
             tabindex="0"
             type="submit"
           >
@@ -37044,7 +36971,7 @@ exports[`Storyshots Views / Authentication / Log in error login 1`] = `
         />
         <button
           class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-fullWidth-id"
-          data-test="external-authentication"
+          data-test-id="external-authentication"
           tabindex="0"
           type="button"
         >
@@ -37164,7 +37091,7 @@ exports[`Storyshots Views / Authentication / Reset password default 1`] = `
               autocomplete="username"
               autofocus=""
               class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-              data-test="email"
+              data-test-id="email"
               name="email"
               type="text"
               value=""
@@ -37188,7 +37115,7 @@ exports[`Storyshots Views / Authentication / Reset password default 1`] = `
         />
         <button
           class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id Login-submit-id MuiButton-containedPrimary-id"
-          data-test="submit"
+          data-test-id="submit"
           tabindex="0"
           type="submit"
         >
@@ -37274,7 +37201,7 @@ exports[`Storyshots Views / Authentication / Reset password error 1`] = `
               autocomplete="username"
               autofocus=""
               class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-              data-test="email"
+              data-test-id="email"
               name="email"
               type="text"
               value=""
@@ -37298,7 +37225,7 @@ exports[`Storyshots Views / Authentication / Reset password error 1`] = `
         />
         <button
           class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id Login-submit-id MuiButton-containedPrimary-id"
-          data-test="submit"
+          data-test-id="submit"
           tabindex="0"
           type="submit"
         >
@@ -37379,7 +37306,7 @@ exports[`Storyshots Views / Authentication / Reset password loading 1`] = `
               autocomplete="username"
               autofocus=""
               class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
-              data-test="email"
+              data-test-id="email"
               disabled=""
               name="email"
               type="text"
@@ -37404,7 +37331,7 @@ exports[`Storyshots Views / Authentication / Reset password loading 1`] = `
         />
         <button
           class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id Login-submit-id MuiButton-containedPrimary-id MuiButton-disabled-id MuiButtonBase-disabled-id"
-          data-test="submit"
+          data-test-id="submit"
           disabled=""
           tabindex="-1"
           type="submit"
@@ -37503,7 +37430,7 @@ exports[`Storyshots Views / Authentication / Set up a new password default 1`] =
               autocomplete="none"
               autofocus=""
               class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-              data-test="password"
+              data-test-id="password"
               name="password"
               type="password"
               value=""
@@ -37541,7 +37468,7 @@ exports[`Storyshots Views / Authentication / Set up a new password default 1`] =
               aria-invalid="false"
               autocomplete="none"
               class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-              data-test="confirm-password"
+              data-test-id="confirm-password"
               name="confirmPassword"
               type="password"
               value=""
@@ -37623,7 +37550,7 @@ exports[`Storyshots Views / Authentication / Set up a new password loading 1`] =
               autocomplete="none"
               autofocus=""
               class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
-              data-test="password"
+              data-test-id="password"
               disabled=""
               name="password"
               type="password"
@@ -37662,7 +37589,7 @@ exports[`Storyshots Views / Authentication / Set up a new password loading 1`] =
               aria-invalid="false"
               autocomplete="none"
               class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
-              data-test="confirm-password"
+              data-test-id="confirm-password"
               disabled=""
               name="confirmPassword"
               type="password"
@@ -37751,7 +37678,7 @@ exports[`Storyshots Views / Authentication / Set up a new password too short err
               autocomplete="none"
               autofocus=""
               class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-              data-test="password"
+              data-test-id="password"
               name="password"
               type="password"
               value=""
@@ -37789,7 +37716,7 @@ exports[`Storyshots Views / Authentication / Set up a new password too short err
               aria-invalid="false"
               autocomplete="none"
               class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-              data-test="confirm-password"
+              data-test-id="confirm-password"
               name="confirmPassword"
               type="password"
               value=""
@@ -37887,7 +37814,7 @@ exports[`Storyshots Views / Categories / Category list default 1`] = `
         >
           <button
             class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
-            data-test-id="createCategory"
+            data-test-id="create-category"
             tabindex="0"
             type="button"
           >
@@ -37946,7 +37873,7 @@ exports[`Storyshots Views / Categories / Category list default 1`] = `
       >
         <div
           class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
-          data-test-id="searchInput"
+          data-test-id="search-input"
         >
           <div
             class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
@@ -38164,8 +38091,7 @@ exports[`Storyshots Views / Categories / Category list default 1`] = `
           >
             <tr
               class="MuiTableRow-root-id CategoryList-tableRow-id MuiTableRow-hover-id"
-              data-test="id"
-              data-test-id="123123"
+              data-test-id="id-123123"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -38206,7 +38132,7 @@ exports[`Storyshots Views / Categories / Category list default 1`] = `
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id CategoryList-colName-id"
-                data-test="name"
+                data-test-id="name"
               >
                 Lorem ipsum dolor
               </td>
@@ -38223,8 +38149,7 @@ exports[`Storyshots Views / Categories / Category list default 1`] = `
             </tr>
             <tr
               class="MuiTableRow-root-id CategoryList-tableRow-id MuiTableRow-hover-id"
-              data-test="id"
-              data-test-id="876752"
+              data-test-id="id-876752"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -38265,7 +38190,7 @@ exports[`Storyshots Views / Categories / Category list default 1`] = `
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id CategoryList-colName-id"
-                data-test="name"
+                data-test-id="name"
               >
                 Mauris vehicula tortor vulputate
               </td>
@@ -38282,8 +38207,7 @@ exports[`Storyshots Views / Categories / Category list default 1`] = `
             </tr>
             <tr
               class="MuiTableRow-root-id CategoryList-tableRow-id MuiTableRow-hover-id"
-              data-test="id"
-              data-test-id="876542"
+              data-test-id="id-876542"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -38324,7 +38248,7 @@ exports[`Storyshots Views / Categories / Category list default 1`] = `
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id CategoryList-colName-id"
-                data-test="name"
+                data-test-id="name"
               >
                 Excepteur sint occaecat cupidatat non proident
               </td>
@@ -38341,8 +38265,7 @@ exports[`Storyshots Views / Categories / Category list default 1`] = `
             </tr>
             <tr
               class="MuiTableRow-root-id CategoryList-tableRow-id MuiTableRow-hover-id"
-              data-test="id"
-              data-test-id="875352"
+              data-test-id="id-875352"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -38383,7 +38306,7 @@ exports[`Storyshots Views / Categories / Category list default 1`] = `
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id CategoryList-colName-id"
-                data-test="name"
+                data-test-id="name"
               >
                 Ut enim ad minim veniam
               </td>
@@ -38400,8 +38323,7 @@ exports[`Storyshots Views / Categories / Category list default 1`] = `
             </tr>
             <tr
               class="MuiTableRow-root-id CategoryList-tableRow-id MuiTableRow-hover-id"
-              data-test="id"
-              data-test-id="865752"
+              data-test-id="id-865752"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -38442,7 +38364,7 @@ exports[`Storyshots Views / Categories / Category list default 1`] = `
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id CategoryList-colName-id"
-                data-test="name"
+                data-test-id="name"
               >
                 Duis aute irure dolor in reprehenderit
               </td>
@@ -38459,8 +38381,7 @@ exports[`Storyshots Views / Categories / Category list default 1`] = `
             </tr>
             <tr
               class="MuiTableRow-root-id CategoryList-tableRow-id MuiTableRow-hover-id"
-              data-test="id"
-              data-test-id="878752"
+              data-test-id="id-878752"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -38501,7 +38422,7 @@ exports[`Storyshots Views / Categories / Category list default 1`] = `
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id CategoryList-colName-id"
-                data-test="name"
+                data-test-id="name"
               >
                 Neque porro quisquam est
               </td>
@@ -38552,7 +38473,7 @@ exports[`Storyshots Views / Categories / Category list empty 1`] = `
         >
           <button
             class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
-            data-test-id="createCategory"
+            data-test-id="create-category"
             tabindex="0"
             type="button"
           >
@@ -38611,7 +38532,7 @@ exports[`Storyshots Views / Categories / Category list empty 1`] = `
       >
         <div
           class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
-          data-test-id="searchInput"
+          data-test-id="search-input"
         >
           <div
             class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
@@ -38835,7 +38756,7 @@ exports[`Storyshots Views / Categories / Category list loading 1`] = `
         >
           <button
             class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
-            data-test-id="createCategory"
+            data-test-id="create-category"
             tabindex="0"
             type="button"
           >
@@ -38894,7 +38815,7 @@ exports[`Storyshots Views / Categories / Category list loading 1`] = `
       >
         <div
           class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
-          data-test-id="searchInput"
+          data-test-id="search-input"
         >
           <div
             class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
@@ -39112,7 +39033,7 @@ exports[`Storyshots Views / Categories / Category list loading 1`] = `
           >
             <tr
               class="MuiTableRow-root-id CategoryList-tableRow-id"
-              data-test="id"
+              data-test-id="id-undefined"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -39153,7 +39074,7 @@ exports[`Storyshots Views / Categories / Category list loading 1`] = `
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id CategoryList-colName-id"
-                data-test="name"
+                data-test-id="name"
               >
                 <span
                   class="Skeleton-skeleton-id"
@@ -39281,8 +39202,7 @@ exports[`Storyshots Views / Categories / Create category When loading 1`] = `
             />
             <div
               class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-              data-test="richTextEditor"
-              data-test-id="description"
+              data-test-id="rich-text-editor-description"
             >
               <label
                 class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiFormLabel-focused-id MuiInputLabel-focused-id"
@@ -39349,8 +39269,8 @@ exports[`Storyshots Views / Categories / Create category When loading 1`] = `
         />
         <div
           class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          data-test="metadataEditor"
           data-test-expanded="true"
+          data-test-id="metadata-editor"
           data-test-is-private="false"
         >
           <div
@@ -39365,7 +39285,7 @@ exports[`Storyshots Views / Categories / Create category When loading 1`] = `
                 Metadata
                 <button
                   class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                  data-test="expand"
+                  data-test-id="expand"
                   tabindex="0"
                   type="button"
                 >
@@ -39411,7 +39331,7 @@ exports[`Storyshots Views / Categories / Create category When loading 1`] = `
           >
             <button
               class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-              data-test="addField"
+              data-test-id="add-field"
               tabindex="0"
               type="button"
             >
@@ -39428,8 +39348,8 @@ exports[`Storyshots Views / Categories / Create category When loading 1`] = `
         />
         <div
           class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          data-test="metadataEditor"
           data-test-expanded="true"
+          data-test-id="metadata-editor"
           data-test-is-private="true"
         >
           <div
@@ -39444,7 +39364,7 @@ exports[`Storyshots Views / Categories / Create category When loading 1`] = `
                 Private Metadata
                 <button
                   class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                  data-test="expand"
+                  data-test-id="expand"
                   tabindex="0"
                   type="button"
                 >
@@ -39490,7 +39410,7 @@ exports[`Storyshots Views / Categories / Create category When loading 1`] = `
           >
             <button
               class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-              data-test="addField"
+              data-test-id="add-field"
               tabindex="0"
               type="button"
             >
@@ -39597,8 +39517,7 @@ exports[`Storyshots Views / Categories / Create category default 1`] = `
             />
             <div
               class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-              data-test="richTextEditor"
-              data-test-id="description"
+              data-test-id="rich-text-editor-description"
             >
               <label
                 class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-focused-id MuiInputLabel-focused-id"
@@ -39665,8 +39584,8 @@ exports[`Storyshots Views / Categories / Create category default 1`] = `
         />
         <div
           class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          data-test="metadataEditor"
           data-test-expanded="true"
+          data-test-id="metadata-editor"
           data-test-is-private="false"
         >
           <div
@@ -39681,7 +39600,7 @@ exports[`Storyshots Views / Categories / Create category default 1`] = `
                 Metadata
                 <button
                   class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                  data-test="expand"
+                  data-test-id="expand"
                   tabindex="0"
                   type="button"
                 >
@@ -39727,7 +39646,7 @@ exports[`Storyshots Views / Categories / Create category default 1`] = `
           >
             <button
               class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-              data-test="addField"
+              data-test-id="add-field"
               tabindex="0"
               type="button"
             >
@@ -39744,8 +39663,8 @@ exports[`Storyshots Views / Categories / Create category default 1`] = `
         />
         <div
           class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          data-test="metadataEditor"
           data-test-expanded="true"
+          data-test-id="metadata-editor"
           data-test-is-private="true"
         >
           <div
@@ -39760,7 +39679,7 @@ exports[`Storyshots Views / Categories / Create category default 1`] = `
                 Private Metadata
                 <button
                   class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                  data-test="expand"
+                  data-test-id="expand"
                   tabindex="0"
                   type="button"
                 >
@@ -39806,7 +39725,7 @@ exports[`Storyshots Views / Categories / Create category default 1`] = `
           >
             <button
               class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-              data-test="addField"
+              data-test-id="add-field"
               tabindex="0"
               type="button"
             >
@@ -39918,8 +39837,7 @@ exports[`Storyshots Views / Categories / Create category form errors 1`] = `
             />
             <div
               class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-              data-test="richTextEditor"
-              data-test-id="description"
+              data-test-id="rich-text-editor-description"
             >
               <label
                 class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-focused-id MuiInputLabel-focused-id"
@@ -39988,8 +39906,8 @@ exports[`Storyshots Views / Categories / Create category form errors 1`] = `
         />
         <div
           class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          data-test="metadataEditor"
           data-test-expanded="true"
+          data-test-id="metadata-editor"
           data-test-is-private="false"
         >
           <div
@@ -40004,7 +39922,7 @@ exports[`Storyshots Views / Categories / Create category form errors 1`] = `
                 Metadata
                 <button
                   class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                  data-test="expand"
+                  data-test-id="expand"
                   tabindex="0"
                   type="button"
                 >
@@ -40050,7 +39968,7 @@ exports[`Storyshots Views / Categories / Create category form errors 1`] = `
           >
             <button
               class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-              data-test="addField"
+              data-test-id="add-field"
               tabindex="0"
               type="button"
             >
@@ -40067,8 +39985,8 @@ exports[`Storyshots Views / Categories / Create category form errors 1`] = `
         />
         <div
           class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          data-test="metadataEditor"
           data-test-expanded="true"
+          data-test-id="metadata-editor"
           data-test-is-private="true"
         >
           <div
@@ -40083,7 +40001,7 @@ exports[`Storyshots Views / Categories / Create category form errors 1`] = `
                 Private Metadata
                 <button
                   class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                  data-test="expand"
+                  data-test-id="expand"
                   tabindex="0"
                   type="button"
                 >
@@ -40129,7 +40047,7 @@ exports[`Storyshots Views / Categories / Create category form errors 1`] = `
           >
             <button
               class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-              data-test="addField"
+              data-test-id="add-field"
               tabindex="0"
               type="button"
             >
@@ -40235,8 +40153,7 @@ exports[`Storyshots Views / Categories / Update category default 1`] = `
           />
           <div
             class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-            data-test="richTextEditor"
-            data-test-id="description"
+            data-test-id="rich-text-editor-description"
           >
             <label
               class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-focused-id MuiInputLabel-focused-id"
@@ -40298,7 +40215,7 @@ exports[`Storyshots Views / Categories / Update category default 1`] = `
         >
           <div
             class="MediaTile-mediaContainer-id"
-            data-test="product-image"
+            data-test-id="product-image"
           >
             <div
               class="MediaTile-mediaOverlay-id"
@@ -40442,8 +40359,8 @@ exports[`Storyshots Views / Categories / Update category default 1`] = `
       />
       <div
         class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-        data-test="metadataEditor"
         data-test-expanded="true"
+        data-test-id="metadata-editor"
         data-test-is-private="false"
       >
         <div
@@ -40458,7 +40375,7 @@ exports[`Storyshots Views / Categories / Update category default 1`] = `
               Metadata
               <button
                 class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                data-test="expand"
+                data-test-id="expand"
                 tabindex="0"
                 type="button"
               >
@@ -40530,7 +40447,7 @@ exports[`Storyshots Views / Categories / Update category default 1`] = `
           >
             <tr
               class="MuiTableRow-root-id MuiTableRow-hover-id"
-              data-test="field"
+              data-test-id="field"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colName-id"
@@ -40611,8 +40528,7 @@ exports[`Storyshots Views / Categories / Update category default 1`] = `
               >
                 <button
                   class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                  data-test="deleteField"
-                  data-test-id="0"
+                  data-test-id="delete-field-0"
                   tabindex="0"
                   type="button"
                 >
@@ -40639,7 +40555,7 @@ exports[`Storyshots Views / Categories / Update category default 1`] = `
         >
           <button
             class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-            data-test="addField"
+            data-test-id="add-field"
             tabindex="0"
             type="button"
           >
@@ -40656,8 +40572,8 @@ exports[`Storyshots Views / Categories / Update category default 1`] = `
       />
       <div
         class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-        data-test="metadataEditor"
         data-test-expanded="true"
+        data-test-id="metadata-editor"
         data-test-is-private="true"
       >
         <div
@@ -40672,7 +40588,7 @@ exports[`Storyshots Views / Categories / Update category default 1`] = `
               Private Metadata
               <button
                 class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                data-test="expand"
+                data-test-id="expand"
                 tabindex="0"
                 type="button"
               >
@@ -40718,7 +40634,7 @@ exports[`Storyshots Views / Categories / Update category default 1`] = `
         >
           <button
             class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-            data-test="addField"
+            data-test-id="add-field"
             tabindex="0"
             type="button"
           >
@@ -40743,7 +40659,7 @@ exports[`Storyshots Views / Categories / Update category default 1`] = `
         </span>
         <span
           class="MuiTypography-root-id Tab-root-id MuiTypography-body1-id"
-          data-test-id="productsTab"
+          data-test-id="products-tab"
         >
           Products
         </span>
@@ -40771,7 +40687,7 @@ exports[`Storyshots Views / Categories / Update category default 1`] = `
           >
             <button
               class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-              data-test-id="createSubcategory"
+              data-test-id="create-subcategory"
               tabindex="0"
               type="button"
             >
@@ -41014,8 +40930,7 @@ exports[`Storyshots Views / Categories / Update category form errors 1`] = `
           />
           <div
             class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-            data-test="richTextEditor"
-            data-test-id="description"
+            data-test-id="rich-text-editor-description"
           >
             <label
               class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-focused-id MuiInputLabel-focused-id"
@@ -41079,7 +40994,7 @@ exports[`Storyshots Views / Categories / Update category form errors 1`] = `
         >
           <div
             class="MediaTile-mediaContainer-id"
-            data-test="product-image"
+            data-test-id="product-image"
           >
             <div
               class="MediaTile-mediaOverlay-id"
@@ -41223,8 +41138,8 @@ exports[`Storyshots Views / Categories / Update category form errors 1`] = `
       />
       <div
         class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-        data-test="metadataEditor"
         data-test-expanded="true"
+        data-test-id="metadata-editor"
         data-test-is-private="false"
       >
         <div
@@ -41239,7 +41154,7 @@ exports[`Storyshots Views / Categories / Update category form errors 1`] = `
               Metadata
               <button
                 class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                data-test="expand"
+                data-test-id="expand"
                 tabindex="0"
                 type="button"
               >
@@ -41311,7 +41226,7 @@ exports[`Storyshots Views / Categories / Update category form errors 1`] = `
           >
             <tr
               class="MuiTableRow-root-id MuiTableRow-hover-id"
-              data-test="field"
+              data-test-id="field"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colName-id"
@@ -41392,8 +41307,7 @@ exports[`Storyshots Views / Categories / Update category form errors 1`] = `
               >
                 <button
                   class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                  data-test="deleteField"
-                  data-test-id="0"
+                  data-test-id="delete-field-0"
                   tabindex="0"
                   type="button"
                 >
@@ -41420,7 +41334,7 @@ exports[`Storyshots Views / Categories / Update category form errors 1`] = `
         >
           <button
             class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-            data-test="addField"
+            data-test-id="add-field"
             tabindex="0"
             type="button"
           >
@@ -41437,8 +41351,8 @@ exports[`Storyshots Views / Categories / Update category form errors 1`] = `
       />
       <div
         class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-        data-test="metadataEditor"
         data-test-expanded="true"
+        data-test-id="metadata-editor"
         data-test-is-private="true"
       >
         <div
@@ -41453,7 +41367,7 @@ exports[`Storyshots Views / Categories / Update category form errors 1`] = `
               Private Metadata
               <button
                 class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                data-test="expand"
+                data-test-id="expand"
                 tabindex="0"
                 type="button"
               >
@@ -41499,7 +41413,7 @@ exports[`Storyshots Views / Categories / Update category form errors 1`] = `
         >
           <button
             class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-            data-test="addField"
+            data-test-id="add-field"
             tabindex="0"
             type="button"
           >
@@ -41524,7 +41438,7 @@ exports[`Storyshots Views / Categories / Update category form errors 1`] = `
         </span>
         <span
           class="MuiTypography-root-id Tab-root-id MuiTypography-body1-id"
-          data-test-id="productsTab"
+          data-test-id="products-tab"
         >
           Products
         </span>
@@ -41552,7 +41466,7 @@ exports[`Storyshots Views / Categories / Update category form errors 1`] = `
           >
             <button
               class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-              data-test-id="createSubcategory"
+              data-test-id="create-subcategory"
               tabindex="0"
               type="button"
             >
@@ -41797,8 +41711,7 @@ exports[`Storyshots Views / Categories / Update category loading 1`] = `
           />
           <div
             class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-            data-test="richTextEditor"
-            data-test-id="description"
+            data-test-id="rich-text-editor-description"
           >
             <label
               class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiFormLabel-focused-id MuiInputLabel-focused-id"
@@ -41922,8 +41835,8 @@ exports[`Storyshots Views / Categories / Update category loading 1`] = `
       />
       <div
         class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-        data-test="metadataEditor"
         data-test-expanded="true"
+        data-test-id="metadata-editor"
         data-test-is-private="false"
       >
         <div
@@ -41938,7 +41851,7 @@ exports[`Storyshots Views / Categories / Update category loading 1`] = `
               Metadata
               <button
                 class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                data-test="expand"
+                data-test-id="expand"
                 tabindex="0"
                 type="button"
               >
@@ -41983,8 +41896,8 @@ exports[`Storyshots Views / Categories / Update category loading 1`] = `
       />
       <div
         class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-        data-test="metadataEditor"
         data-test-expanded="true"
+        data-test-id="metadata-editor"
         data-test-is-private="true"
       >
         <div
@@ -41999,7 +41912,7 @@ exports[`Storyshots Views / Categories / Update category loading 1`] = `
               Private Metadata
               <button
                 class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                data-test="expand"
+                data-test-id="expand"
                 tabindex="0"
                 type="button"
               >
@@ -42052,7 +41965,7 @@ exports[`Storyshots Views / Categories / Update category loading 1`] = `
         </span>
         <span
           class="MuiTypography-root-id Tab-root-id MuiTypography-body1-id"
-          data-test-id="productsTab"
+          data-test-id="products-tab"
         >
           Products
         </span>
@@ -42080,7 +41993,7 @@ exports[`Storyshots Views / Categories / Update category loading 1`] = `
           >
             <button
               class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-              data-test-id="createSubcategory"
+              data-test-id="create-subcategory"
               tabindex="0"
               type="button"
             >
@@ -42255,7 +42168,7 @@ exports[`Storyshots Views / Categories / Update category loading 1`] = `
             >
               <tr
                 class="MuiTableRow-root-id CategoryList-tableRow-id"
-                data-test="id"
+                data-test-id="id-undefined"
               >
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -42298,7 +42211,7 @@ exports[`Storyshots Views / Categories / Update category loading 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id CategoryList-colName-id"
-                  data-test="name"
+                  data-test-id="name"
                 >
                   <span
                     class="Skeleton-skeleton-id"
@@ -42425,8 +42338,7 @@ exports[`Storyshots Views / Categories / Update category no background 1`] = `
           />
           <div
             class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-            data-test="richTextEditor"
-            data-test-id="description"
+            data-test-id="rich-text-editor-description"
           >
             <label
               class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-focused-id MuiInputLabel-focused-id"
@@ -42570,8 +42482,8 @@ exports[`Storyshots Views / Categories / Update category no background 1`] = `
       />
       <div
         class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-        data-test="metadataEditor"
         data-test-expanded="true"
+        data-test-id="metadata-editor"
         data-test-is-private="false"
       >
         <div
@@ -42586,7 +42498,7 @@ exports[`Storyshots Views / Categories / Update category no background 1`] = `
               Metadata
               <button
                 class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                data-test="expand"
+                data-test-id="expand"
                 tabindex="0"
                 type="button"
               >
@@ -42658,7 +42570,7 @@ exports[`Storyshots Views / Categories / Update category no background 1`] = `
           >
             <tr
               class="MuiTableRow-root-id MuiTableRow-hover-id"
-              data-test="field"
+              data-test-id="field"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colName-id"
@@ -42739,8 +42651,7 @@ exports[`Storyshots Views / Categories / Update category no background 1`] = `
               >
                 <button
                   class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                  data-test="deleteField"
-                  data-test-id="0"
+                  data-test-id="delete-field-0"
                   tabindex="0"
                   type="button"
                 >
@@ -42767,7 +42678,7 @@ exports[`Storyshots Views / Categories / Update category no background 1`] = `
         >
           <button
             class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-            data-test="addField"
+            data-test-id="add-field"
             tabindex="0"
             type="button"
           >
@@ -42784,8 +42695,8 @@ exports[`Storyshots Views / Categories / Update category no background 1`] = `
       />
       <div
         class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-        data-test="metadataEditor"
         data-test-expanded="true"
+        data-test-id="metadata-editor"
         data-test-is-private="true"
       >
         <div
@@ -42800,7 +42711,7 @@ exports[`Storyshots Views / Categories / Update category no background 1`] = `
               Private Metadata
               <button
                 class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                data-test="expand"
+                data-test-id="expand"
                 tabindex="0"
                 type="button"
               >
@@ -42846,7 +42757,7 @@ exports[`Storyshots Views / Categories / Update category no background 1`] = `
         >
           <button
             class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-            data-test="addField"
+            data-test-id="add-field"
             tabindex="0"
             type="button"
           >
@@ -42871,7 +42782,7 @@ exports[`Storyshots Views / Categories / Update category no background 1`] = `
         </span>
         <span
           class="MuiTypography-root-id Tab-root-id MuiTypography-body1-id"
-          data-test-id="productsTab"
+          data-test-id="products-tab"
         >
           Products
         </span>
@@ -42899,7 +42810,7 @@ exports[`Storyshots Views / Categories / Update category no background 1`] = `
           >
             <button
               class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-              data-test-id="createSubcategory"
+              data-test-id="create-subcategory"
               tabindex="0"
               type="button"
             >
@@ -43137,8 +43048,7 @@ exports[`Storyshots Views / Categories / Update category no products 1`] = `
           />
           <div
             class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-            data-test="richTextEditor"
-            data-test-id="description"
+            data-test-id="rich-text-editor-description"
           >
             <label
               class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-focused-id MuiInputLabel-focused-id"
@@ -43200,7 +43110,7 @@ exports[`Storyshots Views / Categories / Update category no products 1`] = `
         >
           <div
             class="MediaTile-mediaContainer-id"
-            data-test="product-image"
+            data-test-id="product-image"
           >
             <div
               class="MediaTile-mediaOverlay-id"
@@ -43344,8 +43254,8 @@ exports[`Storyshots Views / Categories / Update category no products 1`] = `
       />
       <div
         class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-        data-test="metadataEditor"
         data-test-expanded="true"
+        data-test-id="metadata-editor"
         data-test-is-private="false"
       >
         <div
@@ -43360,7 +43270,7 @@ exports[`Storyshots Views / Categories / Update category no products 1`] = `
               Metadata
               <button
                 class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                data-test="expand"
+                data-test-id="expand"
                 tabindex="0"
                 type="button"
               >
@@ -43432,7 +43342,7 @@ exports[`Storyshots Views / Categories / Update category no products 1`] = `
           >
             <tr
               class="MuiTableRow-root-id MuiTableRow-hover-id"
-              data-test="field"
+              data-test-id="field"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colName-id"
@@ -43513,8 +43423,7 @@ exports[`Storyshots Views / Categories / Update category no products 1`] = `
               >
                 <button
                   class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                  data-test="deleteField"
-                  data-test-id="0"
+                  data-test-id="delete-field-0"
                   tabindex="0"
                   type="button"
                 >
@@ -43541,7 +43450,7 @@ exports[`Storyshots Views / Categories / Update category no products 1`] = `
         >
           <button
             class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-            data-test="addField"
+            data-test-id="add-field"
             tabindex="0"
             type="button"
           >
@@ -43558,8 +43467,8 @@ exports[`Storyshots Views / Categories / Update category no products 1`] = `
       />
       <div
         class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-        data-test="metadataEditor"
         data-test-expanded="true"
+        data-test-id="metadata-editor"
         data-test-is-private="true"
       >
         <div
@@ -43574,7 +43483,7 @@ exports[`Storyshots Views / Categories / Update category no products 1`] = `
               Private Metadata
               <button
                 class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                data-test="expand"
+                data-test-id="expand"
                 tabindex="0"
                 type="button"
               >
@@ -43620,7 +43529,7 @@ exports[`Storyshots Views / Categories / Update category no products 1`] = `
         >
           <button
             class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-            data-test="addField"
+            data-test-id="add-field"
             tabindex="0"
             type="button"
           >
@@ -43645,7 +43554,7 @@ exports[`Storyshots Views / Categories / Update category no products 1`] = `
         </span>
         <span
           class="MuiTypography-root-id Tab-root-id Tab-active-id MuiTypography-body1-id"
-          data-test-id="productsTab"
+          data-test-id="products-tab"
         >
           Products
         </span>
@@ -43680,7 +43589,7 @@ exports[`Storyshots Views / Categories / Update category no products 1`] = `
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                  data-test-id="viewProducts"
+                  data-test-id="view-products"
                   tabindex="0"
                   type="button"
                 >
@@ -43696,7 +43605,7 @@ exports[`Storyshots Views / Categories / Update category no products 1`] = `
               />
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                data-test-id="addProducts"
+                data-test-id="add-products"
                 tabindex="0"
                 type="button"
               >
@@ -43913,8 +43822,7 @@ exports[`Storyshots Views / Categories / Update category no subcategories 1`] =
           />
           <div
             class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-            data-test="richTextEditor"
-            data-test-id="description"
+            data-test-id="rich-text-editor-description"
           >
             <label
               class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-focused-id MuiInputLabel-focused-id"
@@ -43976,7 +43884,7 @@ exports[`Storyshots Views / Categories / Update category no subcategories 1`] =
         >
           <div
             class="MediaTile-mediaContainer-id"
-            data-test="product-image"
+            data-test-id="product-image"
           >
             <div
               class="MediaTile-mediaOverlay-id"
@@ -44120,8 +44028,8 @@ exports[`Storyshots Views / Categories / Update category no subcategories 1`] =
       />
       <div
         class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-        data-test="metadataEditor"
         data-test-expanded="true"
+        data-test-id="metadata-editor"
         data-test-is-private="false"
       >
         <div
@@ -44136,7 +44044,7 @@ exports[`Storyshots Views / Categories / Update category no subcategories 1`] =
               Metadata
               <button
                 class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                data-test="expand"
+                data-test-id="expand"
                 tabindex="0"
                 type="button"
               >
@@ -44208,7 +44116,7 @@ exports[`Storyshots Views / Categories / Update category no subcategories 1`] =
           >
             <tr
               class="MuiTableRow-root-id MuiTableRow-hover-id"
-              data-test="field"
+              data-test-id="field"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colName-id"
@@ -44289,8 +44197,7 @@ exports[`Storyshots Views / Categories / Update category no subcategories 1`] =
               >
                 <button
                   class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                  data-test="deleteField"
-                  data-test-id="0"
+                  data-test-id="delete-field-0"
                   tabindex="0"
                   type="button"
                 >
@@ -44317,7 +44224,7 @@ exports[`Storyshots Views / Categories / Update category no subcategories 1`] =
         >
           <button
             class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-            data-test="addField"
+            data-test-id="add-field"
             tabindex="0"
             type="button"
           >
@@ -44334,8 +44241,8 @@ exports[`Storyshots Views / Categories / Update category no subcategories 1`] =
       />
       <div
         class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-        data-test="metadataEditor"
         data-test-expanded="true"
+        data-test-id="metadata-editor"
         data-test-is-private="true"
       >
         <div
@@ -44350,7 +44257,7 @@ exports[`Storyshots Views / Categories / Update category no subcategories 1`] =
               Private Metadata
               <button
                 class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                data-test="expand"
+                data-test-id="expand"
                 tabindex="0"
                 type="button"
               >
@@ -44396,7 +44303,7 @@ exports[`Storyshots Views / Categories / Update category no subcategories 1`] =
         >
           <button
             class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-            data-test="addField"
+            data-test-id="add-field"
             tabindex="0"
             type="button"
           >
@@ -44421,7 +44328,7 @@ exports[`Storyshots Views / Categories / Update category no subcategories 1`] =
         </span>
         <span
           class="MuiTypography-root-id Tab-root-id MuiTypography-body1-id"
-          data-test-id="productsTab"
+          data-test-id="products-tab"
         >
           Products
         </span>
@@ -44449,7 +44356,7 @@ exports[`Storyshots Views / Categories / Update category no subcategories 1`] =
           >
             <button
               class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-              data-test-id="createSubcategory"
+              data-test-id="create-subcategory"
               tabindex="0"
               type="button"
             >
@@ -44687,8 +44594,7 @@ exports[`Storyshots Views / Categories / Update category products 1`] = `
           />
           <div
             class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-            data-test="richTextEditor"
-            data-test-id="description"
+            data-test-id="rich-text-editor-description"
           >
             <label
               class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-focused-id MuiInputLabel-focused-id"
@@ -44750,7 +44656,7 @@ exports[`Storyshots Views / Categories / Update category products 1`] = `
         >
           <div
             class="MediaTile-mediaContainer-id"
-            data-test="product-image"
+            data-test-id="product-image"
           >
             <div
               class="MediaTile-mediaOverlay-id"
@@ -44894,8 +44800,8 @@ exports[`Storyshots Views / Categories / Update category products 1`] = `
       />
       <div
         class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-        data-test="metadataEditor"
         data-test-expanded="true"
+        data-test-id="metadata-editor"
         data-test-is-private="false"
       >
         <div
@@ -44910,7 +44816,7 @@ exports[`Storyshots Views / Categories / Update category products 1`] = `
               Metadata
               <button
                 class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                data-test="expand"
+                data-test-id="expand"
                 tabindex="0"
                 type="button"
               >
@@ -44982,7 +44888,7 @@ exports[`Storyshots Views / Categories / Update category products 1`] = `
           >
             <tr
               class="MuiTableRow-root-id MuiTableRow-hover-id"
-              data-test="field"
+              data-test-id="field"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colName-id"
@@ -45063,8 +44969,7 @@ exports[`Storyshots Views / Categories / Update category products 1`] = `
               >
                 <button
                   class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                  data-test="deleteField"
-                  data-test-id="0"
+                  data-test-id="delete-field-0"
                   tabindex="0"
                   type="button"
                 >
@@ -45091,7 +44996,7 @@ exports[`Storyshots Views / Categories / Update category products 1`] = `
         >
           <button
             class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-            data-test="addField"
+            data-test-id="add-field"
             tabindex="0"
             type="button"
           >
@@ -45108,8 +45013,8 @@ exports[`Storyshots Views / Categories / Update category products 1`] = `
       />
       <div
         class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-        data-test="metadataEditor"
         data-test-expanded="true"
+        data-test-id="metadata-editor"
         data-test-is-private="true"
       >
         <div
@@ -45124,7 +45029,7 @@ exports[`Storyshots Views / Categories / Update category products 1`] = `
               Private Metadata
               <button
                 class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                data-test="expand"
+                data-test-id="expand"
                 tabindex="0"
                 type="button"
               >
@@ -45170,7 +45075,7 @@ exports[`Storyshots Views / Categories / Update category products 1`] = `
         >
           <button
             class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-            data-test="addField"
+            data-test-id="add-field"
             tabindex="0"
             type="button"
           >
@@ -45195,7 +45100,7 @@ exports[`Storyshots Views / Categories / Update category products 1`] = `
         </span>
         <span
           class="MuiTypography-root-id Tab-root-id Tab-active-id MuiTypography-body1-id"
-          data-test-id="productsTab"
+          data-test-id="products-tab"
         >
           Products
         </span>
@@ -45230,7 +45135,7 @@ exports[`Storyshots Views / Categories / Update category products 1`] = `
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                  data-test-id="viewProducts"
+                  data-test-id="view-products"
                   tabindex="0"
                   type="button"
                 >
@@ -45246,7 +45151,7 @@ exports[`Storyshots Views / Categories / Update category products 1`] = `
               />
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                data-test-id="addProducts"
+                data-test-id="add-products"
                 tabindex="0"
                 type="button"
               >
@@ -45395,7 +45300,7 @@ exports[`Storyshots Views / Categories / Update category products 1`] = `
               >
                 <tr
                   class="MuiTableRow-root-id CategoryProductList-link-id MuiTableRow-hover-id"
-                  data-test-id="productRow"
+                  data-test-id="product-row"
                 >
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -45436,7 +45341,7 @@ exports[`Storyshots Views / Categories / Update category products 1`] = `
                   </td>
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id CategoryProductList-colName-id"
-                    data-test-id="tableCellAvatar"
+                    data-test-id="table-cell-avatar"
                     thumbnail="placeholder255x255.png"
                   >
                     <div
@@ -45460,7 +45365,7 @@ exports[`Storyshots Views / Categories / Update category products 1`] = `
                 </tr>
                 <tr
                   class="MuiTableRow-root-id CategoryProductList-link-id MuiTableRow-hover-id"
-                  data-test-id="productRow"
+                  data-test-id="product-row"
                 >
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -45501,7 +45406,7 @@ exports[`Storyshots Views / Categories / Update category products 1`] = `
                   </td>
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id CategoryProductList-colName-id"
-                    data-test-id="tableCellAvatar"
+                    data-test-id="table-cell-avatar"
                     thumbnail="placeholder255x255.png"
                   >
                     <div
@@ -45525,7 +45430,7 @@ exports[`Storyshots Views / Categories / Update category products 1`] = `
                 </tr>
                 <tr
                   class="MuiTableRow-root-id CategoryProductList-link-id MuiTableRow-hover-id"
-                  data-test-id="productRow"
+                  data-test-id="product-row"
                 >
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -45566,7 +45471,7 @@ exports[`Storyshots Views / Categories / Update category products 1`] = `
                   </td>
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id CategoryProductList-colName-id"
-                    data-test-id="tableCellAvatar"
+                    data-test-id="table-cell-avatar"
                     thumbnail="placeholder255x255.png"
                   >
                     <div
@@ -45590,7 +45495,7 @@ exports[`Storyshots Views / Categories / Update category products 1`] = `
                 </tr>
                 <tr
                   class="MuiTableRow-root-id CategoryProductList-link-id MuiTableRow-hover-id"
-                  data-test-id="productRow"
+                  data-test-id="product-row"
                 >
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -45631,7 +45536,7 @@ exports[`Storyshots Views / Categories / Update category products 1`] = `
                   </td>
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id CategoryProductList-colName-id"
-                    data-test-id="tableCellAvatar"
+                    data-test-id="table-cell-avatar"
                     thumbnail="placeholder255x255.png"
                   >
                     <div
@@ -45655,7 +45560,7 @@ exports[`Storyshots Views / Categories / Update category products 1`] = `
                 </tr>
                 <tr
                   class="MuiTableRow-root-id CategoryProductList-link-id MuiTableRow-hover-id"
-                  data-test-id="productRow"
+                  data-test-id="product-row"
                 >
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -45696,7 +45601,7 @@ exports[`Storyshots Views / Categories / Update category products 1`] = `
                   </td>
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id CategoryProductList-colName-id"
-                    data-test-id="tableCellAvatar"
+                    data-test-id="table-cell-avatar"
                     thumbnail="placeholder255x255.png"
                   >
                     <div
@@ -45720,7 +45625,7 @@ exports[`Storyshots Views / Categories / Update category products 1`] = `
                 </tr>
                 <tr
                   class="MuiTableRow-root-id CategoryProductList-link-id MuiTableRow-hover-id"
-                  data-test-id="productRow"
+                  data-test-id="product-row"
                 >
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -45761,7 +45666,7 @@ exports[`Storyshots Views / Categories / Update category products 1`] = `
                   </td>
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id CategoryProductList-colName-id"
-                    data-test-id="tableCellAvatar"
+                    data-test-id="table-cell-avatar"
                     thumbnail="placeholder255x255.png"
                   >
                     <div
@@ -45785,7 +45690,7 @@ exports[`Storyshots Views / Categories / Update category products 1`] = `
                 </tr>
                 <tr
                   class="MuiTableRow-root-id CategoryProductList-link-id MuiTableRow-hover-id"
-                  data-test-id="productRow"
+                  data-test-id="product-row"
                 >
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -45826,7 +45731,7 @@ exports[`Storyshots Views / Categories / Update category products 1`] = `
                   </td>
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id CategoryProductList-colName-id"
-                    data-test-id="tableCellAvatar"
+                    data-test-id="table-cell-avatar"
                     thumbnail="placeholder255x255.png"
                   >
                     <div
@@ -45850,7 +45755,7 @@ exports[`Storyshots Views / Categories / Update category products 1`] = `
                 </tr>
                 <tr
                   class="MuiTableRow-root-id CategoryProductList-link-id MuiTableRow-hover-id"
-                  data-test-id="productRow"
+                  data-test-id="product-row"
                 >
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -45891,7 +45796,7 @@ exports[`Storyshots Views / Categories / Update category products 1`] = `
                   </td>
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id CategoryProductList-colName-id"
-                    data-test-id="tableCellAvatar"
+                    data-test-id="table-cell-avatar"
                     thumbnail="placeholder255x255.png"
                   >
                     <div
@@ -45915,7 +45820,7 @@ exports[`Storyshots Views / Categories / Update category products 1`] = `
                 </tr>
                 <tr
                   class="MuiTableRow-root-id CategoryProductList-link-id MuiTableRow-hover-id"
-                  data-test-id="productRow"
+                  data-test-id="product-row"
                 >
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -45956,7 +45861,7 @@ exports[`Storyshots Views / Categories / Update category products 1`] = `
                   </td>
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id CategoryProductList-colName-id"
-                    data-test-id="tableCellAvatar"
+                    data-test-id="table-cell-avatar"
                     thumbnail="placeholder255x255.png"
                   >
                     <div
@@ -45980,7 +45885,7 @@ exports[`Storyshots Views / Categories / Update category products 1`] = `
                 </tr>
                 <tr
                   class="MuiTableRow-root-id CategoryProductList-link-id MuiTableRow-hover-id"
-                  data-test-id="productRow"
+                  data-test-id="product-row"
                 >
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -46021,7 +45926,7 @@ exports[`Storyshots Views / Categories / Update category products 1`] = `
                   </td>
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id CategoryProductList-colName-id"
-                    data-test-id="tableCellAvatar"
+                    data-test-id="table-cell-avatar"
                     thumbnail="placeholder255x255.png"
                   >
                     <div
@@ -48136,7 +48041,7 @@ exports[`Storyshots Views / Channels / Channel details with errors 1`] = `
               </div>
               <p
                 class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
-                data-testid="slug-text-input-helper-text"
+                data-test-id="slug-text-input-helper-text"
               >
                 Slug must be unique
               </p>
@@ -49481,7 +49386,7 @@ exports[`Storyshots Views / Channels / Channel form with errors 1`] = `
         </div>
         <p
           class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id MuiFormHelperText-filled-id"
-          data-testid="slug-text-input-helper-text"
+          data-test-id="slug-text-input-helper-text"
         >
           Slug must be unique
         </p>
@@ -49721,7 +49626,7 @@ exports[`Storyshots Views / Channels / Channels list default 1`] = `
           </div>
           <button
             class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
-            data-test="add-channel"
+            data-test-id="add-channel"
             tabindex="0"
             type="button"
           >
@@ -49781,7 +49686,7 @@ exports[`Storyshots Views / Channels / Channels list default 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id ChannelsListPage-colName-id"
               >
                 <span
-                  data-test="name"
+                  data-test-id="name"
                 >
                   Test
                 </span>
@@ -49818,7 +49723,7 @@ exports[`Storyshots Views / Channels / Channels list default 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id ChannelsListPage-colName-id"
               >
                 <span
-                  data-test="name"
+                  data-test-id="name"
                 >
                   Channel
                 </span>
@@ -49855,7 +49760,7 @@ exports[`Storyshots Views / Channels / Channels list default 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id ChannelsListPage-colName-id"
               >
                 <span
-                  data-test="name"
+                  data-test-id="name"
                 >
                   Channel test
                 </span>
@@ -49892,7 +49797,7 @@ exports[`Storyshots Views / Channels / Channels list default 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id ChannelsListPage-colName-id"
               >
                 <span
-                  data-test="name"
+                  data-test-id="name"
                 >
                   Channel USD
                 </span>
@@ -49929,7 +49834,7 @@ exports[`Storyshots Views / Channels / Channels list default 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id ChannelsListPage-colName-id"
               >
                 <span
-                  data-test="name"
+                  data-test-id="name"
                 >
                   Channel
                 </span>
@@ -49966,7 +49871,7 @@ exports[`Storyshots Views / Channels / Channels list default 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id ChannelsListPage-colName-id"
               >
                 <span
-                  data-test="name"
+                  data-test-id="name"
                 >
                   Channel test
                 </span>
@@ -50003,7 +49908,7 @@ exports[`Storyshots Views / Channels / Channels list default 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id ChannelsListPage-colName-id"
               >
                 <span
-                  data-test="name"
+                  data-test-id="name"
                 >
                   Channel USD
                 </span>
@@ -50074,7 +49979,7 @@ exports[`Storyshots Views / Channels / Channels list empty 1`] = `
           </div>
           <button
             class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
-            data-test="add-channel"
+            data-test-id="add-channel"
             tabindex="0"
             type="button"
           >
@@ -50178,7 +50083,7 @@ exports[`Storyshots Views / Channels / Channels list limits reached 1`] = `
           </div>
           <button
             class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id MuiButton-disabled-id MuiButtonBase-disabled-id"
-            data-test="add-channel"
+            data-test-id="add-channel"
             disabled=""
             tabindex="-1"
             type="button"
@@ -50318,7 +50223,7 @@ exports[`Storyshots Views / Channels / Channels list limits reached 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id ChannelsListPage-colName-id"
               >
                 <span
-                  data-test="name"
+                  data-test-id="name"
                 >
                   Test
                 </span>
@@ -50355,7 +50260,7 @@ exports[`Storyshots Views / Channels / Channels list limits reached 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id ChannelsListPage-colName-id"
               >
                 <span
-                  data-test="name"
+                  data-test-id="name"
                 >
                   Channel
                 </span>
@@ -50392,7 +50297,7 @@ exports[`Storyshots Views / Channels / Channels list limits reached 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id ChannelsListPage-colName-id"
               >
                 <span
-                  data-test="name"
+                  data-test-id="name"
                 >
                   Channel test
                 </span>
@@ -50429,7 +50334,7 @@ exports[`Storyshots Views / Channels / Channels list limits reached 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id ChannelsListPage-colName-id"
               >
                 <span
-                  data-test="name"
+                  data-test-id="name"
                 >
                   Channel USD
                 </span>
@@ -50466,7 +50371,7 @@ exports[`Storyshots Views / Channels / Channels list limits reached 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id ChannelsListPage-colName-id"
               >
                 <span
-                  data-test="name"
+                  data-test-id="name"
                 >
                   Channel
                 </span>
@@ -50503,7 +50408,7 @@ exports[`Storyshots Views / Channels / Channels list limits reached 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id ChannelsListPage-colName-id"
               >
                 <span
-                  data-test="name"
+                  data-test-id="name"
                 >
                   Channel test
                 </span>
@@ -50540,7 +50445,7 @@ exports[`Storyshots Views / Channels / Channels list limits reached 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id ChannelsListPage-colName-id"
               >
                 <span
-                  data-test="name"
+                  data-test-id="name"
                 >
                   Channel USD
                 </span>
@@ -50606,7 +50511,7 @@ exports[`Storyshots Views / Channels / Channels list no limits 1`] = `
         >
           <button
             class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
-            data-test="add-channel"
+            data-test-id="add-channel"
             tabindex="0"
             type="button"
           >
@@ -50666,7 +50571,7 @@ exports[`Storyshots Views / Channels / Channels list no limits 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id ChannelsListPage-colName-id"
               >
                 <span
-                  data-test="name"
+                  data-test-id="name"
                 >
                   Test
                 </span>
@@ -50703,7 +50608,7 @@ exports[`Storyshots Views / Channels / Channels list no limits 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id ChannelsListPage-colName-id"
               >
                 <span
-                  data-test="name"
+                  data-test-id="name"
                 >
                   Channel
                 </span>
@@ -50740,7 +50645,7 @@ exports[`Storyshots Views / Channels / Channels list no limits 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id ChannelsListPage-colName-id"
               >
                 <span
-                  data-test="name"
+                  data-test-id="name"
                 >
                   Channel test
                 </span>
@@ -50777,7 +50682,7 @@ exports[`Storyshots Views / Channels / Channels list no limits 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id ChannelsListPage-colName-id"
               >
                 <span
-                  data-test="name"
+                  data-test-id="name"
                 >
                   Channel USD
                 </span>
@@ -50814,7 +50719,7 @@ exports[`Storyshots Views / Channels / Channels list no limits 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id ChannelsListPage-colName-id"
               >
                 <span
-                  data-test="name"
+                  data-test-id="name"
                 >
                   Channel
                 </span>
@@ -50851,7 +50756,7 @@ exports[`Storyshots Views / Channels / Channels list no limits 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id ChannelsListPage-colName-id"
               >
                 <span
-                  data-test="name"
+                  data-test-id="name"
                 >
                   Channel test
                 </span>
@@ -50888,7 +50793,7 @@ exports[`Storyshots Views / Channels / Channels list no limits 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id ChannelsListPage-colName-id"
               >
                 <span
-                  data-test="name"
+                  data-test-id="name"
                 >
                   Channel USD
                 </span>
@@ -51034,8 +50939,7 @@ exports[`Storyshots Views / Collections / Collection detailsCollection details d
               />
               <div
                 class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-                data-test="richTextEditor"
-                data-test-id="description"
+                data-test-id="rich-text-editor-description"
               >
                 <label
                   class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-focused-id MuiInputLabel-focused-id"
@@ -51097,7 +51001,7 @@ exports[`Storyshots Views / Collections / Collection detailsCollection details d
             >
               <div
                 class="MediaTile-mediaContainer-id"
-                data-test="product-image"
+                data-test-id="product-image"
               >
                 <div
                   class="MediaTile-mediaOverlay-id"
@@ -51196,8 +51100,8 @@ exports[`Storyshots Views / Collections / Collection detailsCollection details d
           />
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="metadataEditor"
             data-test-expanded="true"
+            data-test-id="metadata-editor"
             data-test-is-private="false"
           >
             <div
@@ -51212,7 +51116,7 @@ exports[`Storyshots Views / Collections / Collection detailsCollection details d
                   Metadata
                   <button
                     class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test="expand"
+                    data-test-id="expand"
                     tabindex="0"
                     type="button"
                   >
@@ -51284,7 +51188,7 @@ exports[`Storyshots Views / Collections / Collection detailsCollection details d
               >
                 <tr
                   class="MuiTableRow-root-id MuiTableRow-hover-id"
-                  data-test="field"
+                  data-test-id="field"
                 >
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colName-id"
@@ -51365,8 +51269,7 @@ exports[`Storyshots Views / Collections / Collection detailsCollection details d
                   >
                     <button
                       class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                      data-test="deleteField"
-                      data-test-id="0"
+                      data-test-id="delete-field-0"
                       tabindex="0"
                       type="button"
                     >
@@ -51393,7 +51296,7 @@ exports[`Storyshots Views / Collections / Collection detailsCollection details d
             >
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-                data-test="addField"
+                data-test-id="add-field"
                 tabindex="0"
                 type="button"
               >
@@ -51410,8 +51313,8 @@ exports[`Storyshots Views / Collections / Collection detailsCollection details d
           />
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="metadataEditor"
             data-test-expanded="true"
+            data-test-id="metadata-editor"
             data-test-is-private="true"
           >
             <div
@@ -51426,7 +51329,7 @@ exports[`Storyshots Views / Collections / Collection detailsCollection details d
                   Private Metadata
                   <button
                     class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test="expand"
+                    data-test-id="expand"
                     tabindex="0"
                     type="button"
                   >
@@ -51472,7 +51375,7 @@ exports[`Storyshots Views / Collections / Collection detailsCollection details d
             >
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-                data-test="addField"
+                data-test-id="add-field"
                 tabindex="0"
                 type="button"
               >
@@ -51703,7 +51606,7 @@ exports[`Storyshots Views / Collections / Collection detailsCollection details d
                     </td>
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id CollectionProducts-colName-id"
-                      data-test-id="tableCellAvatar"
+                      data-test-id="table-cell-avatar"
                       thumbnail="placeholder60x60.png"
                     >
                       <div
@@ -51823,7 +51726,7 @@ exports[`Storyshots Views / Collections / Collection detailsCollection details d
                     </td>
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id CollectionProducts-colName-id"
-                      data-test-id="tableCellAvatar"
+                      data-test-id="table-cell-avatar"
                       thumbnail="placeholder60x60.png"
                     >
                       <div
@@ -51943,7 +51846,7 @@ exports[`Storyshots Views / Collections / Collection detailsCollection details d
                     </td>
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id CollectionProducts-colName-id"
-                      data-test-id="tableCellAvatar"
+                      data-test-id="table-cell-avatar"
                       thumbnail="placeholder60x60.png"
                     >
                       <div
@@ -52063,7 +51966,7 @@ exports[`Storyshots Views / Collections / Collection detailsCollection details d
                     </td>
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id CollectionProducts-colName-id"
-                      data-test-id="tableCellAvatar"
+                      data-test-id="table-cell-avatar"
                       thumbnail="placeholder60x60.png"
                     >
                       <div
@@ -52225,7 +52128,7 @@ exports[`Storyshots Views / Collections / Collection detailsCollection details d
                 />
                 <div
                   class="MuiPaper-root-id MuiAccordion-root-id ChannelContentWrapperExpander-root-id MuiAccordion-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
-                  data-test="channel-availability-item"
+                  data-test-id="channel-availability-item"
                 >
                   <div
                     aria-disabled="false"
@@ -52538,8 +52441,7 @@ exports[`Storyshots Views / Collections / Collection detailsCollection details f
               />
               <div
                 class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-                data-test="richTextEditor"
-                data-test-id="description"
+                data-test-id="rich-text-editor-description"
               >
                 <label
                   class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-focused-id MuiInputLabel-focused-id"
@@ -52603,7 +52505,7 @@ exports[`Storyshots Views / Collections / Collection detailsCollection details f
             >
               <div
                 class="MediaTile-mediaContainer-id"
-                data-test="product-image"
+                data-test-id="product-image"
               >
                 <div
                   class="MediaTile-mediaOverlay-id"
@@ -52702,8 +52604,8 @@ exports[`Storyshots Views / Collections / Collection detailsCollection details f
           />
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="metadataEditor"
             data-test-expanded="true"
+            data-test-id="metadata-editor"
             data-test-is-private="false"
           >
             <div
@@ -52718,7 +52620,7 @@ exports[`Storyshots Views / Collections / Collection detailsCollection details f
                   Metadata
                   <button
                     class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test="expand"
+                    data-test-id="expand"
                     tabindex="0"
                     type="button"
                   >
@@ -52790,7 +52692,7 @@ exports[`Storyshots Views / Collections / Collection detailsCollection details f
               >
                 <tr
                   class="MuiTableRow-root-id MuiTableRow-hover-id"
-                  data-test="field"
+                  data-test-id="field"
                 >
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colName-id"
@@ -52871,8 +52773,7 @@ exports[`Storyshots Views / Collections / Collection detailsCollection details f
                   >
                     <button
                       class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                      data-test="deleteField"
-                      data-test-id="0"
+                      data-test-id="delete-field-0"
                       tabindex="0"
                       type="button"
                     >
@@ -52899,7 +52800,7 @@ exports[`Storyshots Views / Collections / Collection detailsCollection details f
             >
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-                data-test="addField"
+                data-test-id="add-field"
                 tabindex="0"
                 type="button"
               >
@@ -52916,8 +52817,8 @@ exports[`Storyshots Views / Collections / Collection detailsCollection details f
           />
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="metadataEditor"
             data-test-expanded="true"
+            data-test-id="metadata-editor"
             data-test-is-private="true"
           >
             <div
@@ -52932,7 +52833,7 @@ exports[`Storyshots Views / Collections / Collection detailsCollection details f
                   Private Metadata
                   <button
                     class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test="expand"
+                    data-test-id="expand"
                     tabindex="0"
                     type="button"
                   >
@@ -52978,7 +52879,7 @@ exports[`Storyshots Views / Collections / Collection detailsCollection details f
             >
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-                data-test="addField"
+                data-test-id="add-field"
                 tabindex="0"
                 type="button"
               >
@@ -53209,7 +53110,7 @@ exports[`Storyshots Views / Collections / Collection detailsCollection details f
                     </td>
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id CollectionProducts-colName-id"
-                      data-test-id="tableCellAvatar"
+                      data-test-id="table-cell-avatar"
                       thumbnail="placeholder60x60.png"
                     >
                       <div
@@ -53329,7 +53230,7 @@ exports[`Storyshots Views / Collections / Collection detailsCollection details f
                     </td>
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id CollectionProducts-colName-id"
-                      data-test-id="tableCellAvatar"
+                      data-test-id="table-cell-avatar"
                       thumbnail="placeholder60x60.png"
                     >
                       <div
@@ -53449,7 +53350,7 @@ exports[`Storyshots Views / Collections / Collection detailsCollection details f
                     </td>
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id CollectionProducts-colName-id"
-                      data-test-id="tableCellAvatar"
+                      data-test-id="table-cell-avatar"
                       thumbnail="placeholder60x60.png"
                     >
                       <div
@@ -53569,7 +53470,7 @@ exports[`Storyshots Views / Collections / Collection detailsCollection details f
                     </td>
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id CollectionProducts-colName-id"
-                      data-test-id="tableCellAvatar"
+                      data-test-id="table-cell-avatar"
                       thumbnail="placeholder60x60.png"
                     >
                       <div
@@ -53731,7 +53632,7 @@ exports[`Storyshots Views / Collections / Collection detailsCollection details f
                 />
                 <div
                   class="MuiPaper-root-id MuiAccordion-root-id ChannelContentWrapperExpander-root-id MuiAccordion-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
-                  data-test="channel-availability-item"
+                  data-test-id="channel-availability-item"
                 >
                   <div
                     aria-disabled="false"
@@ -54046,8 +53947,7 @@ exports[`Storyshots Views / Collections / Collection detailsCollection details l
               />
               <div
                 class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-                data-test="richTextEditor"
-                data-test-id="description"
+                data-test-id="rich-text-editor-description"
               >
                 <label
                   class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiFormLabel-focused-id MuiInputLabel-focused-id"
@@ -54126,8 +54026,8 @@ exports[`Storyshots Views / Collections / Collection detailsCollection details l
           />
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="metadataEditor"
             data-test-expanded="true"
+            data-test-id="metadata-editor"
             data-test-is-private="false"
           >
             <div
@@ -54142,7 +54042,7 @@ exports[`Storyshots Views / Collections / Collection detailsCollection details l
                   Metadata
                   <button
                     class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test="expand"
+                    data-test-id="expand"
                     tabindex="0"
                     type="button"
                   >
@@ -54187,8 +54087,8 @@ exports[`Storyshots Views / Collections / Collection detailsCollection details l
           />
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="metadataEditor"
             data-test-expanded="true"
+            data-test-id="metadata-editor"
             data-test-is-private="true"
           >
             <div
@@ -54203,7 +54103,7 @@ exports[`Storyshots Views / Collections / Collection detailsCollection details l
                   Private Metadata
                   <button
                     class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test="expand"
+                    data-test-id="expand"
                     tabindex="0"
                     type="button"
                   >
@@ -54472,7 +54372,7 @@ exports[`Storyshots Views / Collections / Collection detailsCollection details l
                     </td>
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id CollectionProducts-colName-id"
-                      data-test-id="tableCellAvatar"
+                      data-test-id="table-cell-avatar"
                     >
                       <div
                         class="Avatar-content-id"
@@ -54635,7 +54535,7 @@ exports[`Storyshots Views / Collections / Collection detailsCollection details l
                 />
                 <div
                   class="MuiPaper-root-id MuiAccordion-root-id ChannelContentWrapperExpander-root-id MuiAccordion-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
-                  data-test="channel-availability-item"
+                  data-test-id="channel-availability-item"
                 >
                   <div
                     aria-disabled="false"
@@ -54943,8 +54843,7 @@ exports[`Storyshots Views / Collections / Collection detailsCollection details n
               />
               <div
                 class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-                data-test="richTextEditor"
-                data-test-id="description"
+                data-test-id="rich-text-editor-description"
               >
                 <label
                   class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-focused-id MuiInputLabel-focused-id"
@@ -55006,7 +54905,7 @@ exports[`Storyshots Views / Collections / Collection detailsCollection details n
             >
               <div
                 class="MediaTile-mediaContainer-id"
-                data-test="product-image"
+                data-test-id="product-image"
               >
                 <div
                   class="MediaTile-mediaOverlay-id"
@@ -55105,8 +55004,8 @@ exports[`Storyshots Views / Collections / Collection detailsCollection details n
           />
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="metadataEditor"
             data-test-expanded="true"
+            data-test-id="metadata-editor"
             data-test-is-private="false"
           >
             <div
@@ -55121,7 +55020,7 @@ exports[`Storyshots Views / Collections / Collection detailsCollection details n
                   Metadata
                   <button
                     class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test="expand"
+                    data-test-id="expand"
                     tabindex="0"
                     type="button"
                   >
@@ -55193,7 +55092,7 @@ exports[`Storyshots Views / Collections / Collection detailsCollection details n
               >
                 <tr
                   class="MuiTableRow-root-id MuiTableRow-hover-id"
-                  data-test="field"
+                  data-test-id="field"
                 >
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colName-id"
@@ -55274,8 +55173,7 @@ exports[`Storyshots Views / Collections / Collection detailsCollection details n
                   >
                     <button
                       class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                      data-test="deleteField"
-                      data-test-id="0"
+                      data-test-id="delete-field-0"
                       tabindex="0"
                       type="button"
                     >
@@ -55302,7 +55200,7 @@ exports[`Storyshots Views / Collections / Collection detailsCollection details n
             >
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-                data-test="addField"
+                data-test-id="add-field"
                 tabindex="0"
                 type="button"
               >
@@ -55319,8 +55217,8 @@ exports[`Storyshots Views / Collections / Collection detailsCollection details n
           />
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="metadataEditor"
             data-test-expanded="true"
+            data-test-id="metadata-editor"
             data-test-is-private="true"
           >
             <div
@@ -55335,7 +55233,7 @@ exports[`Storyshots Views / Collections / Collection detailsCollection details n
                   Private Metadata
                   <button
                     class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test="expand"
+                    data-test-id="expand"
                     tabindex="0"
                     type="button"
                   >
@@ -55381,7 +55279,7 @@ exports[`Storyshots Views / Collections / Collection detailsCollection details n
             >
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-                data-test="addField"
+                data-test-id="add-field"
                 tabindex="0"
                 type="button"
               >
@@ -55626,7 +55524,7 @@ exports[`Storyshots Views / Collections / Collection detailsCollection details n
                 />
                 <div
                   class="MuiPaper-root-id MuiAccordion-root-id ChannelContentWrapperExpander-root-id MuiAccordion-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
-                  data-test="channel-availability-item"
+                  data-test-id="channel-availability-item"
                 >
                   <div
                     aria-disabled="false"
@@ -55945,7 +55843,7 @@ exports[`Storyshots Views / Collections / Collection list default 1`] = `
         </div>
         <div
           class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
-          data-test-id="searchInput"
+          data-test-id="search-input"
         >
           <div
             class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
@@ -56163,8 +56061,7 @@ exports[`Storyshots Views / Collections / Collection list default 1`] = `
           >
             <tr
               class="MuiTableRow-root-id CollectionList-tableRow-id MuiTableRow-hover-id"
-              data-test="id"
-              data-test-id="Q29sbGVjdGlvbjox"
+              data-test-id="id-Q29sbGVjdGlvbjox"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -56205,7 +56102,7 @@ exports[`Storyshots Views / Collections / Collection list default 1`] = `
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id CollectionList-colName-id"
-                data-test="name"
+                data-test-id="name"
               >
                 Summer collection
               </td>
@@ -56216,8 +56113,8 @@ exports[`Storyshots Views / Collections / Collection list default 1`] = `
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id CollectionList-colAvailability-id"
-                data-test="availability"
                 data-test-availability="true"
+                data-test-id="availability"
               >
                 <div
                   class="StatusLabel-container-id"
@@ -56239,8 +56136,7 @@ exports[`Storyshots Views / Collections / Collection list default 1`] = `
             </tr>
             <tr
               class="MuiTableRow-root-id CollectionList-tableRow-id MuiTableRow-hover-id"
-              data-test="id"
-              data-test-id="Q29sbGVjdGlvbjoy"
+              data-test-id="id-Q29sbGVjdGlvbjoy"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -56281,7 +56177,7 @@ exports[`Storyshots Views / Collections / Collection list default 1`] = `
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id CollectionList-colName-id"
-                data-test="name"
+                data-test-id="name"
               >
                 Winter sale
               </td>
@@ -56292,8 +56188,8 @@ exports[`Storyshots Views / Collections / Collection list default 1`] = `
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id CollectionList-colAvailability-id"
-                data-test="availability"
                 data-test-availability="true"
+                data-test-id="availability"
               >
                 <div>
                   <div
@@ -56323,8 +56219,7 @@ exports[`Storyshots Views / Collections / Collection list default 1`] = `
             </tr>
             <tr
               class="MuiTableRow-root-id CollectionList-tableRow-id MuiTableRow-hover-id"
-              data-test="id"
-              data-test-id="Q29sbGVjdGlvbjoz"
+              data-test-id="id-Q29sbGVjdGlvbjoz"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -56365,7 +56260,7 @@ exports[`Storyshots Views / Collections / Collection list default 1`] = `
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id CollectionList-colName-id"
-                data-test="name"
+                data-test-id="name"
               >
                 Vintage vibes
               </td>
@@ -56376,8 +56271,8 @@ exports[`Storyshots Views / Collections / Collection list default 1`] = `
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id CollectionList-colAvailability-id"
-                data-test="availability"
                 data-test-availability="true"
+                data-test-id="availability"
               >
                 <div>
                   <div
@@ -56407,8 +56302,7 @@ exports[`Storyshots Views / Collections / Collection list default 1`] = `
             </tr>
             <tr
               class="MuiTableRow-root-id CollectionList-tableRow-id MuiTableRow-hover-id"
-              data-test="id"
-              data-test-id="Q29sbGVjdGlvbjoa"
+              data-test-id="id-Q29sbGVjdGlvbjoa"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -56449,7 +56343,7 @@ exports[`Storyshots Views / Collections / Collection list default 1`] = `
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id CollectionList-colName-id"
-                data-test="name"
+                data-test-id="name"
               >
                 Merry Christmas
               </td>
@@ -56460,8 +56354,8 @@ exports[`Storyshots Views / Collections / Collection list default 1`] = `
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id CollectionList-colAvailability-id"
-                data-test="availability"
                 data-test-availability="true"
+                data-test-id="availability"
               >
                 <div>
                   <div
@@ -56491,8 +56385,7 @@ exports[`Storyshots Views / Collections / Collection list default 1`] = `
             </tr>
             <tr
               class="MuiTableRow-root-id CollectionList-tableRow-id MuiTableRow-hover-id"
-              data-test="id"
-              data-test-id="Q29sbGVjdGlvbjob"
+              data-test-id="id-Q29sbGVjdGlvbjob"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -56533,7 +56426,7 @@ exports[`Storyshots Views / Collections / Collection list default 1`] = `
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id CollectionList-colName-id"
-                data-test="name"
+                data-test-id="name"
               >
                 80s Miami
               </td>
@@ -56544,8 +56437,8 @@ exports[`Storyshots Views / Collections / Collection list default 1`] = `
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id CollectionList-colAvailability-id"
-                data-test="availability"
                 data-test-availability="true"
+                data-test-id="availability"
               >
                 <div>
                   <div
@@ -56575,8 +56468,7 @@ exports[`Storyshots Views / Collections / Collection list default 1`] = `
             </tr>
             <tr
               class="MuiTableRow-root-id CollectionList-tableRow-id MuiTableRow-hover-id"
-              data-test="id"
-              data-test-id="Q29sbGVjdGlvbjoc"
+              data-test-id="id-Q29sbGVjdGlvbjoc"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -56617,7 +56509,7 @@ exports[`Storyshots Views / Collections / Collection list default 1`] = `
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id CollectionList-colName-id"
-                data-test="name"
+                data-test-id="name"
               >
                 Yellow Submarine 2019
               </td>
@@ -56628,8 +56520,8 @@ exports[`Storyshots Views / Collections / Collection list default 1`] = `
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id CollectionList-colAvailability-id"
-                data-test="availability"
                 data-test-availability="true"
+                data-test-id="availability"
               >
                 <div>
                   <div
@@ -56767,7 +56659,7 @@ exports[`Storyshots Views / Collections / Collection list loading 1`] = `
         </div>
         <div
           class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
-          data-test-id="searchInput"
+          data-test-id="search-input"
         >
           <div
             class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
@@ -56988,7 +56880,7 @@ exports[`Storyshots Views / Collections / Collection list loading 1`] = `
           >
             <tr
               class="MuiTableRow-root-id CollectionList-tableRow-id"
-              data-test="id"
+              data-test-id="id-undefined"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -57031,7 +56923,7 @@ exports[`Storyshots Views / Collections / Collection list loading 1`] = `
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id CollectionList-colName-id"
-                data-test="name"
+                data-test-id="name"
               >
                 <span
                   class="Skeleton-skeleton-id"
@@ -57052,8 +56944,8 @@ exports[`Storyshots Views / Collections / Collection list loading 1`] = `
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id CollectionList-colAvailability-id"
-                data-test="availability"
                 data-test-availability="false"
+                data-test-id="availability"
               >
                 <span
                   class="Skeleton-skeleton-id"
@@ -57172,7 +57064,7 @@ exports[`Storyshots Views / Collections / Collection list no data 1`] = `
         </div>
         <div
           class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
-          data-test-id="searchInput"
+          data-test-id="search-input"
         >
           <div
             class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
@@ -57458,8 +57350,7 @@ exports[`Storyshots Views / Collections / Create collection default 1`] = `
               />
               <div
                 class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-                data-test="richTextEditor"
-                data-test-id="description"
+                data-test-id="rich-text-editor-description"
               >
                 <label
                   class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-focused-id MuiInputLabel-focused-id"
@@ -57603,8 +57494,8 @@ exports[`Storyshots Views / Collections / Create collection default 1`] = `
           />
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="metadataEditor"
             data-test-expanded="true"
+            data-test-id="metadata-editor"
             data-test-is-private="false"
           >
             <div
@@ -57619,7 +57510,7 @@ exports[`Storyshots Views / Collections / Create collection default 1`] = `
                   Metadata
                   <button
                     class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test="expand"
+                    data-test-id="expand"
                     tabindex="0"
                     type="button"
                   >
@@ -57665,7 +57556,7 @@ exports[`Storyshots Views / Collections / Create collection default 1`] = `
             >
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-                data-test="addField"
+                data-test-id="add-field"
                 tabindex="0"
                 type="button"
               >
@@ -57682,8 +57573,8 @@ exports[`Storyshots Views / Collections / Create collection default 1`] = `
           />
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="metadataEditor"
             data-test-expanded="true"
+            data-test-id="metadata-editor"
             data-test-is-private="true"
           >
             <div
@@ -57698,7 +57589,7 @@ exports[`Storyshots Views / Collections / Create collection default 1`] = `
                   Private Metadata
                   <button
                     class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test="expand"
+                    data-test-id="expand"
                     tabindex="0"
                     type="button"
                   >
@@ -57744,7 +57635,7 @@ exports[`Storyshots Views / Collections / Create collection default 1`] = `
             >
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-                data-test="addField"
+                data-test-id="add-field"
                 tabindex="0"
                 type="button"
               >
@@ -57790,7 +57681,7 @@ exports[`Storyshots Views / Collections / Create collection default 1`] = `
               />
               <div
                 class="MuiPaper-root-id MuiAccordion-root-id ChannelContentWrapperExpander-root-id MuiAccordion-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
-                data-test="channel-availability-item"
+                data-test-id="channel-availability-item"
               >
                 <div
                   aria-disabled="false"
@@ -58000,7 +57891,7 @@ exports[`Storyshots Views / Collections / Create collection default 1`] = `
               </div>
               <div
                 class="MuiPaper-root-id MuiAccordion-root-id ChannelContentWrapperExpander-root-id MuiAccordion-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
-                data-test="channel-availability-item"
+                data-test-id="channel-availability-item"
               >
                 <div
                   aria-disabled="false"
@@ -58210,7 +58101,7 @@ exports[`Storyshots Views / Collections / Create collection default 1`] = `
               </div>
               <div
                 class="MuiPaper-root-id MuiAccordion-root-id ChannelContentWrapperExpander-root-id MuiAccordion-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
-                data-test="channel-availability-item"
+                data-test-id="channel-availability-item"
               >
                 <div
                   aria-disabled="false"
@@ -58420,7 +58311,7 @@ exports[`Storyshots Views / Collections / Create collection default 1`] = `
               </div>
               <div
                 class="MuiPaper-root-id MuiAccordion-root-id ChannelContentWrapperExpander-root-id MuiAccordion-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
-                data-test="channel-availability-item"
+                data-test-id="channel-availability-item"
               >
                 <div
                   aria-disabled="false"
@@ -58630,7 +58521,7 @@ exports[`Storyshots Views / Collections / Create collection default 1`] = `
               </div>
               <div
                 class="MuiPaper-root-id MuiAccordion-root-id ChannelContentWrapperExpander-root-id MuiAccordion-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
-                data-test="channel-availability-item"
+                data-test-id="channel-availability-item"
               >
                 <div
                   aria-disabled="false"
@@ -58840,7 +58731,7 @@ exports[`Storyshots Views / Collections / Create collection default 1`] = `
               </div>
               <div
                 class="MuiPaper-root-id MuiAccordion-root-id ChannelContentWrapperExpander-root-id MuiAccordion-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
-                data-test="channel-availability-item"
+                data-test-id="channel-availability-item"
               >
                 <div
                   aria-disabled="false"
@@ -59050,7 +58941,7 @@ exports[`Storyshots Views / Collections / Create collection default 1`] = `
               </div>
               <div
                 class="MuiPaper-root-id MuiAccordion-root-id ChannelContentWrapperExpander-root-id MuiAccordion-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
-                data-test="channel-availability-item"
+                data-test-id="channel-availability-item"
               >
                 <div
                   aria-disabled="false"
@@ -59362,8 +59253,7 @@ exports[`Storyshots Views / Collections / Create collection form errors 1`] = `
               />
               <div
                 class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-                data-test="richTextEditor"
-                data-test-id="description"
+                data-test-id="rich-text-editor-description"
               >
                 <label
                   class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-focused-id MuiInputLabel-focused-id"
@@ -59509,8 +59399,8 @@ exports[`Storyshots Views / Collections / Create collection form errors 1`] = `
           />
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="metadataEditor"
             data-test-expanded="true"
+            data-test-id="metadata-editor"
             data-test-is-private="false"
           >
             <div
@@ -59525,7 +59415,7 @@ exports[`Storyshots Views / Collections / Create collection form errors 1`] = `
                   Metadata
                   <button
                     class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test="expand"
+                    data-test-id="expand"
                     tabindex="0"
                     type="button"
                   >
@@ -59571,7 +59461,7 @@ exports[`Storyshots Views / Collections / Create collection form errors 1`] = `
             >
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-                data-test="addField"
+                data-test-id="add-field"
                 tabindex="0"
                 type="button"
               >
@@ -59588,8 +59478,8 @@ exports[`Storyshots Views / Collections / Create collection form errors 1`] = `
           />
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="metadataEditor"
             data-test-expanded="true"
+            data-test-id="metadata-editor"
             data-test-is-private="true"
           >
             <div
@@ -59604,7 +59494,7 @@ exports[`Storyshots Views / Collections / Create collection form errors 1`] = `
                   Private Metadata
                   <button
                     class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test="expand"
+                    data-test-id="expand"
                     tabindex="0"
                     type="button"
                   >
@@ -59650,7 +59540,7 @@ exports[`Storyshots Views / Collections / Create collection form errors 1`] = `
             >
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-                data-test="addField"
+                data-test-id="add-field"
                 tabindex="0"
                 type="button"
               >
@@ -59696,7 +59586,7 @@ exports[`Storyshots Views / Collections / Create collection form errors 1`] = `
               />
               <div
                 class="MuiPaper-root-id MuiAccordion-root-id ChannelContentWrapperExpander-root-id MuiAccordion-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
-                data-test="channel-availability-item"
+                data-test-id="channel-availability-item"
               >
                 <div
                   aria-disabled="false"
@@ -59906,7 +59796,7 @@ exports[`Storyshots Views / Collections / Create collection form errors 1`] = `
               </div>
               <div
                 class="MuiPaper-root-id MuiAccordion-root-id ChannelContentWrapperExpander-root-id MuiAccordion-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
-                data-test="channel-availability-item"
+                data-test-id="channel-availability-item"
               >
                 <div
                   aria-disabled="false"
@@ -60116,7 +60006,7 @@ exports[`Storyshots Views / Collections / Create collection form errors 1`] = `
               </div>
               <div
                 class="MuiPaper-root-id MuiAccordion-root-id ChannelContentWrapperExpander-root-id MuiAccordion-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
-                data-test="channel-availability-item"
+                data-test-id="channel-availability-item"
               >
                 <div
                   aria-disabled="false"
@@ -60326,7 +60216,7 @@ exports[`Storyshots Views / Collections / Create collection form errors 1`] = `
               </div>
               <div
                 class="MuiPaper-root-id MuiAccordion-root-id ChannelContentWrapperExpander-root-id MuiAccordion-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
-                data-test="channel-availability-item"
+                data-test-id="channel-availability-item"
               >
                 <div
                   aria-disabled="false"
@@ -60536,7 +60426,7 @@ exports[`Storyshots Views / Collections / Create collection form errors 1`] = `
               </div>
               <div
                 class="MuiPaper-root-id MuiAccordion-root-id ChannelContentWrapperExpander-root-id MuiAccordion-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
-                data-test="channel-availability-item"
+                data-test-id="channel-availability-item"
               >
                 <div
                   aria-disabled="false"
@@ -60746,7 +60636,7 @@ exports[`Storyshots Views / Collections / Create collection form errors 1`] = `
               </div>
               <div
                 class="MuiPaper-root-id MuiAccordion-root-id ChannelContentWrapperExpander-root-id MuiAccordion-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
-                data-test="channel-availability-item"
+                data-test-id="channel-availability-item"
               >
                 <div
                   aria-disabled="false"
@@ -60956,7 +60846,7 @@ exports[`Storyshots Views / Collections / Create collection form errors 1`] = `
               </div>
               <div
                 class="MuiPaper-root-id MuiAccordion-root-id ChannelContentWrapperExpander-root-id MuiAccordion-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
-                data-test="channel-availability-item"
+                data-test-id="channel-availability-item"
               >
                 <div
                   aria-disabled="false"
@@ -61264,8 +61154,7 @@ exports[`Storyshots Views / Collections / Create collection loading 1`] = `
               />
               <div
                 class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-                data-test="richTextEditor"
-                data-test-id="description"
+                data-test-id="rich-text-editor-description"
               >
                 <label
                   class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiFormLabel-focused-id MuiInputLabel-focused-id"
@@ -61409,8 +61298,8 @@ exports[`Storyshots Views / Collections / Create collection loading 1`] = `
           />
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="metadataEditor"
             data-test-expanded="true"
+            data-test-id="metadata-editor"
             data-test-is-private="false"
           >
             <div
@@ -61425,7 +61314,7 @@ exports[`Storyshots Views / Collections / Create collection loading 1`] = `
                   Metadata
                   <button
                     class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test="expand"
+                    data-test-id="expand"
                     tabindex="0"
                     type="button"
                   >
@@ -61471,7 +61360,7 @@ exports[`Storyshots Views / Collections / Create collection loading 1`] = `
             >
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-                data-test="addField"
+                data-test-id="add-field"
                 tabindex="0"
                 type="button"
               >
@@ -61488,8 +61377,8 @@ exports[`Storyshots Views / Collections / Create collection loading 1`] = `
           />
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="metadataEditor"
             data-test-expanded="true"
+            data-test-id="metadata-editor"
             data-test-is-private="true"
           >
             <div
@@ -61504,7 +61393,7 @@ exports[`Storyshots Views / Collections / Create collection loading 1`] = `
                   Private Metadata
                   <button
                     class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test="expand"
+                    data-test-id="expand"
                     tabindex="0"
                     type="button"
                   >
@@ -61550,7 +61439,7 @@ exports[`Storyshots Views / Collections / Create collection loading 1`] = `
             >
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-                data-test="addField"
+                data-test-id="add-field"
                 tabindex="0"
                 type="button"
               >
@@ -61596,7 +61485,7 @@ exports[`Storyshots Views / Collections / Create collection loading 1`] = `
               />
               <div
                 class="MuiPaper-root-id MuiAccordion-root-id ChannelContentWrapperExpander-root-id MuiAccordion-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
-                data-test="channel-availability-item"
+                data-test-id="channel-availability-item"
               >
                 <div
                   aria-disabled="false"
@@ -61806,7 +61695,7 @@ exports[`Storyshots Views / Collections / Create collection loading 1`] = `
               </div>
               <div
                 class="MuiPaper-root-id MuiAccordion-root-id ChannelContentWrapperExpander-root-id MuiAccordion-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
-                data-test="channel-availability-item"
+                data-test-id="channel-availability-item"
               >
                 <div
                   aria-disabled="false"
@@ -62016,7 +61905,7 @@ exports[`Storyshots Views / Collections / Create collection loading 1`] = `
               </div>
               <div
                 class="MuiPaper-root-id MuiAccordion-root-id ChannelContentWrapperExpander-root-id MuiAccordion-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
-                data-test="channel-availability-item"
+                data-test-id="channel-availability-item"
               >
                 <div
                   aria-disabled="false"
@@ -62226,7 +62115,7 @@ exports[`Storyshots Views / Collections / Create collection loading 1`] = `
               </div>
               <div
                 class="MuiPaper-root-id MuiAccordion-root-id ChannelContentWrapperExpander-root-id MuiAccordion-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
-                data-test="channel-availability-item"
+                data-test-id="channel-availability-item"
               >
                 <div
                   aria-disabled="false"
@@ -62436,7 +62325,7 @@ exports[`Storyshots Views / Collections / Create collection loading 1`] = `
               </div>
               <div
                 class="MuiPaper-root-id MuiAccordion-root-id ChannelContentWrapperExpander-root-id MuiAccordion-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
-                data-test="channel-availability-item"
+                data-test-id="channel-availability-item"
               >
                 <div
                   aria-disabled="false"
@@ -62646,7 +62535,7 @@ exports[`Storyshots Views / Collections / Create collection loading 1`] = `
               </div>
               <div
                 class="MuiPaper-root-id MuiAccordion-root-id ChannelContentWrapperExpander-root-id MuiAccordion-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
-                data-test="channel-availability-item"
+                data-test-id="channel-availability-item"
               >
                 <div
                   aria-disabled="false"
@@ -62856,7 +62745,7 @@ exports[`Storyshots Views / Collections / Create collection loading 1`] = `
               </div>
               <div
                 class="MuiPaper-root-id MuiAccordion-root-id ChannelContentWrapperExpander-root-id MuiAccordion-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
-                data-test="channel-availability-item"
+                data-test-id="channel-availability-item"
               >
                 <div
                   aria-disabled="false"
@@ -63136,9 +63025,7 @@ exports[`Storyshots Views / Configuration default 1`] = `
         >
           <div
             class="MuiPaper-root-id MuiCard-root-id NavigationCard-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="settingsSubsection"
-            data-test-id="configurationMenuAttributes"
-            data-testid="attributes"
+            data-test-id="configuration-menu-attributes-settings-subsection-attributes"
           >
             <div
               class="MuiCardContent-root-id NavigationCard-cardContent-id"
@@ -63185,9 +63072,7 @@ exports[`Storyshots Views / Configuration default 1`] = `
         >
           <div
             class="MuiPaper-root-id MuiCard-root-id NavigationCard-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="settingsSubsection"
-            data-test-id="configurationMenuProductTypes"
-            data-testid="product types"
+            data-test-id="configuration-menu-product-types-settings-subsection-product types"
           >
             <div
               class="MuiCardContent-root-id NavigationCard-cardContent-id"
@@ -63251,9 +63136,7 @@ exports[`Storyshots Views / Configuration default 1`] = `
         >
           <div
             class="MuiPaper-root-id MuiCard-root-id NavigationCard-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="settingsSubsection"
-            data-test-id="configurationMenuTaxes"
-            data-testid="taxes"
+            data-test-id="configuration-menu-taxes-settings-subsection-taxes"
           >
             <div
               class="MuiCardContent-root-id NavigationCard-cardContent-id"
@@ -63317,9 +63200,7 @@ exports[`Storyshots Views / Configuration default 1`] = `
         >
           <div
             class="MuiPaper-root-id MuiCard-root-id NavigationCard-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="settingsSubsection"
-            data-test-id="configurationMenuStaff"
-            data-testid="staff members"
+            data-test-id="configuration-menu-staff-settings-subsection-staff members"
           >
             <div
               class="MuiCardContent-root-id NavigationCard-cardContent-id"
@@ -63366,9 +63247,7 @@ exports[`Storyshots Views / Configuration default 1`] = `
         >
           <div
             class="MuiPaper-root-id MuiCard-root-id NavigationCard-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="settingsSubsection"
-            data-test-id="configurationMenuPermissionGroups"
-            data-testid="permission groups"
+            data-test-id="configuration-menu-permission-groups-settings-subsection-permission groups"
           >
             <div
               class="MuiCardContent-root-id NavigationCard-cardContent-id"
@@ -63432,9 +63311,7 @@ exports[`Storyshots Views / Configuration default 1`] = `
         >
           <div
             class="MuiPaper-root-id MuiCard-root-id NavigationCard-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="settingsSubsection"
-            data-test-id="configurationMenuShipping"
-            data-testid="shipping methods"
+            data-test-id="configurationMenuShipping-settings-subsection-shipping methods"
           >
             <div
               class="MuiCardContent-root-id NavigationCard-cardContent-id"
@@ -63481,9 +63358,7 @@ exports[`Storyshots Views / Configuration default 1`] = `
         >
           <div
             class="MuiPaper-root-id MuiCard-root-id NavigationCard-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="settingsSubsection"
-            data-test-id="configurationMenuWarehouses"
-            data-testid="warehouses"
+            data-test-id="configuration-menu-warehouses-settings-subsection-warehouses"
           >
             <div
               class="MuiCardContent-root-id NavigationCard-cardContent-id"
@@ -63547,9 +63422,7 @@ exports[`Storyshots Views / Configuration default 1`] = `
         >
           <div
             class="MuiPaper-root-id MuiCard-root-id NavigationCard-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="settingsSubsection"
-            data-test-id="configurationMenuPageTypes"
-            data-testid="page types"
+            data-test-id="configuration-menu-page-types-settings-subsection-page types"
           >
             <div
               class="MuiCardContent-root-id NavigationCard-cardContent-id"
@@ -63613,9 +63486,7 @@ exports[`Storyshots Views / Configuration default 1`] = `
         >
           <div
             class="MuiPaper-root-id MuiCard-root-id NavigationCard-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="settingsSubsection"
-            data-test-id="configurationMenuNavigation"
-            data-testid="navigation"
+            data-test-id="configuration-menu-navigation-settings-subsection-navigation"
           >
             <div
               class="MuiCardContent-root-id NavigationCard-cardContent-id"
@@ -63662,9 +63533,7 @@ exports[`Storyshots Views / Configuration default 1`] = `
         >
           <div
             class="MuiPaper-root-id MuiCard-root-id NavigationCard-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="settingsSubsection"
-            data-test-id="configurationMenuSiteSettings"
-            data-testid="site settings"
+            data-test-id="configuration-menu-site-settings-settings-subsection-site settings"
           >
             <div
               class="MuiCardContent-root-id NavigationCard-cardContent-id"
@@ -63717,9 +63586,7 @@ exports[`Storyshots Views / Configuration default 1`] = `
         >
           <div
             class="MuiPaper-root-id MuiCard-root-id NavigationCard-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="settingsSubsection"
-            data-test-id="configurationPluginsPages"
-            data-testid="plugins"
+            data-test-id="configuration-plugins-pages-settings-subsection-plugins"
           >
             <div
               class="MuiCardContent-root-id NavigationCard-cardContent-id"
@@ -63832,9 +63699,7 @@ exports[`Storyshots Views / Configuration partial access 1`] = `
         >
           <div
             class="MuiPaper-root-id MuiCard-root-id NavigationCard-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="settingsSubsection"
-            data-test-id="configurationMenuAttributes"
-            data-testid="attributes"
+            data-test-id="configuration-menu-attributes-settings-subsection-attributes"
           >
             <div
               class="MuiCardContent-root-id NavigationCard-cardContent-id"
@@ -63881,9 +63746,7 @@ exports[`Storyshots Views / Configuration partial access 1`] = `
         >
           <div
             class="MuiPaper-root-id MuiCard-root-id NavigationCard-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="settingsSubsection"
-            data-test-id="configurationMenuProductTypes"
-            data-testid="product types"
+            data-test-id="configuration-menu-product-types-settings-subsection-product types"
           >
             <div
               class="MuiCardContent-root-id NavigationCard-cardContent-id"
@@ -63947,9 +63810,7 @@ exports[`Storyshots Views / Configuration partial access 1`] = `
         >
           <div
             class="MuiPaper-root-id MuiCard-root-id NavigationCard-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="settingsSubsection"
-            data-test-id="configurationMenuWarehouses"
-            data-testid="warehouses"
+            data-test-id="configuration-menu-warehouses-settings-subsection-warehouses"
           >
             <div
               class="MuiCardContent-root-id NavigationCard-cardContent-id"
@@ -64013,9 +63874,7 @@ exports[`Storyshots Views / Configuration partial access 1`] = `
         >
           <div
             class="MuiPaper-root-id MuiCard-root-id NavigationCard-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="settingsSubsection"
-            data-test-id="configurationMenuPageTypes"
-            data-testid="page types"
+            data-test-id="configuration-menu-page-types-settings-subsection-page types"
           >
             <div
               class="MuiCardContent-root-id NavigationCard-cardContent-id"
@@ -64130,7 +63989,7 @@ exports[`Storyshots Views / Customers / Address Book default 1`] = `
                 aria-label="More"
                 class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                 color="primary"
-                data-test-id="showMoreButton"
+                data-test-id="show-more-button"
                 tabindex="0"
                 type="button"
               >
@@ -64207,7 +64066,7 @@ exports[`Storyshots Views / Customers / Address Book default 1`] = `
                 aria-label="More"
                 class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                 color="primary"
-                data-test-id="showMoreButton"
+                data-test-id="show-more-button"
                 tabindex="0"
                 type="button"
               >
@@ -64341,7 +64200,7 @@ exports[`Storyshots Views / Customers / Address Book loading 1`] = `
                 aria-label="More"
                 class="MuiButtonBase-root-id IconButton-secondary-id MuiButtonBase-disabled-id"
                 color="primary"
-                data-test-id="showMoreButton"
+                data-test-id="show-more-button"
                 disabled=""
                 tabindex="-1"
                 type="button"
@@ -66952,8 +66811,8 @@ exports[`Storyshots Views / Customers / Customer details default 1`] = `
           />
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="metadataEditor"
             data-test-expanded="true"
+            data-test-id="metadata-editor"
             data-test-is-private="false"
           >
             <div
@@ -66968,7 +66827,7 @@ exports[`Storyshots Views / Customers / Customer details default 1`] = `
                   Metadata
                   <button
                     class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test="expand"
+                    data-test-id="expand"
                     tabindex="0"
                     type="button"
                   >
@@ -67014,7 +66873,7 @@ exports[`Storyshots Views / Customers / Customer details default 1`] = `
             >
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-                data-test="addField"
+                data-test-id="add-field"
                 tabindex="0"
                 type="button"
               >
@@ -67031,8 +66890,8 @@ exports[`Storyshots Views / Customers / Customer details default 1`] = `
           />
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="metadataEditor"
             data-test-expanded="true"
+            data-test-id="metadata-editor"
             data-test-is-private="true"
           >
             <div
@@ -67047,7 +66906,7 @@ exports[`Storyshots Views / Customers / Customer details default 1`] = `
                   Private Metadata
                   <button
                     class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test="expand"
+                    data-test-id="expand"
                     tabindex="0"
                     type="button"
                   >
@@ -67093,7 +66952,7 @@ exports[`Storyshots Views / Customers / Customer details default 1`] = `
             >
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-                data-test="addField"
+                data-test-id="add-field"
                 tabindex="0"
                 type="button"
               >
@@ -67127,7 +66986,7 @@ exports[`Storyshots Views / Customers / Customer details default 1`] = `
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                  data-test-id="manageAddresses"
+                  data-test-id="manage-addresses"
                   tabindex="0"
                   type="button"
                 >
@@ -67714,8 +67573,8 @@ exports[`Storyshots Views / Customers / Customer details different addresses 1`]
           />
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="metadataEditor"
             data-test-expanded="true"
+            data-test-id="metadata-editor"
             data-test-is-private="false"
           >
             <div
@@ -67730,7 +67589,7 @@ exports[`Storyshots Views / Customers / Customer details different addresses 1`]
                   Metadata
                   <button
                     class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test="expand"
+                    data-test-id="expand"
                     tabindex="0"
                     type="button"
                   >
@@ -67776,7 +67635,7 @@ exports[`Storyshots Views / Customers / Customer details different addresses 1`]
             >
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-                data-test="addField"
+                data-test-id="add-field"
                 tabindex="0"
                 type="button"
               >
@@ -67793,8 +67652,8 @@ exports[`Storyshots Views / Customers / Customer details different addresses 1`]
           />
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="metadataEditor"
             data-test-expanded="true"
+            data-test-id="metadata-editor"
             data-test-is-private="true"
           >
             <div
@@ -67809,7 +67668,7 @@ exports[`Storyshots Views / Customers / Customer details different addresses 1`]
                   Private Metadata
                   <button
                     class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test="expand"
+                    data-test-id="expand"
                     tabindex="0"
                     type="button"
                   >
@@ -67855,7 +67714,7 @@ exports[`Storyshots Views / Customers / Customer details different addresses 1`]
             >
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-                data-test="addField"
+                data-test-id="add-field"
                 tabindex="0"
                 type="button"
               >
@@ -67889,7 +67748,7 @@ exports[`Storyshots Views / Customers / Customer details different addresses 1`]
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                  data-test-id="manageAddresses"
+                  data-test-id="manage-addresses"
                   tabindex="0"
                   type="button"
                 >
@@ -68531,8 +68390,8 @@ exports[`Storyshots Views / Customers / Customer details form errors 1`] = `
           />
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="metadataEditor"
             data-test-expanded="true"
+            data-test-id="metadata-editor"
             data-test-is-private="false"
           >
             <div
@@ -68547,7 +68406,7 @@ exports[`Storyshots Views / Customers / Customer details form errors 1`] = `
                   Metadata
                   <button
                     class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test="expand"
+                    data-test-id="expand"
                     tabindex="0"
                     type="button"
                   >
@@ -68593,7 +68452,7 @@ exports[`Storyshots Views / Customers / Customer details form errors 1`] = `
             >
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-                data-test="addField"
+                data-test-id="add-field"
                 tabindex="0"
                 type="button"
               >
@@ -68610,8 +68469,8 @@ exports[`Storyshots Views / Customers / Customer details form errors 1`] = `
           />
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="metadataEditor"
             data-test-expanded="true"
+            data-test-id="metadata-editor"
             data-test-is-private="true"
           >
             <div
@@ -68626,7 +68485,7 @@ exports[`Storyshots Views / Customers / Customer details form errors 1`] = `
                   Private Metadata
                   <button
                     class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test="expand"
+                    data-test-id="expand"
                     tabindex="0"
                     type="button"
                   >
@@ -68672,7 +68531,7 @@ exports[`Storyshots Views / Customers / Customer details form errors 1`] = `
             >
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-                data-test="addField"
+                data-test-id="add-field"
                 tabindex="0"
                 type="button"
               >
@@ -68706,7 +68565,7 @@ exports[`Storyshots Views / Customers / Customer details form errors 1`] = `
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                  data-test-id="manageAddresses"
+                  data-test-id="manage-addresses"
                   tabindex="0"
                   type="button"
                 >
@@ -69295,8 +69154,8 @@ exports[`Storyshots Views / Customers / Customer details loading 1`] = `
           />
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="metadataEditor"
             data-test-expanded="true"
+            data-test-id="metadata-editor"
             data-test-is-private="false"
           >
             <div
@@ -69311,7 +69170,7 @@ exports[`Storyshots Views / Customers / Customer details loading 1`] = `
                   Metadata
                   <button
                     class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test="expand"
+                    data-test-id="expand"
                     tabindex="0"
                     type="button"
                   >
@@ -69356,8 +69215,8 @@ exports[`Storyshots Views / Customers / Customer details loading 1`] = `
           />
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="metadataEditor"
             data-test-expanded="true"
+            data-test-id="metadata-editor"
             data-test-is-private="true"
           >
             <div
@@ -69372,7 +69231,7 @@ exports[`Storyshots Views / Customers / Customer details loading 1`] = `
                   Private Metadata
                   <button
                     class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test="expand"
+                    data-test-id="expand"
                     tabindex="0"
                     type="button"
                   >
@@ -69434,7 +69293,7 @@ exports[`Storyshots Views / Customers / Customer details loading 1`] = `
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id MuiButton-disabled-id MuiButtonBase-disabled-id"
-                  data-test-id="manageAddresses"
+                  data-test-id="manage-addresses"
                   disabled=""
                   tabindex="-1"
                   type="button"
@@ -69990,8 +69849,8 @@ exports[`Storyshots Views / Customers / Customer details never logged 1`] = `
           />
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="metadataEditor"
             data-test-expanded="true"
+            data-test-id="metadata-editor"
             data-test-is-private="false"
           >
             <div
@@ -70006,7 +69865,7 @@ exports[`Storyshots Views / Customers / Customer details never logged 1`] = `
                   Metadata
                   <button
                     class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test="expand"
+                    data-test-id="expand"
                     tabindex="0"
                     type="button"
                   >
@@ -70052,7 +69911,7 @@ exports[`Storyshots Views / Customers / Customer details never logged 1`] = `
             >
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-                data-test="addField"
+                data-test-id="add-field"
                 tabindex="0"
                 type="button"
               >
@@ -70069,8 +69928,8 @@ exports[`Storyshots Views / Customers / Customer details never logged 1`] = `
           />
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="metadataEditor"
             data-test-expanded="true"
+            data-test-id="metadata-editor"
             data-test-is-private="true"
           >
             <div
@@ -70085,7 +69944,7 @@ exports[`Storyshots Views / Customers / Customer details never logged 1`] = `
                   Private Metadata
                   <button
                     class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test="expand"
+                    data-test-id="expand"
                     tabindex="0"
                     type="button"
                   >
@@ -70131,7 +69990,7 @@ exports[`Storyshots Views / Customers / Customer details never logged 1`] = `
             >
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-                data-test="addField"
+                data-test-id="add-field"
                 tabindex="0"
                 type="button"
               >
@@ -70165,7 +70024,7 @@ exports[`Storyshots Views / Customers / Customer details never logged 1`] = `
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                  data-test-id="manageAddresses"
+                  data-test-id="manage-addresses"
                   tabindex="0"
                   type="button"
                 >
@@ -70746,8 +70605,8 @@ exports[`Storyshots Views / Customers / Customer details never placed order 1`]
           />
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="metadataEditor"
             data-test-expanded="true"
+            data-test-id="metadata-editor"
             data-test-is-private="false"
           >
             <div
@@ -70762,7 +70621,7 @@ exports[`Storyshots Views / Customers / Customer details never placed order 1`]
                   Metadata
                   <button
                     class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test="expand"
+                    data-test-id="expand"
                     tabindex="0"
                     type="button"
                   >
@@ -70808,7 +70667,7 @@ exports[`Storyshots Views / Customers / Customer details never placed order 1`]
             >
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-                data-test="addField"
+                data-test-id="add-field"
                 tabindex="0"
                 type="button"
               >
@@ -70825,8 +70684,8 @@ exports[`Storyshots Views / Customers / Customer details never placed order 1`]
           />
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="metadataEditor"
             data-test-expanded="true"
+            data-test-id="metadata-editor"
             data-test-is-private="true"
           >
             <div
@@ -70841,7 +70700,7 @@ exports[`Storyshots Views / Customers / Customer details never placed order 1`]
                   Private Metadata
                   <button
                     class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test="expand"
+                    data-test-id="expand"
                     tabindex="0"
                     type="button"
                   >
@@ -70887,7 +70746,7 @@ exports[`Storyshots Views / Customers / Customer details never placed order 1`]
             >
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-                data-test="addField"
+                data-test-id="add-field"
                 tabindex="0"
                 type="button"
               >
@@ -70921,7 +70780,7 @@ exports[`Storyshots Views / Customers / Customer details never placed order 1`]
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                  data-test-id="manageAddresses"
+                  data-test-id="manage-addresses"
                   tabindex="0"
                   type="button"
                 >
@@ -71502,8 +71361,8 @@ exports[`Storyshots Views / Customers / Customer details no address at all 1`] =
           />
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="metadataEditor"
             data-test-expanded="true"
+            data-test-id="metadata-editor"
             data-test-is-private="false"
           >
             <div
@@ -71518,7 +71377,7 @@ exports[`Storyshots Views / Customers / Customer details no address at all 1`] =
                   Metadata
                   <button
                     class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test="expand"
+                    data-test-id="expand"
                     tabindex="0"
                     type="button"
                   >
@@ -71564,7 +71423,7 @@ exports[`Storyshots Views / Customers / Customer details no address at all 1`] =
             >
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-                data-test="addField"
+                data-test-id="add-field"
                 tabindex="0"
                 type="button"
               >
@@ -71581,8 +71440,8 @@ exports[`Storyshots Views / Customers / Customer details no address at all 1`] =
           />
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="metadataEditor"
             data-test-expanded="true"
+            data-test-id="metadata-editor"
             data-test-is-private="true"
           >
             <div
@@ -71597,7 +71456,7 @@ exports[`Storyshots Views / Customers / Customer details no address at all 1`] =
                   Private Metadata
                   <button
                     class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test="expand"
+                    data-test-id="expand"
                     tabindex="0"
                     type="button"
                   >
@@ -71643,7 +71502,7 @@ exports[`Storyshots Views / Customers / Customer details no address at all 1`] =
             >
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-                data-test="addField"
+                data-test-id="add-field"
                 tabindex="0"
                 type="button"
               >
@@ -71677,7 +71536,7 @@ exports[`Storyshots Views / Customers / Customer details no address at all 1`] =
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                  data-test-id="manageAddresses"
+                  data-test-id="manage-addresses"
                   tabindex="0"
                   type="button"
                 >
@@ -72236,8 +72095,8 @@ exports[`Storyshots Views / Customers / Customer details no default billing addr
           />
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="metadataEditor"
             data-test-expanded="true"
+            data-test-id="metadata-editor"
             data-test-is-private="false"
           >
             <div
@@ -72252,7 +72111,7 @@ exports[`Storyshots Views / Customers / Customer details no default billing addr
                   Metadata
                   <button
                     class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test="expand"
+                    data-test-id="expand"
                     tabindex="0"
                     type="button"
                   >
@@ -72298,7 +72157,7 @@ exports[`Storyshots Views / Customers / Customer details no default billing addr
             >
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-                data-test="addField"
+                data-test-id="add-field"
                 tabindex="0"
                 type="button"
               >
@@ -72315,8 +72174,8 @@ exports[`Storyshots Views / Customers / Customer details no default billing addr
           />
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="metadataEditor"
             data-test-expanded="true"
+            data-test-id="metadata-editor"
             data-test-is-private="true"
           >
             <div
@@ -72331,7 +72190,7 @@ exports[`Storyshots Views / Customers / Customer details no default billing addr
                   Private Metadata
                   <button
                     class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test="expand"
+                    data-test-id="expand"
                     tabindex="0"
                     type="button"
                   >
@@ -72377,7 +72236,7 @@ exports[`Storyshots Views / Customers / Customer details no default billing addr
             >
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-                data-test="addField"
+                data-test-id="add-field"
                 tabindex="0"
                 type="button"
               >
@@ -72411,7 +72270,7 @@ exports[`Storyshots Views / Customers / Customer details no default billing addr
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                  data-test-id="manageAddresses"
+                  data-test-id="manage-addresses"
                   tabindex="0"
                   type="button"
                 >
@@ -72998,8 +72857,8 @@ exports[`Storyshots Views / Customers / Customer details no default shipping add
           />
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="metadataEditor"
             data-test-expanded="true"
+            data-test-id="metadata-editor"
             data-test-is-private="false"
           >
             <div
@@ -73014,7 +72873,7 @@ exports[`Storyshots Views / Customers / Customer details no default shipping add
                   Metadata
                   <button
                     class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test="expand"
+                    data-test-id="expand"
                     tabindex="0"
                     type="button"
                   >
@@ -73060,7 +72919,7 @@ exports[`Storyshots Views / Customers / Customer details no default shipping add
             >
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-                data-test="addField"
+                data-test-id="add-field"
                 tabindex="0"
                 type="button"
               >
@@ -73077,8 +72936,8 @@ exports[`Storyshots Views / Customers / Customer details no default shipping add
           />
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="metadataEditor"
             data-test-expanded="true"
+            data-test-id="metadata-editor"
             data-test-is-private="true"
           >
             <div
@@ -73093,7 +72952,7 @@ exports[`Storyshots Views / Customers / Customer details no default shipping add
                   Private Metadata
                   <button
                     class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test="expand"
+                    data-test-id="expand"
                     tabindex="0"
                     type="button"
                   >
@@ -73139,7 +72998,7 @@ exports[`Storyshots Views / Customers / Customer details no default shipping add
             >
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-                data-test="addField"
+                data-test-id="add-field"
                 tabindex="0"
                 type="button"
               >
@@ -73173,7 +73032,7 @@ exports[`Storyshots Views / Customers / Customer details no default shipping add
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                  data-test-id="manageAddresses"
+                  data-test-id="manage-addresses"
                   tabindex="0"
                   type="button"
                 >
@@ -73362,7 +73221,7 @@ exports[`Storyshots Views / Customers / Customer list default 1`] = `
         >
           <button
             class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
-            data-test-id="createCustomer"
+            data-test-id="create-customer"
             tabindex="0"
             type="button"
           >
@@ -73435,7 +73294,7 @@ exports[`Storyshots Views / Customers / Customer list default 1`] = `
         </div>
         <div
           class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
-          data-test-id="searchInput"
+          data-test-id="search-input"
         >
           <div
             class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
@@ -75031,7 +74890,7 @@ exports[`Storyshots Views / Customers / Customer list loading 1`] = `
         >
           <button
             class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
-            data-test-id="createCustomer"
+            data-test-id="create-customer"
             tabindex="0"
             type="button"
           >
@@ -75104,7 +74963,7 @@ exports[`Storyshots Views / Customers / Customer list loading 1`] = `
         </div>
         <div
           class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
-          data-test-id="searchInput"
+          data-test-id="search-input"
         >
           <div
             class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
@@ -75425,7 +75284,7 @@ exports[`Storyshots Views / Customers / Customer list no data 1`] = `
         >
           <button
             class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
-            data-test-id="createCustomer"
+            data-test-id="create-customer"
             tabindex="0"
             type="button"
           >
@@ -75498,7 +75357,7 @@ exports[`Storyshots Views / Customers / Customer list no data 1`] = `
         </div>
         <div
           class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
-          data-test-id="searchInput"
+          data-test-id="search-input"
         >
           <div
             class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
@@ -76617,8 +76476,8 @@ exports[`Storyshots Views / Discounts / Sale create default 1`] = `
         </div>
         <div
           class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          data-test="metadataEditor"
           data-test-expanded="true"
+          data-test-id="metadata-editor"
           data-test-is-private="false"
         >
           <div
@@ -76633,7 +76492,7 @@ exports[`Storyshots Views / Discounts / Sale create default 1`] = `
                 Metadata
                 <button
                   class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                  data-test="expand"
+                  data-test-id="expand"
                   tabindex="0"
                   type="button"
                 >
@@ -76679,7 +76538,7 @@ exports[`Storyshots Views / Discounts / Sale create default 1`] = `
           >
             <button
               class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-              data-test="addField"
+              data-test-id="add-field"
               tabindex="0"
               type="button"
             >
@@ -76696,8 +76555,8 @@ exports[`Storyshots Views / Discounts / Sale create default 1`] = `
         />
         <div
           class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          data-test="metadataEditor"
           data-test-expanded="true"
+          data-test-id="metadata-editor"
           data-test-is-private="true"
         >
           <div
@@ -76712,7 +76571,7 @@ exports[`Storyshots Views / Discounts / Sale create default 1`] = `
                 Private Metadata
                 <button
                   class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                  data-test="expand"
+                  data-test-id="expand"
                   tabindex="0"
                   type="button"
                 >
@@ -76758,7 +76617,7 @@ exports[`Storyshots Views / Discounts / Sale create default 1`] = `
           >
             <button
               class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-              data-test="addField"
+              data-test-id="add-field"
               tabindex="0"
               type="button"
             >
@@ -77714,8 +77573,8 @@ exports[`Storyshots Views / Discounts / Sale create form errors 1`] = `
         </div>
         <div
           class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          data-test="metadataEditor"
           data-test-expanded="true"
+          data-test-id="metadata-editor"
           data-test-is-private="false"
         >
           <div
@@ -77730,7 +77589,7 @@ exports[`Storyshots Views / Discounts / Sale create form errors 1`] = `
                 Metadata
                 <button
                   class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                  data-test="expand"
+                  data-test-id="expand"
                   tabindex="0"
                   type="button"
                 >
@@ -77776,7 +77635,7 @@ exports[`Storyshots Views / Discounts / Sale create form errors 1`] = `
           >
             <button
               class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-              data-test="addField"
+              data-test-id="add-field"
               tabindex="0"
               type="button"
             >
@@ -77793,8 +77652,8 @@ exports[`Storyshots Views / Discounts / Sale create form errors 1`] = `
         />
         <div
           class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          data-test="metadataEditor"
           data-test-expanded="true"
+          data-test-id="metadata-editor"
           data-test-is-private="true"
         >
           <div
@@ -77809,7 +77668,7 @@ exports[`Storyshots Views / Discounts / Sale create form errors 1`] = `
                 Private Metadata
                 <button
                   class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                  data-test="expand"
+                  data-test-id="expand"
                   tabindex="0"
                   type="button"
                 >
@@ -77855,7 +77714,7 @@ exports[`Storyshots Views / Discounts / Sale create form errors 1`] = `
           >
             <button
               class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-              data-test="addField"
+              data-test-id="add-field"
               tabindex="0"
               type="button"
             >
@@ -78810,8 +78669,8 @@ exports[`Storyshots Views / Discounts / Sale create loading 1`] = `
         </div>
         <div
           class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          data-test="metadataEditor"
           data-test-expanded="true"
+          data-test-id="metadata-editor"
           data-test-is-private="false"
         >
           <div
@@ -78826,7 +78685,7 @@ exports[`Storyshots Views / Discounts / Sale create loading 1`] = `
                 Metadata
                 <button
                   class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                  data-test="expand"
+                  data-test-id="expand"
                   tabindex="0"
                   type="button"
                 >
@@ -78872,7 +78731,7 @@ exports[`Storyshots Views / Discounts / Sale create loading 1`] = `
           >
             <button
               class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-              data-test="addField"
+              data-test-id="add-field"
               tabindex="0"
               type="button"
             >
@@ -78889,8 +78748,8 @@ exports[`Storyshots Views / Discounts / Sale create loading 1`] = `
         />
         <div
           class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          data-test="metadataEditor"
           data-test-expanded="true"
+          data-test-id="metadata-editor"
           data-test-is-private="true"
         >
           <div
@@ -78905,7 +78764,7 @@ exports[`Storyshots Views / Discounts / Sale create loading 1`] = `
                 Private Metadata
                 <button
                   class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                  data-test="expand"
+                  data-test-id="expand"
                   tabindex="0"
                   type="button"
                 >
@@ -78951,7 +78810,7 @@ exports[`Storyshots Views / Discounts / Sale create loading 1`] = `
           >
             <button
               class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-              data-test="addField"
+              data-test-id="add-field"
               tabindex="0"
               type="button"
             >
@@ -80256,8 +80115,8 @@ exports[`Storyshots Views / Discounts / Sale details collections 1`] = `
         </div>
         <div
           class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          data-test="metadataEditor"
           data-test-expanded="true"
+          data-test-id="metadata-editor"
           data-test-is-private="false"
         >
           <div
@@ -80272,7 +80131,7 @@ exports[`Storyshots Views / Discounts / Sale details collections 1`] = `
                 Metadata
                 <button
                   class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                  data-test="expand"
+                  data-test-id="expand"
                   tabindex="0"
                   type="button"
                 >
@@ -80318,7 +80177,7 @@ exports[`Storyshots Views / Discounts / Sale details collections 1`] = `
           >
             <button
               class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-              data-test="addField"
+              data-test-id="add-field"
               tabindex="0"
               type="button"
             >
@@ -80335,8 +80194,8 @@ exports[`Storyshots Views / Discounts / Sale details collections 1`] = `
         />
         <div
           class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          data-test="metadataEditor"
           data-test-expanded="true"
+          data-test-id="metadata-editor"
           data-test-is-private="true"
         >
           <div
@@ -80351,7 +80210,7 @@ exports[`Storyshots Views / Discounts / Sale details collections 1`] = `
                 Private Metadata
                 <button
                   class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                  data-test="expand"
+                  data-test-id="expand"
                   tabindex="0"
                   type="button"
                 >
@@ -80397,7 +80256,7 @@ exports[`Storyshots Views / Discounts / Sale details collections 1`] = `
           >
             <button
               class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-              data-test="addField"
+              data-test-id="add-field"
               tabindex="0"
               type="button"
             >
@@ -81702,8 +81561,8 @@ exports[`Storyshots Views / Discounts / Sale details default 1`] = `
         </div>
         <div
           class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          data-test="metadataEditor"
           data-test-expanded="true"
+          data-test-id="metadata-editor"
           data-test-is-private="false"
         >
           <div
@@ -81718,7 +81577,7 @@ exports[`Storyshots Views / Discounts / Sale details default 1`] = `
                 Metadata
                 <button
                   class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                  data-test="expand"
+                  data-test-id="expand"
                   tabindex="0"
                   type="button"
                 >
@@ -81764,7 +81623,7 @@ exports[`Storyshots Views / Discounts / Sale details default 1`] = `
           >
             <button
               class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-              data-test="addField"
+              data-test-id="add-field"
               tabindex="0"
               type="button"
             >
@@ -81781,8 +81640,8 @@ exports[`Storyshots Views / Discounts / Sale details default 1`] = `
         />
         <div
           class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          data-test="metadataEditor"
           data-test-expanded="true"
+          data-test-id="metadata-editor"
           data-test-is-private="true"
         >
           <div
@@ -81797,7 +81656,7 @@ exports[`Storyshots Views / Discounts / Sale details default 1`] = `
                 Private Metadata
                 <button
                   class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                  data-test="expand"
+                  data-test-id="expand"
                   tabindex="0"
                   type="button"
                 >
@@ -81843,7 +81702,7 @@ exports[`Storyshots Views / Discounts / Sale details default 1`] = `
           >
             <button
               class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-              data-test="addField"
+              data-test-id="add-field"
               tabindex="0"
               type="button"
             >
@@ -83163,8 +83022,8 @@ exports[`Storyshots Views / Discounts / Sale details form errors 1`] = `
         </div>
         <div
           class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          data-test="metadataEditor"
           data-test-expanded="true"
+          data-test-id="metadata-editor"
           data-test-is-private="false"
         >
           <div
@@ -83179,7 +83038,7 @@ exports[`Storyshots Views / Discounts / Sale details form errors 1`] = `
                 Metadata
                 <button
                   class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                  data-test="expand"
+                  data-test-id="expand"
                   tabindex="0"
                   type="button"
                 >
@@ -83225,7 +83084,7 @@ exports[`Storyshots Views / Discounts / Sale details form errors 1`] = `
           >
             <button
               class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-              data-test="addField"
+              data-test-id="add-field"
               tabindex="0"
               type="button"
             >
@@ -83242,8 +83101,8 @@ exports[`Storyshots Views / Discounts / Sale details form errors 1`] = `
         />
         <div
           class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          data-test="metadataEditor"
           data-test-expanded="true"
+          data-test-id="metadata-editor"
           data-test-is-private="true"
         >
           <div
@@ -83258,7 +83117,7 @@ exports[`Storyshots Views / Discounts / Sale details form errors 1`] = `
                 Private Metadata
                 <button
                   class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                  data-test="expand"
+                  data-test-id="expand"
                   tabindex="0"
                   type="button"
                 >
@@ -83304,7 +83163,7 @@ exports[`Storyshots Views / Discounts / Sale details form errors 1`] = `
           >
             <button
               class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-              data-test="addField"
+              data-test-id="add-field"
               tabindex="0"
               type="button"
             >
@@ -84665,8 +84524,8 @@ exports[`Storyshots Views / Discounts / Sale details loading 1`] = `
         </div>
         <div
           class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          data-test="metadataEditor"
           data-test-expanded="true"
+          data-test-id="metadata-editor"
           data-test-is-private="false"
         >
           <div
@@ -84681,7 +84540,7 @@ exports[`Storyshots Views / Discounts / Sale details loading 1`] = `
                 Metadata
                 <button
                   class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                  data-test="expand"
+                  data-test-id="expand"
                   tabindex="0"
                   type="button"
                 >
@@ -84726,8 +84585,8 @@ exports[`Storyshots Views / Discounts / Sale details loading 1`] = `
         />
         <div
           class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          data-test="metadataEditor"
           data-test-expanded="true"
+          data-test-id="metadata-editor"
           data-test-is-private="true"
         >
           <div
@@ -84742,7 +84601,7 @@ exports[`Storyshots Views / Discounts / Sale details loading 1`] = `
                 Private Metadata
                 <button
                   class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                  data-test="expand"
+                  data-test-id="expand"
                   tabindex="0"
                   type="button"
                 >
@@ -85688,7 +85547,7 @@ exports[`Storyshots Views / Discounts / Sale details products 1`] = `
                     </td>
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id DiscountProducts-colName-id"
-                      data-test-id="tableCellAvatar"
+                      data-test-id="table-cell-avatar"
                       thumbnail="placeholder60x60.png"
                     >
                       <div
@@ -85808,7 +85667,7 @@ exports[`Storyshots Views / Discounts / Sale details products 1`] = `
                     </td>
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id DiscountProducts-colName-id"
-                      data-test-id="tableCellAvatar"
+                      data-test-id="table-cell-avatar"
                       thumbnail="placeholder60x60.png"
                     >
                       <div
@@ -85928,7 +85787,7 @@ exports[`Storyshots Views / Discounts / Sale details products 1`] = `
                     </td>
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id DiscountProducts-colName-id"
-                      data-test-id="tableCellAvatar"
+                      data-test-id="table-cell-avatar"
                       thumbnail="placeholder60x60.png"
                     >
                       <div
@@ -86048,7 +85907,7 @@ exports[`Storyshots Views / Discounts / Sale details products 1`] = `
                     </td>
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id DiscountProducts-colName-id"
-                      data-test-id="tableCellAvatar"
+                      data-test-id="table-cell-avatar"
                       thumbnail="placeholder60x60.png"
                     >
                       <div
@@ -86495,8 +86354,8 @@ exports[`Storyshots Views / Discounts / Sale details products 1`] = `
         </div>
         <div
           class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          data-test="metadataEditor"
           data-test-expanded="true"
+          data-test-id="metadata-editor"
           data-test-is-private="false"
         >
           <div
@@ -86511,7 +86370,7 @@ exports[`Storyshots Views / Discounts / Sale details products 1`] = `
                 Metadata
                 <button
                   class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                  data-test="expand"
+                  data-test-id="expand"
                   tabindex="0"
                   type="button"
                 >
@@ -86557,7 +86416,7 @@ exports[`Storyshots Views / Discounts / Sale details products 1`] = `
           >
             <button
               class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-              data-test="addField"
+              data-test-id="add-field"
               tabindex="0"
               type="button"
             >
@@ -86574,8 +86433,8 @@ exports[`Storyshots Views / Discounts / Sale details products 1`] = `
         />
         <div
           class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          data-test="metadataEditor"
           data-test-expanded="true"
+          data-test-id="metadata-editor"
           data-test-is-private="true"
         >
           <div
@@ -86590,7 +86449,7 @@ exports[`Storyshots Views / Discounts / Sale details products 1`] = `
                 Private Metadata
                 <button
                   class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                  data-test="expand"
+                  data-test-id="expand"
                   tabindex="0"
                   type="button"
                 >
@@ -86636,7 +86495,7 @@ exports[`Storyshots Views / Discounts / Sale details products 1`] = `
           >
             <button
               class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-              data-test="addField"
+              data-test-id="add-field"
               tabindex="0"
               type="button"
             >
@@ -86755,7 +86614,7 @@ exports[`Storyshots Views / Discounts / Sale list default 1`] = `
         </div>
         <div
           class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
-          data-test-id="searchInput"
+          data-test-id="search-input"
         >
           <div
             class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
@@ -87434,7 +87293,7 @@ exports[`Storyshots Views / Discounts / Sale list loading 1`] = `
         </div>
         <div
           class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
-          data-test-id="searchInput"
+          data-test-id="search-input"
         >
           <div
             class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
@@ -87854,7 +87713,7 @@ exports[`Storyshots Views / Discounts / Sale list no channels 1`] = `
         </div>
         <div
           class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
-          data-test-id="searchInput"
+          data-test-id="search-input"
         >
           <div
             class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
@@ -88528,7 +88387,7 @@ exports[`Storyshots Views / Discounts / Sale list no data 1`] = `
         </div>
         <div
           class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
-          data-test-id="searchInput"
+          data-test-id="search-input"
         >
           <div
             class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
@@ -90139,8 +89998,8 @@ exports[`Storyshots Views / Discounts / Voucher create default 1`] = `
         </div>
         <div
           class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          data-test="metadataEditor"
           data-test-expanded="true"
+          data-test-id="metadata-editor"
           data-test-is-private="false"
         >
           <div
@@ -90155,7 +90014,7 @@ exports[`Storyshots Views / Discounts / Voucher create default 1`] = `
                 Metadata
                 <button
                   class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                  data-test="expand"
+                  data-test-id="expand"
                   tabindex="0"
                   type="button"
                 >
@@ -90201,7 +90060,7 @@ exports[`Storyshots Views / Discounts / Voucher create default 1`] = `
           >
             <button
               class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-              data-test="addField"
+              data-test-id="add-field"
               tabindex="0"
               type="button"
             >
@@ -90218,8 +90077,8 @@ exports[`Storyshots Views / Discounts / Voucher create default 1`] = `
         />
         <div
           class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          data-test="metadataEditor"
           data-test-expanded="true"
+          data-test-id="metadata-editor"
           data-test-is-private="true"
         >
           <div
@@ -90234,7 +90093,7 @@ exports[`Storyshots Views / Discounts / Voucher create default 1`] = `
                 Private Metadata
                 <button
                   class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                  data-test="expand"
+                  data-test-id="expand"
                   tabindex="0"
                   type="button"
                 >
@@ -90280,7 +90139,7 @@ exports[`Storyshots Views / Discounts / Voucher create default 1`] = `
           >
             <button
               class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-              data-test="addField"
+              data-test-id="add-field"
               tabindex="0"
               type="button"
             >
@@ -91719,8 +91578,8 @@ exports[`Storyshots Views / Discounts / Voucher create form errors 1`] = `
         </div>
         <div
           class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          data-test="metadataEditor"
           data-test-expanded="true"
+          data-test-id="metadata-editor"
           data-test-is-private="false"
         >
           <div
@@ -91735,7 +91594,7 @@ exports[`Storyshots Views / Discounts / Voucher create form errors 1`] = `
                 Metadata
                 <button
                   class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                  data-test="expand"
+                  data-test-id="expand"
                   tabindex="0"
                   type="button"
                 >
@@ -91781,7 +91640,7 @@ exports[`Storyshots Views / Discounts / Voucher create form errors 1`] = `
           >
             <button
               class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-              data-test="addField"
+              data-test-id="add-field"
               tabindex="0"
               type="button"
             >
@@ -91798,8 +91657,8 @@ exports[`Storyshots Views / Discounts / Voucher create form errors 1`] = `
         />
         <div
           class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          data-test="metadataEditor"
           data-test-expanded="true"
+          data-test-id="metadata-editor"
           data-test-is-private="true"
         >
           <div
@@ -91814,7 +91673,7 @@ exports[`Storyshots Views / Discounts / Voucher create form errors 1`] = `
                 Private Metadata
                 <button
                   class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                  data-test="expand"
+                  data-test-id="expand"
                   tabindex="0"
                   type="button"
                 >
@@ -91860,7 +91719,7 @@ exports[`Storyshots Views / Discounts / Voucher create form errors 1`] = `
           >
             <button
               class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-              data-test="addField"
+              data-test-id="add-field"
               tabindex="0"
               type="button"
             >
@@ -94045,8 +93904,8 @@ exports[`Storyshots Views / Discounts / Voucher details default 1`] = `
         </div>
         <div
           class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          data-test="metadataEditor"
           data-test-expanded="true"
+          data-test-id="metadata-editor"
           data-test-is-private="false"
         >
           <div
@@ -94061,7 +93920,7 @@ exports[`Storyshots Views / Discounts / Voucher details default 1`] = `
                 Metadata
                 <button
                   class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                  data-test="expand"
+                  data-test-id="expand"
                   tabindex="0"
                   type="button"
                 >
@@ -94107,7 +93966,7 @@ exports[`Storyshots Views / Discounts / Voucher details default 1`] = `
           >
             <button
               class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-              data-test="addField"
+              data-test-id="add-field"
               tabindex="0"
               type="button"
             >
@@ -94124,8 +93983,8 @@ exports[`Storyshots Views / Discounts / Voucher details default 1`] = `
         />
         <div
           class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          data-test="metadataEditor"
           data-test-expanded="true"
+          data-test-id="metadata-editor"
           data-test-is-private="true"
         >
           <div
@@ -94140,7 +93999,7 @@ exports[`Storyshots Views / Discounts / Voucher details default 1`] = `
                 Private Metadata
                 <button
                   class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                  data-test="expand"
+                  data-test-id="expand"
                   tabindex="0"
                   type="button"
                 >
@@ -94186,7 +94045,7 @@ exports[`Storyshots Views / Discounts / Voucher details default 1`] = `
           >
             <button
               class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-              data-test="addField"
+              data-test-id="add-field"
               tabindex="0"
               type="button"
             >
@@ -96396,8 +96255,8 @@ exports[`Storyshots Views / Discounts / Voucher details form errors 1`] = `
         </div>
         <div
           class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          data-test="metadataEditor"
           data-test-expanded="true"
+          data-test-id="metadata-editor"
           data-test-is-private="false"
         >
           <div
@@ -96412,7 +96271,7 @@ exports[`Storyshots Views / Discounts / Voucher details form errors 1`] = `
                 Metadata
                 <button
                   class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                  data-test="expand"
+                  data-test-id="expand"
                   tabindex="0"
                   type="button"
                 >
@@ -96458,7 +96317,7 @@ exports[`Storyshots Views / Discounts / Voucher details form errors 1`] = `
           >
             <button
               class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-              data-test="addField"
+              data-test-id="add-field"
               tabindex="0"
               type="button"
             >
@@ -96475,8 +96334,8 @@ exports[`Storyshots Views / Discounts / Voucher details form errors 1`] = `
         />
         <div
           class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          data-test="metadataEditor"
           data-test-expanded="true"
+          data-test-id="metadata-editor"
           data-test-is-private="true"
         >
           <div
@@ -96491,7 +96350,7 @@ exports[`Storyshots Views / Discounts / Voucher details form errors 1`] = `
                 Private Metadata
                 <button
                   class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                  data-test="expand"
+                  data-test-id="expand"
                   tabindex="0"
                   type="button"
                 >
@@ -96537,7 +96396,7 @@ exports[`Storyshots Views / Discounts / Voucher details form errors 1`] = `
           >
             <button
               class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-              data-test="addField"
+              data-test-id="add-field"
               tabindex="0"
               type="button"
             >
@@ -98317,8 +98176,8 @@ exports[`Storyshots Views / Discounts / Voucher details loading 1`] = `
         </div>
         <div
           class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          data-test="metadataEditor"
           data-test-expanded="true"
+          data-test-id="metadata-editor"
           data-test-is-private="false"
         >
           <div
@@ -98333,7 +98192,7 @@ exports[`Storyshots Views / Discounts / Voucher details loading 1`] = `
                 Metadata
                 <button
                   class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                  data-test="expand"
+                  data-test-id="expand"
                   tabindex="0"
                   type="button"
                 >
@@ -98378,8 +98237,8 @@ exports[`Storyshots Views / Discounts / Voucher details loading 1`] = `
         />
         <div
           class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          data-test="metadataEditor"
           data-test-expanded="true"
+          data-test-id="metadata-editor"
           data-test-is-private="true"
         >
           <div
@@ -98394,7 +98253,7 @@ exports[`Storyshots Views / Discounts / Voucher details loading 1`] = `
                 Private Metadata
                 <button
                   class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                  data-test="expand"
+                  data-test-id="expand"
                   tabindex="0"
                   type="button"
                 >
@@ -98541,7 +98400,7 @@ exports[`Storyshots Views / Discounts / Voucher list default 1`] = `
         </div>
         <div
           class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
-          data-test-id="searchInput"
+          data-test-id="search-input"
         >
           <div
             class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
@@ -99077,7 +98936,7 @@ exports[`Storyshots Views / Discounts / Voucher list loading 1`] = `
         </div>
         <div
           class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
-          data-test-id="searchInput"
+          data-test-id="search-input"
         >
           <div
             class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
@@ -99545,7 +99404,7 @@ exports[`Storyshots Views / Discounts / Voucher list no channels 1`] = `
         </div>
         <div
           class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
-          data-test-id="searchInput"
+          data-test-id="search-input"
         >
           <div
             class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
@@ -100066,7 +99925,7 @@ exports[`Storyshots Views / Discounts / Voucher list no data 1`] = `
         </div>
         <div
           class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
-          data-test-id="searchInput"
+          data-test-id="search-input"
         >
           <div
             class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
@@ -100449,12 +100308,12 @@ exports[`Storyshots Views / HomePage default 1`] = `
   >
     <div
       class="HomeHeader-headerContainer-id"
-      data-test="home-header"
+      data-test-id="home-header"
     >
       <div>
         <div
           class="MuiTypography-root-id HomeHeader-pageHeader-id MuiTypography-h4-id"
-          data-test="welcomeHeader"
+          data-test-id="welcome-header"
         >
           Hello there, admin@example.com
         </div>
@@ -100714,7 +100573,7 @@ exports[`Storyshots Views / HomePage default 1`] = `
                   <td
                     avatarprops="HomeProductListCard-avatarProps-id"
                     class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id HomeProductListCard-colAvatar-id"
-                    data-test-id="tableCellAvatar"
+                    data-test-id="table-cell-avatar"
                     thumbnail="placeholder60x60.png"
                   >
                     <div
@@ -101149,12 +101008,12 @@ exports[`Storyshots Views / HomePage loading 1`] = `
   >
     <div
       class="HomeHeader-headerContainer-id"
-      data-test="home-header"
+      data-test-id="home-header"
     >
       <div>
         <div
           class="MuiTypography-root-id HomeHeader-pageHeader-id MuiTypography-h4-id"
-          data-test="welcomeHeader"
+          data-test-id="welcome-header"
         >
           <span
             class="Skeleton-skeleton-id"
@@ -101404,12 +101263,12 @@ exports[`Storyshots Views / HomePage no data 1`] = `
   >
     <div
       class="HomeHeader-headerContainer-id"
-      data-test="home-header"
+      data-test-id="home-header"
     >
       <div>
         <div
           class="MuiTypography-root-id HomeHeader-pageHeader-id MuiTypography-h4-id"
-          data-test="welcomeHeader"
+          data-test-id="welcome-header"
         >
           Hello there, admin@example.com
         </div>
@@ -101736,12 +101595,12 @@ exports[`Storyshots Views / HomePage no permissions 1`] = `
   >
     <div
       class="HomeHeader-headerContainer-id"
-      data-test="home-header"
+      data-test-id="home-header"
     >
       <div>
         <div
           class="MuiTypography-root-id HomeHeader-pageHeader-id MuiTypography-h4-id"
-          data-test="welcomeHeader"
+          data-test-id="welcome-header"
         >
           Hello there, admin@example.com
         </div>
@@ -101793,12 +101652,12 @@ exports[`Storyshots Views / HomePage order permissions 1`] = `
   >
     <div
       class="HomeHeader-headerContainer-id"
-      data-test="home-header"
+      data-test-id="home-header"
     >
       <div>
         <div
           class="MuiTypography-root-id HomeHeader-pageHeader-id MuiTypography-h4-id"
-          data-test="welcomeHeader"
+          data-test-id="welcome-header"
         >
           Hello there, admin@example.com
         </div>
@@ -102364,12 +102223,12 @@ exports[`Storyshots Views / HomePage product permissions 1`] = `
   >
     <div
       class="HomeHeader-headerContainer-id"
-      data-test="home-header"
+      data-test-id="home-header"
     >
       <div>
         <div
           class="MuiTypography-root-id HomeHeader-pageHeader-id MuiTypography-h4-id"
-          data-test="welcomeHeader"
+          data-test-id="welcome-header"
         >
           Hello there, admin@example.com
         </div>
@@ -103131,7 +102990,7 @@ exports[`Storyshots Views / Navigation / Menu details default 1`] = `
             >
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                data-test-id="createNewMenuItem"
+                data-test-id="create-new-menu-item"
                 tabindex="0"
                 type="button"
               >
@@ -103845,7 +103704,7 @@ exports[`Storyshots Views / Navigation / Menu details form errors 1`] = `
             >
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                data-test-id="createNewMenuItem"
+                data-test-id="create-new-menu-item"
                 tabindex="0"
                 type="button"
               >
@@ -103994,7 +103853,7 @@ exports[`Storyshots Views / Navigation / Menu details loading 1`] = `
             >
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                data-test-id="createNewMenuItem"
+                data-test-id="create-new-menu-item"
                 tabindex="0"
                 type="button"
               >
@@ -104151,7 +104010,7 @@ exports[`Storyshots Views / Navigation / Menu details no data 1`] = `
             >
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                data-test-id="createNewMenuItem"
+                data-test-id="create-new-menu-item"
                 tabindex="0"
                 type="button"
               >
@@ -104198,7 +104057,7 @@ exports[`Storyshots Views / Navigation / Menu list default 1`] = `
         >
           <button
             class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
-            data-test-id="addMenu"
+            data-test-id="add-menu"
             tabindex="0"
             type="button"
           >
@@ -104577,7 +104436,7 @@ exports[`Storyshots Views / Navigation / Menu list loading 1`] = `
         >
           <button
             class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
-            data-test-id="addMenu"
+            data-test-id="add-menu"
             tabindex="0"
             type="button"
           >
@@ -104897,7 +104756,7 @@ exports[`Storyshots Views / Navigation / Menu list no data 1`] = `
         >
           <button
             class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
-            data-test-id="addMenu"
+            data-test-id="add-menu"
             tabindex="0"
             type="button"
           >
@@ -105225,7 +105084,7 @@ exports[`Storyshots Views / Orders / Draft order list default 1`] = `
         </div>
         <div
           class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
-          data-test-id="searchInput"
+          data-test-id="search-input"
         >
           <div
             class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
@@ -107108,7 +106967,7 @@ exports[`Storyshots Views / Orders / Draft order list limits reached 1`] = `
         </div>
         <div
           class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
-          data-test-id="searchInput"
+          data-test-id="search-input"
         >
           <div
             class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
@@ -108912,7 +108771,7 @@ exports[`Storyshots Views / Orders / Draft order list loading 1`] = `
         </div>
         <div
           class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
-          data-test-id="searchInput"
+          data-test-id="search-input"
         >
           <div
             class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
@@ -109342,7 +109201,7 @@ exports[`Storyshots Views / Orders / Draft order list when no data 1`] = `
         </div>
         <div
           class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
-          data-test-id="searchInput"
+          data-test-id="search-input"
         >
           <div
             class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
@@ -109661,7 +109520,7 @@ exports[`Storyshots Views / Orders / Fulfill order default 1`] = `
               >
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id OrderFulfillPage-colName-id OrderFulfillPage-colName-id"
-                  data-test-id="tableCellAvatar"
+                  data-test-id="table-cell-avatar"
                   thumbnail="sample-product.jpg"
                 >
                   <div
@@ -109848,7 +109707,7 @@ exports[`Storyshots Views / Orders / Fulfill order default 1`] = `
               >
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id OrderFulfillPage-colName-id OrderFulfillPage-colName-id"
-                  data-test-id="tableCellAvatar"
+                  data-test-id="table-cell-avatar"
                   thumbnail="sample-product.jpg"
                 >
                   <div
@@ -110020,7 +109879,7 @@ exports[`Storyshots Views / Orders / Fulfill order default 1`] = `
               >
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id OrderFulfillPage-colName-id OrderFulfillPage-colName-id"
-                  data-test-id="tableCellAvatar"
+                  data-test-id="table-cell-avatar"
                   thumbnail="sample-product.jpg"
                 >
                   <div
@@ -110270,7 +110129,7 @@ exports[`Storyshots Views / Orders / Fulfill order error 1`] = `
               >
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id OrderFulfillPage-colName-id OrderFulfillPage-colName-id"
-                  data-test-id="tableCellAvatar"
+                  data-test-id="table-cell-avatar"
                   thumbnail="sample-product.jpg"
                 >
                   <div
@@ -110457,7 +110316,7 @@ exports[`Storyshots Views / Orders / Fulfill order error 1`] = `
               >
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id OrderFulfillPage-colName-id OrderFulfillPage-colName-id"
-                  data-test-id="tableCellAvatar"
+                  data-test-id="table-cell-avatar"
                   thumbnail="sample-product.jpg"
                 >
                   <div
@@ -110629,7 +110488,7 @@ exports[`Storyshots Views / Orders / Fulfill order error 1`] = `
               >
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id OrderFulfillPage-colName-id OrderFulfillPage-colName-id"
-                  data-test-id="tableCellAvatar"
+                  data-test-id="table-cell-avatar"
                   thumbnail="sample-product.jpg"
                 >
                   <div
@@ -110949,7 +110808,7 @@ exports[`Storyshots Views / Orders / Fulfill order one warehouse 1`] = `
               >
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id OrderFulfillPage-colName-id OrderFulfillPage-colName-id"
-                  data-test-id="tableCellAvatar"
+                  data-test-id="table-cell-avatar"
                   thumbnail="sample-product.jpg"
                 >
                   <div
@@ -111031,7 +110890,7 @@ exports[`Storyshots Views / Orders / Fulfill order one warehouse 1`] = `
               >
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id OrderFulfillPage-colName-id OrderFulfillPage-colName-id"
-                  data-test-id="tableCellAvatar"
+                  data-test-id="table-cell-avatar"
                   thumbnail="sample-product.jpg"
                 >
                   <div
@@ -111083,7 +110942,7 @@ exports[`Storyshots Views / Orders / Fulfill order one warehouse 1`] = `
               >
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id OrderFulfillPage-colName-id OrderFulfillPage-colName-id"
-                  data-test-id="tableCellAvatar"
+                  data-test-id="table-cell-avatar"
                   thumbnail="sample-product.jpg"
                 >
                   <div
@@ -111223,7 +111082,7 @@ exports[`Storyshots Views / Orders / Order details cancelled 1`] = `
               aria-haspopup="true"
               aria-label="More"
               class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
-              data-test-id="showMoreButton"
+              data-test-id="show-more-button"
               tabindex="0"
               type="button"
             >
@@ -111274,7 +111133,7 @@ exports[`Storyshots Views / Orders / Order details cancelled 1`] = `
         class="Grid-root-id Grid-default-id"
       >
         <div
-          data-test-id="orderFulfillment"
+          data-test-id="order-fulfillment"
         >
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
@@ -111383,7 +111242,7 @@ exports[`Storyshots Views / Orders / Order details cancelled 1`] = `
                   >
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id TableLine-colName-id"
-                      data-test-id="tableCellAvatar"
+                      data-test-id="table-cell-avatar"
                       thumbnail="placeholder60x60.png"
                     >
                       <div
@@ -111556,7 +111415,7 @@ exports[`Storyshots Views / Orders / Order details cancelled 1`] = `
                   >
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id TableLine-colName-id"
-                      data-test-id="tableCellAvatar"
+                      data-test-id="table-cell-avatar"
                       thumbnail="placeholder60x60.png"
                     >
                       <div
@@ -111729,7 +111588,7 @@ exports[`Storyshots Views / Orders / Order details cancelled 1`] = `
                   >
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id TableLine-colName-id"
-                      data-test-id="tableCellAvatar"
+                      data-test-id="table-cell-avatar"
                       thumbnail="placeholder60x60.png"
                     >
                       <div
@@ -112017,8 +111876,8 @@ exports[`Storyshots Views / Orders / Order details cancelled 1`] = `
           />
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="metadataEditor"
             data-test-expanded="true"
+            data-test-id="metadata-editor"
             data-test-is-private="false"
           >
             <div
@@ -112033,7 +111892,7 @@ exports[`Storyshots Views / Orders / Order details cancelled 1`] = `
                   Metadata
                   <button
                     class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test="expand"
+                    data-test-id="expand"
                     tabindex="0"
                     type="button"
                   >
@@ -112105,7 +111964,7 @@ exports[`Storyshots Views / Orders / Order details cancelled 1`] = `
               >
                 <tr
                   class="MuiTableRow-root-id MuiTableRow-hover-id"
-                  data-test="field"
+                  data-test-id="field"
                 >
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colName-id"
@@ -112186,8 +112045,7 @@ exports[`Storyshots Views / Orders / Order details cancelled 1`] = `
                   >
                     <button
                       class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                      data-test="deleteField"
-                      data-test-id="0"
+                      data-test-id="delete-field-0"
                       tabindex="0"
                       type="button"
                     >
@@ -112214,7 +112072,7 @@ exports[`Storyshots Views / Orders / Order details cancelled 1`] = `
             >
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-                data-test="addField"
+                data-test-id="add-field"
                 tabindex="0"
                 type="button"
               >
@@ -112231,8 +112089,8 @@ exports[`Storyshots Views / Orders / Order details cancelled 1`] = `
           />
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="metadataEditor"
             data-test-expanded="true"
+            data-test-id="metadata-editor"
             data-test-is-private="true"
           >
             <div
@@ -112247,7 +112105,7 @@ exports[`Storyshots Views / Orders / Order details cancelled 1`] = `
                   Private Metadata
                   <button
                     class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test="expand"
+                    data-test-id="expand"
                     tabindex="0"
                     type="button"
                   >
@@ -112293,7 +112151,7 @@ exports[`Storyshots Views / Orders / Order details cancelled 1`] = `
             >
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-                data-test="addField"
+                data-test-id="add-field"
                 tabindex="0"
                 type="button"
               >
@@ -113065,7 +112923,7 @@ exports[`Storyshots Views / Orders / Order details default 1`] = `
               aria-haspopup="true"
               aria-label="More"
               class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
-              data-test-id="showMoreButton"
+              data-test-id="show-more-button"
               tabindex="0"
               type="button"
             >
@@ -113116,7 +112974,7 @@ exports[`Storyshots Views / Orders / Order details default 1`] = `
         class="Grid-root-id Grid-default-id"
       >
         <div
-          data-test-id="orderFulfillment"
+          data-test-id="order-fulfillment"
         >
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
@@ -113225,7 +113083,7 @@ exports[`Storyshots Views / Orders / Order details default 1`] = `
                   >
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id TableLine-colName-id"
-                      data-test-id="tableCellAvatar"
+                      data-test-id="table-cell-avatar"
                       thumbnail="placeholder60x60.png"
                     >
                       <div
@@ -113348,7 +113206,7 @@ exports[`Storyshots Views / Orders / Order details default 1`] = `
               >
                 <button
                   class="MuiButtonBase-root-id IconButton-secondary-id OrderFulfilledProductsCard-deleteIcon-id IconButton-hoverOutline-id"
-                  data-test-id="cancelFulfillmentButton"
+                  data-test-id="cancel-fulfillment-button"
                   tabindex="0"
                   type="button"
                 >
@@ -113446,7 +113304,7 @@ exports[`Storyshots Views / Orders / Order details default 1`] = `
                   >
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id TableLine-colName-id"
-                      data-test-id="tableCellAvatar"
+                      data-test-id="table-cell-avatar"
                       thumbnail="placeholder60x60.png"
                     >
                       <div
@@ -113569,7 +113427,7 @@ exports[`Storyshots Views / Orders / Order details default 1`] = `
               >
                 <button
                   class="MuiButtonBase-root-id IconButton-secondary-id OrderFulfilledProductsCard-deleteIcon-id IconButton-hoverOutline-id"
-                  data-test-id="cancelFulfillmentButton"
+                  data-test-id="cancel-fulfillment-button"
                   tabindex="0"
                   type="button"
                 >
@@ -113667,7 +113525,7 @@ exports[`Storyshots Views / Orders / Order details default 1`] = `
                   >
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id TableLine-colName-id"
-                      data-test-id="tableCellAvatar"
+                      data-test-id="table-cell-avatar"
                       thumbnail="placeholder60x60.png"
                     >
                       <div
@@ -114017,8 +113875,8 @@ exports[`Storyshots Views / Orders / Order details default 1`] = `
           />
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="metadataEditor"
             data-test-expanded="true"
+            data-test-id="metadata-editor"
             data-test-is-private="false"
           >
             <div
@@ -114033,7 +113891,7 @@ exports[`Storyshots Views / Orders / Order details default 1`] = `
                   Metadata
                   <button
                     class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test="expand"
+                    data-test-id="expand"
                     tabindex="0"
                     type="button"
                   >
@@ -114105,7 +113963,7 @@ exports[`Storyshots Views / Orders / Order details default 1`] = `
               >
                 <tr
                   class="MuiTableRow-root-id MuiTableRow-hover-id"
-                  data-test="field"
+                  data-test-id="field"
                 >
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colName-id"
@@ -114186,8 +114044,7 @@ exports[`Storyshots Views / Orders / Order details default 1`] = `
                   >
                     <button
                       class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                      data-test="deleteField"
-                      data-test-id="0"
+                      data-test-id="delete-field-0"
                       tabindex="0"
                       type="button"
                     >
@@ -114214,7 +114071,7 @@ exports[`Storyshots Views / Orders / Order details default 1`] = `
             >
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-                data-test="addField"
+                data-test-id="add-field"
                 tabindex="0"
                 type="button"
               >
@@ -114231,8 +114088,8 @@ exports[`Storyshots Views / Orders / Order details default 1`] = `
           />
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="metadataEditor"
             data-test-expanded="true"
+            data-test-id="metadata-editor"
             data-test-is-private="true"
           >
             <div
@@ -114247,7 +114104,7 @@ exports[`Storyshots Views / Orders / Order details default 1`] = `
                   Private Metadata
                   <button
                     class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test="expand"
+                    data-test-id="expand"
                     tabindex="0"
                     type="button"
                   >
@@ -114293,7 +114150,7 @@ exports[`Storyshots Views / Orders / Order details default 1`] = `
             >
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-                data-test="addField"
+                data-test-id="add-field"
                 tabindex="0"
                 type="button"
               >
@@ -115097,7 +114954,7 @@ exports[`Storyshots Views / Orders / Order details fulfilled 1`] = `
               aria-haspopup="true"
               aria-label="More"
               class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
-              data-test-id="showMoreButton"
+              data-test-id="show-more-button"
               tabindex="0"
               type="button"
             >
@@ -115148,7 +115005,7 @@ exports[`Storyshots Views / Orders / Order details fulfilled 1`] = `
         class="Grid-root-id Grid-default-id"
       >
         <div
-          data-test-id="orderFulfillment"
+          data-test-id="order-fulfillment"
         >
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
@@ -115257,7 +115114,7 @@ exports[`Storyshots Views / Orders / Order details fulfilled 1`] = `
                   >
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id TableLine-colName-id"
-                      data-test-id="tableCellAvatar"
+                      data-test-id="table-cell-avatar"
                       thumbnail="placeholder60x60.png"
                     >
                       <div
@@ -115380,7 +115237,7 @@ exports[`Storyshots Views / Orders / Order details fulfilled 1`] = `
               >
                 <button
                   class="MuiButtonBase-root-id IconButton-secondary-id OrderFulfilledProductsCard-deleteIcon-id IconButton-hoverOutline-id"
-                  data-test-id="cancelFulfillmentButton"
+                  data-test-id="cancel-fulfillment-button"
                   tabindex="0"
                   type="button"
                 >
@@ -115478,7 +115335,7 @@ exports[`Storyshots Views / Orders / Order details fulfilled 1`] = `
                   >
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id TableLine-colName-id"
-                      data-test-id="tableCellAvatar"
+                      data-test-id="table-cell-avatar"
                       thumbnail="placeholder60x60.png"
                     >
                       <div
@@ -115601,7 +115458,7 @@ exports[`Storyshots Views / Orders / Order details fulfilled 1`] = `
               >
                 <button
                   class="MuiButtonBase-root-id IconButton-secondary-id OrderFulfilledProductsCard-deleteIcon-id IconButton-hoverOutline-id"
-                  data-test-id="cancelFulfillmentButton"
+                  data-test-id="cancel-fulfillment-button"
                   tabindex="0"
                   type="button"
                 >
@@ -115699,7 +115556,7 @@ exports[`Storyshots Views / Orders / Order details fulfilled 1`] = `
                   >
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id TableLine-colName-id"
-                      data-test-id="tableCellAvatar"
+                      data-test-id="table-cell-avatar"
                       thumbnail="placeholder60x60.png"
                     >
                       <div
@@ -116049,8 +115906,8 @@ exports[`Storyshots Views / Orders / Order details fulfilled 1`] = `
           />
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="metadataEditor"
             data-test-expanded="true"
+            data-test-id="metadata-editor"
             data-test-is-private="false"
           >
             <div
@@ -116065,7 +115922,7 @@ exports[`Storyshots Views / Orders / Order details fulfilled 1`] = `
                   Metadata
                   <button
                     class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test="expand"
+                    data-test-id="expand"
                     tabindex="0"
                     type="button"
                   >
@@ -116137,7 +115994,7 @@ exports[`Storyshots Views / Orders / Order details fulfilled 1`] = `
               >
                 <tr
                   class="MuiTableRow-root-id MuiTableRow-hover-id"
-                  data-test="field"
+                  data-test-id="field"
                 >
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colName-id"
@@ -116218,8 +116075,7 @@ exports[`Storyshots Views / Orders / Order details fulfilled 1`] = `
                   >
                     <button
                       class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                      data-test="deleteField"
-                      data-test-id="0"
+                      data-test-id="delete-field-0"
                       tabindex="0"
                       type="button"
                     >
@@ -116246,7 +116102,7 @@ exports[`Storyshots Views / Orders / Order details fulfilled 1`] = `
             >
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-                data-test="addField"
+                data-test-id="add-field"
                 tabindex="0"
                 type="button"
               >
@@ -116263,8 +116119,8 @@ exports[`Storyshots Views / Orders / Order details fulfilled 1`] = `
           />
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="metadataEditor"
             data-test-expanded="true"
+            data-test-id="metadata-editor"
             data-test-is-private="true"
           >
             <div
@@ -116279,7 +116135,7 @@ exports[`Storyshots Views / Orders / Order details fulfilled 1`] = `
                   Private Metadata
                   <button
                     class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test="expand"
+                    data-test-id="expand"
                     tabindex="0"
                     type="button"
                   >
@@ -116325,7 +116181,7 @@ exports[`Storyshots Views / Orders / Order details fulfilled 1`] = `
             >
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-                data-test="addField"
+                data-test-id="add-field"
                 tabindex="0"
                 type="button"
               >
@@ -117118,7 +116974,7 @@ exports[`Storyshots Views / Orders / Order details loading 1`] = `
               aria-haspopup="true"
               aria-label="More"
               class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
-              data-test-id="showMoreButton"
+              data-test-id="show-more-button"
               tabindex="0"
               type="button"
             >
@@ -117165,7 +117021,7 @@ exports[`Storyshots Views / Orders / Order details loading 1`] = `
         class="Grid-root-id Grid-default-id"
       >
         <div
-          data-test-id="orderFulfillment"
+          data-test-id="order-fulfillment"
         >
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
@@ -117366,8 +117222,8 @@ exports[`Storyshots Views / Orders / Order details loading 1`] = `
           />
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="metadataEditor"
             data-test-expanded="true"
+            data-test-id="metadata-editor"
             data-test-is-private="false"
           >
             <div
@@ -117382,7 +117238,7 @@ exports[`Storyshots Views / Orders / Order details loading 1`] = `
                   Metadata
                   <button
                     class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test="expand"
+                    data-test-id="expand"
                     tabindex="0"
                     type="button"
                   >
@@ -117427,8 +117283,8 @@ exports[`Storyshots Views / Orders / Order details loading 1`] = `
           />
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="metadataEditor"
             data-test-expanded="true"
+            data-test-id="metadata-editor"
             data-test-is-private="true"
           >
             <div
@@ -117443,7 +117299,7 @@ exports[`Storyshots Views / Orders / Order details loading 1`] = `
                   Private Metadata
                   <button
                     class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test="expand"
+                    data-test-id="expand"
                     tabindex="0"
                     type="button"
                   >
@@ -117770,7 +117626,7 @@ exports[`Storyshots Views / Orders / Order details no customer note 1`] = `
               aria-haspopup="true"
               aria-label="More"
               class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
-              data-test-id="showMoreButton"
+              data-test-id="show-more-button"
               tabindex="0"
               type="button"
             >
@@ -117821,7 +117677,7 @@ exports[`Storyshots Views / Orders / Order details no customer note 1`] = `
         class="Grid-root-id Grid-default-id"
       >
         <div
-          data-test-id="orderFulfillment"
+          data-test-id="order-fulfillment"
         >
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
@@ -117930,7 +117786,7 @@ exports[`Storyshots Views / Orders / Order details no customer note 1`] = `
                   >
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id TableLine-colName-id"
-                      data-test-id="tableCellAvatar"
+                      data-test-id="table-cell-avatar"
                       thumbnail="placeholder60x60.png"
                     >
                       <div
@@ -118053,7 +117909,7 @@ exports[`Storyshots Views / Orders / Order details no customer note 1`] = `
               >
                 <button
                   class="MuiButtonBase-root-id IconButton-secondary-id OrderFulfilledProductsCard-deleteIcon-id IconButton-hoverOutline-id"
-                  data-test-id="cancelFulfillmentButton"
+                  data-test-id="cancel-fulfillment-button"
                   tabindex="0"
                   type="button"
                 >
@@ -118151,7 +118007,7 @@ exports[`Storyshots Views / Orders / Order details no customer note 1`] = `
                   >
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id TableLine-colName-id"
-                      data-test-id="tableCellAvatar"
+                      data-test-id="table-cell-avatar"
                       thumbnail="placeholder60x60.png"
                     >
                       <div
@@ -118274,7 +118130,7 @@ exports[`Storyshots Views / Orders / Order details no customer note 1`] = `
               >
                 <button
                   class="MuiButtonBase-root-id IconButton-secondary-id OrderFulfilledProductsCard-deleteIcon-id IconButton-hoverOutline-id"
-                  data-test-id="cancelFulfillmentButton"
+                  data-test-id="cancel-fulfillment-button"
                   tabindex="0"
                   type="button"
                 >
@@ -118372,7 +118228,7 @@ exports[`Storyshots Views / Orders / Order details no customer note 1`] = `
                   >
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id TableLine-colName-id"
-                      data-test-id="tableCellAvatar"
+                      data-test-id="table-cell-avatar"
                       thumbnail="placeholder60x60.png"
                     >
                       <div
@@ -118722,8 +118578,8 @@ exports[`Storyshots Views / Orders / Order details no customer note 1`] = `
           />
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="metadataEditor"
             data-test-expanded="true"
+            data-test-id="metadata-editor"
             data-test-is-private="false"
           >
             <div
@@ -118738,7 +118594,7 @@ exports[`Storyshots Views / Orders / Order details no customer note 1`] = `
                   Metadata
                   <button
                     class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test="expand"
+                    data-test-id="expand"
                     tabindex="0"
                     type="button"
                   >
@@ -118810,7 +118666,7 @@ exports[`Storyshots Views / Orders / Order details no customer note 1`] = `
               >
                 <tr
                   class="MuiTableRow-root-id MuiTableRow-hover-id"
-                  data-test="field"
+                  data-test-id="field"
                 >
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colName-id"
@@ -118891,8 +118747,7 @@ exports[`Storyshots Views / Orders / Order details no customer note 1`] = `
                   >
                     <button
                       class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                      data-test="deleteField"
-                      data-test-id="0"
+                      data-test-id="delete-field-0"
                       tabindex="0"
                       type="button"
                     >
@@ -118919,7 +118774,7 @@ exports[`Storyshots Views / Orders / Order details no customer note 1`] = `
             >
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-                data-test="addField"
+                data-test-id="add-field"
                 tabindex="0"
                 type="button"
               >
@@ -118936,8 +118791,8 @@ exports[`Storyshots Views / Orders / Order details no customer note 1`] = `
           />
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="metadataEditor"
             data-test-expanded="true"
+            data-test-id="metadata-editor"
             data-test-is-private="true"
           >
             <div
@@ -118952,7 +118807,7 @@ exports[`Storyshots Views / Orders / Order details no customer note 1`] = `
                   Private Metadata
                   <button
                     class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test="expand"
+                    data-test-id="expand"
                     tabindex="0"
                     type="button"
                   >
@@ -118998,7 +118853,7 @@ exports[`Storyshots Views / Orders / Order details no customer note 1`] = `
             >
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-                data-test="addField"
+                data-test-id="add-field"
                 tabindex="0"
                 type="button"
               >
@@ -119802,7 +119657,7 @@ exports[`Storyshots Views / Orders / Order details no payment 1`] = `
               aria-haspopup="true"
               aria-label="More"
               class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
-              data-test-id="showMoreButton"
+              data-test-id="show-more-button"
               tabindex="0"
               type="button"
             >
@@ -119853,7 +119708,7 @@ exports[`Storyshots Views / Orders / Order details no payment 1`] = `
         class="Grid-root-id Grid-default-id"
       >
         <div
-          data-test-id="orderFulfillment"
+          data-test-id="order-fulfillment"
         >
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
@@ -119962,7 +119817,7 @@ exports[`Storyshots Views / Orders / Order details no payment 1`] = `
                   >
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id TableLine-colName-id"
-                      data-test-id="tableCellAvatar"
+                      data-test-id="table-cell-avatar"
                       thumbnail="placeholder60x60.png"
                     >
                       <div
@@ -120085,7 +119940,7 @@ exports[`Storyshots Views / Orders / Order details no payment 1`] = `
               >
                 <button
                   class="MuiButtonBase-root-id IconButton-secondary-id OrderFulfilledProductsCard-deleteIcon-id IconButton-hoverOutline-id"
-                  data-test-id="cancelFulfillmentButton"
+                  data-test-id="cancel-fulfillment-button"
                   tabindex="0"
                   type="button"
                 >
@@ -120183,7 +120038,7 @@ exports[`Storyshots Views / Orders / Order details no payment 1`] = `
                   >
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id TableLine-colName-id"
-                      data-test-id="tableCellAvatar"
+                      data-test-id="table-cell-avatar"
                       thumbnail="placeholder60x60.png"
                     >
                       <div
@@ -120306,7 +120161,7 @@ exports[`Storyshots Views / Orders / Order details no payment 1`] = `
               >
                 <button
                   class="MuiButtonBase-root-id IconButton-secondary-id OrderFulfilledProductsCard-deleteIcon-id IconButton-hoverOutline-id"
-                  data-test-id="cancelFulfillmentButton"
+                  data-test-id="cancel-fulfillment-button"
                   tabindex="0"
                   type="button"
                 >
@@ -120404,7 +120259,7 @@ exports[`Storyshots Views / Orders / Order details no payment 1`] = `
                   >
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id TableLine-colName-id"
-                      data-test-id="tableCellAvatar"
+                      data-test-id="table-cell-avatar"
                       thumbnail="placeholder60x60.png"
                     >
                       <div
@@ -120752,8 +120607,8 @@ exports[`Storyshots Views / Orders / Order details no payment 1`] = `
           />
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="metadataEditor"
             data-test-expanded="true"
+            data-test-id="metadata-editor"
             data-test-is-private="false"
           >
             <div
@@ -120768,7 +120623,7 @@ exports[`Storyshots Views / Orders / Order details no payment 1`] = `
                   Metadata
                   <button
                     class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test="expand"
+                    data-test-id="expand"
                     tabindex="0"
                     type="button"
                   >
@@ -120840,7 +120695,7 @@ exports[`Storyshots Views / Orders / Order details no payment 1`] = `
               >
                 <tr
                   class="MuiTableRow-root-id MuiTableRow-hover-id"
-                  data-test="field"
+                  data-test-id="field"
                 >
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colName-id"
@@ -120921,8 +120776,7 @@ exports[`Storyshots Views / Orders / Order details no payment 1`] = `
                   >
                     <button
                       class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                      data-test="deleteField"
-                      data-test-id="0"
+                      data-test-id="delete-field-0"
                       tabindex="0"
                       type="button"
                     >
@@ -120949,7 +120803,7 @@ exports[`Storyshots Views / Orders / Order details no payment 1`] = `
             >
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-                data-test="addField"
+                data-test-id="add-field"
                 tabindex="0"
                 type="button"
               >
@@ -120966,8 +120820,8 @@ exports[`Storyshots Views / Orders / Order details no payment 1`] = `
           />
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="metadataEditor"
             data-test-expanded="true"
+            data-test-id="metadata-editor"
             data-test-is-private="true"
           >
             <div
@@ -120982,7 +120836,7 @@ exports[`Storyshots Views / Orders / Order details no payment 1`] = `
                   Private Metadata
                   <button
                     class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test="expand"
+                    data-test-id="expand"
                     tabindex="0"
                     type="button"
                   >
@@ -121028,7 +120882,7 @@ exports[`Storyshots Views / Orders / Order details no payment 1`] = `
             >
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-                data-test="addField"
+                data-test-id="add-field"
                 tabindex="0"
                 type="button"
               >
@@ -121832,7 +121686,7 @@ exports[`Storyshots Views / Orders / Order details no shipping address 1`] = `
               aria-haspopup="true"
               aria-label="More"
               class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
-              data-test-id="showMoreButton"
+              data-test-id="show-more-button"
               tabindex="0"
               type="button"
             >
@@ -121883,7 +121737,7 @@ exports[`Storyshots Views / Orders / Order details no shipping address 1`] = `
         class="Grid-root-id Grid-default-id"
       >
         <div
-          data-test-id="orderFulfillment"
+          data-test-id="order-fulfillment"
         >
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
@@ -121992,7 +121846,7 @@ exports[`Storyshots Views / Orders / Order details no shipping address 1`] = `
                   >
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id TableLine-colName-id"
-                      data-test-id="tableCellAvatar"
+                      data-test-id="table-cell-avatar"
                       thumbnail="placeholder60x60.png"
                     >
                       <div
@@ -122115,7 +121969,7 @@ exports[`Storyshots Views / Orders / Order details no shipping address 1`] = `
               >
                 <button
                   class="MuiButtonBase-root-id IconButton-secondary-id OrderFulfilledProductsCard-deleteIcon-id IconButton-hoverOutline-id"
-                  data-test-id="cancelFulfillmentButton"
+                  data-test-id="cancel-fulfillment-button"
                   tabindex="0"
                   type="button"
                 >
@@ -122213,7 +122067,7 @@ exports[`Storyshots Views / Orders / Order details no shipping address 1`] = `
                   >
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id TableLine-colName-id"
-                      data-test-id="tableCellAvatar"
+                      data-test-id="table-cell-avatar"
                       thumbnail="placeholder60x60.png"
                     >
                       <div
@@ -122336,7 +122190,7 @@ exports[`Storyshots Views / Orders / Order details no shipping address 1`] = `
               >
                 <button
                   class="MuiButtonBase-root-id IconButton-secondary-id OrderFulfilledProductsCard-deleteIcon-id IconButton-hoverOutline-id"
-                  data-test-id="cancelFulfillmentButton"
+                  data-test-id="cancel-fulfillment-button"
                   tabindex="0"
                   type="button"
                 >
@@ -122434,7 +122288,7 @@ exports[`Storyshots Views / Orders / Order details no shipping address 1`] = `
                   >
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id TableLine-colName-id"
-                      data-test-id="tableCellAvatar"
+                      data-test-id="table-cell-avatar"
                       thumbnail="placeholder60x60.png"
                     >
                       <div
@@ -122784,8 +122638,8 @@ exports[`Storyshots Views / Orders / Order details no shipping address 1`] = `
           />
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="metadataEditor"
             data-test-expanded="true"
+            data-test-id="metadata-editor"
             data-test-is-private="false"
           >
             <div
@@ -122800,7 +122654,7 @@ exports[`Storyshots Views / Orders / Order details no shipping address 1`] = `
                   Metadata
                   <button
                     class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test="expand"
+                    data-test-id="expand"
                     tabindex="0"
                     type="button"
                   >
@@ -122872,7 +122726,7 @@ exports[`Storyshots Views / Orders / Order details no shipping address 1`] = `
               >
                 <tr
                   class="MuiTableRow-root-id MuiTableRow-hover-id"
-                  data-test="field"
+                  data-test-id="field"
                 >
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colName-id"
@@ -122953,8 +122807,7 @@ exports[`Storyshots Views / Orders / Order details no shipping address 1`] = `
                   >
                     <button
                       class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                      data-test="deleteField"
-                      data-test-id="0"
+                      data-test-id="delete-field-0"
                       tabindex="0"
                       type="button"
                     >
@@ -122981,7 +122834,7 @@ exports[`Storyshots Views / Orders / Order details no shipping address 1`] = `
             >
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-                data-test="addField"
+                data-test-id="add-field"
                 tabindex="0"
                 type="button"
               >
@@ -122998,8 +122851,8 @@ exports[`Storyshots Views / Orders / Order details no shipping address 1`] = `
           />
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="metadataEditor"
             data-test-expanded="true"
+            data-test-id="metadata-editor"
             data-test-is-private="true"
           >
             <div
@@ -123014,7 +122867,7 @@ exports[`Storyshots Views / Orders / Order details no shipping address 1`] = `
                   Private Metadata
                   <button
                     class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test="expand"
+                    data-test-id="expand"
                     tabindex="0"
                     type="button"
                   >
@@ -123060,7 +122913,7 @@ exports[`Storyshots Views / Orders / Order details no shipping address 1`] = `
             >
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-                data-test="addField"
+                data-test-id="add-field"
                 tabindex="0"
                 type="button"
               >
@@ -123856,7 +123709,7 @@ exports[`Storyshots Views / Orders / Order details partially fulfilled 1`] = `
               aria-haspopup="true"
               aria-label="More"
               class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
-              data-test-id="showMoreButton"
+              data-test-id="show-more-button"
               tabindex="0"
               type="button"
             >
@@ -123907,7 +123760,7 @@ exports[`Storyshots Views / Orders / Order details partially fulfilled 1`] = `
         class="Grid-root-id Grid-default-id"
       >
         <div
-          data-test-id="orderFulfillment"
+          data-test-id="order-fulfillment"
         >
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
@@ -124016,7 +123869,7 @@ exports[`Storyshots Views / Orders / Order details partially fulfilled 1`] = `
                   >
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id TableLine-colName-id"
-                      data-test-id="tableCellAvatar"
+                      data-test-id="table-cell-avatar"
                       thumbnail="placeholder60x60.png"
                     >
                       <div
@@ -124139,7 +123992,7 @@ exports[`Storyshots Views / Orders / Order details partially fulfilled 1`] = `
               >
                 <button
                   class="MuiButtonBase-root-id IconButton-secondary-id OrderFulfilledProductsCard-deleteIcon-id IconButton-hoverOutline-id"
-                  data-test-id="cancelFulfillmentButton"
+                  data-test-id="cancel-fulfillment-button"
                   tabindex="0"
                   type="button"
                 >
@@ -124237,7 +124090,7 @@ exports[`Storyshots Views / Orders / Order details partially fulfilled 1`] = `
                   >
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id TableLine-colName-id"
-                      data-test-id="tableCellAvatar"
+                      data-test-id="table-cell-avatar"
                       thumbnail="placeholder60x60.png"
                     >
                       <div
@@ -124360,7 +124213,7 @@ exports[`Storyshots Views / Orders / Order details partially fulfilled 1`] = `
               >
                 <button
                   class="MuiButtonBase-root-id IconButton-secondary-id OrderFulfilledProductsCard-deleteIcon-id IconButton-hoverOutline-id"
-                  data-test-id="cancelFulfillmentButton"
+                  data-test-id="cancel-fulfillment-button"
                   tabindex="0"
                   type="button"
                 >
@@ -124458,7 +124311,7 @@ exports[`Storyshots Views / Orders / Order details partially fulfilled 1`] = `
                   >
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id TableLine-colName-id"
-                      data-test-id="tableCellAvatar"
+                      data-test-id="table-cell-avatar"
                       thumbnail="placeholder60x60.png"
                     >
                       <div
@@ -124808,8 +124661,8 @@ exports[`Storyshots Views / Orders / Order details partially fulfilled 1`] = `
           />
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="metadataEditor"
             data-test-expanded="true"
+            data-test-id="metadata-editor"
             data-test-is-private="false"
           >
             <div
@@ -124824,7 +124677,7 @@ exports[`Storyshots Views / Orders / Order details partially fulfilled 1`] = `
                   Metadata
                   <button
                     class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test="expand"
+                    data-test-id="expand"
                     tabindex="0"
                     type="button"
                   >
@@ -124896,7 +124749,7 @@ exports[`Storyshots Views / Orders / Order details partially fulfilled 1`] = `
               >
                 <tr
                   class="MuiTableRow-root-id MuiTableRow-hover-id"
-                  data-test="field"
+                  data-test-id="field"
                 >
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colName-id"
@@ -124977,8 +124830,7 @@ exports[`Storyshots Views / Orders / Order details partially fulfilled 1`] = `
                   >
                     <button
                       class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                      data-test="deleteField"
-                      data-test-id="0"
+                      data-test-id="delete-field-0"
                       tabindex="0"
                       type="button"
                     >
@@ -125005,7 +124857,7 @@ exports[`Storyshots Views / Orders / Order details partially fulfilled 1`] = `
             >
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-                data-test="addField"
+                data-test-id="add-field"
                 tabindex="0"
                 type="button"
               >
@@ -125022,8 +124874,8 @@ exports[`Storyshots Views / Orders / Order details partially fulfilled 1`] = `
           />
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="metadataEditor"
             data-test-expanded="true"
+            data-test-id="metadata-editor"
             data-test-is-private="true"
           >
             <div
@@ -125038,7 +124890,7 @@ exports[`Storyshots Views / Orders / Order details partially fulfilled 1`] = `
                   Private Metadata
                   <button
                     class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test="expand"
+                    data-test-id="expand"
                     tabindex="0"
                     type="button"
                   >
@@ -125084,7 +124936,7 @@ exports[`Storyshots Views / Orders / Order details partially fulfilled 1`] = `
             >
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-                data-test="addField"
+                data-test-id="add-field"
                 tabindex="0"
                 type="button"
               >
@@ -125888,7 +125740,7 @@ exports[`Storyshots Views / Orders / Order details payment confirmed 1`] = `
               aria-haspopup="true"
               aria-label="More"
               class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
-              data-test-id="showMoreButton"
+              data-test-id="show-more-button"
               tabindex="0"
               type="button"
             >
@@ -125939,7 +125791,7 @@ exports[`Storyshots Views / Orders / Order details payment confirmed 1`] = `
         class="Grid-root-id Grid-default-id"
       >
         <div
-          data-test-id="orderFulfillment"
+          data-test-id="order-fulfillment"
         >
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
@@ -126048,7 +125900,7 @@ exports[`Storyshots Views / Orders / Order details payment confirmed 1`] = `
                   >
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id TableLine-colName-id"
-                      data-test-id="tableCellAvatar"
+                      data-test-id="table-cell-avatar"
                       thumbnail="placeholder60x60.png"
                     >
                       <div
@@ -126171,7 +126023,7 @@ exports[`Storyshots Views / Orders / Order details payment confirmed 1`] = `
               >
                 <button
                   class="MuiButtonBase-root-id IconButton-secondary-id OrderFulfilledProductsCard-deleteIcon-id IconButton-hoverOutline-id"
-                  data-test-id="cancelFulfillmentButton"
+                  data-test-id="cancel-fulfillment-button"
                   tabindex="0"
                   type="button"
                 >
@@ -126269,7 +126121,7 @@ exports[`Storyshots Views / Orders / Order details payment confirmed 1`] = `
                   >
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id TableLine-colName-id"
-                      data-test-id="tableCellAvatar"
+                      data-test-id="table-cell-avatar"
                       thumbnail="placeholder60x60.png"
                     >
                       <div
@@ -126392,7 +126244,7 @@ exports[`Storyshots Views / Orders / Order details payment confirmed 1`] = `
               >
                 <button
                   class="MuiButtonBase-root-id IconButton-secondary-id OrderFulfilledProductsCard-deleteIcon-id IconButton-hoverOutline-id"
-                  data-test-id="cancelFulfillmentButton"
+                  data-test-id="cancel-fulfillment-button"
                   tabindex="0"
                   type="button"
                 >
@@ -126490,7 +126342,7 @@ exports[`Storyshots Views / Orders / Order details payment confirmed 1`] = `
                   >
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id TableLine-colName-id"
-                      data-test-id="tableCellAvatar"
+                      data-test-id="table-cell-avatar"
                       thumbnail="placeholder60x60.png"
                     >
                       <div
@@ -126840,8 +126692,8 @@ exports[`Storyshots Views / Orders / Order details payment confirmed 1`] = `
           />
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="metadataEditor"
             data-test-expanded="true"
+            data-test-id="metadata-editor"
             data-test-is-private="false"
           >
             <div
@@ -126856,7 +126708,7 @@ exports[`Storyshots Views / Orders / Order details payment confirmed 1`] = `
                   Metadata
                   <button
                     class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test="expand"
+                    data-test-id="expand"
                     tabindex="0"
                     type="button"
                   >
@@ -126928,7 +126780,7 @@ exports[`Storyshots Views / Orders / Order details payment confirmed 1`] = `
               >
                 <tr
                   class="MuiTableRow-root-id MuiTableRow-hover-id"
-                  data-test="field"
+                  data-test-id="field"
                 >
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colName-id"
@@ -127009,8 +126861,7 @@ exports[`Storyshots Views / Orders / Order details payment confirmed 1`] = `
                   >
                     <button
                       class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                      data-test="deleteField"
-                      data-test-id="0"
+                      data-test-id="delete-field-0"
                       tabindex="0"
                       type="button"
                     >
@@ -127037,7 +126888,7 @@ exports[`Storyshots Views / Orders / Order details payment confirmed 1`] = `
             >
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-                data-test="addField"
+                data-test-id="add-field"
                 tabindex="0"
                 type="button"
               >
@@ -127054,8 +126905,8 @@ exports[`Storyshots Views / Orders / Order details payment confirmed 1`] = `
           />
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="metadataEditor"
             data-test-expanded="true"
+            data-test-id="metadata-editor"
             data-test-is-private="true"
           >
             <div
@@ -127070,7 +126921,7 @@ exports[`Storyshots Views / Orders / Order details payment confirmed 1`] = `
                   Private Metadata
                   <button
                     class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test="expand"
+                    data-test-id="expand"
                     tabindex="0"
                     type="button"
                   >
@@ -127116,7 +126967,7 @@ exports[`Storyshots Views / Orders / Order details payment confirmed 1`] = `
             >
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-                data-test="addField"
+                data-test-id="add-field"
                 tabindex="0"
                 type="button"
               >
@@ -127920,7 +127771,7 @@ exports[`Storyshots Views / Orders / Order details payment error 1`] = `
               aria-haspopup="true"
               aria-label="More"
               class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
-              data-test-id="showMoreButton"
+              data-test-id="show-more-button"
               tabindex="0"
               type="button"
             >
@@ -127971,7 +127822,7 @@ exports[`Storyshots Views / Orders / Order details payment error 1`] = `
         class="Grid-root-id Grid-default-id"
       >
         <div
-          data-test-id="orderFulfillment"
+          data-test-id="order-fulfillment"
         >
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
@@ -128080,7 +127931,7 @@ exports[`Storyshots Views / Orders / Order details payment error 1`] = `
                   >
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id TableLine-colName-id"
-                      data-test-id="tableCellAvatar"
+                      data-test-id="table-cell-avatar"
                       thumbnail="placeholder60x60.png"
                     >
                       <div
@@ -128203,7 +128054,7 @@ exports[`Storyshots Views / Orders / Order details payment error 1`] = `
               >
                 <button
                   class="MuiButtonBase-root-id IconButton-secondary-id OrderFulfilledProductsCard-deleteIcon-id IconButton-hoverOutline-id"
-                  data-test-id="cancelFulfillmentButton"
+                  data-test-id="cancel-fulfillment-button"
                   tabindex="0"
                   type="button"
                 >
@@ -128301,7 +128152,7 @@ exports[`Storyshots Views / Orders / Order details payment error 1`] = `
                   >
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id TableLine-colName-id"
-                      data-test-id="tableCellAvatar"
+                      data-test-id="table-cell-avatar"
                       thumbnail="placeholder60x60.png"
                     >
                       <div
@@ -128424,7 +128275,7 @@ exports[`Storyshots Views / Orders / Order details payment error 1`] = `
               >
                 <button
                   class="MuiButtonBase-root-id IconButton-secondary-id OrderFulfilledProductsCard-deleteIcon-id IconButton-hoverOutline-id"
-                  data-test-id="cancelFulfillmentButton"
+                  data-test-id="cancel-fulfillment-button"
                   tabindex="0"
                   type="button"
                 >
@@ -128522,7 +128373,7 @@ exports[`Storyshots Views / Orders / Order details payment error 1`] = `
                   >
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id TableLine-colName-id"
-                      data-test-id="tableCellAvatar"
+                      data-test-id="table-cell-avatar"
                       thumbnail="placeholder60x60.png"
                     >
                       <div
@@ -128872,8 +128723,8 @@ exports[`Storyshots Views / Orders / Order details payment error 1`] = `
           />
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="metadataEditor"
             data-test-expanded="true"
+            data-test-id="metadata-editor"
             data-test-is-private="false"
           >
             <div
@@ -128888,7 +128739,7 @@ exports[`Storyshots Views / Orders / Order details payment error 1`] = `
                   Metadata
                   <button
                     class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test="expand"
+                    data-test-id="expand"
                     tabindex="0"
                     type="button"
                   >
@@ -128960,7 +128811,7 @@ exports[`Storyshots Views / Orders / Order details payment error 1`] = `
               >
                 <tr
                   class="MuiTableRow-root-id MuiTableRow-hover-id"
-                  data-test="field"
+                  data-test-id="field"
                 >
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colName-id"
@@ -129041,8 +128892,7 @@ exports[`Storyshots Views / Orders / Order details payment error 1`] = `
                   >
                     <button
                       class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                      data-test="deleteField"
-                      data-test-id="0"
+                      data-test-id="delete-field-0"
                       tabindex="0"
                       type="button"
                     >
@@ -129069,7 +128919,7 @@ exports[`Storyshots Views / Orders / Order details payment error 1`] = `
             >
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-                data-test="addField"
+                data-test-id="add-field"
                 tabindex="0"
                 type="button"
               >
@@ -129086,8 +128936,8 @@ exports[`Storyshots Views / Orders / Order details payment error 1`] = `
           />
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="metadataEditor"
             data-test-expanded="true"
+            data-test-id="metadata-editor"
             data-test-is-private="true"
           >
             <div
@@ -129102,7 +128952,7 @@ exports[`Storyshots Views / Orders / Order details payment error 1`] = `
                   Private Metadata
                   <button
                     class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test="expand"
+                    data-test-id="expand"
                     tabindex="0"
                     type="button"
                   >
@@ -129148,7 +128998,7 @@ exports[`Storyshots Views / Orders / Order details payment error 1`] = `
             >
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-                data-test="addField"
+                data-test-id="add-field"
                 tabindex="0"
                 type="button"
               >
@@ -129952,7 +129802,7 @@ exports[`Storyshots Views / Orders / Order details pending payment 1`] = `
               aria-haspopup="true"
               aria-label="More"
               class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
-              data-test-id="showMoreButton"
+              data-test-id="show-more-button"
               tabindex="0"
               type="button"
             >
@@ -130003,7 +129853,7 @@ exports[`Storyshots Views / Orders / Order details pending payment 1`] = `
         class="Grid-root-id Grid-default-id"
       >
         <div
-          data-test-id="orderFulfillment"
+          data-test-id="order-fulfillment"
         >
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
@@ -130112,7 +129962,7 @@ exports[`Storyshots Views / Orders / Order details pending payment 1`] = `
                   >
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id TableLine-colName-id"
-                      data-test-id="tableCellAvatar"
+                      data-test-id="table-cell-avatar"
                       thumbnail="placeholder60x60.png"
                     >
                       <div
@@ -130235,7 +130085,7 @@ exports[`Storyshots Views / Orders / Order details pending payment 1`] = `
               >
                 <button
                   class="MuiButtonBase-root-id IconButton-secondary-id OrderFulfilledProductsCard-deleteIcon-id IconButton-hoverOutline-id"
-                  data-test-id="cancelFulfillmentButton"
+                  data-test-id="cancel-fulfillment-button"
                   tabindex="0"
                   type="button"
                 >
@@ -130333,7 +130183,7 @@ exports[`Storyshots Views / Orders / Order details pending payment 1`] = `
                   >
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id TableLine-colName-id"
-                      data-test-id="tableCellAvatar"
+                      data-test-id="table-cell-avatar"
                       thumbnail="placeholder60x60.png"
                     >
                       <div
@@ -130456,7 +130306,7 @@ exports[`Storyshots Views / Orders / Order details pending payment 1`] = `
               >
                 <button
                   class="MuiButtonBase-root-id IconButton-secondary-id OrderFulfilledProductsCard-deleteIcon-id IconButton-hoverOutline-id"
-                  data-test-id="cancelFulfillmentButton"
+                  data-test-id="cancel-fulfillment-button"
                   tabindex="0"
                   type="button"
                 >
@@ -130554,7 +130404,7 @@ exports[`Storyshots Views / Orders / Order details pending payment 1`] = `
                   >
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id TableLine-colName-id"
-                      data-test-id="tableCellAvatar"
+                      data-test-id="table-cell-avatar"
                       thumbnail="placeholder60x60.png"
                     >
                       <div
@@ -130904,8 +130754,8 @@ exports[`Storyshots Views / Orders / Order details pending payment 1`] = `
           />
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="metadataEditor"
             data-test-expanded="true"
+            data-test-id="metadata-editor"
             data-test-is-private="false"
           >
             <div
@@ -130920,7 +130770,7 @@ exports[`Storyshots Views / Orders / Order details pending payment 1`] = `
                   Metadata
                   <button
                     class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test="expand"
+                    data-test-id="expand"
                     tabindex="0"
                     type="button"
                   >
@@ -130992,7 +130842,7 @@ exports[`Storyshots Views / Orders / Order details pending payment 1`] = `
               >
                 <tr
                   class="MuiTableRow-root-id MuiTableRow-hover-id"
-                  data-test="field"
+                  data-test-id="field"
                 >
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colName-id"
@@ -131073,8 +130923,7 @@ exports[`Storyshots Views / Orders / Order details pending payment 1`] = `
                   >
                     <button
                       class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                      data-test="deleteField"
-                      data-test-id="0"
+                      data-test-id="delete-field-0"
                       tabindex="0"
                       type="button"
                     >
@@ -131101,7 +130950,7 @@ exports[`Storyshots Views / Orders / Order details pending payment 1`] = `
             >
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-                data-test="addField"
+                data-test-id="add-field"
                 tabindex="0"
                 type="button"
               >
@@ -131118,8 +130967,8 @@ exports[`Storyshots Views / Orders / Order details pending payment 1`] = `
           />
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="metadataEditor"
             data-test-expanded="true"
+            data-test-id="metadata-editor"
             data-test-is-private="true"
           >
             <div
@@ -131134,7 +130983,7 @@ exports[`Storyshots Views / Orders / Order details pending payment 1`] = `
                   Private Metadata
                   <button
                     class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test="expand"
+                    data-test-id="expand"
                     tabindex="0"
                     type="button"
                   >
@@ -131180,7 +131029,7 @@ exports[`Storyshots Views / Orders / Order details pending payment 1`] = `
             >
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-                data-test="addField"
+                data-test-id="add-field"
                 tabindex="0"
                 type="button"
               >
@@ -131984,7 +131833,7 @@ exports[`Storyshots Views / Orders / Order details refunded payment 1`] = `
               aria-haspopup="true"
               aria-label="More"
               class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
-              data-test-id="showMoreButton"
+              data-test-id="show-more-button"
               tabindex="0"
               type="button"
             >
@@ -132035,7 +131884,7 @@ exports[`Storyshots Views / Orders / Order details refunded payment 1`] = `
         class="Grid-root-id Grid-default-id"
       >
         <div
-          data-test-id="orderFulfillment"
+          data-test-id="order-fulfillment"
         >
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
@@ -132144,7 +131993,7 @@ exports[`Storyshots Views / Orders / Order details refunded payment 1`] = `
                   >
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id TableLine-colName-id"
-                      data-test-id="tableCellAvatar"
+                      data-test-id="table-cell-avatar"
                       thumbnail="placeholder60x60.png"
                     >
                       <div
@@ -132267,7 +132116,7 @@ exports[`Storyshots Views / Orders / Order details refunded payment 1`] = `
               >
                 <button
                   class="MuiButtonBase-root-id IconButton-secondary-id OrderFulfilledProductsCard-deleteIcon-id IconButton-hoverOutline-id"
-                  data-test-id="cancelFulfillmentButton"
+                  data-test-id="cancel-fulfillment-button"
                   tabindex="0"
                   type="button"
                 >
@@ -132365,7 +132214,7 @@ exports[`Storyshots Views / Orders / Order details refunded payment 1`] = `
                   >
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id TableLine-colName-id"
-                      data-test-id="tableCellAvatar"
+                      data-test-id="table-cell-avatar"
                       thumbnail="placeholder60x60.png"
                     >
                       <div
@@ -132488,7 +132337,7 @@ exports[`Storyshots Views / Orders / Order details refunded payment 1`] = `
               >
                 <button
                   class="MuiButtonBase-root-id IconButton-secondary-id OrderFulfilledProductsCard-deleteIcon-id IconButton-hoverOutline-id"
-                  data-test-id="cancelFulfillmentButton"
+                  data-test-id="cancel-fulfillment-button"
                   tabindex="0"
                   type="button"
                 >
@@ -132586,7 +132435,7 @@ exports[`Storyshots Views / Orders / Order details refunded payment 1`] = `
                   >
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id TableLine-colName-id"
-                      data-test-id="tableCellAvatar"
+                      data-test-id="table-cell-avatar"
                       thumbnail="placeholder60x60.png"
                     >
                       <div
@@ -132936,8 +132785,8 @@ exports[`Storyshots Views / Orders / Order details refunded payment 1`] = `
           />
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="metadataEditor"
             data-test-expanded="true"
+            data-test-id="metadata-editor"
             data-test-is-private="false"
           >
             <div
@@ -132952,7 +132801,7 @@ exports[`Storyshots Views / Orders / Order details refunded payment 1`] = `
                   Metadata
                   <button
                     class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test="expand"
+                    data-test-id="expand"
                     tabindex="0"
                     type="button"
                   >
@@ -133024,7 +132873,7 @@ exports[`Storyshots Views / Orders / Order details refunded payment 1`] = `
               >
                 <tr
                   class="MuiTableRow-root-id MuiTableRow-hover-id"
-                  data-test="field"
+                  data-test-id="field"
                 >
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colName-id"
@@ -133105,8 +132954,7 @@ exports[`Storyshots Views / Orders / Order details refunded payment 1`] = `
                   >
                     <button
                       class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                      data-test="deleteField"
-                      data-test-id="0"
+                      data-test-id="delete-field-0"
                       tabindex="0"
                       type="button"
                     >
@@ -133133,7 +132981,7 @@ exports[`Storyshots Views / Orders / Order details refunded payment 1`] = `
             >
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-                data-test="addField"
+                data-test-id="add-field"
                 tabindex="0"
                 type="button"
               >
@@ -133150,8 +132998,8 @@ exports[`Storyshots Views / Orders / Order details refunded payment 1`] = `
           />
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="metadataEditor"
             data-test-expanded="true"
+            data-test-id="metadata-editor"
             data-test-is-private="true"
           >
             <div
@@ -133166,7 +133014,7 @@ exports[`Storyshots Views / Orders / Order details refunded payment 1`] = `
                   Private Metadata
                   <button
                     class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test="expand"
+                    data-test-id="expand"
                     tabindex="0"
                     type="button"
                   >
@@ -133212,7 +133060,7 @@ exports[`Storyshots Views / Orders / Order details refunded payment 1`] = `
             >
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-                data-test="addField"
+                data-test-id="add-field"
                 tabindex="0"
                 type="button"
               >
@@ -134016,7 +133864,7 @@ exports[`Storyshots Views / Orders / Order details rejected payment 1`] = `
               aria-haspopup="true"
               aria-label="More"
               class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
-              data-test-id="showMoreButton"
+              data-test-id="show-more-button"
               tabindex="0"
               type="button"
             >
@@ -134067,7 +133915,7 @@ exports[`Storyshots Views / Orders / Order details rejected payment 1`] = `
         class="Grid-root-id Grid-default-id"
       >
         <div
-          data-test-id="orderFulfillment"
+          data-test-id="order-fulfillment"
         >
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
@@ -134176,7 +134024,7 @@ exports[`Storyshots Views / Orders / Order details rejected payment 1`] = `
                   >
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id TableLine-colName-id"
-                      data-test-id="tableCellAvatar"
+                      data-test-id="table-cell-avatar"
                       thumbnail="placeholder60x60.png"
                     >
                       <div
@@ -134299,7 +134147,7 @@ exports[`Storyshots Views / Orders / Order details rejected payment 1`] = `
               >
                 <button
                   class="MuiButtonBase-root-id IconButton-secondary-id OrderFulfilledProductsCard-deleteIcon-id IconButton-hoverOutline-id"
-                  data-test-id="cancelFulfillmentButton"
+                  data-test-id="cancel-fulfillment-button"
                   tabindex="0"
                   type="button"
                 >
@@ -134397,7 +134245,7 @@ exports[`Storyshots Views / Orders / Order details rejected payment 1`] = `
                   >
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id TableLine-colName-id"
-                      data-test-id="tableCellAvatar"
+                      data-test-id="table-cell-avatar"
                       thumbnail="placeholder60x60.png"
                     >
                       <div
@@ -134520,7 +134368,7 @@ exports[`Storyshots Views / Orders / Order details rejected payment 1`] = `
               >
                 <button
                   class="MuiButtonBase-root-id IconButton-secondary-id OrderFulfilledProductsCard-deleteIcon-id IconButton-hoverOutline-id"
-                  data-test-id="cancelFulfillmentButton"
+                  data-test-id="cancel-fulfillment-button"
                   tabindex="0"
                   type="button"
                 >
@@ -134618,7 +134466,7 @@ exports[`Storyshots Views / Orders / Order details rejected payment 1`] = `
                   >
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id TableLine-colName-id"
-                      data-test-id="tableCellAvatar"
+                      data-test-id="table-cell-avatar"
                       thumbnail="placeholder60x60.png"
                     >
                       <div
@@ -134968,8 +134816,8 @@ exports[`Storyshots Views / Orders / Order details rejected payment 1`] = `
           />
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="metadataEditor"
             data-test-expanded="true"
+            data-test-id="metadata-editor"
             data-test-is-private="false"
           >
             <div
@@ -134984,7 +134832,7 @@ exports[`Storyshots Views / Orders / Order details rejected payment 1`] = `
                   Metadata
                   <button
                     class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test="expand"
+                    data-test-id="expand"
                     tabindex="0"
                     type="button"
                   >
@@ -135056,7 +134904,7 @@ exports[`Storyshots Views / Orders / Order details rejected payment 1`] = `
               >
                 <tr
                   class="MuiTableRow-root-id MuiTableRow-hover-id"
-                  data-test="field"
+                  data-test-id="field"
                 >
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colName-id"
@@ -135137,8 +134985,7 @@ exports[`Storyshots Views / Orders / Order details rejected payment 1`] = `
                   >
                     <button
                       class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                      data-test="deleteField"
-                      data-test-id="0"
+                      data-test-id="delete-field-0"
                       tabindex="0"
                       type="button"
                     >
@@ -135165,7 +135012,7 @@ exports[`Storyshots Views / Orders / Order details rejected payment 1`] = `
             >
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-                data-test="addField"
+                data-test-id="add-field"
                 tabindex="0"
                 type="button"
               >
@@ -135182,8 +135029,8 @@ exports[`Storyshots Views / Orders / Order details rejected payment 1`] = `
           />
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="metadataEditor"
             data-test-expanded="true"
+            data-test-id="metadata-editor"
             data-test-is-private="true"
           >
             <div
@@ -135198,7 +135045,7 @@ exports[`Storyshots Views / Orders / Order details rejected payment 1`] = `
                   Private Metadata
                   <button
                     class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test="expand"
+                    data-test-id="expand"
                     tabindex="0"
                     type="button"
                   >
@@ -135244,7 +135091,7 @@ exports[`Storyshots Views / Orders / Order details rejected payment 1`] = `
             >
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-                data-test="addField"
+                data-test-id="add-field"
                 tabindex="0"
                 type="button"
               >
@@ -136048,7 +135895,7 @@ exports[`Storyshots Views / Orders / Order details unfulfilled 1`] = `
               aria-haspopup="true"
               aria-label="More"
               class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
-              data-test-id="showMoreButton"
+              data-test-id="show-more-button"
               tabindex="0"
               type="button"
             >
@@ -136099,7 +135946,7 @@ exports[`Storyshots Views / Orders / Order details unfulfilled 1`] = `
         class="Grid-root-id Grid-default-id"
       >
         <div
-          data-test-id="orderFulfillment"
+          data-test-id="order-fulfillment"
         >
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
@@ -136208,7 +136055,7 @@ exports[`Storyshots Views / Orders / Order details unfulfilled 1`] = `
                   >
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id TableLine-colName-id"
-                      data-test-id="tableCellAvatar"
+                      data-test-id="table-cell-avatar"
                       thumbnail="placeholder60x60.png"
                     >
                       <div
@@ -136331,7 +136178,7 @@ exports[`Storyshots Views / Orders / Order details unfulfilled 1`] = `
               >
                 <button
                   class="MuiButtonBase-root-id IconButton-secondary-id OrderFulfilledProductsCard-deleteIcon-id IconButton-hoverOutline-id"
-                  data-test-id="cancelFulfillmentButton"
+                  data-test-id="cancel-fulfillment-button"
                   tabindex="0"
                   type="button"
                 >
@@ -136429,7 +136276,7 @@ exports[`Storyshots Views / Orders / Order details unfulfilled 1`] = `
                   >
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id TableLine-colName-id"
-                      data-test-id="tableCellAvatar"
+                      data-test-id="table-cell-avatar"
                       thumbnail="placeholder60x60.png"
                     >
                       <div
@@ -136552,7 +136399,7 @@ exports[`Storyshots Views / Orders / Order details unfulfilled 1`] = `
               >
                 <button
                   class="MuiButtonBase-root-id IconButton-secondary-id OrderFulfilledProductsCard-deleteIcon-id IconButton-hoverOutline-id"
-                  data-test-id="cancelFulfillmentButton"
+                  data-test-id="cancel-fulfillment-button"
                   tabindex="0"
                   type="button"
                 >
@@ -136650,7 +136497,7 @@ exports[`Storyshots Views / Orders / Order details unfulfilled 1`] = `
                   >
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id TableLine-colName-id"
-                      data-test-id="tableCellAvatar"
+                      data-test-id="table-cell-avatar"
                       thumbnail="placeholder60x60.png"
                     >
                       <div
@@ -137000,8 +136847,8 @@ exports[`Storyshots Views / Orders / Order details unfulfilled 1`] = `
           />
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="metadataEditor"
             data-test-expanded="true"
+            data-test-id="metadata-editor"
             data-test-is-private="false"
           >
             <div
@@ -137016,7 +136863,7 @@ exports[`Storyshots Views / Orders / Order details unfulfilled 1`] = `
                   Metadata
                   <button
                     class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test="expand"
+                    data-test-id="expand"
                     tabindex="0"
                     type="button"
                   >
@@ -137088,7 +136935,7 @@ exports[`Storyshots Views / Orders / Order details unfulfilled 1`] = `
               >
                 <tr
                   class="MuiTableRow-root-id MuiTableRow-hover-id"
-                  data-test="field"
+                  data-test-id="field"
                 >
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colName-id"
@@ -137169,8 +137016,7 @@ exports[`Storyshots Views / Orders / Order details unfulfilled 1`] = `
                   >
                     <button
                       class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                      data-test="deleteField"
-                      data-test-id="0"
+                      data-test-id="delete-field-0"
                       tabindex="0"
                       type="button"
                     >
@@ -137197,7 +137043,7 @@ exports[`Storyshots Views / Orders / Order details unfulfilled 1`] = `
             >
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-                data-test="addField"
+                data-test-id="add-field"
                 tabindex="0"
                 type="button"
               >
@@ -137214,8 +137060,8 @@ exports[`Storyshots Views / Orders / Order details unfulfilled 1`] = `
           />
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="metadataEditor"
             data-test-expanded="true"
+            data-test-id="metadata-editor"
             data-test-is-private="true"
           >
             <div
@@ -137230,7 +137076,7 @@ exports[`Storyshots Views / Orders / Order details unfulfilled 1`] = `
                   Private Metadata
                   <button
                     class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test="expand"
+                    data-test-id="expand"
                     tabindex="0"
                     type="button"
                   >
@@ -137276,7 +137122,7 @@ exports[`Storyshots Views / Orders / Order details unfulfilled 1`] = `
             >
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-                data-test="addField"
+                data-test-id="add-field"
                 tabindex="0"
                 type="button"
               >
@@ -138063,7 +137909,7 @@ exports[`Storyshots Views / Orders / Order draft default 1`] = `
               aria-label="More"
               class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
               color="primary"
-              data-test-id="showMoreButton"
+              data-test-id="show-more-button"
               tabindex="0"
               type="button"
             >
@@ -138190,7 +138036,7 @@ exports[`Storyshots Views / Orders / Order draft default 1`] = `
                 >
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id OrderDraftDetailsProducts-colName-id"
-                    data-test-id="tableCellAvatar"
+                    data-test-id="table-cell-avatar"
                     thumbnail="placeholder60x60.png"
                   >
                     <div
@@ -138309,7 +138155,7 @@ exports[`Storyshots Views / Orders / Order draft default 1`] = `
                 >
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id OrderDraftDetailsProducts-colName-id"
-                    data-test-id="tableCellAvatar"
+                    data-test-id="table-cell-avatar"
                     thumbnail="placeholder60x60.png"
                   >
                     <div
@@ -138756,7 +138602,7 @@ exports[`Storyshots Views / Orders / Order draft loading 1`] = `
               aria-label="More"
               class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
               color="primary"
-              data-test-id="showMoreButton"
+              data-test-id="show-more-button"
               tabindex="0"
               type="button"
             >
@@ -139011,7 +138857,7 @@ exports[`Storyshots Views / Orders / Order draft no user permissions 1`] = `
               aria-label="More"
               class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
               color="primary"
-              data-test-id="showMoreButton"
+              data-test-id="show-more-button"
               tabindex="0"
               type="button"
             >
@@ -139138,7 +138984,7 @@ exports[`Storyshots Views / Orders / Order draft no user permissions 1`] = `
                 >
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id OrderDraftDetailsProducts-colName-id"
-                    data-test-id="tableCellAvatar"
+                    data-test-id="table-cell-avatar"
                     thumbnail="placeholder60x60.png"
                   >
                     <div
@@ -139257,7 +139103,7 @@ exports[`Storyshots Views / Orders / Order draft no user permissions 1`] = `
                 >
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id OrderDraftDetailsProducts-colName-id"
-                    data-test-id="tableCellAvatar"
+                    data-test-id="table-cell-avatar"
                     thumbnail="placeholder60x60.png"
                   >
                     <div
@@ -139685,7 +139531,7 @@ exports[`Storyshots Views / Orders / Order draft without lines 1`] = `
               aria-label="More"
               class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
               color="primary"
-              data-test-id="showMoreButton"
+              data-test-id="show-more-button"
               tabindex="0"
               type="button"
             >
@@ -140018,7 +139864,7 @@ exports[`Storyshots Views / Orders / Order list default 1`] = `
             aria-label="More"
             class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
             color="primary"
-            data-test-id="showMoreButton"
+            data-test-id="show-more-button"
             tabindex="0"
             type="button"
           >
@@ -140124,7 +139970,7 @@ exports[`Storyshots Views / Orders / Order list default 1`] = `
         </div>
         <div
           class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
-          data-test-id="searchInput"
+          data-test-id="search-input"
         >
           <div
             class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
@@ -141899,7 +141745,7 @@ exports[`Storyshots Views / Orders / Order list limits reached 1`] = `
             aria-label="More"
             class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
             color="primary"
-            data-test-id="showMoreButton"
+            data-test-id="show-more-button"
             tabindex="0"
             type="button"
           >
@@ -142085,7 +141931,7 @@ exports[`Storyshots Views / Orders / Order list limits reached 1`] = `
         </div>
         <div
           class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
-          data-test-id="searchInput"
+          data-test-id="search-input"
         >
           <div
             class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
@@ -143860,7 +143706,7 @@ exports[`Storyshots Views / Orders / Order list loading 1`] = `
             aria-label="More"
             class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
             color="primary"
-            data-test-id="showMoreButton"
+            data-test-id="show-more-button"
             tabindex="0"
             type="button"
           >
@@ -143966,7 +143812,7 @@ exports[`Storyshots Views / Orders / Order list loading 1`] = `
         </div>
         <div
           class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
-          data-test-id="searchInput"
+          data-test-id="search-input"
         >
           <div
             class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
@@ -144298,7 +144144,7 @@ exports[`Storyshots Views / Orders / Order list no limits 1`] = `
             aria-label="More"
             class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
             color="primary"
-            data-test-id="showMoreButton"
+            data-test-id="show-more-button"
             tabindex="0"
             type="button"
           >
@@ -144399,7 +144245,7 @@ exports[`Storyshots Views / Orders / Order list no limits 1`] = `
         </div>
         <div
           class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
-          data-test-id="searchInput"
+          data-test-id="search-input"
         >
           <div
             class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
@@ -146174,7 +146020,7 @@ exports[`Storyshots Views / Orders / Order list when no data 1`] = `
             aria-label="More"
             class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
             color="primary"
-            data-test-id="showMoreButton"
+            data-test-id="show-more-button"
             tabindex="0"
             type="button"
           >
@@ -146280,7 +146126,7 @@ exports[`Storyshots Views / Orders / Order list when no data 1`] = `
         </div>
         <div
           class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
-          data-test-id="searchInput"
+          data-test-id="search-input"
         >
           <div
             class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
@@ -146566,7 +146412,7 @@ exports[`Storyshots Views / Orders / Order settings default 1`] = `
         </div>
         <div
           class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          data-test="orderSettings"
+          data-test-id="order-settings"
         >
           <div
             class="MuiCardHeader-root-id"
@@ -146586,7 +146432,7 @@ exports[`Storyshots Views / Orders / Order settings default 1`] = `
           >
             <label
               class="MuiFormControlLabel-root-id"
-              data-test="automaticallyConfirmAllNewOrdersCheckbox"
+              data-test-id="automatically-confirm-all-new-orders-checkbox"
             >
               <span
                 aria-disabled="false"
@@ -146649,7 +146495,7 @@ exports[`Storyshots Views / Orders / Order settings default 1`] = `
             />
             <label
               class="MuiFormControlLabel-root-id"
-              data-test="automaticallyFulfillNonShippableGiftCardsCheckbox"
+              data-test-id="automatically-fulfill-non-shippable-gift-cards-checkbox"
             >
               <span
                 aria-disabled="false"
@@ -146701,7 +146547,7 @@ exports[`Storyshots Views / Orders / Order settings default 1`] = `
         <div />
         <div
           class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          data-test="OrderFulfillmentSettings"
+          data-test-id="order-fulfillment-settings"
         >
           <div
             class="MuiCardHeader-root-id"
@@ -146721,7 +146567,7 @@ exports[`Storyshots Views / Orders / Order settings default 1`] = `
           >
             <label
               class="MuiFormControlLabel-root-id"
-              data-test="fulfillmentAutoApproveCheckbox"
+              data-test-id="fulfillment-auto-approve-checkbox"
             >
               <span
                 aria-disabled="false"
@@ -146784,7 +146630,7 @@ exports[`Storyshots Views / Orders / Order settings default 1`] = `
             />
             <label
               class="MuiFormControlLabel-root-id"
-              data-test="fulfillmentAllowUnpaidCheckbox"
+              data-test-id="fulfillment-allow-unpaid-checkbox"
             >
               <span
                 aria-disabled="false"
@@ -146898,7 +146744,7 @@ exports[`Storyshots Views / Orders / Order settings loading 1`] = `
         </div>
         <div
           class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          data-test="orderSettings"
+          data-test-id="order-settings"
         >
           <div
             class="MuiCardHeader-root-id"
@@ -146918,7 +146764,7 @@ exports[`Storyshots Views / Orders / Order settings loading 1`] = `
           >
             <label
               class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
-              data-test="automaticallyConfirmAllNewOrdersCheckbox"
+              data-test-id="automatically-confirm-all-new-orders-checkbox"
             >
               <span
                 aria-disabled="true"
@@ -146972,7 +146818,7 @@ exports[`Storyshots Views / Orders / Order settings loading 1`] = `
             />
             <label
               class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
-              data-test="automaticallyFulfillNonShippableGiftCardsCheckbox"
+              data-test-id="automatically-fulfill-non-shippable-gift-cards-checkbox"
             >
               <span
                 aria-disabled="true"
@@ -147026,7 +146872,7 @@ exports[`Storyshots Views / Orders / Order settings loading 1`] = `
         <div />
         <div
           class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          data-test="OrderFulfillmentSettings"
+          data-test-id="order-fulfillment-settings"
         >
           <div
             class="MuiCardHeader-root-id"
@@ -147046,7 +146892,7 @@ exports[`Storyshots Views / Orders / Order settings loading 1`] = `
           >
             <label
               class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
-              data-test="fulfillmentAutoApproveCheckbox"
+              data-test-id="fulfillment-auto-approve-checkbox"
             >
               <span
                 aria-disabled="true"
@@ -147100,7 +146946,7 @@ exports[`Storyshots Views / Orders / Order settings loading 1`] = `
             />
             <label
               class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
-              data-test="fulfillmentAllowUnpaidCheckbox"
+              data-test-id="fulfillment-allow-unpaid-checkbox"
             >
               <span
                 aria-disabled="true"
@@ -147475,7 +147321,7 @@ exports[`Storyshots Views / Orders / Refund order loading 1`] = `
               </div>
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id OrderRefundAmount-refundButton-id MuiButton-containedPrimary-id MuiButton-disabled-id MuiButton-fullWidth-id MuiButtonBase-disabled-id"
-                data-test="submit"
+                data-test-id="submit"
                 disabled=""
                 tabindex="-1"
                 type="button"
@@ -147756,7 +147602,7 @@ exports[`Storyshots Views / Orders / Refund order miscellaneous 1`] = `
               </div>
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id OrderRefundAmount-refundButton-id MuiButton-containedPrimary-id MuiButton-disabled-id MuiButton-fullWidth-id MuiButtonBase-disabled-id"
-                data-test="submit"
+                data-test-id="submit"
                 disabled=""
                 tabindex="-1"
                 type="button"
@@ -147957,7 +147803,7 @@ exports[`Storyshots Views / Orders / Refund order products 1`] = `
               </div>
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id OrderRefundUnfulfilledProducts-setMaximalQuantityButton-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                data-test="setMaximalQuantityUnfulfilledButton"
+                data-test-id="set-maximal-quantity-unfulfilled-button"
                 tabindex="0"
                 type="button"
               >
@@ -148011,7 +147857,7 @@ exports[`Storyshots Views / Orders / Refund order products 1`] = `
                 >
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                    data-test-id="tableCellAvatar"
+                    data-test-id="table-cell-avatar"
                     thumbnail="placeholder60x60.png"
                   >
                     <div
@@ -148054,8 +147900,7 @@ exports[`Storyshots Views / Orders / Refund order products 1`] = `
                         <input
                           aria-invalid="false"
                           class="MuiInputBase-input-id MuiOutlinedInput-input-id OrderRefundUnfulfilledProducts-quantityInnerInput-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                          data-test="quantityInput"
-                          data-test-id="diufhdsif"
+                          data-test-id="quantity-inputdiufhdsif"
                           max="16"
                           min="0"
                           style="text-align:right"
@@ -148100,7 +147945,7 @@ exports[`Storyshots Views / Orders / Refund order products 1`] = `
                 >
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                    data-test-id="tableCellAvatar"
+                    data-test-id="table-cell-avatar"
                     thumbnail="placeholder60x60.png"
                   >
                     <div
@@ -148143,8 +147988,7 @@ exports[`Storyshots Views / Orders / Refund order products 1`] = `
                         <input
                           aria-invalid="false"
                           class="MuiInputBase-input-id MuiOutlinedInput-input-id OrderRefundUnfulfilledProducts-quantityInnerInput-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                          data-test="quantityInput"
-                          data-test-id="fdsfdfdsf"
+                          data-test-id="quantity-inputfdsfdfdsf"
                           max="8"
                           min="0"
                           style="text-align:right"
@@ -148216,8 +148060,7 @@ exports[`Storyshots Views / Orders / Refund order products 1`] = `
             >
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id OrderRefundFulfilledProducts-setMaximalQuantityButton-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                data-test="setMaximalQuantityFulfilledButton"
-                data-test-id="f12345qwertyu"
+                data-test-id="set-maximal-quantity-fulfilled-button-f12345qwertyu"
                 tabindex="0"
                 type="button"
               >
@@ -148271,7 +148114,7 @@ exports[`Storyshots Views / Orders / Refund order products 1`] = `
                 >
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                    data-test-id="tableCellAvatar"
+                    data-test-id="table-cell-avatar"
                     thumbnail="placeholder60x60.png"
                   >
                     <div
@@ -148314,8 +148157,7 @@ exports[`Storyshots Views / Orders / Refund order products 1`] = `
                         <input
                           aria-invalid="false"
                           class="MuiInputBase-input-id MuiOutlinedInput-input-id OrderRefundFulfilledProducts-quantityInnerInput-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                          data-test="quantityInput"
-                          data-test-id="fg3333fu66666"
+                          data-test-id="quantityInputfg3333fu66666"
                           max="1"
                           min="0"
                           style="text-align:right"
@@ -148360,7 +148202,7 @@ exports[`Storyshots Views / Orders / Refund order products 1`] = `
                 >
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                    data-test-id="tableCellAvatar"
+                    data-test-id="table-cell-avatar"
                     thumbnail="placeholder60x60.png"
                   >
                     <div
@@ -148403,8 +148245,7 @@ exports[`Storyshots Views / Orders / Refund order products 1`] = `
                         <input
                           aria-invalid="false"
                           class="MuiInputBase-input-id MuiOutlinedInput-input-id OrderRefundFulfilledProducts-quantityInnerInput-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                          data-test="quantityInput"
-                          data-test-id="fgytrytytu88977"
+                          data-test-id="quantityInputfgytrytytu88977"
                           max="1"
                           min="0"
                           style="text-align:right"
@@ -148476,8 +148317,7 @@ exports[`Storyshots Views / Orders / Refund order products 1`] = `
             >
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id OrderRefundFulfilledProducts-setMaximalQuantityButton-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                data-test="setMaximalQuantityFulfilledButton"
-                data-test-id="876543jhgfdfd"
+                data-test-id="set-maximal-quantity-fulfilled-button-876543jhgfdfd"
                 tabindex="0"
                 type="button"
               >
@@ -148531,7 +148371,7 @@ exports[`Storyshots Views / Orders / Refund order products 1`] = `
                 >
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                    data-test-id="tableCellAvatar"
+                    data-test-id="table-cell-avatar"
                     thumbnail="placeholder60x60.png"
                   >
                     <div
@@ -148574,8 +148414,7 @@ exports[`Storyshots Views / Orders / Refund order products 1`] = `
                         <input
                           aria-invalid="false"
                           class="MuiInputBase-input-id MuiOutlinedInput-input-id OrderRefundFulfilledProducts-quantityInnerInput-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                          data-test="quantityInput"
-                          data-test-id="fgydgsyfu23456"
+                          data-test-id="quantityInputfgydgsyfu23456"
                           max="2"
                           min="0"
                           style="text-align:right"
@@ -148620,7 +148459,7 @@ exports[`Storyshots Views / Orders / Refund order products 1`] = `
                 >
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                    data-test-id="tableCellAvatar"
+                    data-test-id="table-cell-avatar"
                     thumbnail="placeholder60x60.png"
                   >
                     <div
@@ -148663,8 +148502,7 @@ exports[`Storyshots Views / Orders / Refund order products 1`] = `
                         <input
                           aria-invalid="false"
                           class="MuiInputBase-input-id MuiOutlinedInput-input-id OrderRefundFulfilledProducts-quantityInnerInput-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
-                          data-test="quantityInput"
-                          data-test-id="fgydgsyfu555444"
+                          data-test-id="quantityInputfgydgsyfu555444"
                           max="4"
                           min="0"
                           style="text-align:right"
@@ -148936,7 +148774,7 @@ exports[`Storyshots Views / Orders / Refund order products 1`] = `
               </div>
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id OrderRefundAmount-refundButton-id MuiButton-containedPrimary-id MuiButton-disabled-id MuiButton-fullWidth-id MuiButtonBase-disabled-id"
-                data-test="submit"
+                data-test-id="submit"
                 disabled=""
                 tabindex="-1"
                 type="button"
@@ -149071,8 +148909,8 @@ exports[`Storyshots Views / Page types / Create page type default 1`] = `
         </div>
         <div
           class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          data-test="metadataEditor"
           data-test-expanded="true"
+          data-test-id="metadata-editor"
           data-test-is-private="false"
         >
           <div
@@ -149087,7 +148925,7 @@ exports[`Storyshots Views / Page types / Create page type default 1`] = `
                 Metadata
                 <button
                   class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                  data-test="expand"
+                  data-test-id="expand"
                   tabindex="0"
                   type="button"
                 >
@@ -149133,7 +148971,7 @@ exports[`Storyshots Views / Page types / Create page type default 1`] = `
           >
             <button
               class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-              data-test="addField"
+              data-test-id="add-field"
               tabindex="0"
               type="button"
             >
@@ -149150,8 +148988,8 @@ exports[`Storyshots Views / Page types / Create page type default 1`] = `
         />
         <div
           class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          data-test="metadataEditor"
           data-test-expanded="true"
+          data-test-id="metadata-editor"
           data-test-is-private="true"
         >
           <div
@@ -149166,7 +149004,7 @@ exports[`Storyshots Views / Page types / Create page type default 1`] = `
                 Private Metadata
                 <button
                   class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                  data-test="expand"
+                  data-test-id="expand"
                   tabindex="0"
                   type="button"
                 >
@@ -149212,7 +149050,7 @@ exports[`Storyshots Views / Page types / Create page type default 1`] = `
           >
             <button
               class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-              data-test="addField"
+              data-test-id="add-field"
               tabindex="0"
               type="button"
             >
@@ -149346,8 +149184,8 @@ exports[`Storyshots Views / Page types / Create page type form errors 1`] = `
         </div>
         <div
           class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          data-test="metadataEditor"
           data-test-expanded="true"
+          data-test-id="metadata-editor"
           data-test-is-private="false"
         >
           <div
@@ -149362,7 +149200,7 @@ exports[`Storyshots Views / Page types / Create page type form errors 1`] = `
                 Metadata
                 <button
                   class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                  data-test="expand"
+                  data-test-id="expand"
                   tabindex="0"
                   type="button"
                 >
@@ -149408,7 +149246,7 @@ exports[`Storyshots Views / Page types / Create page type form errors 1`] = `
           >
             <button
               class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-              data-test="addField"
+              data-test-id="add-field"
               tabindex="0"
               type="button"
             >
@@ -149425,8 +149263,8 @@ exports[`Storyshots Views / Page types / Create page type form errors 1`] = `
         />
         <div
           class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          data-test="metadataEditor"
           data-test-expanded="true"
+          data-test-id="metadata-editor"
           data-test-is-private="true"
         >
           <div
@@ -149441,7 +149279,7 @@ exports[`Storyshots Views / Page types / Create page type form errors 1`] = `
                 Private Metadata
                 <button
                   class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                  data-test="expand"
+                  data-test-id="expand"
                   tabindex="0"
                   type="button"
                 >
@@ -149487,7 +149325,7 @@ exports[`Storyshots Views / Page types / Create page type form errors 1`] = `
           >
             <button
               class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-              data-test="addField"
+              data-test-id="add-field"
               tabindex="0"
               type="button"
             >
@@ -149617,8 +149455,8 @@ exports[`Storyshots Views / Page types / Create page type loading 1`] = `
         </div>
         <div
           class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          data-test="metadataEditor"
           data-test-expanded="true"
+          data-test-id="metadata-editor"
           data-test-is-private="false"
         >
           <div
@@ -149633,7 +149471,7 @@ exports[`Storyshots Views / Page types / Create page type loading 1`] = `
                 Metadata
                 <button
                   class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                  data-test="expand"
+                  data-test-id="expand"
                   tabindex="0"
                   type="button"
                 >
@@ -149679,7 +149517,7 @@ exports[`Storyshots Views / Page types / Create page type loading 1`] = `
           >
             <button
               class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-              data-test="addField"
+              data-test-id="add-field"
               tabindex="0"
               type="button"
             >
@@ -149696,8 +149534,8 @@ exports[`Storyshots Views / Page types / Create page type loading 1`] = `
         />
         <div
           class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          data-test="metadataEditor"
           data-test-expanded="true"
+          data-test-id="metadata-editor"
           data-test-is-private="true"
         >
           <div
@@ -149712,7 +149550,7 @@ exports[`Storyshots Views / Page types / Create page type loading 1`] = `
                 Private Metadata
                 <button
                   class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                  data-test="expand"
+                  data-test-id="expand"
                   tabindex="0"
                   type="button"
                 >
@@ -149758,7 +149596,7 @@ exports[`Storyshots Views / Page types / Create page type loading 1`] = `
           >
             <button
               class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-              data-test="addField"
+              data-test-id="add-field"
               tabindex="0"
               type="button"
             >
@@ -149892,7 +149730,7 @@ exports[`Storyshots Views / Page types / Page type details default 1`] = `
         </div>
         <div
           class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          data-test="page-attributes"
+          data-test-id="page-attributes"
         >
           <div
             class="MuiCardHeader-root-id"
@@ -149911,7 +149749,7 @@ exports[`Storyshots Views / Page types / Page type details default 1`] = `
             >
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                data-test-id="assignAttributes"
+                data-test-id="assign-attributes"
                 tabindex="0"
                 type="button"
               >
@@ -150015,8 +149853,7 @@ exports[`Storyshots Views / Page types / Page type details default 1`] = `
               >
                 <tr
                   class="MuiTableRow-root-id PageTypeAttributes-link-id MuiTableRow-hover-id"
-                  data-test="id"
-                  data-test-id="UHJvZHVjdEF0dHJpYnV0ZTo5"
+                  data-test-id="id-UHJvZHVjdEF0dHJpYnV0ZTo5"
                 >
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id SortableHandle-columnDrag-id"
@@ -150074,13 +149911,13 @@ exports[`Storyshots Views / Page types / Page type details default 1`] = `
                   </td>
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id PageTypeAttributes-colName-id"
-                    data-test="name"
+                    data-test-id="name"
                   >
                     Author
                   </td>
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id PageTypeAttributes-colSlug-id"
-                    data-test="slug"
+                    data-test-id="slug"
                   >
                     author
                   </td>
@@ -150110,8 +149947,7 @@ exports[`Storyshots Views / Page types / Page type details default 1`] = `
                 </tr>
                 <tr
                   class="MuiTableRow-root-id PageTypeAttributes-link-id MuiTableRow-hover-id"
-                  data-test="id"
-                  data-test-id="UHJvZHVjdEF0dHJpYnV0ZToxMQ=="
+                  data-test-id="id-UHJvZHVjdEF0dHJpYnV0ZToxMQ=="
                 >
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id SortableHandle-columnDrag-id"
@@ -150169,13 +150005,13 @@ exports[`Storyshots Views / Page types / Page type details default 1`] = `
                   </td>
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id PageTypeAttributes-colName-id"
-                    data-test="name"
+                    data-test-id="name"
                   >
                     Language
                   </td>
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id PageTypeAttributes-colSlug-id"
-                    data-test="slug"
+                    data-test-id="slug"
                   >
                     language
                   </td>
@@ -150205,8 +150041,7 @@ exports[`Storyshots Views / Page types / Page type details default 1`] = `
                 </tr>
                 <tr
                   class="MuiTableRow-root-id PageTypeAttributes-link-id MuiTableRow-hover-id"
-                  data-test="id"
-                  data-test-id="UHJvZHVjdEF0dHJpYnV0ZTo5"
+                  data-test-id="id-UHJvZHVjdEF0dHJpYnV0ZTo5"
                 >
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id SortableHandle-columnDrag-id"
@@ -150264,13 +150099,13 @@ exports[`Storyshots Views / Page types / Page type details default 1`] = `
                   </td>
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id PageTypeAttributes-colName-id"
-                    data-test="name"
+                    data-test-id="name"
                   >
                     Author
                   </td>
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id PageTypeAttributes-colSlug-id"
-                    data-test="slug"
+                    data-test-id="slug"
                   >
                     author
                   </td>
@@ -150314,8 +150149,8 @@ exports[`Storyshots Views / Page types / Page type details default 1`] = `
         </div>
         <div
           class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          data-test="metadataEditor"
           data-test-expanded="true"
+          data-test-id="metadata-editor"
           data-test-is-private="false"
         >
           <div
@@ -150330,7 +150165,7 @@ exports[`Storyshots Views / Page types / Page type details default 1`] = `
                 Metadata
                 <button
                   class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                  data-test="expand"
+                  data-test-id="expand"
                   tabindex="0"
                   type="button"
                 >
@@ -150402,7 +150237,7 @@ exports[`Storyshots Views / Page types / Page type details default 1`] = `
             >
               <tr
                 class="MuiTableRow-root-id MuiTableRow-hover-id"
-                data-test="field"
+                data-test-id="field"
               >
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colName-id"
@@ -150483,8 +150318,7 @@ exports[`Storyshots Views / Page types / Page type details default 1`] = `
                 >
                   <button
                     class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                    data-test="deleteField"
-                    data-test-id="0"
+                    data-test-id="delete-field-0"
                     tabindex="0"
                     type="button"
                   >
@@ -150511,7 +150345,7 @@ exports[`Storyshots Views / Page types / Page type details default 1`] = `
           >
             <button
               class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-              data-test="addField"
+              data-test-id="add-field"
               tabindex="0"
               type="button"
             >
@@ -150528,8 +150362,8 @@ exports[`Storyshots Views / Page types / Page type details default 1`] = `
         />
         <div
           class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          data-test="metadataEditor"
           data-test-expanded="true"
+          data-test-id="metadata-editor"
           data-test-is-private="true"
         >
           <div
@@ -150544,7 +150378,7 @@ exports[`Storyshots Views / Page types / Page type details default 1`] = `
                 Private Metadata
                 <button
                   class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                  data-test="expand"
+                  data-test-id="expand"
                   tabindex="0"
                   type="button"
                 >
@@ -150590,7 +150424,7 @@ exports[`Storyshots Views / Page types / Page type details default 1`] = `
           >
             <button
               class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-              data-test="addField"
+              data-test-id="add-field"
               tabindex="0"
               type="button"
             >
@@ -150728,7 +150562,7 @@ exports[`Storyshots Views / Page types / Page type details form errors 1`] = `
         </div>
         <div
           class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          data-test="page-attributes"
+          data-test-id="page-attributes"
         >
           <div
             class="MuiCardHeader-root-id"
@@ -150747,7 +150581,7 @@ exports[`Storyshots Views / Page types / Page type details form errors 1`] = `
             >
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                data-test-id="assignAttributes"
+                data-test-id="assign-attributes"
                 tabindex="0"
                 type="button"
               >
@@ -150851,8 +150685,7 @@ exports[`Storyshots Views / Page types / Page type details form errors 1`] = `
               >
                 <tr
                   class="MuiTableRow-root-id PageTypeAttributes-link-id MuiTableRow-hover-id"
-                  data-test="id"
-                  data-test-id="UHJvZHVjdEF0dHJpYnV0ZTo5"
+                  data-test-id="id-UHJvZHVjdEF0dHJpYnV0ZTo5"
                 >
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id SortableHandle-columnDrag-id"
@@ -150910,13 +150743,13 @@ exports[`Storyshots Views / Page types / Page type details form errors 1`] = `
                   </td>
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id PageTypeAttributes-colName-id"
-                    data-test="name"
+                    data-test-id="name"
                   >
                     Author
                   </td>
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id PageTypeAttributes-colSlug-id"
-                    data-test="slug"
+                    data-test-id="slug"
                   >
                     author
                   </td>
@@ -150946,8 +150779,7 @@ exports[`Storyshots Views / Page types / Page type details form errors 1`] = `
                 </tr>
                 <tr
                   class="MuiTableRow-root-id PageTypeAttributes-link-id MuiTableRow-hover-id"
-                  data-test="id"
-                  data-test-id="UHJvZHVjdEF0dHJpYnV0ZToxMQ=="
+                  data-test-id="id-UHJvZHVjdEF0dHJpYnV0ZToxMQ=="
                 >
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id SortableHandle-columnDrag-id"
@@ -151005,13 +150837,13 @@ exports[`Storyshots Views / Page types / Page type details form errors 1`] = `
                   </td>
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id PageTypeAttributes-colName-id"
-                    data-test="name"
+                    data-test-id="name"
                   >
                     Language
                   </td>
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id PageTypeAttributes-colSlug-id"
-                    data-test="slug"
+                    data-test-id="slug"
                   >
                     language
                   </td>
@@ -151041,8 +150873,7 @@ exports[`Storyshots Views / Page types / Page type details form errors 1`] = `
                 </tr>
                 <tr
                   class="MuiTableRow-root-id PageTypeAttributes-link-id MuiTableRow-hover-id"
-                  data-test="id"
-                  data-test-id="UHJvZHVjdEF0dHJpYnV0ZTo5"
+                  data-test-id="id-UHJvZHVjdEF0dHJpYnV0ZTo5"
                 >
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id SortableHandle-columnDrag-id"
@@ -151100,13 +150931,13 @@ exports[`Storyshots Views / Page types / Page type details form errors 1`] = `
                   </td>
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id PageTypeAttributes-colName-id"
-                    data-test="name"
+                    data-test-id="name"
                   >
                     Author
                   </td>
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id PageTypeAttributes-colSlug-id"
-                    data-test="slug"
+                    data-test-id="slug"
                   >
                     author
                   </td>
@@ -151150,8 +150981,8 @@ exports[`Storyshots Views / Page types / Page type details form errors 1`] = `
         </div>
         <div
           class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          data-test="metadataEditor"
           data-test-expanded="true"
+          data-test-id="metadata-editor"
           data-test-is-private="false"
         >
           <div
@@ -151166,7 +150997,7 @@ exports[`Storyshots Views / Page types / Page type details form errors 1`] = `
                 Metadata
                 <button
                   class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                  data-test="expand"
+                  data-test-id="expand"
                   tabindex="0"
                   type="button"
                 >
@@ -151238,7 +151069,7 @@ exports[`Storyshots Views / Page types / Page type details form errors 1`] = `
             >
               <tr
                 class="MuiTableRow-root-id MuiTableRow-hover-id"
-                data-test="field"
+                data-test-id="field"
               >
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colName-id"
@@ -151319,8 +151150,7 @@ exports[`Storyshots Views / Page types / Page type details form errors 1`] = `
                 >
                   <button
                     class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                    data-test="deleteField"
-                    data-test-id="0"
+                    data-test-id="delete-field-0"
                     tabindex="0"
                     type="button"
                   >
@@ -151347,7 +151177,7 @@ exports[`Storyshots Views / Page types / Page type details form errors 1`] = `
           >
             <button
               class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-              data-test="addField"
+              data-test-id="add-field"
               tabindex="0"
               type="button"
             >
@@ -151364,8 +151194,8 @@ exports[`Storyshots Views / Page types / Page type details form errors 1`] = `
         />
         <div
           class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          data-test="metadataEditor"
           data-test-expanded="true"
+          data-test-id="metadata-editor"
           data-test-is-private="true"
         >
           <div
@@ -151380,7 +151210,7 @@ exports[`Storyshots Views / Page types / Page type details form errors 1`] = `
                 Private Metadata
                 <button
                   class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                  data-test="expand"
+                  data-test-id="expand"
                   tabindex="0"
                   type="button"
                 >
@@ -151426,7 +151256,7 @@ exports[`Storyshots Views / Page types / Page type details form errors 1`] = `
           >
             <button
               class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-              data-test="addField"
+              data-test-id="add-field"
               tabindex="0"
               type="button"
             >
@@ -151566,7 +151396,7 @@ exports[`Storyshots Views / Page types / Page type details loading 1`] = `
         </div>
         <div
           class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          data-test="page-attributes"
+          data-test-id="page-attributes"
         >
           <div
             class="MuiCardHeader-root-id"
@@ -151585,7 +151415,7 @@ exports[`Storyshots Views / Page types / Page type details loading 1`] = `
             >
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                data-test-id="assignAttributes"
+                data-test-id="assign-attributes"
                 tabindex="0"
                 type="button"
               >
@@ -151623,7 +151453,7 @@ exports[`Storyshots Views / Page types / Page type details loading 1`] = `
               >
                 <tr
                   class="MuiTableRow-root-id"
-                  data-test="id"
+                  data-test-id="id-undefined"
                 >
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id SortableHandle-columnDrag-id"
@@ -151683,7 +151513,7 @@ exports[`Storyshots Views / Page types / Page type details loading 1`] = `
                   </td>
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id PageTypeAttributes-colName-id"
-                    data-test="name"
+                    data-test-id="name"
                   >
                     <span
                       class="Skeleton-skeleton-id"
@@ -151694,7 +151524,7 @@ exports[`Storyshots Views / Page types / Page type details loading 1`] = `
                   </td>
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id PageTypeAttributes-colSlug-id"
-                    data-test="slug"
+                    data-test-id="slug"
                   >
                     <span
                       class="Skeleton-skeleton-id"
@@ -151743,8 +151573,8 @@ exports[`Storyshots Views / Page types / Page type details loading 1`] = `
         </div>
         <div
           class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          data-test="metadataEditor"
           data-test-expanded="true"
+          data-test-id="metadata-editor"
           data-test-is-private="false"
         >
           <div
@@ -151759,7 +151589,7 @@ exports[`Storyshots Views / Page types / Page type details loading 1`] = `
                 Metadata
                 <button
                   class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                  data-test="expand"
+                  data-test-id="expand"
                   tabindex="0"
                   type="button"
                 >
@@ -151804,8 +151634,8 @@ exports[`Storyshots Views / Page types / Page type details loading 1`] = `
         />
         <div
           class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          data-test="metadataEditor"
           data-test-expanded="true"
+          data-test-id="metadata-editor"
           data-test-is-private="true"
         >
           <div
@@ -151820,7 +151650,7 @@ exports[`Storyshots Views / Page types / Page type details loading 1`] = `
                 Private Metadata
                 <button
                   class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                  data-test="expand"
+                  data-test-id="expand"
                   tabindex="0"
                   type="button"
                 >
@@ -151981,7 +151811,7 @@ exports[`Storyshots Views / Page types / Page type details no attributes 1`] = `
         </div>
         <div
           class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          data-test="page-attributes"
+          data-test-id="page-attributes"
         >
           <div
             class="MuiCardHeader-root-id"
@@ -152000,7 +151830,7 @@ exports[`Storyshots Views / Page types / Page type details no attributes 1`] = `
             >
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                data-test-id="assignAttributes"
+                data-test-id="assign-attributes"
                 tabindex="0"
                 type="button"
               >
@@ -152062,8 +151892,8 @@ exports[`Storyshots Views / Page types / Page type details no attributes 1`] = `
         </div>
         <div
           class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          data-test="metadataEditor"
           data-test-expanded="true"
+          data-test-id="metadata-editor"
           data-test-is-private="false"
         >
           <div
@@ -152078,7 +151908,7 @@ exports[`Storyshots Views / Page types / Page type details no attributes 1`] = `
                 Metadata
                 <button
                   class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                  data-test="expand"
+                  data-test-id="expand"
                   tabindex="0"
                   type="button"
                 >
@@ -152150,7 +151980,7 @@ exports[`Storyshots Views / Page types / Page type details no attributes 1`] = `
             >
               <tr
                 class="MuiTableRow-root-id MuiTableRow-hover-id"
-                data-test="field"
+                data-test-id="field"
               >
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colName-id"
@@ -152231,8 +152061,7 @@ exports[`Storyshots Views / Page types / Page type details no attributes 1`] = `
                 >
                   <button
                     class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                    data-test="deleteField"
-                    data-test-id="0"
+                    data-test-id="delete-field-0"
                     tabindex="0"
                     type="button"
                   >
@@ -152259,7 +152088,7 @@ exports[`Storyshots Views / Page types / Page type details no attributes 1`] = `
           >
             <button
               class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-              data-test="addField"
+              data-test-id="add-field"
               tabindex="0"
               type="button"
             >
@@ -152276,8 +152105,8 @@ exports[`Storyshots Views / Page types / Page type details no attributes 1`] = `
         />
         <div
           class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-          data-test="metadataEditor"
           data-test-expanded="true"
+          data-test-id="metadata-editor"
           data-test-is-private="true"
         >
           <div
@@ -152292,7 +152121,7 @@ exports[`Storyshots Views / Page types / Page type details no attributes 1`] = `
                 Private Metadata
                 <button
                   class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                  data-test="expand"
+                  data-test-id="expand"
                   tabindex="0"
                   type="button"
                 >
@@ -152338,7 +152167,7 @@ exports[`Storyshots Views / Page types / Page type details no attributes 1`] = `
           >
             <button
               class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-              data-test="addField"
+              data-test-id="add-field"
               tabindex="0"
               type="button"
             >
@@ -152384,7 +152213,7 @@ exports[`Storyshots Views / Page types / Page types list default 1`] = `
         >
           <button
             class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
-            data-test-id="createPageType"
+            data-test-id="create-page-type"
             tabindex="0"
             type="button"
           >
@@ -152443,7 +152272,7 @@ exports[`Storyshots Views / Page types / Page types list default 1`] = `
       >
         <div
           class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
-          data-test-id="searchInput"
+          data-test-id="search-input"
         >
           <div
             class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
@@ -152622,8 +152451,7 @@ exports[`Storyshots Views / Page types / Page types list default 1`] = `
           >
             <tr
               class="MuiTableRow-root-id PageTypeList-link-id MuiTableRow-hover-id"
-              data-test="id"
-              data-test-id="UGFnZVR5cGU6MQ=="
+              data-test-id="id-UGFnZVR5cGU6MQ=="
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -152666,7 +152494,7 @@ exports[`Storyshots Views / Page types / Page types list default 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id PageTypeList-colName-id"
               >
                 <span
-                  data-test="name"
+                  data-test-id="name"
                 >
                   Blog
                 </span>
@@ -152674,8 +152502,7 @@ exports[`Storyshots Views / Page types / Page types list default 1`] = `
             </tr>
             <tr
               class="MuiTableRow-root-id PageTypeList-link-id MuiTableRow-hover-id"
-              data-test="id"
-              data-test-id="UGFnZVR5cGU6Mw=="
+              data-test-id="id-UGFnZVR5cGU6Mw=="
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -152718,7 +152545,7 @@ exports[`Storyshots Views / Page types / Page types list default 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id PageTypeList-colName-id"
               >
                 <span
-                  data-test="name"
+                  data-test-id="name"
                 >
                   Landing Page
                 </span>
@@ -152726,8 +152553,7 @@ exports[`Storyshots Views / Page types / Page types list default 1`] = `
             </tr>
             <tr
               class="MuiTableRow-root-id PageTypeList-link-id MuiTableRow-hover-id"
-              data-test="id"
-              data-test-id="UGFnZVR5cGU6Mg=="
+              data-test-id="id-UGFnZVR5cGU6Mg=="
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -152770,7 +152596,7 @@ exports[`Storyshots Views / Page types / Page types list default 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id PageTypeList-colName-id"
               >
                 <span
-                  data-test="name"
+                  data-test-id="name"
                 >
                   Marketing Page
                 </span>
@@ -152812,7 +152638,7 @@ exports[`Storyshots Views / Page types / Page types list loading 1`] = `
         >
           <button
             class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
-            data-test-id="createPageType"
+            data-test-id="create-page-type"
             tabindex="0"
             type="button"
           >
@@ -152871,7 +152697,7 @@ exports[`Storyshots Views / Page types / Page types list loading 1`] = `
       >
         <div
           class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
-          data-test-id="searchInput"
+          data-test-id="search-input"
         >
           <div
             class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
@@ -153053,7 +152879,7 @@ exports[`Storyshots Views / Page types / Page types list loading 1`] = `
           >
             <tr
               class="MuiTableRow-root-id"
-              data-test="id"
+              data-test-id="id-undefined"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -153141,7 +152967,7 @@ exports[`Storyshots Views / Page types / Page types list no data 1`] = `
         >
           <button
             class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
-            data-test-id="createPageType"
+            data-test-id="create-page-type"
             tabindex="0"
             type="button"
           >
@@ -153200,7 +153026,7 @@ exports[`Storyshots Views / Page types / Page types list no data 1`] = `
       >
         <div
           class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
-          data-test-id="searchInput"
+          data-test-id="search-input"
         >
           <div
             class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
@@ -153447,8 +153273,7 @@ exports[`Storyshots Views / Pages / Page details default 1`] = `
               />
               <div
                 class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-                data-test="richTextEditor"
-                data-test-id="content"
+                data-test-id="rich-text-editor-content"
               >
                 <label
                   class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-focused-id MuiInputLabel-focused-id"
@@ -153546,7 +153371,7 @@ exports[`Storyshots Views / Pages / Page details default 1`] = `
                 </div>
                 <button
                   class="MuiButtonBase-root-id IconButton-secondary-id Attributes-expansionBarButton-id IconButton-hoverOutline-id"
-                  data-test="attributes-expand"
+                  data-test-id="attributes-expand"
                   tabindex="0"
                   type="button"
                 >
@@ -153570,7 +153395,7 @@ exports[`Storyshots Views / Pages / Page details default 1`] = `
               >
                 <div
                   class="BasicAttributeRow-attributeSectionLabel-id"
-                  data-test="attribute-label"
+                  data-test-id="attribute-label"
                 >
                   <div
                     class="MuiTypography-root-id MuiTypography-body1-id"
@@ -153580,7 +153405,7 @@ exports[`Storyshots Views / Pages / Page details default 1`] = `
                 </div>
                 <div
                   class="BasicAttributeRow-value-id"
-                  data-test="attribute-value"
+                  data-test-id="attribute-value"
                 >
                   <div
                     class="SingleAutocompleteSelectField-container-id"
@@ -153650,7 +153475,7 @@ exports[`Storyshots Views / Pages / Page details default 1`] = `
               >
                 <div
                   class="BasicAttributeRow-attributeSectionLabel-id"
-                  data-test="attribute-label"
+                  data-test-id="attribute-label"
                 >
                   <div
                     class="MuiTypography-root-id MuiTypography-body1-id"
@@ -153660,7 +153485,7 @@ exports[`Storyshots Views / Pages / Page details default 1`] = `
                 </div>
                 <div
                   class="BasicAttributeRow-value-id"
-                  data-test="attribute-value"
+                  data-test-id="attribute-value"
                 >
                   <div
                     class="MultiAutocompleteSelectField-container-id"
@@ -153763,8 +153588,8 @@ exports[`Storyshots Views / Pages / Page details default 1`] = `
           />
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="metadataEditor"
             data-test-expanded="true"
+            data-test-id="metadata-editor"
             data-test-is-private="false"
           >
             <div
@@ -153779,7 +153604,7 @@ exports[`Storyshots Views / Pages / Page details default 1`] = `
                   Metadata
                   <button
                     class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test="expand"
+                    data-test-id="expand"
                     tabindex="0"
                     type="button"
                   >
@@ -153851,7 +153676,7 @@ exports[`Storyshots Views / Pages / Page details default 1`] = `
               >
                 <tr
                   class="MuiTableRow-root-id MuiTableRow-hover-id"
-                  data-test="field"
+                  data-test-id="field"
                 >
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colName-id"
@@ -153932,8 +153757,7 @@ exports[`Storyshots Views / Pages / Page details default 1`] = `
                   >
                     <button
                       class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                      data-test="deleteField"
-                      data-test-id="0"
+                      data-test-id="delete-field-0"
                       tabindex="0"
                       type="button"
                     >
@@ -153960,7 +153784,7 @@ exports[`Storyshots Views / Pages / Page details default 1`] = `
             >
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-                data-test="addField"
+                data-test-id="add-field"
                 tabindex="0"
                 type="button"
               >
@@ -153977,8 +153801,8 @@ exports[`Storyshots Views / Pages / Page details default 1`] = `
           />
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="metadataEditor"
             data-test-expanded="true"
+            data-test-id="metadata-editor"
             data-test-is-private="true"
           >
             <div
@@ -153993,7 +153817,7 @@ exports[`Storyshots Views / Pages / Page details default 1`] = `
                   Private Metadata
                   <button
                     class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test="expand"
+                    data-test-id="expand"
                     tabindex="0"
                     type="button"
                   >
@@ -154039,7 +153863,7 @@ exports[`Storyshots Views / Pages / Page details default 1`] = `
             >
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-                data-test="addField"
+                data-test-id="add-field"
                 tabindex="0"
                 type="button"
               >
@@ -154322,8 +154146,7 @@ exports[`Storyshots Views / Pages / Page details form errors 1`] = `
               />
               <div
                 class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-                data-test="richTextEditor"
-                data-test-id="content"
+                data-test-id="rich-text-editor-content"
               >
                 <label
                   class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-focused-id MuiInputLabel-focused-id"
@@ -154423,7 +154246,7 @@ exports[`Storyshots Views / Pages / Page details form errors 1`] = `
                 </div>
                 <button
                   class="MuiButtonBase-root-id IconButton-secondary-id Attributes-expansionBarButton-id IconButton-hoverOutline-id"
-                  data-test="attributes-expand"
+                  data-test-id="attributes-expand"
                   tabindex="0"
                   type="button"
                 >
@@ -154447,7 +154270,7 @@ exports[`Storyshots Views / Pages / Page details form errors 1`] = `
               >
                 <div
                   class="BasicAttributeRow-attributeSectionLabel-id"
-                  data-test="attribute-label"
+                  data-test-id="attribute-label"
                 >
                   <div
                     class="MuiTypography-root-id MuiTypography-body1-id"
@@ -154457,7 +154280,7 @@ exports[`Storyshots Views / Pages / Page details form errors 1`] = `
                 </div>
                 <div
                   class="BasicAttributeRow-value-id"
-                  data-test="attribute-value"
+                  data-test-id="attribute-value"
                 >
                   <div
                     class="SingleAutocompleteSelectField-container-id"
@@ -154527,7 +154350,7 @@ exports[`Storyshots Views / Pages / Page details form errors 1`] = `
               >
                 <div
                   class="BasicAttributeRow-attributeSectionLabel-id"
-                  data-test="attribute-label"
+                  data-test-id="attribute-label"
                 >
                   <div
                     class="MuiTypography-root-id MuiTypography-body1-id"
@@ -154537,7 +154360,7 @@ exports[`Storyshots Views / Pages / Page details form errors 1`] = `
                 </div>
                 <div
                   class="BasicAttributeRow-value-id"
-                  data-test="attribute-value"
+                  data-test-id="attribute-value"
                 >
                   <div
                     class="MultiAutocompleteSelectField-container-id"
@@ -154640,8 +154463,8 @@ exports[`Storyshots Views / Pages / Page details form errors 1`] = `
           />
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="metadataEditor"
             data-test-expanded="true"
+            data-test-id="metadata-editor"
             data-test-is-private="false"
           >
             <div
@@ -154656,7 +154479,7 @@ exports[`Storyshots Views / Pages / Page details form errors 1`] = `
                   Metadata
                   <button
                     class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test="expand"
+                    data-test-id="expand"
                     tabindex="0"
                     type="button"
                   >
@@ -154728,7 +154551,7 @@ exports[`Storyshots Views / Pages / Page details form errors 1`] = `
               >
                 <tr
                   class="MuiTableRow-root-id MuiTableRow-hover-id"
-                  data-test="field"
+                  data-test-id="field"
                 >
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colName-id"
@@ -154809,8 +154632,7 @@ exports[`Storyshots Views / Pages / Page details form errors 1`] = `
                   >
                     <button
                       class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                      data-test="deleteField"
-                      data-test-id="0"
+                      data-test-id="delete-field-0"
                       tabindex="0"
                       type="button"
                     >
@@ -154837,7 +154659,7 @@ exports[`Storyshots Views / Pages / Page details form errors 1`] = `
             >
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-                data-test="addField"
+                data-test-id="add-field"
                 tabindex="0"
                 type="button"
               >
@@ -154854,8 +154676,8 @@ exports[`Storyshots Views / Pages / Page details form errors 1`] = `
           />
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="metadataEditor"
             data-test-expanded="true"
+            data-test-id="metadata-editor"
             data-test-is-private="true"
           >
             <div
@@ -154870,7 +154692,7 @@ exports[`Storyshots Views / Pages / Page details form errors 1`] = `
                   Private Metadata
                   <button
                     class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test="expand"
+                    data-test-id="expand"
                     tabindex="0"
                     type="button"
                   >
@@ -154916,7 +154738,7 @@ exports[`Storyshots Views / Pages / Page details form errors 1`] = `
             >
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-                data-test="addField"
+                data-test-id="add-field"
                 tabindex="0"
                 type="button"
               >
@@ -155207,8 +155029,7 @@ exports[`Storyshots Views / Pages / Page details loading 1`] = `
               />
               <div
                 class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-                data-test="richTextEditor"
-                data-test-id="content"
+                data-test-id="rich-text-editor-content"
               >
                 <label
                   class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiFormLabel-focused-id MuiInputLabel-focused-id"
@@ -155278,8 +155099,8 @@ exports[`Storyshots Views / Pages / Page details loading 1`] = `
           />
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="metadataEditor"
             data-test-expanded="true"
+            data-test-id="metadata-editor"
             data-test-is-private="false"
           >
             <div
@@ -155294,7 +155115,7 @@ exports[`Storyshots Views / Pages / Page details loading 1`] = `
                   Metadata
                   <button
                     class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test="expand"
+                    data-test-id="expand"
                     tabindex="0"
                     type="button"
                   >
@@ -155340,7 +155161,7 @@ exports[`Storyshots Views / Pages / Page details loading 1`] = `
             >
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-                data-test="addField"
+                data-test-id="add-field"
                 tabindex="0"
                 type="button"
               >
@@ -155357,8 +155178,8 @@ exports[`Storyshots Views / Pages / Page details loading 1`] = `
           />
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="metadataEditor"
             data-test-expanded="true"
+            data-test-id="metadata-editor"
             data-test-is-private="true"
           >
             <div
@@ -155373,7 +155194,7 @@ exports[`Storyshots Views / Pages / Page details loading 1`] = `
                   Private Metadata
                   <button
                     class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test="expand"
+                    data-test-id="expand"
                     tabindex="0"
                     type="button"
                   >
@@ -155419,7 +155240,7 @@ exports[`Storyshots Views / Pages / Page details loading 1`] = `
             >
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-                data-test="addField"
+                data-test-id="add-field"
                 tabindex="0"
                 type="button"
               >
@@ -155594,7 +155415,7 @@ exports[`Storyshots Views / Pages / Page details loading 1`] = `
             >
               <div
                 class="SingleAutocompleteSelectField-container-id"
-                data-test-id="pageTypesAutocompleteSelect"
+                data-test-id="page-types-autocomplete-select"
               >
                 <div
                   class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -155689,7 +155510,7 @@ exports[`Storyshots Views / Pages / Page list default 1`] = `
         >
           <button
             class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
-            data-test-id="createPage"
+            data-test-id="create-page"
             tabindex="0"
             type="button"
           >
@@ -156212,7 +156033,7 @@ exports[`Storyshots Views / Pages / Page list loading 1`] = `
         >
           <button
             class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
-            data-test-id="createPage"
+            data-test-id="create-page"
             tabindex="0"
             type="button"
           >
@@ -156527,7 +156348,7 @@ exports[`Storyshots Views / Pages / Page list no data 1`] = `
         >
           <button
             class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
-            data-test-id="createPage"
+            data-test-id="create-page"
             tabindex="0"
             type="button"
           >
@@ -156813,7 +156634,7 @@ exports[`Storyshots Views / Permission Groups / Permission Group Create default
                   <span
                     aria-disabled="false"
                     class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id MuiIconButton-edgeStart-id"
-                    data-test-id="fullAccess"
+                    data-test-id="full-access"
                   >
                     <span
                       class="MuiIconButton-label-id"
@@ -157710,7 +157531,7 @@ exports[`Storyshots Views / Permission Groups / Permission Group Create errors 1
                   <span
                     aria-disabled="false"
                     class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id MuiIconButton-edgeStart-id"
-                    data-test-id="fullAccess"
+                    data-test-id="full-access"
                   >
                     <span
                       class="MuiIconButton-label-id"
@@ -158603,7 +158424,7 @@ exports[`Storyshots Views / Permission Groups / Permission Group Create loading
                   <span
                     aria-disabled="true"
                     class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-disabled-id MuiCheckbox-disabled-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiIconButton-edgeStart-id MuiButtonBase-disabled-id"
-                    data-test-id="fullAccess"
+                    data-test-id="full-access"
                     tabindex="-1"
                   >
                     <span
@@ -159704,7 +159525,7 @@ exports[`Storyshots Views / Permission Groups / Permission Group Details default
                       <button
                         class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                         color="primary"
-                        data-test-id="removeUser"
+                        data-test-id="remove-user"
                         tabindex="0"
                         type="button"
                       >
@@ -159797,7 +159618,7 @@ exports[`Storyshots Views / Permission Groups / Permission Group Details default
                       <button
                         class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                         color="primary"
-                        data-test-id="removeUser"
+                        data-test-id="remove-user"
                         tabindex="0"
                         type="button"
                       >
@@ -159890,7 +159711,7 @@ exports[`Storyshots Views / Permission Groups / Permission Group Details default
                       <button
                         class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                         color="primary"
-                        data-test-id="removeUser"
+                        data-test-id="remove-user"
                         tabindex="0"
                         type="button"
                       >
@@ -159983,7 +159804,7 @@ exports[`Storyshots Views / Permission Groups / Permission Group Details default
                       <button
                         class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                         color="primary"
-                        data-test-id="removeUser"
+                        data-test-id="remove-user"
                         tabindex="0"
                         type="button"
                       >
@@ -160044,7 +159865,7 @@ exports[`Storyshots Views / Permission Groups / Permission Group Details default
                   <span
                     aria-disabled="false"
                     class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id MuiIconButton-edgeStart-id"
-                    data-test-id="fullAccess"
+                    data-test-id="full-access"
                   >
                     <span
                       class="MuiIconButton-label-id"
@@ -161148,7 +160969,7 @@ exports[`Storyshots Views / Permission Groups / Permission Group Details loading
                       <button
                         class="MuiButtonBase-root-id IconButton-secondary-id MuiButtonBase-disabled-id"
                         color="primary"
-                        data-test-id="removeUser"
+                        data-test-id="remove-user"
                         disabled=""
                         tabindex="-1"
                         type="button"
@@ -161244,7 +161065,7 @@ exports[`Storyshots Views / Permission Groups / Permission Group Details loading
                       <button
                         class="MuiButtonBase-root-id IconButton-secondary-id MuiButtonBase-disabled-id"
                         color="primary"
-                        data-test-id="removeUser"
+                        data-test-id="remove-user"
                         disabled=""
                         tabindex="-1"
                         type="button"
@@ -161340,7 +161161,7 @@ exports[`Storyshots Views / Permission Groups / Permission Group Details loading
                       <button
                         class="MuiButtonBase-root-id IconButton-secondary-id MuiButtonBase-disabled-id"
                         color="primary"
-                        data-test-id="removeUser"
+                        data-test-id="remove-user"
                         disabled=""
                         tabindex="-1"
                         type="button"
@@ -161436,7 +161257,7 @@ exports[`Storyshots Views / Permission Groups / Permission Group Details loading
                       <button
                         class="MuiButtonBase-root-id IconButton-secondary-id MuiButtonBase-disabled-id"
                         color="primary"
-                        data-test-id="removeUser"
+                        data-test-id="remove-user"
                         disabled=""
                         tabindex="-1"
                         type="button"
@@ -161498,7 +161319,7 @@ exports[`Storyshots Views / Permission Groups / Permission Group Details loading
                   <span
                     aria-disabled="true"
                     class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id PrivateSwitchBase-disabled-id MuiCheckbox-disabled-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiIconButton-edgeStart-id MuiButtonBase-disabled-id"
-                    data-test-id="fullAccess"
+                    data-test-id="full-access"
                     tabindex="-1"
                   >
                     <span
@@ -161741,7 +161562,7 @@ exports[`Storyshots Views / Permission Groups / Permission Group Details no memb
                   <span
                     aria-disabled="false"
                     class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id MuiIconButton-edgeStart-id"
-                    data-test-id="fullAccess"
+                    data-test-id="full-access"
                   >
                     <span
                       class="MuiIconButton-label-id"
@@ -162569,7 +162390,7 @@ exports[`Storyshots Views / Permission Groups / Permission Group List default 1`
         >
           <button
             class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
-            data-test-id="createPermissionGroup"
+            data-test-id="create-permission-group"
             tabindex="0"
             type="button"
           >
@@ -162717,14 +162538,13 @@ exports[`Storyshots Views / Permission Groups / Permission Group List default 1`
           >
             <tr
               class="MuiTableRow-root-id PermissionGroupList-link-id MuiTableRow-hover-id"
-              data-test="id"
-              data-test-id="R3JvdXA6Mg=="
+              data-test-id="id-R3JvdXA6Mg=="
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id PermissionGroupList-colName-id"
               >
                 <span
-                  data-test="name"
+                  data-test-id="name"
                 >
                   Customer Support
                 </span>
@@ -162733,7 +162553,7 @@ exports[`Storyshots Views / Permission Groups / Permission Group List default 1`
                 class="MuiTableCell-root-id MuiTableCell-body-id PermissionGroupList-colMembers-id"
               >
                 <span
-                  data-test="members"
+                  data-test-id="members"
                 >
                   1
                 </span>
@@ -162766,14 +162586,13 @@ exports[`Storyshots Views / Permission Groups / Permission Group List default 1`
             </tr>
             <tr
               class="MuiTableRow-root-id PermissionGroupList-link-id MuiTableRow-hover-id"
-              data-test="id"
-              data-test-id="R3JvdXA6MQ=="
+              data-test-id="id-R3JvdXA6MQ=="
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id PermissionGroupList-colName-id"
               >
                 <span
-                  data-test="name"
+                  data-test-id="name"
                 >
                   Full Access
                 </span>
@@ -162782,7 +162601,7 @@ exports[`Storyshots Views / Permission Groups / Permission Group List default 1`
                 class="MuiTableCell-root-id MuiTableCell-body-id PermissionGroupList-colMembers-id"
               >
                 <span
-                  data-test="members"
+                  data-test-id="members"
                 >
                   1
                 </span>
@@ -162793,14 +162612,13 @@ exports[`Storyshots Views / Permission Groups / Permission Group List default 1`
             </tr>
             <tr
               class="MuiTableRow-root-id PermissionGroupList-link-id MuiTableRow-hover-id"
-              data-test="id"
-              data-test-id="R3JvdXA6NA=="
+              data-test-id="id-R3JvdXA6NA=="
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id PermissionGroupList-colName-id"
               >
                 <span
-                  data-test="name"
+                  data-test-id="name"
                 >
                   Management
                 </span>
@@ -162809,7 +162627,7 @@ exports[`Storyshots Views / Permission Groups / Permission Group List default 1`
                 class="MuiTableCell-root-id MuiTableCell-body-id PermissionGroupList-colMembers-id"
               >
                 <span
-                  data-test="members"
+                  data-test-id="members"
                 >
                   0
                 </span>
@@ -162842,14 +162660,13 @@ exports[`Storyshots Views / Permission Groups / Permission Group List default 1`
             </tr>
             <tr
               class="MuiTableRow-root-id PermissionGroupList-link-id MuiTableRow-hover-id"
-              data-test="id"
-              data-test-id="R3JvdXA6Mw=="
+              data-test-id="id-R3JvdXA6Mw=="
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id PermissionGroupList-colName-id"
               >
                 <span
-                  data-test="name"
+                  data-test-id="name"
                 >
                   Editors
                 </span>
@@ -162858,7 +162675,7 @@ exports[`Storyshots Views / Permission Groups / Permission Group List default 1`
                 class="MuiTableCell-root-id MuiTableCell-body-id PermissionGroupList-colMembers-id"
               >
                 <span
-                  data-test="members"
+                  data-test-id="members"
                 >
                   2
                 </span>
@@ -162891,14 +162708,13 @@ exports[`Storyshots Views / Permission Groups / Permission Group List default 1`
             </tr>
             <tr
               class="MuiTableRow-root-id PermissionGroupList-link-id MuiTableRow-hover-id"
-              data-test="id"
-              data-test-id="R3JvdXA6NQ=="
+              data-test-id="id-R3JvdXA6NQ=="
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id PermissionGroupList-colName-id"
               >
                 <span
-                  data-test="name"
+                  data-test-id="name"
                 >
                   Publishers
                 </span>
@@ -162907,7 +162723,7 @@ exports[`Storyshots Views / Permission Groups / Permission Group List default 1`
                 class="MuiTableCell-root-id MuiTableCell-body-id PermissionGroupList-colMembers-id"
               >
                 <span
-                  data-test="members"
+                  data-test-id="members"
                 >
                   0
                 </span>
@@ -162974,7 +162790,7 @@ exports[`Storyshots Views / Permission Groups / Permission Group List loading 1`
         >
           <button
             class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
-            data-test-id="createPermissionGroup"
+            data-test-id="create-permission-group"
             tabindex="0"
             type="button"
           >
@@ -163123,7 +162939,7 @@ exports[`Storyshots Views / Permission Groups / Permission Group List loading 1`
           >
             <tr
               class="MuiTableRow-root-id"
-              data-test="id"
+              data-test-id="id-undefined"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id PermissionGroupList-colName-id"
@@ -163192,7 +163008,7 @@ exports[`Storyshots Views / Permission Groups / Permission Group List no data 1`
         >
           <button
             class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
-            data-test-id="createPermissionGroup"
+            data-test-id="create-permission-group"
             tabindex="0"
             type="button"
           >
@@ -164175,7 +163991,7 @@ exports[`Storyshots Views / Plugins / Plugin list default 1`] = `
         </div>
         <div
           class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
-          data-test-id="searchInput"
+          data-test-id="search-input"
         >
           <div
             class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
@@ -164592,7 +164408,7 @@ exports[`Storyshots Views / Plugins / Plugin list loading 1`] = `
         </div>
         <div
           class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
-          data-test-id="searchInput"
+          data-test-id="search-input"
         >
           <div
             class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
@@ -164895,7 +164711,7 @@ exports[`Storyshots Views / Plugins / Plugin list no data 1`] = `
         </div>
         <div
           class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
-          data-test-id="searchInput"
+          data-test-id="search-input"
         >
           <div
             class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
@@ -165401,8 +165217,8 @@ exports[`Storyshots Views / Product types / Create product type default 1`] = `
           />
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="metadataEditor"
             data-test-expanded="true"
+            data-test-id="metadata-editor"
             data-test-is-private="false"
           >
             <div
@@ -165417,7 +165233,7 @@ exports[`Storyshots Views / Product types / Create product type default 1`] = `
                   Metadata
                   <button
                     class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test="expand"
+                    data-test-id="expand"
                     tabindex="0"
                     type="button"
                   >
@@ -165463,7 +165279,7 @@ exports[`Storyshots Views / Product types / Create product type default 1`] = `
             >
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-                data-test="addField"
+                data-test-id="add-field"
                 tabindex="0"
                 type="button"
               >
@@ -165480,8 +165296,8 @@ exports[`Storyshots Views / Product types / Create product type default 1`] = `
           />
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="metadataEditor"
             data-test-expanded="true"
+            data-test-id="metadata-editor"
             data-test-is-private="true"
           >
             <div
@@ -165496,7 +165312,7 @@ exports[`Storyshots Views / Product types / Create product type default 1`] = `
                   Private Metadata
                   <button
                     class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test="expand"
+                    data-test-id="expand"
                     tabindex="0"
                     type="button"
                   >
@@ -165542,7 +165358,7 @@ exports[`Storyshots Views / Product types / Create product type default 1`] = `
             >
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-                data-test="addField"
+                data-test-id="add-field"
                 tabindex="0"
                 type="button"
               >
@@ -165929,8 +165745,8 @@ exports[`Storyshots Views / Product types / Create product type form errors 1`]
           />
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="metadataEditor"
             data-test-expanded="true"
+            data-test-id="metadata-editor"
             data-test-is-private="false"
           >
             <div
@@ -165945,7 +165761,7 @@ exports[`Storyshots Views / Product types / Create product type form errors 1`]
                   Metadata
                   <button
                     class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test="expand"
+                    data-test-id="expand"
                     tabindex="0"
                     type="button"
                   >
@@ -165991,7 +165807,7 @@ exports[`Storyshots Views / Product types / Create product type form errors 1`]
             >
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-                data-test="addField"
+                data-test-id="add-field"
                 tabindex="0"
                 type="button"
               >
@@ -166008,8 +165824,8 @@ exports[`Storyshots Views / Product types / Create product type form errors 1`]
           />
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="metadataEditor"
             data-test-expanded="true"
+            data-test-id="metadata-editor"
             data-test-is-private="true"
           >
             <div
@@ -166024,7 +165840,7 @@ exports[`Storyshots Views / Product types / Create product type form errors 1`]
                   Private Metadata
                   <button
                     class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test="expand"
+                    data-test-id="expand"
                     tabindex="0"
                     type="button"
                   >
@@ -166070,7 +165886,7 @@ exports[`Storyshots Views / Product types / Create product type form errors 1`]
             >
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-                data-test="addField"
+                data-test-id="add-field"
                 tabindex="0"
                 type="button"
               >
@@ -166464,8 +166280,8 @@ exports[`Storyshots Views / Product types / Create product type loading 1`] = `
           />
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="metadataEditor"
             data-test-expanded="true"
+            data-test-id="metadata-editor"
             data-test-is-private="false"
           >
             <div
@@ -166480,7 +166296,7 @@ exports[`Storyshots Views / Product types / Create product type loading 1`] = `
                   Metadata
                   <button
                     class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test="expand"
+                    data-test-id="expand"
                     tabindex="0"
                     type="button"
                   >
@@ -166526,7 +166342,7 @@ exports[`Storyshots Views / Product types / Create product type loading 1`] = `
             >
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-                data-test="addField"
+                data-test-id="add-field"
                 tabindex="0"
                 type="button"
               >
@@ -166543,8 +166359,8 @@ exports[`Storyshots Views / Product types / Create product type loading 1`] = `
           />
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="metadataEditor"
             data-test-expanded="true"
+            data-test-id="metadata-editor"
             data-test-is-private="true"
           >
             <div
@@ -166559,7 +166375,7 @@ exports[`Storyshots Views / Product types / Create product type loading 1`] = `
                   Private Metadata
                   <button
                     class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test="expand"
+                    data-test-id="expand"
                     tabindex="0"
                     type="button"
                   >
@@ -166605,7 +166421,7 @@ exports[`Storyshots Views / Product types / Create product type loading 1`] = `
             >
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-                data-test="addField"
+                data-test-id="add-field"
                 tabindex="0"
                 type="button"
               >
@@ -166989,7 +166805,7 @@ exports[`Storyshots Views / Product types / Product type details default 1`] = `
           />
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="product-attributes"
+            data-test-id="product-attributes"
           >
             <div
               class="MuiCardHeader-root-id"
@@ -167008,7 +166824,7 @@ exports[`Storyshots Views / Product types / Product type details default 1`] = `
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                  data-test-id="assignProductsAttributes"
+                  data-test-id="assign-products-attributes"
                   tabindex="0"
                   type="button"
                 >
@@ -167112,8 +166928,7 @@ exports[`Storyshots Views / Product types / Product type details default 1`] = `
                 >
                   <tr
                     class="MuiTableRow-root-id ProductTypeAttributes-link-id MuiTableRow-hover-id"
-                    data-test="id"
-                    data-test-id="UHJvZHVjdEF0dHJpYnV0ZTo5"
+                    data-test-id="idUHJvZHVjdEF0dHJpYnV0ZTo5"
                   >
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id SortableHandle-columnDrag-id"
@@ -167171,13 +166986,13 @@ exports[`Storyshots Views / Product types / Product type details default 1`] = `
                     </td>
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeAttributes-colName-id"
-                      data-test="name"
+                      data-test-id="name"
                     >
                       Author
                     </td>
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeAttributes-colSlug-id"
-                      data-test="slug"
+                      data-test-id="slug"
                     >
                       author
                     </td>
@@ -167208,8 +167023,7 @@ exports[`Storyshots Views / Product types / Product type details default 1`] = `
                   </tr>
                   <tr
                     class="MuiTableRow-root-id ProductTypeAttributes-link-id MuiTableRow-hover-id"
-                    data-test="id"
-                    data-test-id="UHJvZHVjdEF0dHJpYnV0ZToxMQ=="
+                    data-test-id="idUHJvZHVjdEF0dHJpYnV0ZToxMQ=="
                   >
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id SortableHandle-columnDrag-id"
@@ -167267,13 +167081,13 @@ exports[`Storyshots Views / Product types / Product type details default 1`] = `
                     </td>
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeAttributes-colName-id"
-                      data-test="name"
+                      data-test-id="name"
                     >
                       Language
                     </td>
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeAttributes-colSlug-id"
-                      data-test="slug"
+                      data-test-id="slug"
                     >
                       language
                     </td>
@@ -167304,8 +167118,7 @@ exports[`Storyshots Views / Product types / Product type details default 1`] = `
                   </tr>
                   <tr
                     class="MuiTableRow-root-id ProductTypeAttributes-link-id MuiTableRow-hover-id"
-                    data-test="id"
-                    data-test-id="UHJvZHVjdEF0dHJpYnV0ZToxMA=="
+                    data-test-id="idUHJvZHVjdEF0dHJpYnV0ZToxMA=="
                   >
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id SortableHandle-columnDrag-id"
@@ -167363,13 +167176,13 @@ exports[`Storyshots Views / Product types / Product type details default 1`] = `
                     </td>
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeAttributes-colName-id"
-                      data-test="name"
+                      data-test-id="name"
                     >
                       Publisher
                     </td>
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeAttributes-colSlug-id"
-                      data-test="slug"
+                      data-test-id="slug"
                     >
                       publisher
                     </td>
@@ -167450,8 +167263,8 @@ exports[`Storyshots Views / Product types / Product type details default 1`] = `
           />
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="metadataEditor"
             data-test-expanded="true"
+            data-test-id="metadata-editor"
             data-test-is-private="false"
           >
             <div
@@ -167466,7 +167279,7 @@ exports[`Storyshots Views / Product types / Product type details default 1`] = `
                   Metadata
                   <button
                     class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test="expand"
+                    data-test-id="expand"
                     tabindex="0"
                     type="button"
                   >
@@ -167538,7 +167351,7 @@ exports[`Storyshots Views / Product types / Product type details default 1`] = `
               >
                 <tr
                   class="MuiTableRow-root-id MuiTableRow-hover-id"
-                  data-test="field"
+                  data-test-id="field"
                 >
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colName-id"
@@ -167619,8 +167432,7 @@ exports[`Storyshots Views / Product types / Product type details default 1`] = `
                   >
                     <button
                       class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                      data-test="deleteField"
-                      data-test-id="0"
+                      data-test-id="delete-field-0"
                       tabindex="0"
                       type="button"
                     >
@@ -167647,7 +167459,7 @@ exports[`Storyshots Views / Product types / Product type details default 1`] = `
             >
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-                data-test="addField"
+                data-test-id="add-field"
                 tabindex="0"
                 type="button"
               >
@@ -167664,8 +167476,8 @@ exports[`Storyshots Views / Product types / Product type details default 1`] = `
           />
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="metadataEditor"
             data-test-expanded="true"
+            data-test-id="metadata-editor"
             data-test-is-private="true"
           >
             <div
@@ -167680,7 +167492,7 @@ exports[`Storyshots Views / Product types / Product type details default 1`] = `
                   Private Metadata
                   <button
                     class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test="expand"
+                    data-test-id="expand"
                     tabindex="0"
                     type="button"
                   >
@@ -167726,7 +167538,7 @@ exports[`Storyshots Views / Product types / Product type details default 1`] = `
             >
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-                data-test="addField"
+                data-test-id="add-field"
                 tabindex="0"
                 type="button"
               >
@@ -168113,7 +167925,7 @@ exports[`Storyshots Views / Product types / Product type details form errors 1`]
           />
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="product-attributes"
+            data-test-id="product-attributes"
           >
             <div
               class="MuiCardHeader-root-id"
@@ -168132,7 +167944,7 @@ exports[`Storyshots Views / Product types / Product type details form errors 1`]
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                  data-test-id="assignProductsAttributes"
+                  data-test-id="assign-products-attributes"
                   tabindex="0"
                   type="button"
                 >
@@ -168236,8 +168048,7 @@ exports[`Storyshots Views / Product types / Product type details form errors 1`]
                 >
                   <tr
                     class="MuiTableRow-root-id ProductTypeAttributes-link-id MuiTableRow-hover-id"
-                    data-test="id"
-                    data-test-id="UHJvZHVjdEF0dHJpYnV0ZTo5"
+                    data-test-id="idUHJvZHVjdEF0dHJpYnV0ZTo5"
                   >
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id SortableHandle-columnDrag-id"
@@ -168295,13 +168106,13 @@ exports[`Storyshots Views / Product types / Product type details form errors 1`]
                     </td>
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeAttributes-colName-id"
-                      data-test="name"
+                      data-test-id="name"
                     >
                       Author
                     </td>
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeAttributes-colSlug-id"
-                      data-test="slug"
+                      data-test-id="slug"
                     >
                       author
                     </td>
@@ -168332,8 +168143,7 @@ exports[`Storyshots Views / Product types / Product type details form errors 1`]
                   </tr>
                   <tr
                     class="MuiTableRow-root-id ProductTypeAttributes-link-id MuiTableRow-hover-id"
-                    data-test="id"
-                    data-test-id="UHJvZHVjdEF0dHJpYnV0ZToxMQ=="
+                    data-test-id="idUHJvZHVjdEF0dHJpYnV0ZToxMQ=="
                   >
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id SortableHandle-columnDrag-id"
@@ -168391,13 +168201,13 @@ exports[`Storyshots Views / Product types / Product type details form errors 1`]
                     </td>
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeAttributes-colName-id"
-                      data-test="name"
+                      data-test-id="name"
                     >
                       Language
                     </td>
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeAttributes-colSlug-id"
-                      data-test="slug"
+                      data-test-id="slug"
                     >
                       language
                     </td>
@@ -168428,8 +168238,7 @@ exports[`Storyshots Views / Product types / Product type details form errors 1`]
                   </tr>
                   <tr
                     class="MuiTableRow-root-id ProductTypeAttributes-link-id MuiTableRow-hover-id"
-                    data-test="id"
-                    data-test-id="UHJvZHVjdEF0dHJpYnV0ZToxMA=="
+                    data-test-id="idUHJvZHVjdEF0dHJpYnV0ZToxMA=="
                   >
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id SortableHandle-columnDrag-id"
@@ -168487,13 +168296,13 @@ exports[`Storyshots Views / Product types / Product type details form errors 1`]
                     </td>
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeAttributes-colName-id"
-                      data-test="name"
+                      data-test-id="name"
                     >
                       Publisher
                     </td>
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeAttributes-colSlug-id"
-                      data-test="slug"
+                      data-test-id="slug"
                     >
                       publisher
                     </td>
@@ -168574,8 +168383,8 @@ exports[`Storyshots Views / Product types / Product type details form errors 1`]
           />
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="metadataEditor"
             data-test-expanded="true"
+            data-test-id="metadata-editor"
             data-test-is-private="false"
           >
             <div
@@ -168590,7 +168399,7 @@ exports[`Storyshots Views / Product types / Product type details form errors 1`]
                   Metadata
                   <button
                     class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test="expand"
+                    data-test-id="expand"
                     tabindex="0"
                     type="button"
                   >
@@ -168662,7 +168471,7 @@ exports[`Storyshots Views / Product types / Product type details form errors 1`]
               >
                 <tr
                   class="MuiTableRow-root-id MuiTableRow-hover-id"
-                  data-test="field"
+                  data-test-id="field"
                 >
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colName-id"
@@ -168743,8 +168552,7 @@ exports[`Storyshots Views / Product types / Product type details form errors 1`]
                   >
                     <button
                       class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                      data-test="deleteField"
-                      data-test-id="0"
+                      data-test-id="delete-field-0"
                       tabindex="0"
                       type="button"
                     >
@@ -168771,7 +168579,7 @@ exports[`Storyshots Views / Product types / Product type details form errors 1`]
             >
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-                data-test="addField"
+                data-test-id="add-field"
                 tabindex="0"
                 type="button"
               >
@@ -168788,8 +168596,8 @@ exports[`Storyshots Views / Product types / Product type details form errors 1`]
           />
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="metadataEditor"
             data-test-expanded="true"
+            data-test-id="metadata-editor"
             data-test-is-private="true"
           >
             <div
@@ -168804,7 +168612,7 @@ exports[`Storyshots Views / Product types / Product type details form errors 1`]
                   Private Metadata
                   <button
                     class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test="expand"
+                    data-test-id="expand"
                     tabindex="0"
                     type="button"
                   >
@@ -168850,7 +168658,7 @@ exports[`Storyshots Views / Product types / Product type details form errors 1`]
             >
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-                data-test="addField"
+                data-test-id="add-field"
                 tabindex="0"
                 type="button"
               >
@@ -169244,7 +169052,7 @@ exports[`Storyshots Views / Product types / Product type details loading 1`] = `
           />
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="product-attributes"
+            data-test-id="product-attributes"
           >
             <div
               class="MuiCardHeader-root-id"
@@ -169263,7 +169071,7 @@ exports[`Storyshots Views / Product types / Product type details loading 1`] = `
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id MuiButton-disabled-id MuiButtonBase-disabled-id"
-                  data-test-id="assignProductsAttributes"
+                  data-test-id="assign-products-attributes"
                   disabled=""
                   tabindex="-1"
                   type="button"
@@ -169302,7 +169110,7 @@ exports[`Storyshots Views / Product types / Product type details loading 1`] = `
                 >
                   <tr
                     class="MuiTableRow-root-id"
-                    data-test="id"
+                    data-test-id="idundefined"
                   >
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id SortableHandle-columnDrag-id"
@@ -169362,7 +169170,7 @@ exports[`Storyshots Views / Product types / Product type details loading 1`] = `
                     </td>
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeAttributes-colName-id"
-                      data-test="name"
+                      data-test-id="name"
                     >
                       <span
                         class="Skeleton-skeleton-id"
@@ -169373,7 +169181,7 @@ exports[`Storyshots Views / Product types / Product type details loading 1`] = `
                     </td>
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeAttributes-colSlug-id"
-                      data-test="slug"
+                      data-test-id="slug"
                     >
                       <span
                         class="Skeleton-skeleton-id"
@@ -169462,8 +169270,8 @@ exports[`Storyshots Views / Product types / Product type details loading 1`] = `
           />
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="metadataEditor"
             data-test-expanded="true"
+            data-test-id="metadata-editor"
             data-test-is-private="false"
           >
             <div
@@ -169478,7 +169286,7 @@ exports[`Storyshots Views / Product types / Product type details loading 1`] = `
                   Metadata
                   <button
                     class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test="expand"
+                    data-test-id="expand"
                     tabindex="0"
                     type="button"
                   >
@@ -169523,8 +169331,8 @@ exports[`Storyshots Views / Product types / Product type details loading 1`] = `
           />
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="metadataEditor"
             data-test-expanded="true"
+            data-test-id="metadata-editor"
             data-test-is-private="true"
           >
             <div
@@ -169539,7 +169347,7 @@ exports[`Storyshots Views / Product types / Product type details loading 1`] = `
                   Private Metadata
                   <button
                     class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test="expand"
+                    data-test-id="expand"
                     tabindex="0"
                     type="button"
                   >
@@ -169951,7 +169759,7 @@ exports[`Storyshots Views / Product types / Product type details no attributes 1
           />
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="product-attributes"
+            data-test-id="product-attributes"
           >
             <div
               class="MuiCardHeader-root-id"
@@ -169970,7 +169778,7 @@ exports[`Storyshots Views / Product types / Product type details no attributes 1
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                  data-test-id="assignProductsAttributes"
+                  data-test-id="assign-products-attributes"
                   tabindex="0"
                   type="button"
                 >
@@ -170068,8 +169876,8 @@ exports[`Storyshots Views / Product types / Product type details no attributes 1
           />
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="metadataEditor"
             data-test-expanded="true"
+            data-test-id="metadata-editor"
             data-test-is-private="false"
           >
             <div
@@ -170084,7 +169892,7 @@ exports[`Storyshots Views / Product types / Product type details no attributes 1
                   Metadata
                   <button
                     class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test="expand"
+                    data-test-id="expand"
                     tabindex="0"
                     type="button"
                   >
@@ -170156,7 +169964,7 @@ exports[`Storyshots Views / Product types / Product type details no attributes 1
               >
                 <tr
                   class="MuiTableRow-root-id MuiTableRow-hover-id"
-                  data-test="field"
+                  data-test-id="field"
                 >
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colName-id"
@@ -170237,8 +170045,7 @@ exports[`Storyshots Views / Product types / Product type details no attributes 1
                   >
                     <button
                       class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                      data-test="deleteField"
-                      data-test-id="0"
+                      data-test-id="delete-field-0"
                       tabindex="0"
                       type="button"
                     >
@@ -170265,7 +170072,7 @@ exports[`Storyshots Views / Product types / Product type details no attributes 1
             >
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-                data-test="addField"
+                data-test-id="add-field"
                 tabindex="0"
                 type="button"
               >
@@ -170282,8 +170089,8 @@ exports[`Storyshots Views / Product types / Product type details no attributes 1
           />
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="metadataEditor"
             data-test-expanded="true"
+            data-test-id="metadata-editor"
             data-test-is-private="true"
           >
             <div
@@ -170298,7 +170105,7 @@ exports[`Storyshots Views / Product types / Product type details no attributes 1
                   Private Metadata
                   <button
                     class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test="expand"
+                    data-test-id="expand"
                     tabindex="0"
                     type="button"
                   >
@@ -170344,7 +170151,7 @@ exports[`Storyshots Views / Product types / Product type details no attributes 1
             >
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-                data-test="addField"
+                data-test-id="add-field"
                 tabindex="0"
                 type="button"
               >
@@ -170457,7 +170264,7 @@ exports[`Storyshots Views / Product types / Product types list default 1`] = `
         >
           <button
             class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
-            data-test-id="addProductType"
+            data-test-id="add-product-type"
             tabindex="0"
             type="button"
           >
@@ -170530,7 +170337,7 @@ exports[`Storyshots Views / Product types / Product types list default 1`] = `
         </div>
         <div
           class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
-          data-test-id="searchInput"
+          data-test-id="search-input"
         >
           <div
             class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
@@ -170729,8 +170536,7 @@ exports[`Storyshots Views / Product types / Product types list default 1`] = `
           >
             <tr
               class="MuiTableRow-root-id ProductTypeList-link-id MuiTableRow-hover-id"
-              data-test="id"
-              data-test-id="UHJvZHVjdFR5cGU6NA=="
+              data-test-id="id-UHJvZHVjdFR5cGU6NA=="
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -170773,7 +170579,7 @@ exports[`Storyshots Views / Product types / Product types list default 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeList-colName-id"
               >
                 <span
-                  data-test="name"
+                  data-test-id="name"
                 >
                   Candy
                 </span>
@@ -170796,8 +170602,7 @@ exports[`Storyshots Views / Product types / Product types list default 1`] = `
             </tr>
             <tr
               class="MuiTableRow-root-id ProductTypeList-link-id MuiTableRow-hover-id"
-              data-test="id"
-              data-test-id="UHJvZHVjdFR5cGU6NQ=="
+              data-test-id="id-UHJvZHVjdFR5cGU6NQ=="
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -170840,7 +170645,7 @@ exports[`Storyshots Views / Product types / Product types list default 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeList-colName-id"
               >
                 <span
-                  data-test="name"
+                  data-test-id="name"
                 >
                   E-books
                 </span>
@@ -170863,8 +170668,7 @@ exports[`Storyshots Views / Product types / Product types list default 1`] = `
             </tr>
             <tr
               class="MuiTableRow-root-id ProductTypeList-link-id MuiTableRow-hover-id"
-              data-test="id"
-              data-test-id="UHJvZHVjdFR5cGU6Mg=="
+              data-test-id="id-UHJvZHVjdFR5cGU6Mg=="
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -170907,7 +170711,7 @@ exports[`Storyshots Views / Product types / Product types list default 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeList-colName-id"
               >
                 <span
-                  data-test="name"
+                  data-test-id="name"
                 >
                   Mugs
                 </span>
@@ -170930,8 +170734,7 @@ exports[`Storyshots Views / Product types / Product types list default 1`] = `
             </tr>
             <tr
               class="MuiTableRow-root-id ProductTypeList-link-id MuiTableRow-hover-id"
-              data-test="id"
-              data-test-id="UHJvZHVjdFR5cGU6Mw=="
+              data-test-id="id-UHJvZHVjdFR5cGU6Mw=="
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -170974,7 +170777,7 @@ exports[`Storyshots Views / Product types / Product types list default 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeList-colName-id"
               >
                 <span
-                  data-test="name"
+                  data-test-id="name"
                 >
                   Coffee
                 </span>
@@ -170997,8 +170800,7 @@ exports[`Storyshots Views / Product types / Product types list default 1`] = `
             </tr>
             <tr
               class="MuiTableRow-root-id ProductTypeList-link-id MuiTableRow-hover-id"
-              data-test="id"
-              data-test-id="UHJvZHVjdFR5cGU6MQ=="
+              data-test-id="id-UHJvZHVjdFR5cGU6MQ=="
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -171041,7 +170843,7 @@ exports[`Storyshots Views / Product types / Product types list default 1`] = `
                 class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeList-colName-id"
               >
                 <span
-                  data-test="name"
+                  data-test-id="name"
                 >
                   T-Shirt
                 </span>
@@ -171098,7 +170900,7 @@ exports[`Storyshots Views / Product types / Product types list loading 1`] = `
         >
           <button
             class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
-            data-test-id="addProductType"
+            data-test-id="add-product-type"
             tabindex="0"
             type="button"
           >
@@ -171171,7 +170973,7 @@ exports[`Storyshots Views / Product types / Product types list loading 1`] = `
         </div>
         <div
           class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
-          data-test-id="searchInput"
+          data-test-id="search-input"
         >
           <div
             class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
@@ -171373,7 +171175,7 @@ exports[`Storyshots Views / Product types / Product types list loading 1`] = `
           >
             <tr
               class="MuiTableRow-root-id"
-              data-test="id"
+              data-test-id="id-undefined"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -171481,7 +171283,7 @@ exports[`Storyshots Views / Product types / Product types list no data 1`] = `
         >
           <button
             class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
-            data-test-id="addProductType"
+            data-test-id="add-product-type"
             tabindex="0"
             type="button"
           >
@@ -171554,7 +171356,7 @@ exports[`Storyshots Views / Product types / Product types list no data 1`] = `
         </div>
         <div
           class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
-          data-test-id="searchInput"
+          data-test-id="search-input"
         >
           <div
             class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
@@ -179787,8 +179589,7 @@ exports[`Storyshots Views / Products / Create product When loading 1`] = `
               />
               <div
                 class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-                data-test="richTextEditor"
-                data-test-id="description"
+                data-test-id="rich-text-editor-description"
               >
                 <label
                   class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiFormLabel-focused-id MuiInputLabel-focused-id"
@@ -179905,8 +179706,8 @@ exports[`Storyshots Views / Products / Create product When loading 1`] = `
           />
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="metadataEditor"
             data-test-expanded="true"
+            data-test-id="metadata-editor"
             data-test-is-private="false"
           >
             <div
@@ -179921,7 +179722,7 @@ exports[`Storyshots Views / Products / Create product When loading 1`] = `
                   Metadata
                   <button
                     class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test="expand"
+                    data-test-id="expand"
                     tabindex="0"
                     type="button"
                   >
@@ -179967,7 +179768,7 @@ exports[`Storyshots Views / Products / Create product When loading 1`] = `
             >
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-                data-test="addField"
+                data-test-id="add-field"
                 tabindex="0"
                 type="button"
               >
@@ -179984,8 +179785,8 @@ exports[`Storyshots Views / Products / Create product When loading 1`] = `
           />
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="metadataEditor"
             data-test-expanded="true"
+            data-test-id="metadata-editor"
             data-test-is-private="true"
           >
             <div
@@ -180000,7 +179801,7 @@ exports[`Storyshots Views / Products / Create product When loading 1`] = `
                   Private Metadata
                   <button
                     class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test="expand"
+                    data-test-id="expand"
                     tabindex="0"
                     type="button"
                   >
@@ -180046,7 +179847,7 @@ exports[`Storyshots Views / Products / Create product When loading 1`] = `
             >
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-                data-test="addField"
+                data-test-id="add-field"
                 tabindex="0"
                 type="button"
               >
@@ -180081,7 +179882,7 @@ exports[`Storyshots Views / Products / Create product When loading 1`] = `
             >
               <div
                 class="SingleAutocompleteSelectField-container-id"
-                data-test="product-type"
+                data-test-id="product-type"
               >
                 <div
                   class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -180150,7 +179951,7 @@ exports[`Storyshots Views / Products / Create product When loading 1`] = `
               />
               <div
                 class="SingleAutocompleteSelectField-container-id"
-                data-test="category"
+                data-test-id="category"
               >
                 <div
                   class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -180219,7 +180020,7 @@ exports[`Storyshots Views / Products / Create product When loading 1`] = `
               />
               <div
                 class="MultiAutocompleteSelectField-container-id"
-                data-test="collections"
+                data-test-id="collections"
               >
                 <div
                   class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -180335,7 +180136,7 @@ exports[`Storyshots Views / Products / Create product When loading 1`] = `
             >
               <label
                 class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
-                data-test="override-tax-type"
+                data-test-id="override-tax-type"
               >
                 <span
                   aria-disabled="true"
@@ -180384,7 +180185,7 @@ exports[`Storyshots Views / Products / Create product When loading 1`] = `
               />
               <label
                 class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
-                data-test="charge-taxes"
+                data-test-id="charge-taxes"
               >
                 <span
                   aria-disabled="true"
@@ -180527,8 +180328,7 @@ exports[`Storyshots Views / Products / Create product default 1`] = `
               />
               <div
                 class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-                data-test="richTextEditor"
-                data-test-id="description"
+                data-test-id="rich-text-editor-description"
               >
                 <label
                   class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-focused-id MuiInputLabel-focused-id"
@@ -180644,8 +180444,8 @@ exports[`Storyshots Views / Products / Create product default 1`] = `
           />
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="metadataEditor"
             data-test-expanded="true"
+            data-test-id="metadata-editor"
             data-test-is-private="false"
           >
             <div
@@ -180660,7 +180460,7 @@ exports[`Storyshots Views / Products / Create product default 1`] = `
                   Metadata
                   <button
                     class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test="expand"
+                    data-test-id="expand"
                     tabindex="0"
                     type="button"
                   >
@@ -180706,7 +180506,7 @@ exports[`Storyshots Views / Products / Create product default 1`] = `
             >
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-                data-test="addField"
+                data-test-id="add-field"
                 tabindex="0"
                 type="button"
               >
@@ -180723,8 +180523,8 @@ exports[`Storyshots Views / Products / Create product default 1`] = `
           />
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="metadataEditor"
             data-test-expanded="true"
+            data-test-id="metadata-editor"
             data-test-is-private="true"
           >
             <div
@@ -180739,7 +180539,7 @@ exports[`Storyshots Views / Products / Create product default 1`] = `
                   Private Metadata
                   <button
                     class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test="expand"
+                    data-test-id="expand"
                     tabindex="0"
                     type="button"
                   >
@@ -180785,7 +180585,7 @@ exports[`Storyshots Views / Products / Create product default 1`] = `
             >
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-                data-test="addField"
+                data-test-id="add-field"
                 tabindex="0"
                 type="button"
               >
@@ -180820,7 +180620,7 @@ exports[`Storyshots Views / Products / Create product default 1`] = `
             >
               <div
                 class="SingleAutocompleteSelectField-container-id"
-                data-test="product-type"
+                data-test-id="product-type"
               >
                 <div
                   class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -180888,7 +180688,7 @@ exports[`Storyshots Views / Products / Create product default 1`] = `
               />
               <div
                 class="SingleAutocompleteSelectField-container-id"
-                data-test="category"
+                data-test-id="category"
               >
                 <div
                   class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -180956,7 +180756,7 @@ exports[`Storyshots Views / Products / Create product default 1`] = `
               />
               <div
                 class="MultiAutocompleteSelectField-container-id"
-                data-test="collections"
+                data-test-id="collections"
               >
                 <div
                   class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -181072,7 +180872,7 @@ exports[`Storyshots Views / Products / Create product default 1`] = `
             >
               <label
                 class="MuiFormControlLabel-root-id"
-                data-test="override-tax-type"
+                data-test-id="override-tax-type"
               >
                 <span
                   aria-disabled="false"
@@ -181119,7 +180919,7 @@ exports[`Storyshots Views / Products / Create product default 1`] = `
               />
               <label
                 class="MuiFormControlLabel-root-id"
-                data-test="charge-taxes"
+                data-test-id="charge-taxes"
               >
                 <span
                   aria-disabled="false"
@@ -181265,8 +181065,7 @@ exports[`Storyshots Views / Products / Create product form errors 1`] = `
               />
               <div
                 class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-                data-test="richTextEditor"
-                data-test-id="description"
+                data-test-id="rich-text-editor-description"
               >
                 <label
                   class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-focused-id MuiInputLabel-focused-id"
@@ -181365,7 +181164,7 @@ exports[`Storyshots Views / Products / Create product form errors 1`] = `
                 </div>
                 <button
                   class="MuiButtonBase-root-id IconButton-secondary-id Attributes-expansionBarButton-id IconButton-hoverOutline-id"
-                  data-test="attributes-expand"
+                  data-test-id="attributes-expand"
                   tabindex="0"
                   type="button"
                 >
@@ -181389,7 +181188,7 @@ exports[`Storyshots Views / Products / Create product form errors 1`] = `
               >
                 <div
                   class="BasicAttributeRow-attributeSectionLabel-id"
-                  data-test="attribute-label"
+                  data-test-id="attribute-label"
                 >
                   <div
                     class="MuiTypography-root-id MuiTypography-body1-id"
@@ -181399,7 +181198,7 @@ exports[`Storyshots Views / Products / Create product form errors 1`] = `
                 </div>
                 <div
                   class="BasicAttributeRow-value-id"
-                  data-test="attribute-value"
+                  data-test-id="attribute-value"
                 >
                   <div
                     class="SingleAutocompleteSelectField-container-id"
@@ -181518,8 +181317,8 @@ exports[`Storyshots Views / Products / Create product form errors 1`] = `
           />
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="metadataEditor"
             data-test-expanded="true"
+            data-test-id="metadata-editor"
             data-test-is-private="false"
           >
             <div
@@ -181534,7 +181333,7 @@ exports[`Storyshots Views / Products / Create product form errors 1`] = `
                   Metadata
                   <button
                     class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test="expand"
+                    data-test-id="expand"
                     tabindex="0"
                     type="button"
                   >
@@ -181580,7 +181379,7 @@ exports[`Storyshots Views / Products / Create product form errors 1`] = `
             >
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-                data-test="addField"
+                data-test-id="add-field"
                 tabindex="0"
                 type="button"
               >
@@ -181597,8 +181396,8 @@ exports[`Storyshots Views / Products / Create product form errors 1`] = `
           />
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="metadataEditor"
             data-test-expanded="true"
+            data-test-id="metadata-editor"
             data-test-is-private="true"
           >
             <div
@@ -181613,7 +181412,7 @@ exports[`Storyshots Views / Products / Create product form errors 1`] = `
                   Private Metadata
                   <button
                     class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test="expand"
+                    data-test-id="expand"
                     tabindex="0"
                     type="button"
                   >
@@ -181659,7 +181458,7 @@ exports[`Storyshots Views / Products / Create product form errors 1`] = `
             >
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-                data-test="addField"
+                data-test-id="add-field"
                 tabindex="0"
                 type="button"
               >
@@ -181694,7 +181493,7 @@ exports[`Storyshots Views / Products / Create product form errors 1`] = `
             >
               <div
                 class="SingleAutocompleteSelectField-container-id"
-                data-test="product-type"
+                data-test-id="product-type"
               >
                 <div
                   class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -181767,7 +181566,7 @@ exports[`Storyshots Views / Products / Create product form errors 1`] = `
               />
               <div
                 class="SingleAutocompleteSelectField-container-id"
-                data-test="category"
+                data-test-id="category"
               >
                 <div
                   class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -181840,7 +181639,7 @@ exports[`Storyshots Views / Products / Create product form errors 1`] = `
               />
               <div
                 class="MultiAutocompleteSelectField-container-id"
-                data-test="collections"
+                data-test-id="collections"
               >
                 <div
                   class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -181956,7 +181755,7 @@ exports[`Storyshots Views / Products / Create product form errors 1`] = `
             >
               <label
                 class="MuiFormControlLabel-root-id"
-                data-test="override-tax-type"
+                data-test-id="override-tax-type"
               >
                 <span
                   aria-disabled="false"
@@ -182003,7 +181802,7 @@ exports[`Storyshots Views / Products / Create product form errors 1`] = `
               />
               <label
                 class="MuiFormControlLabel-root-id"
-                data-test="charge-taxes"
+                data-test-id="charge-taxes"
               >
                 <span
                   aria-disabled="false"
@@ -182118,7 +181917,7 @@ exports[`Storyshots Views / Products / Create product variant add first variant
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductVariantNavigation-colAvatar-id ProductVariantNavigation-tabActive-id ProductVariantNavigation-noHandle-id ProductVariantNavigation-firstVariant-id"
                       colspan="2"
-                      data-test-id="tableCellAvatar"
+                      data-test-id="table-cell-avatar"
                     >
                       <div
                         class="Avatar-content-id Avatar-alignRight-id"
@@ -182187,7 +181986,7 @@ exports[`Storyshots Views / Products / Create product variant add first variant
                 </div>
                 <button
                   class="MuiButtonBase-root-id IconButton-secondary-id Attributes-expansionBarButton-id IconButton-hoverOutline-id"
-                  data-test="attributes-expand"
+                  data-test-id="attributes-expand"
                   tabindex="0"
                   type="button"
                 >
@@ -182211,7 +182010,7 @@ exports[`Storyshots Views / Products / Create product variant add first variant
               >
                 <div
                   class="BasicAttributeRow-attributeSectionLabel-id"
-                  data-test="attribute-label"
+                  data-test-id="attribute-label"
                 >
                   <div
                     class="MuiTypography-root-id MuiTypography-body1-id"
@@ -182221,7 +182020,7 @@ exports[`Storyshots Views / Products / Create product variant add first variant
                 </div>
                 <div
                   class="BasicAttributeRow-value-id"
-                  data-test="attribute-value"
+                  data-test-id="attribute-value"
                 >
                   <div
                     class="AttributeRow-fileField-id"
@@ -182229,7 +182028,7 @@ exports[`Storyshots Views / Products / Create product variant add first variant
                     <div>
                       <button
                         class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-                        data-test="button-upload-file"
+                        data-test-id="button-upload-file"
                         tabindex="0"
                         type="button"
                       >
@@ -182243,7 +182042,7 @@ exports[`Storyshots Views / Products / Create product variant add first variant
                   </div>
                   <input
                     class="FileUploadField-fileField-id"
-                    data-test="upload-file-input"
+                    data-test-id="upload-file-input"
                     id="fileUpload"
                     name="attribute:Attachment"
                     type="file"
@@ -182288,7 +182087,7 @@ exports[`Storyshots Views / Products / Create product variant add first variant
                 </div>
                 <button
                   class="MuiButtonBase-root-id IconButton-secondary-id Attributes-expansionBarButton-id IconButton-hoverOutline-id"
-                  data-test="attributes-expand"
+                  data-test-id="attributes-expand"
                   tabindex="0"
                   type="button"
                 >
@@ -182312,7 +182111,7 @@ exports[`Storyshots Views / Products / Create product variant add first variant
               >
                 <div
                   class="BasicAttributeRow-attributeSectionLabel-id"
-                  data-test="attribute-label"
+                  data-test-id="attribute-label"
                 >
                   <div
                     class="MuiTypography-root-id MuiTypography-body1-id"
@@ -182322,7 +182121,7 @@ exports[`Storyshots Views / Products / Create product variant add first variant
                 </div>
                 <div
                   class="BasicAttributeRow-value-id"
-                  data-test="attribute-value"
+                  data-test-id="attribute-value"
                 >
                   <div
                     class="SingleAutocompleteSelectField-container-id"
@@ -182829,8 +182628,8 @@ exports[`Storyshots Views / Products / Create product variant add first variant
           />
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="metadataEditor"
             data-test-expanded="true"
+            data-test-id="metadata-editor"
             data-test-is-private="false"
           >
             <div
@@ -182845,7 +182644,7 @@ exports[`Storyshots Views / Products / Create product variant add first variant
                   Metadata
                   <button
                     class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test="expand"
+                    data-test-id="expand"
                     tabindex="0"
                     type="button"
                   >
@@ -182891,7 +182690,7 @@ exports[`Storyshots Views / Products / Create product variant add first variant
             >
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-                data-test="addField"
+                data-test-id="add-field"
                 tabindex="0"
                 type="button"
               >
@@ -182908,8 +182707,8 @@ exports[`Storyshots Views / Products / Create product variant add first variant
           />
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="metadataEditor"
             data-test-expanded="true"
+            data-test-id="metadata-editor"
             data-test-is-private="true"
           >
             <div
@@ -182924,7 +182723,7 @@ exports[`Storyshots Views / Products / Create product variant add first variant
                   Private Metadata
                   <button
                     class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test="expand"
+                    data-test-id="expand"
                     tabindex="0"
                     type="button"
                   >
@@ -182970,7 +182769,7 @@ exports[`Storyshots Views / Products / Create product variant add first variant
             >
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-                data-test="addField"
+                data-test-id="add-field"
                 tabindex="0"
                 type="button"
               >
@@ -183069,7 +182868,7 @@ exports[`Storyshots Views / Products / Create product variant default 1`] = `
                     </td>
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductVariantNavigation-colAvatar-id"
-                      data-test-id="tableCellAvatar"
+                      data-test-id="table-cell-avatar"
                       thumbnail="placeholder255x255.png"
                     >
                       <div
@@ -183116,7 +182915,7 @@ exports[`Storyshots Views / Products / Create product variant default 1`] = `
                     </td>
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductVariantNavigation-colAvatar-id"
-                      data-test-id="tableCellAvatar"
+                      data-test-id="table-cell-avatar"
                       thumbnail="placeholder255x255.png"
                     >
                       <div
@@ -183147,7 +182946,7 @@ exports[`Storyshots Views / Products / Create product variant default 1`] = `
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductVariantNavigation-colAvatar-id ProductVariantNavigation-tabActive-id ProductVariantNavigation-noHandle-id"
                       colspan="2"
-                      data-test-id="tableCellAvatar"
+                      data-test-id="table-cell-avatar"
                     >
                       <div
                         class="Avatar-content-id Avatar-alignRight-id"
@@ -183216,7 +183015,7 @@ exports[`Storyshots Views / Products / Create product variant default 1`] = `
                 </div>
                 <button
                   class="MuiButtonBase-root-id IconButton-secondary-id Attributes-expansionBarButton-id IconButton-hoverOutline-id"
-                  data-test="attributes-expand"
+                  data-test-id="attributes-expand"
                   tabindex="0"
                   type="button"
                 >
@@ -183240,7 +183039,7 @@ exports[`Storyshots Views / Products / Create product variant default 1`] = `
               >
                 <div
                   class="BasicAttributeRow-attributeSectionLabel-id"
-                  data-test="attribute-label"
+                  data-test-id="attribute-label"
                 >
                   <div
                     class="MuiTypography-root-id MuiTypography-body1-id"
@@ -183250,7 +183049,7 @@ exports[`Storyshots Views / Products / Create product variant default 1`] = `
                 </div>
                 <div
                   class="BasicAttributeRow-value-id"
-                  data-test="attribute-value"
+                  data-test-id="attribute-value"
                 >
                   <div
                     class="AttributeRow-fileField-id"
@@ -183258,7 +183057,7 @@ exports[`Storyshots Views / Products / Create product variant default 1`] = `
                     <div>
                       <button
                         class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-                        data-test="button-upload-file"
+                        data-test-id="button-upload-file"
                         tabindex="0"
                         type="button"
                       >
@@ -183272,7 +183071,7 @@ exports[`Storyshots Views / Products / Create product variant default 1`] = `
                   </div>
                   <input
                     class="FileUploadField-fileField-id"
-                    data-test="upload-file-input"
+                    data-test-id="upload-file-input"
                     id="fileUpload"
                     name="attribute:Attachment"
                     type="file"
@@ -183317,7 +183116,7 @@ exports[`Storyshots Views / Products / Create product variant default 1`] = `
                 </div>
                 <button
                   class="MuiButtonBase-root-id IconButton-secondary-id Attributes-expansionBarButton-id IconButton-hoverOutline-id"
-                  data-test="attributes-expand"
+                  data-test-id="attributes-expand"
                   tabindex="0"
                   type="button"
                 >
@@ -183341,7 +183140,7 @@ exports[`Storyshots Views / Products / Create product variant default 1`] = `
               >
                 <div
                   class="BasicAttributeRow-attributeSectionLabel-id"
-                  data-test="attribute-label"
+                  data-test-id="attribute-label"
                 >
                   <div
                     class="MuiTypography-root-id MuiTypography-body1-id"
@@ -183351,7 +183150,7 @@ exports[`Storyshots Views / Products / Create product variant default 1`] = `
                 </div>
                 <div
                   class="BasicAttributeRow-value-id"
-                  data-test="attribute-value"
+                  data-test-id="attribute-value"
                 >
                   <div
                     class="SingleAutocompleteSelectField-container-id"
@@ -183858,8 +183657,8 @@ exports[`Storyshots Views / Products / Create product variant default 1`] = `
           />
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="metadataEditor"
             data-test-expanded="true"
+            data-test-id="metadata-editor"
             data-test-is-private="false"
           >
             <div
@@ -183874,7 +183673,7 @@ exports[`Storyshots Views / Products / Create product variant default 1`] = `
                   Metadata
                   <button
                     class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test="expand"
+                    data-test-id="expand"
                     tabindex="0"
                     type="button"
                   >
@@ -183920,7 +183719,7 @@ exports[`Storyshots Views / Products / Create product variant default 1`] = `
             >
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-                data-test="addField"
+                data-test-id="add-field"
                 tabindex="0"
                 type="button"
               >
@@ -183937,8 +183736,8 @@ exports[`Storyshots Views / Products / Create product variant default 1`] = `
           />
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="metadataEditor"
             data-test-expanded="true"
+            data-test-id="metadata-editor"
             data-test-is-private="true"
           >
             <div
@@ -183953,7 +183752,7 @@ exports[`Storyshots Views / Products / Create product variant default 1`] = `
                   Private Metadata
                   <button
                     class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test="expand"
+                    data-test-id="expand"
                     tabindex="0"
                     type="button"
                   >
@@ -183999,7 +183798,7 @@ exports[`Storyshots Views / Products / Create product variant default 1`] = `
             >
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-                data-test="addField"
+                data-test-id="add-field"
                 tabindex="0"
                 type="button"
               >
@@ -184098,7 +183897,7 @@ exports[`Storyshots Views / Products / Create product variant no warehouses 1`]
                     </td>
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductVariantNavigation-colAvatar-id"
-                      data-test-id="tableCellAvatar"
+                      data-test-id="table-cell-avatar"
                       thumbnail="placeholder255x255.png"
                     >
                       <div
@@ -184145,7 +183944,7 @@ exports[`Storyshots Views / Products / Create product variant no warehouses 1`]
                     </td>
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductVariantNavigation-colAvatar-id"
-                      data-test-id="tableCellAvatar"
+                      data-test-id="table-cell-avatar"
                       thumbnail="placeholder255x255.png"
                     >
                       <div
@@ -184176,7 +183975,7 @@ exports[`Storyshots Views / Products / Create product variant no warehouses 1`]
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductVariantNavigation-colAvatar-id ProductVariantNavigation-tabActive-id ProductVariantNavigation-noHandle-id"
                       colspan="2"
-                      data-test-id="tableCellAvatar"
+                      data-test-id="table-cell-avatar"
                     >
                       <div
                         class="Avatar-content-id Avatar-alignRight-id"
@@ -184245,7 +184044,7 @@ exports[`Storyshots Views / Products / Create product variant no warehouses 1`]
                 </div>
                 <button
                   class="MuiButtonBase-root-id IconButton-secondary-id Attributes-expansionBarButton-id IconButton-hoverOutline-id"
-                  data-test="attributes-expand"
+                  data-test-id="attributes-expand"
                   tabindex="0"
                   type="button"
                 >
@@ -184269,7 +184068,7 @@ exports[`Storyshots Views / Products / Create product variant no warehouses 1`]
               >
                 <div
                   class="BasicAttributeRow-attributeSectionLabel-id"
-                  data-test="attribute-label"
+                  data-test-id="attribute-label"
                 >
                   <div
                     class="MuiTypography-root-id MuiTypography-body1-id"
@@ -184279,7 +184078,7 @@ exports[`Storyshots Views / Products / Create product variant no warehouses 1`]
                 </div>
                 <div
                   class="BasicAttributeRow-value-id"
-                  data-test="attribute-value"
+                  data-test-id="attribute-value"
                 >
                   <div
                     class="AttributeRow-fileField-id"
@@ -184287,7 +184086,7 @@ exports[`Storyshots Views / Products / Create product variant no warehouses 1`]
                     <div>
                       <button
                         class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-                        data-test="button-upload-file"
+                        data-test-id="button-upload-file"
                         tabindex="0"
                         type="button"
                       >
@@ -184301,7 +184100,7 @@ exports[`Storyshots Views / Products / Create product variant no warehouses 1`]
                   </div>
                   <input
                     class="FileUploadField-fileField-id"
-                    data-test="upload-file-input"
+                    data-test-id="upload-file-input"
                     id="fileUpload"
                     name="attribute:Attachment"
                     type="file"
@@ -184346,7 +184145,7 @@ exports[`Storyshots Views / Products / Create product variant no warehouses 1`]
                 </div>
                 <button
                   class="MuiButtonBase-root-id IconButton-secondary-id Attributes-expansionBarButton-id IconButton-hoverOutline-id"
-                  data-test="attributes-expand"
+                  data-test-id="attributes-expand"
                   tabindex="0"
                   type="button"
                 >
@@ -184370,7 +184169,7 @@ exports[`Storyshots Views / Products / Create product variant no warehouses 1`]
               >
                 <div
                   class="BasicAttributeRow-attributeSectionLabel-id"
-                  data-test="attribute-label"
+                  data-test-id="attribute-label"
                 >
                   <div
                     class="MuiTypography-root-id MuiTypography-body1-id"
@@ -184380,7 +184179,7 @@ exports[`Storyshots Views / Products / Create product variant no warehouses 1`]
                 </div>
                 <div
                   class="BasicAttributeRow-value-id"
-                  data-test="attribute-value"
+                  data-test-id="attribute-value"
                 >
                   <div
                     class="SingleAutocompleteSelectField-container-id"
@@ -184807,8 +184606,8 @@ exports[`Storyshots Views / Products / Create product variant no warehouses 1`]
           />
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="metadataEditor"
             data-test-expanded="true"
+            data-test-id="metadata-editor"
             data-test-is-private="false"
           >
             <div
@@ -184823,7 +184622,7 @@ exports[`Storyshots Views / Products / Create product variant no warehouses 1`]
                   Metadata
                   <button
                     class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test="expand"
+                    data-test-id="expand"
                     tabindex="0"
                     type="button"
                   >
@@ -184869,7 +184668,7 @@ exports[`Storyshots Views / Products / Create product variant no warehouses 1`]
             >
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-                data-test="addField"
+                data-test-id="add-field"
                 tabindex="0"
                 type="button"
               >
@@ -184886,8 +184685,8 @@ exports[`Storyshots Views / Products / Create product variant no warehouses 1`]
           />
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="metadataEditor"
             data-test-expanded="true"
+            data-test-id="metadata-editor"
             data-test-is-private="true"
           >
             <div
@@ -184902,7 +184701,7 @@ exports[`Storyshots Views / Products / Create product variant no warehouses 1`]
                   Private Metadata
                   <button
                     class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test="expand"
+                    data-test-id="expand"
                     tabindex="0"
                     type="button"
                   >
@@ -184948,7 +184747,7 @@ exports[`Storyshots Views / Products / Create product variant no warehouses 1`]
             >
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-                data-test="addField"
+                data-test-id="add-field"
                 tabindex="0"
                 type="button"
               >
@@ -185047,7 +184846,7 @@ exports[`Storyshots Views / Products / Create product variant when loading data
                     </td>
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductVariantNavigation-colAvatar-id"
-                      data-test-id="tableCellAvatar"
+                      data-test-id="table-cell-avatar"
                     >
                       <div
                         class="Avatar-content-id"
@@ -185091,7 +184890,7 @@ exports[`Storyshots Views / Products / Create product variant when loading data
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductVariantNavigation-colAvatar-id ProductVariantNavigation-tabActive-id ProductVariantNavigation-noHandle-id"
                       colspan="2"
-                      data-test-id="tableCellAvatar"
+                      data-test-id="table-cell-avatar"
                     >
                       <div
                         class="Avatar-content-id Avatar-alignRight-id"
@@ -185160,7 +184959,7 @@ exports[`Storyshots Views / Products / Create product variant when loading data
                 </div>
                 <button
                   class="MuiButtonBase-root-id IconButton-secondary-id Attributes-expansionBarButton-id IconButton-hoverOutline-id"
-                  data-test="attributes-expand"
+                  data-test-id="attributes-expand"
                   tabindex="0"
                   type="button"
                 >
@@ -185214,7 +185013,7 @@ exports[`Storyshots Views / Products / Create product variant when loading data
                 </div>
                 <button
                   class="MuiButtonBase-root-id IconButton-secondary-id Attributes-expansionBarButton-id IconButton-hoverOutline-id"
-                  data-test="attributes-expand"
+                  data-test-id="attributes-expand"
                   tabindex="0"
                   type="button"
                 >
@@ -185682,8 +185481,8 @@ exports[`Storyshots Views / Products / Create product variant when loading data
           />
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="metadataEditor"
             data-test-expanded="true"
+            data-test-id="metadata-editor"
             data-test-is-private="false"
           >
             <div
@@ -185698,7 +185497,7 @@ exports[`Storyshots Views / Products / Create product variant when loading data
                   Metadata
                   <button
                     class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test="expand"
+                    data-test-id="expand"
                     tabindex="0"
                     type="button"
                   >
@@ -185744,7 +185543,7 @@ exports[`Storyshots Views / Products / Create product variant when loading data
             >
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-                data-test="addField"
+                data-test-id="add-field"
                 tabindex="0"
                 type="button"
               >
@@ -185761,8 +185560,8 @@ exports[`Storyshots Views / Products / Create product variant when loading data
           />
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="metadataEditor"
             data-test-expanded="true"
+            data-test-id="metadata-editor"
             data-test-is-private="true"
           >
             <div
@@ -185777,7 +185576,7 @@ exports[`Storyshots Views / Products / Create product variant when loading data
                   Private Metadata
                   <button
                     class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test="expand"
+                    data-test-id="expand"
                     tabindex="0"
                     type="button"
                   >
@@ -185823,7 +185622,7 @@ exports[`Storyshots Views / Products / Create product variant when loading data
             >
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-                data-test="addField"
+                data-test-id="add-field"
                 tabindex="0"
                 type="button"
               >
@@ -185922,7 +185721,7 @@ exports[`Storyshots Views / Products / Create product variant with errors 1`] =
                     </td>
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductVariantNavigation-colAvatar-id"
-                      data-test-id="tableCellAvatar"
+                      data-test-id="table-cell-avatar"
                       thumbnail="placeholder255x255.png"
                     >
                       <div
@@ -185969,7 +185768,7 @@ exports[`Storyshots Views / Products / Create product variant with errors 1`] =
                     </td>
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductVariantNavigation-colAvatar-id"
-                      data-test-id="tableCellAvatar"
+                      data-test-id="table-cell-avatar"
                       thumbnail="placeholder255x255.png"
                     >
                       <div
@@ -186000,7 +185799,7 @@ exports[`Storyshots Views / Products / Create product variant with errors 1`] =
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductVariantNavigation-colAvatar-id ProductVariantNavigation-tabActive-id ProductVariantNavigation-noHandle-id"
                       colspan="2"
-                      data-test-id="tableCellAvatar"
+                      data-test-id="table-cell-avatar"
                     >
                       <div
                         class="Avatar-content-id Avatar-alignRight-id"
@@ -186069,7 +185868,7 @@ exports[`Storyshots Views / Products / Create product variant with errors 1`] =
                 </div>
                 <button
                   class="MuiButtonBase-root-id IconButton-secondary-id Attributes-expansionBarButton-id IconButton-hoverOutline-id"
-                  data-test="attributes-expand"
+                  data-test-id="attributes-expand"
                   tabindex="0"
                   type="button"
                 >
@@ -186093,7 +185892,7 @@ exports[`Storyshots Views / Products / Create product variant with errors 1`] =
               >
                 <div
                   class="BasicAttributeRow-attributeSectionLabel-id"
-                  data-test="attribute-label"
+                  data-test-id="attribute-label"
                 >
                   <div
                     class="MuiTypography-root-id MuiTypography-body1-id"
@@ -186103,7 +185902,7 @@ exports[`Storyshots Views / Products / Create product variant with errors 1`] =
                 </div>
                 <div
                   class="BasicAttributeRow-value-id"
-                  data-test="attribute-value"
+                  data-test-id="attribute-value"
                 >
                   <div
                     class="AttributeRow-fileField-id"
@@ -186111,7 +185910,7 @@ exports[`Storyshots Views / Products / Create product variant with errors 1`] =
                     <div>
                       <button
                         class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-                        data-test="button-upload-file"
+                        data-test-id="button-upload-file"
                         tabindex="0"
                         type="button"
                       >
@@ -186130,7 +185929,7 @@ exports[`Storyshots Views / Products / Create product variant with errors 1`] =
                   </div>
                   <input
                     class="FileUploadField-fileField-id"
-                    data-test="upload-file-input"
+                    data-test-id="upload-file-input"
                     id="fileUpload"
                     name="attribute:Attachment"
                     type="file"
@@ -186175,7 +185974,7 @@ exports[`Storyshots Views / Products / Create product variant with errors 1`] =
                 </div>
                 <button
                   class="MuiButtonBase-root-id IconButton-secondary-id Attributes-expansionBarButton-id IconButton-hoverOutline-id"
-                  data-test="attributes-expand"
+                  data-test-id="attributes-expand"
                   tabindex="0"
                   type="button"
                 >
@@ -186199,7 +185998,7 @@ exports[`Storyshots Views / Products / Create product variant with errors 1`] =
               >
                 <div
                   class="BasicAttributeRow-attributeSectionLabel-id"
-                  data-test="attribute-label"
+                  data-test-id="attribute-label"
                 >
                   <div
                     class="MuiTypography-root-id MuiTypography-body1-id"
@@ -186209,7 +186008,7 @@ exports[`Storyshots Views / Products / Create product variant with errors 1`] =
                 </div>
                 <div
                   class="BasicAttributeRow-value-id"
-                  data-test="attribute-value"
+                  data-test-id="attribute-value"
                 >
                   <div
                     class="SingleAutocompleteSelectField-container-id"
@@ -186721,8 +186520,8 @@ exports[`Storyshots Views / Products / Create product variant with errors 1`] =
           />
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="metadataEditor"
             data-test-expanded="true"
+            data-test-id="metadata-editor"
             data-test-is-private="false"
           >
             <div
@@ -186737,7 +186536,7 @@ exports[`Storyshots Views / Products / Create product variant with errors 1`] =
                   Metadata
                   <button
                     class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test="expand"
+                    data-test-id="expand"
                     tabindex="0"
                     type="button"
                   >
@@ -186783,7 +186582,7 @@ exports[`Storyshots Views / Products / Create product variant with errors 1`] =
             >
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-                data-test="addField"
+                data-test-id="add-field"
                 tabindex="0"
                 type="button"
               >
@@ -186800,8 +186599,8 @@ exports[`Storyshots Views / Products / Create product variant with errors 1`] =
           />
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="metadataEditor"
             data-test-expanded="true"
+            data-test-id="metadata-editor"
             data-test-is-private="true"
           >
             <div
@@ -186816,7 +186615,7 @@ exports[`Storyshots Views / Products / Create product variant with errors 1`] =
                   Private Metadata
                   <button
                     class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test="expand"
+                    data-test-id="expand"
                     tabindex="0"
                     type="button"
                   >
@@ -186862,7 +186661,7 @@ exports[`Storyshots Views / Products / Create product variant with errors 1`] =
             >
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-                data-test="addField"
+                data-test-id="add-field"
                 tabindex="0"
                 type="button"
               >
@@ -186994,8 +186793,7 @@ exports[`Storyshots Views / Products / Product edit form errors 1`] = `
               />
               <div
                 class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-                data-test="richTextEditor"
-                data-test-id="description"
+                data-test-id="rich-text-editor-description"
               >
                 <label
                   class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-focused-id MuiInputLabel-focused-id"
@@ -187081,7 +186879,7 @@ exports[`Storyshots Views / Products / Product edit form errors 1`] = `
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                  data-test="button-upload-image"
+                  data-test-id="button-upload-image"
                   tabindex="0"
                   type="button"
                 >
@@ -187115,7 +186913,7 @@ exports[`Storyshots Views / Products / Product edit form errors 1`] = `
                 >
                   <div
                     class="MediaTile-mediaContainer-id"
-                    data-test="product-image"
+                    data-test-id="product-image"
                   >
                     <div
                       class="MediaTile-mediaOverlay-id"
@@ -187132,7 +186930,7 @@ exports[`Storyshots Views / Products / Product edit form errors 1`] = `
                   </div>
                   <div
                     class="MediaTile-mediaContainer-id"
-                    data-test="product-image"
+                    data-test-id="product-image"
                   >
                     <div
                       class="MediaTile-mediaOverlay-id"
@@ -187149,7 +186947,7 @@ exports[`Storyshots Views / Products / Product edit form errors 1`] = `
                   </div>
                   <div
                     class="MediaTile-mediaContainer-id"
-                    data-test="product-image"
+                    data-test-id="product-image"
                   >
                     <div
                       class="MediaTile-mediaOverlay-id"
@@ -187166,7 +186964,7 @@ exports[`Storyshots Views / Products / Product edit form errors 1`] = `
                   </div>
                   <div
                     class="MediaTile-mediaContainer-id"
-                    data-test="product-image"
+                    data-test-id="product-image"
                   >
                     <div
                       class="MediaTile-mediaOverlay-id"
@@ -187183,7 +186981,7 @@ exports[`Storyshots Views / Products / Product edit form errors 1`] = `
                   </div>
                   <div
                     class="MediaTile-mediaContainer-id"
-                    data-test="product-image"
+                    data-test-id="product-image"
                   >
                     <div
                       class="MediaTile-mediaOverlay-id"
@@ -187238,7 +187036,7 @@ exports[`Storyshots Views / Products / Product edit form errors 1`] = `
                 </div>
                 <button
                   class="MuiButtonBase-root-id IconButton-secondary-id Attributes-expansionBarButton-id IconButton-hoverOutline-id"
-                  data-test="attributes-expand"
+                  data-test-id="attributes-expand"
                   tabindex="0"
                   type="button"
                 >
@@ -187262,7 +187060,7 @@ exports[`Storyshots Views / Products / Product edit form errors 1`] = `
               >
                 <div
                   class="BasicAttributeRow-attributeSectionLabel-id"
-                  data-test="attribute-label"
+                  data-test-id="attribute-label"
                 >
                   <div
                     class="MuiTypography-root-id MuiTypography-body1-id"
@@ -187272,7 +187070,7 @@ exports[`Storyshots Views / Products / Product edit form errors 1`] = `
                 </div>
                 <div
                   class="BasicAttributeRow-value-id"
-                  data-test="attribute-value"
+                  data-test-id="attribute-value"
                 >
                   <div
                     class="SingleAutocompleteSelectField-container-id"
@@ -187347,7 +187145,7 @@ exports[`Storyshots Views / Products / Product edit form errors 1`] = `
               >
                 <div
                   class="BasicAttributeRow-attributeSectionLabel-id"
-                  data-test="attribute-label"
+                  data-test-id="attribute-label"
                 >
                   <div
                     class="MuiTypography-root-id MuiTypography-body1-id"
@@ -187357,7 +187155,7 @@ exports[`Storyshots Views / Products / Product edit form errors 1`] = `
                 </div>
                 <div
                   class="BasicAttributeRow-value-id"
-                  data-test="attribute-value"
+                  data-test-id="attribute-value"
                 >
                   <div
                     class="MultiAutocompleteSelectField-container-id"
@@ -187478,7 +187276,7 @@ exports[`Storyshots Views / Products / Product edit form errors 1`] = `
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                  data-test="button-add-variant"
+                  data-test-id="button-add-variant"
                   tabindex="0"
                   type="button"
                 >
@@ -187685,7 +187483,7 @@ exports[`Storyshots Views / Products / Product edit form errors 1`] = `
                     </td>
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colName-id"
-                      data-test="name"
+                      data-test-id="name"
                     >
                       Cordoba Oro
                       <span
@@ -187696,19 +187494,19 @@ exports[`Storyshots Views / Products / Product edit form errors 1`] = `
                     </td>
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colSku-id"
-                      data-test="sku"
+                      data-test-id="sku"
                     >
                       87192-94370
                     </td>
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colInventory-id"
-                      data-test="inventory"
+                      data-test-id="inventory"
                     >
                       In preorder
                     </td>
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colActions-id"
-                      data-test="actions"
+                      data-test-id="actions"
                     />
                   </tr>
                   <tr
@@ -187771,35 +187569,35 @@ exports[`Storyshots Views / Products / Product edit form errors 1`] = `
                     </td>
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colName-id"
-                      data-test="name"
+                      data-test-id="name"
                     >
                       silver
                     </td>
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colSku-id"
-                      data-test="sku"
+                      data-test-id="sku"
                     >
                       69055-15190
                     </td>
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colInventory-id"
-                      data-test="inventory"
+                      data-test-id="inventory"
                     >
                       In preorder
                     </td>
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colActions-id"
-                      data-test="actions"
+                      data-test-id="actions"
                     >
                       <div
-                        data-test="menu"
+                        data-test-id="menu"
                       >
                         <button
                           aria-haspopup="true"
                           aria-label="More"
                           class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                           color="primary"
-                          data-test-id="showMoreButton"
+                          data-test-id="show-more-button"
                           tabindex="0"
                           type="button"
                         >
@@ -187874,8 +187672,8 @@ exports[`Storyshots Views / Products / Product edit form errors 1`] = `
           />
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="metadataEditor"
             data-test-expanded="true"
+            data-test-id="metadata-editor"
             data-test-is-private="false"
           >
             <div
@@ -187890,7 +187688,7 @@ exports[`Storyshots Views / Products / Product edit form errors 1`] = `
                   Metadata
                   <button
                     class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test="expand"
+                    data-test-id="expand"
                     tabindex="0"
                     type="button"
                   >
@@ -187962,7 +187760,7 @@ exports[`Storyshots Views / Products / Product edit form errors 1`] = `
               >
                 <tr
                   class="MuiTableRow-root-id MuiTableRow-hover-id"
-                  data-test="field"
+                  data-test-id="field"
                 >
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colName-id"
@@ -188043,8 +187841,7 @@ exports[`Storyshots Views / Products / Product edit form errors 1`] = `
                   >
                     <button
                       class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                      data-test="deleteField"
-                      data-test-id="0"
+                      data-test-id="delete-field-0"
                       tabindex="0"
                       type="button"
                     >
@@ -188071,7 +187868,7 @@ exports[`Storyshots Views / Products / Product edit form errors 1`] = `
             >
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-                data-test="addField"
+                data-test-id="add-field"
                 tabindex="0"
                 type="button"
               >
@@ -188088,8 +187885,8 @@ exports[`Storyshots Views / Products / Product edit form errors 1`] = `
           />
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="metadataEditor"
             data-test-expanded="true"
+            data-test-id="metadata-editor"
             data-test-is-private="true"
           >
             <div
@@ -188104,7 +187901,7 @@ exports[`Storyshots Views / Products / Product edit form errors 1`] = `
                   Private Metadata
                   <button
                     class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test="expand"
+                    data-test-id="expand"
                     tabindex="0"
                     type="button"
                   >
@@ -188150,7 +187947,7 @@ exports[`Storyshots Views / Products / Product edit form errors 1`] = `
             >
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-                data-test="addField"
+                data-test-id="add-field"
                 tabindex="0"
                 type="button"
               >
@@ -188218,7 +188015,7 @@ exports[`Storyshots Views / Products / Product edit form errors 1`] = `
               />
               <div
                 class="SingleAutocompleteSelectField-container-id"
-                data-test="category"
+                data-test-id="category"
               >
                 <div
                   class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -188291,7 +188088,7 @@ exports[`Storyshots Views / Products / Product edit form errors 1`] = `
               />
               <div
                 class="MultiAutocompleteSelectField-container-id"
-                data-test="collections"
+                data-test-id="collections"
               >
                 <div
                   class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -188369,7 +188166,7 @@ exports[`Storyshots Views / Products / Product edit form errors 1`] = `
                     </div>
                     <button
                       class="MuiButtonBase-root-id IconButton-secondary-id MultiAutocompleteSelectField-chipClose-id"
-                      data-test-id="collectionRemove"
+                      data-test-id="collection-remove"
                       tabindex="0"
                       type="button"
                     >
@@ -188448,7 +188245,7 @@ exports[`Storyshots Views / Products / Product edit form errors 1`] = `
             >
               <label
                 class="MuiFormControlLabel-root-id"
-                data-test="override-tax-type"
+                data-test-id="override-tax-type"
               >
                 <span
                   aria-disabled="false"
@@ -188506,7 +188303,7 @@ exports[`Storyshots Views / Products / Product edit form errors 1`] = `
               />
               <label
                 class="MuiFormControlLabel-root-id"
-                data-test="charge-taxes"
+                data-test-id="charge-taxes"
               >
                 <span
                   aria-disabled="false"
@@ -188561,7 +188358,7 @@ exports[`Storyshots Views / Products / Product edit form errors 1`] = `
               </label>
               <div
                 class="SingleAutocompleteSelectField-container-id ProductTaxes-select-id"
-                data-test="select-tax-type"
+                data-test-id="select-tax-type"
               >
                 <div
                   class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -188717,8 +188514,7 @@ exports[`Storyshots Views / Products / Product edit limits reached 1`] = `
               />
               <div
                 class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-                data-test="richTextEditor"
-                data-test-id="description"
+                data-test-id="rich-text-editor-description"
               >
                 <label
                   class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-focused-id MuiInputLabel-focused-id"
@@ -188804,7 +188600,7 @@ exports[`Storyshots Views / Products / Product edit limits reached 1`] = `
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                  data-test="button-upload-image"
+                  data-test-id="button-upload-image"
                   tabindex="0"
                   type="button"
                 >
@@ -188838,7 +188634,7 @@ exports[`Storyshots Views / Products / Product edit limits reached 1`] = `
                 >
                   <div
                     class="MediaTile-mediaContainer-id"
-                    data-test="product-image"
+                    data-test-id="product-image"
                   >
                     <div
                       class="MediaTile-mediaOverlay-id"
@@ -188855,7 +188651,7 @@ exports[`Storyshots Views / Products / Product edit limits reached 1`] = `
                   </div>
                   <div
                     class="MediaTile-mediaContainer-id"
-                    data-test="product-image"
+                    data-test-id="product-image"
                   >
                     <div
                       class="MediaTile-mediaOverlay-id"
@@ -188872,7 +188668,7 @@ exports[`Storyshots Views / Products / Product edit limits reached 1`] = `
                   </div>
                   <div
                     class="MediaTile-mediaContainer-id"
-                    data-test="product-image"
+                    data-test-id="product-image"
                   >
                     <div
                       class="MediaTile-mediaOverlay-id"
@@ -188889,7 +188685,7 @@ exports[`Storyshots Views / Products / Product edit limits reached 1`] = `
                   </div>
                   <div
                     class="MediaTile-mediaContainer-id"
-                    data-test="product-image"
+                    data-test-id="product-image"
                   >
                     <div
                       class="MediaTile-mediaOverlay-id"
@@ -188906,7 +188702,7 @@ exports[`Storyshots Views / Products / Product edit limits reached 1`] = `
                   </div>
                   <div
                     class="MediaTile-mediaContainer-id"
-                    data-test="product-image"
+                    data-test-id="product-image"
                   >
                     <div
                       class="MediaTile-mediaOverlay-id"
@@ -188961,7 +188757,7 @@ exports[`Storyshots Views / Products / Product edit limits reached 1`] = `
                 </div>
                 <button
                   class="MuiButtonBase-root-id IconButton-secondary-id Attributes-expansionBarButton-id IconButton-hoverOutline-id"
-                  data-test="attributes-expand"
+                  data-test-id="attributes-expand"
                   tabindex="0"
                   type="button"
                 >
@@ -188985,7 +188781,7 @@ exports[`Storyshots Views / Products / Product edit limits reached 1`] = `
               >
                 <div
                   class="BasicAttributeRow-attributeSectionLabel-id"
-                  data-test="attribute-label"
+                  data-test-id="attribute-label"
                 >
                   <div
                     class="MuiTypography-root-id MuiTypography-body1-id"
@@ -188995,7 +188791,7 @@ exports[`Storyshots Views / Products / Product edit limits reached 1`] = `
                 </div>
                 <div
                   class="BasicAttributeRow-value-id"
-                  data-test="attribute-value"
+                  data-test-id="attribute-value"
                 >
                   <div
                     class="SingleAutocompleteSelectField-container-id"
@@ -189065,7 +188861,7 @@ exports[`Storyshots Views / Products / Product edit limits reached 1`] = `
               >
                 <div
                   class="BasicAttributeRow-attributeSectionLabel-id"
-                  data-test="attribute-label"
+                  data-test-id="attribute-label"
                 >
                   <div
                     class="MuiTypography-root-id MuiTypography-body1-id"
@@ -189075,7 +188871,7 @@ exports[`Storyshots Views / Products / Product edit limits reached 1`] = `
                 </div>
                 <div
                   class="BasicAttributeRow-value-id"
-                  data-test="attribute-value"
+                  data-test-id="attribute-value"
                 >
                   <div
                     class="MultiAutocompleteSelectField-container-id"
@@ -189196,7 +188992,7 @@ exports[`Storyshots Views / Products / Product edit limits reached 1`] = `
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id MuiButton-disabled-id MuiButtonBase-disabled-id"
-                  data-test="button-add-variant"
+                  data-test-id="button-add-variant"
                   disabled=""
                   tabindex="-1"
                   type="button"
@@ -189483,7 +189279,7 @@ exports[`Storyshots Views / Products / Product edit limits reached 1`] = `
                     </td>
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colName-id"
-                      data-test="name"
+                      data-test-id="name"
                     >
                       Cordoba Oro
                       <span
@@ -189494,19 +189290,19 @@ exports[`Storyshots Views / Products / Product edit limits reached 1`] = `
                     </td>
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colSku-id"
-                      data-test="sku"
+                      data-test-id="sku"
                     >
                       87192-94370
                     </td>
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colInventory-id"
-                      data-test="inventory"
+                      data-test-id="inventory"
                     >
                       In preorder
                     </td>
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colActions-id"
-                      data-test="actions"
+                      data-test-id="actions"
                     />
                   </tr>
                   <tr
@@ -189569,35 +189365,35 @@ exports[`Storyshots Views / Products / Product edit limits reached 1`] = `
                     </td>
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colName-id"
-                      data-test="name"
+                      data-test-id="name"
                     >
                       silver
                     </td>
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colSku-id"
-                      data-test="sku"
+                      data-test-id="sku"
                     >
                       69055-15190
                     </td>
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colInventory-id"
-                      data-test="inventory"
+                      data-test-id="inventory"
                     >
                       In preorder
                     </td>
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colActions-id"
-                      data-test="actions"
+                      data-test-id="actions"
                     >
                       <div
-                        data-test="menu"
+                        data-test-id="menu"
                       >
                         <button
                           aria-haspopup="true"
                           aria-label="More"
                           class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                           color="primary"
-                          data-test-id="showMoreButton"
+                          data-test-id="show-more-button"
                           tabindex="0"
                           type="button"
                         >
@@ -189672,8 +189468,8 @@ exports[`Storyshots Views / Products / Product edit limits reached 1`] = `
           />
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="metadataEditor"
             data-test-expanded="true"
+            data-test-id="metadata-editor"
             data-test-is-private="false"
           >
             <div
@@ -189688,7 +189484,7 @@ exports[`Storyshots Views / Products / Product edit limits reached 1`] = `
                   Metadata
                   <button
                     class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test="expand"
+                    data-test-id="expand"
                     tabindex="0"
                     type="button"
                   >
@@ -189760,7 +189556,7 @@ exports[`Storyshots Views / Products / Product edit limits reached 1`] = `
               >
                 <tr
                   class="MuiTableRow-root-id MuiTableRow-hover-id"
-                  data-test="field"
+                  data-test-id="field"
                 >
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colName-id"
@@ -189841,8 +189637,7 @@ exports[`Storyshots Views / Products / Product edit limits reached 1`] = `
                   >
                     <button
                       class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                      data-test="deleteField"
-                      data-test-id="0"
+                      data-test-id="delete-field-0"
                       tabindex="0"
                       type="button"
                     >
@@ -189869,7 +189664,7 @@ exports[`Storyshots Views / Products / Product edit limits reached 1`] = `
             >
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-                data-test="addField"
+                data-test-id="add-field"
                 tabindex="0"
                 type="button"
               >
@@ -189886,8 +189681,8 @@ exports[`Storyshots Views / Products / Product edit limits reached 1`] = `
           />
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="metadataEditor"
             data-test-expanded="true"
+            data-test-id="metadata-editor"
             data-test-is-private="true"
           >
             <div
@@ -189902,7 +189697,7 @@ exports[`Storyshots Views / Products / Product edit limits reached 1`] = `
                   Private Metadata
                   <button
                     class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test="expand"
+                    data-test-id="expand"
                     tabindex="0"
                     type="button"
                   >
@@ -189948,7 +189743,7 @@ exports[`Storyshots Views / Products / Product edit limits reached 1`] = `
             >
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-                data-test="addField"
+                data-test-id="add-field"
                 tabindex="0"
                 type="button"
               >
@@ -190016,7 +189811,7 @@ exports[`Storyshots Views / Products / Product edit limits reached 1`] = `
               />
               <div
                 class="SingleAutocompleteSelectField-container-id"
-                data-test="category"
+                data-test-id="category"
               >
                 <div
                   class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -190084,7 +189879,7 @@ exports[`Storyshots Views / Products / Product edit limits reached 1`] = `
               />
               <div
                 class="MultiAutocompleteSelectField-container-id"
-                data-test="collections"
+                data-test-id="collections"
               >
                 <div
                   class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -190162,7 +189957,7 @@ exports[`Storyshots Views / Products / Product edit limits reached 1`] = `
                     </div>
                     <button
                       class="MuiButtonBase-root-id IconButton-secondary-id MultiAutocompleteSelectField-chipClose-id"
-                      data-test-id="collectionRemove"
+                      data-test-id="collection-remove"
                       tabindex="0"
                       type="button"
                     >
@@ -190241,7 +190036,7 @@ exports[`Storyshots Views / Products / Product edit limits reached 1`] = `
             >
               <label
                 class="MuiFormControlLabel-root-id"
-                data-test="override-tax-type"
+                data-test-id="override-tax-type"
               >
                 <span
                   aria-disabled="false"
@@ -190299,7 +190094,7 @@ exports[`Storyshots Views / Products / Product edit limits reached 1`] = `
               />
               <label
                 class="MuiFormControlLabel-root-id"
-                data-test="charge-taxes"
+                data-test-id="charge-taxes"
               >
                 <span
                   aria-disabled="false"
@@ -190354,7 +190149,7 @@ exports[`Storyshots Views / Products / Product edit limits reached 1`] = `
               </label>
               <div
                 class="SingleAutocompleteSelectField-container-id ProductTaxes-select-id"
-                data-test="select-tax-type"
+                data-test-id="select-tax-type"
               >
                 <div
                   class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -190510,8 +190305,7 @@ exports[`Storyshots Views / Products / Product edit no limits 1`] = `
               />
               <div
                 class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-                data-test="richTextEditor"
-                data-test-id="description"
+                data-test-id="rich-text-editor-description"
               >
                 <label
                   class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-focused-id MuiInputLabel-focused-id"
@@ -190597,7 +190391,7 @@ exports[`Storyshots Views / Products / Product edit no limits 1`] = `
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                  data-test="button-upload-image"
+                  data-test-id="button-upload-image"
                   tabindex="0"
                   type="button"
                 >
@@ -190631,7 +190425,7 @@ exports[`Storyshots Views / Products / Product edit no limits 1`] = `
                 >
                   <div
                     class="MediaTile-mediaContainer-id"
-                    data-test="product-image"
+                    data-test-id="product-image"
                   >
                     <div
                       class="MediaTile-mediaOverlay-id"
@@ -190648,7 +190442,7 @@ exports[`Storyshots Views / Products / Product edit no limits 1`] = `
                   </div>
                   <div
                     class="MediaTile-mediaContainer-id"
-                    data-test="product-image"
+                    data-test-id="product-image"
                   >
                     <div
                       class="MediaTile-mediaOverlay-id"
@@ -190665,7 +190459,7 @@ exports[`Storyshots Views / Products / Product edit no limits 1`] = `
                   </div>
                   <div
                     class="MediaTile-mediaContainer-id"
-                    data-test="product-image"
+                    data-test-id="product-image"
                   >
                     <div
                       class="MediaTile-mediaOverlay-id"
@@ -190682,7 +190476,7 @@ exports[`Storyshots Views / Products / Product edit no limits 1`] = `
                   </div>
                   <div
                     class="MediaTile-mediaContainer-id"
-                    data-test="product-image"
+                    data-test-id="product-image"
                   >
                     <div
                       class="MediaTile-mediaOverlay-id"
@@ -190699,7 +190493,7 @@ exports[`Storyshots Views / Products / Product edit no limits 1`] = `
                   </div>
                   <div
                     class="MediaTile-mediaContainer-id"
-                    data-test="product-image"
+                    data-test-id="product-image"
                   >
                     <div
                       class="MediaTile-mediaOverlay-id"
@@ -190754,7 +190548,7 @@ exports[`Storyshots Views / Products / Product edit no limits 1`] = `
                 </div>
                 <button
                   class="MuiButtonBase-root-id IconButton-secondary-id Attributes-expansionBarButton-id IconButton-hoverOutline-id"
-                  data-test="attributes-expand"
+                  data-test-id="attributes-expand"
                   tabindex="0"
                   type="button"
                 >
@@ -190778,7 +190572,7 @@ exports[`Storyshots Views / Products / Product edit no limits 1`] = `
               >
                 <div
                   class="BasicAttributeRow-attributeSectionLabel-id"
-                  data-test="attribute-label"
+                  data-test-id="attribute-label"
                 >
                   <div
                     class="MuiTypography-root-id MuiTypography-body1-id"
@@ -190788,7 +190582,7 @@ exports[`Storyshots Views / Products / Product edit no limits 1`] = `
                 </div>
                 <div
                   class="BasicAttributeRow-value-id"
-                  data-test="attribute-value"
+                  data-test-id="attribute-value"
                 >
                   <div
                     class="SingleAutocompleteSelectField-container-id"
@@ -190858,7 +190652,7 @@ exports[`Storyshots Views / Products / Product edit no limits 1`] = `
               >
                 <div
                   class="BasicAttributeRow-attributeSectionLabel-id"
-                  data-test="attribute-label"
+                  data-test-id="attribute-label"
                 >
                   <div
                     class="MuiTypography-root-id MuiTypography-body1-id"
@@ -190868,7 +190662,7 @@ exports[`Storyshots Views / Products / Product edit no limits 1`] = `
                 </div>
                 <div
                   class="BasicAttributeRow-value-id"
-                  data-test="attribute-value"
+                  data-test-id="attribute-value"
                 >
                   <div
                     class="MultiAutocompleteSelectField-container-id"
@@ -190989,7 +190783,7 @@ exports[`Storyshots Views / Products / Product edit no limits 1`] = `
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                  data-test="button-add-variant"
+                  data-test-id="button-add-variant"
                   tabindex="0"
                   type="button"
                 >
@@ -191196,7 +190990,7 @@ exports[`Storyshots Views / Products / Product edit no limits 1`] = `
                     </td>
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colName-id"
-                      data-test="name"
+                      data-test-id="name"
                     >
                       Cordoba Oro
                       <span
@@ -191207,19 +191001,19 @@ exports[`Storyshots Views / Products / Product edit no limits 1`] = `
                     </td>
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colSku-id"
-                      data-test="sku"
+                      data-test-id="sku"
                     >
                       87192-94370
                     </td>
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colInventory-id"
-                      data-test="inventory"
+                      data-test-id="inventory"
                     >
                       In preorder
                     </td>
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colActions-id"
-                      data-test="actions"
+                      data-test-id="actions"
                     />
                   </tr>
                   <tr
@@ -191282,35 +191076,35 @@ exports[`Storyshots Views / Products / Product edit no limits 1`] = `
                     </td>
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colName-id"
-                      data-test="name"
+                      data-test-id="name"
                     >
                       silver
                     </td>
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colSku-id"
-                      data-test="sku"
+                      data-test-id="sku"
                     >
                       69055-15190
                     </td>
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colInventory-id"
-                      data-test="inventory"
+                      data-test-id="inventory"
                     >
                       In preorder
                     </td>
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colActions-id"
-                      data-test="actions"
+                      data-test-id="actions"
                     >
                       <div
-                        data-test="menu"
+                        data-test-id="menu"
                       >
                         <button
                           aria-haspopup="true"
                           aria-label="More"
                           class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                           color="primary"
-                          data-test-id="showMoreButton"
+                          data-test-id="show-more-button"
                           tabindex="0"
                           type="button"
                         >
@@ -191385,8 +191179,8 @@ exports[`Storyshots Views / Products / Product edit no limits 1`] = `
           />
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="metadataEditor"
             data-test-expanded="true"
+            data-test-id="metadata-editor"
             data-test-is-private="false"
           >
             <div
@@ -191401,7 +191195,7 @@ exports[`Storyshots Views / Products / Product edit no limits 1`] = `
                   Metadata
                   <button
                     class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test="expand"
+                    data-test-id="expand"
                     tabindex="0"
                     type="button"
                   >
@@ -191473,7 +191267,7 @@ exports[`Storyshots Views / Products / Product edit no limits 1`] = `
               >
                 <tr
                   class="MuiTableRow-root-id MuiTableRow-hover-id"
-                  data-test="field"
+                  data-test-id="field"
                 >
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colName-id"
@@ -191554,8 +191348,7 @@ exports[`Storyshots Views / Products / Product edit no limits 1`] = `
                   >
                     <button
                       class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                      data-test="deleteField"
-                      data-test-id="0"
+                      data-test-id="delete-field-0"
                       tabindex="0"
                       type="button"
                     >
@@ -191582,7 +191375,7 @@ exports[`Storyshots Views / Products / Product edit no limits 1`] = `
             >
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-                data-test="addField"
+                data-test-id="add-field"
                 tabindex="0"
                 type="button"
               >
@@ -191599,8 +191392,8 @@ exports[`Storyshots Views / Products / Product edit no limits 1`] = `
           />
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="metadataEditor"
             data-test-expanded="true"
+            data-test-id="metadata-editor"
             data-test-is-private="true"
           >
             <div
@@ -191615,7 +191408,7 @@ exports[`Storyshots Views / Products / Product edit no limits 1`] = `
                   Private Metadata
                   <button
                     class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test="expand"
+                    data-test-id="expand"
                     tabindex="0"
                     type="button"
                   >
@@ -191661,7 +191454,7 @@ exports[`Storyshots Views / Products / Product edit no limits 1`] = `
             >
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-                data-test="addField"
+                data-test-id="add-field"
                 tabindex="0"
                 type="button"
               >
@@ -191729,7 +191522,7 @@ exports[`Storyshots Views / Products / Product edit no limits 1`] = `
               />
               <div
                 class="SingleAutocompleteSelectField-container-id"
-                data-test="category"
+                data-test-id="category"
               >
                 <div
                   class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -191797,7 +191590,7 @@ exports[`Storyshots Views / Products / Product edit no limits 1`] = `
               />
               <div
                 class="MultiAutocompleteSelectField-container-id"
-                data-test="collections"
+                data-test-id="collections"
               >
                 <div
                   class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -191875,7 +191668,7 @@ exports[`Storyshots Views / Products / Product edit no limits 1`] = `
                     </div>
                     <button
                       class="MuiButtonBase-root-id IconButton-secondary-id MultiAutocompleteSelectField-chipClose-id"
-                      data-test-id="collectionRemove"
+                      data-test-id="collection-remove"
                       tabindex="0"
                       type="button"
                     >
@@ -191954,7 +191747,7 @@ exports[`Storyshots Views / Products / Product edit no limits 1`] = `
             >
               <label
                 class="MuiFormControlLabel-root-id"
-                data-test="override-tax-type"
+                data-test-id="override-tax-type"
               >
                 <span
                   aria-disabled="false"
@@ -192012,7 +191805,7 @@ exports[`Storyshots Views / Products / Product edit no limits 1`] = `
               />
               <label
                 class="MuiFormControlLabel-root-id"
-                data-test="charge-taxes"
+                data-test-id="charge-taxes"
               >
                 <span
                   aria-disabled="false"
@@ -192067,7 +191860,7 @@ exports[`Storyshots Views / Products / Product edit no limits 1`] = `
               </label>
               <div
                 class="SingleAutocompleteSelectField-container-id ProductTaxes-select-id"
-                data-test="select-tax-type"
+                data-test-id="select-tax-type"
               >
                 <div
                   class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -192223,8 +192016,7 @@ exports[`Storyshots Views / Products / Product edit no product attributes 1`] =
               />
               <div
                 class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-                data-test="richTextEditor"
-                data-test-id="description"
+                data-test-id="rich-text-editor-description"
               >
                 <label
                   class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-focused-id MuiInputLabel-focused-id"
@@ -192310,7 +192102,7 @@ exports[`Storyshots Views / Products / Product edit no product attributes 1`] =
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                  data-test="button-upload-image"
+                  data-test-id="button-upload-image"
                   tabindex="0"
                   type="button"
                 >
@@ -192344,7 +192136,7 @@ exports[`Storyshots Views / Products / Product edit no product attributes 1`] =
                 >
                   <div
                     class="MediaTile-mediaContainer-id"
-                    data-test="product-image"
+                    data-test-id="product-image"
                   >
                     <div
                       class="MediaTile-mediaOverlay-id"
@@ -192361,7 +192153,7 @@ exports[`Storyshots Views / Products / Product edit no product attributes 1`] =
                   </div>
                   <div
                     class="MediaTile-mediaContainer-id"
-                    data-test="product-image"
+                    data-test-id="product-image"
                   >
                     <div
                       class="MediaTile-mediaOverlay-id"
@@ -192378,7 +192170,7 @@ exports[`Storyshots Views / Products / Product edit no product attributes 1`] =
                   </div>
                   <div
                     class="MediaTile-mediaContainer-id"
-                    data-test="product-image"
+                    data-test-id="product-image"
                   >
                     <div
                       class="MediaTile-mediaOverlay-id"
@@ -192395,7 +192187,7 @@ exports[`Storyshots Views / Products / Product edit no product attributes 1`] =
                   </div>
                   <div
                     class="MediaTile-mediaContainer-id"
-                    data-test="product-image"
+                    data-test-id="product-image"
                   >
                     <div
                       class="MediaTile-mediaOverlay-id"
@@ -192412,7 +192204,7 @@ exports[`Storyshots Views / Products / Product edit no product attributes 1`] =
                   </div>
                   <div
                     class="MediaTile-mediaContainer-id"
-                    data-test="product-image"
+                    data-test-id="product-image"
                   >
                     <div
                       class="MediaTile-mediaOverlay-id"
@@ -192457,7 +192249,7 @@ exports[`Storyshots Views / Products / Product edit no product attributes 1`] =
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                  data-test="button-add-variant"
+                  data-test-id="button-add-variant"
                   tabindex="0"
                   type="button"
                 >
@@ -192664,7 +192456,7 @@ exports[`Storyshots Views / Products / Product edit no product attributes 1`] =
                     </td>
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colName-id"
-                      data-test="name"
+                      data-test-id="name"
                     >
                       Cordoba Oro
                       <span
@@ -192675,19 +192467,19 @@ exports[`Storyshots Views / Products / Product edit no product attributes 1`] =
                     </td>
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colSku-id"
-                      data-test="sku"
+                      data-test-id="sku"
                     >
                       87192-94370
                     </td>
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colInventory-id"
-                      data-test="inventory"
+                      data-test-id="inventory"
                     >
                       In preorder
                     </td>
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colActions-id"
-                      data-test="actions"
+                      data-test-id="actions"
                     />
                   </tr>
                   <tr
@@ -192750,35 +192542,35 @@ exports[`Storyshots Views / Products / Product edit no product attributes 1`] =
                     </td>
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colName-id"
-                      data-test="name"
+                      data-test-id="name"
                     >
                       silver
                     </td>
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colSku-id"
-                      data-test="sku"
+                      data-test-id="sku"
                     >
                       69055-15190
                     </td>
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colInventory-id"
-                      data-test="inventory"
+                      data-test-id="inventory"
                     >
                       In preorder
                     </td>
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colActions-id"
-                      data-test="actions"
+                      data-test-id="actions"
                     >
                       <div
-                        data-test="menu"
+                        data-test-id="menu"
                       >
                         <button
                           aria-haspopup="true"
                           aria-label="More"
                           class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                           color="primary"
-                          data-test-id="showMoreButton"
+                          data-test-id="show-more-button"
                           tabindex="0"
                           type="button"
                         >
@@ -192853,8 +192645,8 @@ exports[`Storyshots Views / Products / Product edit no product attributes 1`] =
           />
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="metadataEditor"
             data-test-expanded="true"
+            data-test-id="metadata-editor"
             data-test-is-private="false"
           >
             <div
@@ -192869,7 +192661,7 @@ exports[`Storyshots Views / Products / Product edit no product attributes 1`] =
                   Metadata
                   <button
                     class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test="expand"
+                    data-test-id="expand"
                     tabindex="0"
                     type="button"
                   >
@@ -192941,7 +192733,7 @@ exports[`Storyshots Views / Products / Product edit no product attributes 1`] =
               >
                 <tr
                   class="MuiTableRow-root-id MuiTableRow-hover-id"
-                  data-test="field"
+                  data-test-id="field"
                 >
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colName-id"
@@ -193022,8 +192814,7 @@ exports[`Storyshots Views / Products / Product edit no product attributes 1`] =
                   >
                     <button
                       class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                      data-test="deleteField"
-                      data-test-id="0"
+                      data-test-id="delete-field-0"
                       tabindex="0"
                       type="button"
                     >
@@ -193050,7 +192841,7 @@ exports[`Storyshots Views / Products / Product edit no product attributes 1`] =
             >
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-                data-test="addField"
+                data-test-id="add-field"
                 tabindex="0"
                 type="button"
               >
@@ -193067,8 +192858,8 @@ exports[`Storyshots Views / Products / Product edit no product attributes 1`] =
           />
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="metadataEditor"
             data-test-expanded="true"
+            data-test-id="metadata-editor"
             data-test-is-private="true"
           >
             <div
@@ -193083,7 +192874,7 @@ exports[`Storyshots Views / Products / Product edit no product attributes 1`] =
                   Private Metadata
                   <button
                     class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test="expand"
+                    data-test-id="expand"
                     tabindex="0"
                     type="button"
                   >
@@ -193129,7 +192920,7 @@ exports[`Storyshots Views / Products / Product edit no product attributes 1`] =
             >
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-                data-test="addField"
+                data-test-id="add-field"
                 tabindex="0"
                 type="button"
               >
@@ -193197,7 +192988,7 @@ exports[`Storyshots Views / Products / Product edit no product attributes 1`] =
               />
               <div
                 class="SingleAutocompleteSelectField-container-id"
-                data-test="category"
+                data-test-id="category"
               >
                 <div
                   class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -193265,7 +193056,7 @@ exports[`Storyshots Views / Products / Product edit no product attributes 1`] =
               />
               <div
                 class="MultiAutocompleteSelectField-container-id"
-                data-test="collections"
+                data-test-id="collections"
               >
                 <div
                   class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -193343,7 +193134,7 @@ exports[`Storyshots Views / Products / Product edit no product attributes 1`] =
                     </div>
                     <button
                       class="MuiButtonBase-root-id IconButton-secondary-id MultiAutocompleteSelectField-chipClose-id"
-                      data-test-id="collectionRemove"
+                      data-test-id="collection-remove"
                       tabindex="0"
                       type="button"
                     >
@@ -193422,7 +193213,7 @@ exports[`Storyshots Views / Products / Product edit no product attributes 1`] =
             >
               <label
                 class="MuiFormControlLabel-root-id"
-                data-test="override-tax-type"
+                data-test-id="override-tax-type"
               >
                 <span
                   aria-disabled="false"
@@ -193480,7 +193271,7 @@ exports[`Storyshots Views / Products / Product edit no product attributes 1`] =
               />
               <label
                 class="MuiFormControlLabel-root-id"
-                data-test="charge-taxes"
+                data-test-id="charge-taxes"
               >
                 <span
                   aria-disabled="false"
@@ -193535,7 +193326,7 @@ exports[`Storyshots Views / Products / Product edit no product attributes 1`] =
               </label>
               <div
                 class="SingleAutocompleteSelectField-container-id ProductTaxes-select-id"
-                data-test="select-tax-type"
+                data-test-id="select-tax-type"
               >
                 <div
                   class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -193691,8 +193482,7 @@ exports[`Storyshots Views / Products / Product edit no stock and no variants 1`]
               />
               <div
                 class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-                data-test="richTextEditor"
-                data-test-id="description"
+                data-test-id="rich-text-editor-description"
               >
                 <label
                   class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-focused-id MuiInputLabel-focused-id"
@@ -193778,7 +193568,7 @@ exports[`Storyshots Views / Products / Product edit no stock and no variants 1`]
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                  data-test="button-upload-image"
+                  data-test-id="button-upload-image"
                   tabindex="0"
                   type="button"
                 >
@@ -193812,7 +193602,7 @@ exports[`Storyshots Views / Products / Product edit no stock and no variants 1`]
                 >
                   <div
                     class="MediaTile-mediaContainer-id"
-                    data-test="product-image"
+                    data-test-id="product-image"
                   >
                     <div
                       class="MediaTile-mediaOverlay-id"
@@ -193829,7 +193619,7 @@ exports[`Storyshots Views / Products / Product edit no stock and no variants 1`]
                   </div>
                   <div
                     class="MediaTile-mediaContainer-id"
-                    data-test="product-image"
+                    data-test-id="product-image"
                   >
                     <div
                       class="MediaTile-mediaOverlay-id"
@@ -193846,7 +193636,7 @@ exports[`Storyshots Views / Products / Product edit no stock and no variants 1`]
                   </div>
                   <div
                     class="MediaTile-mediaContainer-id"
-                    data-test="product-image"
+                    data-test-id="product-image"
                   >
                     <div
                       class="MediaTile-mediaOverlay-id"
@@ -193863,7 +193653,7 @@ exports[`Storyshots Views / Products / Product edit no stock and no variants 1`]
                   </div>
                   <div
                     class="MediaTile-mediaContainer-id"
-                    data-test="product-image"
+                    data-test-id="product-image"
                   >
                     <div
                       class="MediaTile-mediaOverlay-id"
@@ -193880,7 +193670,7 @@ exports[`Storyshots Views / Products / Product edit no stock and no variants 1`]
                   </div>
                   <div
                     class="MediaTile-mediaContainer-id"
-                    data-test="product-image"
+                    data-test-id="product-image"
                   >
                     <div
                       class="MediaTile-mediaOverlay-id"
@@ -193935,7 +193725,7 @@ exports[`Storyshots Views / Products / Product edit no stock and no variants 1`]
                 </div>
                 <button
                   class="MuiButtonBase-root-id IconButton-secondary-id Attributes-expansionBarButton-id IconButton-hoverOutline-id"
-                  data-test="attributes-expand"
+                  data-test-id="attributes-expand"
                   tabindex="0"
                   type="button"
                 >
@@ -193959,7 +193749,7 @@ exports[`Storyshots Views / Products / Product edit no stock and no variants 1`]
               >
                 <div
                   class="BasicAttributeRow-attributeSectionLabel-id"
-                  data-test="attribute-label"
+                  data-test-id="attribute-label"
                 >
                   <div
                     class="MuiTypography-root-id MuiTypography-body1-id"
@@ -193969,7 +193759,7 @@ exports[`Storyshots Views / Products / Product edit no stock and no variants 1`]
                 </div>
                 <div
                   class="BasicAttributeRow-value-id"
-                  data-test="attribute-value"
+                  data-test-id="attribute-value"
                 >
                   <div
                     class="SingleAutocompleteSelectField-container-id"
@@ -194039,7 +193829,7 @@ exports[`Storyshots Views / Products / Product edit no stock and no variants 1`]
               >
                 <div
                   class="BasicAttributeRow-attributeSectionLabel-id"
-                  data-test="attribute-label"
+                  data-test-id="attribute-label"
                 >
                   <div
                     class="MuiTypography-root-id MuiTypography-body1-id"
@@ -194049,7 +193839,7 @@ exports[`Storyshots Views / Products / Product edit no stock and no variants 1`]
                 </div>
                 <div
                   class="BasicAttributeRow-value-id"
-                  data-test="attribute-value"
+                  data-test-id="attribute-value"
                 >
                   <div
                     class="MultiAutocompleteSelectField-container-id"
@@ -194455,8 +194245,8 @@ exports[`Storyshots Views / Products / Product edit no stock and no variants 1`]
           />
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="metadataEditor"
             data-test-expanded="true"
+            data-test-id="metadata-editor"
             data-test-is-private="false"
           >
             <div
@@ -194471,7 +194261,7 @@ exports[`Storyshots Views / Products / Product edit no stock and no variants 1`]
                   Metadata
                   <button
                     class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test="expand"
+                    data-test-id="expand"
                     tabindex="0"
                     type="button"
                   >
@@ -194543,7 +194333,7 @@ exports[`Storyshots Views / Products / Product edit no stock and no variants 1`]
               >
                 <tr
                   class="MuiTableRow-root-id MuiTableRow-hover-id"
-                  data-test="field"
+                  data-test-id="field"
                 >
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colName-id"
@@ -194624,8 +194414,7 @@ exports[`Storyshots Views / Products / Product edit no stock and no variants 1`]
                   >
                     <button
                       class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                      data-test="deleteField"
-                      data-test-id="0"
+                      data-test-id="delete-field-0"
                       tabindex="0"
                       type="button"
                     >
@@ -194652,7 +194441,7 @@ exports[`Storyshots Views / Products / Product edit no stock and no variants 1`]
             >
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-                data-test="addField"
+                data-test-id="add-field"
                 tabindex="0"
                 type="button"
               >
@@ -194669,8 +194458,8 @@ exports[`Storyshots Views / Products / Product edit no stock and no variants 1`]
           />
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="metadataEditor"
             data-test-expanded="true"
+            data-test-id="metadata-editor"
             data-test-is-private="true"
           >
             <div
@@ -194685,7 +194474,7 @@ exports[`Storyshots Views / Products / Product edit no stock and no variants 1`]
                   Private Metadata
                   <button
                     class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test="expand"
+                    data-test-id="expand"
                     tabindex="0"
                     type="button"
                   >
@@ -194731,7 +194520,7 @@ exports[`Storyshots Views / Products / Product edit no stock and no variants 1`]
             >
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-                data-test="addField"
+                data-test-id="add-field"
                 tabindex="0"
                 type="button"
               >
@@ -194799,7 +194588,7 @@ exports[`Storyshots Views / Products / Product edit no stock and no variants 1`]
               />
               <div
                 class="SingleAutocompleteSelectField-container-id"
-                data-test="category"
+                data-test-id="category"
               >
                 <div
                   class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -194867,7 +194656,7 @@ exports[`Storyshots Views / Products / Product edit no stock and no variants 1`]
               />
               <div
                 class="MultiAutocompleteSelectField-container-id"
-                data-test="collections"
+                data-test-id="collections"
               >
                 <div
                   class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -194945,7 +194734,7 @@ exports[`Storyshots Views / Products / Product edit no stock and no variants 1`]
                     </div>
                     <button
                       class="MuiButtonBase-root-id IconButton-secondary-id MultiAutocompleteSelectField-chipClose-id"
-                      data-test-id="collectionRemove"
+                      data-test-id="collection-remove"
                       tabindex="0"
                       type="button"
                     >
@@ -195024,7 +194813,7 @@ exports[`Storyshots Views / Products / Product edit no stock and no variants 1`]
             >
               <label
                 class="MuiFormControlLabel-root-id"
-                data-test="override-tax-type"
+                data-test-id="override-tax-type"
               >
                 <span
                   aria-disabled="false"
@@ -195082,7 +194871,7 @@ exports[`Storyshots Views / Products / Product edit no stock and no variants 1`]
               />
               <label
                 class="MuiFormControlLabel-root-id"
-                data-test="charge-taxes"
+                data-test-id="charge-taxes"
               >
                 <span
                   aria-disabled="false"
@@ -195137,7 +194926,7 @@ exports[`Storyshots Views / Products / Product edit no stock and no variants 1`]
               </label>
               <div
                 class="SingleAutocompleteSelectField-container-id ProductTaxes-select-id"
-                data-test="select-tax-type"
+                data-test-id="select-tax-type"
               >
                 <div
                   class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -195293,8 +195082,7 @@ exports[`Storyshots Views / Products / Product edit no stock, no variants and no
               />
               <div
                 class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-                data-test="richTextEditor"
-                data-test-id="description"
+                data-test-id="rich-text-editor-description"
               >
                 <label
                   class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-focused-id MuiInputLabel-focused-id"
@@ -195380,7 +195168,7 @@ exports[`Storyshots Views / Products / Product edit no stock, no variants and no
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                  data-test="button-upload-image"
+                  data-test-id="button-upload-image"
                   tabindex="0"
                   type="button"
                 >
@@ -195414,7 +195202,7 @@ exports[`Storyshots Views / Products / Product edit no stock, no variants and no
                 >
                   <div
                     class="MediaTile-mediaContainer-id"
-                    data-test="product-image"
+                    data-test-id="product-image"
                   >
                     <div
                       class="MediaTile-mediaOverlay-id"
@@ -195431,7 +195219,7 @@ exports[`Storyshots Views / Products / Product edit no stock, no variants and no
                   </div>
                   <div
                     class="MediaTile-mediaContainer-id"
-                    data-test="product-image"
+                    data-test-id="product-image"
                   >
                     <div
                       class="MediaTile-mediaOverlay-id"
@@ -195448,7 +195236,7 @@ exports[`Storyshots Views / Products / Product edit no stock, no variants and no
                   </div>
                   <div
                     class="MediaTile-mediaContainer-id"
-                    data-test="product-image"
+                    data-test-id="product-image"
                   >
                     <div
                       class="MediaTile-mediaOverlay-id"
@@ -195465,7 +195253,7 @@ exports[`Storyshots Views / Products / Product edit no stock, no variants and no
                   </div>
                   <div
                     class="MediaTile-mediaContainer-id"
-                    data-test="product-image"
+                    data-test-id="product-image"
                   >
                     <div
                       class="MediaTile-mediaOverlay-id"
@@ -195482,7 +195270,7 @@ exports[`Storyshots Views / Products / Product edit no stock, no variants and no
                   </div>
                   <div
                     class="MediaTile-mediaContainer-id"
-                    data-test="product-image"
+                    data-test-id="product-image"
                   >
                     <div
                       class="MediaTile-mediaOverlay-id"
@@ -195537,7 +195325,7 @@ exports[`Storyshots Views / Products / Product edit no stock, no variants and no
                 </div>
                 <button
                   class="MuiButtonBase-root-id IconButton-secondary-id Attributes-expansionBarButton-id IconButton-hoverOutline-id"
-                  data-test="attributes-expand"
+                  data-test-id="attributes-expand"
                   tabindex="0"
                   type="button"
                 >
@@ -195561,7 +195349,7 @@ exports[`Storyshots Views / Products / Product edit no stock, no variants and no
               >
                 <div
                   class="BasicAttributeRow-attributeSectionLabel-id"
-                  data-test="attribute-label"
+                  data-test-id="attribute-label"
                 >
                   <div
                     class="MuiTypography-root-id MuiTypography-body1-id"
@@ -195571,7 +195359,7 @@ exports[`Storyshots Views / Products / Product edit no stock, no variants and no
                 </div>
                 <div
                   class="BasicAttributeRow-value-id"
-                  data-test="attribute-value"
+                  data-test-id="attribute-value"
                 >
                   <div
                     class="SingleAutocompleteSelectField-container-id"
@@ -195641,7 +195429,7 @@ exports[`Storyshots Views / Products / Product edit no stock, no variants and no
               >
                 <div
                   class="BasicAttributeRow-attributeSectionLabel-id"
-                  data-test="attribute-label"
+                  data-test-id="attribute-label"
                 >
                   <div
                     class="MuiTypography-root-id MuiTypography-body1-id"
@@ -195651,7 +195439,7 @@ exports[`Storyshots Views / Products / Product edit no stock, no variants and no
                 </div>
                 <div
                   class="BasicAttributeRow-value-id"
-                  data-test="attribute-value"
+                  data-test-id="attribute-value"
                 >
                   <div
                     class="MultiAutocompleteSelectField-container-id"
@@ -196057,8 +195845,8 @@ exports[`Storyshots Views / Products / Product edit no stock, no variants and no
           />
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="metadataEditor"
             data-test-expanded="true"
+            data-test-id="metadata-editor"
             data-test-is-private="false"
           >
             <div
@@ -196073,7 +195861,7 @@ exports[`Storyshots Views / Products / Product edit no stock, no variants and no
                   Metadata
                   <button
                     class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test="expand"
+                    data-test-id="expand"
                     tabindex="0"
                     type="button"
                   >
@@ -196145,7 +195933,7 @@ exports[`Storyshots Views / Products / Product edit no stock, no variants and no
               >
                 <tr
                   class="MuiTableRow-root-id MuiTableRow-hover-id"
-                  data-test="field"
+                  data-test-id="field"
                 >
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colName-id"
@@ -196226,8 +196014,7 @@ exports[`Storyshots Views / Products / Product edit no stock, no variants and no
                   >
                     <button
                       class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                      data-test="deleteField"
-                      data-test-id="0"
+                      data-test-id="delete-field-0"
                       tabindex="0"
                       type="button"
                     >
@@ -196254,7 +196041,7 @@ exports[`Storyshots Views / Products / Product edit no stock, no variants and no
             >
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-                data-test="addField"
+                data-test-id="add-field"
                 tabindex="0"
                 type="button"
               >
@@ -196271,8 +196058,8 @@ exports[`Storyshots Views / Products / Product edit no stock, no variants and no
           />
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="metadataEditor"
             data-test-expanded="true"
+            data-test-id="metadata-editor"
             data-test-is-private="true"
           >
             <div
@@ -196287,7 +196074,7 @@ exports[`Storyshots Views / Products / Product edit no stock, no variants and no
                   Private Metadata
                   <button
                     class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test="expand"
+                    data-test-id="expand"
                     tabindex="0"
                     type="button"
                   >
@@ -196333,7 +196120,7 @@ exports[`Storyshots Views / Products / Product edit no stock, no variants and no
             >
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-                data-test="addField"
+                data-test-id="add-field"
                 tabindex="0"
                 type="button"
               >
@@ -196401,7 +196188,7 @@ exports[`Storyshots Views / Products / Product edit no stock, no variants and no
               />
               <div
                 class="SingleAutocompleteSelectField-container-id"
-                data-test="category"
+                data-test-id="category"
               >
                 <div
                   class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -196469,7 +196256,7 @@ exports[`Storyshots Views / Products / Product edit no stock, no variants and no
               />
               <div
                 class="MultiAutocompleteSelectField-container-id"
-                data-test="collections"
+                data-test-id="collections"
               >
                 <div
                   class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -196547,7 +196334,7 @@ exports[`Storyshots Views / Products / Product edit no stock, no variants and no
                     </div>
                     <button
                       class="MuiButtonBase-root-id IconButton-secondary-id MultiAutocompleteSelectField-chipClose-id"
-                      data-test-id="collectionRemove"
+                      data-test-id="collection-remove"
                       tabindex="0"
                       type="button"
                     >
@@ -196626,7 +196413,7 @@ exports[`Storyshots Views / Products / Product edit no stock, no variants and no
             >
               <label
                 class="MuiFormControlLabel-root-id"
-                data-test="override-tax-type"
+                data-test-id="override-tax-type"
               >
                 <span
                   aria-disabled="false"
@@ -196684,7 +196471,7 @@ exports[`Storyshots Views / Products / Product edit no stock, no variants and no
               />
               <label
                 class="MuiFormControlLabel-root-id"
-                data-test="charge-taxes"
+                data-test-id="charge-taxes"
               >
                 <span
                   aria-disabled="false"
@@ -196739,7 +196526,7 @@ exports[`Storyshots Views / Products / Product edit no stock, no variants and no
               </label>
               <div
                 class="SingleAutocompleteSelectField-container-id ProductTaxes-select-id"
-                data-test="select-tax-type"
+                data-test-id="select-tax-type"
               >
                 <div
                   class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -196895,8 +196682,7 @@ exports[`Storyshots Views / Products / Product edit no variants 1`] = `
               />
               <div
                 class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-                data-test="richTextEditor"
-                data-test-id="description"
+                data-test-id="rich-text-editor-description"
               >
                 <label
                   class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-focused-id MuiInputLabel-focused-id"
@@ -196982,7 +196768,7 @@ exports[`Storyshots Views / Products / Product edit no variants 1`] = `
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                  data-test="button-upload-image"
+                  data-test-id="button-upload-image"
                   tabindex="0"
                   type="button"
                 >
@@ -197016,7 +196802,7 @@ exports[`Storyshots Views / Products / Product edit no variants 1`] = `
                 >
                   <div
                     class="MediaTile-mediaContainer-id"
-                    data-test="product-image"
+                    data-test-id="product-image"
                   >
                     <div
                       class="MediaTile-mediaOverlay-id"
@@ -197033,7 +196819,7 @@ exports[`Storyshots Views / Products / Product edit no variants 1`] = `
                   </div>
                   <div
                     class="MediaTile-mediaContainer-id"
-                    data-test="product-image"
+                    data-test-id="product-image"
                   >
                     <div
                       class="MediaTile-mediaOverlay-id"
@@ -197050,7 +196836,7 @@ exports[`Storyshots Views / Products / Product edit no variants 1`] = `
                   </div>
                   <div
                     class="MediaTile-mediaContainer-id"
-                    data-test="product-image"
+                    data-test-id="product-image"
                   >
                     <div
                       class="MediaTile-mediaOverlay-id"
@@ -197067,7 +196853,7 @@ exports[`Storyshots Views / Products / Product edit no variants 1`] = `
                   </div>
                   <div
                     class="MediaTile-mediaContainer-id"
-                    data-test="product-image"
+                    data-test-id="product-image"
                   >
                     <div
                       class="MediaTile-mediaOverlay-id"
@@ -197084,7 +196870,7 @@ exports[`Storyshots Views / Products / Product edit no variants 1`] = `
                   </div>
                   <div
                     class="MediaTile-mediaContainer-id"
-                    data-test="product-image"
+                    data-test-id="product-image"
                   >
                     <div
                       class="MediaTile-mediaOverlay-id"
@@ -197139,7 +196925,7 @@ exports[`Storyshots Views / Products / Product edit no variants 1`] = `
                 </div>
                 <button
                   class="MuiButtonBase-root-id IconButton-secondary-id Attributes-expansionBarButton-id IconButton-hoverOutline-id"
-                  data-test="attributes-expand"
+                  data-test-id="attributes-expand"
                   tabindex="0"
                   type="button"
                 >
@@ -197163,7 +196949,7 @@ exports[`Storyshots Views / Products / Product edit no variants 1`] = `
               >
                 <div
                   class="BasicAttributeRow-attributeSectionLabel-id"
-                  data-test="attribute-label"
+                  data-test-id="attribute-label"
                 >
                   <div
                     class="MuiTypography-root-id MuiTypography-body1-id"
@@ -197173,7 +196959,7 @@ exports[`Storyshots Views / Products / Product edit no variants 1`] = `
                 </div>
                 <div
                   class="BasicAttributeRow-value-id"
-                  data-test="attribute-value"
+                  data-test-id="attribute-value"
                 >
                   <div
                     class="SingleAutocompleteSelectField-container-id"
@@ -197243,7 +197029,7 @@ exports[`Storyshots Views / Products / Product edit no variants 1`] = `
               >
                 <div
                   class="BasicAttributeRow-attributeSectionLabel-id"
-                  data-test="attribute-label"
+                  data-test-id="attribute-label"
                 >
                   <div
                     class="MuiTypography-root-id MuiTypography-body1-id"
@@ -197253,7 +197039,7 @@ exports[`Storyshots Views / Products / Product edit no variants 1`] = `
                 </div>
                 <div
                   class="BasicAttributeRow-value-id"
-                  data-test="attribute-value"
+                  data-test-id="attribute-value"
                 >
                   <div
                     class="MultiAutocompleteSelectField-container-id"
@@ -197659,8 +197445,8 @@ exports[`Storyshots Views / Products / Product edit no variants 1`] = `
           />
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="metadataEditor"
             data-test-expanded="true"
+            data-test-id="metadata-editor"
             data-test-is-private="false"
           >
             <div
@@ -197675,7 +197461,7 @@ exports[`Storyshots Views / Products / Product edit no variants 1`] = `
                   Metadata
                   <button
                     class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test="expand"
+                    data-test-id="expand"
                     tabindex="0"
                     type="button"
                   >
@@ -197747,7 +197533,7 @@ exports[`Storyshots Views / Products / Product edit no variants 1`] = `
               >
                 <tr
                   class="MuiTableRow-root-id MuiTableRow-hover-id"
-                  data-test="field"
+                  data-test-id="field"
                 >
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colName-id"
@@ -197828,8 +197614,7 @@ exports[`Storyshots Views / Products / Product edit no variants 1`] = `
                   >
                     <button
                       class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                      data-test="deleteField"
-                      data-test-id="0"
+                      data-test-id="delete-field-0"
                       tabindex="0"
                       type="button"
                     >
@@ -197856,7 +197641,7 @@ exports[`Storyshots Views / Products / Product edit no variants 1`] = `
             >
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-                data-test="addField"
+                data-test-id="add-field"
                 tabindex="0"
                 type="button"
               >
@@ -197873,8 +197658,8 @@ exports[`Storyshots Views / Products / Product edit no variants 1`] = `
           />
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="metadataEditor"
             data-test-expanded="true"
+            data-test-id="metadata-editor"
             data-test-is-private="true"
           >
             <div
@@ -197889,7 +197674,7 @@ exports[`Storyshots Views / Products / Product edit no variants 1`] = `
                   Private Metadata
                   <button
                     class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test="expand"
+                    data-test-id="expand"
                     tabindex="0"
                     type="button"
                   >
@@ -197935,7 +197720,7 @@ exports[`Storyshots Views / Products / Product edit no variants 1`] = `
             >
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-                data-test="addField"
+                data-test-id="add-field"
                 tabindex="0"
                 type="button"
               >
@@ -198003,7 +197788,7 @@ exports[`Storyshots Views / Products / Product edit no variants 1`] = `
               />
               <div
                 class="SingleAutocompleteSelectField-container-id"
-                data-test="category"
+                data-test-id="category"
               >
                 <div
                   class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -198071,7 +197856,7 @@ exports[`Storyshots Views / Products / Product edit no variants 1`] = `
               />
               <div
                 class="MultiAutocompleteSelectField-container-id"
-                data-test="collections"
+                data-test-id="collections"
               >
                 <div
                   class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -198149,7 +197934,7 @@ exports[`Storyshots Views / Products / Product edit no variants 1`] = `
                     </div>
                     <button
                       class="MuiButtonBase-root-id IconButton-secondary-id MultiAutocompleteSelectField-chipClose-id"
-                      data-test-id="collectionRemove"
+                      data-test-id="collection-remove"
                       tabindex="0"
                       type="button"
                     >
@@ -198228,7 +198013,7 @@ exports[`Storyshots Views / Products / Product edit no variants 1`] = `
             >
               <label
                 class="MuiFormControlLabel-root-id"
-                data-test="override-tax-type"
+                data-test-id="override-tax-type"
               >
                 <span
                   aria-disabled="false"
@@ -198286,7 +198071,7 @@ exports[`Storyshots Views / Products / Product edit no variants 1`] = `
               />
               <label
                 class="MuiFormControlLabel-root-id"
-                data-test="charge-taxes"
+                data-test-id="charge-taxes"
               >
                 <span
                   aria-disabled="false"
@@ -198341,7 +198126,7 @@ exports[`Storyshots Views / Products / Product edit no variants 1`] = `
               </label>
               <div
                 class="SingleAutocompleteSelectField-container-id ProductTaxes-select-id"
-                data-test="select-tax-type"
+                data-test-id="select-tax-type"
               >
                 <div
                   class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -198497,8 +198282,7 @@ exports[`Storyshots Views / Products / Product edit when data is fully loaded 1`
               />
               <div
                 class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-                data-test="richTextEditor"
-                data-test-id="description"
+                data-test-id="rich-text-editor-description"
               >
                 <label
                   class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-focused-id MuiInputLabel-focused-id"
@@ -198584,7 +198368,7 @@ exports[`Storyshots Views / Products / Product edit when data is fully loaded 1`
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                  data-test="button-upload-image"
+                  data-test-id="button-upload-image"
                   tabindex="0"
                   type="button"
                 >
@@ -198618,7 +198402,7 @@ exports[`Storyshots Views / Products / Product edit when data is fully loaded 1`
                 >
                   <div
                     class="MediaTile-mediaContainer-id"
-                    data-test="product-image"
+                    data-test-id="product-image"
                   >
                     <div
                       class="MediaTile-mediaOverlay-id"
@@ -198635,7 +198419,7 @@ exports[`Storyshots Views / Products / Product edit when data is fully loaded 1`
                   </div>
                   <div
                     class="MediaTile-mediaContainer-id"
-                    data-test="product-image"
+                    data-test-id="product-image"
                   >
                     <div
                       class="MediaTile-mediaOverlay-id"
@@ -198652,7 +198436,7 @@ exports[`Storyshots Views / Products / Product edit when data is fully loaded 1`
                   </div>
                   <div
                     class="MediaTile-mediaContainer-id"
-                    data-test="product-image"
+                    data-test-id="product-image"
                   >
                     <div
                       class="MediaTile-mediaOverlay-id"
@@ -198669,7 +198453,7 @@ exports[`Storyshots Views / Products / Product edit when data is fully loaded 1`
                   </div>
                   <div
                     class="MediaTile-mediaContainer-id"
-                    data-test="product-image"
+                    data-test-id="product-image"
                   >
                     <div
                       class="MediaTile-mediaOverlay-id"
@@ -198686,7 +198470,7 @@ exports[`Storyshots Views / Products / Product edit when data is fully loaded 1`
                   </div>
                   <div
                     class="MediaTile-mediaContainer-id"
-                    data-test="product-image"
+                    data-test-id="product-image"
                   >
                     <div
                       class="MediaTile-mediaOverlay-id"
@@ -198741,7 +198525,7 @@ exports[`Storyshots Views / Products / Product edit when data is fully loaded 1`
                 </div>
                 <button
                   class="MuiButtonBase-root-id IconButton-secondary-id Attributes-expansionBarButton-id IconButton-hoverOutline-id"
-                  data-test="attributes-expand"
+                  data-test-id="attributes-expand"
                   tabindex="0"
                   type="button"
                 >
@@ -198765,7 +198549,7 @@ exports[`Storyshots Views / Products / Product edit when data is fully loaded 1`
               >
                 <div
                   class="BasicAttributeRow-attributeSectionLabel-id"
-                  data-test="attribute-label"
+                  data-test-id="attribute-label"
                 >
                   <div
                     class="MuiTypography-root-id MuiTypography-body1-id"
@@ -198775,7 +198559,7 @@ exports[`Storyshots Views / Products / Product edit when data is fully loaded 1`
                 </div>
                 <div
                   class="BasicAttributeRow-value-id"
-                  data-test="attribute-value"
+                  data-test-id="attribute-value"
                 >
                   <div
                     class="SingleAutocompleteSelectField-container-id"
@@ -198845,7 +198629,7 @@ exports[`Storyshots Views / Products / Product edit when data is fully loaded 1`
               >
                 <div
                   class="BasicAttributeRow-attributeSectionLabel-id"
-                  data-test="attribute-label"
+                  data-test-id="attribute-label"
                 >
                   <div
                     class="MuiTypography-root-id MuiTypography-body1-id"
@@ -198855,7 +198639,7 @@ exports[`Storyshots Views / Products / Product edit when data is fully loaded 1`
                 </div>
                 <div
                   class="BasicAttributeRow-value-id"
-                  data-test="attribute-value"
+                  data-test-id="attribute-value"
                 >
                   <div
                     class="MultiAutocompleteSelectField-container-id"
@@ -198976,7 +198760,7 @@ exports[`Storyshots Views / Products / Product edit when data is fully loaded 1`
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                  data-test="button-add-variant"
+                  data-test-id="button-add-variant"
                   tabindex="0"
                   type="button"
                 >
@@ -199183,7 +198967,7 @@ exports[`Storyshots Views / Products / Product edit when data is fully loaded 1`
                     </td>
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colName-id"
-                      data-test="name"
+                      data-test-id="name"
                     >
                       Cordoba Oro
                       <span
@@ -199194,19 +198978,19 @@ exports[`Storyshots Views / Products / Product edit when data is fully loaded 1`
                     </td>
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colSku-id"
-                      data-test="sku"
+                      data-test-id="sku"
                     >
                       87192-94370
                     </td>
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colInventory-id"
-                      data-test="inventory"
+                      data-test-id="inventory"
                     >
                       In preorder
                     </td>
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colActions-id"
-                      data-test="actions"
+                      data-test-id="actions"
                     />
                   </tr>
                   <tr
@@ -199269,35 +199053,35 @@ exports[`Storyshots Views / Products / Product edit when data is fully loaded 1`
                     </td>
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colName-id"
-                      data-test="name"
+                      data-test-id="name"
                     >
                       silver
                     </td>
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colSku-id"
-                      data-test="sku"
+                      data-test-id="sku"
                     >
                       69055-15190
                     </td>
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colInventory-id"
-                      data-test="inventory"
+                      data-test-id="inventory"
                     >
                       In preorder
                     </td>
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colActions-id"
-                      data-test="actions"
+                      data-test-id="actions"
                     >
                       <div
-                        data-test="menu"
+                        data-test-id="menu"
                       >
                         <button
                           aria-haspopup="true"
                           aria-label="More"
                           class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                           color="primary"
-                          data-test-id="showMoreButton"
+                          data-test-id="show-more-button"
                           tabindex="0"
                           type="button"
                         >
@@ -199372,8 +199156,8 @@ exports[`Storyshots Views / Products / Product edit when data is fully loaded 1`
           />
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="metadataEditor"
             data-test-expanded="true"
+            data-test-id="metadata-editor"
             data-test-is-private="false"
           >
             <div
@@ -199388,7 +199172,7 @@ exports[`Storyshots Views / Products / Product edit when data is fully loaded 1`
                   Metadata
                   <button
                     class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test="expand"
+                    data-test-id="expand"
                     tabindex="0"
                     type="button"
                   >
@@ -199460,7 +199244,7 @@ exports[`Storyshots Views / Products / Product edit when data is fully loaded 1`
               >
                 <tr
                   class="MuiTableRow-root-id MuiTableRow-hover-id"
-                  data-test="field"
+                  data-test-id="field"
                 >
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colName-id"
@@ -199541,8 +199325,7 @@ exports[`Storyshots Views / Products / Product edit when data is fully loaded 1`
                   >
                     <button
                       class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                      data-test="deleteField"
-                      data-test-id="0"
+                      data-test-id="delete-field-0"
                       tabindex="0"
                       type="button"
                     >
@@ -199569,7 +199352,7 @@ exports[`Storyshots Views / Products / Product edit when data is fully loaded 1`
             >
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-                data-test="addField"
+                data-test-id="add-field"
                 tabindex="0"
                 type="button"
               >
@@ -199586,8 +199369,8 @@ exports[`Storyshots Views / Products / Product edit when data is fully loaded 1`
           />
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="metadataEditor"
             data-test-expanded="true"
+            data-test-id="metadata-editor"
             data-test-is-private="true"
           >
             <div
@@ -199602,7 +199385,7 @@ exports[`Storyshots Views / Products / Product edit when data is fully loaded 1`
                   Private Metadata
                   <button
                     class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test="expand"
+                    data-test-id="expand"
                     tabindex="0"
                     type="button"
                   >
@@ -199648,7 +199431,7 @@ exports[`Storyshots Views / Products / Product edit when data is fully loaded 1`
             >
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-                data-test="addField"
+                data-test-id="add-field"
                 tabindex="0"
                 type="button"
               >
@@ -199716,7 +199499,7 @@ exports[`Storyshots Views / Products / Product edit when data is fully loaded 1`
               />
               <div
                 class="SingleAutocompleteSelectField-container-id"
-                data-test="category"
+                data-test-id="category"
               >
                 <div
                   class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -199784,7 +199567,7 @@ exports[`Storyshots Views / Products / Product edit when data is fully loaded 1`
               />
               <div
                 class="MultiAutocompleteSelectField-container-id"
-                data-test="collections"
+                data-test-id="collections"
               >
                 <div
                   class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -199862,7 +199645,7 @@ exports[`Storyshots Views / Products / Product edit when data is fully loaded 1`
                     </div>
                     <button
                       class="MuiButtonBase-root-id IconButton-secondary-id MultiAutocompleteSelectField-chipClose-id"
-                      data-test-id="collectionRemove"
+                      data-test-id="collection-remove"
                       tabindex="0"
                       type="button"
                     >
@@ -199941,7 +199724,7 @@ exports[`Storyshots Views / Products / Product edit when data is fully loaded 1`
             >
               <label
                 class="MuiFormControlLabel-root-id"
-                data-test="override-tax-type"
+                data-test-id="override-tax-type"
               >
                 <span
                   aria-disabled="false"
@@ -199999,7 +199782,7 @@ exports[`Storyshots Views / Products / Product edit when data is fully loaded 1`
               />
               <label
                 class="MuiFormControlLabel-root-id"
-                data-test="charge-taxes"
+                data-test-id="charge-taxes"
               >
                 <span
                   aria-disabled="false"
@@ -200054,7 +199837,7 @@ exports[`Storyshots Views / Products / Product edit when data is fully loaded 1`
               </label>
               <div
                 class="SingleAutocompleteSelectField-container-id ProductTaxes-select-id"
-                data-test="select-tax-type"
+                data-test-id="select-tax-type"
               >
                 <div
                   class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -200217,8 +200000,7 @@ exports[`Storyshots Views / Products / Product edit when loading data 1`] = `
               />
               <div
                 class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-                data-test="richTextEditor"
-                data-test-id="description"
+                data-test-id="rich-text-editor-description"
               >
                 <label
                   class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiFormLabel-focused-id MuiInputLabel-focused-id"
@@ -200305,7 +200087,7 @@ exports[`Storyshots Views / Products / Product edit when loading data 1`] = `
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                  data-test="button-upload-image"
+                  data-test-id="button-upload-image"
                   tabindex="0"
                   type="button"
                 >
@@ -200738,8 +200520,8 @@ exports[`Storyshots Views / Products / Product edit when loading data 1`] = `
           />
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="metadataEditor"
             data-test-expanded="true"
+            data-test-id="metadata-editor"
             data-test-is-private="false"
           >
             <div
@@ -200754,7 +200536,7 @@ exports[`Storyshots Views / Products / Product edit when loading data 1`] = `
                   Metadata
                   <button
                     class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test="expand"
+                    data-test-id="expand"
                     tabindex="0"
                     type="button"
                   >
@@ -200799,8 +200581,8 @@ exports[`Storyshots Views / Products / Product edit when loading data 1`] = `
           />
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="metadataEditor"
             data-test-expanded="true"
+            data-test-id="metadata-editor"
             data-test-is-private="true"
           >
             <div
@@ -200815,7 +200597,7 @@ exports[`Storyshots Views / Products / Product edit when loading data 1`] = `
                   Private Metadata
                   <button
                     class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test="expand"
+                    data-test-id="expand"
                     tabindex="0"
                     type="button"
                   >
@@ -200911,7 +200693,7 @@ exports[`Storyshots Views / Products / Product edit when loading data 1`] = `
               />
               <div
                 class="SingleAutocompleteSelectField-container-id"
-                data-test="category"
+                data-test-id="category"
               >
                 <div
                   class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -200980,7 +200762,7 @@ exports[`Storyshots Views / Products / Product edit when loading data 1`] = `
               />
               <div
                 class="MultiAutocompleteSelectField-container-id"
-                data-test="collections"
+                data-test-id="collections"
               >
                 <div
                   class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -201096,7 +200878,7 @@ exports[`Storyshots Views / Products / Product edit when loading data 1`] = `
             >
               <label
                 class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
-                data-test="override-tax-type"
+                data-test-id="override-tax-type"
               >
                 <span
                   aria-disabled="true"
@@ -201145,7 +200927,7 @@ exports[`Storyshots Views / Products / Product edit when loading data 1`] = `
               />
               <label
                 class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
-                data-test="charge-taxes"
+                data-test-id="charge-taxes"
               >
                 <span
                   aria-disabled="true"
@@ -201288,8 +201070,7 @@ exports[`Storyshots Views / Products / Product edit when product has no images 1
               />
               <div
                 class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-                data-test="richTextEditor"
-                data-test-id="description"
+                data-test-id="rich-text-editor-description"
               >
                 <label
                   class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-focused-id MuiInputLabel-focused-id"
@@ -201375,7 +201156,7 @@ exports[`Storyshots Views / Products / Product edit when product has no images 1
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                  data-test="button-upload-image"
+                  data-test-id="button-upload-image"
                   tabindex="0"
                   type="button"
                 >
@@ -201471,7 +201252,7 @@ exports[`Storyshots Views / Products / Product edit when product has no images 1
                 </div>
                 <button
                   class="MuiButtonBase-root-id IconButton-secondary-id Attributes-expansionBarButton-id IconButton-hoverOutline-id"
-                  data-test="attributes-expand"
+                  data-test-id="attributes-expand"
                   tabindex="0"
                   type="button"
                 >
@@ -201495,7 +201276,7 @@ exports[`Storyshots Views / Products / Product edit when product has no images 1
               >
                 <div
                   class="BasicAttributeRow-attributeSectionLabel-id"
-                  data-test="attribute-label"
+                  data-test-id="attribute-label"
                 >
                   <div
                     class="MuiTypography-root-id MuiTypography-body1-id"
@@ -201505,7 +201286,7 @@ exports[`Storyshots Views / Products / Product edit when product has no images 1
                 </div>
                 <div
                   class="BasicAttributeRow-value-id"
-                  data-test="attribute-value"
+                  data-test-id="attribute-value"
                 >
                   <div
                     class="SingleAutocompleteSelectField-container-id"
@@ -201575,7 +201356,7 @@ exports[`Storyshots Views / Products / Product edit when product has no images 1
               >
                 <div
                   class="BasicAttributeRow-attributeSectionLabel-id"
-                  data-test="attribute-label"
+                  data-test-id="attribute-label"
                 >
                   <div
                     class="MuiTypography-root-id MuiTypography-body1-id"
@@ -201585,7 +201366,7 @@ exports[`Storyshots Views / Products / Product edit when product has no images 1
                 </div>
                 <div
                   class="BasicAttributeRow-value-id"
-                  data-test="attribute-value"
+                  data-test-id="attribute-value"
                 >
                   <div
                     class="MultiAutocompleteSelectField-container-id"
@@ -201706,7 +201487,7 @@ exports[`Storyshots Views / Products / Product edit when product has no images 1
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                  data-test="button-add-variant"
+                  data-test-id="button-add-variant"
                   tabindex="0"
                   type="button"
                 >
@@ -201913,7 +201694,7 @@ exports[`Storyshots Views / Products / Product edit when product has no images 1
                     </td>
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colName-id"
-                      data-test="name"
+                      data-test-id="name"
                     >
                       Cordoba Oro
                       <span
@@ -201924,19 +201705,19 @@ exports[`Storyshots Views / Products / Product edit when product has no images 1
                     </td>
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colSku-id"
-                      data-test="sku"
+                      data-test-id="sku"
                     >
                       87192-94370
                     </td>
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colInventory-id"
-                      data-test="inventory"
+                      data-test-id="inventory"
                     >
                       In preorder
                     </td>
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colActions-id"
-                      data-test="actions"
+                      data-test-id="actions"
                     />
                   </tr>
                   <tr
@@ -201999,35 +201780,35 @@ exports[`Storyshots Views / Products / Product edit when product has no images 1
                     </td>
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colName-id"
-                      data-test="name"
+                      data-test-id="name"
                     >
                       silver
                     </td>
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colSku-id"
-                      data-test="sku"
+                      data-test-id="sku"
                     >
                       69055-15190
                     </td>
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colInventory-id"
-                      data-test="inventory"
+                      data-test-id="inventory"
                     >
                       In preorder
                     </td>
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colActions-id"
-                      data-test="actions"
+                      data-test-id="actions"
                     >
                       <div
-                        data-test="menu"
+                        data-test-id="menu"
                       >
                         <button
                           aria-haspopup="true"
                           aria-label="More"
                           class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                           color="primary"
-                          data-test-id="showMoreButton"
+                          data-test-id="show-more-button"
                           tabindex="0"
                           type="button"
                         >
@@ -202102,8 +201883,8 @@ exports[`Storyshots Views / Products / Product edit when product has no images 1
           />
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="metadataEditor"
             data-test-expanded="true"
+            data-test-id="metadata-editor"
             data-test-is-private="false"
           >
             <div
@@ -202118,7 +201899,7 @@ exports[`Storyshots Views / Products / Product edit when product has no images 1
                   Metadata
                   <button
                     class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test="expand"
+                    data-test-id="expand"
                     tabindex="0"
                     type="button"
                   >
@@ -202190,7 +201971,7 @@ exports[`Storyshots Views / Products / Product edit when product has no images 1
               >
                 <tr
                   class="MuiTableRow-root-id MuiTableRow-hover-id"
-                  data-test="field"
+                  data-test-id="field"
                 >
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colName-id"
@@ -202271,8 +202052,7 @@ exports[`Storyshots Views / Products / Product edit when product has no images 1
                   >
                     <button
                       class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                      data-test="deleteField"
-                      data-test-id="0"
+                      data-test-id="delete-field-0"
                       tabindex="0"
                       type="button"
                     >
@@ -202299,7 +202079,7 @@ exports[`Storyshots Views / Products / Product edit when product has no images 1
             >
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-                data-test="addField"
+                data-test-id="add-field"
                 tabindex="0"
                 type="button"
               >
@@ -202316,8 +202096,8 @@ exports[`Storyshots Views / Products / Product edit when product has no images 1
           />
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="metadataEditor"
             data-test-expanded="true"
+            data-test-id="metadata-editor"
             data-test-is-private="true"
           >
             <div
@@ -202332,7 +202112,7 @@ exports[`Storyshots Views / Products / Product edit when product has no images 1
                   Private Metadata
                   <button
                     class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test="expand"
+                    data-test-id="expand"
                     tabindex="0"
                     type="button"
                   >
@@ -202378,7 +202158,7 @@ exports[`Storyshots Views / Products / Product edit when product has no images 1
             >
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-                data-test="addField"
+                data-test-id="add-field"
                 tabindex="0"
                 type="button"
               >
@@ -202446,7 +202226,7 @@ exports[`Storyshots Views / Products / Product edit when product has no images 1
               />
               <div
                 class="SingleAutocompleteSelectField-container-id"
-                data-test="category"
+                data-test-id="category"
               >
                 <div
                   class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -202514,7 +202294,7 @@ exports[`Storyshots Views / Products / Product edit when product has no images 1
               />
               <div
                 class="MultiAutocompleteSelectField-container-id"
-                data-test="collections"
+                data-test-id="collections"
               >
                 <div
                   class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -202592,7 +202372,7 @@ exports[`Storyshots Views / Products / Product edit when product has no images 1
                     </div>
                     <button
                       class="MuiButtonBase-root-id IconButton-secondary-id MultiAutocompleteSelectField-chipClose-id"
-                      data-test-id="collectionRemove"
+                      data-test-id="collection-remove"
                       tabindex="0"
                       type="button"
                     >
@@ -202671,7 +202451,7 @@ exports[`Storyshots Views / Products / Product edit when product has no images 1
             >
               <label
                 class="MuiFormControlLabel-root-id"
-                data-test="override-tax-type"
+                data-test-id="override-tax-type"
               >
                 <span
                   aria-disabled="false"
@@ -202729,7 +202509,7 @@ exports[`Storyshots Views / Products / Product edit when product has no images 1
               />
               <label
                 class="MuiFormControlLabel-root-id"
-                data-test="charge-taxes"
+                data-test-id="charge-taxes"
               >
                 <span
                   aria-disabled="false"
@@ -202784,7 +202564,7 @@ exports[`Storyshots Views / Products / Product edit when product has no images 1
               </label>
               <div
                 class="SingleAutocompleteSelectField-container-id ProductTaxes-select-id"
-                data-test="select-tax-type"
+                data-test-id="select-tax-type"
               >
                 <div
                   class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -202940,8 +202720,7 @@ exports[`Storyshots Views / Products / Product edit when product has no variants
               />
               <div
                 class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-                data-test="richTextEditor"
-                data-test-id="description"
+                data-test-id="rich-text-editor-description"
               >
                 <label
                   class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-focused-id MuiInputLabel-focused-id"
@@ -203027,7 +202806,7 @@ exports[`Storyshots Views / Products / Product edit when product has no variants
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                  data-test="button-upload-image"
+                  data-test-id="button-upload-image"
                   tabindex="0"
                   type="button"
                 >
@@ -203061,7 +202840,7 @@ exports[`Storyshots Views / Products / Product edit when product has no variants
                 >
                   <div
                     class="MediaTile-mediaContainer-id"
-                    data-test="product-image"
+                    data-test-id="product-image"
                   >
                     <div
                       class="MediaTile-mediaOverlay-id"
@@ -203078,7 +202857,7 @@ exports[`Storyshots Views / Products / Product edit when product has no variants
                   </div>
                   <div
                     class="MediaTile-mediaContainer-id"
-                    data-test="product-image"
+                    data-test-id="product-image"
                   >
                     <div
                       class="MediaTile-mediaOverlay-id"
@@ -203095,7 +202874,7 @@ exports[`Storyshots Views / Products / Product edit when product has no variants
                   </div>
                   <div
                     class="MediaTile-mediaContainer-id"
-                    data-test="product-image"
+                    data-test-id="product-image"
                   >
                     <div
                       class="MediaTile-mediaOverlay-id"
@@ -203112,7 +202891,7 @@ exports[`Storyshots Views / Products / Product edit when product has no variants
                   </div>
                   <div
                     class="MediaTile-mediaContainer-id"
-                    data-test="product-image"
+                    data-test-id="product-image"
                   >
                     <div
                       class="MediaTile-mediaOverlay-id"
@@ -203129,7 +202908,7 @@ exports[`Storyshots Views / Products / Product edit when product has no variants
                   </div>
                   <div
                     class="MediaTile-mediaContainer-id"
-                    data-test="product-image"
+                    data-test-id="product-image"
                   >
                     <div
                       class="MediaTile-mediaOverlay-id"
@@ -203184,7 +202963,7 @@ exports[`Storyshots Views / Products / Product edit when product has no variants
                 </div>
                 <button
                   class="MuiButtonBase-root-id IconButton-secondary-id Attributes-expansionBarButton-id IconButton-hoverOutline-id"
-                  data-test="attributes-expand"
+                  data-test-id="attributes-expand"
                   tabindex="0"
                   type="button"
                 >
@@ -203208,7 +202987,7 @@ exports[`Storyshots Views / Products / Product edit when product has no variants
               >
                 <div
                   class="BasicAttributeRow-attributeSectionLabel-id"
-                  data-test="attribute-label"
+                  data-test-id="attribute-label"
                 >
                   <div
                     class="MuiTypography-root-id MuiTypography-body1-id"
@@ -203218,7 +202997,7 @@ exports[`Storyshots Views / Products / Product edit when product has no variants
                 </div>
                 <div
                   class="BasicAttributeRow-value-id"
-                  data-test="attribute-value"
+                  data-test-id="attribute-value"
                 >
                   <div
                     class="SingleAutocompleteSelectField-container-id"
@@ -203288,7 +203067,7 @@ exports[`Storyshots Views / Products / Product edit when product has no variants
               >
                 <div
                   class="BasicAttributeRow-attributeSectionLabel-id"
-                  data-test="attribute-label"
+                  data-test-id="attribute-label"
                 >
                   <div
                     class="MuiTypography-root-id MuiTypography-body1-id"
@@ -203298,7 +203077,7 @@ exports[`Storyshots Views / Products / Product edit when product has no variants
                 </div>
                 <div
                   class="BasicAttributeRow-value-id"
-                  data-test="attribute-value"
+                  data-test-id="attribute-value"
                 >
                   <div
                     class="MultiAutocompleteSelectField-container-id"
@@ -203704,8 +203483,8 @@ exports[`Storyshots Views / Products / Product edit when product has no variants
           />
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="metadataEditor"
             data-test-expanded="true"
+            data-test-id="metadata-editor"
             data-test-is-private="false"
           >
             <div
@@ -203720,7 +203499,7 @@ exports[`Storyshots Views / Products / Product edit when product has no variants
                   Metadata
                   <button
                     class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test="expand"
+                    data-test-id="expand"
                     tabindex="0"
                     type="button"
                   >
@@ -203792,7 +203571,7 @@ exports[`Storyshots Views / Products / Product edit when product has no variants
               >
                 <tr
                   class="MuiTableRow-root-id MuiTableRow-hover-id"
-                  data-test="field"
+                  data-test-id="field"
                 >
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colName-id"
@@ -203873,8 +203652,7 @@ exports[`Storyshots Views / Products / Product edit when product has no variants
                   >
                     <button
                       class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                      data-test="deleteField"
-                      data-test-id="0"
+                      data-test-id="delete-field-0"
                       tabindex="0"
                       type="button"
                     >
@@ -203901,7 +203679,7 @@ exports[`Storyshots Views / Products / Product edit when product has no variants
             >
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-                data-test="addField"
+                data-test-id="add-field"
                 tabindex="0"
                 type="button"
               >
@@ -203918,8 +203696,8 @@ exports[`Storyshots Views / Products / Product edit when product has no variants
           />
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="metadataEditor"
             data-test-expanded="true"
+            data-test-id="metadata-editor"
             data-test-is-private="true"
           >
             <div
@@ -203934,7 +203712,7 @@ exports[`Storyshots Views / Products / Product edit when product has no variants
                   Private Metadata
                   <button
                     class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test="expand"
+                    data-test-id="expand"
                     tabindex="0"
                     type="button"
                   >
@@ -203980,7 +203758,7 @@ exports[`Storyshots Views / Products / Product edit when product has no variants
             >
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-                data-test="addField"
+                data-test-id="add-field"
                 tabindex="0"
                 type="button"
               >
@@ -204048,7 +203826,7 @@ exports[`Storyshots Views / Products / Product edit when product has no variants
               />
               <div
                 class="SingleAutocompleteSelectField-container-id"
-                data-test="category"
+                data-test-id="category"
               >
                 <div
                   class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -204116,7 +203894,7 @@ exports[`Storyshots Views / Products / Product edit when product has no variants
               />
               <div
                 class="MultiAutocompleteSelectField-container-id"
-                data-test="collections"
+                data-test-id="collections"
               >
                 <div
                   class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -204194,7 +203972,7 @@ exports[`Storyshots Views / Products / Product edit when product has no variants
                     </div>
                     <button
                       class="MuiButtonBase-root-id IconButton-secondary-id MultiAutocompleteSelectField-chipClose-id"
-                      data-test-id="collectionRemove"
+                      data-test-id="collection-remove"
                       tabindex="0"
                       type="button"
                     >
@@ -204273,7 +204051,7 @@ exports[`Storyshots Views / Products / Product edit when product has no variants
             >
               <label
                 class="MuiFormControlLabel-root-id"
-                data-test="override-tax-type"
+                data-test-id="override-tax-type"
               >
                 <span
                   aria-disabled="false"
@@ -204331,7 +204109,7 @@ exports[`Storyshots Views / Products / Product edit when product has no variants
               />
               <label
                 class="MuiFormControlLabel-root-id"
-                data-test="charge-taxes"
+                data-test-id="charge-taxes"
               >
                 <span
                   aria-disabled="false"
@@ -204386,7 +204164,7 @@ exports[`Storyshots Views / Products / Product edit when product has no variants
               </label>
               <div
                 class="SingleAutocompleteSelectField-container-id ProductTaxes-select-id"
-                data-test="select-tax-type"
+                data-test-id="select-tax-type"
               >
                 <div
                   class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -204542,8 +204320,7 @@ exports[`Storyshots Views / Products / Product edit with channels 1`] = `
               />
               <div
                 class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-                data-test="richTextEditor"
-                data-test-id="description"
+                data-test-id="rich-text-editor-description"
               >
                 <label
                   class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-focused-id MuiInputLabel-focused-id"
@@ -204629,7 +204406,7 @@ exports[`Storyshots Views / Products / Product edit with channels 1`] = `
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                  data-test="button-upload-image"
+                  data-test-id="button-upload-image"
                   tabindex="0"
                   type="button"
                 >
@@ -204663,7 +204440,7 @@ exports[`Storyshots Views / Products / Product edit with channels 1`] = `
                 >
                   <div
                     class="MediaTile-mediaContainer-id"
-                    data-test="product-image"
+                    data-test-id="product-image"
                   >
                     <div
                       class="MediaTile-mediaOverlay-id"
@@ -204680,7 +204457,7 @@ exports[`Storyshots Views / Products / Product edit with channels 1`] = `
                   </div>
                   <div
                     class="MediaTile-mediaContainer-id"
-                    data-test="product-image"
+                    data-test-id="product-image"
                   >
                     <div
                       class="MediaTile-mediaOverlay-id"
@@ -204697,7 +204474,7 @@ exports[`Storyshots Views / Products / Product edit with channels 1`] = `
                   </div>
                   <div
                     class="MediaTile-mediaContainer-id"
-                    data-test="product-image"
+                    data-test-id="product-image"
                   >
                     <div
                       class="MediaTile-mediaOverlay-id"
@@ -204714,7 +204491,7 @@ exports[`Storyshots Views / Products / Product edit with channels 1`] = `
                   </div>
                   <div
                     class="MediaTile-mediaContainer-id"
-                    data-test="product-image"
+                    data-test-id="product-image"
                   >
                     <div
                       class="MediaTile-mediaOverlay-id"
@@ -204731,7 +204508,7 @@ exports[`Storyshots Views / Products / Product edit with channels 1`] = `
                   </div>
                   <div
                     class="MediaTile-mediaContainer-id"
-                    data-test="product-image"
+                    data-test-id="product-image"
                   >
                     <div
                       class="MediaTile-mediaOverlay-id"
@@ -204786,7 +204563,7 @@ exports[`Storyshots Views / Products / Product edit with channels 1`] = `
                 </div>
                 <button
                   class="MuiButtonBase-root-id IconButton-secondary-id Attributes-expansionBarButton-id IconButton-hoverOutline-id"
-                  data-test="attributes-expand"
+                  data-test-id="attributes-expand"
                   tabindex="0"
                   type="button"
                 >
@@ -204810,7 +204587,7 @@ exports[`Storyshots Views / Products / Product edit with channels 1`] = `
               >
                 <div
                   class="BasicAttributeRow-attributeSectionLabel-id"
-                  data-test="attribute-label"
+                  data-test-id="attribute-label"
                 >
                   <div
                     class="MuiTypography-root-id MuiTypography-body1-id"
@@ -204820,7 +204597,7 @@ exports[`Storyshots Views / Products / Product edit with channels 1`] = `
                 </div>
                 <div
                   class="BasicAttributeRow-value-id"
-                  data-test="attribute-value"
+                  data-test-id="attribute-value"
                 >
                   <div
                     class="SingleAutocompleteSelectField-container-id"
@@ -204890,7 +204667,7 @@ exports[`Storyshots Views / Products / Product edit with channels 1`] = `
               >
                 <div
                   class="BasicAttributeRow-attributeSectionLabel-id"
-                  data-test="attribute-label"
+                  data-test-id="attribute-label"
                 >
                   <div
                     class="MuiTypography-root-id MuiTypography-body1-id"
@@ -204900,7 +204677,7 @@ exports[`Storyshots Views / Products / Product edit with channels 1`] = `
                 </div>
                 <div
                   class="BasicAttributeRow-value-id"
-                  data-test="attribute-value"
+                  data-test-id="attribute-value"
                 >
                   <div
                     class="MultiAutocompleteSelectField-container-id"
@@ -205021,7 +204798,7 @@ exports[`Storyshots Views / Products / Product edit with channels 1`] = `
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                  data-test="button-add-variant"
+                  data-test-id="button-add-variant"
                   tabindex="0"
                   type="button"
                 >
@@ -205228,7 +205005,7 @@ exports[`Storyshots Views / Products / Product edit with channels 1`] = `
                     </td>
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colName-id"
-                      data-test="name"
+                      data-test-id="name"
                     >
                       Cordoba Oro
                       <span
@@ -205239,19 +205016,19 @@ exports[`Storyshots Views / Products / Product edit with channels 1`] = `
                     </td>
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colSku-id"
-                      data-test="sku"
+                      data-test-id="sku"
                     >
                       87192-94370
                     </td>
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colInventory-id"
-                      data-test="inventory"
+                      data-test-id="inventory"
                     >
                       In preorder
                     </td>
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colActions-id"
-                      data-test="actions"
+                      data-test-id="actions"
                     />
                   </tr>
                   <tr
@@ -205314,35 +205091,35 @@ exports[`Storyshots Views / Products / Product edit with channels 1`] = `
                     </td>
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colName-id"
-                      data-test="name"
+                      data-test-id="name"
                     >
                       silver
                     </td>
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colSku-id"
-                      data-test="sku"
+                      data-test-id="sku"
                     >
                       69055-15190
                     </td>
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colInventory-id"
-                      data-test="inventory"
+                      data-test-id="inventory"
                     >
                       In preorder
                     </td>
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colActions-id"
-                      data-test="actions"
+                      data-test-id="actions"
                     >
                       <div
-                        data-test="menu"
+                        data-test-id="menu"
                       >
                         <button
                           aria-haspopup="true"
                           aria-label="More"
                           class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                           color="primary"
-                          data-test-id="showMoreButton"
+                          data-test-id="show-more-button"
                           tabindex="0"
                           type="button"
                         >
@@ -205417,8 +205194,8 @@ exports[`Storyshots Views / Products / Product edit with channels 1`] = `
           />
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="metadataEditor"
             data-test-expanded="true"
+            data-test-id="metadata-editor"
             data-test-is-private="false"
           >
             <div
@@ -205433,7 +205210,7 @@ exports[`Storyshots Views / Products / Product edit with channels 1`] = `
                   Metadata
                   <button
                     class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test="expand"
+                    data-test-id="expand"
                     tabindex="0"
                     type="button"
                   >
@@ -205505,7 +205282,7 @@ exports[`Storyshots Views / Products / Product edit with channels 1`] = `
               >
                 <tr
                   class="MuiTableRow-root-id MuiTableRow-hover-id"
-                  data-test="field"
+                  data-test-id="field"
                 >
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colName-id"
@@ -205586,8 +205363,7 @@ exports[`Storyshots Views / Products / Product edit with channels 1`] = `
                   >
                     <button
                       class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                      data-test="deleteField"
-                      data-test-id="0"
+                      data-test-id="delete-field-0"
                       tabindex="0"
                       type="button"
                     >
@@ -205614,7 +205390,7 @@ exports[`Storyshots Views / Products / Product edit with channels 1`] = `
             >
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-                data-test="addField"
+                data-test-id="add-field"
                 tabindex="0"
                 type="button"
               >
@@ -205631,8 +205407,8 @@ exports[`Storyshots Views / Products / Product edit with channels 1`] = `
           />
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="metadataEditor"
             data-test-expanded="true"
+            data-test-id="metadata-editor"
             data-test-is-private="true"
           >
             <div
@@ -205647,7 +205423,7 @@ exports[`Storyshots Views / Products / Product edit with channels 1`] = `
                   Private Metadata
                   <button
                     class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test="expand"
+                    data-test-id="expand"
                     tabindex="0"
                     type="button"
                   >
@@ -205693,7 +205469,7 @@ exports[`Storyshots Views / Products / Product edit with channels 1`] = `
             >
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-                data-test="addField"
+                data-test-id="add-field"
                 tabindex="0"
                 type="button"
               >
@@ -205761,7 +205537,7 @@ exports[`Storyshots Views / Products / Product edit with channels 1`] = `
               />
               <div
                 class="SingleAutocompleteSelectField-container-id"
-                data-test="category"
+                data-test-id="category"
               >
                 <div
                   class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -205829,7 +205605,7 @@ exports[`Storyshots Views / Products / Product edit with channels 1`] = `
               />
               <div
                 class="MultiAutocompleteSelectField-container-id"
-                data-test="collections"
+                data-test-id="collections"
               >
                 <div
                   class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -205907,7 +205683,7 @@ exports[`Storyshots Views / Products / Product edit with channels 1`] = `
                     </div>
                     <button
                       class="MuiButtonBase-root-id IconButton-secondary-id MultiAutocompleteSelectField-chipClose-id"
-                      data-test-id="collectionRemove"
+                      data-test-id="collection-remove"
                       tabindex="0"
                       type="button"
                     >
@@ -205986,7 +205762,7 @@ exports[`Storyshots Views / Products / Product edit with channels 1`] = `
             >
               <label
                 class="MuiFormControlLabel-root-id"
-                data-test="override-tax-type"
+                data-test-id="override-tax-type"
               >
                 <span
                   aria-disabled="false"
@@ -206044,7 +205820,7 @@ exports[`Storyshots Views / Products / Product edit with channels 1`] = `
               />
               <label
                 class="MuiFormControlLabel-root-id"
-                data-test="charge-taxes"
+                data-test-id="charge-taxes"
               >
                 <span
                   aria-disabled="false"
@@ -206099,7 +205875,7 @@ exports[`Storyshots Views / Products / Product edit with channels 1`] = `
               </label>
               <div
                 class="SingleAutocompleteSelectField-container-id ProductTaxes-select-id"
-                data-test="select-tax-type"
+                data-test-id="select-tax-type"
               >
                 <div
                   class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -206576,14 +206352,14 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
         </div>
         <div
           class="ProductListPage-settings-id"
-          data-test="menu"
+          data-test-id="menu"
         >
           <button
             aria-haspopup="true"
             aria-label="More"
             class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
             color="primary"
-            data-test-id="showMoreButton"
+            data-test-id="show-more-button"
             tabindex="0"
             type="button"
           >
@@ -206642,7 +206418,7 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
           <div
             aria-label="button with select"
             class="MuiButtonGroup-root-id MuiButtonGroup-contained-id"
-            data-test="add-product"
+            data-test-id="add-product"
             role="group"
           >
             <button
@@ -206721,7 +206497,7 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
         </div>
         <div
           class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
-          data-test-id="searchInput"
+          data-test-id="search-input"
         >
           <div
             class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
@@ -206820,7 +206596,7 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                 </th>
                 <th
                   class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id ProductList-colName-id"
-                  data-test-id="colNameHeader"
+                  data-test-id="col-name-header"
                   scope="col"
                 >
                   <div
@@ -206857,7 +206633,7 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                 </th>
                 <th
                   class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id ProductList-colType-id"
-                  data-test-id="colTypeHeader"
+                  data-test-id="col-type-header"
                   scope="col"
                 >
                   <div
@@ -206872,7 +206648,7 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                 </th>
                 <th
                   class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id ProductList-colPublished-id"
-                  data-test-id="colAvailabilityHeader"
+                  data-test-id="col-availability-header"
                   scope="col"
                 >
                   <div
@@ -206887,7 +206663,7 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                 </th>
                 <th
                   class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id ProductList-colPrice-id"
-                  data-test-id="colPriceHeader"
+                  data-test-id="col-price-header"
                   scope="col"
                 >
                   <div
@@ -206979,8 +206755,7 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
             >
               <tr
                 class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test="id"
-                data-test-id="UHJvZHVjdDo2MQ=="
+                data-test-id="id-UHJvZHVjdDo2MQ=="
               >
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -207021,7 +206796,7 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="tableCellAvatar"
+                  data-test-id="table-cell-avatar"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -207042,7 +206817,7 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                         class="ProductList-colNameWrapper-id"
                       >
                         <span
-                          data-test="name"
+                          data-test-id="name"
                         >
                           Nebula Night Sky Paint
                         </span>
@@ -207057,14 +206832,14 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test="product-type"
+                  data-test-id="product-type"
                 >
                   Paint
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test="availability"
                   data-test-availability="true"
+                  data-test-id="availability"
                 >
                   <div
                     class="StatusLabel-container-id"
@@ -207085,15 +206860,14 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test="price"
+                  data-test-id="price"
                 >
                   $1.20 - $3.50
                 </td>
               </tr>
               <tr
                 class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test="id"
-                data-test-id="UHJvZHVjdDo2NA=="
+                data-test-id="id-UHJvZHVjdDo2NA=="
               >
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -207134,7 +206908,7 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="tableCellAvatar"
+                  data-test-id="table-cell-avatar"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -207155,7 +206929,7 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                         class="ProductList-colNameWrapper-id"
                       >
                         <span
-                          data-test="name"
+                          data-test-id="name"
                         >
                           Light Speed Yellow Paint
                         </span>
@@ -207170,14 +206944,14 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test="product-type"
+                  data-test-id="product-type"
                 >
                   Paint
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test="availability"
                   data-test-availability="true"
+                  data-test-id="availability"
                 >
                   <div
                     class="StatusLabel-container-id"
@@ -207198,15 +206972,14 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test="price"
+                  data-test-id="price"
                 >
                   $1.20 - $3.50
                 </td>
               </tr>
               <tr
                 class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test="id"
-                data-test-id="UHJvZHVjdDo2NQ=="
+                data-test-id="id-UHJvZHVjdDo2NQ=="
               >
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -207247,7 +207020,7 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="tableCellAvatar"
+                  data-test-id="table-cell-avatar"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -207268,7 +207041,7 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                         class="ProductList-colNameWrapper-id"
                       >
                         <span
-                          data-test="name"
+                          data-test-id="name"
                         >
                           Hyperspace Turquoise Paint
                         </span>
@@ -207283,14 +207056,14 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test="product-type"
+                  data-test-id="product-type"
                 >
                   Paint
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test="availability"
                   data-test-availability="true"
+                  data-test-id="availability"
                 >
                   <div
                     class="StatusLabel-container-id"
@@ -207311,15 +207084,14 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test="price"
+                  data-test-id="price"
                 >
                   $1.20 - $3.50
                 </td>
               </tr>
               <tr
                 class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test="id"
-                data-test-id="UHJvZHVjdDo3NQ=="
+                data-test-id="id-UHJvZHVjdDo3NQ=="
               >
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -207360,7 +207132,7 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="tableCellAvatar"
+                  data-test-id="table-cell-avatar"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -207381,7 +207153,7 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                         class="ProductList-colNameWrapper-id"
                       >
                         <span
-                          data-test="name"
+                          data-test-id="name"
                         >
                           Pineapple Juice
                         </span>
@@ -207396,14 +207168,14 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test="product-type"
+                  data-test-id="product-type"
                 >
                   Juice
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test="availability"
                   data-test-availability="true"
+                  data-test-id="availability"
                 >
                   <div
                     class="StatusLabel-container-id"
@@ -207424,15 +207196,14 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test="price"
+                  data-test-id="price"
                 >
                   $1.20 - $3.50
                 </td>
               </tr>
               <tr
                 class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test="id"
-                data-test-id="UHJvZHVjdDo3Ng=="
+                data-test-id="id-UHJvZHVjdDo3Ng=="
               >
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -207473,7 +207244,7 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="tableCellAvatar"
+                  data-test-id="table-cell-avatar"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -207494,7 +207265,7 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                         class="ProductList-colNameWrapper-id"
                       >
                         <span
-                          data-test="name"
+                          data-test-id="name"
                         >
                           Coconut Juice
                         </span>
@@ -207509,14 +207280,14 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test="product-type"
+                  data-test-id="product-type"
                 >
                   Juice
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test="availability"
                   data-test-availability="true"
+                  data-test-id="availability"
                 >
                   <div
                     class="StatusLabel-container-id"
@@ -207537,15 +207308,14 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test="price"
+                  data-test-id="price"
                 >
                   $1.20 - $3.50
                 </td>
               </tr>
               <tr
                 class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test="id"
-                data-test-id="UHJvZHVjdDo3Mg=="
+                data-test-id="id-UHJvZHVjdDo3Mg=="
               >
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -207586,7 +207356,7 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="tableCellAvatar"
+                  data-test-id="table-cell-avatar"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -207607,7 +207377,7 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                         class="ProductList-colNameWrapper-id"
                       >
                         <span
-                          data-test="name"
+                          data-test-id="name"
                         >
                           Apple Juice
                         </span>
@@ -207622,14 +207392,14 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test="product-type"
+                  data-test-id="product-type"
                 >
                   Juice
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test="availability"
                   data-test-availability="true"
+                  data-test-id="availability"
                 >
                   <div
                     class="StatusLabel-container-id"
@@ -207650,15 +207420,14 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test="price"
+                  data-test-id="price"
                 >
                   $1.20 - $3.50
                 </td>
               </tr>
               <tr
                 class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test="id"
-                data-test-id="UHJvZHVjdDo3MQ=="
+                data-test-id="id-UHJvZHVjdDo3MQ=="
               >
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -207699,7 +207468,7 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="tableCellAvatar"
+                  data-test-id="table-cell-avatar"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -207720,7 +207489,7 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                         class="ProductList-colNameWrapper-id"
                       >
                         <span
-                          data-test="name"
+                          data-test-id="name"
                         >
                           Orange Juice
                         </span>
@@ -207735,14 +207504,14 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test="product-type"
+                  data-test-id="product-type"
                 >
                   Juice
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test="availability"
                   data-test-availability="true"
+                  data-test-id="availability"
                 >
                   <div
                     class="StatusLabel-container-id"
@@ -207763,15 +207532,14 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test="price"
+                  data-test-id="price"
                 >
                   $1.20 - $3.50
                 </td>
               </tr>
               <tr
                 class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test="id"
-                data-test-id="UHJvZHVjdDo3NA=="
+                data-test-id="id-UHJvZHVjdDo3NA=="
               >
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -207812,7 +207580,7 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="tableCellAvatar"
+                  data-test-id="table-cell-avatar"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -207833,7 +207601,7 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                         class="ProductList-colNameWrapper-id"
                       >
                         <span
-                          data-test="name"
+                          data-test-id="name"
                         >
                           Banana Juice
                         </span>
@@ -207848,14 +207616,14 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test="product-type"
+                  data-test-id="product-type"
                 >
                   Juice
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test="availability"
                   data-test-availability="true"
+                  data-test-id="availability"
                 >
                   <div
                     class="StatusLabel-container-id"
@@ -207876,15 +207644,14 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test="price"
+                  data-test-id="price"
                 >
                   $1.20 - $3.50
                 </td>
               </tr>
               <tr
                 class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test="id"
-                data-test-id="UHJvZHVjdDo3OQ=="
+                data-test-id="id-UHJvZHVjdDo3OQ=="
               >
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -207925,7 +207692,7 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="tableCellAvatar"
+                  data-test-id="table-cell-avatar"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -207946,7 +207713,7 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                         class="ProductList-colNameWrapper-id"
                       >
                         <span
-                          data-test="name"
+                          data-test-id="name"
                         >
                           Bean Juice
                         </span>
@@ -207961,14 +207728,14 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test="product-type"
+                  data-test-id="product-type"
                 >
                   Juice
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test="availability"
                   data-test-availability="true"
+                  data-test-id="availability"
                 >
                   <div
                     class="StatusLabel-container-id"
@@ -207989,15 +207756,14 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test="price"
+                  data-test-id="price"
                 >
                   $1.20 - $3.50
                 </td>
               </tr>
               <tr
                 class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test="id"
-                data-test-id="UHJvZHVjdDo3Mw=="
+                data-test-id="id-UHJvZHVjdDo3Mw=="
               >
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -208038,7 +207804,7 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="tableCellAvatar"
+                  data-test-id="table-cell-avatar"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -208059,7 +207825,7 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                         class="ProductList-colNameWrapper-id"
                       >
                         <span
-                          data-test="name"
+                          data-test-id="name"
                         >
                           Carrot Juice
                         </span>
@@ -208074,14 +207840,14 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test="product-type"
+                  data-test-id="product-type"
                 >
                   Juice
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test="availability"
                   data-test-availability="true"
+                  data-test-id="availability"
                 >
                   <div
                     class="StatusLabel-container-id"
@@ -208102,15 +207868,14 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test="price"
+                  data-test-id="price"
                 >
                   $1.20 - $3.50
                 </td>
               </tr>
               <tr
                 class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test="id"
-                data-test-id="UHJvZHVjdDo3OA=="
+                data-test-id="id-UHJvZHVjdDo3OA=="
               >
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -208151,7 +207916,7 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="tableCellAvatar"
+                  data-test-id="table-cell-avatar"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -208172,7 +207937,7 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                         class="ProductList-colNameWrapper-id"
                       >
                         <span
-                          data-test="name"
+                          data-test-id="name"
                         >
                           Green Juice
                         </span>
@@ -208187,14 +207952,14 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test="product-type"
+                  data-test-id="product-type"
                 >
                   Juice
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test="availability"
                   data-test-availability="true"
+                  data-test-id="availability"
                 >
                   <div
                     class="StatusLabel-container-id"
@@ -208215,15 +207980,14 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test="price"
+                  data-test-id="price"
                 >
                   $1.20 - $3.50
                 </td>
               </tr>
               <tr
                 class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test="id"
-                data-test-id="UHJvZHVjdDo4OQ=="
+                data-test-id="id-UHJvZHVjdDo4OQ=="
               >
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -208264,7 +208028,7 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="tableCellAvatar"
+                  data-test-id="table-cell-avatar"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -208285,7 +208049,7 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                         class="ProductList-colNameWrapper-id"
                       >
                         <span
-                          data-test="name"
+                          data-test-id="name"
                         >
                           Code Division T-shirt
                         </span>
@@ -208300,14 +208064,14 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test="product-type"
+                  data-test-id="product-type"
                 >
                   Top (clothing)
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test="availability"
                   data-test-availability="true"
+                  data-test-id="availability"
                 >
                   <div
                     class="StatusLabel-container-id"
@@ -208328,15 +208092,14 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test="price"
+                  data-test-id="price"
                 >
                   $1.20 - $3.50
                 </td>
               </tr>
               <tr
                 class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test="id"
-                data-test-id="UHJvZHVjdDoxMDc="
+                data-test-id="id-UHJvZHVjdDoxMDc="
               >
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -208377,7 +208140,7 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="tableCellAvatar"
+                  data-test-id="table-cell-avatar"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -208398,7 +208161,7 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                         class="ProductList-colNameWrapper-id"
                       >
                         <span
-                          data-test="name"
+                          data-test-id="name"
                         >
                           Polo Shirt
                         </span>
@@ -208413,14 +208176,14 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test="product-type"
+                  data-test-id="product-type"
                 >
                   Top (clothing)
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test="availability"
                   data-test-availability="true"
+                  data-test-id="availability"
                 >
                   <div
                     class="StatusLabel-container-id"
@@ -208441,15 +208204,14 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test="price"
+                  data-test-id="price"
                 >
                   $1.20 - $3.50
                 </td>
               </tr>
               <tr
                 class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test="id"
-                data-test-id="UHJvZHVjdDoxMDg="
+                data-test-id="id-UHJvZHVjdDoxMDg="
               >
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -208490,7 +208252,7 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="tableCellAvatar"
+                  data-test-id="table-cell-avatar"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -208511,7 +208273,7 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                         class="ProductList-colNameWrapper-id"
                       >
                         <span
-                          data-test="name"
+                          data-test-id="name"
                         >
                           Polo Shirt
                         </span>
@@ -208526,14 +208288,14 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test="product-type"
+                  data-test-id="product-type"
                 >
                   Top (clothing)
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test="availability"
                   data-test-availability="true"
+                  data-test-id="availability"
                 >
                   <div
                     class="StatusLabel-container-id"
@@ -208554,15 +208316,14 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test="price"
+                  data-test-id="price"
                 >
                   $1.20 - $3.50
                 </td>
               </tr>
               <tr
                 class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test="id"
-                data-test-id="UHJvZHVjdDoxMDk="
+                data-test-id="id-UHJvZHVjdDoxMDk="
               >
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -208603,7 +208364,7 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="tableCellAvatar"
+                  data-test-id="table-cell-avatar"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -208624,7 +208385,7 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                         class="ProductList-colNameWrapper-id"
                       >
                         <span
-                          data-test="name"
+                          data-test-id="name"
                         >
                           Polo Shirt
                         </span>
@@ -208639,14 +208400,14 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test="product-type"
+                  data-test-id="product-type"
                 >
                   Top (clothing)
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test="availability"
                   data-test-availability="true"
+                  data-test-id="availability"
                 >
                   <div
                     class="StatusLabel-container-id"
@@ -208667,15 +208428,14 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test="price"
+                  data-test-id="price"
                 >
                   $1.20 - $3.50
                 </td>
               </tr>
               <tr
                 class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test="id"
-                data-test-id="UHJvZHVjdDoxMTA="
+                data-test-id="id-UHJvZHVjdDoxMTA="
               >
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -208716,7 +208476,7 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="tableCellAvatar"
+                  data-test-id="table-cell-avatar"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -208737,7 +208497,7 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                         class="ProductList-colNameWrapper-id"
                       >
                         <span
-                          data-test="name"
+                          data-test-id="name"
                         >
                           Polo Shirt
                         </span>
@@ -208752,14 +208512,14 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test="product-type"
+                  data-test-id="product-type"
                 >
                   Top (clothing)
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test="availability"
                   data-test-availability="true"
+                  data-test-id="availability"
                 >
                   <div
                     class="StatusLabel-container-id"
@@ -208780,15 +208540,14 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test="price"
+                  data-test-id="price"
                 >
                   $1.20 - $3.50
                 </td>
               </tr>
               <tr
                 class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test="id"
-                data-test-id="UHJvZHVjdDoxMTU="
+                data-test-id="id-UHJvZHVjdDoxMTU="
               >
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -208829,7 +208588,7 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="tableCellAvatar"
+                  data-test-id="table-cell-avatar"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -208850,7 +208609,7 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                         class="ProductList-colNameWrapper-id"
                       >
                         <span
-                          data-test="name"
+                          data-test-id="name"
                         >
                           Black Hoodie
                         </span>
@@ -208865,14 +208624,14 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test="product-type"
+                  data-test-id="product-type"
                 >
                   Top (clothing)
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test="availability"
                   data-test-availability="true"
+                  data-test-id="availability"
                 >
                   <div
                     class="StatusLabel-container-id"
@@ -208893,15 +208652,14 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test="price"
+                  data-test-id="price"
                 >
                   $1.20 - $3.50
                 </td>
               </tr>
               <tr
                 class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test="id"
-                data-test-id="UHJvZHVjdDoxMTY="
+                data-test-id="id-UHJvZHVjdDoxMTY="
               >
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -208942,7 +208700,7 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="tableCellAvatar"
+                  data-test-id="table-cell-avatar"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -208963,7 +208721,7 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                         class="ProductList-colNameWrapper-id"
                       >
                         <span
-                          data-test="name"
+                          data-test-id="name"
                         >
                           Blue Hoodie
                         </span>
@@ -208978,14 +208736,14 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test="product-type"
+                  data-test-id="product-type"
                 >
                   Top (clothing)
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test="availability"
                   data-test-availability="true"
+                  data-test-id="availability"
                 >
                   <div
                     class="StatusLabel-container-id"
@@ -209006,15 +208764,14 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test="price"
+                  data-test-id="price"
                 >
                   $1.20 - $3.50
                 </td>
               </tr>
               <tr
                 class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test="id"
-                data-test-id="UHJvZHVjdDoxMTc="
+                data-test-id="id-UHJvZHVjdDoxMTc="
               >
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -209055,7 +208812,7 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="tableCellAvatar"
+                  data-test-id="table-cell-avatar"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -209076,7 +208833,7 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                         class="ProductList-colNameWrapper-id"
                       >
                         <span
-                          data-test="name"
+                          data-test-id="name"
                         >
                           Mustard Hoodie
                         </span>
@@ -209091,14 +208848,14 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test="product-type"
+                  data-test-id="product-type"
                 >
                   Top (clothing)
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test="availability"
                   data-test-availability="true"
+                  data-test-id="availability"
                 >
                   <div
                     class="StatusLabel-container-id"
@@ -209119,15 +208876,14 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test="price"
+                  data-test-id="price"
                 >
                   $1.20 - $3.50
                 </td>
               </tr>
               <tr
                 class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test="id"
-                data-test-id="UHJvZHVjdDo4NQ=="
+                data-test-id="id-UHJvZHVjdDo4NQ=="
               >
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -209168,7 +208924,7 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="tableCellAvatar"
+                  data-test-id="table-cell-avatar"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -209189,7 +208945,7 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                         class="ProductList-colNameWrapper-id"
                       >
                         <span
-                          data-test="name"
+                          data-test-id="name"
                         >
                           Colored Parrot Cushion
                         </span>
@@ -209204,14 +208960,14 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test="product-type"
+                  data-test-id="product-type"
                 >
                   Cushion
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test="availability"
                   data-test-availability="true"
+                  data-test-id="availability"
                 >
                   <div
                     class="StatusLabel-container-id"
@@ -209232,7 +208988,7 @@ exports[`Storyshots Views / Products / Product list default 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test="price"
+                  data-test-id="price"
                 >
                   $1.20 - $3.50
                 </td>
@@ -209267,14 +209023,14 @@ exports[`Storyshots Views / Products / Product list limits reached 1`] = `
         </div>
         <div
           class="ProductListPage-settings-id"
-          data-test="menu"
+          data-test-id="menu"
         >
           <button
             aria-haspopup="true"
             aria-label="More"
             class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
             color="primary"
-            data-test-id="showMoreButton"
+            data-test-id="show-more-button"
             tabindex="0"
             type="button"
           >
@@ -209333,7 +209089,7 @@ exports[`Storyshots Views / Products / Product list limits reached 1`] = `
           <div
             aria-label="button with select"
             class="MuiButtonGroup-root-id MuiButtonGroup-contained-id"
-            data-test="add-product"
+            data-test-id="add-product"
             role="group"
           >
             <button
@@ -209492,7 +209248,7 @@ exports[`Storyshots Views / Products / Product list limits reached 1`] = `
         </div>
         <div
           class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
-          data-test-id="searchInput"
+          data-test-id="search-input"
         >
           <div
             class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
@@ -209591,7 +209347,7 @@ exports[`Storyshots Views / Products / Product list limits reached 1`] = `
                 </th>
                 <th
                   class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id ProductList-colName-id"
-                  data-test-id="colNameHeader"
+                  data-test-id="col-name-header"
                   scope="col"
                 >
                   <div
@@ -209628,7 +209384,7 @@ exports[`Storyshots Views / Products / Product list limits reached 1`] = `
                 </th>
                 <th
                   class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id ProductList-colType-id"
-                  data-test-id="colTypeHeader"
+                  data-test-id="col-type-header"
                   scope="col"
                 >
                   <div
@@ -209643,7 +209399,7 @@ exports[`Storyshots Views / Products / Product list limits reached 1`] = `
                 </th>
                 <th
                   class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id ProductList-colPublished-id"
-                  data-test-id="colAvailabilityHeader"
+                  data-test-id="col-availability-header"
                   scope="col"
                 >
                   <div
@@ -209658,7 +209414,7 @@ exports[`Storyshots Views / Products / Product list limits reached 1`] = `
                 </th>
                 <th
                   class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id ProductList-colPrice-id"
-                  data-test-id="colPriceHeader"
+                  data-test-id="col-price-header"
                   scope="col"
                 >
                   <div
@@ -209750,8 +209506,7 @@ exports[`Storyshots Views / Products / Product list limits reached 1`] = `
             >
               <tr
                 class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test="id"
-                data-test-id="UHJvZHVjdDo2MQ=="
+                data-test-id="id-UHJvZHVjdDo2MQ=="
               >
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -209792,7 +209547,7 @@ exports[`Storyshots Views / Products / Product list limits reached 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="tableCellAvatar"
+                  data-test-id="table-cell-avatar"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -209813,7 +209568,7 @@ exports[`Storyshots Views / Products / Product list limits reached 1`] = `
                         class="ProductList-colNameWrapper-id"
                       >
                         <span
-                          data-test="name"
+                          data-test-id="name"
                         >
                           Nebula Night Sky Paint
                         </span>
@@ -209828,14 +209583,14 @@ exports[`Storyshots Views / Products / Product list limits reached 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test="product-type"
+                  data-test-id="product-type"
                 >
                   Paint
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test="availability"
                   data-test-availability="true"
+                  data-test-id="availability"
                 >
                   <div
                     class="StatusLabel-container-id"
@@ -209856,15 +209611,14 @@ exports[`Storyshots Views / Products / Product list limits reached 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test="price"
+                  data-test-id="price"
                 >
                   $1.20 - $3.50
                 </td>
               </tr>
               <tr
                 class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test="id"
-                data-test-id="UHJvZHVjdDo2NA=="
+                data-test-id="id-UHJvZHVjdDo2NA=="
               >
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -209905,7 +209659,7 @@ exports[`Storyshots Views / Products / Product list limits reached 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="tableCellAvatar"
+                  data-test-id="table-cell-avatar"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -209926,7 +209680,7 @@ exports[`Storyshots Views / Products / Product list limits reached 1`] = `
                         class="ProductList-colNameWrapper-id"
                       >
                         <span
-                          data-test="name"
+                          data-test-id="name"
                         >
                           Light Speed Yellow Paint
                         </span>
@@ -209941,14 +209695,14 @@ exports[`Storyshots Views / Products / Product list limits reached 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test="product-type"
+                  data-test-id="product-type"
                 >
                   Paint
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test="availability"
                   data-test-availability="true"
+                  data-test-id="availability"
                 >
                   <div
                     class="StatusLabel-container-id"
@@ -209969,15 +209723,14 @@ exports[`Storyshots Views / Products / Product list limits reached 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test="price"
+                  data-test-id="price"
                 >
                   $1.20 - $3.50
                 </td>
               </tr>
               <tr
                 class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test="id"
-                data-test-id="UHJvZHVjdDo2NQ=="
+                data-test-id="id-UHJvZHVjdDo2NQ=="
               >
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -210018,7 +209771,7 @@ exports[`Storyshots Views / Products / Product list limits reached 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="tableCellAvatar"
+                  data-test-id="table-cell-avatar"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -210039,7 +209792,7 @@ exports[`Storyshots Views / Products / Product list limits reached 1`] = `
                         class="ProductList-colNameWrapper-id"
                       >
                         <span
-                          data-test="name"
+                          data-test-id="name"
                         >
                           Hyperspace Turquoise Paint
                         </span>
@@ -210054,14 +209807,14 @@ exports[`Storyshots Views / Products / Product list limits reached 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test="product-type"
+                  data-test-id="product-type"
                 >
                   Paint
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test="availability"
                   data-test-availability="true"
+                  data-test-id="availability"
                 >
                   <div
                     class="StatusLabel-container-id"
@@ -210082,15 +209835,14 @@ exports[`Storyshots Views / Products / Product list limits reached 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test="price"
+                  data-test-id="price"
                 >
                   $1.20 - $3.50
                 </td>
               </tr>
               <tr
                 class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test="id"
-                data-test-id="UHJvZHVjdDo3NQ=="
+                data-test-id="id-UHJvZHVjdDo3NQ=="
               >
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -210131,7 +209883,7 @@ exports[`Storyshots Views / Products / Product list limits reached 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="tableCellAvatar"
+                  data-test-id="table-cell-avatar"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -210152,7 +209904,7 @@ exports[`Storyshots Views / Products / Product list limits reached 1`] = `
                         class="ProductList-colNameWrapper-id"
                       >
                         <span
-                          data-test="name"
+                          data-test-id="name"
                         >
                           Pineapple Juice
                         </span>
@@ -210167,14 +209919,14 @@ exports[`Storyshots Views / Products / Product list limits reached 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test="product-type"
+                  data-test-id="product-type"
                 >
                   Juice
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test="availability"
                   data-test-availability="true"
+                  data-test-id="availability"
                 >
                   <div
                     class="StatusLabel-container-id"
@@ -210195,15 +209947,14 @@ exports[`Storyshots Views / Products / Product list limits reached 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test="price"
+                  data-test-id="price"
                 >
                   $1.20 - $3.50
                 </td>
               </tr>
               <tr
                 class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test="id"
-                data-test-id="UHJvZHVjdDo3Ng=="
+                data-test-id="id-UHJvZHVjdDo3Ng=="
               >
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -210244,7 +209995,7 @@ exports[`Storyshots Views / Products / Product list limits reached 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="tableCellAvatar"
+                  data-test-id="table-cell-avatar"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -210265,7 +210016,7 @@ exports[`Storyshots Views / Products / Product list limits reached 1`] = `
                         class="ProductList-colNameWrapper-id"
                       >
                         <span
-                          data-test="name"
+                          data-test-id="name"
                         >
                           Coconut Juice
                         </span>
@@ -210280,14 +210031,14 @@ exports[`Storyshots Views / Products / Product list limits reached 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test="product-type"
+                  data-test-id="product-type"
                 >
                   Juice
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test="availability"
                   data-test-availability="true"
+                  data-test-id="availability"
                 >
                   <div
                     class="StatusLabel-container-id"
@@ -210308,15 +210059,14 @@ exports[`Storyshots Views / Products / Product list limits reached 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test="price"
+                  data-test-id="price"
                 >
                   $1.20 - $3.50
                 </td>
               </tr>
               <tr
                 class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test="id"
-                data-test-id="UHJvZHVjdDo3Mg=="
+                data-test-id="id-UHJvZHVjdDo3Mg=="
               >
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -210357,7 +210107,7 @@ exports[`Storyshots Views / Products / Product list limits reached 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="tableCellAvatar"
+                  data-test-id="table-cell-avatar"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -210378,7 +210128,7 @@ exports[`Storyshots Views / Products / Product list limits reached 1`] = `
                         class="ProductList-colNameWrapper-id"
                       >
                         <span
-                          data-test="name"
+                          data-test-id="name"
                         >
                           Apple Juice
                         </span>
@@ -210393,14 +210143,14 @@ exports[`Storyshots Views / Products / Product list limits reached 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test="product-type"
+                  data-test-id="product-type"
                 >
                   Juice
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test="availability"
                   data-test-availability="true"
+                  data-test-id="availability"
                 >
                   <div
                     class="StatusLabel-container-id"
@@ -210421,15 +210171,14 @@ exports[`Storyshots Views / Products / Product list limits reached 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test="price"
+                  data-test-id="price"
                 >
                   $1.20 - $3.50
                 </td>
               </tr>
               <tr
                 class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test="id"
-                data-test-id="UHJvZHVjdDo3MQ=="
+                data-test-id="id-UHJvZHVjdDo3MQ=="
               >
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -210470,7 +210219,7 @@ exports[`Storyshots Views / Products / Product list limits reached 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="tableCellAvatar"
+                  data-test-id="table-cell-avatar"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -210491,7 +210240,7 @@ exports[`Storyshots Views / Products / Product list limits reached 1`] = `
                         class="ProductList-colNameWrapper-id"
                       >
                         <span
-                          data-test="name"
+                          data-test-id="name"
                         >
                           Orange Juice
                         </span>
@@ -210506,14 +210255,14 @@ exports[`Storyshots Views / Products / Product list limits reached 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test="product-type"
+                  data-test-id="product-type"
                 >
                   Juice
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test="availability"
                   data-test-availability="true"
+                  data-test-id="availability"
                 >
                   <div
                     class="StatusLabel-container-id"
@@ -210534,15 +210283,14 @@ exports[`Storyshots Views / Products / Product list limits reached 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test="price"
+                  data-test-id="price"
                 >
                   $1.20 - $3.50
                 </td>
               </tr>
               <tr
                 class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test="id"
-                data-test-id="UHJvZHVjdDo3NA=="
+                data-test-id="id-UHJvZHVjdDo3NA=="
               >
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -210583,7 +210331,7 @@ exports[`Storyshots Views / Products / Product list limits reached 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="tableCellAvatar"
+                  data-test-id="table-cell-avatar"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -210604,7 +210352,7 @@ exports[`Storyshots Views / Products / Product list limits reached 1`] = `
                         class="ProductList-colNameWrapper-id"
                       >
                         <span
-                          data-test="name"
+                          data-test-id="name"
                         >
                           Banana Juice
                         </span>
@@ -210619,14 +210367,14 @@ exports[`Storyshots Views / Products / Product list limits reached 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test="product-type"
+                  data-test-id="product-type"
                 >
                   Juice
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test="availability"
                   data-test-availability="true"
+                  data-test-id="availability"
                 >
                   <div
                     class="StatusLabel-container-id"
@@ -210647,15 +210395,14 @@ exports[`Storyshots Views / Products / Product list limits reached 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test="price"
+                  data-test-id="price"
                 >
                   $1.20 - $3.50
                 </td>
               </tr>
               <tr
                 class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test="id"
-                data-test-id="UHJvZHVjdDo3OQ=="
+                data-test-id="id-UHJvZHVjdDo3OQ=="
               >
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -210696,7 +210443,7 @@ exports[`Storyshots Views / Products / Product list limits reached 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="tableCellAvatar"
+                  data-test-id="table-cell-avatar"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -210717,7 +210464,7 @@ exports[`Storyshots Views / Products / Product list limits reached 1`] = `
                         class="ProductList-colNameWrapper-id"
                       >
                         <span
-                          data-test="name"
+                          data-test-id="name"
                         >
                           Bean Juice
                         </span>
@@ -210732,14 +210479,14 @@ exports[`Storyshots Views / Products / Product list limits reached 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test="product-type"
+                  data-test-id="product-type"
                 >
                   Juice
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test="availability"
                   data-test-availability="true"
+                  data-test-id="availability"
                 >
                   <div
                     class="StatusLabel-container-id"
@@ -210760,15 +210507,14 @@ exports[`Storyshots Views / Products / Product list limits reached 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test="price"
+                  data-test-id="price"
                 >
                   $1.20 - $3.50
                 </td>
               </tr>
               <tr
                 class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test="id"
-                data-test-id="UHJvZHVjdDo3Mw=="
+                data-test-id="id-UHJvZHVjdDo3Mw=="
               >
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -210809,7 +210555,7 @@ exports[`Storyshots Views / Products / Product list limits reached 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="tableCellAvatar"
+                  data-test-id="table-cell-avatar"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -210830,7 +210576,7 @@ exports[`Storyshots Views / Products / Product list limits reached 1`] = `
                         class="ProductList-colNameWrapper-id"
                       >
                         <span
-                          data-test="name"
+                          data-test-id="name"
                         >
                           Carrot Juice
                         </span>
@@ -210845,14 +210591,14 @@ exports[`Storyshots Views / Products / Product list limits reached 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test="product-type"
+                  data-test-id="product-type"
                 >
                   Juice
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test="availability"
                   data-test-availability="true"
+                  data-test-id="availability"
                 >
                   <div
                     class="StatusLabel-container-id"
@@ -210873,15 +210619,14 @@ exports[`Storyshots Views / Products / Product list limits reached 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test="price"
+                  data-test-id="price"
                 >
                   $1.20 - $3.50
                 </td>
               </tr>
               <tr
                 class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test="id"
-                data-test-id="UHJvZHVjdDo3OA=="
+                data-test-id="id-UHJvZHVjdDo3OA=="
               >
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -210922,7 +210667,7 @@ exports[`Storyshots Views / Products / Product list limits reached 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="tableCellAvatar"
+                  data-test-id="table-cell-avatar"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -210943,7 +210688,7 @@ exports[`Storyshots Views / Products / Product list limits reached 1`] = `
                         class="ProductList-colNameWrapper-id"
                       >
                         <span
-                          data-test="name"
+                          data-test-id="name"
                         >
                           Green Juice
                         </span>
@@ -210958,14 +210703,14 @@ exports[`Storyshots Views / Products / Product list limits reached 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test="product-type"
+                  data-test-id="product-type"
                 >
                   Juice
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test="availability"
                   data-test-availability="true"
+                  data-test-id="availability"
                 >
                   <div
                     class="StatusLabel-container-id"
@@ -210986,15 +210731,14 @@ exports[`Storyshots Views / Products / Product list limits reached 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test="price"
+                  data-test-id="price"
                 >
                   $1.20 - $3.50
                 </td>
               </tr>
               <tr
                 class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test="id"
-                data-test-id="UHJvZHVjdDo4OQ=="
+                data-test-id="id-UHJvZHVjdDo4OQ=="
               >
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -211035,7 +210779,7 @@ exports[`Storyshots Views / Products / Product list limits reached 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="tableCellAvatar"
+                  data-test-id="table-cell-avatar"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -211056,7 +210800,7 @@ exports[`Storyshots Views / Products / Product list limits reached 1`] = `
                         class="ProductList-colNameWrapper-id"
                       >
                         <span
-                          data-test="name"
+                          data-test-id="name"
                         >
                           Code Division T-shirt
                         </span>
@@ -211071,14 +210815,14 @@ exports[`Storyshots Views / Products / Product list limits reached 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test="product-type"
+                  data-test-id="product-type"
                 >
                   Top (clothing)
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test="availability"
                   data-test-availability="true"
+                  data-test-id="availability"
                 >
                   <div
                     class="StatusLabel-container-id"
@@ -211099,15 +210843,14 @@ exports[`Storyshots Views / Products / Product list limits reached 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test="price"
+                  data-test-id="price"
                 >
                   $1.20 - $3.50
                 </td>
               </tr>
               <tr
                 class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test="id"
-                data-test-id="UHJvZHVjdDoxMDc="
+                data-test-id="id-UHJvZHVjdDoxMDc="
               >
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -211148,7 +210891,7 @@ exports[`Storyshots Views / Products / Product list limits reached 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="tableCellAvatar"
+                  data-test-id="table-cell-avatar"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -211169,7 +210912,7 @@ exports[`Storyshots Views / Products / Product list limits reached 1`] = `
                         class="ProductList-colNameWrapper-id"
                       >
                         <span
-                          data-test="name"
+                          data-test-id="name"
                         >
                           Polo Shirt
                         </span>
@@ -211184,14 +210927,14 @@ exports[`Storyshots Views / Products / Product list limits reached 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test="product-type"
+                  data-test-id="product-type"
                 >
                   Top (clothing)
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test="availability"
                   data-test-availability="true"
+                  data-test-id="availability"
                 >
                   <div
                     class="StatusLabel-container-id"
@@ -211212,15 +210955,14 @@ exports[`Storyshots Views / Products / Product list limits reached 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test="price"
+                  data-test-id="price"
                 >
                   $1.20 - $3.50
                 </td>
               </tr>
               <tr
                 class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test="id"
-                data-test-id="UHJvZHVjdDoxMDg="
+                data-test-id="id-UHJvZHVjdDoxMDg="
               >
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -211261,7 +211003,7 @@ exports[`Storyshots Views / Products / Product list limits reached 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="tableCellAvatar"
+                  data-test-id="table-cell-avatar"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -211282,7 +211024,7 @@ exports[`Storyshots Views / Products / Product list limits reached 1`] = `
                         class="ProductList-colNameWrapper-id"
                       >
                         <span
-                          data-test="name"
+                          data-test-id="name"
                         >
                           Polo Shirt
                         </span>
@@ -211297,14 +211039,14 @@ exports[`Storyshots Views / Products / Product list limits reached 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test="product-type"
+                  data-test-id="product-type"
                 >
                   Top (clothing)
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test="availability"
                   data-test-availability="true"
+                  data-test-id="availability"
                 >
                   <div
                     class="StatusLabel-container-id"
@@ -211325,15 +211067,14 @@ exports[`Storyshots Views / Products / Product list limits reached 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test="price"
+                  data-test-id="price"
                 >
                   $1.20 - $3.50
                 </td>
               </tr>
               <tr
                 class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test="id"
-                data-test-id="UHJvZHVjdDoxMDk="
+                data-test-id="id-UHJvZHVjdDoxMDk="
               >
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -211374,7 +211115,7 @@ exports[`Storyshots Views / Products / Product list limits reached 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="tableCellAvatar"
+                  data-test-id="table-cell-avatar"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -211395,7 +211136,7 @@ exports[`Storyshots Views / Products / Product list limits reached 1`] = `
                         class="ProductList-colNameWrapper-id"
                       >
                         <span
-                          data-test="name"
+                          data-test-id="name"
                         >
                           Polo Shirt
                         </span>
@@ -211410,14 +211151,14 @@ exports[`Storyshots Views / Products / Product list limits reached 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test="product-type"
+                  data-test-id="product-type"
                 >
                   Top (clothing)
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test="availability"
                   data-test-availability="true"
+                  data-test-id="availability"
                 >
                   <div
                     class="StatusLabel-container-id"
@@ -211438,15 +211179,14 @@ exports[`Storyshots Views / Products / Product list limits reached 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test="price"
+                  data-test-id="price"
                 >
                   $1.20 - $3.50
                 </td>
               </tr>
               <tr
                 class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test="id"
-                data-test-id="UHJvZHVjdDoxMTA="
+                data-test-id="id-UHJvZHVjdDoxMTA="
               >
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -211487,7 +211227,7 @@ exports[`Storyshots Views / Products / Product list limits reached 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="tableCellAvatar"
+                  data-test-id="table-cell-avatar"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -211508,7 +211248,7 @@ exports[`Storyshots Views / Products / Product list limits reached 1`] = `
                         class="ProductList-colNameWrapper-id"
                       >
                         <span
-                          data-test="name"
+                          data-test-id="name"
                         >
                           Polo Shirt
                         </span>
@@ -211523,14 +211263,14 @@ exports[`Storyshots Views / Products / Product list limits reached 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test="product-type"
+                  data-test-id="product-type"
                 >
                   Top (clothing)
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test="availability"
                   data-test-availability="true"
+                  data-test-id="availability"
                 >
                   <div
                     class="StatusLabel-container-id"
@@ -211551,15 +211291,14 @@ exports[`Storyshots Views / Products / Product list limits reached 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test="price"
+                  data-test-id="price"
                 >
                   $1.20 - $3.50
                 </td>
               </tr>
               <tr
                 class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test="id"
-                data-test-id="UHJvZHVjdDoxMTU="
+                data-test-id="id-UHJvZHVjdDoxMTU="
               >
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -211600,7 +211339,7 @@ exports[`Storyshots Views / Products / Product list limits reached 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="tableCellAvatar"
+                  data-test-id="table-cell-avatar"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -211621,7 +211360,7 @@ exports[`Storyshots Views / Products / Product list limits reached 1`] = `
                         class="ProductList-colNameWrapper-id"
                       >
                         <span
-                          data-test="name"
+                          data-test-id="name"
                         >
                           Black Hoodie
                         </span>
@@ -211636,14 +211375,14 @@ exports[`Storyshots Views / Products / Product list limits reached 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test="product-type"
+                  data-test-id="product-type"
                 >
                   Top (clothing)
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test="availability"
                   data-test-availability="true"
+                  data-test-id="availability"
                 >
                   <div
                     class="StatusLabel-container-id"
@@ -211664,15 +211403,14 @@ exports[`Storyshots Views / Products / Product list limits reached 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test="price"
+                  data-test-id="price"
                 >
                   $1.20 - $3.50
                 </td>
               </tr>
               <tr
                 class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test="id"
-                data-test-id="UHJvZHVjdDoxMTY="
+                data-test-id="id-UHJvZHVjdDoxMTY="
               >
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -211713,7 +211451,7 @@ exports[`Storyshots Views / Products / Product list limits reached 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="tableCellAvatar"
+                  data-test-id="table-cell-avatar"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -211734,7 +211472,7 @@ exports[`Storyshots Views / Products / Product list limits reached 1`] = `
                         class="ProductList-colNameWrapper-id"
                       >
                         <span
-                          data-test="name"
+                          data-test-id="name"
                         >
                           Blue Hoodie
                         </span>
@@ -211749,14 +211487,14 @@ exports[`Storyshots Views / Products / Product list limits reached 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test="product-type"
+                  data-test-id="product-type"
                 >
                   Top (clothing)
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test="availability"
                   data-test-availability="true"
+                  data-test-id="availability"
                 >
                   <div
                     class="StatusLabel-container-id"
@@ -211777,15 +211515,14 @@ exports[`Storyshots Views / Products / Product list limits reached 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test="price"
+                  data-test-id="price"
                 >
                   $1.20 - $3.50
                 </td>
               </tr>
               <tr
                 class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test="id"
-                data-test-id="UHJvZHVjdDoxMTc="
+                data-test-id="id-UHJvZHVjdDoxMTc="
               >
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -211826,7 +211563,7 @@ exports[`Storyshots Views / Products / Product list limits reached 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="tableCellAvatar"
+                  data-test-id="table-cell-avatar"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -211847,7 +211584,7 @@ exports[`Storyshots Views / Products / Product list limits reached 1`] = `
                         class="ProductList-colNameWrapper-id"
                       >
                         <span
-                          data-test="name"
+                          data-test-id="name"
                         >
                           Mustard Hoodie
                         </span>
@@ -211862,14 +211599,14 @@ exports[`Storyshots Views / Products / Product list limits reached 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test="product-type"
+                  data-test-id="product-type"
                 >
                   Top (clothing)
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test="availability"
                   data-test-availability="true"
+                  data-test-id="availability"
                 >
                   <div
                     class="StatusLabel-container-id"
@@ -211890,15 +211627,14 @@ exports[`Storyshots Views / Products / Product list limits reached 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test="price"
+                  data-test-id="price"
                 >
                   $1.20 - $3.50
                 </td>
               </tr>
               <tr
                 class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test="id"
-                data-test-id="UHJvZHVjdDo4NQ=="
+                data-test-id="id-UHJvZHVjdDo4NQ=="
               >
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -211939,7 +211675,7 @@ exports[`Storyshots Views / Products / Product list limits reached 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="tableCellAvatar"
+                  data-test-id="table-cell-avatar"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -211960,7 +211696,7 @@ exports[`Storyshots Views / Products / Product list limits reached 1`] = `
                         class="ProductList-colNameWrapper-id"
                       >
                         <span
-                          data-test="name"
+                          data-test-id="name"
                         >
                           Colored Parrot Cushion
                         </span>
@@ -211975,14 +211711,14 @@ exports[`Storyshots Views / Products / Product list limits reached 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test="product-type"
+                  data-test-id="product-type"
                 >
                   Cushion
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test="availability"
                   data-test-availability="true"
+                  data-test-id="availability"
                 >
                   <div
                     class="StatusLabel-container-id"
@@ -212003,7 +211739,7 @@ exports[`Storyshots Views / Products / Product list limits reached 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test="price"
+                  data-test-id="price"
                 >
                   $1.20 - $3.50
                 </td>
@@ -212038,14 +211774,14 @@ exports[`Storyshots Views / Products / Product list loading 1`] = `
         </div>
         <div
           class="ProductListPage-settings-id"
-          data-test="menu"
+          data-test-id="menu"
         >
           <button
             aria-haspopup="true"
             aria-label="More"
             class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
             color="primary"
-            data-test-id="showMoreButton"
+            data-test-id="show-more-button"
             tabindex="0"
             type="button"
           >
@@ -212104,7 +211840,7 @@ exports[`Storyshots Views / Products / Product list loading 1`] = `
           <div
             aria-label="button with select"
             class="MuiButtonGroup-root-id MuiButtonGroup-contained-id"
-            data-test="add-product"
+            data-test-id="add-product"
             role="group"
           >
             <button
@@ -212183,7 +211919,7 @@ exports[`Storyshots Views / Products / Product list loading 1`] = `
         </div>
         <div
           class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
-          data-test-id="searchInput"
+          data-test-id="search-input"
         >
           <div
             class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
@@ -212295,7 +212031,7 @@ exports[`Storyshots Views / Products / Product list loading 1`] = `
                 </th>
                 <th
                   class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id ProductList-colName-id"
-                  data-test-id="colNameHeader"
+                  data-test-id="col-name-header"
                   scope="col"
                 >
                   <div
@@ -212332,7 +212068,7 @@ exports[`Storyshots Views / Products / Product list loading 1`] = `
                 </th>
                 <th
                   class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id ProductList-colType-id"
-                  data-test-id="colTypeHeader"
+                  data-test-id="col-type-header"
                   scope="col"
                 >
                   <div
@@ -212347,7 +212083,7 @@ exports[`Storyshots Views / Products / Product list loading 1`] = `
                 </th>
                 <th
                   class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id ProductList-colPublished-id"
-                  data-test-id="colAvailabilityHeader"
+                  data-test-id="col-availability-header"
                   scope="col"
                 >
                   <div
@@ -212362,7 +212098,7 @@ exports[`Storyshots Views / Products / Product list loading 1`] = `
                 </th>
                 <th
                   class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id ProductList-colPrice-id"
-                  data-test-id="colPriceHeader"
+                  data-test-id="col-price-header"
                   scope="col"
                 >
                   <div
@@ -212455,8 +212191,7 @@ exports[`Storyshots Views / Products / Product list loading 1`] = `
             >
               <tr
                 class="MuiTableRow-root-id ProductList-link-id"
-                data-test="id"
-                data-test-id="skeleton"
+                data-test-id="id-skeleton"
               >
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -212499,7 +212234,7 @@ exports[`Storyshots Views / Products / Product list loading 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="tableCellAvatar"
+                  data-test-id="table-cell-avatar"
                 >
                   <div
                     class="Avatar-content-id"
@@ -212535,7 +212270,7 @@ exports[`Storyshots Views / Products / Product list loading 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test="product-type"
+                  data-test-id="product-type"
                 >
                   <span
                     class="Skeleton-skeleton-id"
@@ -212546,8 +212281,8 @@ exports[`Storyshots Views / Products / Product list loading 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test="availability"
                   data-test-availability="false"
+                  data-test-id="availability"
                 >
                   <span
                     class="Skeleton-skeleton-id"
@@ -212558,7 +212293,7 @@ exports[`Storyshots Views / Products / Product list loading 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test="price"
+                  data-test-id="price"
                 >
                   <span
                     class="Skeleton-skeleton-id"
@@ -212598,14 +212333,14 @@ exports[`Storyshots Views / Products / Product list no channels 1`] = `
         </div>
         <div
           class="ProductListPage-settings-id"
-          data-test="menu"
+          data-test-id="menu"
         >
           <button
             aria-haspopup="true"
             aria-label="More"
             class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
             color="primary"
-            data-test-id="showMoreButton"
+            data-test-id="show-more-button"
             tabindex="0"
             type="button"
           >
@@ -212664,7 +212399,7 @@ exports[`Storyshots Views / Products / Product list no channels 1`] = `
           <div
             aria-label="button with select"
             class="MuiButtonGroup-root-id MuiButtonGroup-contained-id"
-            data-test="add-product"
+            data-test-id="add-product"
             role="group"
           >
             <button
@@ -212743,7 +212478,7 @@ exports[`Storyshots Views / Products / Product list no channels 1`] = `
         </div>
         <div
           class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
-          data-test-id="searchInput"
+          data-test-id="search-input"
         >
           <div
             class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
@@ -212842,7 +212577,7 @@ exports[`Storyshots Views / Products / Product list no channels 1`] = `
                 </th>
                 <th
                   class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id ProductList-colName-id"
-                  data-test-id="colNameHeader"
+                  data-test-id="col-name-header"
                   scope="col"
                 >
                   <div
@@ -212879,7 +212614,7 @@ exports[`Storyshots Views / Products / Product list no channels 1`] = `
                 </th>
                 <th
                   class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id ProductList-colType-id"
-                  data-test-id="colTypeHeader"
+                  data-test-id="col-type-header"
                   scope="col"
                 >
                   <div
@@ -212894,7 +212629,7 @@ exports[`Storyshots Views / Products / Product list no channels 1`] = `
                 </th>
                 <th
                   class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id ProductList-colPublished-id TableCellHeader-disabled-id"
-                  data-test-id="colAvailabilityHeader"
+                  data-test-id="col-availability-header"
                   scope="col"
                 >
                   <div
@@ -212909,7 +212644,7 @@ exports[`Storyshots Views / Products / Product list no channels 1`] = `
                 </th>
                 <th
                   class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id ProductList-colPrice-id TableCellHeader-disabled-id"
-                  data-test-id="colPriceHeader"
+                  data-test-id="col-price-header"
                   scope="col"
                 >
                   <div
@@ -213001,8 +212736,7 @@ exports[`Storyshots Views / Products / Product list no channels 1`] = `
             >
               <tr
                 class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test="id"
-                data-test-id="UHJvZHVjdDo2MQ=="
+                data-test-id="id-UHJvZHVjdDo2MQ=="
               >
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -213043,7 +212777,7 @@ exports[`Storyshots Views / Products / Product list no channels 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="tableCellAvatar"
+                  data-test-id="table-cell-avatar"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -213064,7 +212798,7 @@ exports[`Storyshots Views / Products / Product list no channels 1`] = `
                         class="ProductList-colNameWrapper-id"
                       >
                         <span
-                          data-test="name"
+                          data-test-id="name"
                         >
                           Nebula Night Sky Paint
                         </span>
@@ -213079,28 +212813,27 @@ exports[`Storyshots Views / Products / Product list no channels 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test="product-type"
+                  data-test-id="product-type"
                 >
                   Paint
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test="availability"
                   data-test-availability="false"
+                  data-test-id="availability"
                 >
                   -
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test="price"
+                  data-test-id="price"
                 >
                   -
                 </td>
               </tr>
               <tr
                 class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test="id"
-                data-test-id="UHJvZHVjdDo2NA=="
+                data-test-id="id-UHJvZHVjdDo2NA=="
               >
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -213141,7 +212874,7 @@ exports[`Storyshots Views / Products / Product list no channels 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="tableCellAvatar"
+                  data-test-id="table-cell-avatar"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -213162,7 +212895,7 @@ exports[`Storyshots Views / Products / Product list no channels 1`] = `
                         class="ProductList-colNameWrapper-id"
                       >
                         <span
-                          data-test="name"
+                          data-test-id="name"
                         >
                           Light Speed Yellow Paint
                         </span>
@@ -213177,28 +212910,27 @@ exports[`Storyshots Views / Products / Product list no channels 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test="product-type"
+                  data-test-id="product-type"
                 >
                   Paint
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test="availability"
                   data-test-availability="false"
+                  data-test-id="availability"
                 >
                   -
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test="price"
+                  data-test-id="price"
                 >
                   -
                 </td>
               </tr>
               <tr
                 class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test="id"
-                data-test-id="UHJvZHVjdDo2NQ=="
+                data-test-id="id-UHJvZHVjdDo2NQ=="
               >
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -213239,7 +212971,7 @@ exports[`Storyshots Views / Products / Product list no channels 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="tableCellAvatar"
+                  data-test-id="table-cell-avatar"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -213260,7 +212992,7 @@ exports[`Storyshots Views / Products / Product list no channels 1`] = `
                         class="ProductList-colNameWrapper-id"
                       >
                         <span
-                          data-test="name"
+                          data-test-id="name"
                         >
                           Hyperspace Turquoise Paint
                         </span>
@@ -213275,28 +213007,27 @@ exports[`Storyshots Views / Products / Product list no channels 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test="product-type"
+                  data-test-id="product-type"
                 >
                   Paint
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test="availability"
                   data-test-availability="false"
+                  data-test-id="availability"
                 >
                   -
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test="price"
+                  data-test-id="price"
                 >
                   -
                 </td>
               </tr>
               <tr
                 class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test="id"
-                data-test-id="UHJvZHVjdDo3NQ=="
+                data-test-id="id-UHJvZHVjdDo3NQ=="
               >
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -213337,7 +213068,7 @@ exports[`Storyshots Views / Products / Product list no channels 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="tableCellAvatar"
+                  data-test-id="table-cell-avatar"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -213358,7 +213089,7 @@ exports[`Storyshots Views / Products / Product list no channels 1`] = `
                         class="ProductList-colNameWrapper-id"
                       >
                         <span
-                          data-test="name"
+                          data-test-id="name"
                         >
                           Pineapple Juice
                         </span>
@@ -213373,28 +213104,27 @@ exports[`Storyshots Views / Products / Product list no channels 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test="product-type"
+                  data-test-id="product-type"
                 >
                   Juice
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test="availability"
                   data-test-availability="false"
+                  data-test-id="availability"
                 >
                   -
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test="price"
+                  data-test-id="price"
                 >
                   -
                 </td>
               </tr>
               <tr
                 class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test="id"
-                data-test-id="UHJvZHVjdDo3Ng=="
+                data-test-id="id-UHJvZHVjdDo3Ng=="
               >
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -213435,7 +213165,7 @@ exports[`Storyshots Views / Products / Product list no channels 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="tableCellAvatar"
+                  data-test-id="table-cell-avatar"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -213456,7 +213186,7 @@ exports[`Storyshots Views / Products / Product list no channels 1`] = `
                         class="ProductList-colNameWrapper-id"
                       >
                         <span
-                          data-test="name"
+                          data-test-id="name"
                         >
                           Coconut Juice
                         </span>
@@ -213471,28 +213201,27 @@ exports[`Storyshots Views / Products / Product list no channels 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test="product-type"
+                  data-test-id="product-type"
                 >
                   Juice
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test="availability"
                   data-test-availability="false"
+                  data-test-id="availability"
                 >
                   -
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test="price"
+                  data-test-id="price"
                 >
                   -
                 </td>
               </tr>
               <tr
                 class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test="id"
-                data-test-id="UHJvZHVjdDo3Mg=="
+                data-test-id="id-UHJvZHVjdDo3Mg=="
               >
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -213533,7 +213262,7 @@ exports[`Storyshots Views / Products / Product list no channels 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="tableCellAvatar"
+                  data-test-id="table-cell-avatar"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -213554,7 +213283,7 @@ exports[`Storyshots Views / Products / Product list no channels 1`] = `
                         class="ProductList-colNameWrapper-id"
                       >
                         <span
-                          data-test="name"
+                          data-test-id="name"
                         >
                           Apple Juice
                         </span>
@@ -213569,28 +213298,27 @@ exports[`Storyshots Views / Products / Product list no channels 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test="product-type"
+                  data-test-id="product-type"
                 >
                   Juice
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test="availability"
                   data-test-availability="false"
+                  data-test-id="availability"
                 >
                   -
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test="price"
+                  data-test-id="price"
                 >
                   -
                 </td>
               </tr>
               <tr
                 class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test="id"
-                data-test-id="UHJvZHVjdDo3MQ=="
+                data-test-id="id-UHJvZHVjdDo3MQ=="
               >
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -213631,7 +213359,7 @@ exports[`Storyshots Views / Products / Product list no channels 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="tableCellAvatar"
+                  data-test-id="table-cell-avatar"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -213652,7 +213380,7 @@ exports[`Storyshots Views / Products / Product list no channels 1`] = `
                         class="ProductList-colNameWrapper-id"
                       >
                         <span
-                          data-test="name"
+                          data-test-id="name"
                         >
                           Orange Juice
                         </span>
@@ -213667,28 +213395,27 @@ exports[`Storyshots Views / Products / Product list no channels 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test="product-type"
+                  data-test-id="product-type"
                 >
                   Juice
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test="availability"
                   data-test-availability="false"
+                  data-test-id="availability"
                 >
                   -
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test="price"
+                  data-test-id="price"
                 >
                   -
                 </td>
               </tr>
               <tr
                 class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test="id"
-                data-test-id="UHJvZHVjdDo3NA=="
+                data-test-id="id-UHJvZHVjdDo3NA=="
               >
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -213729,7 +213456,7 @@ exports[`Storyshots Views / Products / Product list no channels 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="tableCellAvatar"
+                  data-test-id="table-cell-avatar"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -213750,7 +213477,7 @@ exports[`Storyshots Views / Products / Product list no channels 1`] = `
                         class="ProductList-colNameWrapper-id"
                       >
                         <span
-                          data-test="name"
+                          data-test-id="name"
                         >
                           Banana Juice
                         </span>
@@ -213765,28 +213492,27 @@ exports[`Storyshots Views / Products / Product list no channels 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test="product-type"
+                  data-test-id="product-type"
                 >
                   Juice
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test="availability"
                   data-test-availability="false"
+                  data-test-id="availability"
                 >
                   -
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test="price"
+                  data-test-id="price"
                 >
                   -
                 </td>
               </tr>
               <tr
                 class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test="id"
-                data-test-id="UHJvZHVjdDo3OQ=="
+                data-test-id="id-UHJvZHVjdDo3OQ=="
               >
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -213827,7 +213553,7 @@ exports[`Storyshots Views / Products / Product list no channels 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="tableCellAvatar"
+                  data-test-id="table-cell-avatar"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -213848,7 +213574,7 @@ exports[`Storyshots Views / Products / Product list no channels 1`] = `
                         class="ProductList-colNameWrapper-id"
                       >
                         <span
-                          data-test="name"
+                          data-test-id="name"
                         >
                           Bean Juice
                         </span>
@@ -213863,28 +213589,27 @@ exports[`Storyshots Views / Products / Product list no channels 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test="product-type"
+                  data-test-id="product-type"
                 >
                   Juice
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test="availability"
                   data-test-availability="false"
+                  data-test-id="availability"
                 >
                   -
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test="price"
+                  data-test-id="price"
                 >
                   -
                 </td>
               </tr>
               <tr
                 class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test="id"
-                data-test-id="UHJvZHVjdDo3Mw=="
+                data-test-id="id-UHJvZHVjdDo3Mw=="
               >
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -213925,7 +213650,7 @@ exports[`Storyshots Views / Products / Product list no channels 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="tableCellAvatar"
+                  data-test-id="table-cell-avatar"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -213946,7 +213671,7 @@ exports[`Storyshots Views / Products / Product list no channels 1`] = `
                         class="ProductList-colNameWrapper-id"
                       >
                         <span
-                          data-test="name"
+                          data-test-id="name"
                         >
                           Carrot Juice
                         </span>
@@ -213961,28 +213686,27 @@ exports[`Storyshots Views / Products / Product list no channels 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test="product-type"
+                  data-test-id="product-type"
                 >
                   Juice
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test="availability"
                   data-test-availability="false"
+                  data-test-id="availability"
                 >
                   -
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test="price"
+                  data-test-id="price"
                 >
                   -
                 </td>
               </tr>
               <tr
                 class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test="id"
-                data-test-id="UHJvZHVjdDo3OA=="
+                data-test-id="id-UHJvZHVjdDo3OA=="
               >
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -214023,7 +213747,7 @@ exports[`Storyshots Views / Products / Product list no channels 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="tableCellAvatar"
+                  data-test-id="table-cell-avatar"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -214044,7 +213768,7 @@ exports[`Storyshots Views / Products / Product list no channels 1`] = `
                         class="ProductList-colNameWrapper-id"
                       >
                         <span
-                          data-test="name"
+                          data-test-id="name"
                         >
                           Green Juice
                         </span>
@@ -214059,28 +213783,27 @@ exports[`Storyshots Views / Products / Product list no channels 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test="product-type"
+                  data-test-id="product-type"
                 >
                   Juice
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test="availability"
                   data-test-availability="false"
+                  data-test-id="availability"
                 >
                   -
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test="price"
+                  data-test-id="price"
                 >
                   -
                 </td>
               </tr>
               <tr
                 class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test="id"
-                data-test-id="UHJvZHVjdDo4OQ=="
+                data-test-id="id-UHJvZHVjdDo4OQ=="
               >
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -214121,7 +213844,7 @@ exports[`Storyshots Views / Products / Product list no channels 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="tableCellAvatar"
+                  data-test-id="table-cell-avatar"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -214142,7 +213865,7 @@ exports[`Storyshots Views / Products / Product list no channels 1`] = `
                         class="ProductList-colNameWrapper-id"
                       >
                         <span
-                          data-test="name"
+                          data-test-id="name"
                         >
                           Code Division T-shirt
                         </span>
@@ -214157,28 +213880,27 @@ exports[`Storyshots Views / Products / Product list no channels 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test="product-type"
+                  data-test-id="product-type"
                 >
                   Top (clothing)
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test="availability"
                   data-test-availability="false"
+                  data-test-id="availability"
                 >
                   -
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test="price"
+                  data-test-id="price"
                 >
                   -
                 </td>
               </tr>
               <tr
                 class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test="id"
-                data-test-id="UHJvZHVjdDoxMDc="
+                data-test-id="id-UHJvZHVjdDoxMDc="
               >
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -214219,7 +213941,7 @@ exports[`Storyshots Views / Products / Product list no channels 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="tableCellAvatar"
+                  data-test-id="table-cell-avatar"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -214240,7 +213962,7 @@ exports[`Storyshots Views / Products / Product list no channels 1`] = `
                         class="ProductList-colNameWrapper-id"
                       >
                         <span
-                          data-test="name"
+                          data-test-id="name"
                         >
                           Polo Shirt
                         </span>
@@ -214255,28 +213977,27 @@ exports[`Storyshots Views / Products / Product list no channels 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test="product-type"
+                  data-test-id="product-type"
                 >
                   Top (clothing)
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test="availability"
                   data-test-availability="false"
+                  data-test-id="availability"
                 >
                   -
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test="price"
+                  data-test-id="price"
                 >
                   -
                 </td>
               </tr>
               <tr
                 class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test="id"
-                data-test-id="UHJvZHVjdDoxMDg="
+                data-test-id="id-UHJvZHVjdDoxMDg="
               >
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -214317,7 +214038,7 @@ exports[`Storyshots Views / Products / Product list no channels 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="tableCellAvatar"
+                  data-test-id="table-cell-avatar"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -214338,7 +214059,7 @@ exports[`Storyshots Views / Products / Product list no channels 1`] = `
                         class="ProductList-colNameWrapper-id"
                       >
                         <span
-                          data-test="name"
+                          data-test-id="name"
                         >
                           Polo Shirt
                         </span>
@@ -214353,28 +214074,27 @@ exports[`Storyshots Views / Products / Product list no channels 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test="product-type"
+                  data-test-id="product-type"
                 >
                   Top (clothing)
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test="availability"
                   data-test-availability="false"
+                  data-test-id="availability"
                 >
                   -
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test="price"
+                  data-test-id="price"
                 >
                   -
                 </td>
               </tr>
               <tr
                 class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test="id"
-                data-test-id="UHJvZHVjdDoxMDk="
+                data-test-id="id-UHJvZHVjdDoxMDk="
               >
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -214415,7 +214135,7 @@ exports[`Storyshots Views / Products / Product list no channels 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="tableCellAvatar"
+                  data-test-id="table-cell-avatar"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -214436,7 +214156,7 @@ exports[`Storyshots Views / Products / Product list no channels 1`] = `
                         class="ProductList-colNameWrapper-id"
                       >
                         <span
-                          data-test="name"
+                          data-test-id="name"
                         >
                           Polo Shirt
                         </span>
@@ -214451,28 +214171,27 @@ exports[`Storyshots Views / Products / Product list no channels 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test="product-type"
+                  data-test-id="product-type"
                 >
                   Top (clothing)
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test="availability"
                   data-test-availability="false"
+                  data-test-id="availability"
                 >
                   -
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test="price"
+                  data-test-id="price"
                 >
                   -
                 </td>
               </tr>
               <tr
                 class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test="id"
-                data-test-id="UHJvZHVjdDoxMTA="
+                data-test-id="id-UHJvZHVjdDoxMTA="
               >
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -214513,7 +214232,7 @@ exports[`Storyshots Views / Products / Product list no channels 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="tableCellAvatar"
+                  data-test-id="table-cell-avatar"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -214534,7 +214253,7 @@ exports[`Storyshots Views / Products / Product list no channels 1`] = `
                         class="ProductList-colNameWrapper-id"
                       >
                         <span
-                          data-test="name"
+                          data-test-id="name"
                         >
                           Polo Shirt
                         </span>
@@ -214549,28 +214268,27 @@ exports[`Storyshots Views / Products / Product list no channels 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test="product-type"
+                  data-test-id="product-type"
                 >
                   Top (clothing)
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test="availability"
                   data-test-availability="false"
+                  data-test-id="availability"
                 >
                   -
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test="price"
+                  data-test-id="price"
                 >
                   -
                 </td>
               </tr>
               <tr
                 class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test="id"
-                data-test-id="UHJvZHVjdDoxMTU="
+                data-test-id="id-UHJvZHVjdDoxMTU="
               >
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -214611,7 +214329,7 @@ exports[`Storyshots Views / Products / Product list no channels 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="tableCellAvatar"
+                  data-test-id="table-cell-avatar"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -214632,7 +214350,7 @@ exports[`Storyshots Views / Products / Product list no channels 1`] = `
                         class="ProductList-colNameWrapper-id"
                       >
                         <span
-                          data-test="name"
+                          data-test-id="name"
                         >
                           Black Hoodie
                         </span>
@@ -214647,28 +214365,27 @@ exports[`Storyshots Views / Products / Product list no channels 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test="product-type"
+                  data-test-id="product-type"
                 >
                   Top (clothing)
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test="availability"
                   data-test-availability="false"
+                  data-test-id="availability"
                 >
                   -
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test="price"
+                  data-test-id="price"
                 >
                   -
                 </td>
               </tr>
               <tr
                 class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test="id"
-                data-test-id="UHJvZHVjdDoxMTY="
+                data-test-id="id-UHJvZHVjdDoxMTY="
               >
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -214709,7 +214426,7 @@ exports[`Storyshots Views / Products / Product list no channels 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="tableCellAvatar"
+                  data-test-id="table-cell-avatar"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -214730,7 +214447,7 @@ exports[`Storyshots Views / Products / Product list no channels 1`] = `
                         class="ProductList-colNameWrapper-id"
                       >
                         <span
-                          data-test="name"
+                          data-test-id="name"
                         >
                           Blue Hoodie
                         </span>
@@ -214745,28 +214462,27 @@ exports[`Storyshots Views / Products / Product list no channels 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test="product-type"
+                  data-test-id="product-type"
                 >
                   Top (clothing)
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test="availability"
                   data-test-availability="false"
+                  data-test-id="availability"
                 >
                   -
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test="price"
+                  data-test-id="price"
                 >
                   -
                 </td>
               </tr>
               <tr
                 class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test="id"
-                data-test-id="UHJvZHVjdDoxMTc="
+                data-test-id="id-UHJvZHVjdDoxMTc="
               >
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -214807,7 +214523,7 @@ exports[`Storyshots Views / Products / Product list no channels 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="tableCellAvatar"
+                  data-test-id="table-cell-avatar"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -214828,7 +214544,7 @@ exports[`Storyshots Views / Products / Product list no channels 1`] = `
                         class="ProductList-colNameWrapper-id"
                       >
                         <span
-                          data-test="name"
+                          data-test-id="name"
                         >
                           Mustard Hoodie
                         </span>
@@ -214843,28 +214559,27 @@ exports[`Storyshots Views / Products / Product list no channels 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test="product-type"
+                  data-test-id="product-type"
                 >
                   Top (clothing)
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test="availability"
                   data-test-availability="false"
+                  data-test-id="availability"
                 >
                   -
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test="price"
+                  data-test-id="price"
                 >
                   -
                 </td>
               </tr>
               <tr
                 class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test="id"
-                data-test-id="UHJvZHVjdDo4NQ=="
+                data-test-id="id-UHJvZHVjdDo4NQ=="
               >
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -214905,7 +214620,7 @@ exports[`Storyshots Views / Products / Product list no channels 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="tableCellAvatar"
+                  data-test-id="table-cell-avatar"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -214926,7 +214641,7 @@ exports[`Storyshots Views / Products / Product list no channels 1`] = `
                         class="ProductList-colNameWrapper-id"
                       >
                         <span
-                          data-test="name"
+                          data-test-id="name"
                         >
                           Colored Parrot Cushion
                         </span>
@@ -214941,20 +214656,20 @@ exports[`Storyshots Views / Products / Product list no channels 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test="product-type"
+                  data-test-id="product-type"
                 >
                   Cushion
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test="availability"
                   data-test-availability="false"
+                  data-test-id="availability"
                 >
                   -
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test="price"
+                  data-test-id="price"
                 >
                   -
                 </td>
@@ -214989,14 +214704,14 @@ exports[`Storyshots Views / Products / Product list no data 1`] = `
         </div>
         <div
           class="ProductListPage-settings-id"
-          data-test="menu"
+          data-test-id="menu"
         >
           <button
             aria-haspopup="true"
             aria-label="More"
             class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
             color="primary"
-            data-test-id="showMoreButton"
+            data-test-id="show-more-button"
             tabindex="0"
             type="button"
           >
@@ -215055,7 +214770,7 @@ exports[`Storyshots Views / Products / Product list no data 1`] = `
           <div
             aria-label="button with select"
             class="MuiButtonGroup-root-id MuiButtonGroup-contained-id"
-            data-test="add-product"
+            data-test-id="add-product"
             role="group"
           >
             <button
@@ -215134,7 +214849,7 @@ exports[`Storyshots Views / Products / Product list no data 1`] = `
         </div>
         <div
           class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
-          data-test-id="searchInput"
+          data-test-id="search-input"
         >
           <div
             class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
@@ -215194,7 +214909,7 @@ exports[`Storyshots Views / Products / Product list no data 1`] = `
               >
                 <th
                   class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id ProductList-colName-id"
-                  data-test-id="colNameHeader"
+                  data-test-id="col-name-header"
                   scope="col"
                 >
                   <div
@@ -215231,7 +214946,7 @@ exports[`Storyshots Views / Products / Product list no data 1`] = `
                 </th>
                 <th
                   class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id ProductList-colType-id"
-                  data-test-id="colTypeHeader"
+                  data-test-id="col-type-header"
                   scope="col"
                 >
                   <div
@@ -215246,7 +214961,7 @@ exports[`Storyshots Views / Products / Product list no data 1`] = `
                 </th>
                 <th
                   class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id ProductList-colPublished-id"
-                  data-test-id="colAvailabilityHeader"
+                  data-test-id="col-availability-header"
                   scope="col"
                 >
                   <div
@@ -215261,7 +214976,7 @@ exports[`Storyshots Views / Products / Product list no data 1`] = `
                 </th>
                 <th
                   class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id ProductList-colPrice-id"
-                  data-test-id="colPriceHeader"
+                  data-test-id="col-price-header"
                   scope="col"
                 >
                   <div
@@ -215391,14 +215106,14 @@ exports[`Storyshots Views / Products / Product list no limits 1`] = `
         </div>
         <div
           class="ProductListPage-settings-id"
-          data-test="menu"
+          data-test-id="menu"
         >
           <button
             aria-haspopup="true"
             aria-label="More"
             class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
             color="primary"
-            data-test-id="showMoreButton"
+            data-test-id="show-more-button"
             tabindex="0"
             type="button"
           >
@@ -215452,7 +215167,7 @@ exports[`Storyshots Views / Products / Product list no limits 1`] = `
           <div
             aria-label="button with select"
             class="MuiButtonGroup-root-id MuiButtonGroup-contained-id"
-            data-test="add-product"
+            data-test-id="add-product"
             role="group"
           >
             <button
@@ -215531,7 +215246,7 @@ exports[`Storyshots Views / Products / Product list no limits 1`] = `
         </div>
         <div
           class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
-          data-test-id="searchInput"
+          data-test-id="search-input"
         >
           <div
             class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
@@ -215630,7 +215345,7 @@ exports[`Storyshots Views / Products / Product list no limits 1`] = `
                 </th>
                 <th
                   class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id ProductList-colName-id"
-                  data-test-id="colNameHeader"
+                  data-test-id="col-name-header"
                   scope="col"
                 >
                   <div
@@ -215667,7 +215382,7 @@ exports[`Storyshots Views / Products / Product list no limits 1`] = `
                 </th>
                 <th
                   class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id ProductList-colType-id"
-                  data-test-id="colTypeHeader"
+                  data-test-id="col-type-header"
                   scope="col"
                 >
                   <div
@@ -215682,7 +215397,7 @@ exports[`Storyshots Views / Products / Product list no limits 1`] = `
                 </th>
                 <th
                   class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id ProductList-colPublished-id"
-                  data-test-id="colAvailabilityHeader"
+                  data-test-id="col-availability-header"
                   scope="col"
                 >
                   <div
@@ -215697,7 +215412,7 @@ exports[`Storyshots Views / Products / Product list no limits 1`] = `
                 </th>
                 <th
                   class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id ProductList-colPrice-id"
-                  data-test-id="colPriceHeader"
+                  data-test-id="col-price-header"
                   scope="col"
                 >
                   <div
@@ -215789,8 +215504,7 @@ exports[`Storyshots Views / Products / Product list no limits 1`] = `
             >
               <tr
                 class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test="id"
-                data-test-id="UHJvZHVjdDo2MQ=="
+                data-test-id="id-UHJvZHVjdDo2MQ=="
               >
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -215831,7 +215545,7 @@ exports[`Storyshots Views / Products / Product list no limits 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="tableCellAvatar"
+                  data-test-id="table-cell-avatar"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -215852,7 +215566,7 @@ exports[`Storyshots Views / Products / Product list no limits 1`] = `
                         class="ProductList-colNameWrapper-id"
                       >
                         <span
-                          data-test="name"
+                          data-test-id="name"
                         >
                           Nebula Night Sky Paint
                         </span>
@@ -215867,14 +215581,14 @@ exports[`Storyshots Views / Products / Product list no limits 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test="product-type"
+                  data-test-id="product-type"
                 >
                   Paint
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test="availability"
                   data-test-availability="true"
+                  data-test-id="availability"
                 >
                   <div
                     class="StatusLabel-container-id"
@@ -215895,15 +215609,14 @@ exports[`Storyshots Views / Products / Product list no limits 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test="price"
+                  data-test-id="price"
                 >
                   $1.20 - $3.50
                 </td>
               </tr>
               <tr
                 class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test="id"
-                data-test-id="UHJvZHVjdDo2NA=="
+                data-test-id="id-UHJvZHVjdDo2NA=="
               >
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -215944,7 +215657,7 @@ exports[`Storyshots Views / Products / Product list no limits 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="tableCellAvatar"
+                  data-test-id="table-cell-avatar"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -215965,7 +215678,7 @@ exports[`Storyshots Views / Products / Product list no limits 1`] = `
                         class="ProductList-colNameWrapper-id"
                       >
                         <span
-                          data-test="name"
+                          data-test-id="name"
                         >
                           Light Speed Yellow Paint
                         </span>
@@ -215980,14 +215693,14 @@ exports[`Storyshots Views / Products / Product list no limits 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test="product-type"
+                  data-test-id="product-type"
                 >
                   Paint
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test="availability"
                   data-test-availability="true"
+                  data-test-id="availability"
                 >
                   <div
                     class="StatusLabel-container-id"
@@ -216008,15 +215721,14 @@ exports[`Storyshots Views / Products / Product list no limits 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test="price"
+                  data-test-id="price"
                 >
                   $1.20 - $3.50
                 </td>
               </tr>
               <tr
                 class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test="id"
-                data-test-id="UHJvZHVjdDo2NQ=="
+                data-test-id="id-UHJvZHVjdDo2NQ=="
               >
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -216057,7 +215769,7 @@ exports[`Storyshots Views / Products / Product list no limits 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="tableCellAvatar"
+                  data-test-id="table-cell-avatar"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -216078,7 +215790,7 @@ exports[`Storyshots Views / Products / Product list no limits 1`] = `
                         class="ProductList-colNameWrapper-id"
                       >
                         <span
-                          data-test="name"
+                          data-test-id="name"
                         >
                           Hyperspace Turquoise Paint
                         </span>
@@ -216093,14 +215805,14 @@ exports[`Storyshots Views / Products / Product list no limits 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test="product-type"
+                  data-test-id="product-type"
                 >
                   Paint
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test="availability"
                   data-test-availability="true"
+                  data-test-id="availability"
                 >
                   <div
                     class="StatusLabel-container-id"
@@ -216121,15 +215833,14 @@ exports[`Storyshots Views / Products / Product list no limits 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test="price"
+                  data-test-id="price"
                 >
                   $1.20 - $3.50
                 </td>
               </tr>
               <tr
                 class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test="id"
-                data-test-id="UHJvZHVjdDo3NQ=="
+                data-test-id="id-UHJvZHVjdDo3NQ=="
               >
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -216170,7 +215881,7 @@ exports[`Storyshots Views / Products / Product list no limits 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="tableCellAvatar"
+                  data-test-id="table-cell-avatar"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -216191,7 +215902,7 @@ exports[`Storyshots Views / Products / Product list no limits 1`] = `
                         class="ProductList-colNameWrapper-id"
                       >
                         <span
-                          data-test="name"
+                          data-test-id="name"
                         >
                           Pineapple Juice
                         </span>
@@ -216206,14 +215917,14 @@ exports[`Storyshots Views / Products / Product list no limits 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test="product-type"
+                  data-test-id="product-type"
                 >
                   Juice
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test="availability"
                   data-test-availability="true"
+                  data-test-id="availability"
                 >
                   <div
                     class="StatusLabel-container-id"
@@ -216234,15 +215945,14 @@ exports[`Storyshots Views / Products / Product list no limits 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test="price"
+                  data-test-id="price"
                 >
                   $1.20 - $3.50
                 </td>
               </tr>
               <tr
                 class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test="id"
-                data-test-id="UHJvZHVjdDo3Ng=="
+                data-test-id="id-UHJvZHVjdDo3Ng=="
               >
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -216283,7 +215993,7 @@ exports[`Storyshots Views / Products / Product list no limits 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="tableCellAvatar"
+                  data-test-id="table-cell-avatar"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -216304,7 +216014,7 @@ exports[`Storyshots Views / Products / Product list no limits 1`] = `
                         class="ProductList-colNameWrapper-id"
                       >
                         <span
-                          data-test="name"
+                          data-test-id="name"
                         >
                           Coconut Juice
                         </span>
@@ -216319,14 +216029,14 @@ exports[`Storyshots Views / Products / Product list no limits 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test="product-type"
+                  data-test-id="product-type"
                 >
                   Juice
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test="availability"
                   data-test-availability="true"
+                  data-test-id="availability"
                 >
                   <div
                     class="StatusLabel-container-id"
@@ -216347,15 +216057,14 @@ exports[`Storyshots Views / Products / Product list no limits 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test="price"
+                  data-test-id="price"
                 >
                   $1.20 - $3.50
                 </td>
               </tr>
               <tr
                 class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test="id"
-                data-test-id="UHJvZHVjdDo3Mg=="
+                data-test-id="id-UHJvZHVjdDo3Mg=="
               >
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -216396,7 +216105,7 @@ exports[`Storyshots Views / Products / Product list no limits 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="tableCellAvatar"
+                  data-test-id="table-cell-avatar"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -216417,7 +216126,7 @@ exports[`Storyshots Views / Products / Product list no limits 1`] = `
                         class="ProductList-colNameWrapper-id"
                       >
                         <span
-                          data-test="name"
+                          data-test-id="name"
                         >
                           Apple Juice
                         </span>
@@ -216432,14 +216141,14 @@ exports[`Storyshots Views / Products / Product list no limits 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test="product-type"
+                  data-test-id="product-type"
                 >
                   Juice
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test="availability"
                   data-test-availability="true"
+                  data-test-id="availability"
                 >
                   <div
                     class="StatusLabel-container-id"
@@ -216460,15 +216169,14 @@ exports[`Storyshots Views / Products / Product list no limits 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test="price"
+                  data-test-id="price"
                 >
                   $1.20 - $3.50
                 </td>
               </tr>
               <tr
                 class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test="id"
-                data-test-id="UHJvZHVjdDo3MQ=="
+                data-test-id="id-UHJvZHVjdDo3MQ=="
               >
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -216509,7 +216217,7 @@ exports[`Storyshots Views / Products / Product list no limits 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="tableCellAvatar"
+                  data-test-id="table-cell-avatar"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -216530,7 +216238,7 @@ exports[`Storyshots Views / Products / Product list no limits 1`] = `
                         class="ProductList-colNameWrapper-id"
                       >
                         <span
-                          data-test="name"
+                          data-test-id="name"
                         >
                           Orange Juice
                         </span>
@@ -216545,14 +216253,14 @@ exports[`Storyshots Views / Products / Product list no limits 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test="product-type"
+                  data-test-id="product-type"
                 >
                   Juice
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test="availability"
                   data-test-availability="true"
+                  data-test-id="availability"
                 >
                   <div
                     class="StatusLabel-container-id"
@@ -216573,15 +216281,14 @@ exports[`Storyshots Views / Products / Product list no limits 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test="price"
+                  data-test-id="price"
                 >
                   $1.20 - $3.50
                 </td>
               </tr>
               <tr
                 class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test="id"
-                data-test-id="UHJvZHVjdDo3NA=="
+                data-test-id="id-UHJvZHVjdDo3NA=="
               >
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -216622,7 +216329,7 @@ exports[`Storyshots Views / Products / Product list no limits 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="tableCellAvatar"
+                  data-test-id="table-cell-avatar"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -216643,7 +216350,7 @@ exports[`Storyshots Views / Products / Product list no limits 1`] = `
                         class="ProductList-colNameWrapper-id"
                       >
                         <span
-                          data-test="name"
+                          data-test-id="name"
                         >
                           Banana Juice
                         </span>
@@ -216658,14 +216365,14 @@ exports[`Storyshots Views / Products / Product list no limits 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test="product-type"
+                  data-test-id="product-type"
                 >
                   Juice
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test="availability"
                   data-test-availability="true"
+                  data-test-id="availability"
                 >
                   <div
                     class="StatusLabel-container-id"
@@ -216686,15 +216393,14 @@ exports[`Storyshots Views / Products / Product list no limits 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test="price"
+                  data-test-id="price"
                 >
                   $1.20 - $3.50
                 </td>
               </tr>
               <tr
                 class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test="id"
-                data-test-id="UHJvZHVjdDo3OQ=="
+                data-test-id="id-UHJvZHVjdDo3OQ=="
               >
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -216735,7 +216441,7 @@ exports[`Storyshots Views / Products / Product list no limits 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="tableCellAvatar"
+                  data-test-id="table-cell-avatar"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -216756,7 +216462,7 @@ exports[`Storyshots Views / Products / Product list no limits 1`] = `
                         class="ProductList-colNameWrapper-id"
                       >
                         <span
-                          data-test="name"
+                          data-test-id="name"
                         >
                           Bean Juice
                         </span>
@@ -216771,14 +216477,14 @@ exports[`Storyshots Views / Products / Product list no limits 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test="product-type"
+                  data-test-id="product-type"
                 >
                   Juice
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test="availability"
                   data-test-availability="true"
+                  data-test-id="availability"
                 >
                   <div
                     class="StatusLabel-container-id"
@@ -216799,15 +216505,14 @@ exports[`Storyshots Views / Products / Product list no limits 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test="price"
+                  data-test-id="price"
                 >
                   $1.20 - $3.50
                 </td>
               </tr>
               <tr
                 class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test="id"
-                data-test-id="UHJvZHVjdDo3Mw=="
+                data-test-id="id-UHJvZHVjdDo3Mw=="
               >
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -216848,7 +216553,7 @@ exports[`Storyshots Views / Products / Product list no limits 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="tableCellAvatar"
+                  data-test-id="table-cell-avatar"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -216869,7 +216574,7 @@ exports[`Storyshots Views / Products / Product list no limits 1`] = `
                         class="ProductList-colNameWrapper-id"
                       >
                         <span
-                          data-test="name"
+                          data-test-id="name"
                         >
                           Carrot Juice
                         </span>
@@ -216884,14 +216589,14 @@ exports[`Storyshots Views / Products / Product list no limits 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test="product-type"
+                  data-test-id="product-type"
                 >
                   Juice
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test="availability"
                   data-test-availability="true"
+                  data-test-id="availability"
                 >
                   <div
                     class="StatusLabel-container-id"
@@ -216912,15 +216617,14 @@ exports[`Storyshots Views / Products / Product list no limits 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test="price"
+                  data-test-id="price"
                 >
                   $1.20 - $3.50
                 </td>
               </tr>
               <tr
                 class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test="id"
-                data-test-id="UHJvZHVjdDo3OA=="
+                data-test-id="id-UHJvZHVjdDo3OA=="
               >
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -216961,7 +216665,7 @@ exports[`Storyshots Views / Products / Product list no limits 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="tableCellAvatar"
+                  data-test-id="table-cell-avatar"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -216982,7 +216686,7 @@ exports[`Storyshots Views / Products / Product list no limits 1`] = `
                         class="ProductList-colNameWrapper-id"
                       >
                         <span
-                          data-test="name"
+                          data-test-id="name"
                         >
                           Green Juice
                         </span>
@@ -216997,14 +216701,14 @@ exports[`Storyshots Views / Products / Product list no limits 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test="product-type"
+                  data-test-id="product-type"
                 >
                   Juice
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test="availability"
                   data-test-availability="true"
+                  data-test-id="availability"
                 >
                   <div
                     class="StatusLabel-container-id"
@@ -217025,15 +216729,14 @@ exports[`Storyshots Views / Products / Product list no limits 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test="price"
+                  data-test-id="price"
                 >
                   $1.20 - $3.50
                 </td>
               </tr>
               <tr
                 class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test="id"
-                data-test-id="UHJvZHVjdDo4OQ=="
+                data-test-id="id-UHJvZHVjdDo4OQ=="
               >
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -217074,7 +216777,7 @@ exports[`Storyshots Views / Products / Product list no limits 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="tableCellAvatar"
+                  data-test-id="table-cell-avatar"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -217095,7 +216798,7 @@ exports[`Storyshots Views / Products / Product list no limits 1`] = `
                         class="ProductList-colNameWrapper-id"
                       >
                         <span
-                          data-test="name"
+                          data-test-id="name"
                         >
                           Code Division T-shirt
                         </span>
@@ -217110,14 +216813,14 @@ exports[`Storyshots Views / Products / Product list no limits 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test="product-type"
+                  data-test-id="product-type"
                 >
                   Top (clothing)
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test="availability"
                   data-test-availability="true"
+                  data-test-id="availability"
                 >
                   <div
                     class="StatusLabel-container-id"
@@ -217138,15 +216841,14 @@ exports[`Storyshots Views / Products / Product list no limits 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test="price"
+                  data-test-id="price"
                 >
                   $1.20 - $3.50
                 </td>
               </tr>
               <tr
                 class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test="id"
-                data-test-id="UHJvZHVjdDoxMDc="
+                data-test-id="id-UHJvZHVjdDoxMDc="
               >
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -217187,7 +216889,7 @@ exports[`Storyshots Views / Products / Product list no limits 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="tableCellAvatar"
+                  data-test-id="table-cell-avatar"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -217208,7 +216910,7 @@ exports[`Storyshots Views / Products / Product list no limits 1`] = `
                         class="ProductList-colNameWrapper-id"
                       >
                         <span
-                          data-test="name"
+                          data-test-id="name"
                         >
                           Polo Shirt
                         </span>
@@ -217223,14 +216925,14 @@ exports[`Storyshots Views / Products / Product list no limits 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test="product-type"
+                  data-test-id="product-type"
                 >
                   Top (clothing)
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test="availability"
                   data-test-availability="true"
+                  data-test-id="availability"
                 >
                   <div
                     class="StatusLabel-container-id"
@@ -217251,15 +216953,14 @@ exports[`Storyshots Views / Products / Product list no limits 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test="price"
+                  data-test-id="price"
                 >
                   $1.20 - $3.50
                 </td>
               </tr>
               <tr
                 class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test="id"
-                data-test-id="UHJvZHVjdDoxMDg="
+                data-test-id="id-UHJvZHVjdDoxMDg="
               >
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -217300,7 +217001,7 @@ exports[`Storyshots Views / Products / Product list no limits 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="tableCellAvatar"
+                  data-test-id="table-cell-avatar"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -217321,7 +217022,7 @@ exports[`Storyshots Views / Products / Product list no limits 1`] = `
                         class="ProductList-colNameWrapper-id"
                       >
                         <span
-                          data-test="name"
+                          data-test-id="name"
                         >
                           Polo Shirt
                         </span>
@@ -217336,14 +217037,14 @@ exports[`Storyshots Views / Products / Product list no limits 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test="product-type"
+                  data-test-id="product-type"
                 >
                   Top (clothing)
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test="availability"
                   data-test-availability="true"
+                  data-test-id="availability"
                 >
                   <div
                     class="StatusLabel-container-id"
@@ -217364,15 +217065,14 @@ exports[`Storyshots Views / Products / Product list no limits 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test="price"
+                  data-test-id="price"
                 >
                   $1.20 - $3.50
                 </td>
               </tr>
               <tr
                 class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test="id"
-                data-test-id="UHJvZHVjdDoxMDk="
+                data-test-id="id-UHJvZHVjdDoxMDk="
               >
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -217413,7 +217113,7 @@ exports[`Storyshots Views / Products / Product list no limits 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="tableCellAvatar"
+                  data-test-id="table-cell-avatar"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -217434,7 +217134,7 @@ exports[`Storyshots Views / Products / Product list no limits 1`] = `
                         class="ProductList-colNameWrapper-id"
                       >
                         <span
-                          data-test="name"
+                          data-test-id="name"
                         >
                           Polo Shirt
                         </span>
@@ -217449,14 +217149,14 @@ exports[`Storyshots Views / Products / Product list no limits 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test="product-type"
+                  data-test-id="product-type"
                 >
                   Top (clothing)
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test="availability"
                   data-test-availability="true"
+                  data-test-id="availability"
                 >
                   <div
                     class="StatusLabel-container-id"
@@ -217477,15 +217177,14 @@ exports[`Storyshots Views / Products / Product list no limits 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test="price"
+                  data-test-id="price"
                 >
                   $1.20 - $3.50
                 </td>
               </tr>
               <tr
                 class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test="id"
-                data-test-id="UHJvZHVjdDoxMTA="
+                data-test-id="id-UHJvZHVjdDoxMTA="
               >
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -217526,7 +217225,7 @@ exports[`Storyshots Views / Products / Product list no limits 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="tableCellAvatar"
+                  data-test-id="table-cell-avatar"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -217547,7 +217246,7 @@ exports[`Storyshots Views / Products / Product list no limits 1`] = `
                         class="ProductList-colNameWrapper-id"
                       >
                         <span
-                          data-test="name"
+                          data-test-id="name"
                         >
                           Polo Shirt
                         </span>
@@ -217562,14 +217261,14 @@ exports[`Storyshots Views / Products / Product list no limits 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test="product-type"
+                  data-test-id="product-type"
                 >
                   Top (clothing)
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test="availability"
                   data-test-availability="true"
+                  data-test-id="availability"
                 >
                   <div
                     class="StatusLabel-container-id"
@@ -217590,15 +217289,14 @@ exports[`Storyshots Views / Products / Product list no limits 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test="price"
+                  data-test-id="price"
                 >
                   $1.20 - $3.50
                 </td>
               </tr>
               <tr
                 class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test="id"
-                data-test-id="UHJvZHVjdDoxMTU="
+                data-test-id="id-UHJvZHVjdDoxMTU="
               >
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -217639,7 +217337,7 @@ exports[`Storyshots Views / Products / Product list no limits 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="tableCellAvatar"
+                  data-test-id="table-cell-avatar"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -217660,7 +217358,7 @@ exports[`Storyshots Views / Products / Product list no limits 1`] = `
                         class="ProductList-colNameWrapper-id"
                       >
                         <span
-                          data-test="name"
+                          data-test-id="name"
                         >
                           Black Hoodie
                         </span>
@@ -217675,14 +217373,14 @@ exports[`Storyshots Views / Products / Product list no limits 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test="product-type"
+                  data-test-id="product-type"
                 >
                   Top (clothing)
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test="availability"
                   data-test-availability="true"
+                  data-test-id="availability"
                 >
                   <div
                     class="StatusLabel-container-id"
@@ -217703,15 +217401,14 @@ exports[`Storyshots Views / Products / Product list no limits 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test="price"
+                  data-test-id="price"
                 >
                   $1.20 - $3.50
                 </td>
               </tr>
               <tr
                 class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test="id"
-                data-test-id="UHJvZHVjdDoxMTY="
+                data-test-id="id-UHJvZHVjdDoxMTY="
               >
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -217752,7 +217449,7 @@ exports[`Storyshots Views / Products / Product list no limits 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="tableCellAvatar"
+                  data-test-id="table-cell-avatar"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -217773,7 +217470,7 @@ exports[`Storyshots Views / Products / Product list no limits 1`] = `
                         class="ProductList-colNameWrapper-id"
                       >
                         <span
-                          data-test="name"
+                          data-test-id="name"
                         >
                           Blue Hoodie
                         </span>
@@ -217788,14 +217485,14 @@ exports[`Storyshots Views / Products / Product list no limits 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test="product-type"
+                  data-test-id="product-type"
                 >
                   Top (clothing)
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test="availability"
                   data-test-availability="true"
+                  data-test-id="availability"
                 >
                   <div
                     class="StatusLabel-container-id"
@@ -217816,15 +217513,14 @@ exports[`Storyshots Views / Products / Product list no limits 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test="price"
+                  data-test-id="price"
                 >
                   $1.20 - $3.50
                 </td>
               </tr>
               <tr
                 class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test="id"
-                data-test-id="UHJvZHVjdDoxMTc="
+                data-test-id="id-UHJvZHVjdDoxMTc="
               >
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -217865,7 +217561,7 @@ exports[`Storyshots Views / Products / Product list no limits 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="tableCellAvatar"
+                  data-test-id="table-cell-avatar"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -217886,7 +217582,7 @@ exports[`Storyshots Views / Products / Product list no limits 1`] = `
                         class="ProductList-colNameWrapper-id"
                       >
                         <span
-                          data-test="name"
+                          data-test-id="name"
                         >
                           Mustard Hoodie
                         </span>
@@ -217901,14 +217597,14 @@ exports[`Storyshots Views / Products / Product list no limits 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test="product-type"
+                  data-test-id="product-type"
                 >
                   Top (clothing)
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test="availability"
                   data-test-availability="true"
+                  data-test-id="availability"
                 >
                   <div
                     class="StatusLabel-container-id"
@@ -217929,15 +217625,14 @@ exports[`Storyshots Views / Products / Product list no limits 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test="price"
+                  data-test-id="price"
                 >
                   $1.20 - $3.50
                 </td>
               </tr>
               <tr
                 class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test="id"
-                data-test-id="UHJvZHVjdDo4NQ=="
+                data-test-id="id-UHJvZHVjdDo4NQ=="
               >
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -217978,7 +217673,7 @@ exports[`Storyshots Views / Products / Product list no limits 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="tableCellAvatar"
+                  data-test-id="table-cell-avatar"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -217999,7 +217694,7 @@ exports[`Storyshots Views / Products / Product list no limits 1`] = `
                         class="ProductList-colNameWrapper-id"
                       >
                         <span
-                          data-test="name"
+                          data-test-id="name"
                         >
                           Colored Parrot Cushion
                         </span>
@@ -218014,14 +217709,14 @@ exports[`Storyshots Views / Products / Product list no limits 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test="product-type"
+                  data-test-id="product-type"
                 >
                   Cushion
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test="availability"
                   data-test-availability="true"
+                  data-test-id="availability"
                 >
                   <div
                     class="StatusLabel-container-id"
@@ -218042,7 +217737,7 @@ exports[`Storyshots Views / Products / Product list no limits 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test="price"
+                  data-test-id="price"
                 >
                   $1.20 - $3.50
                 </td>
@@ -218077,14 +217772,14 @@ exports[`Storyshots Views / Products / Product list with data 1`] = `
         </div>
         <div
           class="ProductListPage-settings-id"
-          data-test="menu"
+          data-test-id="menu"
         >
           <button
             aria-haspopup="true"
             aria-label="More"
             class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
             color="primary"
-            data-test-id="showMoreButton"
+            data-test-id="show-more-button"
             tabindex="0"
             type="button"
           >
@@ -218143,7 +217838,7 @@ exports[`Storyshots Views / Products / Product list with data 1`] = `
           <div
             aria-label="button with select"
             class="MuiButtonGroup-root-id MuiButtonGroup-contained-id"
-            data-test="add-product"
+            data-test-id="add-product"
             role="group"
           >
             <button
@@ -218222,7 +217917,7 @@ exports[`Storyshots Views / Products / Product list with data 1`] = `
         </div>
         <div
           class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
-          data-test-id="searchInput"
+          data-test-id="search-input"
         >
           <div
             class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
@@ -218321,7 +218016,7 @@ exports[`Storyshots Views / Products / Product list with data 1`] = `
                 </th>
                 <th
                   class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id ProductList-colName-id"
-                  data-test-id="colNameHeader"
+                  data-test-id="col-name-header"
                   scope="col"
                 >
                   <div
@@ -218358,7 +218053,7 @@ exports[`Storyshots Views / Products / Product list with data 1`] = `
                 </th>
                 <th
                   class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id ProductList-colType-id"
-                  data-test-id="colTypeHeader"
+                  data-test-id="col-type-header"
                   scope="col"
                 >
                   <div
@@ -218373,7 +218068,7 @@ exports[`Storyshots Views / Products / Product list with data 1`] = `
                 </th>
                 <th
                   class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id ProductList-colPublished-id"
-                  data-test-id="colAvailabilityHeader"
+                  data-test-id="col-availability-header"
                   scope="col"
                 >
                   <div
@@ -218388,7 +218083,7 @@ exports[`Storyshots Views / Products / Product list with data 1`] = `
                 </th>
                 <th
                   class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id ProductList-colPrice-id"
-                  data-test-id="colPriceHeader"
+                  data-test-id="col-price-header"
                   scope="col"
                 >
                   <div
@@ -218480,8 +218175,7 @@ exports[`Storyshots Views / Products / Product list with data 1`] = `
             >
               <tr
                 class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test="id"
-                data-test-id="UHJvZHVjdDo2MQ=="
+                data-test-id="id-UHJvZHVjdDo2MQ=="
               >
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -218522,7 +218216,7 @@ exports[`Storyshots Views / Products / Product list with data 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="tableCellAvatar"
+                  data-test-id="table-cell-avatar"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -218543,7 +218237,7 @@ exports[`Storyshots Views / Products / Product list with data 1`] = `
                         class="ProductList-colNameWrapper-id"
                       >
                         <span
-                          data-test="name"
+                          data-test-id="name"
                         >
                           Nebula Night Sky Paint
                         </span>
@@ -218558,14 +218252,14 @@ exports[`Storyshots Views / Products / Product list with data 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test="product-type"
+                  data-test-id="product-type"
                 >
                   Paint
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test="availability"
                   data-test-availability="true"
+                  data-test-id="availability"
                 >
                   <div
                     class="StatusLabel-container-id"
@@ -218586,15 +218280,14 @@ exports[`Storyshots Views / Products / Product list with data 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test="price"
+                  data-test-id="price"
                 >
                   $1.20 - $3.50
                 </td>
               </tr>
               <tr
                 class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test="id"
-                data-test-id="UHJvZHVjdDo2NA=="
+                data-test-id="id-UHJvZHVjdDo2NA=="
               >
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -218635,7 +218328,7 @@ exports[`Storyshots Views / Products / Product list with data 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="tableCellAvatar"
+                  data-test-id="table-cell-avatar"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -218656,7 +218349,7 @@ exports[`Storyshots Views / Products / Product list with data 1`] = `
                         class="ProductList-colNameWrapper-id"
                       >
                         <span
-                          data-test="name"
+                          data-test-id="name"
                         >
                           Light Speed Yellow Paint
                         </span>
@@ -218671,14 +218364,14 @@ exports[`Storyshots Views / Products / Product list with data 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test="product-type"
+                  data-test-id="product-type"
                 >
                   Paint
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test="availability"
                   data-test-availability="true"
+                  data-test-id="availability"
                 >
                   <div
                     class="StatusLabel-container-id"
@@ -218699,15 +218392,14 @@ exports[`Storyshots Views / Products / Product list with data 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test="price"
+                  data-test-id="price"
                 >
                   $1.20 - $3.50
                 </td>
               </tr>
               <tr
                 class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test="id"
-                data-test-id="UHJvZHVjdDo2NQ=="
+                data-test-id="id-UHJvZHVjdDo2NQ=="
               >
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -218748,7 +218440,7 @@ exports[`Storyshots Views / Products / Product list with data 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="tableCellAvatar"
+                  data-test-id="table-cell-avatar"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -218769,7 +218461,7 @@ exports[`Storyshots Views / Products / Product list with data 1`] = `
                         class="ProductList-colNameWrapper-id"
                       >
                         <span
-                          data-test="name"
+                          data-test-id="name"
                         >
                           Hyperspace Turquoise Paint
                         </span>
@@ -218784,14 +218476,14 @@ exports[`Storyshots Views / Products / Product list with data 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test="product-type"
+                  data-test-id="product-type"
                 >
                   Paint
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test="availability"
                   data-test-availability="true"
+                  data-test-id="availability"
                 >
                   <div
                     class="StatusLabel-container-id"
@@ -218812,15 +218504,14 @@ exports[`Storyshots Views / Products / Product list with data 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test="price"
+                  data-test-id="price"
                 >
                   $1.20 - $3.50
                 </td>
               </tr>
               <tr
                 class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test="id"
-                data-test-id="UHJvZHVjdDo3NQ=="
+                data-test-id="id-UHJvZHVjdDo3NQ=="
               >
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -218861,7 +218552,7 @@ exports[`Storyshots Views / Products / Product list with data 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="tableCellAvatar"
+                  data-test-id="table-cell-avatar"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -218882,7 +218573,7 @@ exports[`Storyshots Views / Products / Product list with data 1`] = `
                         class="ProductList-colNameWrapper-id"
                       >
                         <span
-                          data-test="name"
+                          data-test-id="name"
                         >
                           Pineapple Juice
                         </span>
@@ -218897,14 +218588,14 @@ exports[`Storyshots Views / Products / Product list with data 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test="product-type"
+                  data-test-id="product-type"
                 >
                   Juice
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test="availability"
                   data-test-availability="true"
+                  data-test-id="availability"
                 >
                   <div
                     class="StatusLabel-container-id"
@@ -218925,15 +218616,14 @@ exports[`Storyshots Views / Products / Product list with data 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test="price"
+                  data-test-id="price"
                 >
                   $1.20 - $3.50
                 </td>
               </tr>
               <tr
                 class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test="id"
-                data-test-id="UHJvZHVjdDo3Ng=="
+                data-test-id="id-UHJvZHVjdDo3Ng=="
               >
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -218974,7 +218664,7 @@ exports[`Storyshots Views / Products / Product list with data 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="tableCellAvatar"
+                  data-test-id="table-cell-avatar"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -218995,7 +218685,7 @@ exports[`Storyshots Views / Products / Product list with data 1`] = `
                         class="ProductList-colNameWrapper-id"
                       >
                         <span
-                          data-test="name"
+                          data-test-id="name"
                         >
                           Coconut Juice
                         </span>
@@ -219010,14 +218700,14 @@ exports[`Storyshots Views / Products / Product list with data 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test="product-type"
+                  data-test-id="product-type"
                 >
                   Juice
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test="availability"
                   data-test-availability="true"
+                  data-test-id="availability"
                 >
                   <div
                     class="StatusLabel-container-id"
@@ -219038,15 +218728,14 @@ exports[`Storyshots Views / Products / Product list with data 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test="price"
+                  data-test-id="price"
                 >
                   $1.20 - $3.50
                 </td>
               </tr>
               <tr
                 class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test="id"
-                data-test-id="UHJvZHVjdDo3Mg=="
+                data-test-id="id-UHJvZHVjdDo3Mg=="
               >
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -219087,7 +218776,7 @@ exports[`Storyshots Views / Products / Product list with data 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="tableCellAvatar"
+                  data-test-id="table-cell-avatar"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -219108,7 +218797,7 @@ exports[`Storyshots Views / Products / Product list with data 1`] = `
                         class="ProductList-colNameWrapper-id"
                       >
                         <span
-                          data-test="name"
+                          data-test-id="name"
                         >
                           Apple Juice
                         </span>
@@ -219123,14 +218812,14 @@ exports[`Storyshots Views / Products / Product list with data 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test="product-type"
+                  data-test-id="product-type"
                 >
                   Juice
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test="availability"
                   data-test-availability="true"
+                  data-test-id="availability"
                 >
                   <div
                     class="StatusLabel-container-id"
@@ -219151,15 +218840,14 @@ exports[`Storyshots Views / Products / Product list with data 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test="price"
+                  data-test-id="price"
                 >
                   $1.20 - $3.50
                 </td>
               </tr>
               <tr
                 class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test="id"
-                data-test-id="UHJvZHVjdDo3MQ=="
+                data-test-id="id-UHJvZHVjdDo3MQ=="
               >
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -219200,7 +218888,7 @@ exports[`Storyshots Views / Products / Product list with data 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="tableCellAvatar"
+                  data-test-id="table-cell-avatar"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -219221,7 +218909,7 @@ exports[`Storyshots Views / Products / Product list with data 1`] = `
                         class="ProductList-colNameWrapper-id"
                       >
                         <span
-                          data-test="name"
+                          data-test-id="name"
                         >
                           Orange Juice
                         </span>
@@ -219236,14 +218924,14 @@ exports[`Storyshots Views / Products / Product list with data 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test="product-type"
+                  data-test-id="product-type"
                 >
                   Juice
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test="availability"
                   data-test-availability="true"
+                  data-test-id="availability"
                 >
                   <div
                     class="StatusLabel-container-id"
@@ -219264,15 +218952,14 @@ exports[`Storyshots Views / Products / Product list with data 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test="price"
+                  data-test-id="price"
                 >
                   $1.20 - $3.50
                 </td>
               </tr>
               <tr
                 class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test="id"
-                data-test-id="UHJvZHVjdDo3NA=="
+                data-test-id="id-UHJvZHVjdDo3NA=="
               >
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -219313,7 +219000,7 @@ exports[`Storyshots Views / Products / Product list with data 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="tableCellAvatar"
+                  data-test-id="table-cell-avatar"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -219334,7 +219021,7 @@ exports[`Storyshots Views / Products / Product list with data 1`] = `
                         class="ProductList-colNameWrapper-id"
                       >
                         <span
-                          data-test="name"
+                          data-test-id="name"
                         >
                           Banana Juice
                         </span>
@@ -219349,14 +219036,14 @@ exports[`Storyshots Views / Products / Product list with data 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test="product-type"
+                  data-test-id="product-type"
                 >
                   Juice
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test="availability"
                   data-test-availability="true"
+                  data-test-id="availability"
                 >
                   <div
                     class="StatusLabel-container-id"
@@ -219377,15 +219064,14 @@ exports[`Storyshots Views / Products / Product list with data 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test="price"
+                  data-test-id="price"
                 >
                   $1.20 - $3.50
                 </td>
               </tr>
               <tr
                 class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test="id"
-                data-test-id="UHJvZHVjdDo3OQ=="
+                data-test-id="id-UHJvZHVjdDo3OQ=="
               >
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -219426,7 +219112,7 @@ exports[`Storyshots Views / Products / Product list with data 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="tableCellAvatar"
+                  data-test-id="table-cell-avatar"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -219447,7 +219133,7 @@ exports[`Storyshots Views / Products / Product list with data 1`] = `
                         class="ProductList-colNameWrapper-id"
                       >
                         <span
-                          data-test="name"
+                          data-test-id="name"
                         >
                           Bean Juice
                         </span>
@@ -219462,14 +219148,14 @@ exports[`Storyshots Views / Products / Product list with data 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test="product-type"
+                  data-test-id="product-type"
                 >
                   Juice
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test="availability"
                   data-test-availability="true"
+                  data-test-id="availability"
                 >
                   <div
                     class="StatusLabel-container-id"
@@ -219490,15 +219176,14 @@ exports[`Storyshots Views / Products / Product list with data 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test="price"
+                  data-test-id="price"
                 >
                   $1.20 - $3.50
                 </td>
               </tr>
               <tr
                 class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test="id"
-                data-test-id="UHJvZHVjdDo3Mw=="
+                data-test-id="id-UHJvZHVjdDo3Mw=="
               >
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -219539,7 +219224,7 @@ exports[`Storyshots Views / Products / Product list with data 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="tableCellAvatar"
+                  data-test-id="table-cell-avatar"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -219560,7 +219245,7 @@ exports[`Storyshots Views / Products / Product list with data 1`] = `
                         class="ProductList-colNameWrapper-id"
                       >
                         <span
-                          data-test="name"
+                          data-test-id="name"
                         >
                           Carrot Juice
                         </span>
@@ -219575,14 +219260,14 @@ exports[`Storyshots Views / Products / Product list with data 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test="product-type"
+                  data-test-id="product-type"
                 >
                   Juice
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test="availability"
                   data-test-availability="true"
+                  data-test-id="availability"
                 >
                   <div
                     class="StatusLabel-container-id"
@@ -219603,15 +219288,14 @@ exports[`Storyshots Views / Products / Product list with data 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test="price"
+                  data-test-id="price"
                 >
                   $1.20 - $3.50
                 </td>
               </tr>
               <tr
                 class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test="id"
-                data-test-id="UHJvZHVjdDo3OA=="
+                data-test-id="id-UHJvZHVjdDo3OA=="
               >
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -219652,7 +219336,7 @@ exports[`Storyshots Views / Products / Product list with data 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="tableCellAvatar"
+                  data-test-id="table-cell-avatar"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -219673,7 +219357,7 @@ exports[`Storyshots Views / Products / Product list with data 1`] = `
                         class="ProductList-colNameWrapper-id"
                       >
                         <span
-                          data-test="name"
+                          data-test-id="name"
                         >
                           Green Juice
                         </span>
@@ -219688,14 +219372,14 @@ exports[`Storyshots Views / Products / Product list with data 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test="product-type"
+                  data-test-id="product-type"
                 >
                   Juice
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test="availability"
                   data-test-availability="true"
+                  data-test-id="availability"
                 >
                   <div
                     class="StatusLabel-container-id"
@@ -219716,15 +219400,14 @@ exports[`Storyshots Views / Products / Product list with data 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test="price"
+                  data-test-id="price"
                 >
                   $1.20 - $3.50
                 </td>
               </tr>
               <tr
                 class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test="id"
-                data-test-id="UHJvZHVjdDo4OQ=="
+                data-test-id="id-UHJvZHVjdDo4OQ=="
               >
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -219765,7 +219448,7 @@ exports[`Storyshots Views / Products / Product list with data 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="tableCellAvatar"
+                  data-test-id="table-cell-avatar"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -219786,7 +219469,7 @@ exports[`Storyshots Views / Products / Product list with data 1`] = `
                         class="ProductList-colNameWrapper-id"
                       >
                         <span
-                          data-test="name"
+                          data-test-id="name"
                         >
                           Code Division T-shirt
                         </span>
@@ -219801,14 +219484,14 @@ exports[`Storyshots Views / Products / Product list with data 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test="product-type"
+                  data-test-id="product-type"
                 >
                   Top (clothing)
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test="availability"
                   data-test-availability="true"
+                  data-test-id="availability"
                 >
                   <div
                     class="StatusLabel-container-id"
@@ -219829,15 +219512,14 @@ exports[`Storyshots Views / Products / Product list with data 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test="price"
+                  data-test-id="price"
                 >
                   $1.20 - $3.50
                 </td>
               </tr>
               <tr
                 class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test="id"
-                data-test-id="UHJvZHVjdDoxMDc="
+                data-test-id="id-UHJvZHVjdDoxMDc="
               >
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -219878,7 +219560,7 @@ exports[`Storyshots Views / Products / Product list with data 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="tableCellAvatar"
+                  data-test-id="table-cell-avatar"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -219899,7 +219581,7 @@ exports[`Storyshots Views / Products / Product list with data 1`] = `
                         class="ProductList-colNameWrapper-id"
                       >
                         <span
-                          data-test="name"
+                          data-test-id="name"
                         >
                           Polo Shirt
                         </span>
@@ -219914,14 +219596,14 @@ exports[`Storyshots Views / Products / Product list with data 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test="product-type"
+                  data-test-id="product-type"
                 >
                   Top (clothing)
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test="availability"
                   data-test-availability="true"
+                  data-test-id="availability"
                 >
                   <div
                     class="StatusLabel-container-id"
@@ -219942,15 +219624,14 @@ exports[`Storyshots Views / Products / Product list with data 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test="price"
+                  data-test-id="price"
                 >
                   $1.20 - $3.50
                 </td>
               </tr>
               <tr
                 class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test="id"
-                data-test-id="UHJvZHVjdDoxMDg="
+                data-test-id="id-UHJvZHVjdDoxMDg="
               >
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -219991,7 +219672,7 @@ exports[`Storyshots Views / Products / Product list with data 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="tableCellAvatar"
+                  data-test-id="table-cell-avatar"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -220012,7 +219693,7 @@ exports[`Storyshots Views / Products / Product list with data 1`] = `
                         class="ProductList-colNameWrapper-id"
                       >
                         <span
-                          data-test="name"
+                          data-test-id="name"
                         >
                           Polo Shirt
                         </span>
@@ -220027,14 +219708,14 @@ exports[`Storyshots Views / Products / Product list with data 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test="product-type"
+                  data-test-id="product-type"
                 >
                   Top (clothing)
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test="availability"
                   data-test-availability="true"
+                  data-test-id="availability"
                 >
                   <div
                     class="StatusLabel-container-id"
@@ -220055,15 +219736,14 @@ exports[`Storyshots Views / Products / Product list with data 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test="price"
+                  data-test-id="price"
                 >
                   $1.20 - $3.50
                 </td>
               </tr>
               <tr
                 class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test="id"
-                data-test-id="UHJvZHVjdDoxMDk="
+                data-test-id="id-UHJvZHVjdDoxMDk="
               >
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -220104,7 +219784,7 @@ exports[`Storyshots Views / Products / Product list with data 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="tableCellAvatar"
+                  data-test-id="table-cell-avatar"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -220125,7 +219805,7 @@ exports[`Storyshots Views / Products / Product list with data 1`] = `
                         class="ProductList-colNameWrapper-id"
                       >
                         <span
-                          data-test="name"
+                          data-test-id="name"
                         >
                           Polo Shirt
                         </span>
@@ -220140,14 +219820,14 @@ exports[`Storyshots Views / Products / Product list with data 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test="product-type"
+                  data-test-id="product-type"
                 >
                   Top (clothing)
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test="availability"
                   data-test-availability="true"
+                  data-test-id="availability"
                 >
                   <div
                     class="StatusLabel-container-id"
@@ -220168,15 +219848,14 @@ exports[`Storyshots Views / Products / Product list with data 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test="price"
+                  data-test-id="price"
                 >
                   $1.20 - $3.50
                 </td>
               </tr>
               <tr
                 class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test="id"
-                data-test-id="UHJvZHVjdDoxMTA="
+                data-test-id="id-UHJvZHVjdDoxMTA="
               >
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -220217,7 +219896,7 @@ exports[`Storyshots Views / Products / Product list with data 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="tableCellAvatar"
+                  data-test-id="table-cell-avatar"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -220238,7 +219917,7 @@ exports[`Storyshots Views / Products / Product list with data 1`] = `
                         class="ProductList-colNameWrapper-id"
                       >
                         <span
-                          data-test="name"
+                          data-test-id="name"
                         >
                           Polo Shirt
                         </span>
@@ -220253,14 +219932,14 @@ exports[`Storyshots Views / Products / Product list with data 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test="product-type"
+                  data-test-id="product-type"
                 >
                   Top (clothing)
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test="availability"
                   data-test-availability="true"
+                  data-test-id="availability"
                 >
                   <div
                     class="StatusLabel-container-id"
@@ -220281,15 +219960,14 @@ exports[`Storyshots Views / Products / Product list with data 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test="price"
+                  data-test-id="price"
                 >
                   $1.20 - $3.50
                 </td>
               </tr>
               <tr
                 class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test="id"
-                data-test-id="UHJvZHVjdDoxMTU="
+                data-test-id="id-UHJvZHVjdDoxMTU="
               >
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -220330,7 +220008,7 @@ exports[`Storyshots Views / Products / Product list with data 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="tableCellAvatar"
+                  data-test-id="table-cell-avatar"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -220351,7 +220029,7 @@ exports[`Storyshots Views / Products / Product list with data 1`] = `
                         class="ProductList-colNameWrapper-id"
                       >
                         <span
-                          data-test="name"
+                          data-test-id="name"
                         >
                           Black Hoodie
                         </span>
@@ -220366,14 +220044,14 @@ exports[`Storyshots Views / Products / Product list with data 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test="product-type"
+                  data-test-id="product-type"
                 >
                   Top (clothing)
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test="availability"
                   data-test-availability="true"
+                  data-test-id="availability"
                 >
                   <div
                     class="StatusLabel-container-id"
@@ -220394,15 +220072,14 @@ exports[`Storyshots Views / Products / Product list with data 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test="price"
+                  data-test-id="price"
                 >
                   $1.20 - $3.50
                 </td>
               </tr>
               <tr
                 class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test="id"
-                data-test-id="UHJvZHVjdDoxMTY="
+                data-test-id="id-UHJvZHVjdDoxMTY="
               >
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -220443,7 +220120,7 @@ exports[`Storyshots Views / Products / Product list with data 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="tableCellAvatar"
+                  data-test-id="table-cell-avatar"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -220464,7 +220141,7 @@ exports[`Storyshots Views / Products / Product list with data 1`] = `
                         class="ProductList-colNameWrapper-id"
                       >
                         <span
-                          data-test="name"
+                          data-test-id="name"
                         >
                           Blue Hoodie
                         </span>
@@ -220479,14 +220156,14 @@ exports[`Storyshots Views / Products / Product list with data 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test="product-type"
+                  data-test-id="product-type"
                 >
                   Top (clothing)
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test="availability"
                   data-test-availability="true"
+                  data-test-id="availability"
                 >
                   <div
                     class="StatusLabel-container-id"
@@ -220507,15 +220184,14 @@ exports[`Storyshots Views / Products / Product list with data 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test="price"
+                  data-test-id="price"
                 >
                   $1.20 - $3.50
                 </td>
               </tr>
               <tr
                 class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test="id"
-                data-test-id="UHJvZHVjdDoxMTc="
+                data-test-id="id-UHJvZHVjdDoxMTc="
               >
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -220556,7 +220232,7 @@ exports[`Storyshots Views / Products / Product list with data 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="tableCellAvatar"
+                  data-test-id="table-cell-avatar"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -220577,7 +220253,7 @@ exports[`Storyshots Views / Products / Product list with data 1`] = `
                         class="ProductList-colNameWrapper-id"
                       >
                         <span
-                          data-test="name"
+                          data-test-id="name"
                         >
                           Mustard Hoodie
                         </span>
@@ -220592,14 +220268,14 @@ exports[`Storyshots Views / Products / Product list with data 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test="product-type"
+                  data-test-id="product-type"
                 >
                   Top (clothing)
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test="availability"
                   data-test-availability="true"
+                  data-test-id="availability"
                 >
                   <div
                     class="StatusLabel-container-id"
@@ -220620,15 +220296,14 @@ exports[`Storyshots Views / Products / Product list with data 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test="price"
+                  data-test-id="price"
                 >
                   $1.20 - $3.50
                 </td>
               </tr>
               <tr
                 class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
-                data-test="id"
-                data-test-id="UHJvZHVjdDo4NQ=="
+                data-test-id="id-UHJvZHVjdDo4NQ=="
               >
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
@@ -220669,7 +220344,7 @@ exports[`Storyshots Views / Products / Product list with data 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
-                  data-test-id="tableCellAvatar"
+                  data-test-id="table-cell-avatar"
                   thumbnail="placeholder255x255.png"
                 >
                   <div
@@ -220690,7 +220365,7 @@ exports[`Storyshots Views / Products / Product list with data 1`] = `
                         class="ProductList-colNameWrapper-id"
                       >
                         <span
-                          data-test="name"
+                          data-test-id="name"
                         >
                           Colored Parrot Cushion
                         </span>
@@ -220705,14 +220380,14 @@ exports[`Storyshots Views / Products / Product list with data 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
-                  data-test="product-type"
+                  data-test-id="product-type"
                 >
                   Cushion
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
-                  data-test="availability"
                   data-test-availability="true"
+                  data-test-id="availability"
                 >
                   <div
                     class="StatusLabel-container-id"
@@ -220733,7 +220408,7 @@ exports[`Storyshots Views / Products / Product list with data 1`] = `
                 </td>
                 <td
                   class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
-                  data-test="price"
+                  data-test-id="price"
                 >
                   $1.20 - $3.50
                 </td>
@@ -220827,7 +220502,7 @@ exports[`Storyshots Views / Products / Product variant details attribute errors
                     </td>
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductVariantNavigation-colAvatar-id"
-                      data-test-id="tableCellAvatar"
+                      data-test-id="table-cell-avatar"
                       thumbnail="placeholder60x60.png"
                     >
                       <div
@@ -220874,7 +220549,7 @@ exports[`Storyshots Views / Products / Product variant details attribute errors
                     </td>
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductVariantNavigation-colAvatar-id"
-                      data-test-id="tableCellAvatar"
+                      data-test-id="table-cell-avatar"
                       thumbnail="placeholder60x60.png"
                     >
                       <div
@@ -220921,7 +220596,7 @@ exports[`Storyshots Views / Products / Product variant details attribute errors
                     </td>
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductVariantNavigation-colAvatar-id"
-                      data-test-id="tableCellAvatar"
+                      data-test-id="table-cell-avatar"
                       thumbnail="placeholder60x60.png"
                     >
                       <div
@@ -220968,7 +220643,7 @@ exports[`Storyshots Views / Products / Product variant details attribute errors
                     </td>
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductVariantNavigation-colAvatar-id"
-                      data-test-id="tableCellAvatar"
+                      data-test-id="table-cell-avatar"
                       thumbnail="placeholder60x60.png"
                     >
                       <div
@@ -221174,7 +220849,7 @@ exports[`Storyshots Views / Products / Product variant details attribute errors
                 </div>
                 <button
                   class="MuiButtonBase-root-id IconButton-secondary-id Attributes-expansionBarButton-id IconButton-hoverOutline-id"
-                  data-test="attributes-expand"
+                  data-test-id="attributes-expand"
                   tabindex="0"
                   type="button"
                 >
@@ -221198,7 +220873,7 @@ exports[`Storyshots Views / Products / Product variant details attribute errors
               >
                 <div
                   class="BasicAttributeRow-attributeSectionLabel-id"
-                  data-test="attribute-label"
+                  data-test-id="attribute-label"
                 >
                   <div
                     class="MuiTypography-root-id MuiTypography-body1-id"
@@ -221208,7 +220883,7 @@ exports[`Storyshots Views / Products / Product variant details attribute errors
                 </div>
                 <div
                   class="BasicAttributeRow-value-id"
-                  data-test="attribute-value"
+                  data-test-id="attribute-value"
                 >
                   <div
                     class="AttributeRow-fileField-id"
@@ -221230,7 +220905,7 @@ exports[`Storyshots Views / Products / Product variant details attribute errors
                       <button
                         class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                         color="primary"
-                        data-test="button-delete-file"
+                        data-test-id="button-delete-file"
                         tabindex="0"
                         type="button"
                       >
@@ -221252,7 +220927,7 @@ exports[`Storyshots Views / Products / Product variant details attribute errors
                   </div>
                   <input
                     class="FileUploadField-fileField-id"
-                    data-test="upload-file-input"
+                    data-test-id="upload-file-input"
                     id="fileUpload"
                     name="attribute:Attachment"
                     type="file"
@@ -221297,7 +220972,7 @@ exports[`Storyshots Views / Products / Product variant details attribute errors
                 </div>
                 <button
                   class="MuiButtonBase-root-id IconButton-secondary-id Attributes-expansionBarButton-id IconButton-hoverOutline-id"
-                  data-test="attributes-expand"
+                  data-test-id="attributes-expand"
                   tabindex="0"
                   type="button"
                 >
@@ -221321,7 +220996,7 @@ exports[`Storyshots Views / Products / Product variant details attribute errors
               >
                 <div
                   class="BasicAttributeRow-attributeSectionLabel-id"
-                  data-test="attribute-label"
+                  data-test-id="attribute-label"
                 >
                   <div
                     class="MuiTypography-root-id MuiTypography-body1-id"
@@ -221331,7 +221006,7 @@ exports[`Storyshots Views / Products / Product variant details attribute errors
                 </div>
                 <div
                   class="BasicAttributeRow-value-id"
-                  data-test="attribute-value"
+                  data-test-id="attribute-value"
                 >
                   <div
                     class="SingleAutocompleteSelectField-container-id"
@@ -221406,7 +221081,7 @@ exports[`Storyshots Views / Products / Product variant details attribute errors
               >
                 <div
                   class="BasicAttributeRow-attributeSectionLabel-id"
-                  data-test="attribute-label"
+                  data-test-id="attribute-label"
                 >
                   <div
                     class="MuiTypography-root-id MuiTypography-body1-id"
@@ -221416,7 +221091,7 @@ exports[`Storyshots Views / Products / Product variant details attribute errors
                 </div>
                 <div
                   class="BasicAttributeRow-value-id"
-                  data-test="attribute-value"
+                  data-test-id="attribute-value"
                 >
                   <div
                     class="SingleAutocompleteSelectField-container-id"
@@ -222310,8 +221985,8 @@ exports[`Storyshots Views / Products / Product variant details attribute errors
           />
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="metadataEditor"
             data-test-expanded="true"
+            data-test-id="metadata-editor"
             data-test-is-private="false"
           >
             <div
@@ -222326,7 +222001,7 @@ exports[`Storyshots Views / Products / Product variant details attribute errors
                   Metadata
                   <button
                     class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test="expand"
+                    data-test-id="expand"
                     tabindex="0"
                     type="button"
                   >
@@ -222398,7 +222073,7 @@ exports[`Storyshots Views / Products / Product variant details attribute errors
               >
                 <tr
                   class="MuiTableRow-root-id MuiTableRow-hover-id"
-                  data-test="field"
+                  data-test-id="field"
                 >
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colName-id"
@@ -222479,8 +222154,7 @@ exports[`Storyshots Views / Products / Product variant details attribute errors
                   >
                     <button
                       class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                      data-test="deleteField"
-                      data-test-id="0"
+                      data-test-id="delete-field-0"
                       tabindex="0"
                       type="button"
                     >
@@ -222507,7 +222181,7 @@ exports[`Storyshots Views / Products / Product variant details attribute errors
             >
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-                data-test="addField"
+                data-test-id="add-field"
                 tabindex="0"
                 type="button"
               >
@@ -222524,8 +222198,8 @@ exports[`Storyshots Views / Products / Product variant details attribute errors
           />
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="metadataEditor"
             data-test-expanded="true"
+            data-test-id="metadata-editor"
             data-test-is-private="true"
           >
             <div
@@ -222540,7 +222214,7 @@ exports[`Storyshots Views / Products / Product variant details attribute errors
                   Private Metadata
                   <button
                     class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test="expand"
+                    data-test-id="expand"
                     tabindex="0"
                     type="button"
                   >
@@ -222586,7 +222260,7 @@ exports[`Storyshots Views / Products / Product variant details attribute errors
             >
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-                data-test="addField"
+                data-test-id="add-field"
                 tabindex="0"
                 type="button"
               >
@@ -222685,7 +222359,7 @@ exports[`Storyshots Views / Products / Product variant details no warehouses 1`]
                     </td>
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductVariantNavigation-colAvatar-id"
-                      data-test-id="tableCellAvatar"
+                      data-test-id="table-cell-avatar"
                       thumbnail="placeholder60x60.png"
                     >
                       <div
@@ -222732,7 +222406,7 @@ exports[`Storyshots Views / Products / Product variant details no warehouses 1`]
                     </td>
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductVariantNavigation-colAvatar-id"
-                      data-test-id="tableCellAvatar"
+                      data-test-id="table-cell-avatar"
                       thumbnail="placeholder60x60.png"
                     >
                       <div
@@ -222779,7 +222453,7 @@ exports[`Storyshots Views / Products / Product variant details no warehouses 1`]
                     </td>
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductVariantNavigation-colAvatar-id"
-                      data-test-id="tableCellAvatar"
+                      data-test-id="table-cell-avatar"
                       thumbnail="placeholder60x60.png"
                     >
                       <div
@@ -222826,7 +222500,7 @@ exports[`Storyshots Views / Products / Product variant details no warehouses 1`]
                     </td>
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductVariantNavigation-colAvatar-id"
-                      data-test-id="tableCellAvatar"
+                      data-test-id="table-cell-avatar"
                       thumbnail="placeholder60x60.png"
                     >
                       <div
@@ -223032,7 +222706,7 @@ exports[`Storyshots Views / Products / Product variant details no warehouses 1`]
                 </div>
                 <button
                   class="MuiButtonBase-root-id IconButton-secondary-id Attributes-expansionBarButton-id IconButton-hoverOutline-id"
-                  data-test="attributes-expand"
+                  data-test-id="attributes-expand"
                   tabindex="0"
                   type="button"
                 >
@@ -223056,7 +222730,7 @@ exports[`Storyshots Views / Products / Product variant details no warehouses 1`]
               >
                 <div
                   class="BasicAttributeRow-attributeSectionLabel-id"
-                  data-test="attribute-label"
+                  data-test-id="attribute-label"
                 >
                   <div
                     class="MuiTypography-root-id MuiTypography-body1-id"
@@ -223066,7 +222740,7 @@ exports[`Storyshots Views / Products / Product variant details no warehouses 1`]
                 </div>
                 <div
                   class="BasicAttributeRow-value-id"
-                  data-test="attribute-value"
+                  data-test-id="attribute-value"
                 >
                   <div
                     class="AttributeRow-fileField-id"
@@ -223088,7 +222762,7 @@ exports[`Storyshots Views / Products / Product variant details no warehouses 1`]
                       <button
                         class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                         color="primary"
-                        data-test="button-delete-file"
+                        data-test-id="button-delete-file"
                         tabindex="0"
                         type="button"
                       >
@@ -223110,7 +222784,7 @@ exports[`Storyshots Views / Products / Product variant details no warehouses 1`]
                   </div>
                   <input
                     class="FileUploadField-fileField-id"
-                    data-test="upload-file-input"
+                    data-test-id="upload-file-input"
                     id="fileUpload"
                     name="attribute:Attachment"
                     type="file"
@@ -223155,7 +222829,7 @@ exports[`Storyshots Views / Products / Product variant details no warehouses 1`]
                 </div>
                 <button
                   class="MuiButtonBase-root-id IconButton-secondary-id Attributes-expansionBarButton-id IconButton-hoverOutline-id"
-                  data-test="attributes-expand"
+                  data-test-id="attributes-expand"
                   tabindex="0"
                   type="button"
                 >
@@ -223179,7 +222853,7 @@ exports[`Storyshots Views / Products / Product variant details no warehouses 1`]
               >
                 <div
                   class="BasicAttributeRow-attributeSectionLabel-id"
-                  data-test="attribute-label"
+                  data-test-id="attribute-label"
                 >
                   <div
                     class="MuiTypography-root-id MuiTypography-body1-id"
@@ -223189,7 +222863,7 @@ exports[`Storyshots Views / Products / Product variant details no warehouses 1`]
                 </div>
                 <div
                   class="BasicAttributeRow-value-id"
-                  data-test="attribute-value"
+                  data-test-id="attribute-value"
                 >
                   <div
                     class="SingleAutocompleteSelectField-container-id"
@@ -223259,7 +222933,7 @@ exports[`Storyshots Views / Products / Product variant details no warehouses 1`]
               >
                 <div
                   class="BasicAttributeRow-attributeSectionLabel-id"
-                  data-test="attribute-label"
+                  data-test-id="attribute-label"
                 >
                   <div
                     class="MuiTypography-root-id MuiTypography-body1-id"
@@ -223269,7 +222943,7 @@ exports[`Storyshots Views / Products / Product variant details no warehouses 1`]
                 </div>
                 <div
                   class="BasicAttributeRow-value-id"
-                  data-test="attribute-value"
+                  data-test-id="attribute-value"
                 >
                   <div
                     class="SingleAutocompleteSelectField-container-id"
@@ -224158,8 +223832,8 @@ exports[`Storyshots Views / Products / Product variant details no warehouses 1`]
           />
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="metadataEditor"
             data-test-expanded="true"
+            data-test-id="metadata-editor"
             data-test-is-private="false"
           >
             <div
@@ -224174,7 +223848,7 @@ exports[`Storyshots Views / Products / Product variant details no warehouses 1`]
                   Metadata
                   <button
                     class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test="expand"
+                    data-test-id="expand"
                     tabindex="0"
                     type="button"
                   >
@@ -224246,7 +223920,7 @@ exports[`Storyshots Views / Products / Product variant details no warehouses 1`]
               >
                 <tr
                   class="MuiTableRow-root-id MuiTableRow-hover-id"
-                  data-test="field"
+                  data-test-id="field"
                 >
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colName-id"
@@ -224327,8 +224001,7 @@ exports[`Storyshots Views / Products / Product variant details no warehouses 1`]
                   >
                     <button
                       class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                      data-test="deleteField"
-                      data-test-id="0"
+                      data-test-id="delete-field-0"
                       tabindex="0"
                       type="button"
                     >
@@ -224355,7 +224028,7 @@ exports[`Storyshots Views / Products / Product variant details no warehouses 1`]
             >
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-                data-test="addField"
+                data-test-id="add-field"
                 tabindex="0"
                 type="button"
               >
@@ -224372,8 +224045,8 @@ exports[`Storyshots Views / Products / Product variant details no warehouses 1`]
           />
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="metadataEditor"
             data-test-expanded="true"
+            data-test-id="metadata-editor"
             data-test-is-private="true"
           >
             <div
@@ -224388,7 +224061,7 @@ exports[`Storyshots Views / Products / Product variant details no warehouses 1`]
                   Private Metadata
                   <button
                     class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test="expand"
+                    data-test-id="expand"
                     tabindex="0"
                     type="button"
                   >
@@ -224434,7 +224107,7 @@ exports[`Storyshots Views / Products / Product variant details no warehouses 1`]
             >
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-                data-test="addField"
+                data-test-id="add-field"
                 tabindex="0"
                 type="button"
               >
@@ -224533,7 +224206,7 @@ exports[`Storyshots Views / Products / Product variant details when loaded data
                     </td>
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductVariantNavigation-colAvatar-id"
-                      data-test-id="tableCellAvatar"
+                      data-test-id="table-cell-avatar"
                       thumbnail="placeholder60x60.png"
                     >
                       <div
@@ -224580,7 +224253,7 @@ exports[`Storyshots Views / Products / Product variant details when loaded data
                     </td>
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductVariantNavigation-colAvatar-id"
-                      data-test-id="tableCellAvatar"
+                      data-test-id="table-cell-avatar"
                       thumbnail="placeholder60x60.png"
                     >
                       <div
@@ -224627,7 +224300,7 @@ exports[`Storyshots Views / Products / Product variant details when loaded data
                     </td>
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductVariantNavigation-colAvatar-id"
-                      data-test-id="tableCellAvatar"
+                      data-test-id="table-cell-avatar"
                       thumbnail="placeholder60x60.png"
                     >
                       <div
@@ -224674,7 +224347,7 @@ exports[`Storyshots Views / Products / Product variant details when loaded data
                     </td>
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductVariantNavigation-colAvatar-id"
-                      data-test-id="tableCellAvatar"
+                      data-test-id="table-cell-avatar"
                       thumbnail="placeholder60x60.png"
                     >
                       <div
@@ -224880,7 +224553,7 @@ exports[`Storyshots Views / Products / Product variant details when loaded data
                 </div>
                 <button
                   class="MuiButtonBase-root-id IconButton-secondary-id Attributes-expansionBarButton-id IconButton-hoverOutline-id"
-                  data-test="attributes-expand"
+                  data-test-id="attributes-expand"
                   tabindex="0"
                   type="button"
                 >
@@ -224904,7 +224577,7 @@ exports[`Storyshots Views / Products / Product variant details when loaded data
               >
                 <div
                   class="BasicAttributeRow-attributeSectionLabel-id"
-                  data-test="attribute-label"
+                  data-test-id="attribute-label"
                 >
                   <div
                     class="MuiTypography-root-id MuiTypography-body1-id"
@@ -224914,7 +224587,7 @@ exports[`Storyshots Views / Products / Product variant details when loaded data
                 </div>
                 <div
                   class="BasicAttributeRow-value-id"
-                  data-test="attribute-value"
+                  data-test-id="attribute-value"
                 >
                   <div
                     class="AttributeRow-fileField-id"
@@ -224936,7 +224609,7 @@ exports[`Storyshots Views / Products / Product variant details when loaded data
                       <button
                         class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                         color="primary"
-                        data-test="button-delete-file"
+                        data-test-id="button-delete-file"
                         tabindex="0"
                         type="button"
                       >
@@ -224958,7 +224631,7 @@ exports[`Storyshots Views / Products / Product variant details when loaded data
                   </div>
                   <input
                     class="FileUploadField-fileField-id"
-                    data-test="upload-file-input"
+                    data-test-id="upload-file-input"
                     id="fileUpload"
                     name="attribute:Attachment"
                     type="file"
@@ -225003,7 +224676,7 @@ exports[`Storyshots Views / Products / Product variant details when loaded data
                 </div>
                 <button
                   class="MuiButtonBase-root-id IconButton-secondary-id Attributes-expansionBarButton-id IconButton-hoverOutline-id"
-                  data-test="attributes-expand"
+                  data-test-id="attributes-expand"
                   tabindex="0"
                   type="button"
                 >
@@ -225027,7 +224700,7 @@ exports[`Storyshots Views / Products / Product variant details when loaded data
               >
                 <div
                   class="BasicAttributeRow-attributeSectionLabel-id"
-                  data-test="attribute-label"
+                  data-test-id="attribute-label"
                 >
                   <div
                     class="MuiTypography-root-id MuiTypography-body1-id"
@@ -225037,7 +224710,7 @@ exports[`Storyshots Views / Products / Product variant details when loaded data
                 </div>
                 <div
                   class="BasicAttributeRow-value-id"
-                  data-test="attribute-value"
+                  data-test-id="attribute-value"
                 >
                   <div
                     class="SingleAutocompleteSelectField-container-id"
@@ -225107,7 +224780,7 @@ exports[`Storyshots Views / Products / Product variant details when loaded data
               >
                 <div
                   class="BasicAttributeRow-attributeSectionLabel-id"
-                  data-test="attribute-label"
+                  data-test-id="attribute-label"
                 >
                   <div
                     class="MuiTypography-root-id MuiTypography-body1-id"
@@ -225117,7 +224790,7 @@ exports[`Storyshots Views / Products / Product variant details when loaded data
                 </div>
                 <div
                   class="BasicAttributeRow-value-id"
-                  data-test="attribute-value"
+                  data-test-id="attribute-value"
                 >
                   <div
                     class="SingleAutocompleteSelectField-container-id"
@@ -226006,8 +225679,8 @@ exports[`Storyshots Views / Products / Product variant details when loaded data
           />
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="metadataEditor"
             data-test-expanded="true"
+            data-test-id="metadata-editor"
             data-test-is-private="false"
           >
             <div
@@ -226022,7 +225695,7 @@ exports[`Storyshots Views / Products / Product variant details when loaded data
                   Metadata
                   <button
                     class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test="expand"
+                    data-test-id="expand"
                     tabindex="0"
                     type="button"
                   >
@@ -226094,7 +225767,7 @@ exports[`Storyshots Views / Products / Product variant details when loaded data
               >
                 <tr
                   class="MuiTableRow-root-id MuiTableRow-hover-id"
-                  data-test="field"
+                  data-test-id="field"
                 >
                   <td
                     class="MuiTableCell-root-id MuiTableCell-body-id Metadata-colName-id"
@@ -226175,8 +225848,7 @@ exports[`Storyshots Views / Products / Product variant details when loaded data
                   >
                     <button
                       class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
-                      data-test="deleteField"
-                      data-test-id="0"
+                      data-test-id="delete-field-0"
                       tabindex="0"
                       type="button"
                     >
@@ -226203,7 +225875,7 @@ exports[`Storyshots Views / Products / Product variant details when loaded data
             >
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-                data-test="addField"
+                data-test-id="add-field"
                 tabindex="0"
                 type="button"
               >
@@ -226220,8 +225892,8 @@ exports[`Storyshots Views / Products / Product variant details when loaded data
           />
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="metadataEditor"
             data-test-expanded="true"
+            data-test-id="metadata-editor"
             data-test-is-private="true"
           >
             <div
@@ -226236,7 +225908,7 @@ exports[`Storyshots Views / Products / Product variant details when loaded data
                   Private Metadata
                   <button
                     class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test="expand"
+                    data-test-id="expand"
                     tabindex="0"
                     type="button"
                   >
@@ -226282,7 +225954,7 @@ exports[`Storyshots Views / Products / Product variant details when loaded data
             >
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-                data-test="addField"
+                data-test-id="add-field"
                 tabindex="0"
                 type="button"
               >
@@ -226387,7 +226059,7 @@ exports[`Storyshots Views / Products / Product variant details when loading data
                     </td>
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductVariantNavigation-colAvatar-id"
-                      data-test-id="tableCellAvatar"
+                      data-test-id="table-cell-avatar"
                     >
                       <div
                         class="Avatar-content-id"
@@ -226514,7 +226186,7 @@ exports[`Storyshots Views / Products / Product variant details when loading data
                 </div>
                 <button
                   class="MuiButtonBase-root-id IconButton-secondary-id Attributes-expansionBarButton-id IconButton-hoverOutline-id"
-                  data-test="attributes-expand"
+                  data-test-id="attributes-expand"
                   tabindex="0"
                   type="button"
                 >
@@ -226568,7 +226240,7 @@ exports[`Storyshots Views / Products / Product variant details when loading data
                 </div>
                 <button
                   class="MuiButtonBase-root-id IconButton-secondary-id Attributes-expansionBarButton-id IconButton-hoverOutline-id"
-                  data-test="attributes-expand"
+                  data-test-id="attributes-expand"
                   tabindex="0"
                   type="button"
                 >
@@ -227075,8 +226747,8 @@ exports[`Storyshots Views / Products / Product variant details when loading data
           />
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="metadataEditor"
             data-test-expanded="true"
+            data-test-id="metadata-editor"
             data-test-is-private="false"
           >
             <div
@@ -227091,7 +226763,7 @@ exports[`Storyshots Views / Products / Product variant details when loading data
                   Metadata
                   <button
                     class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test="expand"
+                    data-test-id="expand"
                     tabindex="0"
                     type="button"
                   >
@@ -227136,8 +226808,8 @@ exports[`Storyshots Views / Products / Product variant details when loading data
           />
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="metadataEditor"
             data-test-expanded="true"
+            data-test-id="metadata-editor"
             data-test-is-private="true"
           >
             <div
@@ -227152,7 +226824,7 @@ exports[`Storyshots Views / Products / Product variant details when loading data
                   Private Metadata
                   <button
                     class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test="expand"
+                    data-test-id="expand"
                     tabindex="0"
                     type="button"
                   >
@@ -227266,7 +226938,7 @@ exports[`Storyshots Views / Shipping / Create shipping zone default 1`] = `
                   <input
                     aria-invalid="false"
                     class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                    data-test="name"
+                    data-test-id="name"
                     name="name"
                     type="text"
                     value=""
@@ -227491,7 +227163,7 @@ exports[`Storyshots Views / Shipping / Create shipping zone form errors 1`] = `
                   <input
                     aria-invalid="true"
                     class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                    data-test="name"
+                    data-test-id="name"
                     name="name"
                     type="text"
                     value=""
@@ -227721,7 +227393,7 @@ exports[`Storyshots Views / Shipping / Create shipping zone loading 1`] = `
                   <input
                     aria-invalid="false"
                     class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
-                    data-test="name"
+                    data-test-id="name"
                     disabled=""
                     name="name"
                     type="text"
@@ -227972,8 +227644,7 @@ exports[`Storyshots Views / Shipping / Shipping rate create price rate 1`] = `
               />
               <div
                 class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-                data-test="richTextEditor"
-                data-test-id="description"
+                data-test-id="rich-text-editor-description"
               >
                 <label
                   class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-focused-id MuiInputLabel-focused-id"
@@ -228465,7 +228136,7 @@ exports[`Storyshots Views / Shipping / Shipping rate create price rate 1`] = `
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                  data-test="add-postal-code-range"
+                  data-test-id="add-postal-code-range"
                   tabindex="0"
                   type="button"
                 >
@@ -228881,7 +228552,7 @@ exports[`Storyshots Views / Shipping / Shipping rate create price rate 1`] = `
                     </td>
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ShippingMethodProducts-colName-id"
-                      data-test-id="tableCellAvatar"
+                      data-test-id="table-cell-avatar"
                       thumbnail=""
                     >
                       <div
@@ -228948,8 +228619,8 @@ exports[`Storyshots Views / Shipping / Shipping rate create price rate 1`] = `
           />
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="metadataEditor"
             data-test-expanded="true"
+            data-test-id="metadata-editor"
             data-test-is-private="false"
           >
             <div
@@ -228964,7 +228635,7 @@ exports[`Storyshots Views / Shipping / Shipping rate create price rate 1`] = `
                   Metadata
                   <button
                     class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test="expand"
+                    data-test-id="expand"
                     tabindex="0"
                     type="button"
                   >
@@ -229010,7 +228681,7 @@ exports[`Storyshots Views / Shipping / Shipping rate create price rate 1`] = `
             >
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-                data-test="addField"
+                data-test-id="add-field"
                 tabindex="0"
                 type="button"
               >
@@ -229027,8 +228698,8 @@ exports[`Storyshots Views / Shipping / Shipping rate create price rate 1`] = `
           />
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="metadataEditor"
             data-test-expanded="true"
+            data-test-id="metadata-editor"
             data-test-is-private="true"
           >
             <div
@@ -229043,7 +228714,7 @@ exports[`Storyshots Views / Shipping / Shipping rate create price rate 1`] = `
                   Private Metadata
                   <button
                     class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test="expand"
+                    data-test-id="expand"
                     tabindex="0"
                     type="button"
                   >
@@ -229089,7 +228760,7 @@ exports[`Storyshots Views / Shipping / Shipping rate create price rate 1`] = `
             >
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-                data-test="addField"
+                data-test-id="add-field"
                 tabindex="0"
                 type="button"
               >
@@ -229248,8 +228919,7 @@ exports[`Storyshots Views / Shipping / Shipping rate create weight rate 1`] = `
               />
               <div
                 class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-                data-test="richTextEditor"
-                data-test-id="description"
+                data-test-id="rich-text-editor-description"
               >
                 <label
                   class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-focused-id MuiInputLabel-focused-id"
@@ -229668,7 +229338,7 @@ exports[`Storyshots Views / Shipping / Shipping rate create weight rate 1`] = `
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                  data-test="add-postal-code-range"
+                  data-test-id="add-postal-code-range"
                   tabindex="0"
                   type="button"
                 >
@@ -230084,7 +229754,7 @@ exports[`Storyshots Views / Shipping / Shipping rate create weight rate 1`] = `
                     </td>
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ShippingMethodProducts-colName-id"
-                      data-test-id="tableCellAvatar"
+                      data-test-id="table-cell-avatar"
                       thumbnail=""
                     >
                       <div
@@ -230151,8 +229821,8 @@ exports[`Storyshots Views / Shipping / Shipping rate create weight rate 1`] = `
           />
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="metadataEditor"
             data-test-expanded="true"
+            data-test-id="metadata-editor"
             data-test-is-private="false"
           >
             <div
@@ -230167,7 +229837,7 @@ exports[`Storyshots Views / Shipping / Shipping rate create weight rate 1`] = `
                   Metadata
                   <button
                     class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test="expand"
+                    data-test-id="expand"
                     tabindex="0"
                     type="button"
                   >
@@ -230213,7 +229883,7 @@ exports[`Storyshots Views / Shipping / Shipping rate create weight rate 1`] = `
             >
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-                data-test="addField"
+                data-test-id="add-field"
                 tabindex="0"
                 type="button"
               >
@@ -230230,8 +229900,8 @@ exports[`Storyshots Views / Shipping / Shipping rate create weight rate 1`] = `
           />
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="metadataEditor"
             data-test-expanded="true"
+            data-test-id="metadata-editor"
             data-test-is-private="true"
           >
             <div
@@ -230246,7 +229916,7 @@ exports[`Storyshots Views / Shipping / Shipping rate create weight rate 1`] = `
                   Private Metadata
                   <button
                     class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test="expand"
+                    data-test-id="expand"
                     tabindex="0"
                     type="button"
                   >
@@ -230292,7 +229962,7 @@ exports[`Storyshots Views / Shipping / Shipping rate create weight rate 1`] = `
             >
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-                data-test="addField"
+                data-test-id="add-field"
                 tabindex="0"
                 type="button"
               >
@@ -230458,8 +230128,7 @@ exports[`Storyshots Views / Shipping / Shipping rate loading 1`] = `
               />
               <div
                 class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-                data-test="richTextEditor"
-                data-test-id="description"
+                data-test-id="rich-text-editor-description"
               >
                 <label
                   class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiFormLabel-focused-id MuiInputLabel-focused-id"
@@ -230794,7 +230463,7 @@ exports[`Storyshots Views / Shipping / Shipping rate loading 1`] = `
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                  data-test="add-postal-code-range"
+                  data-test-id="add-postal-code-range"
                   tabindex="0"
                   type="button"
                 >
@@ -231092,7 +230761,7 @@ exports[`Storyshots Views / Shipping / Shipping rate loading 1`] = `
                     </td>
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ShippingMethodProducts-colName-id"
-                      data-test-id="tableCellAvatar"
+                      data-test-id="table-cell-avatar"
                     >
                       <div
                         class="Avatar-content-id"
@@ -231159,8 +230828,8 @@ exports[`Storyshots Views / Shipping / Shipping rate loading 1`] = `
           />
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="metadataEditor"
             data-test-expanded="true"
+            data-test-id="metadata-editor"
             data-test-is-private="false"
           >
             <div
@@ -231175,7 +230844,7 @@ exports[`Storyshots Views / Shipping / Shipping rate loading 1`] = `
                   Metadata
                   <button
                     class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test="expand"
+                    data-test-id="expand"
                     tabindex="0"
                     type="button"
                   >
@@ -231220,8 +230889,8 @@ exports[`Storyshots Views / Shipping / Shipping rate loading 1`] = `
           />
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="metadataEditor"
             data-test-expanded="true"
+            data-test-id="metadata-editor"
             data-test-is-private="true"
           >
             <div
@@ -231236,7 +230905,7 @@ exports[`Storyshots Views / Shipping / Shipping rate loading 1`] = `
                   Private Metadata
                   <button
                     class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test="expand"
+                    data-test-id="expand"
                     tabindex="0"
                     type="button"
                   >
@@ -231423,8 +231092,7 @@ exports[`Storyshots Views / Shipping / Shipping rate update price rate 1`] = `
               />
               <div
                 class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-                data-test="richTextEditor"
-                data-test-id="description"
+                data-test-id="rich-text-editor-description"
               >
                 <label
                   class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-focused-id MuiInputLabel-focused-id"
@@ -231821,7 +231489,7 @@ exports[`Storyshots Views / Shipping / Shipping rate update price rate 1`] = `
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                  data-test="add-postal-code-range"
+                  data-test-id="add-postal-code-range"
                   tabindex="0"
                   type="button"
                 >
@@ -232237,7 +231905,7 @@ exports[`Storyshots Views / Shipping / Shipping rate update price rate 1`] = `
                     </td>
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ShippingMethodProducts-colName-id"
-                      data-test-id="tableCellAvatar"
+                      data-test-id="table-cell-avatar"
                       thumbnail=""
                     >
                       <div
@@ -232304,8 +231972,8 @@ exports[`Storyshots Views / Shipping / Shipping rate update price rate 1`] = `
           />
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="metadataEditor"
             data-test-expanded="true"
+            data-test-id="metadata-editor"
             data-test-is-private="false"
           >
             <div
@@ -232320,7 +231988,7 @@ exports[`Storyshots Views / Shipping / Shipping rate update price rate 1`] = `
                   Metadata
                   <button
                     class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test="expand"
+                    data-test-id="expand"
                     tabindex="0"
                     type="button"
                   >
@@ -232366,7 +232034,7 @@ exports[`Storyshots Views / Shipping / Shipping rate update price rate 1`] = `
             >
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-                data-test="addField"
+                data-test-id="add-field"
                 tabindex="0"
                 type="button"
               >
@@ -232383,8 +232051,8 @@ exports[`Storyshots Views / Shipping / Shipping rate update price rate 1`] = `
           />
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="metadataEditor"
             data-test-expanded="true"
+            data-test-id="metadata-editor"
             data-test-is-private="true"
           >
             <div
@@ -232399,7 +232067,7 @@ exports[`Storyshots Views / Shipping / Shipping rate update price rate 1`] = `
                   Private Metadata
                   <button
                     class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test="expand"
+                    data-test-id="expand"
                     tabindex="0"
                     type="button"
                   >
@@ -232445,7 +232113,7 @@ exports[`Storyshots Views / Shipping / Shipping rate update price rate 1`] = `
             >
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-                data-test="addField"
+                data-test-id="add-field"
                 tabindex="0"
                 type="button"
               >
@@ -232620,8 +232288,7 @@ exports[`Storyshots Views / Shipping / Shipping rate update weight rate 1`] = `
               />
               <div
                 class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
-                data-test="richTextEditor"
-                data-test-id="description"
+                data-test-id="rich-text-editor-description"
               >
                 <label
                   class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id MuiFormLabel-focused-id MuiInputLabel-focused-id"
@@ -233107,7 +232774,7 @@ exports[`Storyshots Views / Shipping / Shipping rate update weight rate 1`] = `
               >
                 <button
                   class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                  data-test="add-postal-code-range"
+                  data-test-id="add-postal-code-range"
                   tabindex="0"
                   type="button"
                 >
@@ -233523,7 +233190,7 @@ exports[`Storyshots Views / Shipping / Shipping rate update weight rate 1`] = `
                     </td>
                     <td
                       class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ShippingMethodProducts-colName-id"
-                      data-test-id="tableCellAvatar"
+                      data-test-id="table-cell-avatar"
                       thumbnail=""
                     >
                       <div
@@ -233590,8 +233257,8 @@ exports[`Storyshots Views / Shipping / Shipping rate update weight rate 1`] = `
           />
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="metadataEditor"
             data-test-expanded="true"
+            data-test-id="metadata-editor"
             data-test-is-private="false"
           >
             <div
@@ -233606,7 +233273,7 @@ exports[`Storyshots Views / Shipping / Shipping rate update weight rate 1`] = `
                   Metadata
                   <button
                     class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test="expand"
+                    data-test-id="expand"
                     tabindex="0"
                     type="button"
                   >
@@ -233652,7 +233319,7 @@ exports[`Storyshots Views / Shipping / Shipping rate update weight rate 1`] = `
             >
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-                data-test="addField"
+                data-test-id="add-field"
                 tabindex="0"
                 type="button"
               >
@@ -233669,8 +233336,8 @@ exports[`Storyshots Views / Shipping / Shipping rate update weight rate 1`] = `
           />
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="metadataEditor"
             data-test-expanded="true"
+            data-test-id="metadata-editor"
             data-test-is-private="true"
           >
             <div
@@ -233685,7 +233352,7 @@ exports[`Storyshots Views / Shipping / Shipping rate update weight rate 1`] = `
                   Private Metadata
                   <button
                     class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test="expand"
+                    data-test-id="expand"
                     tabindex="0"
                     type="button"
                   >
@@ -233731,7 +233398,7 @@ exports[`Storyshots Views / Shipping / Shipping rate update weight rate 1`] = `
             >
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-                data-test="addField"
+                data-test-id="add-field"
                 tabindex="0"
                 type="button"
               >
@@ -233883,7 +233550,7 @@ exports[`Storyshots Views / Shipping / Shipping zone details default 1`] = `
                   <input
                     aria-invalid="false"
                     class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                    data-test="name"
+                    data-test-id="name"
                     name="name"
                     type="text"
                     value="Europe"
@@ -234471,8 +234138,8 @@ exports[`Storyshots Views / Shipping / Shipping zone details default 1`] = `
           />
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="metadataEditor"
             data-test-expanded="true"
+            data-test-id="metadata-editor"
             data-test-is-private="false"
           >
             <div
@@ -234487,7 +234154,7 @@ exports[`Storyshots Views / Shipping / Shipping zone details default 1`] = `
                   Metadata
                   <button
                     class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test="expand"
+                    data-test-id="expand"
                     tabindex="0"
                     type="button"
                   >
@@ -234533,7 +234200,7 @@ exports[`Storyshots Views / Shipping / Shipping zone details default 1`] = `
             >
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-                data-test="addField"
+                data-test-id="add-field"
                 tabindex="0"
                 type="button"
               >
@@ -234550,8 +234217,8 @@ exports[`Storyshots Views / Shipping / Shipping zone details default 1`] = `
           />
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="metadataEditor"
             data-test-expanded="true"
+            data-test-id="metadata-editor"
             data-test-is-private="true"
           >
             <div
@@ -234566,7 +234233,7 @@ exports[`Storyshots Views / Shipping / Shipping zone details default 1`] = `
                   Private Metadata
                   <button
                     class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test="expand"
+                    data-test-id="expand"
                     tabindex="0"
                     type="button"
                   >
@@ -234612,7 +234279,7 @@ exports[`Storyshots Views / Shipping / Shipping zone details default 1`] = `
             >
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-                data-test="addField"
+                data-test-id="add-field"
                 tabindex="0"
                 type="button"
               >
@@ -234858,7 +234525,7 @@ exports[`Storyshots Views / Shipping / Shipping zone details default 1`] = `
                     </div>
                     <button
                       class="MuiButtonBase-root-id IconButton-secondary-id MultiAutocompleteSelectField-chipClose-id"
-                      data-test-id="warehousesRemove"
+                      data-test-id="warehouses-remove"
                       tabindex="0"
                       type="button"
                     >
@@ -234888,7 +234555,7 @@ exports[`Storyshots Views / Shipping / Shipping zone details default 1`] = `
                     </div>
                     <button
                       class="MuiButtonBase-root-id IconButton-secondary-id MultiAutocompleteSelectField-chipClose-id"
-                      data-test-id="warehousesRemove"
+                      data-test-id="warehouses-remove"
                       tabindex="0"
                       type="button"
                     >
@@ -234982,7 +234649,7 @@ exports[`Storyshots Views / Shipping / Shipping zone details form errors 1`] = `
                   <input
                     aria-invalid="true"
                     class="MuiInputBase-input-id MuiOutlinedInput-input-id"
-                    data-test="name"
+                    data-test-id="name"
                     name="name"
                     type="text"
                     value="Europe"
@@ -235575,8 +235242,8 @@ exports[`Storyshots Views / Shipping / Shipping zone details form errors 1`] = `
           />
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="metadataEditor"
             data-test-expanded="true"
+            data-test-id="metadata-editor"
             data-test-is-private="false"
           >
             <div
@@ -235591,7 +235258,7 @@ exports[`Storyshots Views / Shipping / Shipping zone details form errors 1`] = `
                   Metadata
                   <button
                     class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test="expand"
+                    data-test-id="expand"
                     tabindex="0"
                     type="button"
                   >
@@ -235637,7 +235304,7 @@ exports[`Storyshots Views / Shipping / Shipping zone details form errors 1`] = `
             >
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-                data-test="addField"
+                data-test-id="add-field"
                 tabindex="0"
                 type="button"
               >
@@ -235654,8 +235321,8 @@ exports[`Storyshots Views / Shipping / Shipping zone details form errors 1`] = `
           />
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="metadataEditor"
             data-test-expanded="true"
+            data-test-id="metadata-editor"
             data-test-is-private="true"
           >
             <div
@@ -235670,7 +235337,7 @@ exports[`Storyshots Views / Shipping / Shipping zone details form errors 1`] = `
                   Private Metadata
                   <button
                     class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test="expand"
+                    data-test-id="expand"
                     tabindex="0"
                     type="button"
                   >
@@ -235716,7 +235383,7 @@ exports[`Storyshots Views / Shipping / Shipping zone details form errors 1`] = `
             >
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
-                data-test="addField"
+                data-test-id="add-field"
                 tabindex="0"
                 type="button"
               >
@@ -235962,7 +235629,7 @@ exports[`Storyshots Views / Shipping / Shipping zone details form errors 1`] = `
                     </div>
                     <button
                       class="MuiButtonBase-root-id IconButton-secondary-id MultiAutocompleteSelectField-chipClose-id"
-                      data-test-id="warehousesRemove"
+                      data-test-id="warehouses-remove"
                       tabindex="0"
                       type="button"
                     >
@@ -235992,7 +235659,7 @@ exports[`Storyshots Views / Shipping / Shipping zone details form errors 1`] = `
                     </div>
                     <button
                       class="MuiButtonBase-root-id IconButton-secondary-id MultiAutocompleteSelectField-chipClose-id"
-                      data-test-id="warehousesRemove"
+                      data-test-id="warehouses-remove"
                       tabindex="0"
                       type="button"
                     >
@@ -236092,7 +235759,7 @@ exports[`Storyshots Views / Shipping / Shipping zone details loading 1`] = `
                   <input
                     aria-invalid="false"
                     class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
-                    data-test="name"
+                    data-test-id="name"
                     disabled=""
                     name="name"
                     type="text"
@@ -236581,8 +236248,8 @@ exports[`Storyshots Views / Shipping / Shipping zone details loading 1`] = `
           />
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="metadataEditor"
             data-test-expanded="true"
+            data-test-id="metadata-editor"
             data-test-is-private="false"
           >
             <div
@@ -236597,7 +236264,7 @@ exports[`Storyshots Views / Shipping / Shipping zone details loading 1`] = `
                   Metadata
                   <button
                     class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test="expand"
+                    data-test-id="expand"
                     tabindex="0"
                     type="button"
                   >
@@ -236642,8 +236309,8 @@ exports[`Storyshots Views / Shipping / Shipping zone details loading 1`] = `
           />
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="metadataEditor"
             data-test-expanded="true"
+            data-test-id="metadata-editor"
             data-test-is-private="true"
           >
             <div
@@ -236658,7 +236325,7 @@ exports[`Storyshots Views / Shipping / Shipping zone details loading 1`] = `
                   Private Metadata
                   <button
                     class="MuiButtonBase-root-id IconButton-secondary-id Metadata-expandBtn-id Metadata-rotate-id"
-                    data-test="expand"
+                    data-test-id="expand"
                     tabindex="0"
                     type="button"
                   >
@@ -237553,7 +237220,7 @@ exports[`Storyshots Views / Shipping / Shipping zones list default 1`] = `
             >
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                data-test-id="saveUnit"
+                data-test-id="save-unit"
                 tabindex="0"
                 type="button"
               >
@@ -237974,7 +237641,7 @@ exports[`Storyshots Views / Shipping / Shipping zones list loading 1`] = `
             >
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                data-test-id="saveUnit"
+                data-test-id="save-unit"
                 tabindex="0"
                 type="button"
               >
@@ -238276,7 +237943,7 @@ exports[`Storyshots Views / Shipping / Shipping zones list no data 1`] = `
             >
               <button
                 class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id MuiButton-outlinedSizeSmall-id MuiButton-sizeSmall-id"
-                data-test-id="saveUnit"
+                data-test-id="save-unit"
                 tabindex="0"
                 type="button"
               >
@@ -241458,7 +241125,7 @@ exports[`Storyshots Views / Staff / Staff member details default 1`] = `
               </div>
               <div
                 class="MultiAutocompleteSelectField-container-id"
-                data-test="permissionGroups"
+                data-test-id="permission-groups"
               >
                 <div
                   class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -242238,7 +241905,7 @@ exports[`Storyshots Views / Staff / Staff member details loading 1`] = `
               </div>
               <div
                 class="MultiAutocompleteSelectField-container-id"
-                data-test="permissionGroups"
+                data-test-id="permission-groups"
               >
                 <div
                   class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
@@ -242535,7 +242202,7 @@ exports[`Storyshots Views / Staff / Staff members default 1`] = `
           </div>
           <button
             class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
-            data-test-id="inviteStaffMember"
+            data-test-id="invite-staff-member"
             tabindex="0"
             type="button"
           >
@@ -242608,7 +242275,7 @@ exports[`Storyshots Views / Staff / Staff members default 1`] = `
         </div>
         <div
           class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
-          data-test-id="searchInput"
+          data-test-id="search-input"
         >
           <div
             class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
@@ -243191,7 +242858,7 @@ exports[`Storyshots Views / Staff / Staff members limits reached 1`] = `
           </div>
           <button
             class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id MuiButton-disabled-id MuiButtonBase-disabled-id"
-            data-test-id="inviteStaffMember"
+            data-test-id="invite-staff-member"
             disabled=""
             tabindex="-1"
             type="button"
@@ -243344,7 +243011,7 @@ exports[`Storyshots Views / Staff / Staff members limits reached 1`] = `
         </div>
         <div
           class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
-          data-test-id="searchInput"
+          data-test-id="search-input"
         >
           <div
             class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
@@ -243922,7 +243589,7 @@ exports[`Storyshots Views / Staff / Staff members no limits 1`] = `
         >
           <button
             class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
-            data-test-id="inviteStaffMember"
+            data-test-id="invite-staff-member"
             tabindex="0"
             type="button"
           >
@@ -243995,7 +243662,7 @@ exports[`Storyshots Views / Staff / Staff members no limits 1`] = `
         </div>
         <div
           class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
-          data-test-id="searchInput"
+          data-test-id="search-input"
         >
           <div
             class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
@@ -244578,7 +244245,7 @@ exports[`Storyshots Views / Staff / Staff members when loading 1`] = `
           </div>
           <button
             class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
-            data-test-id="inviteStaffMember"
+            data-test-id="invite-staff-member"
             tabindex="0"
             type="button"
           >
@@ -244651,7 +244318,7 @@ exports[`Storyshots Views / Staff / Staff members when loading 1`] = `
         </div>
         <div
           class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
-          data-test-id="searchInput"
+          data-test-id="search-input"
         >
           <div
             class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
@@ -246822,7 +246489,7 @@ exports[`Storyshots Views / Warehouses / Create warehouse default 1`] = `
         <div>
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="generalInformationSection"
+            data-test-id="general-information-section"
           >
             <div
               class="MuiCardHeader-root-id"
@@ -247266,7 +246933,7 @@ exports[`Storyshots Views / Warehouses / Create warehouse form errors 1`] = `
         <div>
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="generalInformationSection"
+            data-test-id="general-information-section"
           >
             <div
               class="MuiCardHeader-root-id"
@@ -247755,7 +247422,7 @@ exports[`Storyshots Views / Warehouses / Create warehouse loading 1`] = `
         <div>
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="generalInformationSection"
+            data-test-id="general-information-section"
           >
             <div
               class="MuiCardHeader-root-id"
@@ -248208,7 +247875,7 @@ exports[`Storyshots Views / Warehouses / Warehouse details default 1`] = `
         <div>
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="generalInformationSection"
+            data-test-id="general-information-section"
           >
             <div
               class="MuiCardHeader-root-id"
@@ -248957,7 +248624,7 @@ exports[`Storyshots Views / Warehouses / Warehouse details form errors 1`] = `
         <div>
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="generalInformationSection"
+            data-test-id="general-information-section"
           >
             <div
               class="MuiCardHeader-root-id"
@@ -249757,7 +249424,7 @@ exports[`Storyshots Views / Warehouses / Warehouse details loading 1`] = `
         <div>
           <div
             class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
-            data-test="generalInformationSection"
+            data-test-id="general-information-section"
           >
             <div
               class="MuiCardHeader-root-id"
@@ -250531,7 +250198,7 @@ exports[`Storyshots Views / Warehouses / Warehouse list default 1`] = `
           </div>
           <button
             class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
-            data-test-id="createWarehouse"
+            data-test-id="create-warehouse"
             tabindex="0"
             type="button"
           >
@@ -250590,7 +250257,7 @@ exports[`Storyshots Views / Warehouses / Warehouse list default 1`] = `
       >
         <div
           class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
-          data-test-id="searchInput"
+          data-test-id="search-input"
         >
           <div
             class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
@@ -250754,18 +250421,17 @@ exports[`Storyshots Views / Warehouses / Warehouse list default 1`] = `
           >
             <tr
               class="MuiTableRow-root-id WarehouseList-tableRow-id MuiTableRow-hover-id"
-              data-test="warehouseEntry"
-              data-testid="cour wares"
+              data-test-id="warehouse-entry-cour wares"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id WarehouseList-colName-id"
-                data-test="name"
+                data-test-id="name"
               >
                 C our wares
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id WarehouseList-colZones-id"
-                data-test="zones"
+                data-test-id="zones"
               >
                 Europe, Oceania, Asia, Americas, Africa
               </td>
@@ -250778,7 +250444,7 @@ exports[`Storyshots Views / Warehouses / Warehouse list default 1`] = `
                   <button
                     class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                     color="primary"
-                    data-test="editButton"
+                    data-test-id="edit-button"
                     tabindex="0"
                     type="button"
                   >
@@ -250818,18 +250484,17 @@ exports[`Storyshots Views / Warehouses / Warehouse list default 1`] = `
             </tr>
             <tr
               class="MuiTableRow-root-id WarehouseList-tableRow-id MuiTableRow-hover-id"
-              data-test="warehouseEntry"
-              data-testid="bestocked"
+              data-test-id="warehouse-entry-bestocked"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id WarehouseList-colName-id"
-                data-test="name"
+                data-test-id="name"
               >
                 Be stocked
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id WarehouseList-colZones-id"
-                data-test="zones"
+                data-test-id="zones"
               >
                 Europe, Oceania, Asia, Americas, Africa
               </td>
@@ -250842,7 +250507,7 @@ exports[`Storyshots Views / Warehouses / Warehouse list default 1`] = `
                   <button
                     class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                     color="primary"
-                    data-test="editButton"
+                    data-test-id="edit-button"
                     tabindex="0"
                     type="button"
                   >
@@ -250882,18 +250547,17 @@ exports[`Storyshots Views / Warehouses / Warehouse list default 1`] = `
             </tr>
             <tr
               class="MuiTableRow-root-id WarehouseList-tableRow-id MuiTableRow-hover-id"
-              data-test="warehouseEntry"
-              data-testid="awarehouse"
+              data-test-id="warehouse-entry-awarehouse"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id WarehouseList-colName-id"
-                data-test="name"
+                data-test-id="name"
               >
                 A Warehouse
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id WarehouseList-colZones-id"
-                data-test="zones"
+                data-test-id="zones"
               >
                 Europe, Oceania, Asia, Americas, Africa
               </td>
@@ -250906,7 +250570,7 @@ exports[`Storyshots Views / Warehouses / Warehouse list default 1`] = `
                   <button
                     class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                     color="primary"
-                    data-test="editButton"
+                    data-test-id="edit-button"
                     tabindex="0"
                     type="button"
                   >
@@ -250946,18 +250610,17 @@ exports[`Storyshots Views / Warehouses / Warehouse list default 1`] = `
             </tr>
             <tr
               class="MuiTableRow-root-id WarehouseList-tableRow-id MuiTableRow-hover-id"
-              data-test="warehouseEntry"
-              data-testid="darkwares"
+              data-test-id="warehouse-entry-darkwares"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id WarehouseList-colName-id"
-                data-test="name"
+                data-test-id="name"
               >
                 Darkwares
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id WarehouseList-colZones-id"
-                data-test="zones"
+                data-test-id="zones"
               >
                 Europe, Oceania, Asia, Americas, Africa
               </td>
@@ -250970,7 +250633,7 @@ exports[`Storyshots Views / Warehouses / Warehouse list default 1`] = `
                   <button
                     class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                     color="primary"
-                    data-test="editButton"
+                    data-test-id="edit-button"
                     tabindex="0"
                     type="button"
                   >
@@ -251049,7 +250712,7 @@ exports[`Storyshots Views / Warehouses / Warehouse list limits reached 1`] = `
           </div>
           <button
             class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id MuiButton-disabled-id MuiButtonBase-disabled-id"
-            data-test-id="createWarehouse"
+            data-test-id="create-warehouse"
             disabled=""
             tabindex="-1"
             type="button"
@@ -251188,7 +250851,7 @@ exports[`Storyshots Views / Warehouses / Warehouse list limits reached 1`] = `
       >
         <div
           class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
-          data-test-id="searchInput"
+          data-test-id="search-input"
         >
           <div
             class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
@@ -251352,18 +251015,17 @@ exports[`Storyshots Views / Warehouses / Warehouse list limits reached 1`] = `
           >
             <tr
               class="MuiTableRow-root-id WarehouseList-tableRow-id MuiTableRow-hover-id"
-              data-test="warehouseEntry"
-              data-testid="cour wares"
+              data-test-id="warehouse-entry-cour wares"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id WarehouseList-colName-id"
-                data-test="name"
+                data-test-id="name"
               >
                 C our wares
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id WarehouseList-colZones-id"
-                data-test="zones"
+                data-test-id="zones"
               >
                 Europe, Oceania, Asia, Americas, Africa
               </td>
@@ -251376,7 +251038,7 @@ exports[`Storyshots Views / Warehouses / Warehouse list limits reached 1`] = `
                   <button
                     class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                     color="primary"
-                    data-test="editButton"
+                    data-test-id="edit-button"
                     tabindex="0"
                     type="button"
                   >
@@ -251416,18 +251078,17 @@ exports[`Storyshots Views / Warehouses / Warehouse list limits reached 1`] = `
             </tr>
             <tr
               class="MuiTableRow-root-id WarehouseList-tableRow-id MuiTableRow-hover-id"
-              data-test="warehouseEntry"
-              data-testid="bestocked"
+              data-test-id="warehouse-entry-bestocked"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id WarehouseList-colName-id"
-                data-test="name"
+                data-test-id="name"
               >
                 Be stocked
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id WarehouseList-colZones-id"
-                data-test="zones"
+                data-test-id="zones"
               >
                 Europe, Oceania, Asia, Americas, Africa
               </td>
@@ -251440,7 +251101,7 @@ exports[`Storyshots Views / Warehouses / Warehouse list limits reached 1`] = `
                   <button
                     class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                     color="primary"
-                    data-test="editButton"
+                    data-test-id="edit-button"
                     tabindex="0"
                     type="button"
                   >
@@ -251480,18 +251141,17 @@ exports[`Storyshots Views / Warehouses / Warehouse list limits reached 1`] = `
             </tr>
             <tr
               class="MuiTableRow-root-id WarehouseList-tableRow-id MuiTableRow-hover-id"
-              data-test="warehouseEntry"
-              data-testid="awarehouse"
+              data-test-id="warehouse-entry-awarehouse"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id WarehouseList-colName-id"
-                data-test="name"
+                data-test-id="name"
               >
                 A Warehouse
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id WarehouseList-colZones-id"
-                data-test="zones"
+                data-test-id="zones"
               >
                 Europe, Oceania, Asia, Americas, Africa
               </td>
@@ -251504,7 +251164,7 @@ exports[`Storyshots Views / Warehouses / Warehouse list limits reached 1`] = `
                   <button
                     class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                     color="primary"
-                    data-test="editButton"
+                    data-test-id="edit-button"
                     tabindex="0"
                     type="button"
                   >
@@ -251544,18 +251204,17 @@ exports[`Storyshots Views / Warehouses / Warehouse list limits reached 1`] = `
             </tr>
             <tr
               class="MuiTableRow-root-id WarehouseList-tableRow-id MuiTableRow-hover-id"
-              data-test="warehouseEntry"
-              data-testid="darkwares"
+              data-test-id="warehouse-entry-darkwares"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id WarehouseList-colName-id"
-                data-test="name"
+                data-test-id="name"
               >
                 Darkwares
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id WarehouseList-colZones-id"
-                data-test="zones"
+                data-test-id="zones"
               >
                 Europe, Oceania, Asia, Americas, Africa
               </td>
@@ -251568,7 +251227,7 @@ exports[`Storyshots Views / Warehouses / Warehouse list limits reached 1`] = `
                   <button
                     class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                     color="primary"
-                    data-test="editButton"
+                    data-test-id="edit-button"
                     tabindex="0"
                     type="button"
                   >
@@ -251647,7 +251306,7 @@ exports[`Storyshots Views / Warehouses / Warehouse list loading 1`] = `
           </div>
           <button
             class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
-            data-test-id="createWarehouse"
+            data-test-id="create-warehouse"
             tabindex="0"
             type="button"
           >
@@ -251706,7 +251365,7 @@ exports[`Storyshots Views / Warehouses / Warehouse list loading 1`] = `
       >
         <div
           class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
-          data-test-id="searchInput"
+          data-test-id="search-input"
         >
           <div
             class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
@@ -251871,11 +251530,11 @@ exports[`Storyshots Views / Warehouses / Warehouse list loading 1`] = `
           >
             <tr
               class="MuiTableRow-root-id WarehouseList-tableRow-id"
-              data-test="warehouseEntry"
+              data-test-id="warehouse-entry-undefined"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id WarehouseList-colName-id"
-                data-test="name"
+                data-test-id="name"
               >
                 <span
                   class="Skeleton-skeleton-id"
@@ -251886,7 +251545,7 @@ exports[`Storyshots Views / Warehouses / Warehouse list loading 1`] = `
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id WarehouseList-colZones-id"
-                data-test="zones"
+                data-test-id="zones"
               >
                 <span
                   class="Skeleton-skeleton-id"
@@ -251904,7 +251563,7 @@ exports[`Storyshots Views / Warehouses / Warehouse list loading 1`] = `
                   <button
                     class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                     color="primary"
-                    data-test="editButton"
+                    data-test-id="edit-button"
                     tabindex="0"
                     type="button"
                   >
@@ -251983,7 +251642,7 @@ exports[`Storyshots Views / Warehouses / Warehouse list no data 1`] = `
           </div>
           <button
             class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
-            data-test-id="createWarehouse"
+            data-test-id="create-warehouse"
             tabindex="0"
             type="button"
           >
@@ -252042,7 +251701,7 @@ exports[`Storyshots Views / Warehouses / Warehouse list no data 1`] = `
       >
         <div
           class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
-          data-test-id="searchInput"
+          data-test-id="search-input"
         >
           <div
             class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
@@ -252206,7 +251865,7 @@ exports[`Storyshots Views / Warehouses / Warehouse list no data 1`] = `
           >
             <tr
               class="MuiTableRow-root-id MuiTableRow-hover-id"
-              data-test="emptyListMessage"
+              data-test-id="empty-list-message"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id"
@@ -252251,7 +251910,7 @@ exports[`Storyshots Views / Warehouses / Warehouse list no limits 1`] = `
         >
           <button
             class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
-            data-test-id="createWarehouse"
+            data-test-id="create-warehouse"
             tabindex="0"
             type="button"
           >
@@ -252310,7 +251969,7 @@ exports[`Storyshots Views / Warehouses / Warehouse list no limits 1`] = `
       >
         <div
           class="MuiFormControl-root-id MuiTextField-root-id SearchInput-root-id"
-          data-test-id="searchInput"
+          data-test-id="search-input"
         >
           <div
             class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
@@ -252474,18 +252133,17 @@ exports[`Storyshots Views / Warehouses / Warehouse list no limits 1`] = `
           >
             <tr
               class="MuiTableRow-root-id WarehouseList-tableRow-id MuiTableRow-hover-id"
-              data-test="warehouseEntry"
-              data-testid="cour wares"
+              data-test-id="warehouse-entry-cour wares"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id WarehouseList-colName-id"
-                data-test="name"
+                data-test-id="name"
               >
                 C our wares
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id WarehouseList-colZones-id"
-                data-test="zones"
+                data-test-id="zones"
               >
                 Europe, Oceania, Asia, Americas, Africa
               </td>
@@ -252498,7 +252156,7 @@ exports[`Storyshots Views / Warehouses / Warehouse list no limits 1`] = `
                   <button
                     class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                     color="primary"
-                    data-test="editButton"
+                    data-test-id="edit-button"
                     tabindex="0"
                     type="button"
                   >
@@ -252538,18 +252196,17 @@ exports[`Storyshots Views / Warehouses / Warehouse list no limits 1`] = `
             </tr>
             <tr
               class="MuiTableRow-root-id WarehouseList-tableRow-id MuiTableRow-hover-id"
-              data-test="warehouseEntry"
-              data-testid="bestocked"
+              data-test-id="warehouse-entry-bestocked"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id WarehouseList-colName-id"
-                data-test="name"
+                data-test-id="name"
               >
                 Be stocked
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id WarehouseList-colZones-id"
-                data-test="zones"
+                data-test-id="zones"
               >
                 Europe, Oceania, Asia, Americas, Africa
               </td>
@@ -252562,7 +252219,7 @@ exports[`Storyshots Views / Warehouses / Warehouse list no limits 1`] = `
                   <button
                     class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                     color="primary"
-                    data-test="editButton"
+                    data-test-id="edit-button"
                     tabindex="0"
                     type="button"
                   >
@@ -252602,18 +252259,17 @@ exports[`Storyshots Views / Warehouses / Warehouse list no limits 1`] = `
             </tr>
             <tr
               class="MuiTableRow-root-id WarehouseList-tableRow-id MuiTableRow-hover-id"
-              data-test="warehouseEntry"
-              data-testid="awarehouse"
+              data-test-id="warehouse-entry-awarehouse"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id WarehouseList-colName-id"
-                data-test="name"
+                data-test-id="name"
               >
                 A Warehouse
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id WarehouseList-colZones-id"
-                data-test="zones"
+                data-test-id="zones"
               >
                 Europe, Oceania, Asia, Americas, Africa
               </td>
@@ -252626,7 +252282,7 @@ exports[`Storyshots Views / Warehouses / Warehouse list no limits 1`] = `
                   <button
                     class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                     color="primary"
-                    data-test="editButton"
+                    data-test-id="edit-button"
                     tabindex="0"
                     type="button"
                   >
@@ -252666,18 +252322,17 @@ exports[`Storyshots Views / Warehouses / Warehouse list no limits 1`] = `
             </tr>
             <tr
               class="MuiTableRow-root-id WarehouseList-tableRow-id MuiTableRow-hover-id"
-              data-test="warehouseEntry"
-              data-testid="darkwares"
+              data-test-id="warehouse-entry-darkwares"
             >
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id WarehouseList-colName-id"
-                data-test="name"
+                data-test-id="name"
               >
                 Darkwares
               </td>
               <td
                 class="MuiTableCell-root-id MuiTableCell-body-id WarehouseList-colZones-id"
-                data-test="zones"
+                data-test-id="zones"
               >
                 Europe, Oceania, Asia, Americas, Africa
               </td>
@@ -252690,7 +252345,7 @@ exports[`Storyshots Views / Warehouses / Warehouse list no limits 1`] = `
                   <button
                     class="MuiButtonBase-root-id IconButton-secondary-id IconButton-hoverOutline-id"
                     color="primary"
-                    data-test="editButton"
+                    data-test-id="edit-button"
                     tabindex="0"
                     type="button"
                   >
diff --git a/src/warehouses/components/WarehouseInfo/WarehouseInfo.tsx b/src/warehouses/components/WarehouseInfo/WarehouseInfo.tsx
index fd9fcc412..40ddb1303 100644
--- a/src/warehouses/components/WarehouseInfo/WarehouseInfo.tsx
+++ b/src/warehouses/components/WarehouseInfo/WarehouseInfo.tsx
@@ -26,7 +26,7 @@ const WarehouseInfo: React.FC<WarehouseInfoProps> = ({
   const formErrors = getFormErrors(["name"], errors);
 
   return (
-    <Card data-test="generalInformationSection">
+    <Card data-test-id="general-information-section">
       <CardTitle
         title={intl.formatMessage(commonMessages.generalInformations)}
       />
diff --git a/src/warehouses/components/WarehouseList/WarehouseList.tsx b/src/warehouses/components/WarehouseList/WarehouseList.tsx
index e159bea38..9dea25330 100644
--- a/src/warehouses/components/WarehouseList/WarehouseList.tsx
+++ b/src/warehouses/components/WarehouseList/WarehouseList.tsx
@@ -84,7 +84,7 @@ const WarehouseList: React.FC<WarehouseListProps> = props => {
   const classes = useStyles(props);
 
   return (
-    <ResponsiveTable data-test="warehouseList">
+    <ResponsiveTable data-test-id="warehouse-list">
       <TableHead>
         <TableRow>
           <TableCellHeader
@@ -131,13 +131,15 @@ const WarehouseList: React.FC<WarehouseListProps> = props => {
               hover={!!warehouse}
               onClick={warehouse ? onRowClick(warehouse.id) : undefined}
               key={warehouse ? warehouse.id : "skeleton"}
-              data-test="warehouseEntry"
-              data-testid={warehouse?.name.toLowerCase().replace(" ", "")}
+              data-test-id={
+                "warehouse-entry-" +
+                warehouse?.name.toLowerCase().replace(" ", "")
+              }
             >
-              <TableCell className={classes.colName} data-test="name">
+              <TableCell className={classes.colName} data-test-id="name">
                 {maybe<React.ReactNode>(() => warehouse.name, <Skeleton />)}
               </TableCell>
-              <TableCell className={classes.colZones} data-test="zones">
+              <TableCell className={classes.colZones} data-test-id="zones">
                 {warehouse?.shippingZones === undefined ? (
                   <Skeleton />
                 ) : (
@@ -151,7 +153,7 @@ const WarehouseList: React.FC<WarehouseListProps> = props => {
                   <IconButton
                     variant="secondary"
                     color="primary"
-                    data-test="editButton"
+                    data-test-id="edit-button"
                   >
                     <EditIcon />
                   </IconButton>
@@ -167,7 +169,7 @@ const WarehouseList: React.FC<WarehouseListProps> = props => {
             </TableRow>
           ),
           () => (
-            <TableRow data-test="emptyListMessage">
+            <TableRow data-test-id="empty-list-message">
               <TableCell colSpan={numberOfColumns}>
                 <FormattedMessage defaultMessage="No warehouses found" />
               </TableCell>
diff --git a/src/warehouses/components/WarehouseListPage/WarehouseListPage.tsx b/src/warehouses/components/WarehouseListPage/WarehouseListPage.tsx
index 9f0927bb1..d1fc6125f 100644
--- a/src/warehouses/components/WarehouseListPage/WarehouseListPage.tsx
+++ b/src/warehouses/components/WarehouseListPage/WarehouseListPage.tsx
@@ -80,7 +80,7 @@ export const WarehouseListPage: React.FC<WarehouseListPageProps> = ({
         }
       >
         <Button
-          data-test-id="createWarehouse"
+          data-test-id="create-warehouse"
           disabled={limitReached}
           variant="primary"
           onClick={onAdd}
diff --git a/src/webhooks/components/WebhooksList/WebhooksList.tsx b/src/webhooks/components/WebhooksList/WebhooksList.tsx
index 37541846d..65177df73 100644
--- a/src/webhooks/components/WebhooksList/WebhooksList.tsx
+++ b/src/webhooks/components/WebhooksList/WebhooksList.tsx
@@ -48,7 +48,7 @@ const WebhooksList: React.FC<WebhooksListProps> = ({
             <Button
               variant="secondary"
               onClick={onCreate}
-              data-test-id="createWebhook"
+              data-test-id="create-webhook"
             >
               <FormattedMessage
                 defaultMessage="Create Webhook"