YouTip

After successfully initializing a Playwright project, a series of files and folders will be generated in your project directory. This chapter provides a detailed explanation of the purpose of each part. * * * ## Initialized Project Structure Overview After running `npm init playwright@latest`, the following structure will be generated in the project directory: your-project/├── playwright.config.ts # Playwright configuration file├── package.json # Project dependencies and scripts├── package-lock.json # Dependency lock file├── tests/ # Test files directory│ └── example.spec.ts # Example test file├── tests-examples/ # More example tests (optional)│ └── demo-todo-app.spec.ts ├── .github/ # GitHub Actions configuration (optional)│ └── workflows/│ └── playwright.yml └── node_modules/ # npm dependency packages * * * ## playwright.config.ts —— Configuration File This is Playwright's core configuration file that controls all aspects of test execution. ## Example // File path: playwright.config.ts import{ defineConfig, devices } from '@playwright/test'; export default defineConfig({ // Test files directory, relative to this configuration file testDir:'./tests', // Run all tests in parallel fullyParallel:true, // If test.only remains in source code, fail the build on CI forbidOnly:!!process.env.CI, // Retry 2 times on CI failure, no retries locally retries: process.env.CI?2:0, // Use single thread on CI, default multi-thread locally workers: process.env.CI?1:undefined, // Use HTML reporter reporter:'html', // Shared configuration for all tests use:{ // Base URL, use relative paths in tests baseURL:'http://localhost:3000', // Collect Trace on first retry trace:'on-first-retry', }, // Multi-browser/multi-device project configuration projects:[ { name:'chromium', use:{ ...devices['Desktop Chrome']}, }, { name:'firefox', use:{ ...devices['Desktop Firefox']}, }, { name:'webkit', use:{ ...devices['Desktop Safari']}, }, ], // Start local development server before tests (optional) // webServer: { // command: 'npm run start', // url: 'http://localhost:3000', // reuseExistingServer: !process.env.CI', // }, }); playwright.config.ts is the core entry point that controls Playwright's behavior. Article 15 will provide detailed explanations for each configuration option. * * * ## package.json —— Dependencies and Scripts After initialization, Playwright-related content will be added to `package.json`: ## Example { "devDependencies":{ "@playwright/test":"^1.52.0"// Playwright Test as dev dependency }, "scripts":{ "test":"playwright test"// Can run npm test directly } } You can also add more custom scripts: ## Example { "scripts":{ "test":"playwright test", "test:ui":"playwright test --ui", "test:headed":"playwright test --headed", "test:chromium":"playwright test --project=chromium", "test:debug":"playwright test --debug", "codegen":"playwright codegen" } } * * * ## tests/ Directory —— Test Files The `tests/` directory is the default location for test files (specified by the `testDir` configuration). The initialized example test file content is as follows: ## Example // File path: tests/example.spec.ts import{ test, expect } from '@playwright/test'; test('has title', async ({ page })=>{ // Navigate to Playwright website await page.goto('https://playwright.dev/'); // Assert page title contains "Playwright" await expect(page).toHaveTitle(/Playwright/); }); test('get started link', async ({ page })=>{ // Navigate to Playwright website await page.goto('https://playwright.dev/'); // Click "Get started" link await page.getByRole('link',{ name:'Get started'}).click(); // Assert "Installation" heading appears on page await expect(page.getByRole('heading',{ name:'Installation'})).toBeVisible(); }); Test file naming recommendation: Use `.spec.ts` (TypeScript) or `.spec.js` (JavaScript) suffix. * * * ## tests-examples/ Directory —— More Examples If you chose to include example tests during initialization, the `tests-examples/` directory will contain a more complete test example: `demo-todo-app.spec.ts` demonstrates a complete test scenario for a real Todo application, including adding tasks, toggling completion status, filtering functionality, and more. This is a great learning reference. You can run it to see the effect: npx playwright test tests-examples/ * * * ## .github/workflows/ —— CI Configuration If you chose to add GitHub Actions during initialization, the `.github/workflows/playwright.yml` file will be automatically generated. This workflow will automatically run Playwright tests every time you push code or create a PR. * * * ## Browser Storage Location The browser binaries installed by Playwright are not in the project directory but are stored in the operating system cache directory: | Operating System | Browser Storage Path | | --- | --- | | macOS | ~/Library/Caches/ms-playwright/ | | Windows | %USERPROFILE%\AppData\Local\ms-playwright\ | | Linux | ~/.cache/ms-playwright/ | You can also set a custom storage path: # Set browser installation pathexport PLAYWRIGHT_BROWSERS_PATH=/your/custom/path npx playwright install * * * ## node_modules/ —— Dependency Packages Playwright's core dependency `@playwright/test` is installed in `node_modules/`. The dependency contains the complete Playwright runtime, including the protocol layer for communicating with browsers. > In addition to Node.js packages installed via npm, Playwright also depends on browser binaries (stored in system cache). Both are essential.