@afixt/test-utils 1.1.8 → 1.2.1

package/test/playwright/css-pseudo-elements.spec.js

@@ -9,19 +9,18 @@ const { test, expect } = require('@playwright/test');
 const path = require('path');
 
 test.describe('CSS Pseudo-element Support', () => {
-  test.beforeEach(async ({ page }) => {
-    // Load the test fixture HTML
-    const fixturePath = path.join(__dirname, 'fixtures', 'css-pseudo-elements.html');
-    await page.goto(`file://${fixturePath}`);
-
-    // Inject the functions into the page
-    await page.addScriptTag({
-      content: `
-        // Fix getComputedStyle usage and make it work in browser
+    test.beforeEach(async ({ page }) => {
+        // Load the test fixture HTML
+        const fixturePath = path.join(__dirname, 'fixtures', 'css-pseudo-elements.html');
+        await page.goto(`file://${fixturePath}`);
+
+        // Inject the functions into the page
+        await page.addScriptTag({
+            content: `
+        // getGeneratedContent: includes textContent alongside pseudo-element content
         function getGeneratedContent(el) {
           if (!el) return false;
 
-          // Get pseudo-element content properly
           const beforeStyle = window.getComputedStyle(el, '::before');
           const afterStyle = window.getComputedStyle(el, '::after');
 
@@ -29,11 +28,9 @@ test.describe('CSS Pseudo-element Support', () => {
           let after = afterStyle.getPropertyValue('content') || '';
           const inner = el.textContent || '';
 
-          // Remove quotes from CSS content values
           before = before.replace(/^["']|["']$/g, '');
           after = after.replace(/^["']|["']$/g, '');
 
-          // Filter out 'none' values
           if (before === 'none') before = '';
           if (after === 'none') after = '';
 
@@ -41,115 +38,251 @@ test.describe('CSS Pseudo-element Support', () => {
           return result || false;
         }
 
+        // extractMeaningfulContent: helper for getCSSGeneratedContent
+        function extractMeaningfulContent(rawValue) {
+          if (!rawValue || rawValue === 'none' || rawValue === 'normal') {
+            return false;
+          }
+          let cleaned = rawValue.replace(/^["'](.*)["']$/, '$1');
+          cleaned = cleaned.trim();
+          return cleaned.length > 0 ? cleaned : false;
+        }
+
+        // getCSSGeneratedContent: only checks ::before and ::after pseudo-elements
+        function getCSSGeneratedContent(el, pseudoElement) {
+          if (pseudoElement === undefined) pseudoElement = 'both';
+          if (!el) return false;
+
+          let content = '';
+
+          try {
+            if (pseudoElement === 'before' || pseudoElement === 'both') {
+              const style = window.getComputedStyle(el, '::before');
+              const before = style.getPropertyValue('content');
+              const cleanBefore = extractMeaningfulContent(before);
+              if (cleanBefore) {
+                content += cleanBefore;
+              }
+            }
+
+            if (pseudoElement === 'after' || pseudoElement === 'both') {
+              const style = window.getComputedStyle(el, '::after');
+              const after = style.getPropertyValue('content');
+              const cleanAfter = extractMeaningfulContent(after);
+              if (cleanAfter) {
+                content += (content ? ' ' : '') + cleanAfter;
+              }
+            }
+          } catch (e) {
+            return false;
+          }
+
+          return content ? content.trim() : false;
+        }
+
         function hasCSSGeneratedContent(el) {
           if (!el) return false;
-          const content = getGeneratedContent(el);
+          const content = getCSSGeneratedContent(el);
           return content !== false;
         }
 
         // Make functions globally available
         window.getGeneratedContent = getGeneratedContent;
+        window.getCSSGeneratedContent = getCSSGeneratedContent;
         window.hasCSSGeneratedContent = hasCSSGeneratedContent;
-      `
+      `,
+        });
     });
-  });
 
-  test.describe('getGeneratedContent', () => {
-    test('should return ::before content when present', async ({ page }) => {
-      const result = await page.evaluate(() => {
-        const element = document.getElementById('with-before');
-        return window.getGeneratedContent(element);
-      });
+    test.describe('getGeneratedContent', () => {
+        test('should return ::before content when present', async ({ page }) => {
+            const result = await page.evaluate(() => {
+                const element = document.getElementById('with-before');
+                return window.getGeneratedContent(element);
+            });
 
-      expect(result).toContain('Before Content');
-    });
+            expect(result).toContain('Before Content');
+        });
 
-    test('should return ::after content when present', async ({ page }) => {
-      const result = await page.evaluate(() => {
-        const element = document.getElementById('with-after');
-        return window.getGeneratedContent(element);
-      });
+        test('should return ::after content when present', async ({ page }) => {
+            const result = await page.evaluate(() => {
+                const element = document.getElementById('with-after');
+                return window.getGeneratedContent(element);
+            });
 
-      expect(result).toContain('After Content');
-    });
+            expect(result).toContain('After Content');
+        });
 
-    test('should combine ::before, text content, and ::after', async ({ page }) => {
-      const result = await page.evaluate(() => {
-        const element = document.getElementById('with-both');
-        return window.getGeneratedContent(element);
-      });
+        test('should combine ::before, text content, and ::after', async ({ page }) => {
+            const result = await page.evaluate(() => {
+                const element = document.getElementById('with-both');
+                return window.getGeneratedContent(element);
+            });
 
-      expect(result).toContain('Before');
-      expect(result).toContain('Text Content');
-      expect(result).toContain('After');
-    });
+            expect(result).toContain('Before');
+            expect(result).toContain('Text Content');
+            expect(result).toContain('After');
+        });
 
-    test('should handle quoted content values in CSS', async ({ page }) => {
-      const result = await page.evaluate(() => {
-        const element = document.getElementById('with-quotes');
-        return window.getGeneratedContent(element);
-      });
+        test('should handle quoted content values in CSS', async ({ page }) => {
+            const result = await page.evaluate(() => {
+                const element = document.getElementById('with-quotes');
+                return window.getGeneratedContent(element);
+            });
 
-      expect(result).toBeTruthy();
-      expect(result).toContain('Quoted');
-    });
+            expect(result).toBeTruthy();
+            expect(result).toContain('Quoted');
+        });
 
-    test('should handle CSS content with special characters', async ({ page }) => {
-      const result = await page.evaluate(() => {
-        const element = document.getElementById('with-special-chars');
-        return window.getGeneratedContent(element);
-      });
+        test('should handle CSS content with special characters', async ({ page }) => {
+            const result = await page.evaluate(() => {
+                const element = document.getElementById('with-special-chars');
+                return window.getGeneratedContent(element);
+            });
 
-      expect(result).toBeTruthy();
-    });
+            expect(result).toBeTruthy();
+        });
 
-    test('should trim whitespace from the combined result', async ({ page }) => {
-      const result = await page.evaluate(() => {
-        const element = document.getElementById('with-whitespace');
-        return window.getGeneratedContent(element);
-      });
+        test('should trim whitespace from the combined result', async ({ page }) => {
+            const result = await page.evaluate(() => {
+                const element = document.getElementById('with-whitespace');
+                return window.getGeneratedContent(element);
+            });
 
-      expect(result).toBeTruthy();
-      expect(result.startsWith(' ')).toBe(false);
-      expect(result.endsWith(' ')).toBe(false);
-    });
+            expect(result).toBeTruthy();
+            expect(result.startsWith(' ')).toBe(false);
+            expect(result.endsWith(' ')).toBe(false);
+        });
 
-    test('should handle nested elements with generated content', async ({ page }) => {
-      const result = await page.evaluate(() => {
-        const element = document.getElementById('nested-content');
-        return window.getGeneratedContent(element);
-      });
+        test('should handle nested elements with generated content', async ({ page }) => {
+            const result = await page.evaluate(() => {
+                const element = document.getElementById('nested-content');
+                return window.getGeneratedContent(element);
+            });
 
-      expect(result).toBeTruthy();
-    });
+            expect(result).toBeTruthy();
+        });
 
-    test('should handle content with HTML entities in CSS', async ({ page }) => {
-      const result = await page.evaluate(() => {
-        const element = document.getElementById('with-entities');
-        return window.getGeneratedContent(element);
-      });
+        test('should handle content with HTML entities in CSS', async ({ page }) => {
+            const result = await page.evaluate(() => {
+                const element = document.getElementById('with-entities');
+                return window.getGeneratedContent(element);
+            });
 
-      expect(result).toBeTruthy();
+            expect(result).toBeTruthy();
+        });
     });
-  });
 
-  test.describe('hasCSSGeneratedContent', () => {
-    test('should correctly identify elements with ::before content', async ({ page }) => {
-      const result = await page.evaluate(() => {
-        const element = document.getElementById('with-before');
-        return window.hasCSSGeneratedContent(element);
-      });
+    test.describe('getCSSGeneratedContent', () => {
+        test('should get ::before content', async ({ page }) => {
+            const result = await page.evaluate(() => {
+                const element = document.getElementById('with-before');
+                return window.getCSSGeneratedContent(element, 'before');
+            });
+
+            expect(result).toBe('Before Content');
+        });
+
+        test('should get ::after content', async ({ page }) => {
+            const result = await page.evaluate(() => {
+                const element = document.getElementById('with-after');
+                return window.getCSSGeneratedContent(element, 'after');
+            });
 
-      expect(result).toBe(true);
+            expect(result).toBe('After Content');
+        });
+
+        test('should get both ::before and ::after content', async ({ page }) => {
+            const result = await page.evaluate(() => {
+                const element = document.getElementById('with-both');
+                return window.getCSSGeneratedContent(element);
+            });
+
+            expect(result).toContain('Before');
+            expect(result).toContain('After');
+        });
+
+        test('should handle quoted content', async ({ page }) => {
+            const result = await page.evaluate(() => {
+                const element = document.getElementById('with-quotes');
+                return window.getCSSGeneratedContent(element, 'before');
+            });
+
+            expect(result).toBeTruthy();
+            expect(result).toContain('Quoted');
+        });
+
+        test('should handle URL content', async ({ page }) => {
+            const result = await page.evaluate(() => {
+                const element = document.getElementById('url-content');
+                return window.getCSSGeneratedContent(element, 'before');
+            });
+
+            expect(result).toBeTruthy();
+        });
+
+        test('should default pseudoElement to both', async ({ page }) => {
+            const result = await page.evaluate(() => {
+                const element = document.getElementById('with-before');
+                return window.getCSSGeneratedContent(element);
+            });
+
+            expect(result).toBe('Before Content');
+        });
+
+        test('should return false for empty content', async ({ page }) => {
+            const result = await page.evaluate(() => {
+                const element = document.getElementById('empty-content');
+                return window.getCSSGeneratedContent(element);
+            });
+
+            expect(result).toBe(false);
+        });
+
+        test('should return false for content: none', async ({ page }) => {
+            const result = await page.evaluate(() => {
+                const element = document.getElementById('no-content');
+                return window.getCSSGeneratedContent(element);
+            });
+
+            expect(result).toBe(false);
+        });
+
+        test('should return false for null element', async ({ page }) => {
+            const result = await page.evaluate(() => {
+                return window.getCSSGeneratedContent(null);
+            });
+
+            expect(result).toBe(false);
+        });
+
+        test('should return false for elements with no pseudo-element styles', async ({ page }) => {
+            const result = await page.evaluate(() => {
+                const element = document.getElementById('plain-div');
+                return window.getCSSGeneratedContent(element);
+            });
+
+            expect(result).toBe(false);
+        });
     });
 
-    test('should correctly identify elements with ::after content', async ({ page }) => {
-      const result = await page.evaluate(() => {
-        const element = document.getElementById('with-after');
-        return window.hasCSSGeneratedContent(element);
-      });
+    test.describe('hasCSSGeneratedContent', () => {
+        test('should correctly identify elements with ::before content', async ({ page }) => {
+            const result = await page.evaluate(() => {
+                const element = document.getElementById('with-before');
+                return window.hasCSSGeneratedContent(element);
+            });
+
+            expect(result).toBe(true);
+        });
+
+        test('should correctly identify elements with ::after content', async ({ page }) => {
+            const result = await page.evaluate(() => {
+                const element = document.getElementById('with-after');
+                return window.hasCSSGeneratedContent(element);
+            });
 
-      expect(result).toBe(true);
+            expect(result).toBe(true);
+        });
     });
-  });
 });

package/test/playwright/fixtures/css-pseudo-elements.html

@@ -52,6 +52,10 @@
     #no-content::before {
       content: none;
     }
+
+    #url-content::before {
+      content: url('data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7');
+    }
   </style>
 </head>
 <body>
@@ -67,6 +71,8 @@
   <div id="with-entities">Entities</div>
   <div id="empty-content">Empty</div>
   <div id="no-content">None</div>
+  <div id="url-content">URL Content</div>
+  <div id="plain-div">Plain div no pseudo-elements</div>
 
   <!-- Load the functions we need directly in the page -->
   <script type="module">