> For the complete documentation index, see [llms.txt](https://testingvn.gitbook.io/playwright/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://testingvn.gitbook.io/playwright/setup/setting-up-your-environment.md).

# Setting Up Your Environment

#### Installing Node.js and npm

1. Download and install Node.js from [nodejs.org](https://nodejs.org/)
2. Verify installation:bash

   ```sh
   node --version
   npm --version
   ```

#### Setting up a new project

1. Create a new directory for your project:bash

   ```sh
   mkdir playwright-project
   cd playwright-project
   ```
2. Initialize a new Node.js project:bash

   ```sh
   npm init -y
   ```

#### Installing Playwright with TypeScript

Playwright provides an installer that sets up everything you need

```sh
npm init playwright@latest
```

> During the setup, select the following options:
>
> * Choose TypeScript when prompted
> * Select browsers you want to test on (Chromium, Firefox, WebKit)
> * Add GitHub Actions workflow if you plan to use CI

#### Configuring tsconfig.json

The Playwright installer creates a basic `tsconfig.json` file. Here's an explanation of key settings:

```json
{
  "compilerOptions": {
    "target": "ES2021",        // ECMAScript target version
    "module": "commonjs",      // Module system
    "moduleResolution": "node", // How modules are resolved
    "strict": true,            // Enable all strict type checking options
    "esModuleInterop": true,   // Enables compatibility with Babel
    "skipLibCheck": true,      // Skip type checking of declaration files
    "forceConsistentCasingInFileNames": true, // Ensure consistent casing in imports
    "resolveJsonModule": true  // Allow importing JSON files
  }
}
```

\
Understanding project structure

After installation, your project should have the following structure:

```sh
playwright-project/
├── node_modules/
├── playwright-report/     // Test reports are stored here
├── test-results/          // Screenshots, videos, and traces
├── tests/                 // Your test files go here
│   └── example.spec.ts    // Example test
├── playwright.config.ts   // Playwright configuration
├── package.json           // Project dependencies
├── package-lock.json
└── tsconfig.json          // TypeScript configuration
```

> Key files:
>
> * **playwright.config.ts**: Configuration for your tests, including browsers, timeouts, and reporter settings.
> * **tests/example.spec.ts**: Example test file created by the installer.
> * **package.json**: Contains scripts to run your tests and project dependencies.

#### Running your first test

* The installer creates an example test. Run it with: 

  ```sh
  npx playwright test
  ```

* To see a report of your test run:

  ```
  npx playwright show-report
  ```

* To run tests with UI mode (for debugging):<br>

  ```
  npx playwright test --ui
  ```