V14/qa/new acceptance tests (#14435)

* Added auth to gitignore

* Added a setup for logging in which allows us to save the token for the user

.gitignore

@@ -92,6 +92,7 @@ preserve.belle
 
 # Tests
 /tests/Umbraco.Tests.AcceptanceTest/.env
+/tests/Umbraco.Tests.AcceptanceTest/playwright/.auth
 /tests/Umbraco.Tests.Integration.SqlCe/DatabaseContextTests.sdf
 /tests/Umbraco.Tests.Integration.SqlCe/[Uu]mbraco/[Dd]ata/TEMP/
 /tests/Umbraco.Tests.Integration/appsettings.Tests.Local.json

tests/Umbraco.Tests.AcceptanceTest/package-lock.json

@@ -8,16 +8,16 @@
       "hasInstallScript": true,
       "dependencies": {
         "@umbraco/json-models-builders": "^1.0.5",
-        "@umbraco/playwright-testhelpers": "^1.0.22",
+        "@umbraco/playwright-testhelpers": "2.0.0-beta",
         "camelize": "^1.0.0",
-        "dotenv": "^16.0.2",
+        "dotenv": "^16.3.1",
         "faker": "^4.1.0",
         "form-data": "^4.0.0",
         "node-fetch": "^2.6.7",
         "xhr2": "^0.2.1"
       },
       "devDependencies": {
-        "@playwright/test": "^1.32",
+        "@playwright/test": "^1.35",
         "del": "^6.0.0",
         "ncp": "^2.0.0",
         "prompt": "^1.2.0",
@@ -86,19 +86,19 @@
       }
     },
     "node_modules/@playwright/test": {
-      "version": "1.32.3",
+      "version": "1.35.1",
-      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.32.3.tgz",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.35.1.tgz",
-      "integrity": "sha512-BvWNvK0RfBriindxhLVabi8BRe3X0J9EVjKlcmhxjg4giWBD/xleLcg2dz7Tx0agu28rczjNIPQWznwzDwVsZQ==",
+      "integrity": "sha512-b5YoFe6J9exsMYg0pQAobNDR85T1nLumUYgUTtKm4d21iX2L7WqKq9dW8NGJ+2vX0etZd+Y7UeuqsxDXm9+5ZA==",
       "dev": true,
       "dependencies": {
         "@types/node": "*",
-        "playwright-core": "1.32.3"
+        "playwright-core": "1.35.1"
       },
       "bin": {
         "playwright": "cli.js"
       },
       "engines": {
-        "node": ">=14"
+        "node": ">=16"
       },
       "optionalDependencies": {
         "fsevents": "2.3.2"
@@ -141,9 +141,9 @@
       }
     },
     "node_modules/@umbraco/playwright-testhelpers": {
-      "version": "1.0.22",
+      "version": "2.0.0-beta",
-      "resolved": "https://registry.npmjs.org/@umbraco/playwright-testhelpers/-/playwright-testhelpers-1.0.22.tgz",
+      "resolved": "https://registry.npmjs.org/@umbraco/playwright-testhelpers/-/playwright-testhelpers-2.0.0-beta.tgz",
-      "integrity": "sha512-hFqqQvEIylagfqFyhQ2rSyYlUP+xpWA5lkhJjkpb2qpxkIISxjwC/FYJTJGvcoBHuUaZrjsSv4lM2aJy2ZWHMA==",
+      "integrity": "sha512-S0E0ds1VCsYrnpKSmGkbgZFrnRW1WudVkFuUSfwbi/Qb794iZCO7dKbT0Wg1ZjR3ryYeSsM21fd64DTLZmY5iA==",
       "dependencies": {
         "@umbraco/json-models-builders": "^1.0.5",
         "camelize": "^1.0.0",
@@ -315,11 +315,14 @@
       }
     },
     "node_modules/dotenv": {
-      "version": "16.0.2",
+      "version": "16.3.1",
-      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.0.2.tgz",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.3.1.tgz",
-      "integrity": "sha512-JvpYKUmzQhYoIFgK2MOnF3bciIZoItIIoryihy0rIA+H4Jy0FmgyKYAHCTN98P5ybGSJcIFbh6QKeJdtZd1qhA==",
+      "integrity": "sha512-IPzF4w4/Rd94bA9imS68tZBaYyBWSCE47V1RGuMrB94iyTOIEwRmVL2x/4An+6mETpLrKJ5hQkB8W4kFAadeIQ==",
       "engines": {
         "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/motdotla/dotenv?sponsor=1"
       }
     },
     "node_modules/eyes": {
@@ -742,15 +745,15 @@
       }
     },
     "node_modules/playwright-core": {
-      "version": "1.32.3",
+      "version": "1.35.1",
-      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.32.3.tgz",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.35.1.tgz",
-      "integrity": "sha512-SB+cdrnu74ZIn5Ogh/8278ngEh9NEEV0vR4sJFmK04h2iZpybfbqBY0bX6+BLYWVdV12JLLI+JEFtSnYgR+mWg==",
+      "integrity": "sha512-pNXb6CQ7OqmGDRspEjlxE49w+4YtR6a3X6mT1hZXeJHWmsEz7SunmvZeiG/+y1yyMZdHnnn73WKYdtV1er0Xyg==",
       "dev": true,
       "bin": {
-        "playwright": "cli.js"
+        "playwright-core": "cli.js"
       },
       "engines": {
-        "node": ">=14"
+        "node": ">=16"
       }
     },
     "node_modules/prompt": {

tests/Umbraco.Tests.AcceptanceTest/package.json

@@ -10,22 +10,22 @@
     "createTest": "node createTest.js"
   },
   "devDependencies": {
-    "@playwright/test": "^1.32",
+    "@playwright/test": "^1.35",
-    "typescript": "^4.8.3",
-    "tslib": "^2.4.0",
     "del": "^6.0.0",
     "ncp": "^2.0.0",
     "prompt": "^1.2.0",
+    "tslib": "^2.4.0",
+    "typescript": "^4.8.3",
     "wait-on": "^6.0.1"
   },
   "dependencies": {
     "@umbraco/json-models-builders": "^1.0.5",
-    "@umbraco/playwright-testhelpers": "^1.0.22",
+    "@umbraco/playwright-testhelpers": "2.0.0-beta",
     "camelize": "^1.0.0",
+    "dotenv": "^16.3.1",
     "faker": "^4.1.0",
     "form-data": "^4.0.0",
     "node-fetch": "^2.6.7",
-    "xhr2": "^0.2.1",
+    "xhr2": "^0.2.1"
-    "dotenv": "^16.0.2"
   }
 }

