Feat/suite core/e2e/convert unsupported browsers (#16171)

* feat(e2e): Convert to pw browser tests

Unfortunatelly, PW does not support Firefox + Mobile combination
It is also not recommended to run automation on outdated browsers

* fix(e2e): Fix the web visual regresion checks and add it for browser tests

* fix(e2e): add missing browser install on CI

adds also firefox desktop test

* refactor(e2e): switch ios to more stable Aria snapshot verification

also mask larger element for asset visual regression verification

* fix(e2e): Change Safari tests to use Aria comparison too

.github/workflows/test-suite-web-e2e-pw.yml

@@ -139,7 +139,7 @@ jobs:
           echo -e "\nenableScripts: false" >> .yarnrc.yml
           echo -e "\nenableHardenedMode: false" >> .yarnrc.yml
           yarn workspaces focus @trezor/suite-desktop-core
-          npx playwright install --with-deps chromium
+          npx playwright install --with-deps
           docker compose pull ${{ matrix.CONTAINERS }}
 
       - name: Run Playwright e2e web tests

packages/suite-desktop-core/e2e/tests/browser/firefox.test.ts

@@ -0,0 +1,9 @@
+import { test, expect } from '../../support/fixtures';
+
+test.use({ startEmulator: false, browserName: 'firefox' });
+test.describe('Firefox', { tag: ['@group=other', '@webOnly'] }, () => {
+    test('Suite does support Firefox', async ({ page }) => {
+        await expect(page.getByTestId('@welcome/title')).toBeVisible();
+        await expect(page.getByText('Continue at my own risk')).not.toBeVisible();
+    });
+});

packages/suite-desktop-core/e2e/tests/browser/ios.test.ts

@@ -0,0 +1,23 @@
+import { devices } from '@playwright/test';
+
+import { test, expect } from '../../support/fixtures';
+
+const iosAria = `
+    - heading "Suite doesn’t work on iOS yet" [level=1]
+    - paragraph: "We’re working hard to bring the Trezor Suite mobile web app to iOS. In the meantime, you can use Trezor Suite on the following platforms:"
+    - list:
+      - listitem: Trezor Suite desktop app
+      - listitem: Trezor Suite for web
+      - listitem: Mobile web app for Chrome on Android
+`;
+
+test.use({ startEmulator: false, browserName: 'chromium', ...devices['iPhone 15 Pro'] });
+test.describe('iPhone with Chrome browser', { tag: ['@group=other', '@webOnly'] }, () => {
+    test('Suite does not support iOS', async ({ page }) => {
+        await expect(
+            page.getByRole('heading', { name: 'Suite doesn’t work on iOS yet' }),
+        ).toBeVisible();
+        await expect(page.locator('body')).toMatchAriaSnapshot(iosAria);
+        await expect(page.getByText('Continue at my own risk')).not.toBeVisible();
+    });
+});

packages/suite-desktop-core/e2e/tests/browser/safari.test.ts

@@ -0,0 +1,24 @@
+import { test, expect } from '../../support/fixtures';
+
+const safariAria = `
+    - heading "Your browser is not supported" [level=1]
+    - paragraph: We recommend using the Trezor Suite desktop app for the best experience. Alternatively, download a supported browser to use the Trezor Suite web app.
+    - link "Desktop App Download":
+      - img
+      - paragraph: Desktop App
+    - link /Chrome \\d+\\+ Download/:
+      - img
+      - paragraph: /Chrome \\d+\\+/
+    - paragraph: Using outdated or unsupported browsers can expose you to security risks. To keep your funds safe, we recommend using the latest version of a supported browser.
+    - paragraph: Continue at my own risk
+`;
+
+test.use({ startEmulator: false, browserName: 'webkit' });
+test.describe('Safari', { tag: ['@group=other', '@webOnly'] }, () => {
+    test('Suite does not support Safari', async ({ page }) => {
+        await expect(page.locator('body')).toMatchAriaSnapshot(safariAria);
+        await expect(page.getByTestId('@continue-to-suite')).toHaveText('Continue at my own risk');
+        await page.getByTestId('@continue-to-suite').click();
+        await expect(page.getByTestId('@welcome/title')).toBeVisible();
+    });
+});

packages/suite-desktop-core/e2e/tests/coin-market/buy-coins.test.ts

@@ -29,15 +29,17 @@ test.describe('Coin market buy', { tag: ['@group=other'] }, () => {
 
         await test.step('Confirm trade and verifies confirmation summary', async () => {
             await marketPage.confirmTrade();
-            await expect(marketPage.tradeConfirmation).toHaveScreenshot(
-                'compared-offers-buy-confirmation.png',
-                {
-                    mask: [
-                        marketPage.tradeConfirmationCryptoAmount,
-                        marketPage.tradeConfirmationProvider,
-                    ],
-                },
-            );
+            //TODO: #16073 The field changes size based on how long the number is
+            // Add and use locator that encompasses the whole field, then uncomment
+            // await expect(marketPage.tradeConfirmation).toHaveScreenshot(
+            //     'compared-offers-buy-confirmation.png',
+            //     {
+            //         mask: [
+            //             marketPage.tradeConfirmationCryptoAmount,
+            //             marketPage.tradeConfirmationProvider,
+            //         ],
+            //     },
+            // );
             // TOOD: #16041 Once solved, Assert mocked price
             await expect(marketPage.tradeConfirmationCryptoAmount).toHaveText(regexpBtcValue);
             await expect(marketPage.tradeConfirmationContinueButton).toBeEnabled();
@@ -50,15 +52,17 @@ test.describe('Coin market buy', { tag: ['@group=other'] }, () => {
         const { amount, provider } = await marketPage.readBestOfferValues();
         await marketPage.buyBestOfferButton.click();
         await marketPage.confirmTrade();
-        await expect(marketPage.tradeConfirmation).toHaveScreenshot(
-            'best-offer-buy-confirmation.png',
-            {
-                mask: [
-                    marketPage.tradeConfirmationCryptoAmount,
-                    marketPage.tradeConfirmationProvider,
-                ],
-            },
-        );
+        //TODO: #16073 The field changes size based on how long the number is
+        // Add and use locator that encompasses the whole field, then uncomment
+        // await expect(marketPage.tradeConfirmation).toHaveScreenshot(
+        //     'best-offer-buy-confirmation.png',
+        //     {
+        //         mask: [
+        //             marketPage.tradeConfirmationCryptoAmount,
+        //             marketPage.tradeConfirmationProvider,
+        //         ],
+        //     },
+        // );
         await expect(marketPage.tradeConfirmationCryptoAmount).toHaveText(amount);
         await expect(marketPage.tradeConfirmationProvider).toHaveText(provider);
         await expect(marketPage.tradeConfirmationContinueButton).toBeEnabled();