banlv/cozsweet-frontend-nextjs
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

test(e2e): extract shared playwright helpers

Browse Source
This commit is contained in:
chenhang
2026-07-01 16:31:25 +08:00
parent c477737c0d
commit 1fbdd41da8
11 changed files with 321 additions and 334 deletions
Download Patch File Download Diff File Expand all files Collapse all files
e2e/specs/mock/chat-quantity-limit.spec.ts
+23 -60
View File
@@ -1,12 +1,22 @@
import { expect, test } from "@playwright/test";
import { mockCoreApis } from "../../fixtures/api-mocks";
import {
clearBrowserState,
completeVipPayment,
dismissChatInterruptions,
enterChatFromSplash,
submitEmailLogin,
switchToEmailSignIn,
} from "../../fixtures/test-helpers";
const mockedLimitTriggerAt = 5;
const maxManualTestMessages = 51;
test.beforeEach(async ({ context, page }) => {
await context.clearCookies();
test.setTimeout(90_000);
test.beforeEach(async ({ baseURL, context, page }) => {
await clearBrowserState(context, page, baseURL);
await mockCoreApis(page, {
chatLimitTriggerAt: mockedLimitTriggerAt,
});
@@ -15,14 +25,13 @@ test.beforeEach(async ({ context, page }) => {
test("guest hits the chat quantity limit and can continue to login and subscription", async ({
page,
}) => {
await page.goto("/splash");
await page.getByRole("button", { name: "Skip" }).click();
await expect(page).toHaveURL(/\/chat$/);
await enterChatFromSplash(page);
await dismissChatInterruptions(page);
const messageInput = page.getByRole("textbox", { name: "Message" });
const quantityLimitBanner = page.getByTestId("chat-quota-exhausted-banner");
const quantityLimitBanner = page
.getByRole("status")
.filter({ hasText: "Insufficient credits" });
let limitTriggeredAt: number | null = null;
let completedSendCount = 0;
@@ -72,51 +81,22 @@ test("guest hits the chat quantity limit and can continue to login and subscript
await expect(quantityLimitBanner).toBeVisible();
await expect(messageInput).toHaveCount(0);
const unlockButton = page.getByRole("button", {
name: "Unlock your membership to continue",
const topUpButton = page.getByRole("button", {
name: "Top up credits to continue",
});
await expect(unlockButton).toBeVisible();
await expect(topUpButton).toBeVisible();
await unlockButton.click();
await topUpButton.click();
await expect(page).toHaveURL(/\/auth\?redirect=/);
expect(new URL(page.url()).searchParams.get("redirect")).toBe(
"/subscription?type=vip&returnTo=chat",
);
await page.getByRole("button", { name: /Other Sign In Options/i }).click();
await expect(
page.getByRole("dialog", { name: /Other sign-in options/i }),
).toBeVisible();
await page.getByRole("button", { name: "Email Sign In" }).click();
await expect(page.getByPlaceholder("Email")).toHaveValue(
"chanwillian0@gmail.com",
);
await expect(page.getByPlaceholder("Password")).toHaveValue("12345678");
await page.getByRole("button", { name: "Login" }).click();
await switchToEmailSignIn(page);
await submitEmailLogin(page);
await expect(page).toHaveURL(/\/subscription\?type=vip&returnTo=chat$/);
const createOrderRequestPromise = page.waitForRequest(
"**/api/payment/create-order",
);
const orderStatusRequestPromise = page.waitForRequest(
"**/api/payment/order-status**",
);
await page.getByRole("button", { name: /Pay and Activ/i }).click();
const createOrderRequest = await createOrderRequestPromise;
expect(createOrderRequest.postDataJSON()).toMatchObject({
planId: "vip_monthly",
payChannel: "stripe",
});
await orderStatusRequestPromise;
const paymentSuccessDialog = page.getByRole("alertdialog", {
name: "Payment successful",
});
await expect(paymentSuccessDialog).toBeVisible();
await paymentSuccessDialog.getByRole("button", { name: "OK" }).click();
await completeVipPayment(page);
await expect(page).toHaveURL(/\/chat$/);
await expect(page.getByRole("textbox", { name: "Message" })).toBeVisible();
@@ -132,20 +112,3 @@ async function isQuantityLimitVisible(
return false;
}
}
async function dismissChatInterruptions(page: import("@playwright/test").Page) {
const laterButton = page.getByRole("button", { name: "Later" });
if (await laterButton.isVisible().catch(() => false)) {
await laterButton.click();
}
const cancelButton = page.getByRole("button", { name: "Cancel" });
if (await cancelButton.isVisible().catch(() => false)) {
await cancelButton.click();
}
const okButton = page.getByRole("button", { name: "OK" });
if (await okButton.isVisible().catch(() => false)) {
await okButton.click();
}
}
e2e/specs/mock/email-login-from-other-options.spec.ts
+12 -26
View File
@@ -1,48 +1,34 @@
import { expect, test } from "@playwright/test";
import { mockCoreApis } from "../../fixtures/api-mocks";
import {
clearBrowserState,
enterChatFromSplash,
submitEmailLogin,
switchToEmailSignIn,
} from "../../fixtures/test-helpers";
test.beforeEach(async ({ context, page }) => {
await context.clearCookies();
test.beforeEach(async ({ baseURL, context, page }) => {
await clearBrowserState(context, page, baseURL);
await mockCoreApis(page);
});
test("user can email login from other sign-in options and return to chat", async ({
page,
}) => {
await page.goto("/splash");
await page.getByRole("button", { name: "Skip" }).click();
await expect(page).toHaveURL(/\/chat$/);
await enterChatFromSplash(page);
await page
.getByRole("button", { name: "Sign up to unlock more features" })
.click();
await expect(page).toHaveURL(/\/auth$/);
await page.getByRole("button", { name: /Other Sign In Options/i }).click();
await expect(
page.getByRole("dialog", { name: /Other sign-in options/i }),
).toBeVisible();
await page.getByRole("button", { name: "Email Sign In" }).click();
await expect(page.getByPlaceholder("Email")).toHaveValue(
"chanwillian0@gmail.com",
);
await expect(page.getByPlaceholder("Password")).toHaveValue("12345678");
const loginRequestPromise = page.waitForRequest("**/api/auth/login");
await page.getByRole("button", { name: "Login" }).click();
const loginRequest = await loginRequestPromise;
expect(loginRequest.postDataJSON()).toMatchObject({
email: "chanwillian0@gmail.com",
password: "12345678",
await switchToEmailSignIn(page);
const loginRequest = await submitEmailLogin(page, { expectedUrl: /\/chat$/ });
expect(loginRequest?.postDataJSON()).toMatchObject({
platform: "desktop",
isTestAccount: true,
});
await expect(page).toHaveURL(/\/chat$/);
await expect(page.getByRole("textbox", { name: "Message" })).toBeVisible();
await expect(page.getByRole("button", { name: "Menu" })).toBeVisible();
});
e2e/specs/mock/image-unlock-insufficient-credits.spec.ts
+10 -46
View File
@@ -2,25 +2,15 @@ import { expect, test } from "@playwright/test";
import { mockCoreApis } from "../../fixtures/api-mocks";
import { paidImageMessageId } from "../../fixtures/test-data";
import {
clearBrowserState,
dismissChatInterruptions,
expectInsufficientCreditsDialog,
signInWithEmailAndOpenChat,
} from "../../fixtures/test-helpers";
test.beforeEach(async ({ baseURL, context, page }) => {
await context.clearCookies();
const client = await context.newCDPSession(page);
const origins = new Set([
new URL(baseURL ?? "http://127.0.0.1:3000").origin,
"http://127.0.0.1:3000",
"http://localhost:3000",
]);
for (const origin of origins) {
await client
.send("Storage.clearDataForOrigin", {
origin,
storageTypes: "all",
})
.catch(() => {});
}
await clearBrowserState(context, page, baseURL);
await mockCoreApis(page, {
paidImageInsufficientCreditsFlow: true,
});
@@ -30,10 +20,11 @@ test("user sees insufficient credits when unlocking a paid image from fullscreen
page,
}) => {
await signInWithEmailAndOpenChat(page);
await dismissChatInterruptions(page);
const paidImageButton = page.getByRole("button", {
name: "Open image in fullscreen",
});
}).last();
await expect(paidImageButton).toBeVisible({ timeout: 10_000 });
await paidImageButton.click();
@@ -57,37 +48,10 @@ test("user sees insufficient credits when unlocking a paid image from fullscreen
messageId: paidImageMessageId,
});
const insufficientCreditsDialog = page.getByRole("dialog", {
name: "Not enough credits",
});
await expect(insufficientCreditsDialog).toBeVisible();
await expect(insufficientCreditsDialog.getByText("Balance")).toBeVisible();
await expect(insufficientCreditsDialog.getByText("Required")).toBeVisible();
await expect(insufficientCreditsDialog.getByText("Still needed")).toBeVisible();
const insufficientCreditsDialog = await expectInsufficientCreditsDialog(page);
await insufficientCreditsDialog
.getByRole("button", { name: "Top up now" })
.click();
await expect(page).toHaveURL(/\/subscription\?type=vip&returnTo=chat$/);
});
async function signInWithEmailAndOpenChat(
page: import("@playwright/test").Page,
) {
await page.goto("/auth");
await page.getByRole("button", { name: /Other Sign In Options/i }).click();
await expect(
page.getByRole("dialog", { name: /Other sign-in options/i }),
).toBeVisible();
await page.getByRole("button", { name: "Email Sign In" }).click();
await expect(page.getByPlaceholder("Email")).toHaveValue(
"chanwillian0@gmail.com",
);
await expect(page.getByPlaceholder("Password")).toHaveValue("12345678");
await page.getByRole("button", { name: "Login" }).click();
await expect(page).toHaveURL(/\/chat$/);
}
e2e/specs/mock/logout-from-sidebar.spec.ts
+7 -17
View File
@@ -1,30 +1,20 @@
import { expect, test } from "@playwright/test";
import { mockCoreApis } from "../../fixtures/api-mocks";
import {
clearBrowserState,
signInWithEmailAndOpenChat,
} from "../../fixtures/test-helpers";
test.beforeEach(async ({ context, page }) => {
await context.clearCookies();
test.beforeEach(async ({ baseURL, context, page }) => {
await clearBrowserState(context, page, baseURL);
await mockCoreApis(page);
});
test("user can log out from the sidebar after email login", async ({
page,
}) => {
await page.goto("/auth");
await page.getByRole("button", { name: /Other Sign In Options/i }).click();
await expect(
page.getByRole("dialog", { name: /Other sign-in options/i }),
).toBeVisible();
await page.getByRole("button", { name: "Email Sign In" }).click();
await expect(page.getByPlaceholder("Email")).toHaveValue(
"chanwillian0@gmail.com",
);
await expect(page.getByPlaceholder("Password")).toHaveValue("12345678");
await page.getByRole("button", { name: "Login" }).click();
await expect(page).toHaveURL(/\/chat$/);
await signInWithEmailAndOpenChat(page);
await expect(page.getByRole("button", { name: "Menu" })).toBeVisible();
await page.getByRole("button", { name: "Menu" }).click();
e2e/specs/mock/paid-image.spec.ts
+27 -93
View File
@@ -2,23 +2,18 @@ import { expect, test } from "@playwright/test";
import { mockCoreApis } from "../../fixtures/api-mocks";
import { paidImageMessageId } from "../../fixtures/test-data";
import {
clearBrowserState,
completeVipPayment,
dismissChatInterruptions,
enterChatFromSplash,
expectInsufficientCreditsDialog,
submitEmailLogin,
switchToEmailSignIn,
} from "../../fixtures/test-helpers";
test.beforeEach(async ({ baseURL, context, page }) => {
await context.clearCookies();
const client = await context.newCDPSession(page);
const origins = new Set([
new URL(baseURL ?? "http://127.0.0.1:3000").origin,
"http://127.0.0.1:3000",
"http://localhost:3000",
]);
for (const origin of origins) {
await client
.send("Storage.clearDataForOrigin", {
origin,
storageTypes: "all",
})
.catch(() => {});
}
await clearBrowserState(context, page, baseURL);
await mockCoreApis(page, {
paidImageFlow: true,
});
@@ -61,90 +56,29 @@ test("guest can unlock a paid image after email login and subscription payment",
await expect(page).toHaveURL(/\/auth\?redirect=/);
expect(new URL(page.url()).searchParams.get("redirect")).toBe(
"/subscription?type=vip&returnTo=chat",
`/chat/image/${paidImageMessageId}`,
);
await page.getByRole("button", { name: /Other Sign In Options/i }).click();
await expect(
page.getByRole("dialog", { name: /Other sign-in options/i }),
).toBeVisible();
await page.getByRole("button", { name: "Email Sign In" }).click();
await expect(page.getByPlaceholder("Email")).toHaveValue(
"chanwillian0@gmail.com",
await switchToEmailSignIn(page);
const unlockRequestPromise = page.waitForRequest(
"**/api/chat/unlock-private",
);
await expect(page.getByPlaceholder("Password")).toHaveValue("12345678");
const loginRequestPromise = page.waitForRequest("**/api/auth/login");
await page.getByRole("button", { name: "Login" }).click();
const loginRequest = await loginRequestPromise;
expect(loginRequest.postDataJSON()).toMatchObject({
email: "chanwillian0@gmail.com",
password: "12345678",
isTestAccount: true,
await submitEmailLogin(page, {
expectedUrl: new RegExp(`/chat/image/${paidImageMessageId}$`),
});
const unlockRequest = await unlockRequestPromise;
expect(unlockRequest.postDataJSON()).toMatchObject({
messageId: paidImageMessageId,
});
const insufficientCreditsDialog = await expectInsufficientCreditsDialog(page);
await insufficientCreditsDialog
.getByRole("button", { name: "Top up now" })
.click();
await expect(page).toHaveURL(/\/subscription\?type=vip&returnTo=chat$/);
const createOrderRequestPromise = page.waitForRequest(
"**/api/payment/create-order",
);
const orderStatusRequestPromise = page.waitForRequest(
"**/api/payment/order-status**",
);
await page.getByRole("button", { name: /Pay and Activ/i }).click();
const createOrderRequest = await createOrderRequestPromise;
expect(createOrderRequest.postDataJSON()).toMatchObject({
planId: "vip_monthly",
payChannel: "stripe",
});
await orderStatusRequestPromise;
const paymentSuccessDialog = page.getByRole("alertdialog", {
name: "Payment successful",
});
await expect(paymentSuccessDialog).toBeVisible();
await paymentSuccessDialog.getByRole("button", { name: "OK" }).click();
await completeVipPayment(page);
await expect(page).toHaveURL(new RegExp(`/chat/image/${paidImageMessageId}$`));
});
async function enterChatFromSplash(page: import("@playwright/test").Page) {
await page.goto("/splash");
const skipButton = page.getByRole("button", { name: "Skip" });
await expect(skipButton).toBeVisible({ timeout: 10_000 });
await expect(skipButton).toBeEnabled();
for (let attempt = 0; attempt < 3; attempt += 1) {
await skipButton.click();
try {
await expect(page).toHaveURL(/\/chat$/, { timeout: 3_000 });
return;
} catch {
await page.waitForTimeout(500);
}
}
await expect(page).toHaveURL(/\/chat$/);
}
async function dismissChatInterruptions(page: import("@playwright/test").Page) {
const laterButton = page.getByRole("button", { name: "Later" });
if (await laterButton.isVisible().catch(() => false)) {
await laterButton.click();
}
const cancelButton = page.getByRole("button", { name: "Cancel" });
if (await cancelButton.isVisible().catch(() => false)) {
await cancelButton.click();
}
const okButton = page.getByRole("button", { name: "OK" });
if (await okButton.isVisible().catch(() => false)) {
await okButton.click();
}
}
e2e/specs/mock/voice-unlock-insufficient-credits.spec.ts
+11 -46
View File
@@ -2,25 +2,14 @@ import { expect, test } from "@playwright/test";
import { mockCoreApis } from "../../fixtures/api-mocks";
import { paidVoiceMessageId } from "../../fixtures/test-data";
import {
clearBrowserState,
expectInsufficientCreditsDialog,
signInWithEmailAndOpenChat,
} from "../../fixtures/test-helpers";
test.beforeEach(async ({ baseURL, context, page }) => {
await context.clearCookies();
const client = await context.newCDPSession(page);
const origins = new Set([
new URL(baseURL ?? "http://127.0.0.1:3000").origin,
"http://127.0.0.1:3000",
"http://localhost:3000",
]);
for (const origin of origins) {
await client
.send("Storage.clearDataForOrigin", {
origin,
storageTypes: "all",
})
.catch(() => {});
}
await clearBrowserState(context, page, baseURL);
await mockCoreApis(page, {
paidVoiceInsufficientCreditsFlow: true,
});
@@ -30,10 +19,13 @@ test("user sees insufficient credits when unlocking a paid voice message and can
page,
}) => {
await signInWithEmailAndOpenChat(page);
await expect(
page.getByText("Unlock this voice message with credits."),
).toBeVisible({ timeout: 10_000 });
const unlockButton = page.getByRole("button", {
name: "Unlock voice message",
});
}).last();
await expect(unlockButton).toBeVisible({ timeout: 10_000 });
const unlockRequestPromise = page.waitForRequest(
@@ -47,37 +39,10 @@ test("user sees insufficient credits when unlocking a paid voice message and can
messageId: paidVoiceMessageId,
});
const insufficientCreditsDialog = page.getByRole("dialog", {
name: "Not enough credits",
});
await expect(insufficientCreditsDialog).toBeVisible();
await expect(insufficientCreditsDialog.getByText("Balance")).toBeVisible();
await expect(insufficientCreditsDialog.getByText("Required")).toBeVisible();
await expect(insufficientCreditsDialog.getByText("Still needed")).toBeVisible();
const insufficientCreditsDialog = await expectInsufficientCreditsDialog(page);
await insufficientCreditsDialog
.getByRole("button", { name: "Top up now" })
.click();
await expect(page).toHaveURL(/\/subscription\?type=vip&returnTo=chat$/);
});
async function signInWithEmailAndOpenChat(
page: import("@playwright/test").Page,
) {
await page.goto("/auth");
await page.getByRole("button", { name: /Other Sign In Options/i }).click();
await expect(
page.getByRole("dialog", { name: /Other sign-in options/i }),
).toBeVisible();
await page.getByRole("button", { name: "Email Sign In" }).click();
await expect(page.getByPlaceholder("Email")).toHaveValue(
"chanwillian0@gmail.com",
);
await expect(page.getByPlaceholder("Password")).toHaveValue("12345678");
await page.getByRole("button", { name: "Login" }).click();
await expect(page).toHaveURL(/\/chat$/);
}