aljaz/claude-code-viewer
1
0
Fork 0
mirror of https://github.com/aljazceru/claude-code-viewer.git synced 2026-02-23 14:44:28 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat(e2e): enhance end-to-end testing setup with new scripts and capture cases

Browse Source 
- Updated package.json to include new E2E scripts for execution and snapshot capturing.
- Added new capture cases for the "new-project-modal" and "start-new-chat" functionalities in the E2E tests.
- Increased wait times in session detail captures to ensure elements are fully loaded before interactions.
- Introduced new shell scripts for starting the server and capturing snapshots, improving the E2E testing workflow.
- Updated NewChatModal and SessionsTab components to include data-testid attributes for better test targeting.
This commit is contained in:
d-kimsuon
2025-10-18 16:56:08 +09:00
parent 3e598eadbb
commit 1e62eeb856
13 changed files with 117 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
e2e/captureSnapshot/projects.ts
View File

@@ -2,4 +2,16 @@ import { defineCapture } from "../utils/defineCapture";
export const projectsCapture = defineCapture({
href: "/projects",
cases: [
{
name: "new-project-modal",
setup: async (page) => {
const newProjectButton = page.locator(
'[data-testid="new-project-button"]',
);
await newProjectButton.click();
await page.waitForTimeout(1000);
},
},
],
});

37
e2e/captureSnapshot/session-detail.ts
View File

@@ -12,14 +12,14 @@ export const sessionDetailCapture = defineCapture({
);
if (await menuButton.isVisible()) {
await menuButton.click();
await page.waitForTimeout(300);
await page.waitForTimeout(1000);
const sessionsTabButton = page.locator(
'[data-testid="sessions-tab-button-mobile"]',
);
if (await sessionsTabButton.isVisible()) {
await sessionsTabButton.click();
await page.waitForTimeout(300);
await page.waitForTimeout(1000);
}
} else {
const sessionsTabButton = page.locator(
@@ -27,7 +27,7 @@ export const sessionDetailCapture = defineCapture({
);
if (await sessionsTabButton.isVisible()) {
await sessionsTabButton.click();
await page.waitForTimeout(300);
await page.waitForTimeout(1000);
}
}
},
@@ -41,14 +41,14 @@ export const sessionDetailCapture = defineCapture({
);
if (await menuButton.isVisible()) {
await menuButton.click();
await page.waitForTimeout(300);
await page.waitForTimeout(1000);
const settingsTabButton = page.locator(
'[data-testid="settings-tab-button-mobile"]',
);
if (await settingsTabButton.isVisible()) {
await settingsTabButton.click();
await page.waitForTimeout(300);
await page.waitForTimeout(1000);
}
} else {
const settingsTabButton = page.locator(
@@ -56,10 +56,35 @@ export const sessionDetailCapture = defineCapture({
);
if (await settingsTabButton.isVisible()) {
await settingsTabButton.click();
await page.waitForTimeout(300);
await page.waitForTimeout(1000);
}
}
},
},
{
name: "start-new-chat",
setup: async (page) => {
const menuButton = page.locator(
'[data-testid="mobile-sidebar-toggle-button"]',
);
if (await menuButton.isVisible()) {
await menuButton.click();
await page.waitForTimeout(1000);
const startNewChatButton = page.locator(
'[data-testid="start-new-chat-button-mobile"]',
);
await startNewChatButton.click();
await page.waitForTimeout(1000);
} else {
const startNewChatButton = page.locator(
'[data-testid="start-new-chat-button"]',
);
await startNewChatButton.click();
await page.waitForTimeout(1000);
}
},
},
],
});

54
e2e/utils/defineCapture.ts
View File

@@ -26,34 +26,38 @@ export const defineCapture = (options: {
) => {
await withPlaywright(
async ({ context, cleanUp }) => {
const page = await context.newPage();
await page.goto(href);
try {
const page = await context.newPage();
await page.goto(href);
await page.waitForLoadState("domcontentloaded");
await page.waitForTimeout(1000);
await page.waitForLoadState("domcontentloaded");
await page.waitForTimeout(1000);
if (testCase) {
await testCase.setup(page);
if (testCase) {
await testCase.setup(page);
}
await page.waitForTimeout(1000);
const picturePath = testCase
? resolve(
"e2e",
"snapshots",
...paths,
testCase.name,
`${device.name}.png`,
)
: resolve("e2e", "snapshots", ...paths, `${device.name}.png`);
await page.screenshot({
path: picturePath,
fullPage: true,
});
console.log(`[captured] ${picturePath}`);
} finally {
await cleanUp();
}
const picturePath = testCase
? resolve(
"e2e",
"snapshots",
...paths,
testCase.name,
`${device.name}.png`,
)
: resolve("e2e", "snapshots", ...paths, `${device.name}.png`);
await page.screenshot({
path: picturePath,
fullPage: true,
});
console.log(`[captured] ${picturePath}`);
await cleanUp();
},
{
contextOptions: {

8
e2e/utils/withPlaywright.ts
View File

@@ -1,5 +1,3 @@
import { existsSync } from "node:fs";
import path from "node:path";
import {
type Browser,
type BrowserContext,
@@ -10,8 +8,6 @@ import {
} from "playwright";
import prexit from "prexit";
const STORAGE_PATH = path.join(process.cwd(), ".user-data", "session.json");
type PlaywrightContext = {
context: BrowserContext;
cleanUp: () => Promise<void>;
@@ -35,7 +31,6 @@ const useBrowser = (options: BrowserOptions) => {
...launchOptions,
});
context ??= await browser.newContext({
storageState: existsSync(STORAGE_PATH) ? STORAGE_PATH : undefined,
...contextOptions,
});
@@ -63,9 +58,6 @@ export const withPlaywright = async <T>(
})();
let isClosed = false;
const cleanUp = async () => {
await context.storageState({
path: STORAGE_PATH,
});
await Promise.all(context.pages().map((page) => page.close()));
await context.close();
await browser.close();