Skip to content

Commit 40b6c40

Browse files
author
tsv2013
committed
Resolved https://github.com/surveyjs/service/issues/3514 - Added screenshot tests
1 parent 44cc9f8 commit 40b6c40

23 files changed

+178
-16
lines changed

‎.vscode/settings.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"eslint.format.enable": true,
33
"editor.codeActionsOnSave": {
4-
"source.fixAll.eslint": true
4+
"source.fixAll.eslint": "explicit"
55
}
66
}

‎helper.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,14 @@ export const siteUrl = 'https://surveyjsio-test.azurewebsites.net';
66
// export const examplesURL = 'http://localhost:62946';
77
// export const siteUrl = 'http://localhost:62946';
88

9+
export const screens = {
10+
'Large-Desktop': { width: 1920, height: 1080 },
11+
'Desktop': { width: 1366, height: 768 },
12+
'Tablet': { width: 1024, height: 744 },
13+
'Vertical-Tablet': { width: 744, height: 1024 },
14+
'Mobile': { width: 375, height: 667 }
15+
};
16+
917
export async function compareScreenshot(page: Page, elementSelector: string | Locator | undefined, screenshotName: string, elementIndex = 0, maxDiffPixels?:number, mask?: Array<Locator>) {
1018
let currentElement = elementSelector;
1119
if (!!currentElement && typeof currentElement == 'string') {

‎package-lock.json‎

Lines changed: 13 additions & 15 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎site/markdown-content.spec.ts‎

Lines changed: 156 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,156 @@
1+
import { test, expect, acceptCookieBanner, siteUrl as url, compareScreenshot, screens } from '../helper';
2+
3+
test.beforeAll('Setup', async ({ page }) => {
4+
console.log('Before tests');
5+
test.setTimeout(480000);
6+
await page.goto(`${url}`);
7+
});
8+
9+
test('FAQ Overview', async ({ page }) => {
10+
await page.setViewportSize({ width: 1599, height: 768 });
11+
await page.goto(`${url}/faq`);
12+
await acceptCookieBanner(page);
13+
14+
await expect(page.locator('.s-search')).toBeVisible();
15+
await expect(page.locator('.s-search__search-button').first()).toBeVisible();
16+
await expect(page.locator('div:nth-child(3) > .s-search__search-button')).toBeVisible();
17+
await expect(page.getByRole('textbox', { name: 'Search in FAQ...' })).toBeVisible();
18+
19+
const leftSidebar = page.locator('.v2-class---sidebar').first();
20+
await compareScreenshot(page, leftSidebar, 'markdown-content-faq-vnav-1.png');
21+
22+
const rightSidebar = page.locator('.v2-class---anchor-menu').first();
23+
await compareScreenshot(page, rightSidebar, 'markdown-content-faq-anchor-menu-1.png');
24+
25+
const unorderedList = page.locator('.v2-class---list-doc--unordered').first();
26+
await compareScreenshot(page, unorderedList, 'markdown-content-faq-unordered-list.png');
27+
28+
await page.locator('.s-search__search-button').first().click();
29+
await expect(leftSidebar).toBeHidden();
30+
31+
await page.locator('div:nth-child(3) > .s-search__search-button').click();
32+
await expect(rightSidebar).toBeHidden();
33+
34+
await page.locator('.s-search__search-button').first().click();
35+
await expect(leftSidebar).toBeVisible();
36+
37+
await page.locator('div:nth-child(3) > .s-search__search-button').click();
38+
await expect(rightSidebar).toBeVisible();
39+
});
40+
41+
test('FAQ Licensing', async ({ page }) => {
42+
await page.setViewportSize({ width: 1599, height: 768 });
43+
await page.goto(`${url}/faq/licensing`);
44+
await acceptCookieBanner(page);
45+
46+
await expect(page.locator('.s-search')).toBeVisible();
47+
await expect(page.locator('.s-search__search-button').first()).toBeVisible();
48+
await expect(page.locator('div:nth-child(3) > .s-search__search-button')).toBeVisible();
49+
await expect(page.getByRole('textbox', { name: 'Search in FAQ...' })).toBeVisible();
50+
51+
const leftSidebar = page.locator('.v2-class---sidebar').first();
52+
await compareScreenshot(page, leftSidebar, 'markdown-content-faq-vnav-2.png');
53+
54+
const rightSidebar = page.locator('.v2-class---anchor-menu').first();
55+
await compareScreenshot(page, rightSidebar, 'markdown-content-faq-anchor-menu-2.png');
56+
57+
await page.locator('.s-search__search-button').first().click();
58+
await expect(leftSidebar).toBeHidden();
59+
60+
await page.locator('div:nth-child(3) > .s-search__search-button').click();
61+
await expect(rightSidebar).toBeHidden();
62+
63+
await page.locator('.s-search__search-button').first().click();
64+
await expect(leftSidebar).toBeVisible();
65+
66+
await page.locator('div:nth-child(3) > .s-search__search-button').click();
67+
await expect(rightSidebar).toBeVisible();
68+
69+
const article = page.locator('.v2-class---faq-page__article-section').first();
70+
await compareScreenshot(page, article, 'markdown-content-faq-article.png');
71+
72+
const articleTitle = page.locator('.v2-class---header--level-2').first();
73+
await compareScreenshot(page, articleTitle, 'markdown-content-faq-article-title.png');
74+
75+
const tags = page.locator('.v2-class---markdown-content-page__tags').first();
76+
await compareScreenshot(page, tags, 'markdown-content-faq-tags.png');
77+
78+
const pointsList = page.locator('.v2-class---list-doc--unordered').first();
79+
await compareScreenshot(page, pointsList, 'markdown-content-faq-points-list.png');
80+
81+
const bottomNav = page.locator('.v2-class---faq-page__nav').first();
82+
await compareScreenshot(page, bottomNav, 'markdown-content-faq-bottom-nav.png');
83+
});
84+
85+
test('Documentation Overview', async ({ page }) => {
86+
await page.setViewportSize({ width: 1599, height: 768 });
87+
await page.goto(`${url}/documentation`);
88+
await acceptCookieBanner(page);
89+
90+
await expect(page.locator('.s-search')).toBeVisible();
91+
await expect(page.locator('.s-search__search-button').first()).toBeVisible();
92+
await expect(page.locator('div:nth-child(3) > .s-search__search-button')).toBeVisible();
93+
await expect(page.getByRole('textbox', { name: 'Search in documentation...' })).toBeVisible();
94+
95+
const leftSidebar = page.locator('.v2-class---sidebar').first();
96+
await compareScreenshot(page, leftSidebar, 'markdown-content-doc-vnav-1.png');
97+
98+
const rightSidebar = page.locator('.v2-class---anchor-menu').first();
99+
await compareScreenshot(page, rightSidebar, 'markdown-content-doc-anchor-menu-1.png');
100+
101+
const unorderedList = page.locator('.v2-class---list-doc--unordered').first();
102+
await compareScreenshot(page, unorderedList, 'markdown-content-doc-unordered-list.png');
103+
104+
await page.locator('.s-search__search-button').first().click();
105+
await expect(leftSidebar).toBeHidden();
106+
107+
await page.locator('div:nth-child(3) > .s-search__search-button').click();
108+
await expect(rightSidebar).toBeHidden();
109+
110+
await page.locator('.s-search__search-button').first().click();
111+
await expect(leftSidebar).toBeVisible();
112+
113+
await page.locator('div:nth-child(3) > .s-search__search-button').click();
114+
await expect(rightSidebar).toBeVisible();
115+
116+
const articleTitle = page.locator('.v2-class---header--level-1').first();
117+
await compareScreenshot(page, articleTitle, 'markdown-content-doc-article-title.png');
118+
119+
const articleParagraph = page.locator('.v2-class---paragraph').first();
120+
await compareScreenshot(page, articleParagraph, 'markdown-content-doc-article-paragraph.png');
121+
});
122+
123+
test('Stay Updated Overview', async ({ page }) => {
124+
await page.setViewportSize({ width: 1599, height: 768 });
125+
await page.goto(`${url}/stay-updated`);
126+
await acceptCookieBanner(page);
127+
128+
await expect(page.locator('.s-search')).toBeVisible();
129+
await expect(page.locator('.s-search__search-button').first()).toBeVisible();
130+
await expect(page.locator('div:nth-child(3) > .s-search__search-button')).toBeVisible();
131+
await expect(page.getByRole('textbox', { name: 'Search in blog & updates...' })).toBeVisible();
132+
133+
const leftSidebar = page.locator('.v2-class---sidebar').first();
134+
await compareScreenshot(page, leftSidebar, 'markdown-content-blog-vnav-1.png');
135+
136+
const rightSidebar = page.locator('.v2-class---anchor-menu').first();
137+
await compareScreenshot(page, rightSidebar, 'markdown-content-blog-anchor-menu-1.png');
138+
139+
// await page.locator('.s-search__search-button').first().click();
140+
// await expect(leftSidebar).toBeHidden();
141+
142+
// await page.locator('div:nth-child(3) > .s-search__search-button').click();
143+
// await expect(rightSidebar).toBeHidden();
144+
145+
// await page.locator('.s-search__search-button').first().click();
146+
// await expect(leftSidebar).toBeVisible();
147+
148+
// await page.locator('div:nth-child(3) > .s-search__search-button').click();
149+
// await expect(rightSidebar).toBeVisible();
150+
151+
const pinnedArticle = page.locator('.v2-class---markdown-content-page__pinned-article').first();
152+
await compareScreenshot(page, pinnedArticle, 'markdown-content-blog-pinned-article.png');
153+
154+
const articleItem = page.locator('.v2-class---markdown-content-page__articles-list-item').first();
155+
await compareScreenshot(page, articleItem, 'markdown-content-blog-article-item.png');
156+
});

‎site/markdown-content.spec.ts-snapshots/markdown-content-blog-anchor-menu-1-site-win32.png‎

33.9 KB
Loading

‎site/markdown-content.spec.ts-snapshots/markdown-content-blog-article-item-site-win32.png‎

31.2 KB
Loading

‎site/markdown-content.spec.ts-snapshots/markdown-content-blog-pinned-article-site-win32.png‎

27.4 KB
Loading

‎site/markdown-content.spec.ts-snapshots/markdown-content-blog-vnav-1-site-win32.png‎

23.2 KB
Loading

‎site/markdown-content.spec.ts-snapshots/markdown-content-doc-anchor-menu-1-site-win32.png‎

9.25 KB
Loading

‎site/markdown-content.spec.ts-snapshots/markdown-content-doc-article-paragraph-site-win32.png‎

13.9 KB
Loading

0 commit comments

Comments
 (0)