Refactor CI workflows to enable end-to-end testing with Playwright and update .gitignore for test artifacts

Author: manu4543

.github/workflows/nodejs.yml

@@ -23,11 +23,11 @@ jobs:
         npm install
         npm run build
         npm pack
-        # cd test-app
-        # npm install
-        # npm install ../imagekit-react-*.tgz --no-save
-        # npx playwright install --with-deps
-        # npm run test:e2e
+        cd test-app
+        npm install
+        npm install ../imagekit-react-*.tgz --no-save
+        npx playwright install --with-deps
+        npm run test:e2e
       env:
         CI: true
 

.github/workflows/npmpublish.yml

@@ -23,11 +23,11 @@ jobs:
           npm install
           npm run build
           npm pack
-          # cd test-app
-          # npm install
-          # npm install ../imagekit-react-*.tgz --no-save
-          # npx playwright install --with-deps
-          # npm run test:e2e
+          cd test-app
+          npm install
+          npm install ../imagekit-react-*.tgz --no-save
+          npx playwright install --with-deps
+          npm run test:e2e
         env:
           CI: true
 

test-app/.gitignore

@@ -4,3 +4,9 @@
 # React Router
 /.react-router/
 /build/
+
+/blob-report/
+/coverage
+/playwright/.cache/
+/playwright-report/
+/test-results/

test-app/e2e/__snapshot__/csr.spec.ts/CSR-test-case-1.txt

@@ -0,0 +1 @@
+<div class="container"><div><h1>Image</h1><img loading="lazy" alt="Image without ImageKit provider" height="300" width="300" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-384,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max 2x" src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max"><img loading="lazy" alt="Image with ImageKit provider" height="300" width="300" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-384,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max 2x" src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max"><img loading="lazy" alt="Image with width not number, should produce larger srcset" width="300px" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max 640w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-750,c-at_max 750w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-828,c-at_max 828w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1080,c-at_max 1080w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1200,c-at_max 1200w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1920,c-at_max 1920w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-2048,c-at_max 2048w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-3840,c-at_max 3840w" src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-3840,c-at_max"><img loading="lazy" alt="With transformation" height="300" width="300" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=h-100,w-100:w-384,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=h-100,w-100:w-640,c-at_max 2x" src="https://ik.imagekit.io/demo/default-image.jpg?tr=h-100,w-100:w-640,c-at_max"><img loading="lazy" alt="Image with queryParameters" height="300" width="300" srcset="https://ik.imagekit.io/demo/default-image.jpg?version=v1&amp;tr=h-100,w-100:w-384,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?version=v1&amp;tr=h-100,w-100:w-640,c-at_max 2x" src="https://ik.imagekit.io/demo/default-image.jpg?version=v1&amp;tr=h-100,w-100:w-640,c-at_max"><img loading="lazy" alt="Responsive image with sizes" height="300" width="300" sizes="(max-width: 600px) 100vw, 50vw" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-384,c-at_max 384w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max 640w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-750,c-at_max 750w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-828,c-at_max 828w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1080,c-at_max 1080w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1200,c-at_max 1200w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1920,c-at_max 1920w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-2048,c-at_max 2048w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-3840,c-at_max 3840w" src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-3840,c-at_max"><img loading="lazy" alt="Responsive image with sizes - should have very large srcset for all breakpoints" height="300" width="300" sizes="300px" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-16,c-at_max 16w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-32,c-at_max 32w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-48,c-at_max 48w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-64,c-at_max 64w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-96,c-at_max 96w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-128,c-at_max 128w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-256,c-at_max 256w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-384,c-at_max 384w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max 640w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-750,c-at_max 750w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-828,c-at_max 828w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1080,c-at_max 1080w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1200,c-at_max 1200w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1920,c-at_max 1920w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-2048,c-at_max 2048w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-3840,c-at_max 3840w" src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-3840,c-at_max"><img loading="lazy" alt="Image with urlEndpoint override" height="300" width="300" srcset="https://ik.imagekit.io/demo2/default-image.jpg?tr=h-100,w-100:w-384,c-at_max 1x, https://ik.imagekit.io/demo2/default-image.jpg?tr=h-100,w-100:w-640,c-at_max 2x" src="https://ik.imagekit.io/demo2/default-image.jpg?tr=h-100,w-100:w-640,c-at_max"><img loading="lazy" alt="Image with className" class="custom-class" height="300" width="300" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-384,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max 2x" src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max"><img loading="eager" alt="Image with lazy loading eager" height="300" width="300" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-384,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max 2x" src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max"><img loading="lazy" alt="Image with path transformation" height="300" width="300" srcset="https://ik.imagekit.io/demo/tr:w-384,c-at_max/default-image.jpg 1x, https://ik.imagekit.io/demo/tr:w-640,c-at_max/default-image.jpg 2x" src="https://ik.imagekit.io/demo/tr:w-640,c-at_max/default-image.jpg"><img loading="lazy" alt="Image with path transformation + custom transformations" height="300" width="300" srcset="https://ik.imagekit.io/demo/tr:h-100,w-100:w-384,c-at_max/default-image.jpg 1x, https://ik.imagekit.io/demo/tr:h-100,w-100:w-640,c-at_max/default-image.jpg 2x" src="https://ik.imagekit.io/demo/tr:h-100,w-100:w-640,c-at_max/default-image.jpg"><img loading="lazy" alt="path not respected with absolute url" height="300" width="300" srcset="https://ik.imagekit/demo/default-image.jpg?tr=w-384,c-at_max 1x, https://ik.imagekit/demo/default-image.jpg?tr=w-640,c-at_max 2x" src="https://ik.imagekit/demo/default-image.jpg?tr=w-640,c-at_max"><img loading="lazy" alt="Image with responsive off" height="300" width="300" src="https://ik.imagekit.io/demo/default-image.jpg?tr=n-restrict-unnamed:w-3840,c-at_max"><h1>Video</h1><video title="Video without ImageKit provider" height="300" width="300" controls="" src="https://ik.imagekit.io/demo/sample-video.mp4"></video><video title="Video with ImageKit provider" height="300" width="300" controls="" src="https://ik.imagekit.io/demo/sample-video.mp4"></video><video title="Video with transformations" height="300" width="300" controls="" src="https://ik.imagekit.io/demo/sample-video.mp4?tr=h-100,w-100"></video><video title="Video with all props" height="300" width="300" controls="" autoplay="" loop="" playsinline="" preload="none" poster="https://ik.imagekit.io/demo/default-image.jpg" src="https://ik.imagekit.io/demo/sample-video.mp4"></video><video title="Video with urlEndpoint override" height="300" width="300" controls="" src="https://ik.imagekit.io/demo2/sample-video.mp4?tr=h-100,w-100"></video></div></div>

