V14 QA fix failing acceptance tests on pipeline (#15652)

* Fixes, not done

* Fixed failing tests

* Fixes

* Updated tests

* Bumped version

* Did small adjustments

* Split tests out

* Skips failing package test

* Added missing semicolon

* Updated variables

* Added afterEach to ensureNameNotExists

tests/Umbraco.Tests.AcceptanceTest/tests/ApiTesting/Language/Language.spec.ts

@@ -17,7 +17,7 @@ test.describe('Language tests', () => {
     await umbracoApi.language.create(languageNameDanish, false, false, isoCodeDanish);
 
     // Assert
-    await expect(await umbracoApi.language.exists(isoCodeDanish)).toBeTruthy();
+    await expect(await umbracoApi.language.doesExist(isoCodeDanish)).toBeTruthy();
   });
 
   test('can update a language', async ({page, umbracoApi, umbracoUi}) => {
@@ -32,7 +32,7 @@ test.describe('Language tests', () => {
     await umbracoApi.language.update(isoCodeDanish, language);
 
     // Assert
-    await expect(await umbracoApi.language.exists(isoCodeDanish)).toBeTruthy();
+    await expect(await umbracoApi.language.doesExist(isoCodeDanish)).toBeTruthy();
     // Checks if the language name was updated
     const updatedLanguage = await umbracoApi.language.get(isoCodeDanish);
     await expect(updatedLanguage.name).toEqual(languageNameDanish);
@@ -41,11 +41,11 @@ test.describe('Language tests', () => {
   test('can delete a language', async ({page, umbracoApi, umbracoUi}) => {
     await umbracoApi.language.create(languageNameDanish, false, false, isoCodeDanish);
 
-    await expect(await umbracoApi.language.exists(isoCodeDanish)).toBeTruthy();
+    await expect(await umbracoApi.language.doesExist(isoCodeDanish)).toBeTruthy();
 
     await umbracoApi.language.delete(isoCodeDanish);
 
     // Assert
-    await expect(await umbracoApi.language.exists(isoCodeDanish)).toBeFalsy();
+    await expect(await umbracoApi.language.doesExist(isoCodeDanish)).toBeFalsy();
   });
 });

tests/Umbraco.Tests.AcceptanceTest/tests/ApiTesting/Script/Script.spec.ts

@@ -2,7 +2,7 @@ import {test} from '@umbraco/playwright-testhelpers';
 import {expect} from "@playwright/test";
 
 test.describe('Script tests', () => {
-  let scriptPath = "";
+  let scriptPath = '';
   const scriptName = 'scriptName.js';
 
   test.beforeEach(async ({umbracoApi}) => {
@@ -16,20 +16,35 @@ test.describe('Script tests', () => {
   test('can create a script', async ({umbracoApi}) => {
     // Act
     scriptPath = await umbracoApi.script.create(scriptName, 'test');
+    await umbracoApi.script.get(scriptPath);
 
     // Assert
     expect(await umbracoApi.script.doesExist(scriptPath)).toBeTruthy();
   });
 
-  test('can update a script', async ({umbracoApi}) => {
+  test('can update script name', async ({umbracoApi}) => {
+    // Arrange
+    const oldName = 'RandomScriptName.js';
+    await umbracoApi.script.ensureNameNotExists(oldName);
+    const oldScriptPath = await umbracoApi.script.create(oldName, 'test');
+
+    // Act
+    scriptPath = await umbracoApi.script.updateName(oldScriptPath, scriptName);
+
+    // Assert
+    // Checks if the content was updated for the script
+    const updatedScript = await umbracoApi.script.get(scriptPath);
+    expect(updatedScript.name).toEqual(scriptName);
+  });
+
+  test('can update script content', async ({umbracoApi}) => {
     // Arrange
     const newContent = 'Howdy';
     scriptPath = await umbracoApi.script.create(scriptName, 'test');
-    const script = await umbracoApi.script.get(scriptPath);
-    script.content = newContent;
+    await umbracoApi.script.get(scriptPath);
 
     // Act
-    await umbracoApi.script.update(script);
+    await umbracoApi.script.updateContent(scriptPath, newContent);
 
     // Assert
     // Checks if the content was updated for the script

tests/Umbraco.Tests.AcceptanceTest/tests/ApiTesting/Stylesheet/Stylesheet.spec.ts

@@ -4,6 +4,7 @@ import {expect} from "@playwright/test";
 test.describe('Stylesheet tests', () => {
   const stylesheetName = 'Stylesheet.css';
   const folderName = 'StyledFolder';
+  let stylesheetPath = '';
 
   test.beforeEach(async ({umbracoApi}) => {
     await umbracoApi.stylesheet.ensureNameNotExists(stylesheetName);
@@ -16,69 +17,82 @@ test.describe('Stylesheet tests', () => {
 
   test('can create a stylesheet', async ({umbracoApi}) => {
     // Act
-    await umbracoApi.stylesheet.create(stylesheetName, 'content');
+    stylesheetPath = await umbracoApi.stylesheet.create(stylesheetName, 'content');
 
     // Assert
-    expect(await umbracoApi.stylesheet.doesExist(stylesheetName)).toBeTruthy();
+    expect(await umbracoApi.stylesheet.doesExist(stylesheetPath)).toBeTruthy();
   });
 
-  test('can update a stylesheet', async ({umbracoApi}) => {
+  test('can update stylesheet name', async ({umbracoApi}) => {
     // Arrange
-    const newContent = 'BetterContent';
-    await umbracoApi.stylesheet.create(stylesheetName, 'content');
-    const stylesheet = await umbracoApi.stylesheet.get(stylesheetName);
-    stylesheet.content = newContent;
+    const oldStylesheetName = 'RandomStylesheetName.css';
+    await umbracoApi.script.ensureNameNotExists(oldStylesheetName);
+    const oldScriptPath = await umbracoApi.stylesheet.create(oldStylesheetName, 'content');
 
     // Act
-    await umbracoApi.stylesheet.update(stylesheet);
+    stylesheetPath = await umbracoApi.stylesheet.updateName(oldScriptPath, stylesheetName);
+
+    // Assert
+    // Checks if the name was updated for the stylesheet
+    const updatedStylesheet = await umbracoApi.stylesheet.get(stylesheetPath);
+    expect(updatedStylesheet.name).toEqual(stylesheetName);
+  });
+
+  test('can update stylesheet content', async ({umbracoApi}) => {
+    // Arrange
+    const newContent = 'BetterContent';
+    stylesheetPath = await umbracoApi.stylesheet.create(stylesheetName, 'content');
+
+    // Act
+    await umbracoApi.stylesheet.updateContent(stylesheetPath, newContent);
 
     // Assert
     // Checks if the content was updated for the stylesheet
-    const updatedStylesheet = await umbracoApi.stylesheet.get(stylesheetName);
+    const updatedStylesheet = await umbracoApi.stylesheet.get(stylesheetPath);
     expect(updatedStylesheet.content).toEqual(newContent);
   });
 
   test('can delete a stylesheet', async ({umbracoApi}) => {
     // Arrange
-    await umbracoApi.stylesheet.create(stylesheetName, 'content');
-    expect(await umbracoApi.stylesheet.doesExist(stylesheetName)).toBeTruthy();
+    stylesheetPath = await umbracoApi.stylesheet.create(stylesheetName, 'content');
+    expect(await umbracoApi.stylesheet.doesExist(stylesheetPath)).toBeTruthy();
 
     // Act
-    await umbracoApi.stylesheet.delete(stylesheetName);
+    await umbracoApi.stylesheet.delete(stylesheetPath);
 
     // Assert
-    expect(await umbracoApi.stylesheet.doesExist(stylesheetName)).toBeFalsy();
+    expect(await umbracoApi.stylesheet.doesExist(stylesheetPath)).toBeFalsy();
   });
 
   test('can create a stylesheet in a folder', async ({umbracoApi}) => {
     // Arrange
     await umbracoApi.stylesheet.ensureNameNotExists(folderName);
-    await umbracoApi.stylesheet.createFolder(folderName);
+    const stylesheetFolderPath = await umbracoApi.stylesheet.createFolder(folderName);
 
     // Act
-    await umbracoApi.stylesheet.create(stylesheetName, 'content', folderName);
+    stylesheetPath = await umbracoApi.stylesheet.create(stylesheetName, 'content', folderName);
 
     // Assert
-    const child = await umbracoApi.stylesheet.getChildren(folderName);
+    const child = await umbracoApi.stylesheet.getChildren(stylesheetFolderPath);
     expect(child[0].name).toEqual(stylesheetName);
   });
 
   test('can delete a stylesheet from a folder', async ({umbracoApi}) => {
     // Arrange
     await umbracoApi.stylesheet.ensureNameNotExists(folderName);
-    await umbracoApi.stylesheet.createFolder(folderName);
-    await umbracoApi.stylesheet.create(stylesheetName, 'deleteMe', folderName);
-
+    const stylesheetFolderPath = await umbracoApi.stylesheet.createFolder(folderName);
+    stylesheetPath = await umbracoApi.stylesheet.create(stylesheetName, 'deleteMe', folderName);
     // Checks if the stylesheet was created
-    const child = await umbracoApi.stylesheet.getChildren(folderName);
+    const child = await umbracoApi.stylesheet.getChildren(stylesheetFolderPath);
     // Checks if the child is in the folder
     expect(child[0].name).toEqual(stylesheetName);
 
     // Act
-    await umbracoApi.stylesheet.delete(stylesheetName);
+    await umbracoApi.stylesheet.delete(stylesheetPath);
 
     // Assert
-    const noChild = await umbracoApi.stylesheet.getChildren(folderName);
-    expect(noChild[0].hasChildren).toEqual(false);
+    const noChild = await umbracoApi.stylesheet.getChildren(stylesheetFolderPath);
+    // Checks if the children is empty
+    expect(noChild[0]).toEqual(undefined);
   });
 });

tests/Umbraco.Tests.AcceptanceTest/tests/ApiTesting/Stylesheet/StylesheetFolder.spec.ts

@@ -13,7 +13,7 @@ test.describe('Stylesheet Folder tests', () => {
   });
 
   test('can create a stylesheet folder', async ({umbracoApi}) => {
-    // Arrange
+    // Act
     await umbracoApi.stylesheet.createFolder(stylesheetFolderName);
 
     // Assert
@@ -50,10 +50,8 @@ test.describe('Stylesheet Folder tests', () => {
     const childFolderName = 'childFolder';
     const childOfChildFolderName = 'childOfChildFolder';
     const childFolderPath = stylesheetFolderName + '/' + childFolderName;
-
     // Creates parent folder
     await umbracoApi.stylesheet.createFolder(stylesheetFolderName);
-
     // Creates child folder in parent folder
     await umbracoApi.stylesheet.createFolder(childFolderName, stylesheetFolderName);
 
@@ -65,27 +63,26 @@ test.describe('Stylesheet Folder tests', () => {
     // Checks if the stylesheet folder are in the correct folders
     const childOfParent = await umbracoApi.stylesheet.getChildren(stylesheetFolderName);
     const childOfChild = await umbracoApi.stylesheet.getChildren(childFolderPath);
-    expect(childOfParent[0].name).toEqual(childFolderName); 
+    expect(childOfParent[0].name).toEqual(childFolderName);
     expect(childOfChild[0].name).toEqual(childOfChildFolderName);
   });
 
   test('can delete a stylesheet folder from another folder', async ({umbracoApi}) => {
     // Arrange
     const childFolderName = 'childFolder';
-    await umbracoApi.stylesheet.createFolder(stylesheetFolderName);
-    await umbracoApi.stylesheet.createFolder(childFolderName, stylesheetFolderName);
-
+    const stylesheetParentFolderPath = await umbracoApi.stylesheet.createFolder(stylesheetFolderName);
+    const stylesheetChildFolderPath = await umbracoApi.stylesheet.createFolder(childFolderName, stylesheetFolderName);
     // Checks if a child exists in the parent folder with the name
-    const child = await umbracoApi.stylesheet.getChildren(stylesheetFolderName);
+    const child = await umbracoApi.stylesheet.getChildren(stylesheetParentFolderPath);
     expect(child[0].name).toEqual(childFolderName);
     expect(child[0].isFolder).toBe(true);
-    expect(await umbracoApi.stylesheet.doesNameExist(childFolderName)).toBeTruthy();
+    expect(await umbracoApi.stylesheet.doesFolderExist(stylesheetChildFolderPath)).toBeTruthy();
 
     // Act
-    await umbracoApi.stylesheet.deleteFolder(childFolderName);
+    await umbracoApi.stylesheet.deleteFolder(stylesheetChildFolderPath);
 
     // Assert
-    const noChild = await umbracoApi.stylesheet.getChildren(stylesheetFolderName);
-    expect(noChild[0].hasChildren).toBe(false);
+    const noChild = await umbracoApi.stylesheet.getChildren(stylesheetParentFolderPath);
+    expect(noChild[0]).toBe(undefined);
   });
 });

tests/Umbraco.Tests.AcceptanceTest/tests/DefaultConfig/LogViewer/LogViewer.spec.ts

@@ -11,7 +11,7 @@ test.describe('Log Viewer tests', () => {
   test('can search', async ({umbracoApi, umbracoUi}) => {
     // Arrange
     const startTelemetryLevel = await umbracoApi.telemetry.getLevel();
-    const telemetryLevel = "Minimal";
+    const telemetryLevel = 'Minimal';
     await umbracoApi.telemetry.setLevel(telemetryLevel);
 
     // Act
@@ -31,16 +31,17 @@ test.describe('Log Viewer tests', () => {
     // Arrange
     const logInformation = await umbracoApi.logViewer.getLevelCount();
     const expectedLogCount = Math.min(logInformation.information, 100);
+    const logLevel = 'Information';
 
     // Act
     await umbracoUi.logViewer.clickSearchButton();
-    await umbracoUi.logViewer.selectLogLevel('Information');
+    await umbracoUi.logViewer.selectLogLevel(logLevel);
 
     // Assert
     // Check if the search log level indicator is visible
-    await umbracoUi.logViewer.doesLogLevelIndicatorDisplay('Information');
+    await umbracoUi.logViewer.doesLogLevelIndicatorDisplay(logLevel);
     // Check if the log count matches the expected count
-    await umbracoUi.logViewer.doesLogLevelCountMatch('Information', expectedLogCount);
+    await umbracoUi.logViewer.doesLogLevelCountMatch(logLevel, expectedLogCount);
   });
 
   test('can create a saved search', async ({umbracoApi, umbracoUi}) => {
@@ -104,6 +105,7 @@ test.describe('Log Viewer tests', () => {
     await umbracoUi.logViewer.clickSearchButton();
     await umbracoUi.logViewer.clickSavedSearchesButton();
     await umbracoUi.logViewer.removeSavedSearchByName(searchName + ' ' + search);
+    await umbracoUi.logViewer.clickDeleteButton();
 
     // Assert
     // Checks if the saved search is visible in the UI
@@ -144,7 +146,7 @@ test.describe('Log Viewer tests', () => {
     // Sorts logs by timestamp
     await umbracoUi.logViewer.clickSortLogByTimestampButton();
     // Gets the last log from the log viewer
-    const lastLog = await umbracoApi.logViewer.getLog(0, 1, "Descending");
+    const lastLog = await umbracoApi.logViewer.getLog(0, 1, 'Descending');
     const dateToFormat = new Date(lastLog.items[0].timestamp);
     const lastLogTimestamp = new Intl.DateTimeFormat(locale, options).format(dateToFormat);
 

tests/Umbraco.Tests.AcceptanceTest/tests/DefaultConfig/Packages/CreatedPackages.spec.ts

@@ -58,7 +58,8 @@ test.describe('Created packages tests', () => {
   });
 
   // TODO: Update the locators for the choose button. If it is updated or not
-  test('can create a package with content', async ({page, umbracoApi, umbracoUi}) => {
+  // TODO: Remove .skip when the test is able to run. Currently it is not possible to add content to a package
+  test.skip('can create a package with content', async ({page, umbracoApi, umbracoUi}) => {
     // Arrange
     const documentTypeName = 'TestDocumentType';
     const documentName = 'TestDocument';

tests/Umbraco.Tests.AcceptanceTest/tests/DefaultConfig/Settings/Script/Script.spec.ts

@@ -0,0 +1,92 @@
+import {ConstantHelper, test} from '@umbraco/playwright-testhelpers';
+import {expect} from '@playwright/test';
+
+test.describe('Script tests', () => {
+  const scriptName = 'TestScript.js';
+  const scriptPath = '/' + scriptName;
+
+  test.beforeEach(async ({umbracoUi, umbracoApi}) => {
+    await umbracoUi.goToBackOffice();
+    await umbracoUi.script.goToSection(ConstantHelper.sections.settings);
+    await umbracoApi.script.ensureNameNotExists(scriptName);
+  });
+
+  test.afterEach(async ({umbracoApi}) => {
+    await umbracoApi.script.ensureNameNotExists(scriptName);
+  });
+
+  test('can create a empty script', async ({umbracoApi, umbracoUi}) => {
+    // Act
+    await umbracoUi.script.clickActionsMenuAtRoot();
+    await umbracoUi.script.clickCreateThreeDotsButton();
+    await umbracoUi.script.clickNewJavascriptFileButton();
+    // TODO: Remove this timeout when frontend validation is implemented
+    await umbracoUi.waitForTimeout(500);
+    await umbracoUi.script.enterScriptName(scriptName);
+    // TODO: Remove this timeout when frontend validation is implemented
+    await umbracoUi.waitForTimeout(500);
+    await umbracoUi.script.clickSaveButton();
+
+    // Assert
+    await umbracoUi.script.isSuccessNotificationVisible();
+    expect(await umbracoApi.script.doesNameExist(scriptName)).toBeTruthy();
+  });
+
+  test('can create a script with content', async ({umbracoApi, umbracoUi}) => {
+    // Arrange
+    const scriptContent = 'TestContent';
+
+    // Act
+    await umbracoUi.script.clickActionsMenuAtRoot();
+    await umbracoUi.script.clickCreateThreeDotsButton();
+    await umbracoUi.script.clickNewJavascriptFileButton();
+    // TODO: Remove this timeout when frontend validation is implemented
+    await umbracoUi.waitForTimeout(500);
+    await umbracoUi.script.enterScriptName(scriptName);
+    await umbracoUi.script.enterScriptContent(scriptContent);
+    // TODO: Remove this timeout when frontend validation is implemented
+    await umbracoUi.waitForTimeout(500);
+    await umbracoUi.script.clickSaveButton();
+
+    // Assert
+    await umbracoUi.script.isSuccessNotificationVisible();
+    expect(await umbracoApi.script.doesNameExist(scriptName)).toBeTruthy();
+    const scriptData = await umbracoApi.script.getByName(scriptName);
+    expect(scriptData.content).toBe(scriptContent);
+  });
+
+  test('can update a script', async ({umbracoApi, umbracoUi}) => {
+    // Arrange
+    await umbracoApi.script.create(scriptName, 'test');
+    const updatedScriptContent = 'const test = {\r\n    script = \u0022Test\u0022,\r\n    extension = \u0022.js\u0022,\r\n    scriptPath: function() {\r\n        return this.script \u002B this.extension;\r\n    }\r\n};\r\n';
+
+    // Act
+    await umbracoUi.script.openScriptAtRoot(scriptName);
+    // TODO: Remove this timeout when frontend validation is implemented
+    await umbracoUi.waitForTimeout(500);
+    await umbracoUi.script.enterScriptContent(updatedScriptContent);
+    // TODO: Remove this timeout when frontend validation is implemented
+    await umbracoUi.waitForTimeout(500);
+    await umbracoUi.script.clickSaveButton();
+
+    // Assert
+    // TODO: Uncomment when the notification is visible. Currently there is no notification after you update a script
+    // await umbracoUi.script.isSuccessNotificationVisible();
+    const updatedScript = await umbracoApi.script.get(scriptPath);
+    expect(updatedScript.content).toBe(updatedScriptContent);
+  });
+
+  test('can delete a script', async ({umbracoApi, umbracoUi}) => {
+    // Arrange
+    await umbracoApi.script.create(scriptName, '');
+
+    // Act
+    await umbracoUi.script.clickRootFolderCaretButton();
+    await umbracoUi.script.clickActionsMenuForScript(scriptName);
+    await umbracoUi.script.deleteScript();
+
+    // Assert
+    await umbracoUi.script.isSuccessNotificationVisible();
+    expect(await umbracoApi.script.doesNameExist(scriptName)).toBeFalsy();
+  });
+});

tests/Umbraco.Tests.AcceptanceTest/tests/DefaultConfig/Settings/Script/ScriptFolder.spec.ts

@@ -0,0 +1,136 @@
+import {ConstantHelper, test} from '@umbraco/playwright-testhelpers';
+import {expect} from '@playwright/test';
+
+test.describe('Script tests', () => {
+  const scriptName = 'TestScript.js';
+  const scriptFolderName = 'TestScriptFolder';
+
+  test.beforeEach(async ({umbracoUi, umbracoApi}) => {
+    await umbracoUi.goToBackOffice();
+    await umbracoUi.script.goToSection(ConstantHelper.sections.settings);
+    await umbracoApi.script.ensureNameNotExists(scriptFolderName);
+  });
+
+  test.afterEach(async ({umbracoApi}) => {
+    await umbracoApi.script.ensureNameNotExists(scriptFolderName);
+  });
+
+  test('can create a folder', async ({umbracoApi, umbracoUi}) => {
+    // Act
+    await umbracoUi.script.clickActionsMenuAtRoot();
+    await umbracoUi.script.createFolder(scriptFolderName);
+
+    // Assert
+    await umbracoUi.script.isSuccessNotificationVisible();
+    expect(await umbracoApi.script.doesFolderExist(scriptFolderName)).toBeTruthy();
+  });
+
+  test('can delete a folder', async ({umbracoApi, umbracoUi}) => {
+    // Arrange
+    await umbracoApi.script.createFolder(scriptFolderName);
+
+    // Act
+    await umbracoUi.script.clickRootFolderCaretButton();
+    await umbracoUi.script.clickActionsMenuForScript(scriptFolderName);
+    await umbracoUi.script.deleteFolder();
+
+    // Assert
+    await umbracoUi.script.isSuccessNotificationVisible();
+    expect(await umbracoApi.script.doesFolderExist(scriptFolderName)).toBeFalsy();
+  });
+
+  test('can create a script in a folder', async ({umbracoApi, umbracoUi}) => {
+    // Arrange
+    await umbracoApi.script.createFolder(scriptFolderName);
+    const scriptContent = 'const test = {\r\n    script = \u0022Test\u0022,\r\n    extension = \u0022.js\u0022,\r\n    scriptPath: function() {\r\n        return this.script \u002B this.extension;\r\n    }\r\n};\r\n';
+
+    // Act
+    await umbracoUi.script.clickRootFolderCaretButton();
+    await umbracoUi.script.clickActionsMenuForScript(scriptFolderName);
+    await umbracoUi.script.clickCreateThreeDotsButton();
+    await umbracoUi.script.clickNewJavascriptFileButton();
+    // TODO: Remove this timeout when frontend validation is implemented
+    await umbracoUi.waitForTimeout(500);
+    await umbracoUi.script.enterScriptName(scriptName);
+    await umbracoUi.script.enterScriptContent(scriptContent);
+    // TODO: Remove this timeout when frontend validation is implemented
+    await umbracoUi.waitForTimeout(500);
+    await umbracoUi.script.clickSaveButton();
+
+    // Assert
+    await umbracoUi.script.isSuccessNotificationVisible();
+    // TODO: Check if the script was created correctly in the UI when the refresh button is implemented
+    expect(await umbracoApi.script.doesNameExist(scriptName)).toBeTruthy();
+    const scriptChildren = await umbracoApi.script.getChildren('/' + scriptFolderName);
+    expect(scriptChildren[0].path).toBe('/' + scriptFolderName + '/' + scriptName);
+    const scriptData = await umbracoApi.script.get(scriptChildren[0].path);
+    expect(scriptData.content).toBe(scriptContent);
+  });
+
+  test('can create a folder in a folder', async ({umbracoApi, umbracoUi}) => {
+    // Arrange
+    await umbracoApi.script.createFolder(scriptFolderName);
+    const childFolderName = 'childFolderName';
+
+    // Act
+    await umbracoUi.script.clickRootFolderCaretButton();
+    await umbracoUi.script.clickActionsMenuForScript(scriptFolderName);
+    await umbracoUi.script.createFolder(childFolderName);
+
+    // Assert
+    await umbracoUi.script.isSuccessNotificationVisible();
+    // TODO: Check if the folder was created correctly in the UI when the refresh button is implemented
+    expect(await umbracoApi.script.doesNameExist(childFolderName)).toBeTruthy();
+    const scriptChildren = await umbracoApi.script.getChildren('/' + scriptFolderName);
+    expect(scriptChildren[0].path).toBe('/' + scriptFolderName + '/' + childFolderName);
+  });
+
+  test('can create a folder in a folder in a folder', async ({umbracoApi, umbracoUi}) => {
+    // Arrange
+    const childFolderName = 'ChildFolderName';
+    const childOfChildFolderName = 'ChildOfChildFolderName';
+    await umbracoApi.script.createFolder(scriptFolderName);
+    await umbracoApi.script.createFolder(childFolderName, scriptFolderName);
+
+    // Act
+    await umbracoUi.script.clickRootFolderCaretButton();
+    await umbracoUi.script.clickCaretButtonForName(scriptFolderName);
+    await umbracoUi.script.clickActionsMenuForScript(childFolderName);
+    await umbracoUi.script.createFolder(childOfChildFolderName);
+
+    // Assert
+    await umbracoUi.script.isSuccessNotificationVisible();
+    // TODO: Check if the folder was created correctly in the UI when the refresh button is implemented
+    expect(await umbracoApi.script.doesNameExist(childOfChildFolderName)).toBeTruthy();
+    const scriptChildren = await umbracoApi.script.getChildren('/' + scriptFolderName + '/' + childFolderName);
+    expect(scriptChildren[0].path).toBe('/' + scriptFolderName + '/' + childFolderName + '/' + childOfChildFolderName);
+  });
+
+  test('can create a script in a folder in a folder', async ({umbracoApi, umbracoUi}) => {
+    // Arrange
+    const childFolderName = 'ChildFolderName';
+    await umbracoApi.script.createFolder(scriptFolderName);
+    await umbracoApi.script.createFolder(childFolderName, scriptFolderName);
+
+    // Act
+    await umbracoUi.script.clickRootFolderCaretButton();
+    await umbracoUi.script.clickCaretButtonForName(scriptFolderName);
+    await umbracoUi.script.clickActionsMenuForScript(childFolderName);
+    await umbracoUi.script.clickCreateThreeDotsButton();
+    await umbracoUi.script.clickNewJavascriptFileButton();
+    // TODO: Remove this timeout when frontend validation is implemented
+    await umbracoUi.waitForTimeout(500);
+    await umbracoUi.script.enterScriptName(scriptName);
+    await umbracoUi.script.enterScriptName(scriptName);
+    // TODO: Remove this timeout when frontend validation is implemented
+    await umbracoUi.waitForTimeout(500);
+    await umbracoUi.script.clickSaveButton();
+
+    // Assert
+    await umbracoUi.script.isSuccessNotificationVisible();
+    // TODO: Check if the script was created correctly in the UI when the refresh button is implemented
+    expect(await umbracoApi.script.doesNameExist(scriptName)).toBeTruthy();
+    const scriptChildren = await umbracoApi.script.getChildren('/' + scriptFolderName + '/' + childFolderName);
+    expect(scriptChildren[0].path).toBe('/' + scriptFolderName + '/' + childFolderName + '/' + scriptName);
+  });
+});

tests/Umbraco.Tests.AcceptanceTest/tests/DefaultConfig/Settings/Scripts.spec.ts

@@ -1,222 +0,0 @@
-import {ConstantHelper, test} from "@umbraco/playwright-testhelpers";
-import {expect} from "@playwright/test";
-
-test.describe('Script tests', () => {
-  const scriptName = 'TestScript';
-  const scriptPath = scriptName + '.js';
-  const scriptFolderName = 'TestScriptFolder';
-
-  test.beforeEach(async ({umbracoUi}) => {
-    await umbracoUi.goToBackOffice();
-    await umbracoUi.script.goToSection(ConstantHelper.sections.settings);
-  });
-
-  test('can create a empty script', async ({umbracoApi, umbracoUi}) => {
-    // Arrange
-    await umbracoApi.script.ensureNameNotExists(scriptPath);
-
-    // Act
-    await umbracoUi.script.clickActionsMenuAtRoot();
-    await umbracoUi.script.clickNewScriptButton();
-    await umbracoUi.script.enterScriptName(scriptName);
-    // TODO: Remove this timeout when frontend validation is implemented
-    await umbracoUi.waitForTimeout(1000);
-    await umbracoUi.script.clickSaveButton();
-
-    // Assert
-    // TODO: Uncomment when the notification is visible
-    // await umbracoUi.isSuccessNotificationVisible();
-    expect(await umbracoApi.script.doesNameExist(scriptPath)).toBeTruthy();
-
-    // Clean
-    await umbracoApi.script.ensureNameNotExists(scriptPath);
-  });
-
-  test('can update a script', async ({ umbracoApi, umbracoUi}) => {
-    // Arrange
-    await umbracoApi.script.ensureNameNotExists(scriptPath);
-    await umbracoApi.script.create(scriptPath, 'test');
-    const updatedScriptContent = 'const test = {\r\n    script = \u0022Test\u0022,\r\n    extension = \u0022.js\u0022,\r\n    scriptPath: function() {\r\n        return this.script \u002B this.extension;\r\n    }\r\n};\r\n';
-
-    // Act
-    await umbracoUi.script.openScriptAtRoot(scriptPath);
-    await umbracoUi.script.enterScriptContent(updatedScriptContent);
-    await umbracoUi.waitForTimeout(1000);
-    await umbracoUi.script.clickSaveButton();
-
-    // Assert
-    // TODO: Uncomment when the notification is visible
-    // await umbracoUi.isSuccessNotificationVisible();
-    const updatedScript = await umbracoApi.script.get(scriptPath);
-    expect(updatedScript.content).toBe(updatedScriptContent);
-
-    // Clean
-    await umbracoApi.script.ensureNameNotExists(scriptPath);
-  });
-
-  test('can delete a script', async ({umbracoApi, umbracoUi}) => {
-    // Arrange
-    await umbracoApi.script.ensureNameNotExists(scriptPath);
-    await umbracoApi.script.create(scriptPath, '');
-
-    // Act
-    await umbracoUi.script.clickRootFolderCaretButton();
-    await umbracoUi.script.clickActionsMenuForScript(scriptPath);
-    await umbracoUi.script.deleteScript();
-
-    // Assert
-    // TODO: Uncomment when the notification is visible
-    // await umbracoUi.isSuccessNotificationVisible();
-    expect(await umbracoApi.script.doesNameExist(scriptPath)).toBeFalsy();
-  });
-
-  // Folder
-  test.skip('can create a folder', async ({umbracoApi, umbracoUi}) => {
-    // Arrange
-    await umbracoApi.script.ensureNameNotExists(scriptFolderName);
-
-    // Act
-    await umbracoUi.script.clickActionsMenuAtRoot();
-    await umbracoUi.script.createFolder(scriptFolderName);
-
-    // Assert
-    // TODO: Uncomment when the notification is visible
-    // await umbracoUi.isSuccessNotificationVisible();
-    // TODO: Use the reload function for scripts when it is implemented
-    expect(await umbracoApi.script.doesFolderExist(scriptFolderName)).toBeTruthy();
-
-    // Clean
-    await umbracoApi.script.ensureNameNotExists(scriptPath);
-  });
-
-  test.skip('can delete a folder', async ({umbracoApi, umbracoUi}) => {
-    // Arrange
-    await umbracoApi.script.createFolder(scriptFolderName);
-
-    // Act
-    await umbracoUi.script.clickRootFolderCaretButton();
-    await umbracoUi.script.clickActionsMenuForScript(scriptFolderName);
-    await umbracoUi.script.deleteFolder();
-
-    // Assert
-    // TODO: Uncomment when the notification is visible
-    // await umbracoUi.isSuccessNotificationVisible();
-    // TODO: Use the reload function for scripts when it is implemented
-    await umbracoUi.reloadPage();
-    await umbracoUi.script.goToSection(ConstantHelper.sections.settings);
-    // await page.locator('umb-tree-item', {hasText: 'Scripts'}).locator('#caret-button').click();
-    expect(umbracoUi.script.isTreeItemVisible(scriptFolderName)).not.toBeTruthy();
-
-    // await expect(page.locator('umb-tree-item').locator('[label="' + scriptFolderName + '"] ')).not.toBeVisible();
-    expect(await umbracoApi.script.doesFolderExist(scriptFolderName)).toBeFalsy();
-  });
-
-  test.skip('can create a script in a folder', async ({umbracoApi, umbracoUi}) => {
-    // Arrange
-    await umbracoApi.script.ensureNameNotExists(scriptFolderName);
-    await umbracoApi.script.createFolder(scriptFolderName);
-    const scriptContent = 'const test = {\r\n    script = \u0022Test\u0022,\r\n    extension = \u0022.js\u0022,\r\n    scriptPath: function() {\r\n        return this.script \u002B this.extension;\r\n    }\r\n};\r\n';
-
-    // Act
-    await umbracoUi.script.clickRootFolderCaretButton();
-    await umbracoUi.script.clickActionsMenuForScript(scriptFolderName);
-    await umbracoUi.script.clickNewScriptButton();
-    await umbracoUi.script.enterScriptName(scriptName);
-    await umbracoUi.script.enterScriptContent(scriptContent);
-    await umbracoUi.waitForTimeout(1000);
-    await umbracoUi.script.clickSaveButton();
-
-    // Assert
-    // TODO: Uncomment when the notification is visible
-    // await umbracoUi.isSuccessNotificationVisible();
-    // TODO: Check if the script was created correctly in the UI when the refresh button is implemented
-    expect(await umbracoApi.script.doesNameExist(scriptPath)).toBeTruthy();
-    const scriptChildren = await umbracoApi.script.getChildren(scriptFolderName);
-    expect(scriptChildren[0].path).toBe(scriptFolderName + '/' + scriptPath);
-    const scriptData = await umbracoApi.script.get(scriptChildren[0].path);
-    expect(scriptData.content).toBe(scriptContent);
-
-    // Clean
-    await umbracoApi.script.ensureNameNotExists(scriptFolderName);
-  });
-
-  test.skip('can create a folder in a folder', async ({umbracoApi, umbracoUi}) => {
-    // Arrange
-    await umbracoApi.script.ensureNameNotExists(scriptFolderName);
-    await umbracoApi.script.createFolder(scriptFolderName);
-    const childFolderName = "childFolderName";
-
-    // Act
-    await umbracoUi.script.clickRootFolderCaretButton();
-    await umbracoUi.script.clickActionsMenuForScript(scriptFolderName);
-    await umbracoUi.script.createFolder(childFolderName);
-
-    // Assert
-    // TODO: Uncomment when the notification is visible
-    // await umbracoUi.isSuccessNotificationVisible();
-    // TODO: Check if the folder was created correctly in the UI when the refresh button is implemented
-    expect(await umbracoApi.script.doesNameExist(childFolderName)).toBeTruthy();
-    const scriptChildren = await umbracoApi.script.getChildren(scriptFolderName);
-    expect(scriptChildren[0].path).toBe(scriptFolderName + '/' + childFolderName);
-
-    // Clean
-    await umbracoApi.script.ensureNameNotExists(scriptFolderName);
-  });
-
-  test.skip('can create a folder in a folder in a folder', async ({ umbracoApi, umbracoUi}) => {
-    // Arrange
-    const childFolderName = 'ChildFolderName';
-    const childOfChildFolderName = 'ChildOfChildFolderName';
-    await umbracoApi.script.ensureNameNotExists(scriptFolderName);
-    await umbracoApi.script.createFolder(scriptFolderName);
-    await umbracoApi.script.createFolder(childFolderName, scriptFolderName);
-
-    // Act
-    await umbracoUi.script.clickRootFolderCaretButton();
-    await umbracoUi.script.clickActionsMenuForScript(scriptFolderName);
-    await umbracoUi.script.createFolder(childFolderName);
-
-    // Assert
-    // TODO: Uncomment when the notification is visible
-    // await umbracoUi.isSuccessNotificationVisible();
-    // TODO: Check if the folder was created correctly in the UI when the refresh button is implemented
-    expect(await umbracoApi.script.doesNameExist(childOfChildFolderName)).toBeTruthy();
-    const scriptChildren = await umbracoApi.script.getChildren(scriptFolderName + '/' + childFolderName);
-    expect(scriptChildren[0].path).toBe(scriptFolderName + '/' + childFolderName + '/' + childOfChildFolderName);
-
-    // Clean
-    await umbracoApi.script.ensureNameNotExists(scriptFolderName);
-  });
-
-  // TODO: Remove skip from this test when the frontend is able to create a script in a folder in a folder. Currently the script is created in the first folder.
-  test.skip('can create a script in a folder in a folder', async ({umbracoApi, umbracoUi}) => {
-    // Arrange
-    const childFolderName = 'ChildFolderName';
-    await umbracoApi.script.ensureNameNotExists(scriptFolderName);
-    await umbracoApi.script.createFolder(scriptFolderName);
-    await umbracoApi.script.createFolder(childFolderName, scriptFolderName);
-
-    // Act
-    await umbracoUi.script.clickRootFolderCaretButton();
-    await umbracoUi.script.clickActionsMenuForScript(scriptFolderName);
-    await umbracoUi.script.clickNewScriptButton();
-    await umbracoUi.script.enterScriptName(scriptName);
-    await umbracoUi.waitForTimeout(1000);
-    await umbracoUi.script.clickSaveButton();
-
-    // TODO: Remove this timeout when frontend validation is implemented
-    await umbracoUi.waitForTimeout(1000);
-    await umbracoUi.template.clickSaveButton();
-
-    // Assert
-    // TODO: Uncomment when the notification is visible
-    // await umbracoUi.isSuccessNotificationVisible();
-    // TODO: Check if the script was created correctly in the UI when the refresh button is implemented
-    expect(await umbracoApi.script.doesNameExist(scriptPath)).toBeTruthy();
-    const scriptChildren = await umbracoApi.script.getChildren(scriptFolderName + '/' + childFolderName);
-    expect(scriptChildren[0].path).toBe(scriptFolderName + '/' + childFolderName + '/' + scriptPath);
-
-    // Clean
-    await umbracoApi.script.ensureNameNotExists(scriptFolderName);
-  });
-});

tests/Umbraco.Tests.AcceptanceTest/tests/DefaultConfig/Settings/Stylesheet/Stylesheet.spec.ts

@@ -0,0 +1,114 @@
+import {ConstantHelper, test} from '@umbraco/playwright-testhelpers';
+import {expect} from '@playwright/test';
+
+test.describe('Stylesheets tests', () => {
+  const stylesheetName = 'TestStyleSheetFile.css';
+  const ruleName = 'TestRuleName';
+
+  test.beforeEach(async ({umbracoUi,umbracoApi}) => {
+    await umbracoUi.goToBackOffice();
+    await umbracoUi.stylesheet.goToSection(ConstantHelper.sections.settings);
+    await umbracoApi.stylesheet.ensureNameNotExists(stylesheetName);
+  });
+
+  test.afterEach(async ({umbracoApi}) => {
+    await umbracoApi.stylesheet.ensureNameNotExists(stylesheetName);
+  });
+
+  test('can create a empty stylesheet', async ({umbracoApi, umbracoUi}) => {
+    // Act
+    await umbracoUi.stylesheet.clickActionsMenuAtRoot();
+    await umbracoUi.stylesheet.clickCreateThreeDotsButton();
+    await umbracoUi.stylesheet.clickNewStylesheetButton();
+    // TODO: Remove this timeout when frontend validation is implemented
+    await umbracoUi.waitForTimeout(500);
+    await umbracoUi.stylesheet.enterStylesheetName(stylesheetName);
+    // TODO: Remove this timeout when frontend validation is implemented
+    await umbracoUi.waitForTimeout(500);
+    await umbracoUi.stylesheet.clickSaveButton();
+
+    // Assert
+    await umbracoUi.stylesheet.isSuccessNotificationVisible();
+    expect(await umbracoApi.stylesheet.doesNameExist(stylesheetName)).toBeTruthy();
+    // TODO: when frontend is ready, verify the new stylesheet is displayed under the Stylesheets section
+  });
+
+  test('can create a stylesheet with content', async ({umbracoApi, umbracoUi}) => {
+    // Arrange
+    const stylesheetContent = 'TestContent';
+
+    //Act
+    await umbracoUi.stylesheet.clickActionsMenuAtRoot();
+    await umbracoUi.stylesheet.clickCreateThreeDotsButton();
+    await umbracoUi.stylesheet.clickNewStylesheetButton();
+    // TODO: Remove this timeout when frontend validation is implemented
+    await umbracoUi.waitForTimeout(500);
+    await umbracoUi.stylesheet.enterStylesheetName(stylesheetName);
+    await umbracoUi.stylesheet.enterStylesheetContent(stylesheetContent);
+    // TODO: Remove this timeout when frontend validation is implemented
+    await umbracoUi.waitForTimeout(500);
+    await umbracoUi.stylesheet.clickSaveButton();
+
+    // Assert
+    await umbracoUi.stylesheet.isSuccessNotificationVisible();
+    expect(await umbracoApi.stylesheet.doesNameExist(stylesheetName)).toBeTruthy();
+    // TODO: when frontend is ready, verify the new stylesheet is displayed under the Stylesheets section
+    const stylesheetData = await umbracoApi.stylesheet.getByName(stylesheetName);
+    expect(stylesheetData.content).toEqual(stylesheetContent);
+  });
+
+  //  We are not able to create stylesheet with RTE styles.
+  test.skip('can create a new Rich Text Editor stylesheet file', async ({umbracoApi, umbracoUi}) => {
+    //Act
+    await umbracoUi.stylesheet.clickActionsMenuAtRoot();
+    await umbracoUi.stylesheet.clickCreateThreeDotsButton();
+    await umbracoUi.stylesheet.clickNewRichTextEditorStylesheetButton();
+    // TODO: Remove this timeout when frontend validation is implemented
+    await umbracoUi.waitForTimeout(500);
+    await umbracoUi.stylesheet.enterStylesheetName(stylesheetName);
+    await umbracoUi.stylesheet.addNewRule(ruleName, 'h1', 'color:red');
+    // TODO: Remove this timeout when frontend validation is implemented
+    await umbracoUi.waitForTimeout(500);
+    await umbracoUi.stylesheet.clickSaveButton();
+
+    // Assert
+    await umbracoUi.stylesheet.isSuccessNotificationVisible();
+    expect(await umbracoApi.stylesheet.doesExist(stylesheetName)).toBeTruthy();
+    expect(await umbracoApi.stylesheet.doesRuleNameExist(stylesheetName, ruleName)).toBeTruthy();
+    // TODO: when frontend is ready, verify the new stylesheet is displayed under the Stylesheets section
+  });
+
+  // We are not able to update a stylesheet with RTE styles.
+  test.skip('can update a stylesheet', async ({umbracoApi, umbracoUi}) => {
+    // Arrange
+    await umbracoApi.stylesheet.create(stylesheetName, '', '/');
+
+    //Act
+    await umbracoUi.stylesheet.openStylesheetByNameAtRoot(stylesheetName);
+    await umbracoUi.stylesheet.addNewRule(ruleName, 'h1', 'color:red');
+    // TODO: Remove this timeout when frontend validation is implemented
+    await umbracoUi.waitForTimeout(500);
+    await umbracoUi.stylesheet.clickSaveButton();
+
+    // Assert
+    // await umbracoUi.stylesheet.isSuccessNotificationVisible();
+    expect(await umbracoApi.stylesheet.doesRuleNameExist(stylesheetName, ruleName)).toBeTruthy();
+    // TODO: when frontend is ready, verify the notification displays
+  });
+
+  test('can delete a stylesheet', async ({umbracoApi, umbracoUi}) => {
+    // Arrange
+    await umbracoApi.stylesheet.create(stylesheetName, '', '/');
+
+    //Act
+    await umbracoUi.stylesheet.clickRootFolderCaretButton();
+    await umbracoUi.stylesheet.clickActionsMenuForStylesheet(stylesheetName);
+    await umbracoUi.stylesheet.deleteStylesheet();
+
+    // Assert
+    await umbracoUi.stylesheet.isSuccessNotificationVisible();
+    expect(await umbracoApi.stylesheet.doesNameExist(stylesheetName)).toBeFalsy();
+    // TODO: when frontend is ready, verify the new stylesheet is NOT displayed under the Stylesheets section
+    // TODO: when frontend is ready, verify the notification displays
+  });
+});

tests/Umbraco.Tests.AcceptanceTest/tests/DefaultConfig/Settings/Stylesheet/StylesheetFolder.spec.ts

@@ -0,0 +1,143 @@
+import {ConstantHelper, test} from '@umbraco/playwright-testhelpers';
+import {expect} from '@playwright/test';
+
+test.describe('Stylesheets tests', () => {
+  const stylesheetName = 'TestStyleSheetFile.css';
+  const stylesheetFolderName = 'TestStylesheetFolder';
+
+  test.beforeEach(async ({umbracoUi, umbracoApi}) => {
+    await umbracoUi.goToBackOffice();
+    await umbracoUi.stylesheet.goToSection(ConstantHelper.sections.settings);
+    await umbracoApi.stylesheet.ensureNameNotExists(stylesheetFolderName);
+  });
+
+  test.afterEach(async ({umbracoApi}) => {
+    await umbracoApi.stylesheet.ensureNameNotExists(stylesheetFolderName);
+  });
+
+  test('can create a folder', async ({umbracoApi, umbracoUi}) => {
+    // Act
+    await umbracoUi.stylesheet.clickActionsMenuAtRoot();
+    await umbracoUi.stylesheet.createFolder(stylesheetFolderName);
+
+    // Assert
+    await umbracoUi.stylesheet.isSuccessNotificationVisible();
+    expect(await umbracoApi.stylesheet.doesFolderExist(stylesheetFolderName)).toBeTruthy();
+    // TODO: when frontend is ready, verify the new folder is displayed under the Stylesheets section
+  });
+
+  test('can delete a folder', async ({umbracoApi, umbracoUi}) => {
+    // Arrange
+    await umbracoApi.stylesheet.createFolder(stylesheetFolderName, '');
+
+    // Act
+    await umbracoUi.stylesheet.clickRootFolderCaretButton();
+    await umbracoUi.stylesheet.clickActionsMenuForStylesheet(stylesheetFolderName);
+    await umbracoUi.stylesheet.deleteFolder();
+
+    // Assert
+    await umbracoUi.stylesheet.isSuccessNotificationVisible();
+    expect(await umbracoApi.stylesheet.doesFolderExist(stylesheetFolderName)).toBeFalsy();
+    // TODO: when frontend is ready, verify the removed folder is NOT displayed under the Stylesheets section
+  });
+
+  test('can create a folder in a folder', async ({umbracoApi, umbracoUi}) => {
+    // Arrange
+    await umbracoApi.stylesheet.createFolder(stylesheetFolderName);
+    const childFolderName = 'ChildFolderName';
+
+    // Act
+    await umbracoUi.stylesheet.clickRootFolderCaretButton();
+    await umbracoUi.stylesheet.clickActionsMenuForStylesheet(stylesheetFolderName);
+    await umbracoUi.stylesheet.createFolder(childFolderName);
+
+    //Assert
+    await umbracoUi.stylesheet.isSuccessNotificationVisible();
+    expect(await umbracoApi.stylesheet.doesNameExist(childFolderName)).toBeTruthy();
+    const styleChildren = await umbracoApi.stylesheet.getChildren('/' + stylesheetFolderName);
+    expect(styleChildren[0].path).toBe('/' + stylesheetFolderName + '/' + childFolderName);
+    // TODO: when frontend is ready, verify the new folder is displayed under the Stylesheets section
+  });
+
+  test('can create a folder in a folder in a folder', async ({umbracoApi, umbracoUi}) => {
+    // Arrange
+    const childFolderName = 'ChildFolderName';
+    const childOfChildFolderName = 'ChildOfChildFolderName';
+    await umbracoApi.stylesheet.createFolder(stylesheetFolderName);
+    await umbracoApi.stylesheet.createFolder(childFolderName, stylesheetFolderName);
+
+    // Act
+    await umbracoUi.stylesheet.clickRootFolderCaretButton();
+    await umbracoUi.stylesheet.clickCaretButtonForName(stylesheetFolderName);
+    await umbracoUi.stylesheet.clickActionsMenuForStylesheet(childFolderName);
+    await umbracoUi.stylesheet.createFolder(childOfChildFolderName);
+
+    //Assert
+    await umbracoUi.stylesheet.isSuccessNotificationVisible();
+    expect(await umbracoApi.stylesheet.doesNameExist(childOfChildFolderName)).toBeTruthy();
+    const styleChildren = await umbracoApi.stylesheet.getChildren('/' + stylesheetFolderName + '/' + childFolderName);
+    expect(styleChildren[0].path).toBe('/' + stylesheetFolderName + '/' + childFolderName + '/' + childOfChildFolderName);
+    // TODO: when frontend is ready, verify the new folder is displayed under the Stylesheets section
+  });
+
+  test('can create a stylesheet in a folder', async ({umbracoApi, umbracoUi}) => {
+    // Arrange
+    await umbracoApi.stylesheet.createFolder(stylesheetFolderName);
+    const stylesheetContent = 'TestContent';
+
+    //Act
+    await umbracoUi.stylesheet.clickRootFolderCaretButton();
+    await umbracoUi.stylesheet.clickActionsMenuForStylesheet(stylesheetFolderName);
+    await umbracoUi.stylesheet.clickCreateThreeDotsButton();
+    await umbracoUi.stylesheet.clickNewStylesheetButton();
+    // TODO: Remove this timeout when frontend validation is implemented
+    await umbracoUi.waitForTimeout(500);
+    await umbracoUi.stylesheet.enterStylesheetName(stylesheetName);
+    await umbracoUi.stylesheet.enterStylesheetContent(stylesheetContent);
+    // TODO: Remove this timeout when frontend validation is implemented
+    await umbracoUi.waitForTimeout(500);
+    await umbracoUi.stylesheet.clickSaveButton();
+
+    // Assert
+    await umbracoUi.stylesheet.isSuccessNotificationVisible();
+    expect(await umbracoApi.stylesheet.doesNameExist(stylesheetName)).toBeTruthy();
+    // TODO: when frontend is ready, verify the new stylesheet is displayed under the Stylesheets section
+    expect(await umbracoApi.stylesheet.doesNameExist(stylesheetName)).toBeTruthy();
+    const stylesheetChildren = await umbracoApi.stylesheet.getChildren('/' + stylesheetFolderName);
+    expect(stylesheetChildren[0].path).toBe('/' + stylesheetFolderName + '/' + stylesheetName);
+    const stylesheetData = await umbracoApi.stylesheet.get(stylesheetChildren[0].path);
+    expect(stylesheetData.content).toBe(stylesheetContent);
+  });
+
+  test('can create a stylesheet in a folder in a folder', async ({umbracoApi, umbracoUi}) => {
+    // Arrange
+    const childFolderName = 'ChildFolderName';
+    await umbracoApi.stylesheet.createFolder(stylesheetFolderName);
+    await umbracoApi.stylesheet.createFolder(childFolderName, stylesheetFolderName);
+    const stylesheetContent = 'TestContent';
+
+    //Act
+    await umbracoUi.stylesheet.clickRootFolderCaretButton();
+    await umbracoUi.stylesheet.clickCaretButtonForName(stylesheetFolderName);
+    await umbracoUi.stylesheet.clickActionsMenuForStylesheet(childFolderName);
+    await umbracoUi.stylesheet.clickCreateThreeDotsButton();
+    await umbracoUi.stylesheet.clickNewStylesheetButton();
+    // TODO: Remove this timeout when frontend validation is implemented
+    await umbracoUi.waitForTimeout(500);
+    await umbracoUi.stylesheet.enterStylesheetName(stylesheetName);
+    await umbracoUi.stylesheet.enterStylesheetContent(stylesheetContent);
+    // TODO: Remove this timeout when frontend validation is implemented
+    await umbracoUi.waitForTimeout(500);
+    await umbracoUi.stylesheet.clickSaveButton();
+
+    // Assert
+    await umbracoUi.stylesheet.isSuccessNotificationVisible();
+    expect(await umbracoApi.stylesheet.doesNameExist(stylesheetName)).toBeTruthy();
+    // TODO: when frontend is ready, verify the new stylesheet is displayed under the Stylesheets section
+    expect(await umbracoApi.stylesheet.doesNameExist(stylesheetName)).toBeTruthy();
+    const stylesheetChildren = await umbracoApi.stylesheet.getChildren('/' + stylesheetFolderName + '/' + childFolderName);
+    expect(stylesheetChildren[0].path).toBe('/' + stylesheetFolderName + '/' + childFolderName + '/' + stylesheetName);
+    const stylesheetData = await umbracoApi.stylesheet.get(stylesheetChildren[0].path);
+    expect(stylesheetData.content).toBe(stylesheetContent);
+  });
+});

tests/Umbraco.Tests.AcceptanceTest/tests/DefaultConfig/Settings/Stylesheets.spec.ts

@@ -1,186 +0,0 @@
-import {ConstantHelper, test} from '@umbraco/playwright-testhelpers';
-import {expect} from "@playwright/test";
-
-test.describe('Stylesheets tests', () => {
-
-  const styleSheetName = 'TestStyleSheetFile';
-  const styleSheetFileName = styleSheetName + ".css";
-  const ruleName = 'TestRuleName';
-  const styleFolderName = 'TestStylesheetFolder';
-
-  test.beforeEach(async ({umbracoUi}) => {
-    await umbracoUi.goToBackOffice();
-    await umbracoUi.stylesheet.goToSection(ConstantHelper.sections.settings);
-  });
-
-  test('can create a stylesheet file', async ({umbracoApi, umbracoUi}) => {
-    // Arrange
-    await umbracoApi.stylesheet.ensureNameNotExists(styleSheetFileName);
-
-    //Act
-    await umbracoUi.stylesheet.clickActionsMenuAtRoot();
-    await umbracoUi.stylesheet.clickNewStylesheetButton();
-    await umbracoUi.stylesheet.enterStylesheetName(styleSheetName);
-    // TODO: Remove this timeout when frontend validation is implemented
-    await umbracoUi.waitForTimeout(1000);
-    await umbracoUi.stylesheet.clickSaveButton();
-
-    // Assert
-    expect(await umbracoApi.stylesheet.doesExist(styleSheetFileName)).toBeTruthy();
-    // TODO: when frontend is ready, verify the new stylesheet is displayed under the Stylesheets section
-    // TODO: when frontend is ready, verify the notification displays
-
-    // Clean
-    await umbracoApi.stylesheet.ensureNameNotExists(styleSheetFileName);
-  });
-
-  test('can create a new Rich Text Editor style sheet file', async ({umbracoApi, umbracoUi}) => {
-    // Arrange
-    await umbracoApi.stylesheet.ensureNameNotExists(styleSheetFileName);
-
-    //Act
-    await umbracoUi.stylesheet.clickActionsMenuAtRoot();
-    await umbracoUi.stylesheet.clickNewRTEStylesheetButton();
-    await umbracoUi.stylesheet.enterStylesheetName(styleSheetName);
-    await umbracoUi.stylesheet.addNewRule(ruleName, 'h1', 'color:red');
-    // TODO: Remove this timeout when frontend validation is implemented
-    await umbracoUi.waitForTimeout(1000);
-    await umbracoUi.stylesheet.clickSaveButton();
-
-    // Assert
-    expect(await umbracoApi.stylesheet.doesExist(styleSheetFileName)).toBeTruthy();
-    expect(await umbracoApi.stylesheet.doesRuleNameExist(styleSheetFileName, ruleName)).toBeTruthy();
-    // TODO: when frontend is ready, verify the new stylesheet is displayed under the Stylesheets section
-    // TODO: when frontend is ready, verify the notification displays
-
-    // Clean
-    await umbracoApi.stylesheet.ensureNameNotExists(styleSheetFileName);
-  });
-
-  test('can edit a stylesheet file', async ({umbracoApi, umbracoUi}) => {
-    // Arrange
-    await umbracoApi.stylesheet.ensureNameNotExists(styleSheetFileName);
-    await umbracoApi.stylesheet.create(styleSheetFileName, '', '/');
-
-    //Act
-    await umbracoUi.stylesheet.openStylesheetByNameAtRoot(styleSheetFileName);
-    await umbracoUi.stylesheet.addNewRule(ruleName, 'h1', 'color:red');
-    await umbracoUi.stylesheet.clickSaveButton();
-
-    // Assert
-    expect(await umbracoApi.stylesheet.doesRuleNameExist(styleSheetFileName, ruleName)).toBeTruthy();
-    // TODO: when frontend is ready, verify the notification displays
-
-    // Clean
-    await umbracoApi.stylesheet.ensureNameNotExists(styleSheetFileName);
-  });
-
-  test('can delete a stylesheet file', async ({umbracoApi, umbracoUi}) => {
-    // Arrange
-    await umbracoApi.stylesheet.ensureNameNotExists(styleSheetFileName);
-    await umbracoApi.stylesheet.create(styleSheetFileName, '', '/');
-
-    //Act
-    await umbracoUi.stylesheet.clickRootFolderCaretButton();
-    await umbracoUi.stylesheet.clickActionsMenuForStylesheet(styleSheetFileName);
-    await umbracoUi.stylesheet.deleteStylesheet();
-
-    // Assert
-    expect(await umbracoApi.stylesheet.doesNameExist(styleSheetFileName)).toBeFalsy();
-    // TODO: when frontend is ready, verify the new stylesheet is NOT displayed under the Stylesheets section
-    // TODO: when frontend is ready, verify the notification displays
-  });
-
-  test.skip('can create a folder', async ({umbracoApi, umbracoUi}) => {
-    // Arrange
-    await umbracoApi.stylesheet.ensureNameNotExists(styleFolderName);
-
-    // Act
-    await umbracoUi.stylesheet.clickActionsMenuAtRoot();
-    await umbracoUi.stylesheet.createFolder(styleFolderName);
-
-    // Assert
-    expect(await umbracoApi.stylesheet.doesFolderExist(styleFolderName)).toBeTruthy();
-    // TODO: when frontend is ready, verify the new folder is displayed under the Stylesheets section
-    // TODO: when frontend is ready, verify the notification displays
-
-    // Clean
-    await umbracoApi.stylesheet.ensureNameNotExists(styleFolderName);
-  });
-
-  test.skip('can delete a folder', async ({umbracoApi, umbracoUi}) => {
-    // Arrange
-    await umbracoApi.stylesheet.ensureNameNotExists(styleFolderName);
-    await umbracoApi.stylesheet.createFolder(styleFolderName, '');
-
-    // Act
-    await umbracoUi.stylesheet.clickRootFolderCaretButton();
-    await umbracoUi.stylesheet.clickActionsMenuForStylesheet(styleFolderName);
-    await umbracoUi.stylesheet.deleteFolder();
-
-    // Assert
-    expect(await umbracoApi.stylesheet.doesFolderExist(styleFolderName)).toBeFalsy();
-    // TODO: when frontend is ready, verify the removed folder is NOT displayed under the Stylesheets section
-    // TODO: when frontend is ready, verify the notification displays
-  });
-
-  // TODO: remove skip when frontend is ready as currently it will create 2 child folders in UI when creating a folder in a folder
-  test.skip('can create a folder in a folder', async ({umbracoApi, umbracoUi}) => {
-    // Arrange
-    await umbracoApi.stylesheet.ensureNameNotExists(styleFolderName);
-    await umbracoApi.stylesheet.createFolder(styleFolderName);
-    const childFolderName = "ChildFolderName";
-
-    // Act
-    await umbracoUi.stylesheet.clickRootFolderCaretButton();
-    await umbracoUi.stylesheet.clickActionsMenuForStylesheet(styleFolderName);
-    await umbracoUi.stylesheet.createFolder(childFolderName);
-
-    //Assert
-    expect(await umbracoApi.stylesheet.doesNameExist(childFolderName)).toBeTruthy();
-    const styleChildren = await umbracoApi.stylesheet.getChildren(styleFolderName);
-    expect(styleChildren[0].path).toBe(styleFolderName + '/' + childFolderName);
-    // TODO: when frontend is ready, verify the new folder is displayed under the Stylesheets section
-    // TODO: when frontend is ready, verify the notification displays
-
-    // Clean
-    await umbracoApi.stylesheet.ensureNameNotExists(styleFolderName);
-  });
-
-  // TODO: remove skip when frontend is ready as currently it will create 2 child folders in UI when creating a folder in a folder
-  test.skip('can create a folder in a folder in a folder', async ({umbracoApi, umbracoUi}) => {
-    // Arrange
-    const childFolderName = 'ChildFolderName';
-    const childOfChildFolderName = 'ChildOfChildFolderName';
-    await umbracoApi.stylesheet.ensureNameNotExists(styleFolderName);
-    await umbracoApi.stylesheet.createFolder(styleFolderName);
-    await umbracoApi.stylesheet.createFolder(childFolderName, styleFolderName);
-
-    // Act
-    await umbracoUi.stylesheet.clickRootFolderCaretButton();
-    await umbracoUi.stylesheet.clickCaretButtonForName(styleFolderName);
-    await umbracoUi.stylesheet.clickActionsMenuForStylesheet(childFolderName);
-    await umbracoUi.stylesheet.createFolder(childOfChildFolderName);
-
-    //Assert
-    expect(await umbracoApi.stylesheet.doesNameExist(childOfChildFolderName)).toBeTruthy();
-    const styleChildren = await umbracoApi.stylesheet.getChildren(styleFolderName + '/' + childFolderName);
-    expect(styleChildren[0].path).toBe(styleFolderName + '/' + childFolderName + '/' + childOfChildFolderName);
-    // TODO: when frontend is ready, verify the new folder is displayed under the Stylesheets section
-    // TODO: when frontend is ready, verify the notification displays
-
-    // Clean
-    await umbracoApi.stylesheet.ensureNameNotExists(styleFolderName);
-  });
-
-  // TODO: implement this later as the frontend is missing now
-  test.skip('can create a stylesheet in a folder', async ({umbracoApi, umbracoUi}) => {
-
-  });
-
-  // TODO: implement this later as the frontend is missing now
-  test.skip('can create a stylesheet in a folder in a folder', async ({umbracoApi, umbracoUi}) => {
-
-  });
-
-});

tests/Umbraco.Tests.AcceptanceTest/tests/DefaultConfig/Settings/Template/Templates.spec.ts

@@ -10,6 +10,10 @@ test.describe('Template tests', () => {
     await umbracoUi.template.goToSection(ConstantHelper.sections.settings);
   });
 
+  test.afterEach(async ({umbracoApi}) => {
+    await umbracoApi.template.ensureNameNotExists(templateName);
+  });
+
   test('can create a template', async ({umbracoApi, umbracoUi}) => {
     // Act
     await umbracoUi.template.clickActionsMenuAtRoot();
@@ -22,9 +26,6 @@ test.describe('Template tests', () => {
     // Assert
     await umbracoUi.template.isSuccessNotificationVisible();
     expect(await umbracoApi.template.doesNameExist(templateName)).toBeTruthy();
-
-    // Clean
-    await umbracoApi.template.ensureNameNotExists(templateName);
   });
 
   test('can update a template', async ({umbracoApi, umbracoUi}) => {
@@ -40,7 +41,7 @@ test.describe('Template tests', () => {
     await umbracoApi.template.create(templateName, templateAlias, '');
 
     // Act
-    await umbracoUi.template.goToTemplate(templateName)
+    await umbracoUi.template.goToTemplate(templateName);
     await umbracoUi.template.enterTemplateContent(updatedTemplateContent);
     await umbracoUi.template.clickSaveButton();
 
@@ -49,9 +50,6 @@ test.describe('Template tests', () => {
     // Checks if the template was updated
     const updatedTemplate = await umbracoApi.template.getByName(templateName);
     expect(updatedTemplate.content).toBe(updatedTemplateContent);
-
-    // Clean
-    await umbracoApi.template.ensureNameNotExists(templateName);
   });
 
   test('can delete a template', async ({umbracoApi, umbracoUi}) => {
@@ -69,7 +67,7 @@ test.describe('Template tests', () => {
     expect(await umbracoApi.template.doesNameExist(templateName)).toBeFalsy();
   });
 
-  test.skip('can set a template as master template', async ({page, umbracoApi, umbracoUi}) => {
+  test.skip('can set a template as master template', async ({umbracoApi, umbracoUi}) => {
     // Arrange
     const templateAlias = AliasHelper.toAlias(templateName);
     const childTemplateName = 'ChildTemplate';
@@ -81,21 +79,20 @@ test.describe('Template tests', () => {
     // Act
     await umbracoUi.template.goToTemplate(childTemplateName);
     await umbracoUi.template.clickChangeMasterTemplateButton();
-    await page.locator('umb-tree-picker-modal').locator('#caret-button').click();
-    await page.getByRole('button', {name: templateName}).click();
+    await umbracoUi.template.clickCaretDictionaryButton();
+    await umbracoUi.template.clickButtonWithName(templateName);
     await umbracoUi.template.clickSubmitButton();
     await umbracoUi.template.clickSaveButton();
 
     // Assert
     await umbracoUi.template.isSuccessNotificationVisible();
-    await expect(page.locator('[label="Change Master template"]', {hasText: 'Master template: ' + templateName})).toBeVisible();
+    expect(await umbracoUi.template.isMasterTemplateNameVisible(templateName)).toBeTruthy();
     // Checks if the childTemplate has the masterTemplate set
     const childTemplate = await umbracoApi.template.getByName(childTemplateName);
     const masterTemplate = await umbracoApi.template.getByName(templateName);
     expect(childTemplate.masterTemplateId).toBe(masterTemplate.id);
 
     // Clean
-    await umbracoApi.template.ensureNameNotExists(templateName);
     await umbracoApi.template.ensureNameNotExists(childTemplateName);
   });
 
@@ -103,39 +100,18 @@ test.describe('Template tests', () => {
     // Arrange
     const templateAlias = AliasHelper.toAlias(templateName);
     await umbracoApi.template.create(templateName, templateAlias, '');
-    const expectedTemplateContent = '\r\n' +
-      '@{\r\n' +
-      '\tvar selection = Umbraco.ContentAtRoot().FirstOrDefault()\r\n' +
-      '    .Children()\r\n' +
-      '    .Where(x => x.IsVisible());\r\n' +
-      '}\r\n' +
-      '<ul>\r\n' +
-      '\t@foreach (var item in selection)\r\n' +
-      '\t{\r\n' +
-      '\t\t<li>\r\n' +
-      '\t\t\t<a href="@item.Url()">@item.Name()</a>\r\n' +
-      '\t\t</li>\r\n' +
-      '\t}\r\n' +
-      '</ul>\r\n' +
-      '\r\n' +
-      '@using Umbraco.Cms.Web.Common.PublishedModels;\r\n' +
-      '@inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage\r\n' +
-      '@{\r\n' +
-      '\tLayout = null;\r\n' +
-      '}';
+    const expectedTemplateContent = '\r\n@{\r\n\tvar selection = Umbraco.ContentAtRoot().FirstOrDefault()\r\n    .Children()\r\n    .Where(x =\u003E x.IsVisible())\r\n    .OrderBy(x =\u003E x.CreateDate);\r\n}\r\n\u003Cul\u003E\r\n\t@foreach (var item in selection)\r\n\t{\r\n\t\t\u003Cli\u003E\r\n\t\t\t\u003Ca href=\u0022@item.Url()\u0022\u003E@item.Name()\u003C/a\u003E\r\n\t\t\u003C/li\u003E\r\n\t}\r\n\u003C/ul\u003E\r\n\r\n@using Umbraco.Cms.Web.Common.PublishedModels;\r\n@inherits Umbraco.Cms.Web.Common.Views.UmbracoViewPage\r\n@{\r\n\tLayout = null;\r\n}';
 
     // Act
     await umbracoUi.template.goToTemplate(templateName);
-    await umbracoUi.template.addQueryBuilderWithCreateDateOption();
+    await umbracoUi.template.addQueryBuilderWithOrderByStatement('CreateDate', true);
+    await umbracoUi.template.clickSubmitButton();
     await umbracoUi.template.clickSaveButton();
 
     // Assert
     await umbracoUi.template.isSuccessNotificationVisible();
     const templateData = await umbracoApi.template.getByName(templateName);
     expect(templateData.content).toBe(expectedTemplateContent);
-
-    // Clean
-    await umbracoApi.template.ensureNameNotExists(templateName);
   });
 
   test('can insert sections into a template', async ({umbracoApi, umbracoUi}) => {
@@ -151,6 +127,7 @@ test.describe('Template tests', () => {
     // Act
     await umbracoUi.template.goToTemplate(templateName);
     await umbracoUi.template.clickSectionsButton();
+    await umbracoUi.waitForTimeout(1000);
     await umbracoUi.template.clickSubmitButton();
     await umbracoUi.template.clickSaveButton();
 
@@ -158,9 +135,6 @@ test.describe('Template tests', () => {
     await umbracoUi.template.isSuccessNotificationVisible();
     const templateData = await umbracoApi.template.getByName(templateName);
     expect(templateData.content).toBe(templateContent);
-
-    // Clean
-    await umbracoApi.template.ensureNameNotExists(templateName);
   });
 
   test('can insert dictionaryItem into a template', async ({umbracoApi, umbracoUi}) => {
@@ -188,6 +162,5 @@ test.describe('Template tests', () => {
 
     // Clean
     await umbracoApi.dictionary.ensureNameNotExists(dictionaryName);
-    await umbracoApi.template.ensureNameNotExists(templateName);
   });
 });