fix: update "advanced-js" CLI template to match the TS version

examples/advanced-project-js/README.md

@@ -8,7 +8,7 @@ https://checklyhq.com website as a monitoring target.
 3. Test -> Deploy: now you have your app monitored around the clock. All from your code base.
 
 ```
-npm create checkly@latest -- --template advanced-project
+npm create checkly@latest -- --template advanced-project-js
 ```
 
 ## Project Structure
@@ -17,15 +17,15 @@ This project has examples of all Checkly check types and showcases some advanced
 
 - Running `npx checkly test` will look for `.check.js` files and `.spec.js` in `__checks__` directories and execute them in a dry run.
 
-- Running `npx checkly deploy` will deploy your checks to Checkly, attach alert channels, and run them on a 10m schedule in the 
+- Running `npx checkly deploy` will deploy your checks to Checkly, attach alert channels, and run them on a 10m schedule in the
 region `us-east-1` and `eu-west-1`
 
 - An example GitHub Actions workflow is in the `.github/workflow.yml` file. It triggers all the checks in the project and deploys
 them if they pass.
 
 ## CLI Commands
 
-Run the core CLI commands with `npx checkly <command>` 
+Run the core CLI commands with `npx checkly <command>`
 
 | Command              | Action                                           |
 |:---------------------|:-------------------------------------------------|
@@ -47,5 +47,5 @@ npm install --save-dev @playwright/test@1.38.1
 
 ## Questions?
 
-Check [our CLI docs](https://www.checklyhq.com/docs/cli/), the [main Checkly docs](https://checklyhq.com/docs) or 
+Check [our CLI docs](https://www.checklyhq.com/docs/cli/), the [main Checkly docs](https://checklyhq.com/docs) or
 join our [Slack community](https://checklyhq.com/slack).

examples/advanced-project-js/checkly.config.js

@@ -1,5 +1,5 @@
-const { defineConfig } = require('checkly');
-const { RetryStrategyBuilder } = require('checkly/constructs');
+const { defineConfig } = require('checkly')
+const { AlertEscalationBuilder, RetryStrategyBuilder } = require('checkly/constructs')
 
 /**
  * See https://www.checklyhq.com/docs/cli/project-structure/
@@ -27,6 +27,8 @@ const config = defineConfig({
     runtimeId: '2025.04',
     /* Failed check runs will be retried before triggering alerts */
     retryStrategy: RetryStrategyBuilder.fixedStrategy({ baseBackoffSeconds: 60, maxRetries: 4, sameRegion: true }),
+    /* All checks will have this alert escalation policy defined */
+    alertEscalationPolicy: AlertEscalationBuilder.runBasedEscalation(1),
     /* A glob pattern that matches the Checks inside your repo, see https://www.checklyhq.com/docs/cli/using-check-test-match/ */
     checkMatch: '**/__checks__/**/*.check.js',
     /* Global configuration option for Playwright-powered checks. See https://www.checklyhq.com/docs/browser-checks/playwright-test/#global-configuration */
@@ -39,8 +41,8 @@ const config = defineConfig({
     },
     browserChecks: {
       /* A glob pattern matches any Playwright .spec.js files and automagically creates a Browser Check. This way, you
-       * can just write native Playwright code. See https://www.checklyhq.com/docs/cli/using-check-test-match/
-       * */
+      * can just write native Playwright code. See https://www.checklyhq.com/docs/cli/using-check-test-match/
+      * */
       testMatch: '**/__checks__/**/*.spec.js',
     },
   },
@@ -52,6 +54,6 @@ const config = defineConfig({
     /* How many times to retry a failing test run when running `npx checkly test` or `npx checkly trigger` (max. 3) */
     retries: 0,
   },
-});
+})
 
-module.exports = config;
+module.exports = config

examples/advanced-project-js/src/__checks__/synthetics/01-api.check.js