test-app/e2e/__snapshot__/ssr.spec.ts/SSR-test-case-1.txt

@@ -0,0 +1 @@
+<div class="container"><div><h1>Image</h1><img loading="lazy" alt="Image without ImageKit provider" height="300" width="300" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-384,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max 2x" src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max"><img loading="lazy" alt="Image with ImageKit provider" height="300" width="300" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-384,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max 2x" src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max"><img loading="lazy" alt="Image with width not number, should produce larger srcset" width="300px" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max 640w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-750,c-at_max 750w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-828,c-at_max 828w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1080,c-at_max 1080w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1200,c-at_max 1200w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1920,c-at_max 1920w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-2048,c-at_max 2048w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-3840,c-at_max 3840w" src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-3840,c-at_max"><img loading="lazy" alt="With transformation" height="300" width="300" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=h-100,w-100:w-384,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=h-100,w-100:w-640,c-at_max 2x" src="https://ik.imagekit.io/demo/default-image.jpg?tr=h-100,w-100:w-640,c-at_max"><img loading="lazy" alt="Image with queryParameters" height="300" width="300" srcset="https://ik.imagekit.io/demo/default-image.jpg?version=v1&amp;tr=h-100,w-100:w-384,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?version=v1&amp;tr=h-100,w-100:w-640,c-at_max 2x" src="https://ik.imagekit.io/demo/default-image.jpg?version=v1&amp;tr=h-100,w-100:w-640,c-at_max"><img loading="lazy" alt="Responsive image with sizes" height="300" width="300" sizes="(max-width: 600px) 100vw, 50vw" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-384,c-at_max 384w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max 640w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-750,c-at_max 750w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-828,c-at_max 828w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1080,c-at_max 1080w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1200,c-at_max 1200w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1920,c-at_max 1920w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-2048,c-at_max 2048w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-3840,c-at_max 3840w" src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-3840,c-at_max"><img loading="lazy" alt="Responsive image with sizes - should have very large srcset for all breakpoints" height="300" width="300" sizes="300px" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-16,c-at_max 16w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-32,c-at_max 32w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-48,c-at_max 48w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-64,c-at_max 64w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-96,c-at_max 96w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-128,c-at_max 128w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-256,c-at_max 256w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-384,c-at_max 384w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max 640w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-750,c-at_max 750w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-828,c-at_max 828w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1080,c-at_max 1080w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1200,c-at_max 1200w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-1920,c-at_max 1920w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-2048,c-at_max 2048w, https://ik.imagekit.io/demo/default-image.jpg?tr=w-3840,c-at_max 3840w" src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-3840,c-at_max"><img loading="lazy" alt="Image with urlEndpoint override" height="300" width="300" srcset="https://ik.imagekit.io/demo2/default-image.jpg?tr=h-100,w-100:w-384,c-at_max 1x, https://ik.imagekit.io/demo2/default-image.jpg?tr=h-100,w-100:w-640,c-at_max 2x" src="https://ik.imagekit.io/demo2/default-image.jpg?tr=h-100,w-100:w-640,c-at_max"><img loading="lazy" alt="Image with className" class="custom-class" height="300" width="300" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-384,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max 2x" src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max"><img loading="eager" alt="Image with lazy loading eager" height="300" width="300" srcset="https://ik.imagekit.io/demo/default-image.jpg?tr=w-384,c-at_max 1x, https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max 2x" src="https://ik.imagekit.io/demo/default-image.jpg?tr=w-640,c-at_max"><img loading="lazy" alt="Image with path transformation" height="300" width="300" srcset="https://ik.imagekit.io/demo/tr:w-384,c-at_max/default-image.jpg 1x, https://ik.imagekit.io/demo/tr:w-640,c-at_max/default-image.jpg 2x" src="https://ik.imagekit.io/demo/tr:w-640,c-at_max/default-image.jpg"><img loading="lazy" alt="Image with path transformation + custom transformations" height="300" width="300" srcset="https://ik.imagekit.io/demo/tr:h-100,w-100:w-384,c-at_max/default-image.jpg 1x, https://ik.imagekit.io/demo/tr:h-100,w-100:w-640,c-at_max/default-image.jpg 2x" src="https://ik.imagekit.io/demo/tr:h-100,w-100:w-640,c-at_max/default-image.jpg"><img loading="lazy" alt="path not respected with absolute url" height="300" width="300" srcset="https://ik.imagekit/demo/default-image.jpg?tr=w-384,c-at_max 1x, https://ik.imagekit/demo/default-image.jpg?tr=w-640,c-at_max 2x" src="https://ik.imagekit/demo/default-image.jpg?tr=w-640,c-at_max"><img loading="lazy" alt="Image with responsive off" height="300" width="300" src="https://ik.imagekit.io/demo/default-image.jpg?tr=n-restrict-unnamed:w-3840,c-at_max"><h1>Video</h1><video title="Video without ImageKit provider" height="300" width="300" controls="" src="https://ik.imagekit.io/demo/sample-video.mp4"></video><video title="Video with ImageKit provider" height="300" width="300" controls="" src="https://ik.imagekit.io/demo/sample-video.mp4"></video><video title="Video with transformations" height="300" width="300" controls="" src="https://ik.imagekit.io/demo/sample-video.mp4?tr=h-100,w-100"></video><video title="Video with all props" height="300" width="300" controls="" autoplay="" loop="" muted="" playsinline="" preload="none" poster="https://ik.imagekit.io/demo/default-image.jpg" src="https://ik.imagekit.io/demo/sample-video.mp4"></video><video title="Video with urlEndpoint override" height="300" width="300" controls="" src="https://ik.imagekit.io/demo2/sample-video.mp4?tr=h-100,w-100"></video></div></div>

