feat: add playwright check examples [kit-2234] (#1156)

* feat: add playwright check examples [kit-2234]

* feat: add missing files

* fix: set correct dirpath to copy pw settings [kit-2234]

* feat: change PW version on examples

* Review Maxi's PR around examples without push permissions (#1160)

* improve ts advanded example

* remove techniches example that fails consistently

* update boilerplate TS template example

* tweak advanced JS example

* tweak readme and homepage spec

* * JS simple example
* Clarify deploy names to know which suites examples are used more JS vs TS
* Align readmes
* Include dependencies install step and clarify playwright test usage

---------

Co-authored-by: Maxi Gimenez <[email protected]>

* chore: remove results

* chore: remove package-lock.json

* chore: change package.json

* fix: do not copy pw config

---------

Co-authored-by: María de Antón <[email protected]>

Author: maxigimenez

examples/advanced-project-js/README.md

@@ -15,6 +15,8 @@ npm create checkly@latest -- --template advanced-project
 
 This project has examples of all Checkly check types and showcases some advanced features. It also adds a GitHub Actions workflow.
 
+- Running `npx checkly pw-test` will use the `playwright.config.ts` file and run the test suite in Checkly.
+
 - 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 
@@ -30,6 +32,7 @@ Run the core CLI commands with `npx checkly <command>`
 | Command              | Action                                           |
 |:---------------------|:-------------------------------------------------|
 | `npx checkly test`   | Dry run all the checks in your project           |
+| `npx checkly pw-test`| Run playwright tests in your project             |
 | `npx checkly deploy` | Deploy your checks to the Checkly cloud          |
 | `npx checkly login`  | Log in to your Checkly account                   |
 | `npx checkly --help` | Show help for each command.                      |
@@ -38,11 +41,14 @@ Run the core CLI commands with `npx checkly <command>`
 
 ## Adding and running `@playwright/test`
 
-You can add `@playwright/test` to this project to get full code completion and run `.spec.js` files for local debugging.
-It's best to install the Playwright npm package version that matches your [Checkly runtime](https://www.checklyhq.com/docs/cli/npm-packages/).
+Run `npm install` to install all required dependencies. 
+
+ `@playwright/test` will give you full code completion and run `.spec.js` files for local debugging.
+
+If you're using MultiStep or Browser Checks, make sure to install the Playwright npm package version that matches your [Checkly runtime](https://www.checklyhq.com/docs/cli/npm-packages/).
 
 ```bash
-npm install --save-dev @playwright/test@1.38.1
+npm install --save-dev @playwright/test@1.54.1
 ```
 
 ## Questions?

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

@@ -43,6 +43,15 @@ const config = defineConfig({
        * */
       testMatch: '**/__checks__/**/*.spec.js',
     },
+    playwrightConfigPath: './playwright.config.js',
+    playwrightChecks: [
+      {
+        logicalId: 'playwright-check-suite',
+        name: 'Playwright Check Suite JS',
+        //Use `testCommand: npx playwright test` to filter the tests you want to run
+      }
+    ],
+    ],
   },
   cli: {
     /* The default datacenter location to use when running npx checkly test */

examples/advanced-project-js/package.json

@@ -10,6 +10,8 @@
   "author": "",
   "license": "ISC",
   "devDependencies": {
-    "checkly": "latest"
+    "@playwright/test": "^1",
+    "checkly": "latest",
+    "jiti": "^1"
   }
 }

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

@@ -0,0 +1,43 @@
+const { defineConfig, devices } = require('@playwright/test');
+const path = require('path');
+
+const AUTH_FILE = '.auth/user.json';
+
+const config = defineConfig({
+  timeout: 30000,
+  use: {
+    baseURL: 'https://www.danube-web.shop',
+    viewport: { width: 1280, height: 720 },
+  },
+  projects: [
+    {
+      name: 'login-setup',
+      testMatch: /.*\.setup.ts/,
+      use: {
+        ...devices['Desktop Chrome'],
+      },
+    },
+    {
+      name: 'Firefox',
+      testDir: './src/tests/',
+      use: {
+        ...devices['Desktop Firefox'],
+        storageState: path.resolve(__dirname, AUTH_FILE),
+      },
+      dependencies: ["login-setup"],
+    },
+    {
+      name: 'Chromium',
+      testDir: './src/tests/',
+      use: {
+        ...devices['Desktop Chrome'],
+        storageState: path.resolve(__dirname, AUTH_FILE),
+        // Optionally add Checkly user-agent
+        userAgent: devices['Desktop Chrome'].userAgent + ' (Checkly, https://www.checklyhq.com)',
+      },
+      dependencies: ['login-setup'],
+    },
+  ]
+});
+
+module.exports = config;

examples/advanced-project-js/src/playwright/homepage.spec.js

@@ -0,0 +1,9 @@
+const { test, expect } = require('@playwright/test');
+
+test('webshop homepage @homepage', async ({ page }) => {
+  const response = await page.goto('');
+
+  expect(response?.status()).toBeLessThan(400);
+  await expect(page).toHaveTitle(/Danube WebShop/);
+  await page.screenshot({ path: 'homepage.jpg' });
+});

examples/advanced-project-js/src/playwright/login.spec.js

