Update Playwright Check Suite examples

checkly.config.ts

@@ -1,42 +1,113 @@
-//checkly.config.ts
-import { defineConfig } from 'checkly'
-import { Frequency } from 'checkly/constructs'
+// checkly.config.ts
+import { defineConfig } from "checkly"
+import { Frequency } from "checkly/constructs"
 
 export default defineConfig({
- projectName: 'Demo Playwright Check Suites',
- logicalId: 'demo-pwCheckSuites',
- repoUrl: 'https://github.com/checkly/playwright-check-suite-examples',
- checks: {
-     playwrightConfigPath: './playwright.config.ts',
-	 locations:['us-west-1','eu-west-2','ap-northeast-1'],
+  projectName: "Playwright Check Suite Examples",
+  logicalId: "pwt-check-suite-examples",
+  repoUrl: "https://github.com/checkly/playwright-check-suite-examples",
+  checks: {
+    // reuse your existing Playwright configuration
+    playwrightConfigPath: "./playwright.config.ts",
+    // define locations from which your tests will run as monitors
+    locations: ["us-west-1", "eu-west-2", "ap-northeast-1"],
 
-     playwrightChecks: [
-     {
-	    //Run the Chromium project with checkly configuration
-	    name: 'Chromium Suite',
-	    logicalId: 'chromium-e2e-suite',
-	    pwProjects: 'chromium', // get complete set of tests run in chromium
-	    frequency: Frequency.EVERY_10M,      },
-	  {
-	    name: 'Critical tagged tests in all devices',
-	    logicalId:'critical-suite',
-	    pwTags: 'critical',  // get all tests tagged critical
-	    frequency:  5,
-	  },
-	  {
-	    name: 'Sanity tagged tests in Chromium, only in Ireland',
-	    logicalId:'sanity-suite',
-	    pwProjects: 'chromium', // use chromium
-	    pwTags: 'sanity',  // get all tests tagged sanity
-	    frequency:  Frequency.EVERY_2M,
-		locations:['eu-west-1'],
+    playwrightChecks: [
+      /**
+       * Example 1: Run Playwright tests with multiple browsers
+       *
+       * This Playwright Check Suite combines the tests defined in `chromium`
+       * and `firefox` project and runs them every 10 minutes.
+       *
+       * Test it and record the results with:
+       * $ npx checkly test --grep="Multiple Browser Suite" --record
+       */
+      {
+        name: "Multiple Browser Suite",
+        logicalId: "browser-compat-e2e-suite",
+        pwProjects: ["chromium", "firefox"],
+        frequency: Frequency.EVERY_10M,
+      },
 
-	  },
-     ],
- },
- //also include:
- cli: {
-   runLocation: 'eu-west-1',
-   retries: 0,
- },
+      /**
+       * Example 2: Monitor different environments
+       * with multiple Playwright Check Suites.
+       *
+       * These Playwright Check Suites monitor different environments with
+       * different monitoring frequencies and locations.
+       *
+       * Test them and record the results with:
+       * $ npx checkly test --grep="Environment" --record
+       */
+      {
+        name: "Marketing Environment",
+        logicalId: "environment-marketing-suite",
+        pwProjects: ["environment-marketing"],
+        frequency: Frequency.EVERY_10M,
+        locations: ["us-west-1", "eu-west-2", "af-south-1"],
+      },
+      {
+        name: "Docs Environment",
+        logicalId: "environment-docs-suite",
+        pwProjects: ["environment-docs"],
+        frequency: Frequency.EVERY_1H,
+        locations: ["us-west-1"],
+      },
+
+      /**
+       * Example 3: Monitor different application areas using Playwright tags
+       */
+
+      /**
+       * Example 3a: Monitor different application areas using Playwright projects
+       *
+       * Test them and record the results with:
+       * $ npx checkly test --grep="tagged-via-project" --record
+       */
+      {
+        name: "Tagged Checkly Tests (tagged-via-project)",
+        logicalId: "tagged-tests-via-project",
+        // Tests are filtered by tag by using a separated Playwright project
+        pwProjects: ["checkly-monitoring"],
+        frequency: Frequency.EVERY_1H,
+      },
+      /**
+       * Example 3b: Monitor different application areas using `pwTags`
+       *
+       * Test them and record the results with:
+       * $ npx checkly test --grep="tagged-via-pwtags" --record
+       */
+      {
+        name: "Tagged Checkly Tests (tagged-via-pwtags)",
+        logicalId: "tagged-tests-via-pwtags",
+        // Tests are filtered by tag by using `pwTags`
+        pwTags: ["@checkly"],
+        frequency: Frequency.EVERY_1H,
+      },
+
+      /**
+       * Example 4: Authenticate tests for logged-in scenarios
+       * using Playwright project dependencies
+       *
+       * This Playwright Check Suite will run the setup step defined in the
+       * `playwright.config.ts` first, log in and write storage data to disk.
+       * Then the actual Playwright project will be run and reuse the browser
+       * session information.
+       *
+       * Test them and record the results with:
+       * $ npx checkly test --grep="Logged-in tests" --record
+       */
+      {
+        name: "Logged-in tests",
+        logicalId: "logged-in-tests",
+        pwProjects: ["logged-in-tests"],
+        frequency: Frequency.EVERY_1H,
+      },
+    ],
+  },
+  //also include:
+  cli: {
+    runLocation: "eu-west-1",
+    retries: 0,
+  },
 })

playwright.config.ts

@@ -1,13 +1,14 @@
 import { defineConfig, devices } from "@playwright/test"
-const iphone13 = devices['iPhone 13'];
 
 /**
  * Read environment variables from file.
  * https://github.com/motdotla/dotenv
  */
