docs: Adding FE instrumentation requirements for Playwright And Cypre…

…ss (#3940) * docs: Adding FE instrumentation requirements for Playwright * docs: Adding FE instrumentation requirements for Cypress
kubeshop · Jul 25, 2024 · 98518cf · 98518cf
1 parent da31ff9
commit 98518cf
Show file tree

Hide file tree

Showing 6 changed files with 36 additions and 4 deletions.
diff --git a/...s/recipes/running-playwright-performance-tests-with-artillery-and-tracetest.mdx b/...s/recipes/running-playwright-performance-tests-with-artillery-and-tracetest.mdx
@@ -21,6 +21,10 @@ keywords:
 image: https://res.cloudinary.com/djwdcmwdz/image/upload/v1698686403/docs/Blog_Thumbnail_14_rsvkmo.jpg
 ---
 
+:::info Tracetest x Playwright Frontend Instrumentation Requirements
+Find out the requirements for your instrumented app to start using [Tracetest x Playwright](https://tracetest.io/blog/tracetest-tip-instrumentation-for-end-to-end-tests).
+:::
+
 :::info Version Compatibility
 This integration is compatible with [Artillery v2.0.10](https://github.com/artilleryio/artillery/releases/tag/artillery-2.0.10) and above.
 :::

diff --git a/...s/examples-tutorials/recipes/running-tests-with-tracetest-playwright-engine.mdx b/...s/examples-tutorials/recipes/running-tests-with-tracetest-playwright-engine.mdx
@@ -16,6 +16,10 @@ keywords:
 image: https://res.cloudinary.com/djwdcmwdz/image/upload/v1698686403/docs/Blog_Thumbnail_14_rsvkmo.jpg
 ---
 
+:::info Tracetest x Playwright Frontend Instrumentation Requirements
+Find out the requirements for your instrumented app to start using [Tracetest x Playwright](https://tracetest.io/blog/tracetest-tip-instrumentation-for-end-to-end-tests).
+:::
+
 :::info Version Compatibility
 The features described here are compatible with the [Tracetest CLI v1.4.1](https://github.com/kubeshop/tracetest/releases/tag/v1.4.1) and above.
 :::

diff --git a/docs/docs/tools-and-integrations/cypress.mdx b/docs/docs/tools-and-integrations/cypress.mdx
@@ -16,6 +16,10 @@ keywords:
 image: https://res.cloudinary.com/djwdcmwdz/image/upload/v1698686403/docs/Blog_Thumbnail_14_rsvkmo.jpg
 ---
 
+:::info Tracetest x Cypress Frontend Instrumentation Requirements
+Find out the requirements for your instrumented app to start using [Tracetest x Cypress](https://tracetest.io/blog/tracetest-tip-instrumentation-for-end-to-end-tests).
+:::
+
 [Tracetest](https://tracetest.io/) is a testing tool based on [OpenTelemetry](https://opentelemetry.io/) that permits you to test your distributed application. It allows you to use the trace data generated by your OpenTelemetry tools to check and assert if your application has the desired behavior defined by your test definitions.
 
 [Cypress](https://www.cypress.io/) is a JavaScript end-to-end testing framework. It is used for testing web applications by simulating user interactions within the browser. Cypress provides a fast, reliable, and easy-to-use testing environment for developers.

diff --git a/docs/docs/tools-and-integrations/playwright.mdx b/docs/docs/tools-and-integrations/playwright.mdx
@@ -16,6 +16,10 @@ keywords:
 image: https://res.cloudinary.com/djwdcmwdz/image/upload/v1698686403/docs/Blog_Thumbnail_14_rsvkmo.jpg
 ---
 
+:::info Tracetest x Playwright Frontend Instrumentation Requirements
+Find out the requirements for your instrumented app to start using [Tracetest x Playwright](https://tracetest.io/blog/tracetest-tip-instrumentation-for-end-to-end-tests).
+:::
+
 [Tracetest](https://tracetest.io/) is a testing tool based on [OpenTelemetry](https://opentelemetry.io/) that permits you to test your distributed application. It allows you to use the trace data generated by your OpenTelemetry tools to check and assert if your application has the desired behavior defined by your test definitions.
 
 [Playwright](https://playwright.dev/) is an open-source automation framework developed by Microsoft that enables cross-browser automation for web applications. It provides a set of APIs and libraries for automating interactions with web browsers such as Chrome, Firefox, and Microsoft Edge.
@@ -27,7 +31,15 @@ The Tracetest integration for Playwright enables your current Playwright tests t
 :::info
 Check out the hands-on tutorial on YouTube!
 
-<iframe width="100%" height="250" src="https://www.youtube.com/embed/Wv38LNleUpE" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
+<iframe
+  width="100%"
+  height="250"
+  src="https://www.youtube.com/embed/Wv38LNleUpE"
+  title="YouTube video player"
+  frameborder="0"
+  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+  allowfullscreen
+></iframe>
 
 :::
 
@@ -120,11 +132,11 @@ export default defineConfig({
   },
   projects: [
     {
-      name: 'chromium',
+      name: "chromium",
       use: {
-        ...devices['Desktop Chrome'],
+        ...devices["Desktop Chrome"],
         launchOptions: {
-          args: ['--disable-web-security'],
+          args: ["--disable-web-security"],
         },
       },
     },

diff --git a/docs/docs/web-ui/creating-tests-cypress.mdx b/docs/docs/web-ui/creating-tests-cypress.mdx
@@ -12,6 +12,10 @@ keywords:
 image: https://res.cloudinary.com/djwdcmwdz/image/upload/v1698686403/docs/Blog_Thumbnail_14_rsvkmo.jpg
 ---
 
+:::info Tracetest x Cypress Frontend Instrumentation Requirements
+Find out the requirements for your instrumented app to start using [Tracetest x Cypress](https://tracetest.io/blog/tracetest-tip-instrumentation-for-end-to-end-tests).
+:::
+
 Would you like to initiate a Tracetest test from Cypress?
 
 Cypress can only test the UI of an application. You can only run validations against what the user would see while going through flows. Tracetest enhances this by adding trace-based testing on top of Cypress.

diff --git a/docs/docs/web-ui/creating-tests-playwright.mdx b/docs/docs/web-ui/creating-tests-playwright.mdx
@@ -12,6 +12,10 @@ keywords:
 image: https://res.cloudinary.com/djwdcmwdz/image/upload/v1698686403/docs/Blog_Thumbnail_14_rsvkmo.jpg
 ---
 
+:::info Tracetest x Playwright Frontend Instrumentation Requirements
+Find out the requirements for your instrumented app to start using [Tracetest x Playwright](https://tracetest.io/blog/tracetest-tip-instrumentation-for-end-to-end-tests).
+:::
+
 Would you like to initiate a Tracetest test from Playwright?
 
 Playwright can only test the UI of an application. You can only run validations against what the user would see while going through flows. Tracetest enhances this by adding trace-based testing on top of Playwright.