diff --git a/docs/src/api/params.md b/docs/src/api/params.md
index 80ed9a6d5d..8fef217fed 100644
--- a/docs/src/api/params.md
+++ b/docs/src/api/params.md
@@ -1369,6 +1369,19 @@ const config: PlaywrightTestConfig = {
 export default config;
 ```
 
+```js tab=js-js
+// playwright.config.js
+// @ts-check
+
+/** @type {import('@playwright/test').PlaywrightTestConfig} */
+const config = {
+  testDir: './tests',
+  snapshotPathTemplate: '{testDir}/__screenshots__/{testFilePath}/{arg}{ext}',
+};
+
+module.exports = config;
+```
+
 The value might include some "tokens" that will be replaced with actual values during test execution.
 
 Consider the following file structure:
@@ -1382,7 +1395,7 @@ tests/
 
 And the following `page-click.spec.ts` that uses `toHaveScreenshot()` call:
 
-```ts
+```js tab=js-ts
 // page-click.spec.ts
 import { test, expect } from '@playwright/test';
 
@@ -1393,6 +1406,17 @@ test.describe('suite', () => {
 });
 ```
 
+```js tab=js-js
+// page-click.spec.js
+const { test, expect } = require('@playwright/test');
+
+test.describe('suite', () => {
+  test('test should work', async ({ page }) => {
+    await expect(page).toHaveScreenshot(['foo', 'bar', 'baz.png']);
+  });
+});
+```
+
 The list of supported tokens:
 
 * `{testDir}` - Project's [`property: TestConfig.testDir`].
@@ -1434,6 +1458,23 @@ const config: PlaywrightTestConfig = {
 export default config;
 ```
 
+```js tab=js-js
+// playwright.config.js
+// @ts-check
+
+/** @type {import('@playwright/test').PlaywrightTestConfig} */
+const config = {
+  snapshotPathTemplate: '__screenshots__{/projectName}/{testFilePath}/{arg}{ext}',
+  testMatch: 'example.spec.ts',
+  projects: [
+    { use: { browserName: 'firefox' } },
+    { name: 'chromium', use: { browserName: 'chromium' } },
+  ],
+};
+
+module.exports = config;
+```
+
 In this config:
 1. First project **does not** have a name, so its snapshots will be stored in `<configDir>/__screenshots__/example.spec.ts/...`.
 1. Second project **does** have a name, so its snapshots will be stored in `<configDir>/__screenshots__/chromium/example.spec.ts/..`.
diff --git a/packages/playwright-test/types/test.d.ts b/packages/playwright-test/types/test.d.ts
index ceecc9130e..e61b28b00f 100644
--- a/packages/playwright-test/types/test.d.ts
+++ b/packages/playwright-test/types/test.d.ts
@@ -805,6 +805,17 @@ interface TestConfig {
    *
    * And the following `page-click.spec.ts` that uses `toHaveScreenshot()` call:
    *
+   * ```js
+   * // page-click.spec.ts
+   * import { test, expect } from '@playwright/test';
+   *
+   * test.describe('suite', () => {
+   *   test('test should work', async ({ page }) => {
+   *     await expect(page).toHaveScreenshot(['foo', 'bar', 'baz.png']);
+   *   });
+   * });
+   * ```
+   *
    * The list of supported tokens:
    * - `{testDir}` - Project's [testConfig.testDir](https://playwright.dev/docs/api/class-testconfig#test-config-test-dir).
    *   - Value: `/home/playwright/tests` (absolute path is since `testDir` is resolved relative to directory with config)
@@ -4595,6 +4606,17 @@ interface TestProject {
    *
    * And the following `page-click.spec.ts` that uses `toHaveScreenshot()` call:
    *
+   * ```js
+   * // page-click.spec.ts
+   * import { test, expect } from '@playwright/test';
+   *
+   * test.describe('suite', () => {
+   *   test('test should work', async ({ page }) => {
+   *     await expect(page).toHaveScreenshot(['foo', 'bar', 'baz.png']);
+   *   });
+   * });
+   * ```
+   *
    * The list of supported tokens:
    * - `{testDir}` - Project's [testConfig.testDir](https://playwright.dev/docs/api/class-testconfig#test-config-test-dir).
    *   - Value: `/home/playwright/tests` (absolute path is since `testDir` is resolved relative to directory with config)