Content script tests

keepassxc-browser/content/keepassxc-browser.js

@@ -491,16 +491,18 @@ kpxcFields.isVisible = function(elem) {
     const rect = elem.getBoundingClientRect();
     if (rect.x < 0
         || rect.y < 0
-        || rect.width < 8
+        || rect.width < MIN_INPUT_FIELD_WIDTH_PX
         || rect.x > Math.max(document.body.scrollWidth, document.body.offsetWidth, document.documentElement.clientWidth)
         || rect.y > Math.max(document.body.scrollHeight, document.body.offsetHeight, document.documentElement.clientHeight)
-        || rect.height < 8) {
+        || rect.height < MIN_INPUT_FIELD_WIDTH_PX) {
         return false;
     }
 
     // Check CSS visibility
     const elemStyle = getComputedStyle(elem);
-    if (elemStyle.visibility && (elemStyle.visibility === 'hidden' || elemStyle.visibility === 'collapse')) {
+    if (elemStyle.visibility && (elemStyle.visibility === 'hidden' || elemStyle.visibility === 'collapse')
+        || parseInt(elemStyle.width, 10) <= MIN_INPUT_FIELD_WIDTH_PX
+        || parseInt(elemStyle.height, 10) <= MIN_INPUT_FIELD_WIDTH_PX) {
         return false;
     }
 
@@ -1722,6 +1724,11 @@ MutationObserver = window.MutationObserver || window.WebKitMutationObserver;
 const initContentScript = async function() {
     try {
         const settings = await sendMessage('load_settings');
+        if (!settings) {
+            console.log('Error: Cannot load extension settings');
+            return;
+        }
+
         kpxc.settings = settings;
 
         if (await kpxc.siteIgnored()) {

keepassxc-browser/content/pwgen.js

@@ -18,7 +18,7 @@ kpxcPasswordIcons.deleteHiddenIcons = function() {
 kpxcPasswordIcons.isValid = function(field) {
     if (!field
         || field.readOnly
-        || field.offsetWidth < MINIMUM_INPUT_FIELD_WIDTH
+        || field.offsetWidth < MIN_INPUT_FIELD_OFFSET_WIDTH
         || kpxcIcons.hasIcon(field)
         || !kpxcFields.isVisible(field)) {
         return false;

keepassxc-browser/content/totp-field.js

@@ -8,6 +8,7 @@ const acceptedOTPFields = [
     'auth',
     'challenge',
     'code',
+    'idvpin',
     'mfa',
     'otp',
     'token',
@@ -53,7 +54,7 @@ kpxcTOTPIcons.isValid = function(field, forced) {
 
     if (!forced) {
         if (ignoredTypes.some(t => t === field.type)
-            || field.offsetWidth < MINIMUM_INPUT_FIELD_WIDTH
+            || field.offsetWidth < MIN_INPUT_FIELD_OFFSET_WIDTH
             || field.size < 2
             || (field.maxLength > 0 && (field.maxLength < MIN_TOTP_INPUT_LENGTH || field.maxLength > kpxcSites.expectedTOTPMaxLength()))
             || ignoredTypes.some(t => t === field.autocomplete)

keepassxc-browser/content/ui.js

@@ -1,8 +1,9 @@
 'use strict';
 
-const MINIMUM_INPUT_FIELD_WIDTH = 60;
 const MIN_TOTP_INPUT_LENGTH = 6;
 const MAX_TOTP_INPUT_LENGTH = 10;
+const MIN_INPUT_FIELD_WIDTH_PX = 8;
+const MIN_INPUT_FIELD_OFFSET_WIDTH = 60;
 
 const DatabaseState = {
     DISCONNECTED: 0,

keepassxc-browser/content/username-field.js

@@ -18,7 +18,7 @@ kpxcUsernameIcons.deleteHiddenIcons = function() {
 
 kpxcUsernameIcons.isValid = function(field) {
     if (!field
-        || field.offsetWidth < MINIMUM_INPUT_FIELD_WIDTH
+        || field.offsetWidth < MIN_INPUT_FIELD_OFFSET_WIDTH
         || field.readOnly
         || kpxcIcons.hasIcon(field)
         || !kpxcFields.isVisible(field)) {

keepassxc-browser/manifest.json

@@ -1,8 +1,8 @@
 {
     "manifest_version": 2,
     "name": "KeePassXC-Browser",
-    "version": "1.7.3",
-    "version_name": "1.7.3",
+    "version": "1.7.4",
+    "version_name": "1.7.4",
     "description": "__MSG_extensionDescription__",
     "author": "KeePassXC Team",
     "icons": {

package.json

@@ -1,18 +1,24 @@
 {
   "name": "KeePassXC-Browser",
-  "version": "1.6.3",
+  "version": "1.7.4",
   "description": "KeePassXC-Browser",
   "main": "build.js",
-  "dependencies": {},
   "devDependencies": {
     "eslint": "^6.8.0",
     "eslint-config-airbnb-base": "^14.0.0",
     "eslint-plugin-import": "^2.20.1",
-    "fs-extra": "^8.1.0",
+    "mocha": "^8.1.3",
     "zip-a-folder": "0.0.12"
   },
+  "dependencies": {
+    "file-url": "^3.0.0",
+    "fs-extra": "^8.1.0",
+    "selenium-webdriver": "^3.6.0",
+    "soft-assert": "^0.2.3"
+  },
   "scripts": {
-    "build": "node build.js"
+    "build": "node build.js",
+    "tests": "./node_modules/mocha/bin/mocha run_tests.js"
   },
   "repository": {
     "type": "git",

run_tests.js

@@ -0,0 +1,65 @@
+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

@@ -0,0 +1,110 @@
+'use strict';
+
+function kpxcAssert(func, expected, card, testName) {
+    if (func === expected) {
+        createResult(card, true, `Test passed: ${testName}`);
+        return;
+    }
+
+    createResult(card, false, `Test failed: ${testName}. Result is: ${func}`);
+}
+
+function assertRegex(func, expected, card, testName) {
+    if ((func === null && expected === false)
+        || (func && (func.length > 0) === expected)) {
+        createResult(card, true, `Test passed: ${testName}`);
+        return;
+    }
+
+    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;
+
+        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();
+                }
+            }
+
+            const inputs = kpxcObserverHelper.getInputs(frameContent);
+            kpxcAssert(inputs.length, expectedFieldCount, Tests.INPUT_FIELDS, `getInputs() for ${localFile} with ${expectedFieldCount} fields`);
+            iframe.removeEventListener('load', iframeLoaded);
+            resolve();
+        };
+
+        // Wait for iframe to load
+        iframe.addEventListener('load', iframeLoaded);
+    });
+}
+
+async function assertPasswordChangeFields(localFile, expectedNewPassword) {
+    return new Promise((resolve) => {
+        const iframe = document.getElementById('testFile');
+        iframe.src = localFile;
+
+        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;
+            };
+
+            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);
+    });
+}
+
+async function assertTOTPField(classStr, properties, testName, expectedResult) {
+    const input = kpxcUI.createElement('input', classStr, properties);
+    document.body.appendChild(input);
+
+    const isAccepted = kpxcTOTPIcons.isAcceptedTOTPField(input);
+    const isValid = kpxcTOTPIcons.isValid(input);
+
+    document.body.removeChild(input);
+    kpxcAssert(isAccepted && isValid, expectedResult, Tests.TOTP_FIELDS, testName);
+}
+
+async function assertSearchField(classStr, properties, testName, expectedResult) {
+    const input = kpxcUI.createElement('input', classStr, properties);
+    document.body.appendChild(input);
+
+    const isSearchfield = kpxcFields.isSearchField(input);
+
+    document.body.removeChild(input);
+    kpxcAssert(isSearchfield, expectedResult, Tests.SEARCH_FIELDS, testName);
+}
+
+async function assertSearchForm(properties, testName, expectedResult) {
+    const form = kpxcUI.createElement('form', '', { action: 'search' });
+    const input = kpxcUI.createElement('input', '', properties);
+    form.appendChild(input);
+    document.body.appendChild(form);
+
+    const isSearchfield = kpxcFields.isSearchField(input);
+
+    document.body.removeChild(form);
+    kpxcAssert(isSearchfield, expectedResult, Tests.SEARCH_FIELDS, testName);
+}

tests/html/basic1.html

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

tests/html/basic2.html

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

tests/html/basic3.html

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

tests/html/basic4.html

@@ -0,0 +1,7 @@
+<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

@@ -0,0 +1,14 @@
+<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/div1.js

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

tests/html/div2.html

@@ -0,0 +1,21 @@
+<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/div2.js

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

tests/html/div3.html

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

tests/html/div3.js

@@ -0,0 +1,26 @@
+'use script';
+
+document.getElementById('toggle').addEventListener('click', function(e) {
+    const loginForm = document.getElementById('loginForm');
+
+    if (!loginForm) {
+        const dialog = document.createElement('div');
+        dialog.setAttribute('id', 'loginForm');
+
+        const usernameInput = document.createElement('input');
+        usernameInput.setAttribute('type', 'text');
+        usernameInput.setAttribute('name', 'loginField');
+        usernameInput.setAttribute('placeholder', 'username');
+        dialog.append(usernameInput);
+
+        const passwordInput = document.createElement('input');
+        passwordInput.setAttribute('type', 'password');
+        passwordInput.setAttribute('name', 'passwordField');
+        passwordInput.setAttribute('placeholder', 'password');
+        dialog.append(passwordInput);
+
+        document.body.appendChild(dialog);
+    } else {
+        document.body.removeChild(loginForm);
+    }
+});

tests/html/div4.html

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

tests/html/div4.js

@@ -0,0 +1,55 @@
+'use script';
+
+document.getElementById('toggle').addEventListener('click', function(e) {
+    const loginForm = document.getElementById('loginForm');
+
+    if (!loginForm) {
+        const dialog = document.createElement('div');
+        dialog.setAttribute('id', 'loginForm');
+        dialog.style.position = 'fixed';
+        dialog.style.zIndex = '1002';
+
+        const wrapper = document.createElement('div');
+        wrapper.setAttribute('tabIndex', '-1');
+        wrapper.style.height = '100%';
+        wrapper.style.width = '100%';
+        wrapper.style.outline = '0px';
+        wrapper.style.overflow = 'visible';
+
+        const innerDiv = document.createElement('div');
+        innerDiv.setAttribute('id', 'innerDiv');
+
+        const contentDiv = document.createElement('div');
+        contentDiv.setAttribute('id', 'contentDiv');
+
+        const form = document.createElement('form');
+        form.setAttribute('action', 'loginUser');
+        form.setAttribute('method', 'post');
+
+        const divUsernameWithLabel = document.createElement('div');
+        const divPasswordWithLabel = document.createElement('div');
+
+        const usernameInput = document.createElement('input');
+        usernameInput.setAttribute('type', 'text');
+        usernameInput.setAttribute('name', 'loginField');
+        usernameInput.setAttribute('placeholder', 'username');
+        divUsernameWithLabel.append(usernameInput);
+
+        const passwordInput = document.createElement('input');
+        passwordInput.setAttribute('type', 'password');
+        passwordInput.setAttribute('name', 'passwordField');
+        passwordInput.setAttribute('placeholder', 'password');
+        divPasswordWithLabel.append(passwordInput);
+
+        form.append(divUsernameWithLabel);
+        form.append(divPasswordWithLabel);
+        contentDiv.append(form);
+        innerDiv.append(contentDiv);
+        wrapper.append(innerDiv);
+        dialog.append(wrapper);
+
+        document.body.appendChild(dialog);
+    } else {
+        document.body.removeChild(loginForm);
+    }
+});

tests/html/hidden_fields1.html

@@ -0,0 +1,12 @@
+<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

@@ -0,0 +1,18 @@
+<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

@@ -0,0 +1,7 @@
+<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

@@ -0,0 +1,7 @@
+<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

@@ -0,0 +1,10 @@
+<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

@@ -0,0 +1,10 @@
+<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

@@ -0,0 +1,17 @@
+<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/tests.html

@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title data-i18n="popupTitle"></title>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <link rel="stylesheet" href="../css/colors.css" />
+    <link rel="stylesheet" href="../bootstrap/bootstrap.min.css" />
+    <link rel="stylesheet" href="../fonts/fork-awesome.min.css" />
+    <link rel="stylesheet" href="../options/options.css" />
+    <link rel="icon" type="image/png" href="../icons/keepassxc_32x32.png" sizes="32x32">
+    <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/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>
+
+  <body class="pt-3 pb-5">
+    <div class="container-fluid">
+      <div class="row">
+        <main class="col-md-9 col-lg-10 offset-md-3 offset-lg-2 px-4 mt-5 mt-md-0">
+          <div class="content">
+
+            <!-- Content script tests -->
+            <div class="tab">
+              <h2 class="pb-3 mt-0">Content script tests</h2>
+
+              <div class="card my-4 shadow">
+                <div class="card-header h6 rounded-0"><i class="fa fa-meh-o" aria-hidden="true"></i> General (global.js)</div>
+                <div class="card-body" id="general-results"></div>
+              </div>
+
+              <div class="card my-4 shadow">
+                <div class="card-header h6 rounded-0"><i class="fa fa-meh-o" aria-hidden="true"></i> Input field matching (keepassxc-browser.js)</div>
+                <div class="card-body" id="input-field-results"></div>
+              </div>
+
+              <div class="card my-4 shadow">
+                <div class="card-header h6 rounded-0"><i class="fa fa-meh-o" aria-hidden="true"></i> Search fields (keepassxc-browser.js)</div>
+                <div class="card-body" id="search-field-results"></div>
+              </div>
+
+              <div class="card my-4 shadow">
+                <div class="card-header h6 rounded-0"><i class="fa fa-meh-o" aria-hidden="true"></i> TOTP fields (totp-field.js)</div>
+                <div class="card-body" id="totp-field-results"></div>
+              </div>
+
+              <div class="card my-4 shadow">
+                <div class="card-header h6 rounded-0"><i class="fa fa-meh-o" aria-hidden="true"></i> Password change (keepassxc-browser.js)</div>
+                <div class="card-body" id="password-change-results"></div>
+              </div>
+
+            </div>
+
+            <iframe id="testFile" width="100%" height="600" frameborder="0"></iframe>
+          </main>
+      </div>
+    </div>
+  </body>
+</html>

tests/tests.js

@@ -0,0 +1,154 @@
+'use strict';
+
+const Tests = {
+    GENERAL: '#general-results',
+    INPUT_FIELDS: '#input-field-results',
+    TOTP_FIELDS: '#totp-field-results',
+    SEARCH_FIELDS: '#search-field-results',
+    PASSWORD_CHANGE: '#password-change-results',
+};
+
+function createResult(card, res, text) {
+    const icon = kpxcUI.createElement('i', res ? 'fa fa-check' : 'fa fa-close');
+    const span = kpxcUI.createElement('span', '', '', text);
+    const br = document.createElement('br');
+
+    document.querySelector(card).appendMultiple(icon, span, br);
+}
+
+// General (global.js)
+async function testGeneral() {
+    const testCard = Tests.GENERAL;
+
+    // General
+    kpxcAssert(trimURL('https://test.com/path_to_somwhere?login=username'), 'https://test.com/path_to_somwhere', testCard, 'trimURL()');
+    assertRegex(slashNeededForUrl('https://test.com'), true, testCard, 'slashNeededForUrl()');
+    assertRegex(slashNeededForUrl('https://test.com/'), false, testCard, 'slashNeededForUrl()');
+
+    // URL matching (URL in Site Preferences, page URL, expected result).
+    // Consider using slighly different URL's for the tests cases.
+    const matches = [
+        [ 'https://example.com/*', 'https://example.com/login_page', true ],
+        [ 'https://example.com/*', 'https://example2.com/login_page', false ],
+        [ 'https://example.com/*', 'https://subdomain.example.com/login_page', false ],
+        [ 'https://*.example.com/*', 'https://example.com/login_page', true ],
+        [ 'https://*.example.com/*', 'https://test.example.com/login_page', true ],
+        [ 'https://test.example.com/*', 'https://subdomain.example.com/login_page', false ],
+        [ 'https://test.example.com/page/*', 'https://test.example.com/page/login_page', true ],
+        [ 'https://test.example.com/page/another_page/*', 'https://test.example.com/page/login', false ],
+        [ 'https://test.example.com/path/another/a/', 'https://test.example.com/path/another/a/', true ],
+        [ 'https://test.example.com/path/another/a/', 'https://test.example.com/path/another/b/', false ],
+    ];
+
+    for (const m of matches) {
+        assertRegex(siteMatch(m[0], m[1]), m[2], testCard, `siteMatch() for ${m[1]}`);
+    }
+}
+
+// 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
+    ];
+
+    for (const file of localFiles) {
+        await assertInputFields(file[0], file[1], file[2]);
+    }
+
+    document.getElementById('testFile').hidden = true;
+}
+
+// Search fields (kpxcFields
+async function testSearchFields() {
+    const searchFields = [
+        [ '', { id: 'otp_field', name: 'otp', type: 'text', maxLength: '8' }, 'Generic 2FA field', false ],
+        [ '', { placeholder: 'search', type: 'text', id: 'username' }, 'Placeholder only', true ],
+        [ '', { ariaLabel: 'search', type: 'text', id: 'username' }, 'aria-label only', true ],
+
+    ];
+
+    for (const field of searchFields) {
+        assertSearchField(field[0], field[1], field[2], field[3]);
+    }
+
+    assertSearchForm({ id: 'username', type: 'text', }, 'Generic input field under search form', true);
+}
+
+// TOTP fields (kpxcTOTPIcons)
+async function testTotpFields() {
+    const totpFields = [
+        [ '', { id: 'otp_field', name: 'otp', type: 'text', maxLength: '8' }, 'Generic 2FA field', true ],
+        [ '', { id: '2fa', type: 'text', maxLength: '6' }, 'Generic 2FA field', true ],
+        [ '', { id: '2fa', type: 'text', maxLength: '4' }, 'Ignore if field maxLength too small', false ],
+        [ '', { id: '2fa', type: 'text', maxLength: '12' }, 'Ignore if field maxLength too long', false ],
+        [ '', { id: 'username', type: 'text', }, 'Ignore a generic input field', false ],
+        [ '', { type: 'password', }, 'Ignore a password input field', false ],
+        [ // Protonmail
+            'TwoFA-input ng-empty ng-invalid ng-invalid-required ng-valid-minlength ng-valid-maxlength ng-touched',
+            { autocapitalize: 'off', autocorrect: 'off', id: 'twoFactorCode', type: 'text', placeholder: 'Two-factor passcode', name: 'twoFactorCode' },
+            'Protonmail 2FA',
+            true
+        ],
+        [ // Nextcloud
+            '',
+            { minlength: '6', maxLength: '10', name: 'challenge', placeholder: 'Authentication code', type: 'tel', },
+            'Nextcloud 2FA',
+            true
+        ],
+        [ // GMail
+            'whsOnd zHQkBf',
+            { autocomplete: 'off', id: 'idvPin', tabindex: '0', name: 'idvPin', pattern: '[0-9 ]*', type: 'tel', spellcheck: 'false' },
+            'GMail 2FA',
+            true
+        ],
+        [ // Live.com
+            'form-control',
+            { autocomplete: 'off', id: 'idTxtBx_SAOTCC_OTC', maxLength: '8', tabindex: '0', name: 'otc', placeholder: 'Code', type: 'tel' },
+            'Live.com 2FA',
+            true
+        ],
+    ];
+
+    for (const field of totpFields) {
+        assertTOTPField(field[0], field[1], field[2], field[3]);
+    }
+}
+
+// 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
+    ];
+
+    for (const file of localFiles) {
+        await assertPasswordChangeFields(file[0], file[1]);
+    }
+
+    document.getElementById('testFile').hidden = true;
+}
+
+// Run tests
+(async () => {
+    await Promise.all([
+        await testGeneral(),
+        await testInputFields(),
+        await testSearchFields(),
+        await testTotpFields(),
+        await testPasswordChange(),
+    ]);
+})();