Skip to content

Commit

Permalink
test(lld/onboardingAppInstall): screenshot of div rather than whole page
Browse files Browse the repository at this point in the history
  • Loading branch information
@ofreyssinet-ledger
ofreyssinet-ledger committed Aug 7, 2024
1 parent f0d959c commit ff32128
Show file tree
Hide file tree
Showing 3 changed files with 16 additions and 14 deletions.
2 changes: 1 addition & 1 deletion ...ve-desktop/src/renderer/screens/settings/sections/Developer/OnboardingAppInstallDebug.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -136,7 +136,7 @@ const OnboardingAppInstallDebugScreen = () => {
/>
</Flex>
)}
<Flex py={12} flex={1}>
<Flex py={12} flex={1} data-testid="install-set-of-apps-container">
<VerticalTimeline key={componentKey} flex={1} steps={steps} />
</Flex>
</Flex>
Expand Down
1 change: 1 addition & 0 deletions apps/ledger-live-desktop/tests/page/install.page.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ export class InstallSetOfApps extends AppPage {
private installCtaButton = this.page.getByTestId("install-cta-button");
private cancelCtaButton = this.page.getByTestId("skip-cta-button");
private inputOptionSelector = this.page.getByTestId("input-option-selector");
container = this.page.getByTestId("install-set-of-apps-container");

private circleProgressSelector = (circleProgress: string) =>
this.page.locator(`circle[style="stroke-dashoffset: ${circleProgress};"]`);
Expand Down
27 changes: 14 additions & 13 deletions apps/ledger-live-desktop/tests/specs/syncOnboarding/install-set-of-apps.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ test("Install set of apps", async ({ page }) => {
const layout = new Layout(page);
const deviceAction = new DeviceAction(page);
const installSetOfAppsPage = new InstallSetOfApps(page);
const container = installSetOfAppsPage.container;

await test.step("go to debug install set of apps drawer", async () => {
await layout.goToSettings();
Expand All @@ -25,69 +26,69 @@ test("Install set of apps", async ({ page }) => {
await installSetOfAppsPage.waitForLaunch();
await installSetOfAppsPage.accessDebugInstallSetOfApps();
await installSetOfAppsPage.waitForDrawerIsOpen();
await expect(page).toHaveScreenshot("debug-install-set-of-apps-drawer.png");
await expect(container).toHaveScreenshot("debug-install-set-of-apps-drawer.png");

Check failure on line 29 in apps/ledger-live-desktop/tests/specs/syncOnboarding/install-set-of-apps.spec.ts

View workflow job for this annotation

GitHub Actions / Desktop Tests E2E (Ubuntu)

[mocked_tests] › specs/syncOnboarding/install-set-of-apps.spec.ts:15:5 › Install set of apps 

  1) [mocked_tests] › specs/syncOnboarding/install-set-of-apps.spec.ts:15:5 › Install set of apps › go to debug install set of apps drawer 
    Error: Screenshot comparison failed:

      Expected an image 1024px by 768px, received 560px by 571px. 463246 pixels (ratio 0.59 of all image pixels) are different.

    Expected: /home/runner/_work/ledger-live/ledger-live/apps/ledger-live-desktop/tests/specs/syncOnboarding/install-set-of-apps.spec.ts-snapshots/debug-install-set-of-apps-drawer-linux.png
    Received: /home/runner/_work/ledger-live/ledger-live/apps/ledger-live-desktop/tests/artifacts/test-results/syncOnboarding-install-set-of-apps-Install-set-of-apps-mocked-tests/debug-install-set-of-apps-drawer-actual.png
        Diff: /home/runner/_work/ledger-live/ledger-live/apps/ledger-live-desktop/tests/artifacts/test-results/syncOnboarding-install-set-of-apps-Install-set-of-apps-mocked-tests/debug-install-set-of-apps-drawer-diff.png

    Call log:
      - expect.toHaveScreenshot(debug-install-set-of-apps-drawer.png) with timeout 41000ms
      -   verifying given screenshot expectation
      - waiting for getByTestId('install-set-of-apps-container')
      -   locator resolved to <div display="flex" class="sc-iGgWBj sc-gsFSXq haXfzt" data-testid="install-set-of-apps-container">…</div>
      - taking element screenshot
      -   disabled all CSS animations
      - waiting for fonts to load...
      - fonts loaded
      - attempting scroll into view action
      -   waiting for element to be stable
      - Expected an image 1024px by 768px, received 560px by 571px. 463246 pixels (ratio 0.59 of all image pixels) are different.
      - waiting 100ms before taking screenshot
      - waiting for getByTestId('install-set-of-apps-container')
      -   locator resolved to <div display="flex" class="sc-iGgWBj sc-gsFSXq haXfzt" data-testid="install-set-of-apps-container">…</div>
      - taking element screenshot
      -   disabled all CSS animations
      - waiting for fonts to load...
      - fonts loaded
      - attempting scroll into view action
      -   waiting for element to be stable
      - captured a stable screenshot
      - Expected an image 1024px by 768px, received 560px by 571px. 463246 pixels (ratio 0.59 of all image pixels) are different.


      27 |     await installSetOfAppsPage.accessDebugInstallSetOfApps();
      28 |     await installSetOfAppsPage.waitForDrawerIsOpen();
    > 29 |     await expect(container).toHaveScreenshot("debug-install-set-of-apps-drawer.png");
         |                             ^
      30 |   });
      31 |
      32 |   await test.step("use default apps", async () => {

        at /home/runner/_work/ledger-live/ledger-live/apps/ledger-live-desktop/tests/specs/syncOnboarding/install-set-of-apps.spec.ts:29:29
        at /home/runner/_work/ledger-live/ledger-live/apps/ledger-live-desktop/tests/specs/syncOnboarding/install-set-of-apps.spec.ts:22:3
});

await test.step("use default apps", async () => {
await installSetOfAppsPage.startInstallOrRestoreSetOfApps();
await deviceAction.resolveDependenciesMocked(["Bitcoin", "Ethereum", "Polygon"]);
await expect(page).toHaveScreenshot("debug-install-set-of-apps-queue.png");
await expect(container).toHaveScreenshot("debug-install-set-of-apps-queue.png");
await deviceAction.installSetOfAppsMocked(0.12, 0.25, { type: "install", name: "Bitcoin" }, [
"Bitcoin",
"Ethereum",
"Polygon",
]);
await installSetOfAppsPage.waitForCircleProgress("42.4115");
await expect(page).toHaveScreenshot("debug-install-set-of-apps-step-1.png");
await expect(container).toHaveScreenshot("debug-install-set-of-apps-step-1.png");
await deviceAction.installSetOfAppsMocked(0.5, 0.5, { type: "install", name: "Ethereum" }, [
"Ethereum",
"Polygon",
]);
await installSetOfAppsPage.waitForCircleProgress("28.2743");
await expect(page).toHaveScreenshot("debug-install-set-of-apps-step-2.png");
await expect(container).toHaveScreenshot("debug-install-set-of-apps-step-2.png");
await deviceAction.installSetOfAppsMocked(0.87, 0.75, { type: "install", name: "Polygon" }, [
"Polygon",
]);
await installSetOfAppsPage.waitForCircleProgress("14.1372");
await expect(page).toHaveScreenshot("debug-install-set-of-apps-step-3.png");
await expect(container).toHaveScreenshot("debug-install-set-of-apps-step-3.png");
await deviceAction.mockOpened();
await installSetOfAppsPage.waitForInstallingTextToDisappear();
await expect(page).toHaveScreenshot("debug-install-set-of-apps-completed.png");
await expect(container).toHaveScreenshot("debug-install-set-of-apps-completed.png");
await deviceAction.complete();
});

await test.step("restore apps from Ledger Stax", async () => {
await installSetOfAppsPage.resetButtonClick();
await deviceAction.resolveDependenciesMocked(["Ethereum", "Polygon"]);
await expect(page).toHaveScreenshot("debug-install-set-of-apps-reseted.png");
await expect(container).toHaveScreenshot("debug-install-set-of-apps-reseted.png");
await deviceAction.installSetOfAppsMocked(0, 0, { type: "install", name: "Bitcoin" }, [
"Ethereum",
"Polygon",
]);
await installSetOfAppsPage.startRestoreAppsFromStax();
await expect(page).toHaveScreenshot("debug-restore-set-of-apps-drawer.png");
await expect(container).toHaveScreenshot("debug-restore-set-of-apps-drawer.png");
await installSetOfAppsPage.startInstallOrRestoreSetOfApps();
await expect(page).toHaveScreenshot("debug-restore-set-of-apps-queue.png");
await expect(container).toHaveScreenshot("debug-restore-set-of-apps-queue.png");
await deviceAction.installSetOfAppsMocked(0.3, 0.15, { type: "install", name: "Ethereum" }, [
"Ethereum",
"Polygon",
]);
await installSetOfAppsPage.waitForCircleProgress("48.0664");
await expect(page).toHaveScreenshot("debug-restore-set-of-apps-step-1.png");
await expect(container).toHaveScreenshot("debug-restore-set-of-apps-step-1.png");
await deviceAction.installSetOfAppsMocked(0.67, 0.7, { type: "install", name: "Polygon" }, [
"Polygon",
]);
await installSetOfAppsPage.waitForCircleProgress("16.9646");
await expect(page).toHaveScreenshot("debug-restore-set-of-apps-step-2.png");
await expect(container).toHaveScreenshot("debug-restore-set-of-apps-step-2.png");
await deviceAction.mockOpened();
await installSetOfAppsPage.waitForInstallingTextToDisappear();
await expect(page).toHaveScreenshot("debug-restore-set-of-apps-completed.png");
await expect(container).toHaveScreenshot("debug-restore-set-of-apps-completed.png");
await deviceAction.complete();
});

await test.step("skip install or restore set of apps step", async () => {
await installSetOfAppsPage.resetButtonClick();
await installSetOfAppsPage.skipInstallOrRestoreSetOfApps();
await expect(page).toHaveScreenshot("debug-step-set-of-apps-completed.png");
await expect(container).toHaveScreenshot("debug-step-set-of-apps-completed.png");
});
});

0 comments on commit ff32128

Please sign in to comment.