Playwright Folder Structure

Playwright Folder Structure

Overview of Playwright Folder Structure:

Root Folder: PRACTICE (This is project’s workspace.)

---

📂 node_modules/

• Contains all the installed npm packages for your project.
• Important subfolders:
  1. .bin/ → executables for npm scripts.
  2. @playwright/ → Playwright-related libraries.
  3. playwright/ & playwright-core/ → The actual Playwright framework and core dependencies.
  4. @types/ → TypeScript type definitions.
  5. undici-types/ → Networking types used internally.

---

📂 playwright-report/

• Stores the HTML test reports generated after running Playwright tests.
• Example:
  • index.html → The main report file (open this in a browser to view test run details).

---

📂 test-results/

• Stores test execution results such as:
  1. Trace files
  2. Screenshots
  3. Videos
  4. Debugging artifacts

---

📂 tests/

• Your test folder where Playwright looks for .spec.ts or .spec.js files.
• Example:
  • example.spec.ts → A sample test created during Playwright project initialization.

---

📂 tests-examples/

• Additional example tests provided by Playwright when setting up the project.
• Example:
  • demo-todo-app.spec.ts → A demo test showing how to automate a simple Todo app.

---

📄 .gitignore

• Lists files/folders to ignore in Git (e.g., node_modules, test results, reports).

---

📄 package.json

• Defines your Node.js project metadata and dependencies.
• Includes Playwright packages and test scripts (like npx playwright test).

---

📄 package-lock.json

• Auto-generated file that locks exact versions of dependencies.
• Ensures consistent installs across environments.

---

📄 playwright.config.ts

• The Playwright configuration file.
• Defines test settings such as:
  • Browsers to run (chromium, firefox, webkit)
  • Test directory (tests/)
  • Timeouts, retries, workers
  • Reporters (HTML, list, JSON, etc.)

---

✅ Summary:

• tests/ & tests-examples/ → Your test cases.
• playwright.config.ts → Configurations for test runs.
• playwright-report/ & test-results/ → Outputs (reports, traces, screenshots).
• node_modules/ → Dependencies.
• package.json → Project info & dependencies list.