diff --git a/cli/environment-variables.mdx b/cli/environment-variables.mdx
index bcbdfe36..b3719103 100644
--- a/cli/environment-variables.mdx
+++ b/cli/environment-variables.mdx
@@ -4,6 +4,7 @@ description: 'Learn how to use environment variables in your Checkly project'
sidebarTitle: 'Environment Variables'
---
+import { YoutubeEmbed } from "/snippets/youtube-embed.jsx"
There are two types of environment variables (env vars) in the Checkly CLI context.
@@ -12,14 +13,7 @@ There are two types of environment variables (env vars) in the Checkly CLI conte
To get a quick overview of when to use which, checkout this video 👇
-
+
## Local Environment Variables
diff --git a/detect/synthetic-monitoring/api-checks/set-up-and-tear-down.mdx b/detect/synthetic-monitoring/api-checks/set-up-and-tear-down.mdx
index 4439e499..4f25b883 100644
--- a/detect/synthetic-monitoring/api-checks/set-up-and-tear-down.mdx
+++ b/detect/synthetic-monitoring/api-checks/set-up-and-tear-down.mdx
@@ -6,6 +6,7 @@ sidebarTitle: Set Up and Tear Down
---
import GenericRuntimeVariablesTable from '/snippets/generic-runtime-variables-table.mdx';
+import { YoutubeEmbed } from "/snippets/youtube-embed.jsx"
Setup and teardown scripts can be used to execute arbitrary JavaScript/TypeScript code before and/or after an API check.
Both script types have access to all environment variables, runtime objects like `request` and `response` and popular npm packages
@@ -18,14 +19,7 @@ However, you can also use them [via our web UI](#using-setup-and-teardown-script
Check the video below for a quick overview of using setup and teardown scripts through the web UI and with the CLI.
-
+
## Setup scripts
diff --git a/detect/synthetic-monitoring/browser-checks/visual-regressions.mdx b/detect/synthetic-monitoring/browser-checks/visual-regressions.mdx
index 654c216f..a41bb109 100644
--- a/detect/synthetic-monitoring/browser-checks/visual-regressions.mdx
+++ b/detect/synthetic-monitoring/browser-checks/visual-regressions.mdx
@@ -4,6 +4,8 @@ description: 'Visual monitoring for more consistent UIs and complex assertions'
sidebarTitle: 'Visual Monitoring'
---
+import { YoutubeEmbed } from "/snippets/youtube-embed.jsx"
+
Playwright Test gives you the ability to do visual regression testing and snapshot testing. With Checkly, you can run these tests
against production, 24x7.
@@ -13,7 +15,7 @@ core screens on production.
Have a look at this video for a quick explainer:
-
+
The TL;DR is that you can:
diff --git a/guides/auto-waiting-methods.mdx b/guides/auto-waiting-methods.mdx
index 2179e746..c1a7259c 100644
--- a/guides/auto-waiting-methods.mdx
+++ b/guides/auto-waiting-methods.mdx
@@ -8,6 +8,7 @@ tags:
---
import PlaywrightCheckSuiteTryOut from "/snippets/playwright-check-suite-tryout.mdx"
+import { YoutubeEmbed } from "/snippets/youtube-embed.jsx"
@@ -209,17 +210,7 @@ A full walkthrough of the code changes is [on our documentation site](/detect/sy
To see a demo of how this state works in Checkly, take a look at Stefan’s tutorial video:
-
-
-
+
## 3. Monitor network traffic with `waitForResponse`
@@ -265,17 +256,7 @@ A note on code reading: for myself, and many other users on Stack Overflow, it's
See response body waiting in action as demonstrated by Stefan here:
-
-
-
+
## 4. Implement your own auto-waiting and retry mechanism
@@ -306,17 +287,7 @@ This approach won't fix the application's UI/UX issues but allows you to "work a
Stefan explains it in detail on YouTube if you want to learn more about this approach.
-
-
-
+
## Conclusions
diff --git a/guides/claude-code-monitoring.mdx b/guides/claude-code-monitoring.mdx
index 7acc0ca4..06005134 100644
--- a/guides/claude-code-monitoring.mdx
+++ b/guides/claude-code-monitoring.mdx
@@ -8,6 +8,9 @@ avatar: 'images/avatars/nica-mellifera.png'
tags:
- AI
---
+
+import { YoutubeEmbed } from "/snippets/youtube-embed.jsx"
+
AI-assisted coding promises to massively upgrade developer productivity, and with Checkly's model of [Monitoring as Code](https://www.checklyhq.com/blog/monitoring-as-code-in-your-sdlc/), you can create monitoring coverage for all your services in minutes instead of days. This guide will show you how to create an AI development environment that lets you create and deploy several types of Checkly monitoring.
## Setup
@@ -392,11 +395,4 @@ To learn more about Checkly's capabilities, explore these resources:
For more tutorials and advanced use cases, visit the [Checkly YouTube channel](https://www.youtube.com/@ChecklyHQ), where you can see great tutorials like this guide to the Playwright MCP server:
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/guides/developer-fixtures.mdx b/guides/developer-fixtures.mdx
index 9ff76eeb..565bd2ec 100644
--- a/guides/developer-fixtures.mdx
+++ b/guides/developer-fixtures.mdx
@@ -8,6 +8,7 @@ sidebarTitle: Testing Fixtures
---
import PlaywrightCheckSuiteTryOut from "/snippets/playwright-check-suite-tryout.mdx"
+import { YoutubeEmbed } from "/snippets/youtube-embed.jsx"
@@ -155,16 +156,7 @@ In this example, we've just put our fixtures at the top of a single check's file
### See it in action: Reuse Playwright Code across Files and Tests with Fixtures
To see fixtures demonstrated, and a step-by-step explanation of the code, check out [Stefan's tutorial video](https://www.youtube.com/watch?v=2O7dyz6XO2s&list=PLMZDRUOi3a8N067UNvkxXEThKlTII_OJ-&index=5):
-
-
-
+
## Running standardized code across every check
While it's useful to package up tasks like logging in across multiple tests, we may want some code to run before and after every single check. Some possible examples:
@@ -213,16 +205,7 @@ import { expect } from '@playwright/test';
### See it in action: running code before and after every check
To see this demonstrated, and a step-by-step explanation of the fixture code, check out [Stefan's tutorial video](https://www.youtube.com/watch?v=hegZS46J0rA&list=PLMZDRUOi3a8N067UNvkxXEThKlTII_OJ-&index=1):
-
-
-
+
Here's our [complete YouTube playlist on fixtures](https://www.youtube.com/playlist?list=PLMZDRUOi3a8N067UNvkxXEThKlTII_OJ-).
diff --git a/guides/monitoring-ecommerce-apps-using-playwright.mdx b/guides/monitoring-ecommerce-apps-using-playwright.mdx
index 3f59aea4..9f30e6d1 100644
--- a/guides/monitoring-ecommerce-apps-using-playwright.mdx
+++ b/guides/monitoring-ecommerce-apps-using-playwright.mdx
@@ -7,6 +7,7 @@ tags: Playwright
import CliAuth from '/snippets/cli-auth.mdx';
import CliProjectInit from '/snippets/cli-project-init.mdx';
+import { YoutubeEmbed } from "/snippets/youtube-embed.jsx"
## Inspired by Infrastructure-as-Code and E2E-Testing
@@ -35,17 +36,7 @@ What does one gain when moving from a manual to a monitoring as code approach? T
Watch our launch event to learn more about our CLI:
-
-
-
+
## Monitoring as Code with Checkly
diff --git a/learn/playwright/codegen.mdx b/learn/playwright/codegen.mdx
index d31962ff..17d04f41 100644
--- a/learn/playwright/codegen.mdx
+++ b/learn/playwright/codegen.mdx
@@ -14,13 +14,12 @@ learn_playwright:
---
import PlaywrightCheckSuiteTryOut from "/snippets/playwright-check-suite-tryout.mdx"
+import { YoutubeEmbed } from "/snippets/youtube-embed.jsx"
Did you know that you can use Playwright to generate your automation scripts automatically? Let's dive into how you can leverage Playwright's `codegen` feature to record scripts effortlessly.
-
-
### Step 1: Launch Playwright Codegen
To get started, you'll use the `codegen` command from the Playwright executable. Let's say you want to create a script for interacting with [Checkly](https://checklyhq.com/). You would run the following command in your terminal:
@@ -125,8 +124,7 @@ You’ll also notice in the screenshot that the inspector automatically adds a `
To see the highly visual codegen tool in action, check out Stefan’s video below:
-
-
+
### Go further with Playwright
diff --git a/learn/playwright/how-to-detect-broken-links.mdx b/learn/playwright/how-to-detect-broken-links.mdx
index 4de3466c..4a8ed005 100644
--- a/learn/playwright/how-to-detect-broken-links.mdx
+++ b/learn/playwright/how-to-detect-broken-links.mdx
@@ -14,6 +14,7 @@ learn_playwright:
---
import PlaywrightCheckSuiteTryOut from "/snippets/playwright-check-suite-tryout.mdx"
+import { YoutubeEmbed } from "/snippets/youtube-embed.jsx"
@@ -23,7 +24,7 @@ Let's unveil some links going nowhere!
If you prefer the video version of this tutorial, check the video below, and if you're only here to copy and paste a final implementation, find the final code on GitHub.
-
+
## Let's break down the problem
diff --git a/learn/playwright/how-to-parameterize-playwright-projects.mdx b/learn/playwright/how-to-parameterize-playwright-projects.mdx
index 5fa04120..fe24f213 100644
--- a/learn/playwright/how-to-parameterize-playwright-projects.mdx
+++ b/learn/playwright/how-to-parameterize-playwright-projects.mdx
@@ -14,6 +14,7 @@ learn_playwright:
---
import PlaywrightCheckSuiteTryOut from "/snippets/playwright-check-suite-tryout.mdx"
+import { YoutubeEmbed } from "/snippets/youtube-embed.jsx"
@@ -35,7 +36,7 @@ Let me show in this article how to implement options to configure fixtures, page
If you prefer video, here's a recording explaining the same concepts.
-
+
## Why fixtures enable clean Playwright projects
diff --git a/learn/playwright/steps-decorators.mdx b/learn/playwright/steps-decorators.mdx
index 2571a508..b75423e4 100644
--- a/learn/playwright/steps-decorators.mdx
+++ b/learn/playwright/steps-decorators.mdx
@@ -14,6 +14,7 @@ learn_playwright:
---
import PlaywrightCheckSuiteTryOut from "/snippets/playwright-check-suite-tryout.mdx"
+import { YoutubeEmbed } from "/snippets/youtube-embed.jsx"
@@ -29,7 +30,7 @@ More importantly, though, TypeScript is the better choice when planning to maint
A few days ago, I found another TypeScript feature that allows me to **structure complex end-to-end tests with test steps while writing less code**. Doesn't this sound exciting?
-
+
Let me show you how you can replace repetitive `test.step` calls with a single `@step` decorator. Let's go!
diff --git a/learn/playwright/testing-apis.mdx b/learn/playwright/testing-apis.mdx
index e7a7a499..585103f7 100644
--- a/learn/playwright/testing-apis.mdx
+++ b/learn/playwright/testing-apis.mdx
@@ -14,11 +14,14 @@ learn_playwright:
---
import PlaywrightCheckSuiteTryOut from "/snippets/playwright-check-suite-tryout.mdx"
+import { YoutubeEmbed } from "/snippets/youtube-embed.jsx"
You probably know that Microsoft’s Playwright is a solid tool for end-to-end testing, enabling you to control headless browsers and check essential user flows. But did you know that you can also use Playwright for API testing? If you didn’t, then this guide is for you.
+
+
In this post, we’ll explore how Playwright can be used to test a GraphQL API (but don’t worry if you’re using REST; Playwright can handle any HTTP-based API). Let's dive into an example using the countries.trevorblades.com GraphQL API.
## Our demo GraphQL API
diff --git a/learn/playwright/testing-in-parallel.mdx b/learn/playwright/testing-in-parallel.mdx
index 1e9d8335..8c1554eb 100644
--- a/learn/playwright/testing-in-parallel.mdx
+++ b/learn/playwright/testing-in-parallel.mdx
@@ -14,6 +14,7 @@ learn_playwright:
---
import PlaywrightCheckSuiteTryOut from "/snippets/playwright-check-suite-tryout.mdx"
+import { YoutubeEmbed } from "/snippets/youtube-embed.jsx"
@@ -186,4 +187,4 @@ Choosing between parallel and sequential execution in Playwright tests hinges on
Over on [the Checkly YouTube channel](https://www.youtube.com/checklyhq), Stefan gets hands-on with Playwright test Parallelism and execution modes:
-
+
diff --git a/learn/playwright/testing-pyramid.mdx b/learn/playwright/testing-pyramid.mdx
index 2918ebd0..824847b0 100644
--- a/learn/playwright/testing-pyramid.mdx
+++ b/learn/playwright/testing-pyramid.mdx
@@ -15,6 +15,7 @@ learn_playwright:
---
import PlaywrightCheckSuiteTryOut from "/snippets/playwright-check-suite-tryout.mdx"
+import { YoutubeEmbed } from "/snippets/youtube-embed.jsx"
@@ -207,4 +208,4 @@ Ultimately, the goal is not to rigidly categorize tests but to ensure comprehens
In a recent Webinar, the Checkly team got to talk about how the Testing Pyramid affects testing strategies for real world applications like React apps. Watch the whole session here:
-
+
\ No newline at end of file
diff --git a/snippets/youtube-embed.jsx b/snippets/youtube-embed.jsx
new file mode 100644
index 00000000..8d77cf10
--- /dev/null
+++ b/snippets/youtube-embed.jsx
@@ -0,0 +1,34 @@
+export const YoutubeEmbed = ({
+ id, // The video id
+ allowFullScreen = true, // Whether the iframe element can activate full screen mode
+ end, // The time, measured in seconds from the start of the video, when the player should stop playing the video.
+ loading = "eager", // The loading attribute of the iframe element.
+ start, // The time, measured in seconds from the start of the video, when the player should start playing the video.
+ title = "YouTube video", // The title attribute of the iframe element. Defaults to "YouTube video".
+}) => {
+ // Validation
+ if (!id) {
+ console.error("YouTube component requires an id prop");
+ }
+
+ // Build URL parameters
+ const params = new URLSearchParams();
+
+ // Add time parameters if provided
+ if (start) params.append("start", start.toString());
+ if (end) params.append("end", end.toString());
+
+ // Construct the embed URL
+ const src = `https://www.youtube.com/embed/${id}?${params.toString()}`;
+
+ return (
+
+ );
+};
\ No newline at end of file