Merge pull request #46 from schoenbergerb/45-visual-regression-testing

45 visual regression testing
schoenbergerb · Feb 1, 2024 · e0a8399 · e0a8399
2 parents ead7cd5 + 456913b
commit e0a8399
Show file tree

Hide file tree

Showing 10 changed files with 995 additions and 7,405 deletions.
diff --git a/.github/workflows/deployment.yml b/.github/workflows/deployment.yml
@@ -8,31 +8,34 @@ on:
 
 jobs:
   deploy:
-  
+
     runs-on: ubuntu-latest
-    
+
     steps:
-    
+
        - name: checkout code
          uses: actions/checkout@v2
 
        - name: setup node
          uses: actions/setup-node@v2
          with:
-           node-version: '16'
-           registry-url: https://npm.pkg.github.com 
+           node-version: '20'
+           registry-url: https://npm.pkg.github.com
 
        - name: install dependencies
          run: npm install
 
        - name: build
          run: npm run build
 
-       - name: test
-         run: npm t
+       - name: Install playwright browsers
+         run: npx playwright install --with-deps
+
+       - name: Run tests
+         run: npx playwright test --update-snapshots --reporter=list
 
        - name: security
          run: echo "//registry.npmjs.org/:_authToken=${{ secrets.NPM_TOKEN }}" > .npmrc
 
        - name: deploy npmjs.com
-         run: npm publish --access public
+         run: npm publish --access public
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
@@ -0,0 +1,35 @@
+#
+name: "functional and visual test"
+
+on:
+  push:
+    branches:
+      - '*'
+
+jobs:
+  deploy:
+
+    runs-on: ubuntu-latest
+
+    steps:
+
+       - name: checkout code
+         uses: actions/checkout@v2
+
+       - name: setup node
+         uses: actions/setup-node@v2
+         with:
+           node-version: '20'
+           registry-url: https://npm.pkg.github.com
+
+       - name: install dependencies
+         run: npm install
+
+       - name: build
+         run: npm run build
+
+       - name: Install playwright browsers
+         run: npx playwright install --with-deps
+
+       - name: Run tests
+         run: npx playwright test --update-snapshots --reporter=list
diff --git a/.gitignore b/.gitignore
@@ -9,4 +9,8 @@ translation.json
 out/
 dist/
 
-*.html
+*.html
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/
diff --git a/example/demo.ts b/example/demo.ts
@@ -1,35 +1,101 @@
 import express from 'express';
-import {Noscrape} from "../src";
+import {EncryptionCharacterRange, Noscrape} from "../src";
 
 const app = express()
 
+app.get('/example.ttf', (_, res) => {
+    res.sendFile(__dirname + '/example.ttf')
+})
+
 app.get('/', (req, res) => {
-    const noscrape = new Noscrape(__dirname + "/example.ttf");
+    const noscrape = new Noscrape(__dirname + "/example.ttf", {
+        characterRange: EncryptionCharacterRange.PRIVATE_USE_AREA,
+        strength: 0.00000000000001
+    });
 
-    const test1= noscrape.obfuscate("test1");
-    const test2= noscrape.obfuscate(123456789);
-    const test3 = noscrape.obfuscate({ data: "a-nice-object" });
-    const test4 = noscrape.obfuscate( "abcdefghijklmnopqrstuvwxyz1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ!\"§$%&/()=¹²³¼½¬{[]},.-;:_·…–<>|");
+    const test1 = noscrape.obfuscate("ftest1");
+    const test2 = noscrape.obfuscate(123456789);
+    const test3 = noscrape.obfuscate({data: "a-nice-object"});
+    const test4 = noscrape.obfuscate("abcdefghijklmnopqrstuvwxyz");
+    const test5 = noscrape.obfuscate("ABCDEFGHIJKLMNOPQRSTUVWXYZ");
+    const test6 = noscrape.obfuscate("!\"§$%&/()=¹²³¼½¬{[]},.-;:_·…–<>|");
 
     // language=HTML
     res.send(`
         <html lang="en">
-            <head>
-                <title>Noscrape - DEMO</title>   
-                <style>
-                    @font-face {        
-                        font-family: 'noscrape-obfuscated';        
-                        src: url('data:font/truetype;charset=utf-8;base64,${noscrape.getFont().toString('base64')}');    
-                    }
-                </style>   
-            </head>
-            <body style="font-family: 'noscrape-obfuscated'">
-                <p>${test1}</p>
-                <p>${test2}</p>
-                <p>${test3.data}</p>
-                <p>${test4}</p>
-            </body>
-        </html>    
+        <head>
+            <title>Noscrape - DEMO</title>
+            <style>
+                @font-face {
+                    font-family: 'original-font';
+                    src: url('/example.ttf');
+                }
+
+                @font-face {
+                    font-family: 'noscrape-obfuscated';
+                    src: url('data:font/truetype;charset=utf-8;base64,${noscrape.getFont().toString('base64')}');
+                }
+            </style>
+        </head>
+        <body class="">
+        
+        <div style="width: 270px; height: 150px; overflow: hidden;">
+            <table id="original">
+                <tr>
+                    <td style="font-family: 'original-font'">ftest1</td>
+                </tr>
+                <tr>
+                    <td style="font-family: 'original-font'">123456789</td>
+                </tr>
+                <tr>
+                    <td style="font-family: 'original-font'">a-nice-object</td>
+                </tr>
+                <tr>
+                    <td style="font-family: 'original-font'">
+                        abcdefghijklmnopqrstuvwxyz
+                    </td>
+                </tr>
+                <tr>
+                    <td style="font-family: 'original-font'">
+                        ABCDEFGHIJKLMNOPQRSTUVWXYZ
+                    </td>
+                </tr>
+                <tr>
+                    <td style="font-family: 'original-font'">
+                        !\"§$%&/()=¹²³¼½¬{[]},.-;:_·…–<>|
+                    </td>
+                </tr>
+            </table>
+        </div>
+
+        <br/>
+        <br/>
+        <br/>
+        <br/>
+        <div style="width: 270px; height: 150px; overflow: hidden;">
+            <table id="obfuscated">
+                <tr>
+                    <td style="font-family: 'noscrape-obfuscated'">${test1}</td>
+                </tr>
+                <tr>
+                    <td style="font-family: 'noscrape-obfuscated'">${test2}</td>
+                </tr>
+                <tr>
+                    <td style="font-family: 'noscrape-obfuscated'">${test3.data}</td>
+                </tr>
+                <tr>
+                    <td style="font-family: 'noscrape-obfuscated'">${test4}</td>
+                </tr>
+                <tr>
+                    <td style="font-family: 'noscrape-obfuscated'">${test5}</td>
+                </tr>
+                <tr>
+                    <td style="font-family: 'noscrape-obfuscated'">${test6}</td>
+                </tr>
+            </table>
+        </div>
+        </body>
+        </html>
     `)
 })