Screenshot tests for Special Error Page

Author: mgurgel

special-pages/pages/special-error/integration-tests/special-error-screenshots.spec.js

@@ -0,0 +1,132 @@
+/* global process */
+import { expect, test } from '@playwright/test';
+import { SpecialErrorPage } from './special-error';
+
+const maxDiffPixels = 20;
+
+test.describe('screenshots @screenshots', () => {
+    test.skip(process.env.CI === 'true');
+
+    test('SSL expired cert error', async ({ page }, workerInfo) => {
+        const special = SpecialErrorPage.create(page, workerInfo);
+        await special.openPage({ errorId: 'ssl.expired' });
+        await expect(page).toHaveScreenshot('ssl-expired-cert.png', { maxDiffPixels });
+    });
+
+    test('SSL expired cert error with advanced info', async ({ page }, workerInfo) => {
+        const special = SpecialErrorPage.create(page, workerInfo);
+        await special.openPage({ errorId: 'ssl.expired' });
+        await special.showsAdvancedInfo();
+        await expect(page).toHaveScreenshot('ssl-expired-cert-advanced.png', { maxDiffPixels });
+    });
+
+    test('SSL expired cert error in Polish', async ({ page }, workerInfo) => {
+        const special = SpecialErrorPage.create(page, workerInfo);
+        await special.openPage({ errorId: 'ssl.expired', locale: 'pl' });
+        await expect(page).toHaveScreenshot('ssl-expired-cert-pl.png', { maxDiffPixels });
+    });
+
+    test('SSL expired cert error with reduced motion', async ({ page }, workerInfo) => {
+        const special = SpecialErrorPage.create(page, workerInfo);
+        await special.reducedMotion();
+        await special.openPage({ errorId: 'ssl.expired' });
+        await special.showsAdvancedInfo();
+        await expect(page).toHaveScreenshot('ssl-expired-cert-reduced-motion.png', { maxDiffPixels });
+    });
+
+    test('SSL invalid cert error', async ({ page }, workerInfo) => {
+        const special = SpecialErrorPage.create(page, workerInfo);
+        await special.openPage({ errorId: 'ssl.invalid' });
+        await expect(page).toHaveScreenshot('ssl-invalid-cert.png', { maxDiffPixels });
+    });
+
+    test('SSL invalid cert error in Dutch', async ({ page }, workerInfo) => {
+        const special = SpecialErrorPage.create(page, workerInfo);
+        await special.openPage({ errorId: 'ssl.invalid', locale: 'nl' });
+        await expect(page).toHaveScreenshot('ssl-invalid-cert-nl.png', { maxDiffPixels });
+    });
+
+    test('SSL self signed cert error', async ({ page }, workerInfo) => {
+        const special = SpecialErrorPage.create(page, workerInfo);
+        await special.openPage({ errorId: 'ssl.selfSigned' });
+        await expect(page).toHaveScreenshot('ssl-self-signed-cert.png', { maxDiffPixels });
+    });
+
+    test('SSL self signed cert error in Spanish', async ({ page }, workerInfo) => {
+        const special = SpecialErrorPage.create(page, workerInfo);
+        await special.openPage({ errorId: 'ssl.selfSigned', locale: 'es' });
+        await expect(page).toHaveScreenshot('ssl-self-signed-cert-es.png', { maxDiffPixels });
+    });
+
+    test('SSL wrong host error', async ({ page }, workerInfo) => {
+        const special = SpecialErrorPage.create(page, workerInfo);
+        await special.openPage({ errorId: 'ssl.wrongHost' });
+        await expect(page).toHaveScreenshot('ssl-wrong-host.png', { maxDiffPixels });
+    });
+
+    test('SSL wrong host error in Romanian', async ({ page }, workerInfo) => {
+        const special = SpecialErrorPage.create(page, workerInfo);
+        await special.openPage({ errorId: 'ssl.wrongHost', locale: 'ro' });
+        await expect(page).toHaveScreenshot('ssl-wrong-host-ro.png', { maxDiffPixels });
+    });
+
+    test('Phishing warning', async ({ page }, workerInfo) => {
+        const special = SpecialErrorPage.create(page, workerInfo);
+        await special.openPage({ errorId: 'phishing' });
+        await expect(page).toHaveScreenshot('phishing-warning.png', { maxDiffPixels });
+    });
+
+    test('Phishing warning with advanced info', async ({ page }, workerInfo) => {
+        const special = SpecialErrorPage.create(page, workerInfo);
+        await special.openPage({ errorId: 'phishing' });
+        await special.showsAdvancedInfo();
+        await expect(page).toHaveScreenshot('phishing-warning-advanced.png', { maxDiffPixels });
+    });
+
+    test('Phishing warning with reduced motion', async ({ page }, workerInfo) => {
+        const special = SpecialErrorPage.create(page, workerInfo);
+        await special.reducedMotion();
+        await special.openPage({ errorId: 'phishing' });
+        await special.showsAdvancedInfo();
+        await expect(page).toHaveScreenshot('phishing-warning-advanced.png', { maxDiffPixels });
+    });
+
+    test('Phishing warning in Portuguese', async ({ page }, workerInfo) => {
+        const special = SpecialErrorPage.create(page, workerInfo);
+        await special.openPage({ errorId: 'phishing', locale: 'pt' });
+        await expect(page).toHaveScreenshot('phishing-warning-pt.png', { maxDiffPixels });
+    });
+
+    test('Phishing warning with advanced info in Bulgarian', async ({ page }, workerInfo) => {
+        const special = SpecialErrorPage.create(page, workerInfo);
+        await special.openPage({ errorId: 'phishing', locale: 'bg' });
+        await special.showsAdvancedInfo('Разширени');
+        await expect(page).toHaveScreenshot('phishing-warning-advanced-bg.png', { maxDiffPixels });
+    });
+
+    test('Malware warning', async ({ page }, workerInfo) => {
+        const special = SpecialErrorPage.create(page, workerInfo);
+        await special.openPage({ errorId: 'malware' });
+        await expect(page).toHaveScreenshot('malware-warning.png', { maxDiffPixels });
+    });
+
+    test('Malware warning with advanced info', async ({ page }, workerInfo) => {
+        const special = SpecialErrorPage.create(page, workerInfo);
+        await special.openPage({ errorId: 'malware' });
+        await special.showsAdvancedInfo();
+        await expect(page).toHaveScreenshot('malware-warning-advanced.png', { maxDiffPixels });
+    });
+
+    test('Malware warning in Russian', async ({ page }, workerInfo) => {
+        const special = SpecialErrorPage.create(page, workerInfo);
+        await special.openPage({ errorId: 'malware', locale: 'ru' });
+        await expect(page).toHaveScreenshot('malware-warning-ru.png', { maxDiffPixels });
+    });
+
+    test('Malware warning with advanced info in German', async ({ page }, workerInfo) => {
+        const special = SpecialErrorPage.create(page, workerInfo);
+        await special.openPage({ errorId: 'malware', locale: 'de' });
+        await special.showsAdvancedInfo('Erweitert');
+        await expect(page).toHaveScreenshot('malware-warning-advanced-de.png', { maxDiffPixels });
+    });
+});

