fix(e2e): added conditial device usage

.github/workflows/e2e-tests.yml

@@ -49,6 +49,8 @@ jobs:
     strategy:
       matrix:
         os: [ubuntu-24.04, macos-14]
+    env:
+      MATRIX_OS: ${{ matrix.os }}
     if: ${{ needs.check-e2e-changes.outputs.e2e-or-config-changed == 'true' }}
     needs: oisy-backend-wasm
     steps:

.github/workflows/update-snapshots.yml

@@ -42,6 +42,8 @@ jobs:
     strategy:
       matrix:
         os: [ubuntu-24.04, macos-14]
+    env:
+      MATRIX_OS: ${{ matrix.os }}
     if: ${{ github.event_name != 'pull_request' || contains(github.event.pull_request.labels.*.name, 'run-e2e-snapshots') }}
 
     steps:

e2e/transactions-page.spec.ts

@@ -10,7 +10,7 @@ testWithII('should display BTC transactions page', async ({ page, iiPage }) => {
 });
 
 // TODO: resolve the below test flakiness
-testWithII('should display ETH transactions page', async ({ page, iiPage }) => {
+testWithII.skip('should display ETH transactions page', async ({ page, iiPage }) => {
 	const transactionsPage = new TransactionsPage({ page, iiPage, tokenSymbol: 'ETH' });
 
 	await transactionsPage.waitForReady();

e2e/utils/pages/homepage.page.ts

@@ -3,8 +3,8 @@ import {
 	LOADER_MODAL,
 	LOGIN_BUTTON,
 	LOGOUT_BUTTON,
+	NAVIGATION_ITEM_HOMEPAGE,
 	NAVIGATION_ITEM_SETTINGS,
-	NAVIGATION_ITEM_TOKENS,
 	NAVIGATION_MENU,
 	NAVIGATION_MENU_BUTTON,
 	RECEIVE_TOKENS_MODAL,
@@ -228,19 +228,17 @@ abstract class Homepage {
 		if (await this.isVisibleByTestId(testId)) {
 			await this.clickByTestId(testId);
 		} else {
-			if (await this.isVisibleByTestId(NAVIGATION_MENU_BUTTON)) {
-				await this.clickByTestId(NAVIGATION_MENU_BUTTON);
-			}
-			if (await this.isVisibleByTestId(testId)) {
-				await this.clickByTestId(testId);
-			}
+			const navigationMenuButton = this.#page.getByTestId(NAVIGATION_MENU_BUTTON);
+			await navigationMenuButton.click();
+			const navigationMenu = this.#page.getByTestId(NAVIGATION_MENU);
+			await navigationMenu.getByTestId(testId).click();
 		}
 	}
 
 	async activateTestnetSettings(): Promise<void> {
 		await this.navigateTo(NAVIGATION_ITEM_SETTINGS);
 		await this.clickByTestId(BTC_TESTNET_TOGGLE);
-		await this.clickByTestId(NAVIGATION_ITEM_TOKENS);
+		await this.clickByTestId(NAVIGATION_ITEM_HOMEPAGE);
 	}
 
 	async takeScreenshot(): Promise<void> {

playwright.config.ts

@@ -17,6 +17,35 @@ dotenv.populate(
 
 const DEV = (process.env.NODE_ENV ?? 'production') === 'development';
 
+const MATRIX_OS = process.env.MATRIX_OS ?? '';
+const isMac = MATRIX_OS.includes('macos') ?? process.platform === 'darwin';
+
+const appleProjects = [
+	{
+		name: 'Safari',
+		use: devices['Desktop Safari']
+	},
+	{
+		name: 'iPhone SE',
+		use: devices['iPhone SE']
+	}
+];
+
+const nonAppleProjects = [
+	{
+		name: 'Google Chrome',
+		use: devices['Desktop Chrome']
+	},
+	{
+		name: 'Firefox',
+		use: devices['Desktop Firefox']
+	},
+	{
+		name: 'Pixel 5',
+		use: devices['Pixel 5']
+	}
+];
+
 const TIMEOUT = 5 * 60 * 1000;
 
 export default defineConfig({
@@ -45,11 +74,5 @@ export default defineConfig({
 		navigationTimeout: TIMEOUT,
 		...(DEV && { headless: false })
 	},
-	projects: [
-		/* Test against desktop browsers. */
-		{
-			name: 'Google Chrome',
-			use: { ...devices['Desktop Chrome'] }
-		}
-	]
+	projects: isMac ? appleProjects : nonAppleProjects
 });

src/frontend/src/lib/components/core/OisyWalletLogoLink.svelte

@@ -1,11 +1,13 @@
 <script lang="ts">
 	import OisyWalletLogo from '$lib/components/icons/OisyWalletLogo.svelte';
+	import { NAVIGATION_ITEM_HOMEPAGE } from '$lib/constants/test-ids.constants';
 	import { i18n } from '$lib/stores/i18n.store';
 	import { replaceOisyPlaceholders } from '$lib/utils/i18n.utils';
 </script>
 
 <a
 	href="/"
+	data-tid={NAVIGATION_ITEM_HOMEPAGE}
 	class="flex w-fit items-center gap-0 no-underline"
 	aria-label={replaceOisyPlaceholders($i18n.core.alt.go_to_home)}
 >

src/frontend/src/lib/constants/test-ids.constants.ts

@@ -46,6 +46,7 @@ export const NAVIGATION_ITEM_TOKENS = 'navigation-item-tokens';
 export const NAVIGATION_ITEM_ACTIVITY = 'navigation-item-activity';
 export const NAVIGATION_ITEM_EXPLORER = 'navigation-item-explore';
 export const NAVIGATION_ITEM_SETTINGS = 'navigation-item-settings';
+export const NAVIGATION_ITEM_HOMEPAGE = 'navigation-item-homepage';
 
 export const BTC_TESTNET_TOGGLE = 'btc-testnet-toggle';