@@ -0,0 +1,30 @@
+const { join } = require('path')
+const { ApiCheck, AssertionBuilder } = require('checkly/constructs')
+const { syntheticGroup } = require('../utils/website-groups.check')
+
+// API checks send an HTTP request to a URL endpoint and validate the response. Read more at:
+// https://www.checklyhq.com/docs/api-checks/
+
+new ApiCheck('books-api-check-1', {
+  name: 'Books API',
+  degradedResponseTime: 10000, // milliseconds
+  maxResponseTime: 20000,
+  setupScript: {
+    // API checks can run arbitrary JS/TS code before or after a check.
+    entrypoint: join(__dirname, '../utils/setup.js')
+  },
+  group: syntheticGroup,
+  request: {
+    url: 'https://danube-web.shop/api/books',
+    method: 'GET',
+    followRedirects: true,
+    skipSSL: false,
+    assertions: [
+      AssertionBuilder.statusCode().equals(200),
+      AssertionBuilder.headers('content-type').equals('application/json; charset=utf-8'),
+      AssertionBuilder.jsonBody('$[0].id').isNotNull(),
+      AssertionBuilder.jsonBody('$[0].author').equals('Fric Eromm'),
+    ],
+  },
+  runParallel: true,
+})

examples/advanced-project-js/src/__checks__/synthetics/02-business-critical.check.js

@@ -0,0 +1,25 @@
+const { join } = require('path')
+const { BrowserCheck } = require('checkly/constructs')
+const { syntheticGroup } = require('../utils/website-groups.check')
+
+// Configures two checks for our homepage in a single configuration file.
+// Most settings for these checks are defined in the check group,
+// in /utils/website-groups.check.ts
+
+new BrowserCheck('browse-and-search-check', {
+  name: 'Browse and Search',
+  group: syntheticGroup,
+  code: {
+    entrypoint: join(__dirname, '03-browse-and-search.spec.js')
+  },
+  runParallel: true,
+})
+
+new BrowserCheck('login-browser-check', {
+  name: 'Login',
+  group: syntheticGroup,
+  code: {
+    entrypoint: join(__dirname, '04-login.spec.js')
+  },
+  runParallel: true,
+})

examples/advanced-project-js/src/__checks__/synthetics/03-browse-and-search.spec.js

@@ -0,0 +1,18 @@
+const { test, expect } = require('@playwright/test')
+
+// Source code for a browser check using Playwright Test. Find more Playwright information at
+// https://www.checklyhq.com/learn/playwright/
+
+// This environment variable is set in the group configuration in /utils/website-groups.check.ts
+const searchString = process.env.authorName || 'Herman Moulson'
+
+test('webshop homepage', async ({ page }) => {
+  await page.goto('http://danube-web.shop/');
+  await expect(page.getByRole('heading', { name: 'SPECIAL OFFER: 20% OFF BOOKS' })).toBeVisible();
+  await page.locator('a').filter({ hasText: 'Fantasy' }).click();
+  await expect(page.getByText('The Pickled Lynx')).toBeVisible();
+  await page.getByRole('textbox').click();
+  await page.getByRole('textbox').fill(searchString);
+  await page.getByRole('button', { name: 'Search' }).click();
+  await expect(page.getByText('Haben oder haben')).toBeVisible();
+})

examples/advanced-project-js/src/__checks__/synthetics/04-login.spec.js

@@ -0,0 +1,16 @@
+const { test } = require('@playwright/test')
+
+// This check logs in as a user would, by clicking and entering text on your web page.
+
+test('login', async ({ page }) => {
+  // See Checkly's documentation on secrets and variables: https://www.checklyhq.com/docs/browser-checks/variables/
+  const password = process.env.WEB_SHOP_PASSWORD || 'defaultPwd';
+  await page.goto('http://danube-web.shop/');
+  await page.getByRole('button', { name: 'Log in' }).click();
+  await page.getByRole('textbox', { name: 'Email' }).click();
+  await page.getByRole('textbox', { name: 'Email' }).fill('testUser@email.com');
+  await page.getByRole('textbox', { name: 'Password' }).click();
+  await page.getByRole('textbox', { name: 'Password' }).fill(password);
+  await page.getByRole('button', { name: 'Sign In' }).click();
+  // Once login is successful to your site, add assertions to check the response
+})

examples/advanced-project-js/src/__checks__/spacex-requests.spec.js → examples/advanced-project-js/src/__checks__/synthetics/05-multi-step-api.spec.js

@@ -1,12 +1,15 @@
-import { test, expect } from '@playwright/test'
+const { test, expect } = require('@playwright/test')
+
+// Multistep checks let you make multiple API calls in sequence. Rather than
+// a simple API check configuration, multistep checks use Playwright allowing
+// chained API requests. Read more at: https://www.checklyhq.com/docs/multistep-checks/
+
 
 const baseUrl = 'https://api.spacexdata.com/v3'
 