special-pages/pages/special-error/integration-tests/special-error-screenshots.spec.js-snapshots/malware-warning-advanced-de-ios-darwin.png

@@ -94,6 +94,7 @@ export class SpecialErrorPage {
      */
     get basePath() {
         return this.build.switch({
+            windows: () => '../build/windows/pages/special-error',
             apple: () => '../Sources/ContentScopeScripts/dist/pages/special-error',
         });
     }
@@ -151,8 +152,7 @@ export class SpecialErrorPage {
     async showsExpiredPage() {
         const { page } = this;
 
-        const title = await page.locator('title').textContent();
-        expect(title).toBe('Warning: This site may be insecure');
+        this.showsPageTitle('Warning: This site may be insecure');
 
         await expect(page.getByText('Warning: This site may be insecure', { exact: true })).toBeVisible();
         await expect(
@@ -161,6 +161,7 @@ export class SpecialErrorPage {
                 { exact: true },
             ),
         ).toBeVisible();
+
         await this.showsAdvancedInfo();
         await expect(page.getByText('DuckDuckGo warns you when a website has an invalid certificate.', { exact: true })).toBeVisible();
         await expect(
@@ -171,6 +172,17 @@ export class SpecialErrorPage {
         ).toBeVisible();
     }
 
+    /**
+     *
+     * @param {string} pageTitle
+     */
+    async showsPageTitle(pageTitle) {
+        const { page } = this;
+
+        const title = await page.locator('title').textContent();
+        expect(title).toBe(pageTitle);
+    }
+
     async showsExpiredPageInPolish() {
         const { page } = this;
         await expect(page.getByRole('heading')).toContainText('Ostrzeżenie: ta witryna może być niebezpieczna');
@@ -179,8 +191,7 @@ export class SpecialErrorPage {
     async showsInvalidPage() {
         const { page } = this;
 
-        const title = await page.locator('title').textContent();
-        expect(title).toBe('Warning: This site may be insecure');
+        this.showsPageTitle('Warning: This site may be insecure');
 
         await expect(page.getByText('Warning: This site may be insecure', { exact: true })).toBeVisible();
         await expect(
@@ -202,8 +213,7 @@ export class SpecialErrorPage {
     async showsSelfSignedPage() {
         const { page } = this;
 
-        const title = await page.locator('title').textContent();
-        expect(title).toBe('Warning: This site may be insecure');
+        this.showsPageTitle('Warning: This site may be insecure');
 
         await expect(page.getByText('Warning: This site may be insecure', { exact: true })).toBeVisible();
         await expect(
@@ -225,8 +235,7 @@ export class SpecialErrorPage {
     async showsWrongHostPage() {
         const { page } = this;
 
-        const title = await page.locator('title').textContent();
-        expect(title).toBe('Warning: This site may be insecure');
+        this.showsPageTitle('Warning: This site may be insecure');
 
         await expect(page.getByText('Warning: This site may be insecure', { exact: true })).toBeVisible();
         await expect(
@@ -291,10 +300,13 @@ export class SpecialErrorPage {
 
     /**
      * Clicks on advanced link to show expanded info
+     *
+     * @param {string} [buttonTitle] Localized title of Advanced button
      */
-    async showsAdvancedInfo() {
+    async showsAdvancedInfo(buttonTitle = 'Advanced') {
         const { page } = this;
-        await page.getByRole('button', { name: 'Advanced...' }).click();
+        await page.getByRole('button', { name: buttonTitle }).click();
+
         const calls = await this.mocks.waitForCallCount({ method: 'advancedInfo', count: 1 });
         expect(calls).toMatchObject([
             {

special-pages/pages/special-error/integration-tests/special-error-screenshots.spec.js-snapshots/malware-warning-advanced-de-macos-darwin.png

@@ -5,7 +5,13 @@ export default defineConfig({
     projects: [
         {
             name: 'windows',
-            testMatch: ['duckplayer.spec.js', 'duckplayer-screenshots.spec.js', 'onboarding.spec.js'],
+            testMatch: [
+                'duckplayer.spec.js',
+                'duckplayer-screenshots.spec.js',
+                'onboarding.spec.js',
+                'special-error.spec.js',
+                'special-error-screenshots.spec.js',
+            ],
             use: {
                 ...devices['Desktop Edge'],
                 injectName: 'windows',
@@ -40,9 +46,9 @@ export default defineConfig({
                 'duckplayer.spec.js',
                 'duckplayer-screenshots.spec.js',
                 'onboarding.spec.js',
-                'sslerror.spec.js',
                 'release-notes.spec.js',
                 'special-error.spec.js',
+                'special-error-screenshots.spec.js',
             ],
             use: {
                 ...devices['Desktop Safari'],
@@ -70,7 +76,12 @@ export default defineConfig({
         },
         {
             name: 'ios',
-            testMatch: ['duckplayer.spec.js', 'duckplayer-screenshots.spec.js'],
+            testMatch: [
+                'duckplayer.spec.js',
+                'duckplayer-screenshots.spec.js',
+                'special-error.spec.js',
+                'special-error-screenshots.spec.js',
+            ],
             use: {
                 ...devices['iPhone 14'],
                 injectName: 'apple',