test(frontend): homepage basic snapshots (logged in and logged out)

.gitignore

@@ -40,5 +40,3 @@ backend-v*.wasm.gz
 /blob-report/
 /playwright/.cache/
 pocket-ic
-
-e2e/*-snapshots/*Chrome-darwin.png

e2e/homepage.spec.ts

@@ -1,11 +1,45 @@
-import { expect, test } from '@playwright/test';
+import { testWithII } from '@dfinity/internet-identity-playwright';
+import { expect, test, type Page } from '@playwright/test';
 
 const testUrl = '/';
 
-test('should display not logged in homepage', async ({ page }) => {
-	await page.goto(testUrl);
+const hideHeroAnimation = async (page: Page): Promise<void> => {
+	await page
+		.getByTestId('three-background-canvas')
+		.evaluate((element) => (element.style.display = 'none'));
+};
 
-	await page.getByTestId('login-button').waitFor();
+test.describe('logged out user', () => {
+	test.beforeEach(async ({ page }) => {
+		await page.goto(testUrl);
 
-	await expect(page).toHaveScreenshot();
+		await page.getByTestId('login-button').waitFor();
+	});
+
+	test('should display logged out hero and blurred tokens', async ({ page }) => {
+		await hideHeroAnimation(page);
+
+		await expect(page).toHaveScreenshot({
+			fullPage: true
+		});
+	});
+});
+
+testWithII.describe('logged in user', () => {
+	testWithII.beforeEach(async ({ page, iiPage }) => {
+		await page.goto(testUrl);
+
+		await iiPage.signInWithNewIdentity();
+
+		await page.getByTestId('exchange-balance-output').waitFor();
+		await page.getByTestId('tokens-skeletons-initialized').waitFor();
+	});
+
+	testWithII('should display logged in hero and tokens', async ({ page }) => {
+		await hideHeroAnimation(page);
+
+		await expect(page).toHaveScreenshot({
+			fullPage: true
+		});
+	});
 });

src/frontend/src/lib/components/exchange/ExchangeBalance.svelte

@@ -13,6 +13,7 @@
 <span class="text-off-white block">
 	<output
 		class={`break-all text-5xl font-bold ${totalUsd === 0 ? 'opacity-50' : 'opacity-100'} inline-block mt-8`}
+		data-tid="exchange-balance-output"
 	>
 		{#if $exchangeInitialized}
 			{formatUSD(totalUsd)}

src/frontend/src/lib/components/tokens/TokensSkeletons.svelte

@@ -7,7 +7,7 @@
 {#if $erc20UserTokensNotInitialized}
 	<SkeletonCards rows={5} />
 {:else}
-	<div in:fade>
+	<div in:fade data-tid="tokens-skeletons-initialized">
 		<slot />
 	</div>
 {/if}

src/frontend/src/lib/components/ui/ThreeBackground.svelte

@@ -114,6 +114,7 @@ void main(){
 		renderer = new WebGLRenderer();
 		renderer.domElement.style.width = '100%';
 		renderer.domElement.style.height = '100%';
+		renderer.domElement.setAttribute('data-tid', 'three-background-canvas');
 		container.appendChild(renderer.domElement);
 
 		material = new ShaderMaterial({