From b2c848d44387eabbdce2f8ebb44585143e221eb0 Mon Sep 17 00:00:00 2001 From: Nabin Kawan Date: Mon, 6 May 2024 13:28:16 +0545 Subject: [PATCH] 6A: Add/Refactor tests for mobile accessibility --- .../playwright/lib/constants/environments.ts | 4 +- .../playwright/lib/datafactory/createAuth.ts | 8 +-- .../playwright/lib/helpers/mobile.ts | 16 ++++++ .../playwright/lib/pages/loginPage.ts | 16 +++++- .../playwright/playwright.config.ts | 52 +++++++------------ .../2-delegation/delegation.loggedin.spec.ts | 2 +- .../proposalVisibility.loggedin.spec.ts | 4 ++ .../6-miscellaneous/miscellaneous.spec.ts | 13 +++++ .../playwright/tests/example.spec.ts | 22 -------- 9 files changed, 73 insertions(+), 64 deletions(-) create mode 100644 tests/govtool-frontend/playwright/lib/helpers/mobile.ts delete mode 100644 tests/govtool-frontend/playwright/tests/example.spec.ts diff --git a/tests/govtool-frontend/playwright/lib/constants/environments.ts b/tests/govtool-frontend/playwright/lib/constants/environments.ts index f4474c818..eea7478db 100644 --- a/tests/govtool-frontend/playwright/lib/constants/environments.ts +++ b/tests/govtool-frontend/playwright/lib/constants/environments.ts @@ -1,6 +1,6 @@ const environments = { - frontendUrl: process.env.HOST_URL || "http://localhost:5173", - apiUrl: `${process.env.HOST_URL}/api` || "http://localhost:9999", + frontendUrl: process.env.HOST_URL || "http://localhost:8080", + apiUrl: `${process.env.HOST_URL}/api` || "http://localhost:8080/api", docsUrl: process.env.DOCS_URL || "https://docs.sanchogov.tools", networkId: parseInt(process.env.NETWORK_ID) || 0, oneTimeWalletSetup: process.env.ONE_TIME_WALLET_SETUP === "true" || false, diff --git a/tests/govtool-frontend/playwright/lib/datafactory/createAuth.ts b/tests/govtool-frontend/playwright/lib/datafactory/createAuth.ts index d297f0ddf..2525ed5dc 100644 --- a/tests/govtool-frontend/playwright/lib/datafactory/createAuth.ts +++ b/tests/govtool-frontend/playwright/lib/datafactory/createAuth.ts @@ -3,7 +3,7 @@ import { importWallet } from "@fixtures/importWallet"; import { ShelleyWallet } from "@helpers/crypto"; import LoginPage from "@pages/loginPage"; -import { Page, expect } from "@playwright/test"; +import { Page } from "@playwright/test"; const tempDRepAuth = ".auth/tempDRepAuth.json"; const tempUserAuth = ".auth/tempUserAuth.json"; @@ -14,7 +14,7 @@ export async function createTempDRepAuth(page: Page, wallet: ShelleyWallet) { const loginPage = new LoginPage(page); await loginPage.login(); - await expect(page.getByTestId("disconnect-button")).toBeVisible(); + await loginPage.isLoggedIn(); await page.context().storageState({ path: tempDRepAuth }); return tempDRepAuth; @@ -28,7 +28,7 @@ export async function createTempAdaHolderAuth( const loginPage = new LoginPage(page); await loginPage.login(); - await expect(page.getByTestId("disconnect-button")).toBeVisible(); + await loginPage.isLoggedIn(); await page.context().storageState({ path: tempAdaHolderAuth }); return tempAdaHolderAuth; @@ -37,7 +37,7 @@ export async function createTempAdaHolderAuth( export async function createTempUserAuth(page: Page) { const loginPage = new LoginPage(page); await loginPage.login(); - await expect(page.getByTestId("disconnect-button")).toBeVisible(); + await loginPage.isLoggedIn(); await page.context().storageState({ path: tempUserAuth }); return tempUserAuth; diff --git a/tests/govtool-frontend/playwright/lib/helpers/mobile.ts b/tests/govtool-frontend/playwright/lib/helpers/mobile.ts new file mode 100644 index 000000000..b0c0329ca --- /dev/null +++ b/tests/govtool-frontend/playwright/lib/helpers/mobile.ts @@ -0,0 +1,16 @@ +import { Page } from "@playwright/test"; + +export function isMobile(page: Page) { + const { width } = page.viewportSize(); + if (width <= 414) return true; + + return false; +} + +export async function openDrawer(page: Page) { + await page.getByRole("img", { name: "drawer-icon" }).click(); //BUG testId +} + +export async function openDrawerLoggedIn(page: Page) { + await page.getByTestId("open-drawer-button").click(); +} diff --git a/tests/govtool-frontend/playwright/lib/pages/loginPage.ts b/tests/govtool-frontend/playwright/lib/pages/loginPage.ts index 2baa2f0ff..964b14ff8 100644 --- a/tests/govtool-frontend/playwright/lib/pages/loginPage.ts +++ b/tests/govtool-frontend/playwright/lib/pages/loginPage.ts @@ -2,6 +2,7 @@ import { CIP30Instance, Cip95Instance, } from "@cardanoapi/cardano-test-wallet/types"; +import { isMobile, openDrawer, openDrawerLoggedIn } from "@helpers/mobile"; import { Page, expect } from "@playwright/test"; export default class LoginPage { @@ -22,7 +23,14 @@ export default class LoginPage { async login() { await this.goto(); - await this.connectWalletBtn.click(); + if (isMobile(this.page)) { + await openDrawer(this.page); + await this.page + .getByRole("button", { name: "Connect your wallet" }) // BUG testId should be same as connect-wallet-button + .click(); + } else { + await this.connectWalletBtn.click(); + } await this.demosWalletBtn.click({ force: true }); await this.acceptSanchoNetInfoBtn.click({ force: true }); @@ -53,10 +61,16 @@ export default class LoginPage { } async logout() { + if (isMobile(this.page)) { + await openDrawerLoggedIn(this.page); + } await this.disconnectWalletBtn.click(); } async isLoggedIn() { + if (isMobile(this.page)) { + await openDrawerLoggedIn(this.page); + } await expect(this.disconnectWalletBtn).toBeVisible(); } } diff --git a/tests/govtool-frontend/playwright/playwright.config.ts b/tests/govtool-frontend/playwright/playwright.config.ts index bcd673974..caf1350e7 100644 --- a/tests/govtool-frontend/playwright/playwright.config.ts +++ b/tests/govtool-frontend/playwright/playwright.config.ts @@ -27,7 +27,7 @@ export default defineConfig({ /*use Allure Playwright's testPlanFilter() to determine the grep parameter*/ grep: testPlanFilter(), /* Reporter to use. See https://playwright.dev/docs/test-reporters */ - reporter: process.env.CI ? [["line"], ["allure-playwright"]] : [["line"]], + reporter: process.env.CI ? [["dot"], ["allure-playwright"]] : [["dot"]], /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */ use: { /* Base URL to use in actions like `await page.goto('/')`. */ @@ -63,11 +63,17 @@ export default defineConfig({ dependencies: process.env.CI ? ["auth setup", "wallet bootstrap"] : [], }, { - name: "logged in", + name: "loggedin (desktop)", use: { ...devices["Desktop Chrome"] }, testMatch: "**/*.loggedin.spec.ts", dependencies: process.env.CI ? ["auth setup"] : [], }, + { + name: "loggedin (mobile)", + use: { ...devices["Pixel 5"] }, + testMatch: "**/*.loggedin.spec.ts", + dependencies: process.env.CI ? ["auth setup"] : [], + }, { name: "dRep", use: { ...devices["Desktop Chrome"] }, @@ -75,7 +81,7 @@ export default defineConfig({ dependencies: process.env.CI ? ["auth setup", "dRep setup"] : [], }, { - name: "independent", + name: "independent (desktop)", use: { ...devices["Desktop Chrome"] }, testIgnore: [ "**/*.tx.spec.ts", @@ -83,36 +89,14 @@ export default defineConfig({ "**/*.dRep.spec.ts", ], }, - // { - // name: "cleanup adaHolder", - // testMatch: "**/*.teardown.ts", - // }, - - /* Test against mobile viewports. */ - // { - // name: 'Mobile Chrome', - // use: { ...devices['Pixel 5'] }, - // }, - // { - // name: 'Mobile Safari', - // use: { ...devices['iPhone 12'] }, - // }, - - /* Test against branded browsers. */ - // { - // name: 'Microsoft Edge', - // use: { ...devices['Desktop Edge'], channel: 'msedge' }, - // }, - // { - // name: 'Google Chrome', - // use: { ...devices['Desktop Chrome'], channel: 'chrome' }, - // }, + { + name: "independent (mobile)", + use: { ...devices["Pixel 5"] }, + testIgnore: [ + "**/*.tx.spec.ts", + "**/*.loggedin.spec.ts", + "**/*.dRep.spec.ts", + ], + }, ], - - /* Run your local dev server before starting the tests */ - // webServer: { - // command: "cd govtool/frontend && npm run start", - // // url: "http://127.0.0.1:3000", - // reuseExistingServer: !process.env.CI, - // }, }); diff --git a/tests/govtool-frontend/playwright/tests/2-delegation/delegation.loggedin.spec.ts b/tests/govtool-frontend/playwright/tests/2-delegation/delegation.loggedin.spec.ts index 8d3f28652..969607c1f 100644 --- a/tests/govtool-frontend/playwright/tests/2-delegation/delegation.loggedin.spec.ts +++ b/tests/govtool-frontend/playwright/tests/2-delegation/delegation.loggedin.spec.ts @@ -10,7 +10,7 @@ test("2B. Should access delegation to dRep page @smoke @fast", async ({ }) => { await page.goto("/"); - await page.getByTestId("delegate-button").click(); // BUG: testId -> view-dRep-directory + await page.getByTestId("delegate-button").click(); // BUG incorrect test ID await expect( page.getByRole("navigation").getByText("DRep Directory") ).toBeVisible(); diff --git a/tests/govtool-frontend/playwright/tests/4-proposal-visibility/proposalVisibility.loggedin.spec.ts b/tests/govtool-frontend/playwright/tests/4-proposal-visibility/proposalVisibility.loggedin.spec.ts index cc5a182b5..d55c62514 100644 --- a/tests/govtool-frontend/playwright/tests/4-proposal-visibility/proposalVisibility.loggedin.spec.ts +++ b/tests/govtool-frontend/playwright/tests/4-proposal-visibility/proposalVisibility.loggedin.spec.ts @@ -1,5 +1,6 @@ import { user01Wallet } from "@constants/staticWallets"; import { test } from "@fixtures/walletExtension"; +import { isMobile, openDrawerLoggedIn } from "@helpers/mobile"; import removeAllSpaces from "@helpers/removeAllSpaces"; import GovernanceActionsPage from "@pages/governanceActionsPage"; import { expect } from "@playwright/test"; @@ -26,6 +27,9 @@ test("4A.1: Should access Governance Actions page with connecting wallet @smoke page, }) => { await page.goto("/"); + if (isMobile(page)) { + await openDrawerLoggedIn(page); + } await page.getByTestId("governance-actions-link").click(); await expect(page.getByText(/Governance Actions/i)).toHaveCount(2); diff --git a/tests/govtool-frontend/playwright/tests/6-miscellaneous/miscellaneous.spec.ts b/tests/govtool-frontend/playwright/tests/6-miscellaneous/miscellaneous.spec.ts index b1f72c811..d26feb683 100644 --- a/tests/govtool-frontend/playwright/tests/6-miscellaneous/miscellaneous.spec.ts +++ b/tests/govtool-frontend/playwright/tests/6-miscellaneous/miscellaneous.spec.ts @@ -1,3 +1,4 @@ +import { isMobile, openDrawer } from "@helpers/mobile"; import { expect, test } from "@playwright/test"; import environments from "lib/constants/environments"; @@ -7,9 +8,15 @@ test("6C. Navigation within the dApp @smoke @fast", async ({ }) => { await page.goto("/"); + if (isMobile(page)) { + await openDrawer(page); + } await page.getByTestId("governance-actions-link").click(); await expect(page).toHaveURL(/\/governance_actions/); + if (isMobile(page)) { + await openDrawer(page); + } const [guidesPage] = await Promise.all([ context.waitForEvent("page"), page.getByTestId("guides-link").click(), @@ -19,6 +26,9 @@ test("6C. Navigation within the dApp @smoke @fast", async ({ `${environments.docsUrl}/about/what-is-sanchonet-govtool` ); + if (isMobile(page)) { + await openDrawer(page); + } const [faqsPage] = await Promise.all([ context.waitForEvent("page"), page.getByTestId("faqs-link").click(), @@ -26,6 +36,9 @@ test("6C. Navigation within the dApp @smoke @fast", async ({ await expect(faqsPage).toHaveURL(`${environments.docsUrl}/faqs`); + if (isMobile(page)) { + await openDrawer(page); + } await page.getByTestId("dashboard-link").click(); expect(page.url()).toEqual(`${environments.frontendUrl}/`); }); diff --git a/tests/govtool-frontend/playwright/tests/example.spec.ts b/tests/govtool-frontend/playwright/tests/example.spec.ts deleted file mode 100644 index 190e698e2..000000000 --- a/tests/govtool-frontend/playwright/tests/example.spec.ts +++ /dev/null @@ -1,22 +0,0 @@ -import test, { expect } from "@playwright/test"; - -test.describe("Example test specs", () => { - test("has title", async ({ page }) => { - await page.goto("https://playwright.dev/"); - - // Expect a title "to contain" a substring. - await expect(page).toHaveTitle(/Playwright/); - }); - - test("get started link", async ({ page }) => { - await page.goto("https://playwright.dev/"); - - // Click the get started link. - await page.getByRole("link", { name: "Get started" }).click(); - - // Expects page to have a heading with the name of Installation. - await expect( - page.getByRole("heading", { name: "Installation" }) - ).toBeVisible(); - }); -});