Fixes for cypress cloud test replay issue 130

README.md

@@ -142,6 +142,24 @@ This will add types for `cy.api()` command, it’s returned values as well as `e
 ### Issues
 All the issues can be found on [issues page](https://github.com/filiphric/cypress-plugin-api/issues), feel free to open any new ones or contribute with your own code.
 
+### Testing Local Changes in Another Repository
+You can use [yalc](https://github.com/wclr/yalc) to use your local changes as the package in another repository without needing to publish to NPM.
+
+<details>
+<summary>Using yalc</summary>
+
+1. Install yalc globally with `npm i yalc -g`.
+
+2. Run `npm run yalc:build` in the root of your local `cypress-plugin-api` repository (and do this every time you want to make your latest changes available).
+
+3. Run `yalc link cypress-plugin-api` in the root of your local automation repository (only necessary to do this once).
+
+4. To constantly pull the latest local api plugin changes into your local automation repository, run `yalc update` from the root.
+
+5. If you want to stop using yalc, type `yalc retreat --all` in the root of automation repository. And if you want to start using it again, type `yalc restore --all`.
+
+</details>
+
 <!-- ### Want to learn more?
 Come to my upcoming "Testing API with Cypress" workshop. We’ll be using this plugin and learning different ways of testing API.
 

package.json

@@ -27,7 +27,8 @@
     "release": "standard-version",
     "release:minor": "standard-version --release-as minor",
     "release:patch": "standard-version --release-as patch",
-    "release:major": "standard-version --release-as major"
+    "release:major": "standard-version --release-as major",
+    "yalc:build": "npm run build && yalc publish"
   },
   "pre-commit": [
     "lint"

src/components/CodeBlock.vue

@@ -2,16 +2,18 @@
 <template>
   <div
     v-if="dataFormatted"
-    class="bg-cy-blue-darker"
+    class="bg-cy-blue-darker cy-force-visible"
     :data-cy="selector"
   >
     <pre
-      class="hljs overflow-scroll no-scrollbar"
-      v-html="dataFormatted"
+      class="hljs overflow-scroll no-scrollbar cy-force-visible"
+      v-html="dataFormatted" 
     />
   </div>
 </template>
 <script setup lang="ts">
+import { onMounted } from 'vue';
+
 defineProps({
   selector: {
     type: String
@@ -20,5 +22,14 @@ defineProps({
     default: '',
     type: String
   }
-})
+});
+
+// Force the component to be visible when mounted
+onMounted(() => {
+  // Make sure the code block is visible
+  setTimeout(() => {
+    const codeBlocks = document.querySelectorAll('pre.hljs');
+    codeBlocks.forEach(block => block.classList.add('cy-force-visible'));
+  }, 50);
+});
 </script>

src/components/RequestPanel.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     data-cy="requestPanel"
-    class="col-span-1"
+    class="col-span-1 cy-force-visible"
   >
     <Title
       :method="item?.method"
@@ -97,6 +97,17 @@ defineProps({
   index: {
     type: [Number, String]
   }
-})
+});
+
+// Force the component to be visible when mounted
+import { onMounted } from 'vue';
+
+onMounted(() => {
+  // Make sure all CodeBlock components are visible
+  setTimeout(() => {
+    const panel = document.querySelector('[data-cy="requestPanel"]');
+    if (panel) panel.classList.add('cy-force-visible');
+  }, 50);
+});
 
 </script>

src/components/ResponsePanel.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     data-cy="responsePanel"
-    class="col-span-1"
+    class="col-span-1 cy-force-visible"
   >
     <Status
       :status="item?.status"
@@ -77,5 +77,16 @@ defineProps({
   index: {
     type: [Number, String]
   }
-})
+});
+
+// Force the component to be visible when mounted
+import { onMounted } from 'vue';
+
+onMounted(() => {
+  // Make sure all CodeBlock components are visible
+  setTimeout(() => {
+    const panel = document.querySelector('[data-cy="responsePanel"]');
+    if (panel) panel.classList.add('cy-force-visible');
+  }, 50);
+});
 </script>