diff --git a/e2e/activity-page.spec.ts-snapshots/should-display-activity-page-1-Google-Chrome-linux.png b/e2e/activity-page.spec.ts-snapshots/should-display-activity-page-1-Google-Chrome-linux.png index b715848226..5a71f39cb6 100644 Binary files a/e2e/activity-page.spec.ts-snapshots/should-display-activity-page-1-Google-Chrome-linux.png and b/e2e/activity-page.spec.ts-snapshots/should-display-activity-page-1-Google-Chrome-linux.png differ diff --git a/e2e/homepage.spec.ts-snapshots/should-display-homepage-in-logged-in-state-1-Google-Chrome-linux.png b/e2e/homepage.spec.ts-snapshots/should-display-homepage-in-logged-in-state-1-Google-Chrome-linux.png index 25cbc07bbf..0103118a2a 100644 Binary files a/e2e/homepage.spec.ts-snapshots/should-display-homepage-in-logged-in-state-1-Google-Chrome-linux.png and b/e2e/homepage.spec.ts-snapshots/should-display-homepage-in-logged-in-state-1-Google-Chrome-linux.png differ diff --git a/e2e/receive-tokens-modal.spec.ts-snapshots/should-display-receive-tokens-modal-1-Google-Chrome-linux.png b/e2e/receive-tokens-modal.spec.ts-snapshots/should-display-receive-tokens-modal-1-Google-Chrome-linux.png index 10a5760122..c52d24dd05 100644 Binary files a/e2e/receive-tokens-modal.spec.ts-snapshots/should-display-receive-tokens-modal-1-Google-Chrome-linux.png and b/e2e/receive-tokens-modal.spec.ts-snapshots/should-display-receive-tokens-modal-1-Google-Chrome-linux.png differ diff --git a/e2e/transactions-page.spec.ts b/e2e/transactions-page.spec.ts index 7bd29714e1..4db3278cd9 100644 --- a/e2e/transactions-page.spec.ts +++ b/e2e/transactions-page.spec.ts @@ -11,7 +11,7 @@ testWithII('should display BTC transactions page', async ({ page, iiPage }) => { }); // TODO: resolve the below test flakiness -testWithII.skip('should display ETH transactions page', async ({ page, iiPage }) => { +testWithII('should display ETH transactions page', async ({ page, iiPage }) => { const transactionsPage = new TransactionsPage({ page, iiPage, tokenSymbol: 'ETH' }); await transactionsPage.waitForReady(); diff --git a/e2e/transactions-page.spec.ts-snapshots/should-display-ETH-transactions-page-1-Google-Chrome-linux.png b/e2e/transactions-page.spec.ts-snapshots/should-display-ETH-transactions-page-1-Google-Chrome-linux.png index a30594ec1e..76768e7522 100644 Binary files a/e2e/transactions-page.spec.ts-snapshots/should-display-ETH-transactions-page-1-Google-Chrome-linux.png and b/e2e/transactions-page.spec.ts-snapshots/should-display-ETH-transactions-page-1-Google-Chrome-linux.png differ diff --git a/e2e/utils/components/promotion-carousel.component.ts b/e2e/utils/components/promotion-carousel.component.ts new file mode 100644 index 0000000000..740f395847 --- /dev/null +++ b/e2e/utils/components/promotion-carousel.component.ts @@ -0,0 +1,33 @@ +import type { Page } from '@playwright/test'; + +export class PromotionCarousel { + #page: Page; + + constructor(page: Page) { + this.#page = page; + } + + public async navigateToSlide(slideNumber: number): Promise { + const navigation1Selector = `[data-tid="carousel-slide-navigation-${slideNumber}"]:visible`; + await this.#page.click(navigation1Selector); + } + + public async freezeCarousel(): Promise { + // Freeze the carousel by applying the first slide's transform style to all visible slides + await this.#page.$$eval(`div[data-tid="carousel-slide"]:visible`, (elements) => { + elements.forEach((el) => { + const slideStyle = el.style.transform; + el.style.transform = slideStyle; + }); + }); + // Freeze the carousel navigation indicators by fixing their current width and background color styles + await this.#page.$$eval(`[data-tid^="carousel-slide-navigation-"]:visible`, (elements) => { + elements.forEach((el) => { + const indicatorWidth = el.style.width; + const indicatorBackgroundColor = el.style.backgroundColor; + el.style.width = indicatorWidth; + el.style.backgroundColor = indicatorBackgroundColor; + }); + }); + } +} diff --git a/e2e/utils/pages/activity.page.ts b/e2e/utils/pages/activity.page.ts index 606d1a4477..c6f1966bbb 100644 --- a/e2e/utils/pages/activity.page.ts +++ b/e2e/utils/pages/activity.page.ts @@ -17,5 +17,6 @@ export class ActivityPage extends HomepageLoggedIn { // TODO: Implement this method clicking on the navigation item instead of using the URL, when the activity page is implemented override async extendWaitForReady(): Promise { await this.#page.goto(ACTIVITY_URL); + await this.waitForLoadState(); } } diff --git a/e2e/utils/pages/explorer.page.ts b/e2e/utils/pages/explorer.page.ts index c1e2605603..dfd86cba45 100644 --- a/e2e/utils/pages/explorer.page.ts +++ b/e2e/utils/pages/explorer.page.ts @@ -10,5 +10,6 @@ export class ExplorerPage extends HomepageLoggedIn { override async extendWaitForReady(): Promise { await this.clickByTestId(NAVIGATION_ITEM_EXPLORER); + await this.waitForLoadState(); } } diff --git a/e2e/utils/pages/homepage.page.ts b/e2e/utils/pages/homepage.page.ts index 19efe741cc..0448d23134 100644 --- a/e2e/utils/pages/homepage.page.ts +++ b/e2e/utils/pages/homepage.page.ts @@ -11,8 +11,9 @@ import { TOKEN_CARD } from '$lib/constants/test-ids.constants'; import { type InternetIdentityPage } from '@dfinity/internet-identity-playwright'; -import { nonNullish } from '@dfinity/utils'; +import { isNullish, nonNullish } from '@dfinity/utils'; import { expect, type Locator, type Page, type ViewportSize } from '@playwright/test'; +import { PromotionCarousel } from '../components/promotion-carousel.component'; import { HOMEPAGE_URL, LOCAL_REPLICA_URL } from '../constants/e2e.constants'; import { getQRCodeValueFromDataURL } from '../qr-code.utils'; import { getReceiveTokensModalQrCodeButtonSelector } from '../selectors.utils'; @@ -55,6 +56,7 @@ interface WaitForLocatorOptions { abstract class Homepage { readonly #page: Page; readonly #viewportSize?: ViewportSize; + private promotionCarousel?: PromotionCarousel; protected constructor({ page, viewportSize }: HomepageParams) { this.#page = page; @@ -201,6 +203,19 @@ abstract class Homepage { await expect(modal).toHaveScreenshot(); } + async setCarouselFirstSlide(): Promise { + if (isNullish(this.promotionCarousel)) { + this.promotionCarousel = new PromotionCarousel(this.#page); + } + + await this.promotionCarousel.navigateToSlide(1); + await this.promotionCarousel.freezeCarousel(); + } + + async waitForLoadState() { + await this.#page.waitForLoadState('networkidle'); + } + abstract extendWaitForReady(): Promise; abstract waitForReady(): Promise; @@ -218,6 +233,7 @@ export class HomepageLoggedOut extends Homepage { */ async waitForReady(): Promise { await this.waitForHomepageReady(); + await this.waitForLoadState(); } } @@ -299,6 +315,10 @@ export class HomepageLoggedIn extends Homepage { await this.waitForTokensInitialization(); + await this.waitForLoadState(); + + await this.setCarouselFirstSlide(); + await this.extendWaitForReady(); } } diff --git a/e2e/utils/pages/settings.page.ts b/e2e/utils/pages/settings.page.ts index 35b088c9c6..6c05f47f92 100644 --- a/e2e/utils/pages/settings.page.ts +++ b/e2e/utils/pages/settings.page.ts @@ -15,5 +15,7 @@ export class SettingsPage extends HomepageLoggedIn { await this.clickByTestId(NAVIGATION_ITEM_SETTINGS); await this.mockSelector({ selector: `[data-tid="${SETTINGS_ADDRESS_LABEL}"]` }); + + await this.waitForLoadState(); } } diff --git a/e2e/utils/pages/transactions.page.ts b/e2e/utils/pages/transactions.page.ts index bd7e609f13..93038718b9 100644 --- a/e2e/utils/pages/transactions.page.ts +++ b/e2e/utils/pages/transactions.page.ts @@ -16,5 +16,6 @@ export class TransactionsPage extends HomepageLoggedIn { override async extendWaitForReady(): Promise { await this.clickByTestId(`${TOKEN_CARD}-${this.#tokenSymbol}`); + await this.waitForLoadState(); } } diff --git a/src/frontend/src/lib/components/carousel/Carousel.svelte b/src/frontend/src/lib/components/carousel/Carousel.svelte index 481427e241..91bafbc36b 100644 --- a/src/frontend/src/lib/components/carousel/Carousel.svelte +++ b/src/frontend/src/lib/components/carousel/Carousel.svelte @@ -3,6 +3,7 @@ import { onMount } from 'svelte'; import Controls from '$lib/components/carousel/Controls.svelte'; import Indicators from '$lib/components/carousel/Indicators.svelte'; + import { CAROUSEL_CONTAINER } from '$lib/constants/test-ids.constants'; import { moveSlider, extendCarouselSliderFrame } from '$lib/utils/carousel.utils'; export let autoplay = 5000; @@ -245,10 +246,11 @@
-
+
diff --git a/src/frontend/src/lib/components/carousel/Indicator.svelte b/src/frontend/src/lib/components/carousel/Indicator.svelte index 85794800c0..a22398b9bd 100644 --- a/src/frontend/src/lib/components/carousel/Indicator.svelte +++ b/src/frontend/src/lib/components/carousel/Indicator.svelte @@ -1,4 +1,5 @@