-test('space-x dragon capsules', async ({ request }) => {
-  /**
-   * Get all SpaceX Dragon Capsules
-   */
-  const [first] = await test.step('get all capsules', async () => {
+test('space-x capsules', async ({ request }) => {
+
+  const [first] = await test.step('get all Dragon capsules', async () => {
     const response = await request.get(`${baseUrl}/dragons`)
     expect(response).toBeOK()
 
@@ -16,9 +19,6 @@ test('space-x dragon capsules', async ({ request }) => {
     return data
   })
 
-  /**
-   * Get a single Dragon Capsule
-   */
   await test.step('get single dragon capsule', async () => {
     const response = await request.get(`${baseUrl}/dragons/${first.id}`)
     expect(response).toBeOK()

examples/advanced-project-js/src/__checks__/synthetics/06-multi-step-api.check.js

@@ -0,0 +1,11 @@
+const { join } = require('path')
+const { MultiStepCheck, Frequency } = require('checkly/constructs')
+
+new MultiStepCheck('multistep-check-1', {
+  name: 'Multistep API check',
+  frequency: Frequency.EVERY_1H,
+  locations: ['us-east-1', 'eu-west-1'],
+  code: {
+    entrypoint: join(__dirname, '05-multi-step-api.spec.js')
+  },
+})

examples/advanced-project-js/src/__checks__/synthetics/07-playwright-techniques.spec.js

@@ -0,0 +1,40 @@
+const { test, expect } = require('@playwright/test')
+const AxeBuilder = require('@axe-core/playwright')
+
+// In this series of checks, we'll demonstrate some more advanced techniques
+// for testing your web page with Playwright. All of these techniques can be
+// used wherever you use Playwright.
+
+test('Book details with request interception', async ({ page }) => {
+  // Here we want to check the content of a book's details, but the stock
+  // value is dynamic. How can we stabilize it? With request interception
+  // read more here: https://www.checklyhq.com/learn/playwright/intercept-requests/
+  await page.route('*/**/api/books/23', async route => { //wait for requests that match this pattern.
+    const response = await route.fetch();
+    const json = await response.json(); // Capture the response JSON
+    json.stock = "0" // modify the JSON to have a stable value
+    await route.fulfill({ response, json }); // return the modified JSON
+  });
+  await page.goto('https://danube-web.shop/books/23');
+  // Removed for brevity: checks of the book's title, genre, etc.
+  await expect(page.getByRole('button', { name: 'Add to cart' })).toBeVisible();
+  await expect(page.locator('#app-content')).toContainText("Left in stock: 0");
+});
+
+test('Visual Regression Testing', async ({ page }) => {
+  // A visual regression check that will compare a saved screenshot to a
+  // current screenshot. To store an initial screenshot, run `npx checkly test --update-snapshots`
+  await page.goto('https://danube-web.shop/')
+  await expect(page).toHaveScreenshot({ maxDiffPixelRatio: 0.2 })
+  await expect(page).toHaveScreenshot({ maxDiffPixels: 1000 })
+  await expect(page).toHaveScreenshot({ threshold: 0.2 })
+});
+
+test('Accessibility issues', async ({ page }) => {
+  // Uses the Axe library to perform accessibility testing on our site.
+  // axe-core is part of the Checkly runtime as of the 2024.02 version.
+  // Read more: https://www.checklyhq.com/blog/integrating-accessibility-checks-in-playwright-tes/
+  await page.goto('https://danube-web.shop/');
+  const accessibilityScanResults = await new AxeBuilder({ page }).analyze();
+  expect(accessibilityScanResults.violations).toHaveLength(8); // ideally we'd find zero issues
+});

examples/advanced-project-js/src/__checks__/synthetics/08-playwright-techniques.check.js

@@ -0,0 +1,19 @@
+const { join } = require('path')
+const { BrowserCheck } = require('checkly/constructs')
+const { syntheticGroup } = require('../utils/website-groups.check')
+
+// Even though there are multiple test() function calls in the .spec
+// file, they will all run and report as a single Checkly monitor.
+// Since one of the tests compares a current screenshot to a stored one,
+// this check is deactivated, until you a store a known good screenshot.
+// Run `npx checkly test --update-snapshots` before activiating this check.
+
+new BrowserCheck('playwright-techniques', {
+  name: 'Playwright techniques demo',
+  group: syntheticGroup,
+  activated: false,
+  code: {
+    entrypoint: join(__dirname, '07-playwright-techniques.spec.js')
+  },
+  runParallel: true,
+})