tests/Umbraco.Tests.AcceptanceTest/playwright.config.ts

@@ -1,13 +1,11 @@
-import type { PlaywrightTestConfig } from '@playwright/test';
+import {defineConfig, devices} from '@playwright/test';
-import { devices } from '@playwright/test';
+import * as path from "path";
-import dotenv from 'dotenv';
 
-dotenv.config();
+require('dotenv').config();
 
-/**
+export const STORAGE_STATE = path.join(__dirname, 'playwright/.auth/user.json');
- * See https://playwright.dev/docs/test-configuration.
+
- */
+export default defineConfig({
-const config: PlaywrightTestConfig = {
   testDir: './tests/',
   /* Maximum time one test can run for. */
   timeout: 30 * 1000,
@@ -23,19 +21,14 @@ const config: PlaywrightTestConfig = {
   /* Retry on CI only */
   retries: process.env.CI ? 5 : 2,
   // We don't want to run parallel, as tests might differ in state
-  workers:  1,
+  workers: 1,
   /* Reporter to use. See https://playwright.dev/docs/test-reporters */
   reporter: process.env.CI ? 'line' : 'html',
-  outputDir : "./results",
+  outputDir: "./results",
-  
   /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
   use: {
     /* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */
     actionTimeout: 0,
-    /* Base URL to use in actions like `await page.goto('/')`. */
-    // baseURL: 'http://localhost:44332',
-    
-    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
     // When working locally it can be a good idea to use trace: 'on-first-retry' instead of 'retain-on-failure', it can cut the local test times in half.
     trace: 'retain-on-failure',
     ignoreHTTPSErrors: true,
@@ -43,64 +36,19 @@ const config: PlaywrightTestConfig = {
 
   /* Configure projects for major browsers */
   projects: [
+    // Setup project
+    {
+      name: 'setup',
+      testMatch: '**/*.setup.ts',
+    },
     {
       name: 'chromium',
+      dependencies: ['setup'],
       use: {
         ...devices['Desktop Chrome'],
+        // Use prepared auth state.
+        storageState: STORAGE_STATE,
       },
     },
-
-    // {
-    //   name: 'firefox',
-    //   use: {
-    //     ...devices['Desktop Firefox'],
-    //   },
-    // },
-
-    // {
-    //   name: 'webkit',
-    //   use: {
-    //     ...devices['Desktop Safari'],
-    //   },
-    // },
-
-    /* Test against mobile viewports. */
-    // {
-    //   name: 'Mobile Chrome',
-    //   use: {
-    //     ...devices['Pixel 5'],
-    //   },
-    // },
-    // {
-    //   name: 'Mobile Safari',
-    //   use: {
-    //     ...devices['iPhone 12'],
-    //   },
-    // },
-
-    /* Test against branded browsers. */
-    // {
-    //   name: 'Microsoft Edge',
-    //   use: {
-    //     channel: 'msedge',
-    //   },
-    // },
-    // {
-    //   name: 'Google Chrome',
-    //   use: {
-    //     channel: 'chrome',
-    //   },
-    // },
   ],
-
+});
-  /* Folder for test artifacts such as screenshots, videos, traces, etc. */
-  // outputDir: 'test-results/',
-
-  /* Run your local dev server before starting the tests */
-  // webServer: {
-  //   command: 'npm run start',
-  //   port: 3000,
-  // },
-};
-
-export default config;

tests/Umbraco.Tests.AcceptanceTest/tests/auth.setup.ts

@@ -0,0 +1,18 @@
+import {test as setup, expect, Page} from '@playwright/test';
+import {STORAGE_STATE} from '../playwright.config'
+
+// Update this setup with test ids in the future. Maybe also find better locators in general
+setup('authenticate', async ({page}) => {
+  await page.goto(process.env.URL + '/umbraco');
+
+  await page.getByRole('textbox', { name: 'Email' }).fill(process.env.UMBRACO_USER_LOGIN);
+  await page.getByRole('textbox', { name: 'Password' }).fill(process.env.UMBRACO_USER_PASSWORD);
+  await page.getByRole('button', {name: 'Login'}).click();
+
+  await page.waitForURL(process.env.URL + '/umbraco');
+
+  // Assert
+  await expect(page.getByRole('tab', { name: 'Settings' })).toBeVisible();
+
+  await page.context().storageState({path: STORAGE_STATE});
+});