Add Playwright global setup for artifacts directory

[shayancoin]

Summary

• add a Playwright global setup script that ensures the artifacts directory exists before tests execute
• reference the new global setup from the shared Playwright configuration so the junit reporter can write its output
• refresh the frontend package lock after installing dependencies required to run the Playwright test suite locally

Testing

• npm run test:e2e (fails: requires application server on localhost:3000)

---

https://chatgpt.com/codex/tasks/task_e_68f28d94ed388330b33794418146e5df

Summary by CodeRabbit

• Chores
  • Enhanced test infrastructure by implementing a global setup configuration that initializes the test environment and ensures proper artifact directory management before test execution.

[coderabbitai]

Walkthrough

This PR introduces a Playwright global setup script that runs before tests. A new playwright.global-setup.ts file creates an artifacts directory, and the configuration is updated to reference this setup script via the globalSetup property.

Changes

Cohort / File(s)	Summary
Playwright Configuration playwright.config.ts	Added globalSetup property pointing to the resolved path of playwright.global-setup.ts
Global Setup Script playwright.global-setup.ts	New file that exports an async globalSetup function; imports necessary modules, creates an artifacts directory recursively

Sequence Diagram

sequenceDiagram
    participant Playwright
    participant GlobalSetup
    participant FileSystem
    
    Playwright->>GlobalSetup: Run globalSetup (_config)
    GlobalSetup->>FileSystem: Resolve artifacts directory path
    GlobalSetup->>FileSystem: Create directory (mkdirSync recursive)
    FileSystem-->>GlobalSetup: Directory created/exists
    GlobalSetup-->>Playwright: Setup complete
    Playwright->>Playwright: Run tests

Loading

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Possibly related PRs

• chore: centralize Playwright configuration #86: Modifies Playwright configuration's exported config object; this PR extends that config by adding the globalSetup property for test initialization.

Poem

🐰 A setup script hops in place,
Creating artifacts with grace,
Before each test begins to run,
The global stage is set and done!
🎭✨

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title Check	✅ Passed	The pull request title "Add Playwright global setup for artifacts directory" accurately reflects the main changes in the changeset. The pull request introduces a new Playwright global setup script (playwright.global-setup.ts) and configures it in playwright.config.ts, both of which are directly related to adding a global setup for managing the artifacts directory. The title is concise, clear, and uses specific terminology that allows reviewers to quickly understand the primary change without ambiguity.
Description Check	✅ Passed	The pull request description provides substantial content covering the main objectives of the changeset: adding a Playwright global setup script, referencing it in the configuration, and refreshing the package lock. However, the description does not follow the required template structure exactly—it is missing the "PR Type" section at the top, which should specify whether this is a Feature, Fix, Documentation, or Other change. The description does include substantive information equivalent to the "Short Description" and "Tests Added" sections, making it largely complete despite the formatting deviation from the template.

✨ Finishing touches

• 📝 Docstrings were successfully generated.

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch codex/add-setup-step-for-playwright-tests

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

📜 Review details

Configuration used: CodeRabbit UI

Review profile: ASSERTIVE

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 9bde323 and f5e8dd1.

⛔ Files ignored due to path filters (1)

• frontend/package-lock.json is excluded by !**/package-lock.json

📒 Files selected for processing (2)

• playwright.config.ts (1 hunks)
• playwright.global-setup.ts (1 hunks)

🧰 Additional context used

🧬 Code graph analysis (2)

playwright.config.ts (1)

frontend/tools/perf/run-perf-budget.js (1)

• path (3-3)

playwright.global-setup.ts (1)

frontend/tools/perf/run-perf-budget.js (2)

• path (3-3)
• fs (2-2)

🔇 Additional comments (3)

playwright.config.ts (1)

18-18: LGTM! Global setup integration looks correct.

The path resolution correctly points to the new global setup script. Since both this config file and the setup script use __dirname from the same directory level, the artifacts directory created by the setup will align with the JUnit reporter's output path (line 5).

playwright.global-setup.ts (2)

1-3: LGTM! Imports are correct and minimal.

All necessary dependencies are imported: fs for directory creation, path for resolution, and FullConfig for type safety.

---

10-10: LGTM! Default export is correct.

The function is properly exported as the default export, which is the standard pattern for Playwright global setup scripts.

[coderabbitai]

🧹 Nitpick | 🔵 Trivial

Implementation is correct and follows best practices.

The global setup function correctly:

• Uses fs.promises.mkdir with { recursive: true } to safely create the directory structure
• Properly awaits the async operation
• Resolves the path relative to the current file using __dirname

The unused _config parameter is appropriately prefixed with an underscore.

Optionally, consider adding a console log for better observability during test runs:

 async function globalSetup(_config: FullConfig) {
   const artifactsDir = path.resolve(__dirname, 'artifacts');
   await fs.promises.mkdir(artifactsDir, { recursive: true });
+  console.log(`✓ Artifacts directory ready: ${artifactsDir}`);
 }

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change

	async function globalSetup(_config: FullConfig) {
	const artifactsDir = path.resolve(__dirname, 'artifacts');
	await fs.promises.mkdir(artifactsDir, { recursive: true });
	}
	async function globalSetup(_config: FullConfig) {
	const artifactsDir = path.resolve(__dirname, 'artifacts');
	await fs.promises.mkdir(artifactsDir, { recursive: true });
	console.log(`✓ Artifacts directory ready: ${artifactsDir}`);
	}

🤖 Prompt for AI Agents

In playwright.global-setup.ts around lines 5 to 8, the globalSetup correctly
creates the artifacts directory but lacks runtime observability; add a concise
console.log (or other logger) after the directory is created to indicate success
and the artifactsDir path so test runs emit a clear message when setup
completes.

[coderabbitai]

Note

Docstrings generation - SUCCESS
Generated docstrings for this pull request at #297