@@ -0,0 +1,17 @@
+const { test } = require('@playwright/test');
+
+test('login', {
+  tag: '@login',
+}, async ({ page }) => {
+  // navigate to our target web page
+  await page.goto('');
+
+  // click on the login button and go through the login procedure
+  await page.click('#login');
+  await page.type('#n-email', '[email protected]');
+  await page.type('#n-password2', 'supersecure1');
+  await page.click('#goto-signin-btn');
+
+  // wait until the login confirmation message is shown
+  await page.waitForSelector('#login-message', { visible: true });
+});

examples/advanced-project/README.md

@@ -3,7 +3,7 @@
 This example project shows how you can use the Checkly CLI in a monitoring as code (MaC) workflow. We are using the
 https://checklyhq.com website as a monitoring target.
 
-1. Write API Checks and Playwright-powered Browser Checks.
+1. Write API Checks and Playwright-powered Browser Checks or fully native Playwright Check Suites.
 2. Add Alert Channels, and dry-run your Checks on 20+ global locations.
 3. Test -> Deploy: now you have your app monitored around the clock. All from your code base.
 
@@ -15,6 +15,7 @@ npm create checkly@latest -- --template advanced-project
 
 This project has examples of all Checkly check types and showcases some advanced features. It also adds a GitHub Actions workflow.
 
+- Running `npx checkly pw-test` will use the `playwright.config.ts` file and run the test suite in Checkly.
 - Running `npx checkly test` will look for `.check.ts` files and `.spec.ts` 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 
@@ -30,6 +31,7 @@ Run the core CLI commands with `npx checkly <command>`
 | Command              | Action                                           |
 |:---------------------|:-------------------------------------------------|
 | `npx checkly test`   | Dry run all the checks in your project           |
+| `npx checkly pw-test`| Run playwright tests in your project             |
 | `npx checkly deploy` | Deploy your checks to the Checkly cloud          |
 | `npx checkly login`  | Log in to your Checkly account                   |
 | `npx checkly --help` | Show help for each command.                      |
@@ -38,14 +40,17 @@ Run the core CLI commands with `npx checkly <command>`
 
 ## Adding and running `@playwright/test`
 
-You can add `@playwright/test` to this project to get full code completion and run `.spec.ts` files for local debugging.
-It's best to install the Playwright npm package version that matches your [Checkly runtime](https://www.checklyhq.com/docs/cli/npm-packages/).
+Run `npm install` to install all required dependencies. 
+
+ `@playwright/test` will give you full code completion and run `.spec.js` files for local debugging.
+
+If you're using MultiStep or Browser Checks, make sure to install the Playwright npm package version that matches your [Checkly runtime](https://www.checklyhq.com/docs/cli/npm-packages/).
 
 ```bash
-npm install --save-dev @playwright/test@1.38.1
+npm install --save-dev @playwright/test@1.54.1
 ```
 
 ## Questions?
 
-Check [our CLI docs](https://www.checklyhq.com/docs/cli/), the [main Checkly docs](https://checklyhq.com/docs) or 
+Check [the 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/checkly.config.ts

@@ -45,6 +45,16 @@ const config = defineConfig({
       * */
       testMatch: '**/__checks__/**/*.spec.ts',
     },
+
+    // Playwright Check Suites definition, run the whole Playwright Test Suite in a Check
+    playwrightConfigPath: './playwright.config.ts',
+    playwrightChecks: [
+      {
+        logicalId: 'playwright-check-suite',
+        name: 'Playwright Check Suite TS',
+        //Use `testCommand: npx playwright test` to filter the tests you want to run
+      }
+    ],
   },
   cli: {
     /* The default datacenter location to use when running npx checkly test */

examples/advanced-project/package.json

@@ -10,6 +10,7 @@
   "author": "",
   "license": "ISC",
   "devDependencies": {
+    "@playwright/test": "^1",
     "checkly": "latest",
     "jiti": "^2"
   }

examples/advanced-project/playwright.config.ts

@@ -0,0 +1,54 @@
+import { defineConfig, devices } from "@playwright/test"
+
+/**
+ * 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") })
+
+export const AUTH_FILE = ".auth/user.json"
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+
+export default defineConfig({
+  timeout: 30000,
+  use: {
+    baseURL: "https://www.checklyhq.com",
+    viewport: { width: 1280, height: 720 },
+    trace: "on",
+
+  },
+  projects: [
+    {
+      name: 'login-setup',
+      testMatch: /.*\.setup.ts/,
+      use: {
+        ...devices['Desktop Chrome'],
+      },
+    },
+    {
+      name: 'Firefox',
+      testDir: './src/tests/',
+      use: {
+        ...devices['Desktop Firefox'],
+        storageState: path.resolve(__dirname, AUTH_FILE),
+      },
+      dependencies: ["login-setup"],
+    },
+    {
+      name: 'Chromium',
+      testDir: './src/tests/',
+      use: {
+        ...devices['Desktop Chrome'],
+        storageState: path.resolve(__dirname, AUTH_FILE),
+        // Optionally add Checkly user-agent
+        userAgent: `${devices['Desktop Chrome'].userAgent} (Checkly, https://www.checklyhq.com)`,
+      },
+      dependencies: ["login-setup"],
+    },
+  ]
+});