-import dotenv from 'dotenv';
-import path from 'path';
-dotenv.config({ path: path.resolve(__dirname, '.env') });
+import dotenv from "dotenv"
+import path from "path"
+dotenv.config({ path: path.resolve(__dirname, ".env") })
+
+export const AUTH_FILE = ".auth/user.json"
 
 /**
  * See https://playwright.dev/docs/test-configuration.
@@ -23,60 +24,81 @@ export default defineConfig({
   /* Opt out of parallel tests on CI. */
   workers: process.env.CI ? 1 : undefined,
   /* Reporter to use. See https://playwright.dev/docs/test-reporters */
-  reporter: [
-    ['list'],
-    ['html', { open: 'never', outputFolder: path.resolve(__dirname, 'test-results/html') }],
-    // ['monocart-reporter', {
-    //     name: 'My Test Report',
-    //     outputFile: path.resolve(__dirname, 'test-results/monocart/index.html'),
-    //     outputFolder: path.resolve(__dirname, 'test-results/monocart')
-    // }]
-  ],
+  reporter: [["list"], ["html"]],
   /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
   use: {
     /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
     trace: "on",
     viewport: {
       width: 1280,
-      height: 720
-    }
+      height: 720,
+    },
+    baseURL: "https://www.checklyhq.com",
   },
-  /* Configure projects*/ 
+  /**
+   * Configure projects
+   *
+   * More info in github.com/checkly/playwright-check-suite-examples/#examples
+   */
   projects: [
+    /**
+     * Example 1
+     */
     {
-      name: "setup",
-      use: { ...devices["Desktop Chrome"] },
-      testMatch: /.*\.setup\.ts/,
-      teardown: 'cleanup',
+      name: "chromium",
+      testMatch: /.*\/example-1\/.*\.spec\.ts/,
+      use: {
+        ...devices["Desktop Chrome"],
+      },
     },
     {
-      name: 'cleanup',
-      // This might be multiple files that end with .teardown.ts
-      testMatch: '**/*.cleanup.ts',
+      name: "firefox",
+      testMatch: /.*\/example-1\/.*\.spec\.ts/,
+      use: {
+        ...devices["Desktop Firefox"],
+      },
     },
+    /**
+     * Example 2
+     */
     {
-      name: 'chromium',
+      name: "environment-marketing",
+      testMatch: /.*\/example-2\/.*\.spec\.ts/,
+      use: { ...devices["Desktop Chrome"], baseURL: "https://checklyhq.com" },
+    },
+    {
+      name: "environment-docs",
+      testMatch: /.*\/example-2\/.*\.spec\.ts/,
       use: {
         ...devices["Desktop Chrome"],
-        storageState: ".auth/user.json",
+        baseURL: "https://docs.checklyhq.com",
       },
-      dependencies: ["setup"],
     },
-     {
-      name: 'firefox',
-      use: {
-        ...devices["Desktop Firefox"],
-        storageState: ".auth/user.json",
-      },
-      dependencies: ["setup"],
+    /**
+     * Example 3
+     */
+    {
+      name: "checkly-monitoring",
+      use: { ...devices["Desktop Chrome"], baseURL: "https://checklyhq.com" },
+      grep: /@checkly/,
     },
-      {
-      name: 'iphone-14',
+    /**
+     * Example 4
+     */
+    {
+      name: "login-setup",
+      use: { ...devices["Desktop Chrome"], baseURL: "https://checklyhq.com" },
+      testMatch: /.*\/example-4\/.*\.setup\.ts/,
+    },
+    {
+      name: "logged-in-tests",
       use: {
-        ...devices["iPhone 14"],
-        storageState: ".auth/user.json",
+        ...devices["Desktop Chrome"],
+        baseURL: "https://checklyhq.com",
+        storageState: path.resolve(__dirname, AUTH_FILE),
       },
-      dependencies: ["setup"],
+      testMatch: /.*\/example-4\/.*\.spec\.ts/,
+      dependencies: ["login-setup"],
     },
   ],
 

tests/example-1/homepage.spec.ts

@@ -0,0 +1,9 @@
+import { expect, test } from "@playwright/test"
+
+test("Visit Checkly home page", async ({ page }) => {
+  await page.goto("/")
+
+  await expect(page).toHaveTitle(/Checkly/)
+
+  // More test code ...
+})

tests/example-2/homepage.spec.ts

@@ -0,0 +1,9 @@
+import { expect, test } from "@playwright/test"
+
+test("Visit Checkly home page", async ({ page }) => {
+  await page.goto("/")
+
+  await expect(page).toHaveTitle(/Checkly/)
+
+  // More test code ...
+})

tests/example-3/homepage.spec.ts

@@ -0,0 +1,9 @@
+import { expect, test } from "@playwright/test"
+
+test("Visit Checkly home page", { tag: "@checkly" }, async ({ page }) => {
+  await page.goto("/")
+
+  await expect(page).toHaveTitle(/Checkly/)
+
+  // More test code ...
+})

tests/example-4/homepage.spec.ts

@@ -0,0 +1,7 @@
+import { test } from "@playwright/test"
+
+test("Visit logged in area", async ({ page }) => {
+  await page.goto("/")
+
+  // More test code ...
+})

tests/example-4/login.setup.ts

@@ -0,0 +1,15 @@
+import { test as setup } from "@playwright/test"
+
+const AUTH_FILE = ".auth/user.json"
+
+setup("Log into Checkly", async ({ page }) => {
+  await page.goto("/")
+
+  // Perform your login actions which will set cookies and localstorage entries
+  // ...
+
+  // Use storage state to write the browser state to disk
+  // More info: https://playwright.dev/docs/api/class-browsercontext#browser-context-storage-state
+  await page.context().storageState({ path: AUTH_FILE })
+  console.log(`Wrote storage state to ${AUTH_FILE}`)
+})