From 55f25d9194578aaf51c3e5bd5d5f0e0d7f929bd8 Mon Sep 17 00:00:00 2001 From: Yevhen Laichenkov Date: Mon, 17 Jan 2022 20:15:18 +0200 Subject: [PATCH] fix/playwright test (#1533) * add: playright-test eslint plugin * add: missed awaits in playwright tests --- .eslintrc.json | 3 ++- package.json | 1 + playwright/auth/delete-account.test.ts | 8 +++++--- playwright/auth/forgot-password.test.ts | 7 +++++-- playwright/change-password.test.ts | 4 ++-- playwright/event-types.test.ts | 2 +- playwright/integrations-stripe.test.ts | 21 +++++++-------------- playwright/integrations.test.ts | 5 +++-- yarn.lock | 5 +++++ 9 files changed, 31 insertions(+), 25 deletions(-) diff --git a/.eslintrc.json b/.eslintrc.json index f27a7d1d..a1385622 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -12,7 +12,8 @@ "plugin:@typescript-eslint/recommended", "prettier", "plugin:react/recommended", - "plugin:react-hooks/recommended" + "plugin:react-hooks/recommended", + "plugin:playwright/playwright-test" ], "plugins": ["@typescript-eslint", "prettier", "react", "react-hooks"], "rules": { diff --git a/package.json b/package.json index c6ee2231..73348f23 100644 --- a/package.json +++ b/package.json @@ -130,6 +130,7 @@ "env-cmd": "10.1.0", "eslint": "^7.32.0", "eslint-config-prettier": "^8.3.0", + "eslint-plugin-playwright": "^0.7.1", "eslint-plugin-prettier": "^3.4.0", "eslint-plugin-react": "^7.27.1", "eslint-plugin-react-hooks": "^4.3.0", diff --git a/playwright/auth/delete-account.test.ts b/playwright/auth/delete-account.test.ts index 478614e5..45f8d5b1 100644 --- a/playwright/auth/delete-account.test.ts +++ b/playwright/auth/delete-account.test.ts @@ -17,11 +17,13 @@ test("Can delete user account", async ({ page }) => { await page.goto(`/settings/profile`); await page.click("[data-testid=delete-account]"); - expect(page.locator(`[data-testid=delete-account-confirm]`)).toBeVisible(); + + await expect(page.locator(`[data-testid=delete-account-confirm]`)).toBeVisible(); await Promise.all([ page.waitForNavigation({ url: "/auth/logout" }), - await page.click("[data-testid=delete-account-confirm]"), + page.click("[data-testid=delete-account-confirm]"), ]); - expect(page.locator(`[id="modal-title"]`)).toHaveText("You've been logged out"); + + await expect(page.locator(`[id="modal-title"]`)).toHaveText("You've been logged out"); }); diff --git a/playwright/auth/forgot-password.test.ts b/playwright/auth/forgot-password.test.ts index 1e25ae7b..18ba1830 100644 --- a/playwright/auth/forgot-password.test.ts +++ b/playwright/auth/forgot-password.test.ts @@ -34,7 +34,8 @@ test("Can reset forgotten password", async ({ browser }) => { await page.waitForSelector("text=Success", { timeout: 3000, }); - expect(page.locator(`text=Success`)).toBeTruthy(); + + await expect(page.locator(`text=Success`)).toBeVisible(); // Click button:has-text("Login") await Promise.all([page.waitForNavigation({ url: "/auth/login" }), page.click('button:has-text("Login")')]); @@ -44,6 +45,8 @@ test("Can reset forgotten password", async ({ browser }) => { await page.fill('input[name="password"]', "pro"); await page.press('input[name="password"]', "Enter"); await page.waitForSelector("[data-testid=dashboard-shell]"); - expect(page.locator("[data-testid=dashboard-shell]")).toBeTruthy(); + + await expect(page.locator("[data-testid=dashboard-shell]")).toBeVisible(); + await context.close(); }); diff --git a/playwright/change-password.test.ts b/playwright/change-password.test.ts index 6dbd520f..11ea037a 100644 --- a/playwright/change-password.test.ts +++ b/playwright/change-password.test.ts @@ -17,12 +17,12 @@ test("change password", async ({ page }) => { await page.fill('[name="new_password"]', "pro1"); await page.press('[name="new_password"]', "Enter"); - expect(page.locator(`text=Your password has been successfully changed.`)).toBeTruthy(); + await expect(page.locator(`text=Your password has been successfully changed.`)).toBeVisible(); // Let's revert back to prevent errors on other tests await page.fill('[name="current_password"]', "pro1"); await page.fill('[name="new_password"]', "pro"); await page.press('[name="new_password"]', "Enter"); - expect(page.locator(`text=Your password has been successfully changed.`)).toBeTruthy(); + await expect(page.locator(`text=Your password has been successfully changed.`)).toBeVisible(); }); diff --git a/playwright/event-types.test.ts b/playwright/event-types.test.ts index 2bb7b4cc..748c5b72 100644 --- a/playwright/event-types.test.ts +++ b/playwright/event-types.test.ts @@ -37,7 +37,7 @@ test.describe("pro user", () => { await page.goto("/event-types"); - expect(page.locator(`text='${eventTitle}'`)).toBeTruthy(); + await expect(page.locator(`text='${eventTitle}'`)).toBeVisible(); }); }); diff --git a/playwright/integrations-stripe.test.ts b/playwright/integrations-stripe.test.ts index 44ddab37..b64730d5 100644 --- a/playwright/integrations-stripe.test.ts +++ b/playwright/integrations-stripe.test.ts @@ -12,28 +12,24 @@ test.describe.serial("Stripe integration", () => { test("Can add Stripe integration", async ({ page }) => { await page.goto("/integrations"); /** We should see the "Connect" button for Stripe */ - expect(page.locator(`li:has-text("Stripe") >> [data-testid="integration-connection-button"]`)) - .toContainText("Connect") - .catch(() => { - console.error( - `Make sure Stripe it's properly installed and that an integration hasn't been already added.` - ); - }); + await expect( + page.locator(`li:has-text("Stripe") >> [data-testid="integration-connection-button"]`) + ).toContainText("Connect"); /** We start the Stripe flow */ await Promise.all([ page.waitForNavigation({ url: "https://connect.stripe.com/oauth/v2/authorize?*" }), - await page.click('li:has-text("Stripe") >> [data-testid="integration-connection-button"]'), + page.click('li:has-text("Stripe") >> [data-testid="integration-connection-button"]'), ]); await Promise.all([ page.waitForNavigation({ url: "/integrations" }), /** We skip filling Stripe forms (testing mode only) */ - await page.click('[id="skip-account-app"]'), + page.click('[id="skip-account-app"]'), ]); /** If Stripe is added correctly we should see the "Disconnect" button */ - expect( + await expect( page.locator(`li:has-text("Stripe") >> [data-testid="integration-connection-button"]`) ).toContainText("Disconnect"); }); @@ -51,10 +47,7 @@ test.describe.serial("Stripe integration", () => { await page.fill('[name="name"]', "Stripe Stripeson"); await page.fill('[name="email"]', "test@example.com"); - await Promise.all([ - page.waitForNavigation({ url: "/payment/*" }), - await page.press('[name="email"]', "Enter"), - ]); + await Promise.all([page.waitForNavigation({ url: "/payment/*" }), page.press('[name="email"]', "Enter")]); await page.waitForSelector('iframe[src^="https://js.stripe.com/v3/elements-inner-card-"]'); diff --git a/playwright/integrations.test.ts b/playwright/integrations.test.ts index 27e5ca62..9411e76b 100644 --- a/playwright/integrations.test.ts +++ b/playwright/integrations.test.ts @@ -24,14 +24,15 @@ test.describe("integrations", () => { // --- add webhook await page.click('[data-testid="new_webhook"]'); - expect(page.locator(`[data-testid='WebhookDialogForm']`)).toBeVisible(); + + await expect(page.locator(`[data-testid='WebhookDialogForm']`)).toBeVisible(); await page.fill('[name="subscriberUrl"]', webhookReceiver.url); await page.click("[type=submit]"); // dialog is closed - expect(page.locator(`[data-testid='WebhookDialogForm']`)).not.toBeVisible(); + await expect(page.locator(`[data-testid='WebhookDialogForm']`)).not.toBeVisible(); // page contains the url expect(page.locator(`text='${webhookReceiver.url}'`)).toBeDefined(); diff --git a/yarn.lock b/yarn.lock index edb496fc..95a71c30 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4622,6 +4622,11 @@ eslint-module-utils@2.7.1: find-up "^2.1.0" pkg-dir "^2.0.0" +eslint-plugin-playwright@^0.7.1: + version "0.7.1" + resolved "https://registry.yarnpkg.com/eslint-plugin-playwright/-/eslint-plugin-playwright-0.7.1.tgz#342d8499466af7511911386500ef48d6d04ef6f6" + integrity sha512-BPwicI9ilexNiT3CgzSHZnWuxgAg59z4l7qhswqxzM+EdaDhpucM/atYcQCUbbB9lAmHVWCEdKBWZQPkplcW1w== + eslint-plugin-prettier@^3.4.0: version "3.4.1" resolved "https://registry.yarnpkg.com/eslint-plugin-prettier/-/eslint-plugin-prettier-3.4.1.tgz#e9ddb200efb6f3d05ffe83b1665a716af4a387e5"