test-app/e2e/csr.spec.ts

@@ -0,0 +1,22 @@
+import { test, expect } from "@playwright/test";
+
+test("CSR test case", async ({ page }) => {
+  await page.goto("/csr");
+
+  // Scroll to the bottom of the page
+  await page.evaluate(() => {
+    window.scrollTo(0, document.body.scrollHeight);
+  });
+
+  await page.waitForTimeout(2000); // Wait for 2 seconds
+
+
+  // Locate the output element (adjust selector as needed)
+  const outputElement = page.locator('.container');
+
+  // Grab the entire HTML from the element
+  const outputHtml = await outputElement.evaluate(el => el.outerHTML);
+
+  // Compare against a stored snapshot
+  expect(outputHtml).toMatchSnapshot();
+});

test-app/e2e/ssr.spec.ts

@@ -0,0 +1,21 @@
+import { test, expect } from "@playwright/test";
+
+test("SSR test case", async ({ page }) => {
+  await page.goto("/ssr");
+
+  // Scroll to the bottom of the page
+  await page.evaluate(() => {
+    window.scrollTo(0, document.body.scrollHeight);
+  });
+
+  await page.waitForTimeout(2000); // Wait for 2 seconds
+
+  // Locate the output element (adjust selector as needed)
+  const outputElement = page.locator('.container');
+
+  // Grab the entire HTML from the element
+  const outputHtml = await outputElement.evaluate(el => el.outerHTML);
+
+  // Compare against a stored snapshot
+  expect(outputHtml).toMatchSnapshot();
+});