playwright survey tests

e2e/components/popup.spec.ts

@@ -182,7 +182,6 @@ frameworks.forEach((framework) => {
       await clickButton.click();
       await expect(popupModalSelector).toBeVisible();
       await expect(page.locator(".sv-popup span").getByText("modal_question")).toBeVisible();
-      await page.waitForTimeout(500);
 
       const popupClientRect = await popupModalSelector.locator(".sv-popup__container").boundingBox();
       const paddingDiff = 32;

e2e/conditionsAndTriggers/completeTrigger.spec.ts

@@ -1,138 +1,127 @@
-import { frameworks, url, initSurvey, getSurveyResult } from "../helper";
+import { frameworks, url_test, initSurvey } from "../helper";
+import { QuestionRadiogroup } from "../questionHelper";
 import { test, expect } from "@playwright/test";
+import { Survey } from "../surveyHelper";
 
 const title = "completeTrigger";
+const themeName = "default";
 
-const json = {
-  triggers: [
-    { type: "complete", name: "exit1", operator: "equal", value: "Yes" },
-    { type: "complete", name: "exit2", operator: "equal", value: "Yes" }
-  ],
-  pages: [
-    {
-      title: "What operating system do you use?",
-      questions: [
-        {
-          type: "checkbox",
-          name: "opSystem",
-          title: "OS",
-          hasOther: true,
-          choices: ["Windows", "Linux", "Macintosh OSX"]
-        },
-        {
-          type: "radiogroup",
-          name: "exit1",
-          title: "Do you want to finish the survey?",
-          choices: ["Yes", "No"],
-          colCount: 0
-        }
-      ]
-    },
-    {
-      title: "What language(s) are you currently using?",
-      questions: [
-        {
-          type: "checkbox",
-          name: "langs",
-          title: "Plese select from the list",
-          colCount: 4,
-          choices: [
-            "Javascript",
-            "Java",
-            "Python",
-            "CSS",
-            "PHP",
-            "Ruby",
-            "C++",
-            "C",
-            "Shell",
-            "C#",
-            "Objective-C",
-            "R",
-            "VimL",
-            "Go",
-            "Perl",
-            "CoffeeScript",
-            "TeX",
-            "Swift",
-            "Scala",
-            "Emacs List",
-            "Haskell",
-            "Lua",
-            "Clojure",
-            "Matlab",
-            "Arduino",
-            "Makefile",
-            "Groovy",
-            "Puppet",
-            "Rust",
-            "PowerShell"
-          ]
-        },
-        {
-          type: "radiogroup",
-          name: "exit2",
-          title: "Do you want to finish the survey?",
-          choices: ["Yes", "No"],
-          colCount: 0
-        }
-      ]
-    },
-    {
-      title: "Please enter your name and e-mail",
-      questions: [
-        { type: "text", name: "name", title: "Name:" },
-        { type: "text", name: "email", title: "Your e-mail" }
-      ]
-    }
-  ]
-};
-
-frameworks.forEach(framework => {
-  test.describe(`${title} - ${framework}`, () => {
+frameworks.forEach((framework) => {
+  test.describe(`${framework} ${title}`, () => {
     test.beforeEach(async ({ page }) => {
-      await page.goto(`${url}${framework}`);
+      const json = {
+        triggers: [
+          { type: "complete", name: "exit1", operator: "equal", value: "Yes" },
+          { type: "complete", name: "exit2", operator: "equal", value: "Yes" }
+        ],
+        pages: [
+          {
+            title: "What operating system do you use?",
+            questions: [
+              {
+                type: "checkbox",
+                name: "opSystem",
+                title: "OS",
+                hasOther: true,
+                choices: ["Windows", "Linux", "Macintosh OSX"]
+              },
+              {
+                type: "radiogroup",
+                name: "exit1",
+                title: "Do you want to finish the survey?",
+                choices: ["Yes", "No"],
+                colCount: 0
+              }
+            ]
+          },
+          {
+            title: "What language(s) are you currently using?",
+            questions: [
+              {
+                type: "checkbox",
+                name: "langs",
+                title: "Plese select from the list",
+                colCount: 4,
+                choices: [
+                  "Javascript",
+                  "Java",
+                  "Python",
+                  "CSS",
+                  "PHP",
+                  "Ruby",
+                  "C++",
+                  "C",
+                  "Shell",
+                  "C#",
+                  "Objective-C",
+                  "R",
+                  "VimL",
+                  "Go",
+                  "Perl",
+                  "CoffeeScript",
+                  "TeX",
+                  "Swift",
+                  "Scala",
+                  "Emacs List",
+                  "Haskell",
+                  "Lua",
+                  "Clojure",
+                  "Matlab",
+                  "Arduino",
+                  "Makefile",
+                  "Groovy",
+                  "Puppet",
+                  "Rust",
+                  "PowerShell"
+                ]
+              },
+              {
+                type: "radiogroup",
+                name: "exit2",
+                title: "Do you want to finish the survey?",
+                choices: ["Yes", "No"],
+                colCount: 0
+              }
+            ]
+          },
+          {
+            title: "Please enter your name and e-mail",
+            questions: [
+              { type: "text", name: "name", title: "Name:" },
+              { type: "text", name: "email", title: "Your e-mail" }
+            ]
+          }
+        ]
+      };
+      await page.goto(`${url_test}${themeName}/${framework}`);
       await initSurvey(page, framework, json);
     });
-
     test("check visibility", async ({ page }) => {
-      const nextSelector = page.locator("input[value=\"Next\"]").filter({ visible: true });
-      const completeSelector = page.locator("input[value=\"Complete\"]").filter({ visible: true });
-      const yesSelector = page.locator("label").filter({ hasText: "Yes" }).locator("span").first();
-      const noSelector = page.locator("label").filter({ hasText: "No" }).locator("span").first();
+      const survey = new Survey(page);
+      const exit1 = new QuestionRadiogroup(page, "exit1");
+      await exit1.clickByValue("No");
+      await survey.nextPage();
+      const exit2 = new QuestionRadiogroup(page, "exit2");
+      await exit2.clickByValue("Yes");
+      await survey.complete();
 
-      await expect(page.locator(".sv-string-viewer").filter({ hasText: "4. Do you want to finish the survey?" })).toHaveCount(0);
-      await noSelector.click();
-      await nextSelector.click();
-      await yesSelector.click();
-      await completeSelector.click();
-
-      const surveyResult = await getSurveyResult(page);
-      expect(surveyResult).toEqual({ exit1: "No", exit2: "Yes" });
+      await survey.checkData({ exit1: "No", exit2: "Yes" });
     });
-
     test("check complete and next buttons visibility", async ({ page }) => {
-      const nextSelector = page.locator("input[value=\"Next\"]").filter({ visible: true });
-      const completeSelector = page.locator("input[value=\"Complete\"]").filter({ visible: true });
-      const yesSelector = page.locator("label").filter({ hasText: "Yes" }).locator("span").first();
-      const noSelector = page.locator("label").filter({ hasText: "No" }).locator("span").first();
-
-      await expect(nextSelector).toHaveCount(1);
-      await expect(completeSelector).toHaveCount(0);
-
-      await yesSelector.click();
-      await expect(nextSelector).toHaveCount(0);
-      await expect(completeSelector).toHaveCount(1);
-
-      await noSelector.click();
-      await expect(nextSelector).toHaveCount(1);
-      await expect(completeSelector).toHaveCount(0);
-
-      await yesSelector.click();
-      await completeSelector.click();
+      const survey = new Survey(page);
+      const exit1 = new QuestionRadiogroup(page, "exit1");
+      await exit1.clickByValue("Yes");
+      await survey.checkNextButtonVisibility(false);
+      await survey.checkCompleteButtonVisibility(true);
+      await survey.checkNextButtonVisibility(true);
+      await survey.checkCompleteButtonVisibility(false);
+      await exit1.clickByValue("No");
+      await exit1.clickByValue("Yes");
+      await survey.checkNextButtonVisibility(false);
+      await survey.checkCompleteButtonVisibility(true);
+      await survey.complete();
 
-      const surveyResult = await getSurveyResult(page);
-      expect(surveyResult).toEqual({ exit1: "Yes" });
+      await survey.checkData({ exit1: "Yes" });
     });
   });
 });

e2e/helper.ts

@@ -1,4 +1,4 @@
-import type { Page } from "@playwright/test";
+import type { Locator, Page } from "@playwright/test";
 import { expect } from "@playwright/test";
 
 const environment = process.env.env;
@@ -39,8 +39,7 @@ export const initSurvey = async (page: Page, framework: string, json: any, isDes
     // eslint-disable-next-line no-console
     console.log("surveyjs console.error and console.warn override");
 
-    //!!!TODO!!!
-    //window["Survey"].settings.animationEnabled = false;
+    window["Survey"].settings.animationEnabled = false;
     const self: any = window;
     const model = new window["Survey"].Model(json);
     model.setDesignMode(isDesignMode);
@@ -131,4 +130,16 @@ export async function setRowItemFlowDirection(page) {
   await page.evaluate(() => {
     window["Survey"].settings.itemFlowDirection = "row";
   });
-}
+}
+
+export async function visibleInViewport (page, locator: Locator) {
+  const rect = await locator.boundingBox();
+  return await page.evaluate((rect) => {
+    return (
+      rect?.y >= 0 &&
+      rect?.x >= 0 &&
+      rect?.y + rect?.height <= (window.innerHeight || document.documentElement.clientHeight) &&
+      rect?.x + rect?.width <= (window.innerWidth || document.documentElement.clientWidth)
+    );
+  }, rect);
+}

e2e/questions/allTypes.spec.ts

@@ -7,7 +7,7 @@ const title = "allTypes";
 const themeName = "default";
 
 frameworks.forEach((framework) => {
-  test.describe(title + " - " + framework, () => {
+  test.describe(`${framework} ${title}`, () => {
     test.beforeEach(async ({ page }) => {
       const img_base64 =
         "data:image/png;base64,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";

e2e/questions/boolean.spec.ts

@@ -5,7 +5,7 @@ import { test, expect } from "@playwright/test";
 const themeName = "default";
 const title = "boolean";
 frameworks.forEach((framework) => {
-  test.describe(title + " - " + framework, () => {
+  test.describe(`${framework} ${title}`, () => {
     test.beforeEach(async ({ page }) => {
       const json = {
         questions: [

e2e/questions/checkboxes.spec.ts

@@ -36,7 +36,7 @@ const json = {
 };
 
 frameworks.forEach((framework) => {
-  test.describe(title + " - " + framework, () => {
+  test.describe(`${framework} ${title}`, () => {
     test.beforeEach(async ({ page }) => {
       await page.goto(`${url_test}${themeName}/${framework}`);
       await initSurvey(page, framework, json);
@@ -487,7 +487,7 @@ frameworks.forEach((framework) => {
 });
 
 frameworks.forEach((framework) => {
-  test.describe(title + " - " + framework, () => {
+  test.describe(`${framework} ${title}`, () => {
     test.beforeEach(async ({ page }) => {
       await page.goto(`${url_test}${themeName}/${framework}`);
       await initSurvey(page, framework, json);
@@ -518,7 +518,7 @@ frameworks.forEach((framework) => {
 });
 
 frameworks.forEach((framework) => {
-  test.describe(title + " - " + framework, () => {
+  test.describe(`${framework} ${title}`, () => {
     test.beforeEach(async ({ page }) => {
       await page.goto(`${url_test}${themeName}/${framework}`);
       await page.setViewportSize({ width: 800, height: 600 });