Merge pull request #1577 from keepassxreboot/feature/move_tests_to_playwright

Move content script tests to Playwright

package.json

@@ -4,21 +4,19 @@
   "description": "KeePassXC-Browser",
   "main": "build.js",
   "devDependencies": {
-    "eslint": "^6.8.0",
+    "@playwright/test": "^1.20.0",
+    "eslint": "^8.11.0",
     "eslint-config-airbnb-base": "^14.2.0",
-    "eslint-plugin-import": "^2.24.2",
-    "mocha": "^8.4.0",
-    "zip-a-folder": "0.0.12"
+    "eslint-plugin-import": "^2.24.2"
   },
   "dependencies": {
     "file-url": "^3.0.0",
     "fs-extra": "^8.1.0",
-    "selenium-webdriver": "^3.6.0",
-    "soft-assert": "^0.2.6"
+    "zip-a-folder": "0.0.12"
   },
   "scripts": {
     "build": "node build.js",
-    "tests": "./node_modules/mocha/bin/mocha run_tests.js"
+    "tests": "npx playwright test"
   },
   "repository": {
     "type": "git",

playwright.config.js

@@ -0,0 +1,36 @@
+const { devices } = require('@playwright/test');
+
+const config = {
+    testDir: './tests',
+    timeout: 30 * 1000,
+    expect: {
+        timeout: 5000
+    },
+    forbidOnly: !!process.env.CI,
+    globalSetup: require.resolve('./tests/global-setup'),
+    globalTeardown: require.resolve('./tests/global-teardown'),
+    retries: process.env.CI ? 2 : 0,
+    workers: process.env.CI ? 1 : undefined,
+    reporter: 'list',
+    use: {
+        actionTimeout: 0,
+        trace: 'on-first-retry',
+    },
+    projects: [
+        {
+            name: 'chromium',
+            use: {
+            ...devices['Desktop Chrome'],
+            },
+        },
+        {
+            name: 'firefox',
+            use: {
+            ...devices['Desktop Firefox'],
+            },
+        },
+    ],
+    testMatch: 'content-script-tests.js',
+};
+
+module.exports = config;

run_tests.js

@@ -1,65 +0,0 @@
-const firefox = require('selenium-webdriver/firefox'),
-    webdriver = require('selenium-webdriver'),
-    By = require('selenium-webdriver').By,
-    test = require('selenium-webdriver/testing'),
-    assert = require('selenium-webdriver/testing/assert'),
-    fileUrl = require('file-url'),
-    softAssert = require('soft-assert'),
-    fs = require('fs-extra');
-
-const DEST = 'keepassxc-browser/tests';
-let browser;
-
-test.before(async function(done) {
-    // Create a temporary directory and copy tests/* to keepassxc-browser/tests
-    await fs.ensureDir(DEST);
-    await fs.copy('./tests', DEST);
-
-    const options = new firefox.Options();
-    options.addArguments('--headless');
-
-    browser = await new webdriver.Builder().forBrowser('firefox').setFirefoxOptions(options).build();
-    browser.get(fileUrl(`${DEST}/tests.html`));
-    done();
-});
-
-test.after(async function() {
-    softAssert.softAssertAll();
-    browser.quit();
-
-    // Delete previously created temporary directory. Comment for re-running tests manually inside the extension.
-    await fs.remove(DEST);
-});
-
-test.describe('Content script tests', function() {
-    test.it('General tests', function() {
-        test.verifyResults('#general-results .fa');
-    });
-
-    test.it('Input field matching tests', function() {
-        test.verifyResults('#input-field-results .fa');
-    });
-
-    test.it('Search field tests', function() {
-        test.verifyResults('#search-field-results .fa');
-    });
-
-    test.it('TOTP field tests', function() {
-        test.verifyResults('#totp-field-results .fa');
-    });
-
-    test.it('Password change tests', function() {
-        test.verifyResults('#password-change-results .fa');
-    });
-
-    test.verifyResults = function(selector) {
-        browser.findElements(By.css(selector)).then(elems => {
-            elems.forEach(e => {
-                e.getAttribute('class').then(async c => {
-                    const next = await e.findElements(By.xpath('./following::span'));
-                    assert(c).contains('fa-check', await next[0].getText());
-                });
-            });
-        });
-    };
-});

tests/assert.js

@@ -19,60 +19,38 @@ function assertRegex(func, expected, card, testName) {
     createResult(card, false, `Test failed: ${testName}. Result is: ${func}`);
 }
 
-async function assertInputFields(localFile, expectedFieldCount, actionElementId) {
-    return new Promise((resolve) => {
-        const iframe = document.getElementById('testFile');
-        iframe.src = localFile;
+async function assertInputFields(localDiv, expectedFieldCount, actionElementId) {
+    return new Promise(async (resolve) => {
+        const div = document.getElementById(localDiv);
+        div.style.display = 'block';
 
-        const iframeLoaded = function() {
-            const frameContent = iframe.contentWindow.document.getElementsByTagName('body')[0];
-
-            // Load prototypes to iframe. This doesn't work automatically from ui.js
-            iframe.contentWindow.Element.prototype.getLowerCaseAttribute = function(attr) {
-                return this.getAttribute(attr) ? this.getAttribute(attr).toLowerCase() : undefined;
-            };
-
-            // An user interaction is required before testing
-            if (actionElementId) {
-                const actionElement = frameContent.querySelector(actionElementId);
-                if (actionElement) {
-                    actionElement.click();
-                }
+        // An user interaction is required before testing
+        if (actionElementId) {
+            const actionElement = div.querySelector(actionElementId);
+            if (actionElement) {
+                actionElement.click();
             }
+        }
 
-            const inputs = kpxcObserverHelper.getInputs(frameContent);
-            kpxcAssert(inputs.length, expectedFieldCount, Tests.INPUT_FIELDS, `getInputs() for ${localFile} with ${expectedFieldCount} fields`);
-            iframe.removeEventListener('load', iframeLoaded);
-            resolve();
-        };
+        const inputs = kpxcObserverHelper.getInputs(div);
+        kpxcAssert(inputs.length, expectedFieldCount, Tests.INPUT_FIELDS, `getInputs() for ${localDiv} with ${expectedFieldCount} fields`);
 
-        // Wait for iframe to load
-        iframe.addEventListener('load', iframeLoaded);
+        div.style.display = 'none';
+        resolve();
     });
 }
 
-async function assertPasswordChangeFields(localFile, expectedNewPassword) {
-    return new Promise((resolve) => {
-        const iframe = document.getElementById('testFile');
-        iframe.src = localFile;
+async function assertPasswordChangeFields(localDiv, expectedNewPassword) {
+    return new Promise(async (resolve) => {
+        const div = document.getElementById(localDiv);
+        div.style.display = 'block';
 
-        const iframeLoaded = function() {
-            const frameContent = iframe.contentWindow.document.getElementsByTagName('body')[0];
+        const inputs = kpxcObserverHelper.getInputs(div, true);
+        const newPassword = kpxcForm.getNewPassword(inputs);
+        kpxcAssert(newPassword, expectedNewPassword, Tests.PASSWORD_CHANGE, `New password matches for ${localDiv}`);
 
-            // Load prototypes to iframe. This doesn't work automatically from ui.js
-            iframe.contentWindow.Element.prototype.getLowerCaseAttribute = function(attr) {
-                return this.getAttribute(attr) ? this.getAttribute(attr).toLowerCase() : undefined;
-            };
-
-            const inputs = kpxcObserverHelper.getInputs(frameContent, true);
-            const newPassword = kpxcForm.getNewPassword(inputs);
-            kpxcAssert(newPassword, expectedNewPassword, Tests.PASSWORD_CHANGE, `New password matches for ${localFile}`);
-            iframe.removeEventListener('load', iframeLoaded);
-            resolve();
-        };
-
-        // Wait for iframe to load
-        iframe.addEventListener('load', iframeLoaded);
+        div.style.display = 'none';
+        resolve();
     });
 }
 

tests/content-script-tests.js

@@ -0,0 +1,46 @@
+'use strict';
+
+const { test, expect } = require('@playwright/test');
+const fileUrl = require('file-url');
+
+const DEST = 'keepassxc-browser/tests';
+
+let page;
+
+test.describe('Content script tests', () => {
+    test.beforeAll(async ({ browser }) => {
+        page = await browser.newPage();
+        await page.goto(fileUrl(`${DEST}/tests.html`));
+    });
+
+    test('General tests', async () => {
+        await verifyResults('general-results');
+    });
+
+    test('Input field matching tests', async() => {
+        await verifyResults('input-field-results');
+    });
+
+    test('Search field tests', async () => {
+        await verifyResults('search-field-results');
+    });
+
+    test('TOTP field tests', async () => {
+        await verifyResults('totp-field-results');
+    });
+
+    test('Password change tests', async () => {
+        await verifyResults('password-change-results');
+    });
+});
+
+const verifyResults = async(selector) => {
+    const resultCount = await page.locator(`css=#${selector} >> css=.fa`).count();
+    await expect.soft(resultCount).toBeGreaterThan(0);
+
+    for (var i = 0; i < resultCount; i++) {
+        const elem = await page.locator(`css=#${selector} >> css=.fa`).nth(i);
+        const id = await elem.getAttribute('id');
+        await expect.soft(elem, id).toHaveClass('fa fa-check');
+    }
+};

tests/global-setup.js

@@ -0,0 +1,9 @@
+const fs = require('fs-extra');
+
+const DEST = 'keepassxc-browser/tests';
+
+module.exports = async config => {
+    // Create a temporary directory and copy tests/* to keepassxc-browser/tests
+    await fs.ensureDir(DEST);
+    await fs.copy('./tests', DEST);
+};

tests/global-teardown.js

@@ -0,0 +1,8 @@
+const fs = require('fs-extra');
+
+const DEST = 'keepassxc-browser/tests';
+
+module.exports = async config => {
+    // Delete previously created temporary directory. Comment for re-running tests manually inside the extension.
+    await fs.remove(DEST);
+};

tests/html/basic1.html

@@ -1,6 +0,0 @@
-<html>
-<body>
-<input placeholder="username" type="text" name="loginField">
-<input placeholder="password" type="password" name="passwordField">
-</body>
-</html>

tests/html/basic2.html

@@ -1,5 +0,0 @@
-<html>
-<body>
-<input placeholder="username" type="text" name="loginField">
-</body>
-</html>

tests/html/basic3.html

@@ -1,5 +0,0 @@
-<html>
-<body>
-<input placeholder="password" type="password" name="passwordField">
-</body>
-</html>

tests/html/basic4.html

@@ -1,7 +0,0 @@
-<html>
-<body>
-<input placeholder="username" type="text" name="loginField">
-<input placeholder="password" type="password" name="passwordField">
-<input type="text" id="auth">
-</body>
-</html>

tests/html/div1.html

@@ -1,14 +0,0 @@
-<html>
-  <head>
-    <script defer src="div1.js"></script>
-  </head>
-<body>
-
-<button id="toggle">View login form</button>
-<div id="loginForm" style="display: none;">
-    <input placeholder="username" type="text" name="loginField">
-    <input placeholder="password" type="password" name="passwordField">
-</div>
-
-</body>
-</html>

tests/html/div2.html

@@ -1,21 +0,0 @@
-<html>
-  <head>
-    <script defer src="div2.js"></script>
-  </head>
-<body>
-
-<button id="toggle">View login form</button>
-
-<div id="dialog" style="position: relative; z-index: auto;">
-    <div id="outer" style="overflow: hidden; height: 0px;">
-        <div id="inner" style="margin: -197px auto auto;">
-            <form method="post" class="signin" action="#">
-                <input placeholder="username" type="text" name="loginField">
-                <input placeholder="password" type="password" name="passwordField">
-            </form>
-        </div>
-    </div>
-</div>
-
-</body>
-</html>

tests/html/div3.html

@@ -1,10 +0,0 @@
-<html>
-  <head>
-    <script defer src="div3.js"></script>
-  </head>
-<body>
-
-<button id="toggle">View login form</button>
-
-</body>
-</html>

tests/html/div4.html

@@ -1,10 +0,0 @@
-<html>
-  <head>
-    <script defer src="div4.js"></script>
-  </head>
-<body>
-
-<button id="toggle">View login form</button>
-
-</body>
-</html>

tests/html/hidden_fields1.html

@@ -1,12 +0,0 @@
-<html>
-<body>
-<div style="margin-left: -500px;">
-    <input placeholder="outsideLeft" type="password" name="outsideLeft">
-</div>
-
-<div style="margin-top: -500px;">
-    <input placeholder="outsideTop" type="password" name="outsideTop">
-</div>
-
-</body>
-</html>

tests/html/hidden_fields2.html

@@ -1,18 +0,0 @@
-<html>
-<style>
-.hiddenOne {
-    visibility: hidden;
-}
-</style>
-<body>
-<div>
-    <input placeholder="zeroSize" type="password" name="zeroSize" style="width: 0px; height: 0px;">
-    <input placeholder="oneSize" type="password" name="oneSize" style="width: 1px; height: 1px;">
-    <input placeholder="visibilityHidden" type="password" name="visibilityHidden" style="visibility: hidden;">
-    <input placeholder="visibilityCollapse" type="password" name="visibilityCollapse" style="visibility: collapse;">
-    <input placeholder="displayNone" type="password" name="displayNone" style="display: none;">
-    <input placeholder="hiddenOne" type="password" name="hiddenOne" class="hiddenOne">
-    <input placeholder="normal" type="password" name="normal">
-</div>
-</body>
-</html>

tests/html/passwordchange1.html

@@ -1,7 +0,0 @@
-<html>
-<body>
-<br /><input type="password" name="Old password" value="oldPassword">
-<br /><input type="password" name="New password" value="newPassword">
-<br /><input type="password" name="Repeat password" value="newPassword">
-</body>
-</html>

tests/html/passwordchange2.html

@@ -1,7 +0,0 @@
-<html>
-<body>
-<br /><input type="password" name="New password" value="newPassword">
-<br /><input type="password" name="Repeat password" value="newPassword">
-<br /><input type="password" name="Old password" value="oldPassword">
-</body>
-</html>

tests/html/passwordchange3.html

@@ -1,10 +0,0 @@
-<html>
-<body>
-<form action="secondPage">
-<br /><input type="password" name="Old password" value="oldPassword">
-<br /><input type="password" name="New password" value="newPassword">
-<br /><input type="password" name="Repeat password" value="newPassword">
-<br /><input type="submit" value="Change password">
-</form>
-</body>
-</html>

tests/html/passwordchange4.html

@@ -1,10 +0,0 @@
-<html>
-<body>
-<form action="secondPage">
-<br /><input type="password" name="New password" value="newPassword">
-<br /><input type="password" name="Repeat password" value="newPassword">
-<br /><input type="password" name="Old password" value="oldPassword">
-<br /><input type="submit" value="Change password">
-</form>
-</body>
-</html>

tests/html/passwordchange5.html

@@ -1,17 +0,0 @@
-<html>
-<body>
-
-<form action="firstForm">
-<br /><input type="password" name="Old password" value="oldPassword">
-</form>
-
-<form action="secondForm">
-<br /><input type="password" name="New password" value="newPassword">
-</form>
-
-<form action="thirdForm">
-<br /><input type="password" name="Repeat password" value="newPassword">
-</form>
-
-</body>
-</html>

tests/scripts/div1.js

@@ -1,7 +1,7 @@
 'use script';
 
-document.getElementById('toggle').addEventListener('click', function(e) {
-    const loginForm = document.getElementById('loginForm');
+document.getElementById('toggle1').addEventListener('click', function(e) {
+    const loginForm = document.getElementById('loginForm1');
 
     if (loginForm.style.display === 'none') {
         loginForm.style.display = 'block';

tests/scripts/div2.js

@@ -1,6 +1,6 @@
 'use script';
 
-document.getElementById('toggle').addEventListener('click', function(e) {
+document.getElementById('toggle2').addEventListener('click', function(e) {
     const dialog = document.getElementById('dialog');
     const outer = document.getElementById('outer');
     const inner = document.getElementById('inner');
@@ -9,7 +9,6 @@ document.getElementById('toggle').addEventListener('click', function(e) {
         dialog.style.zIndex = 9999;
         inner.style.margin = '0px';
         outer.style.height = 'auto';
-
     } else {
         dialog.style.zIndex = 'auto';
         inner.style.margin = '-197px';

tests/scripts/div3.js

@@ -1,6 +1,6 @@
 'use script';
 
-document.getElementById('toggle').addEventListener('click', function(e) {
+document.getElementById('toggle3').addEventListener('click', function(e) {
     const loginForm = document.getElementById('loginForm');
 
     if (!loginForm) {
@@ -19,8 +19,6 @@ document.getElementById('toggle').addEventListener('click', function(e) {
         passwordInput.setAttribute('placeholder', 'password');
         dialog.append(passwordInput);
 
-        document.body.appendChild(dialog);
-    } else {
-        document.body.removeChild(loginForm);
+        e.currentTarget.parentElement.appendChild(dialog);
     }
 });

tests/scripts/div4.js

@@ -1,11 +1,11 @@
 'use script';
 
-document.getElementById('toggle').addEventListener('click', function(e) {
-    const loginForm = document.getElementById('loginForm');
+document.getElementById('toggle4').addEventListener('click', function(e) {
+    const loginForm = document.getElementById('loginForm4');
 
     if (!loginForm) {
         const dialog = document.createElement('div');
-        dialog.setAttribute('id', 'loginForm');
+        dialog.setAttribute('id', 'loginForm4');
         dialog.style.position = 'fixed';
         dialog.style.zIndex = '1002';
 
@@ -48,8 +48,6 @@ document.getElementById('toggle').addEventListener('click', function(e) {
         wrapper.append(innerDiv);
         dialog.append(wrapper);
 
-        document.body.appendChild(dialog);
-    } else {
-        document.body.removeChild(loginForm);
+        e.currentTarget.parentElement.appendChild(dialog);
     }
 });

tests/tests.html

@@ -12,24 +12,32 @@
     <link rel="icon" type="image/png" href="../icons/keepassxc_64x64.png" sizes="64x64">
     <link rel="icon" type="image/png" href="../icons/keepassxc_96x96.png" sizes="96x96">
     <script src="../common/browser-polyfill.min.js"></script>
-    <script src="../bootstrap/jquery-3.4.1.min.js"></script>
-    <script src="../bootstrap/bootstrap.min.js"></script>
     <script defer src="../common/global.js"></script>
-    <script defer src="../common/translate.js"></script>
     <script defer src="../common/sites.js"></script>
     <script defer src="../content/ui.js"></script>
     <script defer src="../content/pwgen.js"></script>
     <script defer src="../content/define.js"></script>
     <script defer src="../content/autocomplete.js"></script>
     <script defer src="../content/banner.js"></script>
-    <script defer src="../content/sites.js"></script>
+    <script defer src="../content/credential-autocomplete.js"></script>
+    <script defer src="../content/fields.js"></script>
+    <script defer src="../content/form.js"></script>
+    <script defer src="../content/fill.js"></script>
+    <script defer src="../content/keepassxc-browser.js"></script>-->
+    <script defer src="../content/observer-helper.js"></script>
+    <script defer src="../content/totp-autocomplete.js"></script>
     <script defer src="../content/totp-field.js"></script>
-    <script defer src="../content/keepassxc-browser.js"></script>
     <script defer src="../content/username-field.js"></script>
     <script defer src="assert.js"></script>
     <script defer src="tests.js"></script>
   </head>
 
+  <style>
+    .hiddenOne {
+        visibility: hidden;
+    }
+  </style>
+
   <body class="pt-3 pb-5">
     <div class="container-fluid">
       <div class="row">
@@ -67,9 +75,132 @@
 
             </div>
 
-            <iframe id="testFile" width="100%" height="600" frameborder="0"></iframe>
+            <!-- Test content -->
+            <!-- =================================== -->
+
+            <div id="basic1" style="display: none;">
+              <input placeholder="username" type="text" name="loginField">
+              <input placeholder="password" type="password" name="passwordField">
+            </div>
+
+            <div id="basic2" style="display: none;">
+              <input placeholder="username" type="text" name="loginField">
+            </div>
+
+            <div id="basic3" style="display: none;">
+              <input placeholder="password" type="password" name="passwordField">
+            </div>
+
+            <div id="basic4" style="display: none;">
+              <input placeholder="username" type="text" name="loginField">
+              <input placeholder="password" type="password" name="passwordField">
+              <input type="text" id="auth">
+            </div>
+
+            <div id="div1" style="display: none;">
+              <button id="toggle1">View login form</button>
+              <div id="loginForm1" style="display: none;">
+                  <input placeholder="username" type="text" name="loginField">
+                  <input placeholder="password" type="password" name="passwordField">
+              </div>
+            </div>
+
+            <div id="div2" style="display: none;">
+              <button id="toggle2">View login form</button>
+
+              <div id="dialog" style="position: relative; z-index: auto;">
+                  <div id="outer" style="overflow: hidden; height: 0px;">
+                      <div id="inner" style="margin: -197px auto auto;">
+                          <form method="post" class="signin" action="#">
+                              <input placeholder="username" type="text" name="loginField">
+                              <input placeholder="password" type="password" name="passwordField">
+                          </form>
+                      </div>
+                  </div>
+              </div>
+            </div>
+
+            <div id="div3" style="display: none;">
+              <button id="toggle3">View login form</button>
+            </div>
+
+            <div id="div4" style="display: none;">
+              <button id="toggle4">View login form</button>
+            </div>
+
+            <div id="hiddenFields1" style="display: none;">
+              <div style="position: absolute; margin-left: -500px;">
+                <input placeholder="outsideLeft" type="password" name="outsideLeft">
+              </div>
+
+              <div style="position: absolute; margin-top: -1500px;">
+                  <input placeholder="outsideTop" type="password" name="outsideTop">
+              </div>
+            </div>
+
+            <div id="hiddenFields2" style="display: none;">
+              <div>
+                <input placeholder="zeroSize" type="password" name="zeroSize" style="width: 0px; height: 0px;">
+                <input placeholder="oneSize" type="password" name="oneSize" style="width: 1px; height: 1px;">
+                <input placeholder="visibilityHidden" type="password" name="visibilityHidden" style="visibility: hidden;">
+                <input placeholder="visibilityCollapse" type="password" name="visibilityCollapse" style="visibility: collapse;">
+                <input placeholder="displayNone" type="password" name="displayNone" style="display: none;">
+                <input placeholder="hiddenOne" type="password" name="hiddenOne" class="hiddenOne">
+                <input placeholder="normal" type="password" name="normal">
+              </div>
+            </div>
+
+            <div id="passwordChange1" style="display: none;">
+              <br /><input type="password" name="Old password" value="oldPassword">
+              <br /><input type="password" name="New password" value="newPassword">
+              <br /><input type="password" name="Repeat password" value="newPassword">
+            </div>
+
+            <div id="passwordChange2" style="display: none;">
+              <br /><input type="password" name="New password" value="newPassword">
+              <br /><input type="password" name="Repeat password" value="newPassword">
+              <br /><input type="password" name="Old password" value="oldPassword">
+            </div>
+
+            <div id="passwordChange3" style="display: none;">
+              <form action="secondPage">
+                <br /><input type="password" name="Old password" value="oldPassword">
+                <br /><input type="password" name="New password" value="newPassword">
+                <br /><input type="password" name="Repeat password" value="newPassword">
+                <br /><input type="submit" value="Change password">
+              </form>
+            </div>
+
+            <div id="passwordChange4" style="display: none;">
+              <form action="secondPage">
+                <br /><input type="password" name="New password" value="newPassword">
+                <br /><input type="password" name="Repeat password" value="newPassword">
+                <br /><input type="password" name="Old password" value="oldPassword">
+                <br /><input type="submit" value="Change password">
+              </form>
+            </div>
+
+            <div id="passwordChange5" style="display: none;">
+              <form action="firstForm">
+                <br /><input type="password" name="Old password" value="oldPassword">
+                </form>
+
+                <form action="secondForm">
+                <br /><input type="password" name="New password" value="newPassword">
+                </form>
+
+                <form action="thirdForm">
+                <br /><input type="password" name="Repeat password" value="newPassword">
+              </form>
+            </div>
           </main>
       </div>
     </div>
+
+    <!-- These need to be loaded only after everything else -->
+    <script src="scripts/div1.js"></script>
+    <script src="scripts/div2.js"></script>
+    <script src="scripts/div3.js"></script>
+    <script src="scripts/div4.js"></script>
   </body>
 </html>

tests/tests.js

@@ -9,7 +9,7 @@ const Tests = {
 };
 
 function createResult(card, res, text) {
-    const icon = kpxcUI.createElement('i', res ? 'fa fa-check' : 'fa fa-close');
+    const icon = kpxcUI.createElement('i', res ? 'fa fa-check' : 'fa fa-close', { id: text });
     const span = kpxcUI.createElement('span', '', '', text);
     const br = document.createElement('br');
 
@@ -61,25 +61,23 @@ async function testGeneral() {
 
 // Input field matching (keepassxc-browser.js)
 async function testInputFields() {
-    // Local filename, expected fields, action element ID (a button to be clicked)
-    const localFiles = [
-        [ 'html/basic1.html', 2 ], // Username/passwd fields
-        [ 'html/basic2.html', 1 ], // Only username field
-        [ 'html/basic3.html', 1 ], // Only password field
-        [ 'html/basic4.html', 3 ], // Username/passwd/TOTP fields
-        [ 'html/div1.html', 2, '#toggle' ], // Fields are behind a button that must be pressed
-        [ 'html/div2.html', 2, '#toggle' ], // Fields are behind a button that must be pressed behind a JavaScript
-        [ 'html/div3.html', 2, '#toggle' ], // Fields are behind a button that must be pressed
-        [ 'html/div4.html', 2, '#toggle' ], // Fields are behind a button that must be pressed
-        [ 'html/hidden_fields1.html', 0 ], // Two hidden fields
-        [ 'html/hidden_fields2.html', 1 ], // Two hidden fields with one visible
+    // Div ID, expected fields, action element ID (a button to be clicked)
+    const testDivs = [
+        [ 'basic1', 2 ], // Username/passwd fields
+        [ 'basic2', 1 ], // Only username field
+        [ 'basic3', 1 ], // Only password field
+        [ 'basic4', 3 ], // Username/passwd/TOTP fields
+        [ 'div1', 2, '#toggle1' ], // Fields are behind a button that must be pressed
+        [ 'div2', 2, '#toggle2' ], // Fields are behind a button that must be pressed behind a JavaScript
+        [ 'div3', 2, '#toggle3' ], // Fields are behind a button that must be pressed
+        [ 'div4', 2, '#toggle4' ], // Fields are behind a button that must be pressed
+        [ 'hiddenFields1', 0 ], // Two hidden fields
+        [ 'hiddenFields2', 1 ], // Two hidden fields with one visible
     ];
 
-    for (const file of localFiles) {
-        await assertInputFields(file[0], file[1], file[2]);
+    for (const div of testDivs) {
+        await assertInputFields(div[0], div[1], div[2]);
     }
-
-    document.getElementById('testFile').hidden = true;
 }
 
 // Search fields (kpxcFields
@@ -140,20 +138,18 @@ async function testTotpFields() {
 
 // Password change
 async function testPasswordChange() {
-    // Local filename, expected new password
-    const localFiles = [
-        [ 'html/passwordchange1.html', 'newPassword' ], // Default order without form
-        [ 'html/passwordchange2.html', 'newPassword' ], // Reversed order without form
-        [ 'html/passwordchange3.html', 'newPassword' ], // Default order with form
-        [ 'html/passwordchange4.html', 'newPassword' ], // Reversed order with form
-        [ 'html/passwordchange5.html', 'newPassword' ], // Each field has own form
+    // Div ID, expected new password
+    const localDivs = [
+        [ 'passwordChange1', 'newPassword' ], // Default order without form
+        [ 'passwordChange2', 'newPassword' ], // Reversed order without form
+        [ 'passwordChange3', 'newPassword' ], // Default order with form
+        [ 'passwordChange4', 'newPassword' ], // Reversed order with form
+        [ 'passwordChange5', 'newPassword' ], // Each field has own form
     ];
 
-    for (const file of localFiles) {
-        await assertPasswordChangeFields(file[0], file[1]);
+    for (const div of localDivs) {
+        await assertPasswordChangeFields(div[0], div[1]);
     }
-
-    document.getElementById('testFile').hidden = true;
 }
 
 // Run tests