Merge pull request #4825 from LedgerHQ/B2CQA-80_upgradePlaywright

Playwright upgrade to 1.21.1

package.json

@@ -152,7 +152,7 @@
     "@babel/preset-react": "^7.13.13",
     "@babel/preset-typescript": "^7.15.0",
     "@octokit/rest": "^18.12.0",
-    "@playwright/test": "1.17.2",
+    "@playwright/test": "^1.21.1",
     "@storybook/addon-actions": "^6.3.12",
     "@storybook/addon-essentials": "^6.3.12",
     "@storybook/addon-links": "^6.3.12",
@@ -205,7 +205,7 @@
     "listr": "^0.14.3",
     "listr-verbose-renderer": "^0.6.0",
     "nyc": "^15.1.0",
-    "playwright": "1.17",
+    "playwright": "^1.21.1",
     "prettier": "^1.19.1",
     "serve": "^13.0.2",
     "style-loader": "^1.2.1",

tests/models/OnboardingPage.ts

@@ -38,8 +38,7 @@ export class OnboardingPage {
     this.getStartedButton = page.locator("data-test-id=onboarding-get-started-button");
     this.termsCheckbox = page.locator("data-test-id=onboarding-terms-checkbox");
     this.termsSubmitButton = page.locator("data-test-id=onboarding-terms-submit");
-    this.selectDeviceButton = (deviceId: string): Locator =>
-      page.locator(`data-test-id=device-${deviceId}`);
+    this.selectDeviceButton = (device: "nanoS" | "nanoX" | "nanoSP"): Locator => page.locator(`data-test-id=device-${device}`);
     this.checkMyNanoButton = page.locator('button:has-text("Check my Nano")');
     this.continueButton = page.locator('button:has-text("Continue")');
     this.newDeviceButton = page.locator("data-test-id=onboarding-new-device");
@@ -77,7 +76,7 @@ export class OnboardingPage {
     await this.termsSubmitButton.click();
   }
 
-  async selectDevice(device: "Nano S" | "Nano X" | string) {
+  async selectDevice(device: "nanoS" | "nanoSP" | "nanoX" | string) {
     await this.selectDeviceButton(device).click();
   }
 

tests/specs/account.spec.ts

@@ -20,12 +20,12 @@ test.describe.parallel("Accounts", () => {
       await test.step(`[${currency}] Open modal`, async () => {
         await portfolioPage.openAddAccountModal();
         expect(await addAccountModal.title.textContent()).toBe("Add accounts");
-        expect(await addAccountModal.container.screenshot()).toMatchSnapshot(`open-modal.png`);
+        expect.soft(await addAccountModal.container.screenshot()).toMatchSnapshot(`open-modal.png`);
       });
 
       await test.step(`[${currency}] Select currency`, async () => {
         await addAccountModal.select(currency);
-        expect(await addAccountModal.container.screenshot()).toMatchSnapshot(
+        expect.soft(await addAccountModal.container.screenshot()).toMatchSnapshot(
           `${currency}-select.png`,
         );
         await addAccountModal.continue();
@@ -34,22 +34,22 @@ test.describe.parallel("Accounts", () => {
       await test.step(`[${currency}] Open device app`, async () => {
         await deviceAction.openApp();
         await addAccountModal.waitForSync();
-        expect(await addAccountModal.container.screenshot()).toMatchSnapshot(
+        expect.soft(await addAccountModal.container.screenshot()).toMatchSnapshot(
           `${currency}-accounts-list.png`,
         );
       });
 
       await test.step(`[${currency}] Scan and add accounts`, async () => {
         await addAccountModal.addAccounts();
-        expect(await addAccountModal.container.screenshot()).toMatchSnapshot(
+        expect.soft(await addAccountModal.container.screenshot()).toMatchSnapshot(
           `${currency}-success.png`,
         );
       });
 
       await test.step(`[${currency}] Done`, async () => {
         await addAccountModal.done();
         await layout.totalBalance.waitFor({ state: "visible" });
-        expect(await page.screenshot()).toMatchSnapshot(`${currency}-complete.png`);
+        expect.soft(await page.screenshot()).toMatchSnapshot(`${currency}-complete.png`);
       });
     });
   }

tests/specs/devmode.spec.ts

@@ -10,7 +10,7 @@ import { DeviceAction } from "../models/DeviceAction";
 test.use({ userdata: "1AccountBTC1AccountETH" });
 const currencies = ["bitcoin_testnet", "ethereum_ropsten", "MUON"];
 
-test("Enable dev mode from settings", async ({ page }) => {
+test.skip("Enable dev mode from settings", async ({ page }) => {
   const layout = new Layout(page);
   const modal = new Modal(page);
   const accountsPage = new AccountsPage(page);
@@ -23,9 +23,9 @@ test("Enable dev mode from settings", async ({ page }) => {
       await layout.goToAccounts();
       await accountsPage.openAddAccountModal();
       await addAccountModal.select(currency);
-      expect(await addAccountModal.container.screenshot()).toMatchSnapshot(
-        `empty-result-${currency}.png`,
-      );
+      expect
+        .soft(await addAccountModal.container.screenshot())
+        .toMatchSnapshot(`empty-result-${currency}.png`);
       await addAccountModal.selectAccountInput.press("Escape");
     });
   }
@@ -34,26 +34,26 @@ test("Enable dev mode from settings", async ({ page }) => {
     await layout.goToSettings();
     await settingsPage.goToExperimentalTab();
     await settingsPage.enableDevMode();
-    expect(await page.screenshot()).toMatchSnapshot("devMode-on.png");
+    expect.soft(await page.screenshot()).toMatchSnapshot("devMode-on.png");
   });
 
   for (const currency of currencies) {
     await test.step(`${currency} currencies should be available`, async () => {
       await layout.goToAccounts();
       await accountsPage.openAddAccountModal();
       await addAccountModal.select(currency);
-      expect(await addAccountModal.container.screenshot()).toMatchSnapshot(
-        `${currency}-isAvailable.png`,
-      );
+      expect
+        .soft(await addAccountModal.container.screenshot())
+        .toMatchSnapshot(`${currency}-isAvailable.png`);
     });
 
     await test.step(`User should be able to add ${currency} accounts`, async () => {
       await modal.continue();
       await deviceAction.openApp();
       await addAccountModal.waitForSync();
-      expect(await addAccountModal.container.screenshot()).toMatchSnapshot(
-        `scan-${currency}-accounts.png`,
-      );
+      expect
+        .soft(await addAccountModal.container.screenshot())
+        .toMatchSnapshot(`scan-${currency}-accounts.png`);
       await addAccountModal.addAccounts();
       await addAccountModal.done();
     });

tests/specs/discover.spec.ts

@@ -57,37 +57,37 @@ test.skip("Live App", async ({ page }) => {
 
   await test.step("List all accounts", async () => {
     await discoverPage.getAccountsList();
-    expect(await page.screenshot()).toMatchSnapshot({
+    expect.soft(await page.screenshot()).toMatchSnapshot({
       name: "live-app-list-all-accounts.png",
     });
   });
 
   await test.step("Request Account modal - open", async () => {
     await discoverPage.requestAccount();
     await discoverPage.waitForSelectAccountModalToBeVisible();
-    expect(await page.screenshot()).toMatchSnapshot({
+    expect.soft(await page.screenshot()).toMatchSnapshot({
       name: "live-app-request-account-modal-1.png",
     });
   });
 
   await test.step("Request Account - account dropdown", async () => {
     await discoverPage.openAccountDropdown();
-    expect(await page.screenshot()).toMatchSnapshot({
+    expect.soft(await page.screenshot()).toMatchSnapshot({
       name: "live-app-request-account-modal-2.png",
     });
   });
 
   await test.step("Request Account - select BTC", async () => {
     await discoverPage.selectAccount();
-    expect(await page.screenshot()).toMatchSnapshot({
+    expect.soft(await page.screenshot()).toMatchSnapshot({
       name: "live-app-request-account-modal-3.png",
     });
   });
 
   await test.step("Request Account - single account output", async () => {
     await discoverPage.exitModal();
     await discoverPage.letLiveAppLoad();
-    expect(await page.screenshot()).toMatchSnapshot({
+    expect.soft(await page.screenshot()).toMatchSnapshot({
       name: "live-app-request-single-account-output.png",
     });
   });

tests/specs/firmwareupdate.spec.ts

@@ -21,45 +21,45 @@ test("Firmware Update", async ({ page }) => {
 
   await test.step("Open firmware update modal", async () => {
     await managerPage.openFirmwareUpdateModal();
-    expect(await firmwareUpdateModal.container.screenshot()).toMatchSnapshot({
+    expect.soft(await firmwareUpdateModal.container.screenshot()).toMatchSnapshot({
       name: "firmware-update-button.png",
     });
   });
 
   await test.step("Firmware update changelog", async () => {
     await firmwareUpdateModal.tickCheckbox();
-    expect(await firmwareUpdateModal.container.screenshot()).toMatchSnapshot({
+    expect.soft(await firmwareUpdateModal.container.screenshot()).toMatchSnapshot({
       name: "modal-checkbox.png",
     });
   });
 
   await test.step("MCU download step", async () => {
     await firmwareUpdateModal.continue();
     await firmwareUpdateModal.downloadProgress.waitFor({ state: "visible" });
-    expect(await firmwareUpdateModal.container.screenshot()).toMatchSnapshot({
+    expect.soft(await firmwareUpdateModal.container.screenshot()).toMatchSnapshot({
       name: "download-mcu-progress.png",
     });
   });
 
   await test.step("MCU flash step", async () => {
     await deviceAction.complete(); // .complete() install full firmware -> flash mcu
     await firmwareUpdateModal.flashProgress.waitFor({ state: "visible" });
-    expect(await firmwareUpdateModal.container.screenshot()).toMatchSnapshot({
+    expect.soft(await firmwareUpdateModal.container.screenshot()).toMatchSnapshot({
       name: "flash-mcu-progress.png",
     });
   });
 
   await test.step("Firmware update done", async () => {
     await deviceAction.complete(); // .complete() flash mcu -> completed
     await firmwareUpdateModal.updateDone.waitFor({ state: "visible" });
-    expect(await firmwareUpdateModal.container.screenshot()).toMatchSnapshot({
+    expect.soft(await firmwareUpdateModal.container.screenshot()).toMatchSnapshot({
       name: "flash-mcu-done.png",
     });
   });
 
   await test.step("Modal is closed", async () => {
     await firmwareUpdateModal.close();
-    expect(await page.screenshot()).toMatchSnapshot({
+    expect.soft(await page.screenshot()).toMatchSnapshot({
       name: "modal-closed.png",
     });
   });

tests/specs/layout.spec.ts

@@ -18,20 +18,20 @@ test("Layout", async ({ page }) => {
   await test.step("can open send modal", async () => {
     await layout.openSendModal();
     await sendModal.container.waitFor({ state: "visible" });
-    expect(await page.screenshot()).toMatchSnapshot("send-modal.png");
+    expect.soft(await page.screenshot()).toMatchSnapshot("send-modal.png");
     await sendModal.close();
   });
 
   await test.step("can open receive modal", async () => {
     await layout.openReceiveModal();
     await receiveModal.container.waitFor({ state: "visible" });
-    expect(await page.screenshot()).toMatchSnapshot("receive-modal.png");
+    expect.soft(await page.screenshot()).toMatchSnapshot("receive-modal.png");
     await receiveModal.close();
   });
 
   await test.step("go to accounts", async () => {
     await layout.goToAccounts();
-    expect(await page.screenshot()).toMatchSnapshot("accounts.png");
+    expect.soft(await page.screenshot()).toMatchSnapshot("accounts.png");
   });
 
   await test.step("go to discover", async () => {
@@ -43,7 +43,7 @@ test("Layout", async ({ page }) => {
 
   await test.step("go to buy / sell cryto", async () => {
     await layout.goToBuyCrypto();
-    expect(await page.screenshot()).toMatchSnapshot("buy-sell.png");
+    expect.soft(await page.screenshot()).toMatchSnapshot("buy-sell.png");
   });
 
   await test.step("go to experimental features", async () => {
@@ -52,7 +52,7 @@ test("Layout", async ({ page }) => {
     await settingsPage.enableDevMode();
     await layout.goToPortfolio();
     await layout.drawerExperimentalButton.click();
-    expect(await page.screenshot()).toMatchSnapshot("experimental-features.png");
+    expect.soft(await page.screenshot()).toMatchSnapshot("experimental-features.png");
   });
 
   await test.step("shows a starred account, and can access the page", async () => {
@@ -65,24 +65,24 @@ test("Layout", async ({ page }) => {
   await test.step("can toggle discreet mode", async () => {
     await layout.goToPortfolio(); // FIXME: remove this line when LL-8899 is fixed
     await layout.toggleDiscreetMode();
-    expect(await page.screenshot()).toMatchSnapshot("discreet-mode.png");
+    expect.soft(await page.screenshot()).toMatchSnapshot("discreet-mode.png");
   });
 
   await test.step("can collapse the main sidebar", async () => {
     await layout.drawerCollapseButton.click();
-    expect(await page.screenshot()).toMatchSnapshot("collapse-sidebar.png");
+    expect.soft(await page.screenshot()).toMatchSnapshot("collapse-sidebar.png");
   });
 
   await test.step("shows the carousel and can dismiss it", async () => {
     await layout.goToPortfolio();
     await portfolioPage.carousel.waitFor({ state: "visible" });
     await portfolioPage.carouselCloseButton.click();
     await portfolioPage.carouselConfirmButton.click();
-    expect(await page.screenshot()).toMatchSnapshot("dismiss-carousel.png");
+    expect.soft(await page.screenshot()).toMatchSnapshot("dismiss-carousel.png");
   });
 
   await test.step("can display the help modal", async () => {
     await layout.topbarHelpButton.click();
-    expect(await page.screenshot()).toMatchSnapshot("help-drawer.png");
+    expect.soft(await page.screenshot()).toMatchSnapshot("help-drawer.png");
   });
 });

tests/specs/onboarding/device-ready.spec.ts

@@ -3,15 +3,11 @@ import { expect } from "@playwright/test";
 import { OnboardingPage } from "../../models/OnboardingPage";
 import { DeviceAction } from "../../models/DeviceAction";
 
-const nanos = {
-  nanoX: "Nano X",
-  nanoS: "Nano S",
-  nanoSP: "Nano S Plus",
-};
+const nanos = ["nanoS", "nanoSP", "nanoX"];
 
 test.describe.parallel("Onboarding", () => {
-  for (const nano of Object.keys(nanos)) {
-    test(`[${nanos[nano]}] Onboarding flow already set up`, async ({ page }) => {
+  for (const nano of nanos) {
+    test(`[${nano}] Onboarding flow already set up`, async ({ page }) => {
       const onboardingPage = new OnboardingPage(page);
       const deviceAction = new DeviceAction(page);
 
@@ -24,15 +20,15 @@ test.describe.parallel("Onboarding", () => {
         await onboardingPage.acceptTerms();
       });
 
-      await test.step(`[${nanos[nano]}] Select Device`, async () => {
+      await test.step(`[${nano}] Select Device`, async () => {
         await onboardingPage.selectDevice(nano);
       });
 
-      await test.step(`[${nanos[nano]}] Already set up`, async () => {
+      await test.step(`[${nano}] Already set up`, async () => {
         await onboardingPage.connectDevice();
       });
 
-      await test.step(`[${nanos[nano]}] Device genuine check`, async () => {
+      await test.step(`[${nano}] Device genuine check`, async () => {
         await onboardingPage.continue();
         await onboardingPage.checkDevice();
       });