Merge pull request #8999 from surveyjs/playwright

Playwright

.gitignore

@@ -44,5 +44,9 @@ visualRegressionTests/artifacts
 packages/survey-angular-ui/src/**/*.js
 dist
 junit.xml
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/
 playwright-report/*
-test-results/*
+test-results/*

e2e/conditionsAndTriggers/completeTrigger.spec.ts

@@ -0,0 +1,127 @@
+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 = "defaultV2";
+
+frameworks.forEach((framework) => {
+  test.describe(title + " - " + framework, () => {
+    test.beforeEach(async ({ page }) => {
+      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 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 survey.checkData({ exit1: "No", exit2: "Yes" });
+    });
+    test("check complete and next buttons visibility", async ({ page }) => {
+      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();
+
+      await survey.checkData({ exit1: "Yes" });
+    });
+  });
+});

e2e/conditionsAndTriggers/requiredIf.spec.ts

@@ -0,0 +1,76 @@
+import { frameworks, url_test, initSurvey, applyTheme } from "../helper";
+import { QuestionRadiogroup } from "../questionHelper";
+import { test, expect } from "@playwright/test";
+
+const title = "RequiredIf property";
+
+const themeName = "defaultV2";
+
+frameworks.forEach((framework) => {
+  test.describe(title + " - " + framework, () => {
+    test.beforeEach(async ({ page }) => {
+      const json = {
+        elements: [
+          { type: "radiogroup", name: "a", choices: ["item1", "item2", "item3"] },
+          { type: "text", name: "b", requiredIf: "{a} = 'item1'" },
+          {
+            type: "matrixdynamic", name: "c", rowCount: 2,
+            columns: [
+              { cellType: "text", name: "col1", requiredIf: "{a} = 'item2'" }
+            ]
+          },
+        ]
+      };
+      await page.goto(`${url_test}${themeName}/${framework}`);
+      await applyTheme(page, themeName);
+      await initSurvey(page, framework, json);
+      await page.setViewportSize({ width: 1000, height: 1000 });
+    });
+    test("check requriedIf for standard question", async ({ page }) => {
+      const requiredText = page.locator('span:has-text("*")');
+      const a = new QuestionRadiogroup(page, "a");
+      await expect(requiredText).not.toBeVisible();
+      await a.clickByValue("item1");
+      await expect(requiredText.isVisible).toBeTruthy();
+      await a.clickByValue("item3");
+      await expect(requiredText).not.toBeVisible();
+    });
+    test("check requriedIf for matrix column", async ({ page }) => {
+      const requiredText = page.locator('span:has-text("*")');
+      const a = new QuestionRadiogroup(page, "a");
+      await expect(requiredText).not.toBeVisible();
+      await a.clickByValue("item2");
+      await expect(requiredText.isVisible).toBeTruthy();
+      await a.clickByValue("item3");
+      await expect(requiredText).not.toBeVisible();
+    });
+  });
+  /*
+  Test functions
+  test.describe(title + "2 - " + framework, () => {
+    test.beforeEach(async ({ page }) => {
+      const json = {
+        elements: [
+          { type: "radiogroup", name: "a", choices: ["item1", "item2", "item3"] },
+          { type: "radiogroup", name: "b", choices: ["item1", "item2", "item3"] },
+          { type: "checkbox", name: "c", choices: ["item1", "item2", "item3"] }
+        ]
+      };
+      await page.goto(`${url_test}${themeName}/${framework}`);
+      await applyTheme(page, themeName);
+      await initSurvey(page, framework, json);
+      await page.setViewportSize({ width: 1000, height: 1000 });
+    });
+    test("Two radiogroups & checkbox", async ({ page }) => {
+      const a = new QuestionSingleSelect(page, "a");
+      const b = new QuestionSingleSelect(page, "b");
+      const c = new QuestionMultipleSelect(page, "c");
+      await a.clickByValue("item1");
+      await b.clickByValue("item2");
+      await c.clicksByValue(["item1", "item3"]);
+
+      await checkSurveyData(page, { a: "item1", b: "item2", c: ["item1", "item3"] });
+    });
+  });
+*/
+});

e2e/conditionsAndTriggers/setValueTrigger.spec.ts

@@ -0,0 +1,108 @@
+import { frameworks, url_test, initSurvey } from "../helper";
+import { QuestionRadiogroup } from "../questionHelper";
+import { test, expect } from "@playwright/test";
+import { Survey } from "../surveyHelper";
+
+const themeName = "defaultV2";
+const title = "setValueTrigger";
+
+frameworks.forEach((framework) => {
+  test.describe(title + " - " + framework, () => {
+    test.beforeEach(async ({ page }) => {
+      const json = {
+        triggers: [
+          {
+            type: "setvalue",
+            name: "copy",
+            operator: "equal",
+            value: "Yes",
+            setToName: "name",
+            setValue: "Jon Snow",
+          },
+          {
+            type: "setvalue",
+            name: "copy",
+            operator: "equal",
+            value: "Yes",
+            setToName: "email",
+            setValue: "jon.snow@nightwatch.com",
+          },
+          {
+            type: "setvalue",
+            name: "copy",
+            operator: "equal",
+            value: "Yes",
+            setToName: "tempvar",
+            isVariable: true,
+            setValue: "You have decided to use your current information.",
+          },
+          {
+            type: "setvalue",
+            name: "copy",
+            operator: "equal",
+            value: "No",
+            setToName: "name",
+            setValue: "",
+          },
+          {
+            type: "setvalue",
+            name: "copy",
+            operator: "equal",
+            value: "No",
+            setToName: "email",
+            setValue: "",
+          },
+          {
+            type: "setvalue",
+            name: "copy",
+            operator: "equal",
+            value: "No",
+            setToName: "tempvar",
+            isVariable: true,
+            setValue: "You have decided not to use your current information.",
+          },
+        ],
+        pages: [
+          {
+            title: "Customer information",
+            questions: [
+              {
+                type: "radiogroup",
+                name: "copy",
+                title: "Use your current data",
+                choices: ["Yes", "No"],
+                isRequired: true,
+                colCount: 0,
+              },
+              { type: "text", name: "name", title: "Name:", isRequired: true },
+              {
+                type: "text",
+                name: "email",
+                title: "Your e-mail",
+                isRequired: true,
+                validators: [{ type: "email" }],
+              },
+            ],
+          },
+        ],
+        completedHtml:
+          "<p><h4>Thank you for sharing this information with us.</h4></p><p>Your name is: <b>{name}</b></p><p>Your email is: <b>{email}</b></p><p>This information is not in the survey data result:<b> {tempvar}</b></p>",
+      };
+      await page.goto(`${url_test}${themeName}/${framework}`);
+      await initSurvey(page, framework, json);
+    });
+    test("check triggers execution", async ({ page }) => {
+      const survey = new Survey(page);
+      const copy = new QuestionRadiogroup(page, "copy");
+      await copy.clickByValue("Yes");
+      await survey.complete();
+      await expect(page.locator("b").getByLabel("Jon Snow").isVisible).toBeTruthy();
+
+      await survey.checkData({
+        copy: "Yes",
+        name: "Jon Snow",
+        email: "jon.snow@nightwatch.com",
+      });
+    });
+  });
+});