creator.onPageGetFooterActions - The three-dot button appears for a custom page footer action

Fixes #6889

Author: tsv2013

e2e/helper.ts

@@ -0,0 +1,22 @@
+import type { Locator, Page } from "@playwright/test";
+import { expect, test as baseTest } from "@playwright/test";
+
+export const url = "http://127.0.0.1:8080/testCafe/testcafe";
+
+export async function compareScreenshot(page: Page, elementSelector: string | undefined, screenshotName: string, elementIndex = 0) {
+  await page.addStyleTag({
+    content: "textarea::-webkit-resizer { visibility: hidden !important; }"
+  });
+
+  if (!!elementSelector) {
+    const element = page.locator(elementSelector).filter({ visible: true });
+    await expect.soft(element.nth(elementIndex)).toBeVisible();
+    await expect.soft(element.nth(elementIndex)).toHaveScreenshot(screenshotName, {
+      timeout: 10000
+    });
+  } else {
+    await expect.soft(page).toHaveScreenshot(screenshotName, {
+      timeout: 10000
+    });
+  }
+}

packages/survey-creator-angular/package.json

@@ -83,6 +83,8 @@
     "test:single": "ng test --watch=false --browsers=ChromeHeadless survey-creator-angular",
     "release": "standard-version --message \"Release: %s [azurepipelines skip]\" ",
     "test:a11y": "playwright test --project a11y --ui",
-    "test:a11y:ci": "playwright test --project a11y --reporter dot --quiet"
+    "test:a11y:ci": "playwright test --project a11y --reporter dot --quiet",
+    "test:scr": "playwright test --project scr --ui",
+    "test:scr:ci": "playwright test --project scr --reporter dot --quiet"
   }
-}
+}

packages/survey-creator-core/src/components/page.scss

@@ -383,6 +383,10 @@ svc-page {
     flex-grow: 1;
     border: none;
   }
+
+  .svc-add-new-question-action {
+    position: relative;
+  }
 }
 
 .svc-add-new-item-button__text {

packages/survey-creator-js/package.json

@@ -33,7 +33,9 @@
     "watch:prod": "webpack --env buildType=prod --watch",
     "lint": "eslint ./src",
     "test:a11y": "playwright test --project a11y --ui",
-    "test:a11y:ci": "playwright test --project a11y --reporter dot --quiet"
+    "test:a11y:ci": "playwright test --project a11y --reporter dot --quiet",
+    "test:scr": "playwright test --project scr --ui",
+    "test:scr:ci": "playwright test --project scr --reporter dot --quiet"
   },
   "devDependencies": {
     "@rollup/plugin-alias": "^5.1.1",
@@ -74,4 +76,4 @@
     "survey-creator-core": "../survey-creator-core/build",
     "survey-js-ui": "../../../survey-library/packages/survey-js-ui/build"
   }
-}
+}

packages/survey-creator-react/package.json

@@ -36,7 +36,9 @@
     "lint": "eslint . --max-warnings=0",
     "lint:fix": "eslint . --fix",
     "test:a11y": "playwright test --project a11y --ui",
-    "test:a11y:ci": "playwright test --project a11y --reporter dot --quiet"
+    "test:a11y:ci": "playwright test --project a11y --reporter dot --quiet",
+    "test:scr": "playwright test --project scr --ui",
+    "test:scr:ci": "playwright test --project scr --reporter dot --quiet"
   },
   "devDependencies": {
     "@rollup/plugin-node-resolve": "^16.0.0",
@@ -85,4 +87,4 @@
     "survey-react-ui": "../../../survey-library/packages/survey-react-ui/build",
     "survey-creator-core": "../survey-creator-core/build"
   }
-}
+}

packages/survey-creator-vue/package.json

@@ -25,7 +25,9 @@
     "testcafe:ci": "testcafe ../../functionalTests/ --app \"npm run serve:example:prod\" --selector-timeout 1500 --reporter minimal",
     "testcafe": "testcafe ../../functionalTests/ --app \"npm run serve:example:prod\" --selector-timeout 1500 --config-file .testcaferc.dev.js",
     "test:a11y": "playwright test --project a11y --ui",
-    "test:a11y:ci": "playwright test --project a11y --reporter dot --quiet"
+    "test:a11y:ci": "playwright test --project a11y --reporter dot --quiet",
+    "test:scr": "playwright test --project scr --ui",
+    "test:scr:ci": "playwright test --project scr --reporter dot --quiet"
   },
   "devDependencies": {
     "@babel/types": "^7.20.2",
@@ -53,4 +55,4 @@
     "vue": "3.4.19",
     "vue-tsc": "^2.2.0"
   }
-}
+}

playwright.config.ts

@@ -1,22 +1,25 @@
 import { defineConfig } from "@playwright/test";
 import { resolve } from "path";
 export default defineConfig({
+  retries: process.env.CI ? 3 : 0,
   webServer: {
     command: "",
     url: "http://localhost:8080"
   },
+  snapshotPathTemplate: "{testDir}/{testFilePath}-snapshots/{arg}{ext}",
+  reporter: [["junit", { outputFile: "test-results/e2e-junit-results.xml" }], ["html", { open: "never" }]],
   projects: [
     {
       name: "a11y",
       testDir: resolve(__dirname, "./accessibilityTests")
     },
     {
-      name: "vrt",
-      testDir: resolve(__dirname, "./visualRegressionTests")
+      name: "scr",
+      testDir: resolve(__dirname, "./screenshotTests")
     },
     {
       name: "e2e",
-      testDir: resolve(__dirname, "./functionalTests")
+      testDir: resolve(__dirname, "./e2e")
     }
   ]
 });

screenshotTests/surface.spec.ts

@@ -0,0 +1,42 @@
+import { url, compareScreenshot } from "../e2e/helper";
+import { test, expect } from "@playwright/test";
+
+const title = "Design Surface Screenshot";
+
+test.describe(title, () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto(`${url}`);
+  });
+  test("Check question type dots selector", async ({ page }) => {
+    await page.setViewportSize({ width: 1000, height: 800 });
+    await page.evaluate(() => {
+      window["creator"].onPageGetFooterActions.add((sender, options) => {
+        const page = options.page;
+        options.actions.push({
+          id: "sv-nav-clear-page",
+          title: "Clear Page",
+          action: () => {
+            alert("Clear Page");
+          },
+          css: "nav-button",
+          innerCss: "sd-btn nav-input",
+        });
+      });
+      window["creator"].JSON = {
+        "pages": [
+          {
+            "name": "page1",
+            "elements": [
+              {
+                "type": "text",
+                "name": "question1"
+              }
+            ]
+          }
+        ],
+        "headerView": "advanced"
+      };
+    });
+    await compareScreenshot(page, ".sv-action-bar.svc-page__footer", "dots-type-selector-custom-button.png");
+  });
+});