docs: adds first snapshot docs [sc-00] (#934)

* docs: adds first snapshot docs [sc-00]

* docs: updates docs / changes checks

* docs: fix small typos

__checks__/alertChannels.ts

@@ -2,6 +2,6 @@ import { OpsgenieAlertChannel, SlackAlertChannel } from 'checkly/constructs'
 import { alertChannelIds } from './defaults'
 
 export const slackChannelOps = SlackAlertChannel.fromId(alertChannelIds.slack)
-export const opsGenieChannelP1 = OpsgenieAlertChannel.fromId(alertChannelIds.opsGenieP1)
+// removed temporarily for testing snapshots / visual comparisons
 export const opsGenieChannelP3 = OpsgenieAlertChannel.fromId(alertChannelIds.opsGenieP3)
-export const alertChannels = [slackChannelOps, opsGenieChannelP3]
+export const alertChannels = [slackChannelOps]

__checks__/docs-visual.spec.ts

@@ -0,0 +1,8 @@
+import { test } from '@playwright/test'
+import { ChecklySitePage } from './poms/ChecklySitePage'
+
+test('homepage visual comparison', async ({ page }) => {
+  const checklyPage = new ChecklySitePage(page)
+  await checklyPage.goto('/docs')
+  await checklyPage.doScreenshotCompare()
+})

__checks__/poms/ChecklySitePage.ts

@@ -1,10 +1,11 @@
-import type { BrowserContext, Page } from '@playwright/test'
+import type { Page } from '@playwright/test'
+import { expect } from '@playwright/test'
 import { defaults } from '../defaults'
 
 export class ChecklySitePage {
   public page: Page
 
-  constructor (page) {
+  constructor (page: Page) {
     this.page = page
   }
 
@@ -17,7 +18,17 @@ export class ChecklySitePage {
     await this.page.goto(defaults.baseURL + uri)
   }
 
-  async screenshot (name) {
+  async screenshot (name: string) {
     await this.page.screenshot({ path: `${defaults.screenshotPath}/${name}.jpg` })
   }
+
+  async doScreenshotCompare () {
+    await expect(this.page).toHaveScreenshot({
+      maxDiffPixelRatio: 0.2,
+      mask: [
+        this.page.locator('.optanon-alert-box-wrapper'),
+        this.page.locator('#intercom-container-body')
+      ]
+    })
+  }
 }

__checks__/site.check-group.ts

@@ -1,11 +1,12 @@
-import { CheckGroup, RetryStrategyBuilder } from 'checkly/constructs'
+import { CheckGroup, RetryStrategyBuilder, Frequency } from 'checkly/constructs'
 import { alertChannels } from './alertChannels'
 
 export const checklyhqComGroup = new CheckGroup('checklyhq-docs-1', {
   name: 'checklyhq.com/docs',
   activated: true,
   muted: false,
   runtimeId: '2023.02',
+  frequency: Frequency.EVERY_1H,
   locations: [
     'us-east-1',
     'us-west-1',

package.json

@@ -57,7 +57,7 @@
   },
   "devDependencies": {
     "@playwright/test": "1.31.2",
-    "checkly": "4.1.0",
+    "checkly": "4.4.0-prerelease",
     "eslint": "7.32.0",
     "eslint-config-standard": "16.0.3",
     "eslint-plugin-html": "7.1.0",