Skip to content

Commit e5f89b9

Browse files
OlgaLarinaOlgaLarina
OlgaLarina
and
OlgaLarina
authored
playwright matrix questions (#10636)
* playwright matrix questions * playwright matrix questions * playwright matrix questions * playwright matrix questions * playwright matrix questions --------- Co-authored-by: OlgaLarina <[email protected]>
1 parent 3917c52 commit e5f89b9

File tree

11 files changed

+2546
-1293
lines changed

11 files changed

+2546
-1293
lines changed

‎e2e/questions/dropdown.spec.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1979,6 +1979,7 @@ frameworks.forEach((framework) => {
19791979
await initSurvey(page, framework, json);
19801980
await page.locator(".sd-dropdown").click();
19811981
await getVisibleListItemByText(page, "Other").click();
1982+
await expect(page.getByRole("textbox", { name: "row row1, column col1" })).toBeFocused();
19821983
await page.keyboard.type("ABC");
19831984
await page.locator(".sd-navigation__complete-btn").click();
19841985

‎e2e/questions/matrix.spec.ts‎

Lines changed: 217 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,223 @@
1-
import { frameworks, url, initSurvey, getSurveyResult, visibleInViewport, test, expect, checkSurveyData } from "../helper";
1+
import { frameworks, url, setOptions, initSurvey, getSurveyResult, getQuestionValue, getQuestionJson, test, expect, checkSurveyData } from "../helper";
22

33
const title = "matrix";
44

5+
const json = {
6+
elements: [
7+
{
8+
type: "matrix",
9+
name: "Quality",
10+
title: "Please indicate if you agree or disagree with the following statements",
11+
columns: [
12+
{ value: 1, text: "Strongly Disagree" },
13+
{ value: 2, text: "Disagree" },
14+
{ value: 3, text: "Neutral" },
15+
{ value: 4, text: "Agree" },
16+
{ value: 5, text: "Strongly Agree" },
17+
],
18+
rows: [
19+
{ value: "affordable", text: "Product is affordable" },
20+
{ value: "does what it claims", text: "Product does what it claims" },
21+
{ value: "better than others", text: "Product is better than other products on the market" },
22+
{ value: "easy to use", text: "Product is easy to use" },
23+
],
24+
},
25+
],
26+
};
27+
528
frameworks.forEach((framework) => {
629
test.describe(`${framework} ${title}`, () => {
30+
test.beforeEach(async ({ page }) => {
31+
await page.goto(`${url}${framework}`);
32+
await initSurvey(page, framework, json);
33+
});
34+
35+
test("choose value", async ({ page }) => {
36+
await page.locator("tr").filter({ hasText: "Product is easy to use" }).locator(".sd-item__decorator").nth(4).click();
37+
await page.locator("input[value=Complete]").click();
38+
39+
const surveyResult = await getSurveyResult(page);
40+
expect(surveyResult.Quality["easy to use"]).toBe(5);
41+
});
42+
43+
test("choose several values", async ({ page }) => {
44+
await page.locator("tr").filter({ hasText: "Product does what it claims" }).locator(".sd-item__decorator").nth(3).click();
45+
await page.locator("tr").filter({ hasText: "Product is easy to use" }).locator(".sd-item__decorator").nth(4).click();
46+
await page.locator("input[value=Complete]").click();
47+
48+
const surveyResult = await getSurveyResult(page);
49+
expect(surveyResult.Quality).toEqual({
50+
"does what it claims": 4,
51+
"easy to use": 5,
52+
});
53+
});
54+
55+
test("require answer for all rows", async ({ page }) => {
56+
await setOptions(page, "Quality", { isAllRowRequired: true });
57+
await page.locator("input[value=Complete]").click();
58+
await expect(page.locator(".sv-string-viewer").getByText("Response required: answer questions in all rows.")).toBeVisible();
59+
60+
let surveyResult = await getSurveyResult(page);
61+
expect(typeof surveyResult).toBe("undefined");
62+
63+
await page.locator("tr").filter({ hasText: "Product is affordable" }).locator(".sd-item__decorator").nth(2).click();
64+
await page.locator("tr").filter({ hasText: "Product does what it claims" }).locator(".sd-item__decorator").nth(3).click();
65+
await page.locator("tr").filter({ hasText: "Product is better than other" }).locator(".sd-item__decorator").nth(1).click();
66+
await page.locator("tr").filter({ hasText: "Product is easy to use" }).locator(".sd-item__decorator").nth(4).click();
67+
await page.locator("input[value=Complete]").click();
68+
69+
surveyResult = await getSurveyResult(page);
70+
expect(surveyResult.Quality).toEqual({
71+
affordable: 3,
72+
"does what it claims": 4,
73+
"better than others": 2,
74+
"easy to use": 5,
75+
});
76+
});
77+
78+
test("checked class", async ({ page }) => {
79+
const isCheckedClassExistsByIndex = async (index: number) => {
80+
return await page.evaluate((index) => {
81+
const element = document.querySelector(`fieldset tbody tr td:nth-child(${index + 1}) label`);
82+
return element?.classList.contains("sd-radio--checked") || false;
83+
}, index);
84+
};
85+
86+
expect(await isCheckedClassExistsByIndex(2)).toBe(false);
87+
expect(await isCheckedClassExistsByIndex(3)).toBe(false);
88+
89+
await page.locator("tr").filter({ hasText: "Product is affordable" }).locator(".sd-item__decorator").nth(1).click();
90+
expect(await isCheckedClassExistsByIndex(2)).toBe(true);
91+
expect(await isCheckedClassExistsByIndex(3)).toBe(false);
92+
93+
await page.locator("tr").filter({ hasText: "Product is affordable" }).locator(".sd-item__decorator").nth(2).click();
94+
expect(await isCheckedClassExistsByIndex(2)).toBe(false);
95+
expect(await isCheckedClassExistsByIndex(3)).toBe(true);
96+
});
97+
98+
test("isAnswered for matrix with loading answers from data - #2239", async ({ page }) => {
99+
await page.evaluate(() => {
100+
window["survey"].data = {
101+
Quality: {
102+
affordable: "1",
103+
"does what it claims": "1",
104+
"better than others": "1",
105+
"easy to use": "1",
106+
},
107+
};
108+
});
109+
const getIsAnswered = async () => {
110+
return await page.evaluate(() => window["survey"].getAllQuestions()[0].isAnswered);
111+
};
112+
expect(await getIsAnswered()).toBe(true);
113+
});
114+
});
115+
});
116+
117+
frameworks.forEach((framework) => {
118+
test.describe(`${framework} ${title}`, () => {
119+
test.beforeEach(async ({ page }) => {
120+
await page.goto(`${url}${framework}`);
121+
await initSurvey(page, framework, json, true);
122+
});
123+
124+
test("click on question title state editable", async ({ page }) => {
125+
var newTitle = "MyText";
126+
var questionJson = await getQuestionJson(page);
127+
var json = JSON.parse(questionJson);
128+
var questionValue = await getQuestionValue(page);
129+
expect(questionValue).toBeUndefined();
130+
131+
var outerSelector = ".sd-question__title";
132+
var innerSelector = ".sv-string-editor";
133+
await page.locator(outerSelector).first().click();
134+
await page.locator(outerSelector + " " + innerSelector).first().fill(newTitle);
135+
await page.locator("body").click({ position: { x: 0, y: 0 } });
136+
137+
questionValue = await getQuestionValue(page);
138+
expect(questionValue).toBeUndefined();
139+
questionJson = await getQuestionJson(page);
140+
json = JSON.parse(questionJson);
141+
expect(json.title).toBe(newTitle);
142+
});
143+
144+
test("click on column title state editable", async ({ page }) => {
145+
var newTitle = "MyText";
146+
var questionJson = await getQuestionJson(page);
147+
var json = JSON.parse(questionJson);
148+
var questionValue = await getQuestionValue(page);
149+
expect(questionValue).toBeUndefined();
150+
151+
var outerSelector = ".sd-matrix__table th";
152+
var innerSelector = ".sv-string-editor";
153+
await page.locator(outerSelector).first().click();
154+
await page.locator(outerSelector + " " + innerSelector).first().fill(newTitle);
155+
await page.locator("body").click({ position: { x: 0, y: 0 } });
156+
157+
questionValue = await getQuestionValue(page);
158+
expect(questionValue).toBeUndefined();
159+
questionJson = await getQuestionJson(page);
160+
json = JSON.parse(questionJson);
161+
expect(json.columns[0].text).toBe(newTitle);
162+
});
163+
164+
test("click on row title state editable", async ({ page }) => {
165+
var newTitle = "MyText";
166+
var questionJson = await getQuestionJson(page);
167+
var json = JSON.parse(questionJson);
168+
var questionValue = await getQuestionValue(page);
169+
expect(questionValue).toBeUndefined();
170+
171+
var selector = ".sd-matrix__table tbody tr td .sv-string-editor";
172+
await page.locator(selector).first().click();
173+
await page.locator(selector).first().fill(newTitle);
174+
await page.locator("body").click({ position: { x: 0, y: 0 } });
175+
176+
questionValue = await getQuestionValue(page);
177+
expect(questionValue).toBeUndefined();
178+
questionJson = await getQuestionJson(page);
179+
json = JSON.parse(questionJson);
180+
expect(json.rows[0].text).toBe(newTitle);
181+
});
182+
});
183+
});
184+
185+
const json2 = {
186+
"autoFocusFirstQuestion": true,
187+
"elements": [{
188+
"type": "radiogroup",
189+
"name": "question2",
190+
"defaultValue": "Item1",
191+
"choices": [
192+
"Item1",
193+
"Item2",
194+
"Item3"
195+
]
196+
},
197+
{
198+
"type": "matrix",
199+
"name": "question1",
200+
"columns": ["Col1"],
201+
"rows": [
202+
{ value: "Row1", enableIf: "{question2} = 'Item2'" }
203+
]
204+
}]
205+
};
206+
207+
frameworks.forEach(framework => {
208+
test.describe(`${framework} ${title}`, () => {
209+
test("Matrix row enableIf", async ({ page }) => {
210+
await page.goto(`${url}${framework}`);
211+
await initSurvey(page, framework, json2);
212+
const inputButton = page.locator("input[value=\"Col1\"]");
213+
await expect(inputButton).toBeVisible();
214+
await expect(inputButton).toHaveAttribute("disabled", "");
215+
await page.keyboard.press("ArrowDown");
216+
await expect(inputButton).not.toHaveAttribute("disabled", "");
217+
await page.keyboard.press("ArrowUp");
218+
await expect(inputButton).toHaveAttribute("disabled", "");
219+
});
220+
7221
test("check matrix cellType: checkbox keyboard navigation", async ({ page }) => {
8222
await page.goto(`${url}${framework}`);
9223
await page.setViewportSize({ width: 1920, height: 1080 });
@@ -41,4 +255,5 @@ frameworks.forEach((framework) => {
41255
});
42256
});
43257
});
44-
});
258+
});
259+

‎e2e/questions/matrixdropdownMultiplecolumns.spec.ts‎

Lines changed: 111 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
1+
import { frameworks, url, initSurvey, getSurveyResult, test, expect } from "../helper";
2+
3+
const title = "matrixdropdownMultiplecolumns";
4+
5+
const json = {
6+
elements: [
7+
{
8+
type: "matrixdropdown",
9+
name: "question1",
10+
columns: [
11+
{
12+
name: "col1",
13+
cellType: "radiogroup",
14+
title: "What is your feeling?",
15+
showInMultipleColumns: true,
16+
choices: [
17+
"Strongly disagree",
18+
"Disagree",
19+
"Neutral",
20+
"Agree",
21+
"Strongly agree",
22+
],
23+
},
24+
{
25+
name: "comment",
26+
title: "Please comment",
27+
cellType: "comment",
28+
},
29+
],
30+
rows: [
31+
"Excited",
32+
"Enthusiastic",
33+
"Open",
34+
"Physically safe",
35+
"Emotionally safe",
36+
"Apprehensive",
37+
"Nervous",
38+
"Scared",
39+
],
40+
},
41+
],
42+
};
43+
44+
frameworks.forEach((framework) => {
45+
test.describe(`${framework} ${title}`, () => {
46+
test.beforeEach(async ({ page }) => {
47+
await page.goto(`${url}${framework}`);
48+
await initSurvey(page, framework, json);
49+
});
50+
51+
test("multiple columns", async ({ page }) => {
52+
const baseSelectorFunc = function (strings, ...values) {
53+
return `tbody > tr:nth-of-type(${values[0]}) > td:nth-of-type(${values[1]})`;
54+
};
55+
56+
await expect(page.locator("th").filter({ hasText: "Strongly disagree" })).toBeVisible();
57+
await expect(page.locator("th")).toHaveCount(6);
58+
59+
await page.locator(`${baseSelectorFunc`${1}${2}`} label`).click();
60+
await page.locator(`${baseSelectorFunc`${2}${3}`} label`).click();
61+
await page.locator(`${baseSelectorFunc`${3}${4}`} label`).click();
62+
await page.locator(`${baseSelectorFunc`${4}${5}`} label`).click();
63+
await page.locator(`${baseSelectorFunc`${5}${6}`} label`).click();
64+
await page.locator(`${baseSelectorFunc`${1}${7}`} textarea`).fill("Some comment");
65+
66+
await page.locator("input[value=Complete]").click();
67+
68+
let surveyResult = await getSurveyResult(page);
69+
expect(surveyResult.question1.Excited).toEqual({
70+
col1: "Strongly disagree",
71+
comment: "Some comment",
72+
});
73+
expect(surveyResult.question1["Emotionally safe"]).toEqual({
74+
col1: "Strongly agree",
75+
});
76+
});
77+
78+
test("multiple columns and hasOther", async ({ page }) => {
79+
const baseSelectorFunc = function (strings, ...values) {
80+
return `tbody > tr:nth-of-type(${values[0]}) > td:nth-of-type(${values[1]})`;
81+
};
82+
83+
await page.evaluate(() => {
84+
const survey = window["survey"];
85+
survey.getQuestionByName("question1").columns[0].hasOther = true;
86+
});
87+
88+
await expect(page.locator("th").filter({ hasText: "Other (describe)" })).toBeVisible();
89+
await expect(page.locator("th")).toHaveCount(7);
90+
91+
await page.locator(`${baseSelectorFunc`${1}${2}`} label`).click();
92+
await page.locator(`${baseSelectorFunc`${2}${3}`} label`).click();
93+
await page.locator(`${baseSelectorFunc`${3}${4}`} label`).click();
94+
await page.locator(`${baseSelectorFunc`${4}${5}`} label`).click();
95+
await page.locator(`${baseSelectorFunc`${5}${6}`} label`).click();
96+
await page.locator(`${baseSelectorFunc`${1}${7}`} textarea`).fill("Some comment");
97+
98+
await page.locator("input[value=Complete]").click();
99+
100+
let surveyResult = await getSurveyResult(page);
101+
expect(surveyResult.question1.Excited).toEqual({
102+
col1: "other",
103+
"col1-Comment": "Some comment",
104+
});
105+
expect(surveyResult.question1["Emotionally safe"]).toEqual({
106+
col1: "Strongly agree",
107+
});
108+
});
109+
});
110+
});
111+

0 commit comments

Comments
 (0)