|
| 1 | +--- |
| 2 | +title: Custom dependencies in Playwright Check Suites |
| 3 | +displayTitle: Using custom dependencies in Playwright Check Suites |
| 4 | +navTitle: Custom dependencies |
| 5 | +weight: 16 |
| 6 | +slug: /custom-dependencies |
| 7 | +menu: |
| 8 | + resources: |
| 9 | + parent: "Playwright Check Suites (Alpha)" |
| 10 | +--- |
| 11 | + |
| 12 | +Playwright Check Suites let you take your existing Playwright tests and turn them into globally distributed monitoring using the [Checkly CLI](/docs/cli/). It will read your Playwright configuration and parse your existing settings and dependencies to prepare the Checkly monitoring infrastructure. |
| 13 | + |
| 14 | +## Using JavaScript/Node.js dependencies |
| 15 | + |
| 16 | +Whether you use [npm](https://www.npmjs.com/), [yarn](https://yarnpkg.com/), or [pnpm](https://pnpm.io/); Checkly uses your existing `package.json` and lock files to install the correct `devDependencies` and prepare your testing and monitoring environment. |
| 17 | + |
| 18 | +```json {title="package.json"} |
| 19 | +{ |
| 20 | + "devDependencies": { |
| 21 | + "@faker-js/faker": "^9.7.0" |
| 22 | + } |
| 23 | +} |
| 24 | +``` |
| 25 | + |
| 26 | +**By default, the Checkly infrastructure installs dependencies via npm.** |
| 27 | + |
| 28 | +However, if an alternative lock file (`pnpm-lock.json` or `yarn.lock`) is discovered, Checkly uses the matching package manager to install the project dependencies. |
| 29 | + |
| 30 | +| Available lock file | Package manager | |
| 31 | +|---------------------|-----------------| |
| 32 | +| `package-lock.json` | npm | |
| 33 | +| `pnpm-lock.json` | pnpm | |
| 34 | +| `yarn.lock` | yarn | |
| 35 | + |
| 36 | +> **For `pnpm` users:** if you define the same dependency in `dependencies` and `devDependencies`, please use a custom `installCommand` in your `checkly.config.ts|js` to register your package as a development dependency: `pnpm install --dev additional-package` |
| 37 | +
|
| 38 | +## Using private dependencies |
| 39 | + |
| 40 | +There are no dependency changes required if you rely on private packages or a custom package registry. The Checkly CLI detects your existing private `package.json` dependencies and installs those using the credentials provided. |
| 41 | + |
| 42 | +```json {title="package.json"} |
| 43 | +{ |
| 44 | + "devDependencies": { |
| 45 | + "@your-org/private-package": "^2.3.0" |
| 46 | + } |
| 47 | +} |
| 48 | +``` |
| 49 | + |
| 50 | + |
| 51 | +Regardless of whether you use private packages or a custom registry, the Checkly infrastructure needs to authenticate with your provider to `install` your private source code. |
| 52 | + |
| 53 | +For example, if you use npm to manage your private dependencies, you need to: |
| 54 | + |
| 55 | +- **add custom npm configuration** to your project. |
| 56 | +- **include custom configuration files** in your Checkly project to make the infrastructure aware. |
| 57 | + |
| 58 | +### Custom npm configuration for private packages |
| 59 | + |
| 60 | +Let's look at popular options for private packages: |
| 61 | + |
| 62 | +- using private npm packages on the public npm registry. |
| 63 | +- using npm with JFrog Artifactory. |
| 64 | + |
| 65 | +To access the private source code, npm relies on custom configuration in a project-specific `.npmrc` file. |
| 66 | + |
| 67 | +> To avoid putting sensitive information into your `.npmrc` we recommend setting your authentication token via Checkly environment variables [available in the UI](https://app.checklyhq.com/environment-variables) or [the CLI](https://www.checklyhq.com/docs/cli/using-environment-variables/#managing-remote-environment-variables-using-the-cli). |
| 68 | +
|
| 69 | +#### Using private npm packages |
| 70 | + |
| 71 | +```txt {title=".npmrc"} |
| 72 | +# Hard-coded authentication token |
| 73 | +//registry.npmjs.org/:_authToken=npm_abc... |
| 74 | +
|
| 75 | +# Authentication token defined in environment variables |
| 76 | +//registry.npmjs.org/:_authToken=${NPM_TOKEN} |
| 77 | +``` |
| 78 | + |
| 79 | +#### Using JFrog Artifactory |
| 80 | + |
| 81 | +```txt {title=".npmrc"} |
| 82 | +# Custom registry URL with hard-coded authentication token |
| 83 | +registry=https://yourcompany.jfrog.io/artifactory/api/npm/yourcompany.jfrog.io/artifactory/api/npm/npm-local/:_authToken=abc... |
| 84 | +
|
| 85 | +# Custom registry URL with authentication token defined in environment variables |
| 86 | +registry=https://yourcompany.jfrog.io/artifactory/api/npm/yourcompany.jfrog.io/artifactory/api/npm/npm-local/:_authToken=${ARTIFACTORY_TOKEN} |
| 87 | +``` |
| 88 | + |
| 89 | +### Include custom configuration files |
| 90 | + |
| 91 | +To make the Checkly CLI and infrastructure aware of a custom package manager configuration for private packages, specify the additional files in the `checks.include` property in your `checkly.config.ts|js`. |
| 92 | + |
| 93 | +Checkly CLI commands like `test` or `deploy` will then bundle and upload these files so they are available in the Checkly infrastructure when running essential commands like `install`. |
| 94 | + |
| 95 | +```tsx {title="checkly.config.ts"} |
| 96 | +export default defineConfig({ |
| 97 | + checks: { |
| 98 | + playwrightConfigPath: './playwright.config.ts', |
| 99 | + // Include .npmrc to be used in the Checkly infrastructure |
| 100 | + include: ['.npmrc'], |
| 101 | + playwrightChecks: [ |
| 102 | + // Configure your Playwright Check Suites |
| 103 | + // ... |
| 104 | + ] |
| 105 | + } |
| 106 | +}) |
| 107 | +``` |
0 commit comments