myfaces-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From hno...@apache.org
Subject [myfaces-tobago] branch master updated: integration tests: remove jQuery
Date Mon, 19 Aug 2019 16:02:54 GMT
This is an automated email from the ASF dual-hosted git repository.

hnoeth pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/myfaces-tobago.git


The following commit(s) were added to refs/heads/master by this push:
     new ebebbe8  integration tests: remove jQuery
ebebbe8 is described below

commit ebebbe83c47fa92ea32a9c34204c7791240fdf42
Author: Henning Noeth <hnoeth@apache.org>
AuthorDate: Mon Aug 19 09:09:12 2019 +0200

    integration tests: remove jQuery
---
 .../src/main/webapp/content/10-intro/Intro.test.js |   8 +-
 .../20-component/010-input/40-date/Date.test.js    | 108 +++---
 .../030-select/20-selectOneChoice/Dropdown.test.js |  31 +-
 .../040-command/20-buttons/Button_Group.test.js    |   6 +-
 .../06-validation/00/Content_Validation.test.js    | 138 ++++----
 .../30-concept/06-validation/01/JSR_303.test.js    |  52 +--
 .../08-form/10-required/Required.test.js           | 184 +++++-----
 .../30-concept/08-form/20-ajax/Ajax.test.js        | 376 ++++++++++-----------
 .../webapp/content/30-concept/08-form/Form.test.js |  54 +--
 .../30-concept/51-for-each/For_Each.test.js        |  24 +-
 .../00-collapsible-box/Collapsible_Box.test.js     | 186 +++++-----
 .../10-collapsible-popup/Collapsible_Popup.test.js |  94 +++---
 .../20-collapsible-panel/Collapsible_Panel.test.js | 154 ++++-----
 .../Collapsible_Section.test.js                    | 154 ++++-----
 .../webapp/content/40-test/1040-date/Date.test.js  |  20 +-
 .../Date_TobagoConverter.test.js                   | 123 +++----
 .../1500-output/21-label-for/Label_For.test.js     |  54 +--
 .../4050-ajax-dropdown/Ajax_Dropdown.test.js       |  26 +-
 .../40-test/4000-button-link/Button_Link.test.js   |  72 ++--
 .../40000-style/100-headings/Headings.test.js      |  58 ++--
 .../100-id-markup/Id_Markup.test.js                | 207 ++++++------
 .../4810-labelLayoutTop/LabelLayoutTop.test.js     |  10 +-
 .../20-ajax-execute/Ajax_Execute.test.js           |  58 ++--
 .../Ajax_Special_Character.test.js                 |  24 +-
 .../content/40-test/6500-behavior/Behavior.test.js | 145 ++++----
 .../9010-mode-valueIfSet/Mode_ValueIfSet.test.js   |  21 +-
 26 files changed, 1196 insertions(+), 1191 deletions(-)

diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/10-intro/Intro.test.js b/tobago-example/tobago-example-demo/src/main/webapp/content/10-intro/Intro.test.js
index 5bb291e..f444d56 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/10-intro/Intro.test.js
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/10-intro/Intro.test.js
@@ -15,12 +15,10 @@
  * limitations under the License.
  */
 
-import {jQueryFrame} from "/script/tobago-test.js";
+import {testFrameQuerySelectorFn} from "/script/tobago-test.js";
 
 QUnit.test("First section title is 'Intro'", function (assert) {
   assert.expect(1);
-
-  var titleOfFirstSectionHeader = jQueryFrame(".tobago-section-header:first span").text();
-
-  assert.equal(titleOfFirstSectionHeader, "Intro");
+  let titleOfFirstSectionHeader = testFrameQuerySelectorFn(".tobago-section-header > h1 > span");
+  assert.equal(titleOfFirstSectionHeader().textContent, "Intro");
 });
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/20-component/010-input/40-date/Date.test.js b/tobago-example/tobago-example-demo/src/main/webapp/content/20-component/010-input/40-date/Date.test.js
index ee2330c..a0eae35 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/20-component/010-input/40-date/Date.test.js
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/20-component/010-input/40-date/Date.test.js
@@ -15,60 +15,64 @@
  * limitations under the License.
  */
 
-import {jQueryFrameFn} from "/script/tobago-test.js";
+import {testFrameQuerySelectorAllFn, testFrameQuerySelectorFn} from "/script/tobago-test.js";
 import {TobagoTestTool} from "/tobago/test/tobago-test-tool.js";
 
 function getToday(dateFieldFn) {
-  var tobagoToday = dateFieldFn().data("tobago-today");
-  var todayArray = tobagoToday.split("-");
+  let tobagoToday = dateFieldFn().dataset.tobagoToday;
+  let todayArray = tobagoToday.split("-");
   return todayArray[2] + "." + todayArray[1] + "." + todayArray[0];
 }
 
 QUnit.test("date with label", function (assert) {
   assert.expect(5);
 
-  var labelFn = jQueryFrameFn("#page\\:mainForm\\:dNormal > label");
-  var dateFieldFn = jQueryFrameFn("#page\\:mainForm\\:dNormal\\:\\:field");
-  var dateButtonFn = jQueryFrameFn("#page\\:mainForm\\:dNormal button");
-  var dayTodayFn = jQueryFrameFn(".day.today");
-  var today = getToday(dateFieldFn);
+  let labelFn = testFrameQuerySelectorFn("#page\\:mainForm\\:dNormal > label");
+  let dateFieldFn = testFrameQuerySelectorFn("#page\\:mainForm\\:dNormal\\:\\:field");
+  let dateButtonFn = testFrameQuerySelectorFn("#page\\:mainForm\\:dNormal button");
+  let dayTodayFn = testFrameQuerySelectorFn(".day.today");
+  let today = getToday(dateFieldFn);
 
-  assert.equal(labelFn().text(), "Date");
-  assert.equal(dateFieldFn().val(), today);
+  assert.equal(labelFn().textContent, "Date");
+  assert.equal(dateFieldFn().value, today);
 
-  dateFieldFn().val("32.05.2016");
+  dateFieldFn().value = "32.05.2016";
   dateButtonFn().click();
 
-  assert.equal(dateFieldFn().val(), today);
-  assert.equal(dayTodayFn().hasClass("past"), false);
-  assert.equal(dayTodayFn().prevAll(".past").length, dayTodayFn().prevAll().length);
+  assert.equal(dateFieldFn().value, today);
+  assert.notOk(dayTodayFn().classList.contains("past"));
+  if (dayTodayFn().previousElementSibling !== null) {
+    assert.ok(dayTodayFn().previousElementSibling.classList.contains("past"));
+  } else {
+    assert.notOk(dayTodayFn().nextElementSibling.classList.contains("past"));
+  }
 
   dateButtonFn().click(); // IE11: close datetimepicker for next test
 });
 
 QUnit.test("date+time pattern", function (assert) {
-  var dateButtonFn = jQueryFrameFn("#page\\:mainForm\\:dateTimePattern .datepickerbutton");
-  var datepickerFn = jQueryFrameFn(".bootstrap-datetimepicker-widget");
-  var firstLiFn = jQueryFrameFn(".bootstrap-datetimepicker-widget .list-unstyled li:first-child");
-  var lastLiFn = jQueryFrameFn(".bootstrap-datetimepicker-widget .list-unstyled li:last-child");
-  var togglePickerButtonFn = jQueryFrameFn(".bootstrap-datetimepicker-widget .picker-switch a");
+  let dateButtonFn = testFrameQuerySelectorFn("#page\\:mainForm\\:dateTimePattern .datepickerbutton");
+  let datepickerFn = testFrameQuerySelectorFn(".bootstrap-datetimepicker-widget");
+  let firstLiFn = testFrameQuerySelectorFn(".bootstrap-datetimepicker-widget .list-unstyled li:first-child");
+  let lastLiFn = testFrameQuerySelectorFn(".bootstrap-datetimepicker-widget .list-unstyled li:last-child");
+  let togglePickerButtonFn = testFrameQuerySelectorFn(".bootstrap-datetimepicker-widget .picker-switch a");
 
-  var TTT = new TobagoTestTool(assert);
+  let TTT = new TobagoTestTool(assert);
   TTT.action(function () {
     dateButtonFn().click();
   });
   TTT.asserts(3, function () {
-    assert.equal(datepickerFn().length, 1);
-    assert.notEqual(firstLiFn().css("display"), "none"); //block
-    assert.equal(lastLiFn().css("display"), "none");
+    assert.ok(datepickerFn() !== null);
+    assert.notEqual(getComputedStyle(firstLiFn()).display, "none"); //block
+    assert.equal(getComputedStyle(lastLiFn()).display, "none");
   });
   TTT.action(function () {
     togglePickerButtonFn().click();
   });
   TTT.waitMs(1000); // wait for animation
   TTT.asserts(2, function () {
-    assert.equal(firstLiFn().css("display"), "none");
-    assert.notEqual(lastLiFn().css("display"), "none"); //block
+    assert.equal(getComputedStyle(firstLiFn()).display, "none");
+    assert.notEqual(getComputedStyle(lastLiFn()).display, "none"); //block
   });
   TTT.action(function () {
     dateButtonFn().click(); // IE11: close datetimepicker for next test
@@ -77,69 +81,69 @@ QUnit.test("date+time pattern", function (assert) {
 });
 
 QUnit.test("submit", function (assert) {
-  var dateFieldFn = jQueryFrameFn("#page\\:mainForm\\:formSubmit\\:input\\:\\:field");
-  var dateButtonFn = jQueryFrameFn("#page\\:mainForm\\:formSubmit\\:input button");
-  var outFieldFn = jQueryFrameFn("#page\\:mainForm\\:formSubmit\\:output span");
-  var submitButtonFn = jQueryFrameFn("#page\\:mainForm\\:formSubmit\\:button");
-  var widgetFn = jQueryFrameFn(".bootstrap-datetimepicker-widget");
-  var daysFn = jQueryFrameFn(".bootstrap-datetimepicker-widget .day");
-  var day22 = 0;
+  let dateFieldFn = testFrameQuerySelectorFn("#page\\:mainForm\\:formSubmit\\:input\\:\\:field");
+  let dateButtonFn = testFrameQuerySelectorFn("#page\\:mainForm\\:formSubmit\\:input button");
+  let outFieldFn = testFrameQuerySelectorFn("#page\\:mainForm\\:formSubmit\\:output span");
+  let submitButtonFn = testFrameQuerySelectorFn("#page\\:mainForm\\:formSubmit\\:button");
+  let widgetFn = testFrameQuerySelectorAllFn(".bootstrap-datetimepicker-widget");
+  let daysFn = testFrameQuerySelectorAllFn(".bootstrap-datetimepicker-widget .day");
+  let day22 = 0;
 
-  var TTT = new TobagoTestTool(assert);
+  let TTT = new TobagoTestTool(assert);
   TTT.asserts(2, function () {
-    assert.equal(dateFieldFn().val(), "22.05.2016");
-    assert.equal(outFieldFn().text(), "22.05.2016");
+    assert.equal(dateFieldFn().value, "22.05.2016");
+    assert.equal(outFieldFn().textContent, "22.05.2016");
   });
   TTT.action(function () {
     dateButtonFn().click();
   });
   TTT.asserts(2, function () {
-    assert.ok(widgetFn().get(0), ".bootstrap-datetimepicker-widget should be available");
+    assert.ok(widgetFn().item(0), ".bootstrap-datetimepicker-widget should be available");
 
     for (let i = 0; i < daysFn().length; i++) {
-      if (daysFn().eq(i).text() === "22") {
+      if (daysFn().item(i).textContent === "22") {
         day22 = i;
         break;
       }
     }
-    assert.ok(daysFn().get(day22 + 10));
+    assert.ok(daysFn().item(day22 + 10));
   });
   TTT.action(function () {
-    daysFn().get(day22 + 10).click(); // Choose '01.06.2016'.
+    daysFn().item(day22 + 10).click(); // Choose '01.06.2016'.
   });
   TTT.asserts(1, function () {
-    assert.equal(dateFieldFn().val(), "01.06.2016");
+    assert.equal(dateFieldFn().value, "01.06.2016");
   });
   TTT.action(function () {
     submitButtonFn().click();
   });
   TTT.waitForResponse();
   TTT.asserts(1, function () {
-    assert.equal(outFieldFn().text(), "01.06.2016");
+    assert.equal(outFieldFn().textContent, "01.06.2016");
   });
   TTT.startTest();
 });
 
 QUnit.test("ajax", function (assert) {
-  var dateFieldFn = jQueryFrameFn("#page\\:mainForm\\:ajaxinput\\:\\:field");
-  var dateButtonFn = jQueryFrameFn("#page\\:mainForm\\:ajaxinput button");
-  var outFieldFn = jQueryFrameFn("#page\\:mainForm\\:outputfield span");
-  var widgetFn = jQueryFrameFn(".bootstrap-datetimepicker-widget");
-  var today = getToday(dateFieldFn);
+  let dateFieldFn = testFrameQuerySelectorFn("#page\\:mainForm\\:ajaxinput\\:\\:field");
+  let dateButtonFn = testFrameQuerySelectorFn("#page\\:mainForm\\:ajaxinput button");
+  let outFieldFn = testFrameQuerySelectorFn("#page\\:mainForm\\:outputfield span");
+  let widgetFn = testFrameQuerySelectorAllFn(".bootstrap-datetimepicker-widget");
+  let today = getToday(dateFieldFn);
 
-  var TTT = new TobagoTestTool(assert);
+  let TTT = new TobagoTestTool(assert);
   TTT.asserts(2, function () {
-    assert.equal(dateFieldFn().val(), "");
-    assert.equal(outFieldFn().text(), "");
+    assert.equal(dateFieldFn().value, "");
+    assert.equal(outFieldFn().textContent, "");
   });
   TTT.action(function () {
     dateButtonFn().click();
   });
   TTT.waitForResponse();
   TTT.asserts(3, function () {
-    assert.ok(widgetFn().get(0));
-    assert.equal(dateFieldFn().val(), today);
-    assert.equal(outFieldFn().text(), today);
+    assert.ok(widgetFn().item(0));
+    assert.equal(dateFieldFn().value, today);
+    assert.equal(outFieldFn().textContent, today);
   });
   TTT.startTest();
 });
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/20-component/030-select/20-selectOneChoice/Dropdown.test.js b/tobago-example/tobago-example-demo/src/main/webapp/content/20-component/030-select/20-selectOneChoice/Dropdown.test.js
index e472c2a..f0e335b 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/20-component/030-select/20-selectOneChoice/Dropdown.test.js
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/20-component/030-select/20-selectOneChoice/Dropdown.test.js
@@ -15,44 +15,43 @@
  * limitations under the License.
  */
 
-import {jQueryFrameFn, testFrameQuerySelectorAllFn, testFrameQuerySelectorFn} from "/script/tobago-test.js";
+import {testFrameQuerySelectorAllFn, testFrameQuerySelectorFn} from "/script/tobago-test.js";
 import {TobagoTestTool} from "/tobago/test/tobago-test-tool.js";
 
 QUnit.test("submit: Alice", function (assert) {
-  let aliceFn = jQueryFrameFn("#page\\:mainForm\\:selectPerson\\:\\:field option:contains('Alice')");
-  let bobFn = jQueryFrameFn("#page\\:mainForm\\:selectPerson\\:\\:field option:contains('Bob')");
-  let submitFn = jQueryFrameFn("#page\\:mainForm\\:submit");
-  let outputFn = jQueryFrameFn("#page\\:mainForm\\:outputPerson span");
+  let aliceFn = testFrameQuerySelectorFn("#page\\:mainForm\\:selectPerson\\:\\:field option[value^='Alice']");
+  let bobFn = testFrameQuerySelectorFn("#page\\:mainForm\\:selectPerson\\:\\:field option[value^='Bob']");
+  let submitFn = testFrameQuerySelectorFn("#page\\:mainForm\\:submit");
+  let outputFn = testFrameQuerySelectorFn("#page\\:mainForm\\:outputPerson span");
 
   let TTT = new TobagoTestTool(assert);
   TTT.action(function () {
-    aliceFn().prop("selected", true);
-    bobFn().prop("selected", false);
+    aliceFn().selected = true;
+    bobFn().selected = false;
     submitFn().click();
   });
   TTT.waitForResponse();
   TTT.asserts(1, function () {
-    assert.equal(outputFn().text(), "Alice Anderson");
-
+    assert.equal(outputFn().textContent, "Alice Anderson");
   });
   TTT.startTest();
 });
 
 QUnit.test("submit: Bob", function (assert) {
-  let aliceFn = jQueryFrameFn("#page\\:mainForm\\:selectPerson\\:\\:field option:contains('Alice')");
-  let bobFn = jQueryFrameFn("#page\\:mainForm\\:selectPerson\\:\\:field option:contains('Bob')");
-  let submitFn = jQueryFrameFn("#page\\:mainForm\\:submit");
-  let outputFn = jQueryFrameFn("#page\\:mainForm\\:outputPerson span");
+  let aliceFn = testFrameQuerySelectorFn("#page\\:mainForm\\:selectPerson\\:\\:field option[value^='Alice']");
+  let bobFn = testFrameQuerySelectorFn("#page\\:mainForm\\:selectPerson\\:\\:field option[value^='Bob']");
+  let submitFn = testFrameQuerySelectorFn("#page\\:mainForm\\:submit");
+  let outputFn = testFrameQuerySelectorFn("#page\\:mainForm\\:outputPerson span");
 
   let TTT = new TobagoTestTool(assert);
   TTT.action(function () {
-    aliceFn().prop("selected", false);
-    bobFn().prop("selected", true);
+    aliceFn().selected = false;
+    bobFn().selected = true;
     submitFn().click();
   });
   TTT.waitForResponse();
   TTT.asserts(1, function () {
-    assert.equal(outputFn().text(), "Bob Brunch");
+    assert.equal(outputFn().textContent, "Bob Brunch");
   });
   TTT.startTest();
 });
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/20-component/040-command/20-buttons/Button_Group.test.js b/tobago-example/tobago-example-demo/src/main/webapp/content/20-component/040-command/20-buttons/Button_Group.test.js
index d26e6e0..bb7a3ee 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/20-component/040-command/20-buttons/Button_Group.test.js
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/20-component/040-command/20-buttons/Button_Group.test.js
@@ -15,9 +15,9 @@
  * limitations under the License.
  */
 
-import {jQueryFrame} from "/script/tobago-test.js";
+import {testFrameQuerySelectorFn} from "/script/tobago-test.js";
 
 QUnit.test("Dropdown button has 'btn-group'", function (assert) {
-  var $button = jQueryFrame("#page\\:mainForm\\:buttonWithLinks");
-  assert.ok($button.hasClass("btn-group"), "id=buttonWithLinks must have 'btn-group'");
+  let buttonFn = testFrameQuerySelectorFn("#page\\:mainForm\\:buttonWithLinks");
+  assert.ok(buttonFn().classList.contains("btn-group"), "id=buttonWithLinks must have 'btn-group'");
 });
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/30-concept/06-validation/00/Content_Validation.test.js b/tobago-example/tobago-example-demo/src/main/webapp/content/30-concept/06-validation/00/Content_Validation.test.js
index 6bcaf24..f3fd1ad 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/30-concept/06-validation/00/Content_Validation.test.js
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/30-concept/06-validation/00/Content_Validation.test.js
@@ -15,54 +15,54 @@
  * limitations under the License.
  */
 
-import {jQueryFrameFn} from "/script/tobago-test.js";
+import {testFrameQuerySelectorAllFn, testFrameQuerySelectorFn} from "/script/tobago-test.js";
 import {TobagoTestTool} from "/tobago/test/tobago-test-tool.js";
 
 QUnit.test("Required: Submit without content.", function (assert) {
-  var messagesFn = jQueryFrameFn("#page\\:messages.tobago-messages div");
-  var textareaFn = jQueryFrameFn("#page\\:mainForm\\:required\\:textarea\\:\\:field");
-  var submitFn = jQueryFrameFn("#page\\:mainForm\\:required\\:submit_r");
-  var textareaValue = textareaFn().val();
+  let messagesFn = testFrameQuerySelectorAllFn("#page\\:messages.tobago-messages div");
+  let textareaFn = testFrameQuerySelectorFn("#page\\:mainForm\\:required\\:textarea\\:\\:field");
+  let submitFn = testFrameQuerySelectorFn("#page\\:mainForm\\:required\\:submit_r");
+  let textareaValue = textareaFn().value;
 
-  var TTT = new TobagoTestTool(assert);
+  let TTT = new TobagoTestTool(assert);
   TTT.action(function () {
-    textareaFn().val("");
+    textareaFn().value = "";
     submitFn().click();
   });
   TTT.waitForResponse();
   TTT.asserts(2, function () {
     assert.equal(messagesFn().length, 1);
-    assert.equal(textareaFn().val(), textareaValue);
+    assert.equal(textareaFn().value, textareaValue);
   });
   TTT.startTest();
 });
 
 QUnit.test("Required: Submit with content.", function (assert) {
-  var messagesFn = jQueryFrameFn("#page\\:messages.tobago-messages div");
-  var textareaFn = jQueryFrameFn("#page\\:mainForm\\:required\\:textarea\\:\\:field");
-  var submitFn = jQueryFrameFn("#page\\:mainForm\\:required\\:submit_r");
+  let messagesFn = testFrameQuerySelectorAllFn("#page\\:messages.tobago-messages div");
+  let textareaFn = testFrameQuerySelectorFn("#page\\:mainForm\\:required\\:textarea\\:\\:field");
+  let submitFn = testFrameQuerySelectorFn("#page\\:mainForm\\:required\\:submit_r");
 
-  var TTT = new TobagoTestTool(assert);
+  let TTT = new TobagoTestTool(assert);
   TTT.action(function () {
-    textareaFn().val("some content");
+    textareaFn().value = "some content";
     submitFn().click();
   });
   TTT.waitForResponse();
   TTT.asserts(2, function () {
     assert.equal(messagesFn().length, 0);
-    assert.equal(textareaFn().val(), "some content");
+    assert.equal(textareaFn().value, "some content");
   });
   TTT.startTest();
 });
 
 QUnit.test("Validate Length: Submit single character.", function (assert) {
-  var messagesFn = jQueryFrameFn("#page\\:messages.tobago-messages div");
-  var inFn = jQueryFrameFn("#page\\:mainForm\\:validateLength\\:in_vl\\:\\:field");
-  var submitFn = jQueryFrameFn("#page\\:mainForm\\:validateLength\\:submit_vl");
+  let messagesFn = testFrameQuerySelectorAllFn("#page\\:messages.tobago-messages div");
+  let inFn = testFrameQuerySelectorFn("#page\\:mainForm\\:validateLength\\:in_vl\\:\\:field");
+  let submitFn = testFrameQuerySelectorFn("#page\\:mainForm\\:validateLength\\:submit_vl");
 
-  var TTT = new TobagoTestTool(assert);
+  let TTT = new TobagoTestTool(assert);
   TTT.action(function () {
-    inFn().val("a");
+    inFn().value = "a";
     submitFn().click();
   });
   TTT.waitForResponse();
@@ -73,13 +73,13 @@ QUnit.test("Validate Length: Submit single character.", function (assert) {
 });
 
 QUnit.test("Validate Length: Submit two character.", function (assert) {
-  var messagesFn = jQueryFrameFn("#page\\:messages.tobago-messages div");
-  var inFn = jQueryFrameFn("#page\\:mainForm\\:validateLength\\:in_vl\\:\\:field");
-  var submitFn = jQueryFrameFn("#page\\:mainForm\\:validateLength\\:submit_vl");
+  let messagesFn = testFrameQuerySelectorAllFn("#page\\:messages.tobago-messages div");
+  let inFn = testFrameQuerySelectorFn("#page\\:mainForm\\:validateLength\\:in_vl\\:\\:field");
+  let submitFn = testFrameQuerySelectorFn("#page\\:mainForm\\:validateLength\\:submit_vl");
 
-  var TTT = new TobagoTestTool(assert);
+  let TTT = new TobagoTestTool(assert);
   TTT.action(function () {
-    inFn().val("ab");
+    inFn().value = "ab";
     submitFn().click();
   });
   TTT.waitForResponse();
@@ -90,13 +90,13 @@ QUnit.test("Validate Length: Submit two character.", function (assert) {
 });
 
 QUnit.test("Validate Range: Submit no number.", function (assert) {
-  var messagesFn = jQueryFrameFn("#page\\:messages.tobago-messages div");
-  var inFn = jQueryFrameFn("#page\\:mainForm\\:validateRange\\:in_vr\\:\\:field");
-  var submitFn = jQueryFrameFn("#page\\:mainForm\\:validateRange\\:submit_vr");
+  let messagesFn = testFrameQuerySelectorAllFn("#page\\:messages.tobago-messages div");
+  let inFn = testFrameQuerySelectorFn("#page\\:mainForm\\:validateRange\\:in_vr\\:\\:field");
+  let submitFn = testFrameQuerySelectorFn("#page\\:mainForm\\:validateRange\\:submit_vr");
 
-  var TTT = new TobagoTestTool(assert);
+  let TTT = new TobagoTestTool(assert);
   TTT.action(function () {
-    inFn().val("no number");
+    inFn().value = "no number";
     submitFn().click();
   });
   TTT.waitForResponse();
@@ -107,13 +107,13 @@ QUnit.test("Validate Range: Submit no number.", function (assert) {
 });
 
 QUnit.test("Validate Range: Submit number '2' which is out of range.", function (assert) {
-  var messagesFn = jQueryFrameFn("#page\\:messages.tobago-messages div");
-  var inFn = jQueryFrameFn("#page\\:mainForm\\:validateRange\\:in_vr\\:\\:field");
-  var submitFn = jQueryFrameFn("#page\\:mainForm\\:validateRange\\:submit_vr");
+  let messagesFn = testFrameQuerySelectorAllFn("#page\\:messages.tobago-messages div");
+  let inFn = testFrameQuerySelectorFn("#page\\:mainForm\\:validateRange\\:in_vr\\:\\:field");
+  let submitFn = testFrameQuerySelectorFn("#page\\:mainForm\\:validateRange\\:submit_vr");
 
-  var TTT = new TobagoTestTool(assert);
+  let TTT = new TobagoTestTool(assert);
   TTT.action(function () {
-    inFn().val("2");
+    inFn().value = "2";
     submitFn().click();
   });
   TTT.waitForResponse();
@@ -124,13 +124,13 @@ QUnit.test("Validate Range: Submit number '2' which is out of range.", function
 });
 
 QUnit.test("Validate Range: Submit number '78' which is out of range.", function (assert) {
-  var messagesFn = jQueryFrameFn("#page\\:messages.tobago-messages div");
-  var inFn = jQueryFrameFn("#page\\:mainForm\\:validateRange\\:in_vr\\:\\:field");
-  var submitFn = jQueryFrameFn("#page\\:mainForm\\:validateRange\\:submit_vr");
+  let messagesFn = testFrameQuerySelectorAllFn("#page\\:messages.tobago-messages div");
+  let inFn = testFrameQuerySelectorFn("#page\\:mainForm\\:validateRange\\:in_vr\\:\\:field");
+  let submitFn = testFrameQuerySelectorFn("#page\\:mainForm\\:validateRange\\:submit_vr");
 
-  var TTT = new TobagoTestTool(assert);
+  let TTT = new TobagoTestTool(assert);
   TTT.action(function () {
-    inFn().val("78");
+    inFn().value = "78";
     submitFn().click();
   });
   TTT.waitForResponse();
@@ -141,13 +141,13 @@ QUnit.test("Validate Range: Submit number '78' which is out of range.", function
 });
 
 QUnit.test("Validate Range: Submit number '64' which is within the range.", function (assert) {
-  var messagesFn = jQueryFrameFn("#page\\:messages.tobago-messages div");
-  var inFn = jQueryFrameFn("#page\\:mainForm\\:validateRange\\:in_vr\\:\\:field");
-  var submitFn = jQueryFrameFn("#page\\:mainForm\\:validateRange\\:submit_vr");
+  let messagesFn = testFrameQuerySelectorAllFn("#page\\:messages.tobago-messages div");
+  let inFn = testFrameQuerySelectorFn("#page\\:mainForm\\:validateRange\\:in_vr\\:\\:field");
+  let submitFn = testFrameQuerySelectorFn("#page\\:mainForm\\:validateRange\\:submit_vr");
 
-  var TTT = new TobagoTestTool(assert);
+  let TTT = new TobagoTestTool(assert);
   TTT.action(function () {
-    inFn().val("64");
+    inFn().value = "64";
     submitFn().click();
   });
   TTT.waitForResponse();
@@ -158,13 +158,13 @@ QUnit.test("Validate Range: Submit number '64' which is within the range.", func
 });
 
 QUnit.test("Regex Validation: Submit 'T' which violates the pattern.", function (assert) {
-  var messagesFn = jQueryFrameFn("#page\\:messages.tobago-messages div");
-  var inFn = jQueryFrameFn("#page\\:mainForm\\:regexValidation\\:in_rv\\:\\:field");
-  var submitFn = jQueryFrameFn("#page\\:mainForm\\:regexValidation\\:submit_rv");
+  let messagesFn = testFrameQuerySelectorAllFn("#page\\:messages.tobago-messages div");
+  let inFn = testFrameQuerySelectorFn("#page\\:mainForm\\:regexValidation\\:in_rv\\:\\:field");
+  let submitFn = testFrameQuerySelectorFn("#page\\:mainForm\\:regexValidation\\:submit_rv");
 
-  var TTT = new TobagoTestTool(assert);
+  let TTT = new TobagoTestTool(assert);
   TTT.action(function () {
-    inFn().val("T");
+    inFn().value = "T";
     submitFn().click();
   });
   TTT.waitForResponse();
@@ -175,13 +175,13 @@ QUnit.test("Regex Validation: Submit 'T' which violates the pattern.", function
 });
 
 QUnit.test("Regex Validation: Submit '3' which violates the pattern.", function (assert) {
-  var messagesFn = jQueryFrameFn("#page\\:messages.tobago-messages div");
-  var inFn = jQueryFrameFn("#page\\:mainForm\\:regexValidation\\:in_rv\\:\\:field");
-  var submitFn = jQueryFrameFn("#page\\:mainForm\\:regexValidation\\:submit_rv");
+  let messagesFn = testFrameQuerySelectorAllFn("#page\\:messages.tobago-messages div");
+  let inFn = testFrameQuerySelectorFn("#page\\:mainForm\\:regexValidation\\:in_rv\\:\\:field");
+  let submitFn = testFrameQuerySelectorFn("#page\\:mainForm\\:regexValidation\\:submit_rv");
 
-  var TTT = new TobagoTestTool(assert);
+  let TTT = new TobagoTestTool(assert);
   TTT.action(function () {
-    inFn().val("3");
+    inFn().value = "3";
     submitFn().click();
   });
   TTT.waitForResponse();
@@ -192,13 +192,13 @@ QUnit.test("Regex Validation: Submit '3' which violates the pattern.", function
 });
 
 QUnit.test("Regex Validation: Submit 'T3' which is accepted.", function (assert) {
-  var messagesFn = jQueryFrameFn("#page\\:messages.tobago-messages div");
-  var inFn = jQueryFrameFn("#page\\:mainForm\\:regexValidation\\:in_rv\\:\\:field");
-  var submitFn = jQueryFrameFn("#page\\:mainForm\\:regexValidation\\:submit_rv");
+  let messagesFn = testFrameQuerySelectorAllFn("#page\\:messages.tobago-messages div");
+  let inFn = testFrameQuerySelectorFn("#page\\:mainForm\\:regexValidation\\:in_rv\\:\\:field");
+  let submitFn = testFrameQuerySelectorFn("#page\\:mainForm\\:regexValidation\\:submit_rv");
 
-  var TTT = new TobagoTestTool(assert);
+  let TTT = new TobagoTestTool(assert);
   TTT.action(function () {
-    inFn().val("T3");
+    inFn().value = "T3";
     submitFn().click();
   });
   TTT.waitForResponse();
@@ -209,13 +209,13 @@ QUnit.test("Regex Validation: Submit 'T3' which is accepted.", function (assert)
 });
 
 QUnit.test("Custom Validator: Submit rejected string.", function (assert) {
-  var messagesFn = jQueryFrameFn("#page\\:messages.tobago-messages div");
-  var inFn = jQueryFrameFn("#page\\:mainForm\\:customValidator\\:in_cv\\:\\:field");
-  var submitFn = jQueryFrameFn("#page\\:mainForm\\:customValidator\\:submit_cv");
+  let messagesFn = testFrameQuerySelectorAllFn("#page\\:messages.tobago-messages div");
+  let inFn = testFrameQuerySelectorFn("#page\\:mainForm\\:customValidator\\:in_cv\\:\\:field");
+  let submitFn = testFrameQuerySelectorFn("#page\\:mainForm\\:customValidator\\:submit_cv");
 
-  var TTT = new TobagoTestTool(assert);
+  let TTT = new TobagoTestTool(assert);
   TTT.action(function () {
-    inFn().val("java");
+    inFn().value = "java";
     submitFn().click();
   });
   TTT.waitForResponse();
@@ -226,13 +226,13 @@ QUnit.test("Custom Validator: Submit rejected string.", function (assert) {
 });
 
 QUnit.test("Custom Validator: Submit accepted string.", function (assert) {
-  var messagesFn = jQueryFrameFn("#page\\:messages.tobago-messages div");
-  var inFn = jQueryFrameFn("#page\\:mainForm\\:customValidator\\:in_cv\\:\\:field");
-  var submitFn = jQueryFrameFn("#page\\:mainForm\\:customValidator\\:submit_cv");
+  let messagesFn = testFrameQuerySelectorAllFn("#page\\:messages.tobago-messages div");
+  let inFn = testFrameQuerySelectorFn("#page\\:mainForm\\:customValidator\\:in_cv\\:\\:field");
+  let submitFn = testFrameQuerySelectorFn("#page\\:mainForm\\:customValidator\\:submit_cv");
 
-  var TTT = new TobagoTestTool(assert);
+  let TTT = new TobagoTestTool(assert);
   TTT.action(function () {
-    inFn().val("tobago");
+    inFn().value = "tobago";
     submitFn().click();
   });
   TTT.waitForResponse();
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/30-concept/06-validation/01/JSR_303.test.js b/tobago-example/tobago-example-demo/src/main/webapp/content/30-concept/06-validation/01/JSR_303.test.js
index 3e1394c..9e01a0e 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/30-concept/06-validation/01/JSR_303.test.js
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/30-concept/06-validation/01/JSR_303.test.js
@@ -15,17 +15,17 @@
  * limitations under the License.
  */
 
-import {jQueryFrameFn} from "/script/tobago-test.js";
+import {testFrameQuerySelectorAllFn, testFrameQuerySelectorFn} from "/script/tobago-test.js";
 import {TobagoTestTool} from "/tobago/test/tobago-test-tool.js";
 
 QUnit.test("Required: Submit without content.", function (assert) {
-  var messagesFn = jQueryFrameFn("#page\\:messages.tobago-messages div");
-  var inFn = jQueryFrameFn("#page\\:mainForm\\:required\\:in1\\:\\:field");
-  var submitFn = jQueryFrameFn("#page\\:mainForm\\:required\\:submit1");
+  let messagesFn = testFrameQuerySelectorAllFn("#page\\:messages.tobago-messages div");
+  let inFn = testFrameQuerySelectorFn("#page\\:mainForm\\:required\\:in1\\:\\:field");
+  let submitFn = testFrameQuerySelectorFn("#page\\:mainForm\\:required\\:submit1");
 
-  var TTT = new TobagoTestTool(assert);
+  let TTT = new TobagoTestTool(assert);
   TTT.action(function () {
-    inFn().val("");
+    inFn().value = "";
     submitFn().click();
   });
   TTT.waitForResponse();
@@ -36,13 +36,13 @@ QUnit.test("Required: Submit without content.", function (assert) {
 });
 
 QUnit.test("Required: Submit with content.", function (assert) {
-  var messagesFn = jQueryFrameFn("#page\\:messages.tobago-messages div");
-  var inFn = jQueryFrameFn("#page\\:mainForm\\:required\\:in1\\:\\:field");
-  var submitFn = jQueryFrameFn("#page\\:mainForm\\:required\\:submit1");
+  let messagesFn = testFrameQuerySelectorAllFn("#page\\:messages.tobago-messages div");
+  let inFn = testFrameQuerySelectorFn("#page\\:mainForm\\:required\\:in1\\:\\:field");
+  let submitFn = testFrameQuerySelectorFn("#page\\:mainForm\\:required\\:submit1");
 
-  var TTT = new TobagoTestTool(assert);
+  let TTT = new TobagoTestTool(assert);
   TTT.action(function () {
-    inFn().val("some content");
+    inFn().value = "some content";
     submitFn().click();
   });
   TTT.waitForResponse();
@@ -53,13 +53,13 @@ QUnit.test("Required: Submit with content.", function (assert) {
 });
 
 QUnit.test("Length: Submit single character.", function (assert) {
-  var messagesFn = jQueryFrameFn("#page\\:messages.tobago-messages div");
-  var inFn = jQueryFrameFn("#page\\:mainForm\\:length\\:in2\\:\\:field");
-  var submitFn = jQueryFrameFn("#page\\:mainForm\\:length\\:submit2");
+  let messagesFn = testFrameQuerySelectorAllFn("#page\\:messages.tobago-messages div");
+  let inFn = testFrameQuerySelectorFn("#page\\:mainForm\\:length\\:in2\\:\\:field");
+  let submitFn = testFrameQuerySelectorFn("#page\\:mainForm\\:length\\:submit2");
 
-  var TTT = new TobagoTestTool(assert);
+  let TTT = new TobagoTestTool(assert);
   TTT.action(function () {
-    inFn().val("a");
+    inFn().value = "a";
     submitFn().click();
   });
   TTT.waitForResponse();
@@ -70,13 +70,13 @@ QUnit.test("Length: Submit single character.", function (assert) {
 });
 
 QUnit.test("Length: Submit three characters.", function (assert) {
-  var messagesFn = jQueryFrameFn("#page\\:messages.tobago-messages div");
-  var inFn = jQueryFrameFn("#page\\:mainForm\\:length\\:in2\\:\\:field");
-  var submitFn = jQueryFrameFn("#page\\:mainForm\\:length\\:submit2");
+  let messagesFn = testFrameQuerySelectorAllFn("#page\\:messages.tobago-messages div");
+  let inFn = testFrameQuerySelectorFn("#page\\:mainForm\\:length\\:in2\\:\\:field");
+  let submitFn = testFrameQuerySelectorFn("#page\\:mainForm\\:length\\:submit2");
 
-  var TTT = new TobagoTestTool(assert);
+  let TTT = new TobagoTestTool(assert);
   TTT.action(function () {
-    inFn().val("abc");
+    inFn().value = "abc";
     submitFn().click();
   });
   TTT.waitForResponse();
@@ -87,13 +87,13 @@ QUnit.test("Length: Submit three characters.", function (assert) {
 });
 
 QUnit.test("Length: Submit five characters.", function (assert) {
-  var messagesFn = jQueryFrameFn("#page\\:messages.tobago-messages div");
-  var inFn = jQueryFrameFn("#page\\:mainForm\\:length\\:in2\\:\\:field");
-  var submitFn = jQueryFrameFn("#page\\:mainForm\\:length\\:submit2");
+  let messagesFn = testFrameQuerySelectorAllFn("#page\\:messages.tobago-messages div");
+  let inFn = testFrameQuerySelectorFn("#page\\:mainForm\\:length\\:in2\\:\\:field");
+  let submitFn = testFrameQuerySelectorFn("#page\\:mainForm\\:length\\:submit2");
 
-  var TTT = new TobagoTestTool(assert);
+  let TTT = new TobagoTestTool(assert);
   TTT.action(function () {
-    inFn().val("abcde");
+    inFn().value = "abcde";
     submitFn().click();
   });
   TTT.waitForResponse();
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/30-concept/08-form/10-required/Required.test.js b/tobago-example/tobago-example-demo/src/main/webapp/content/30-concept/08-form/10-required/Required.test.js
index 887d3fa..c884783 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/30-concept/08-form/10-required/Required.test.js
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/30-concept/08-form/10-required/Required.test.js
@@ -15,189 +15,189 @@
  * limitations under the License.
  */
 
-import {jQueryFrameFn} from "/script/tobago-test.js";
+import {testFrameQuerySelectorAllFn, testFrameQuerySelectorFn} from "/script/tobago-test.js";
 import {TobagoTestTool} from "/tobago/test/tobago-test-tool.js";
 
 QUnit.test("submit inner form 1 without violations", function (assert) {
-  var form1InputFieldFn = jQueryFrameFn("#page\\:mainForm\\:outerForm\\:innerForm1\\:in1\\:\\:field");
-  var form1SubmitButtonFn = jQueryFrameFn("#page\\:mainForm\\:outerForm\\:innerForm1\\:submit1");
-  var form1OutputFieldFn = jQueryFrameFn("#page\\:mainForm\\:outerForm\\:innerForm1\\:out1 span");
-  var alertFn = jQueryFrameFn("#page\\:messages .alert-danger label");
+  let form1InputFieldFn = testFrameQuerySelectorFn("#page\\:mainForm\\:outerForm\\:innerForm1\\:in1\\:\\:field");
+  let form1SubmitButtonFn = testFrameQuerySelectorFn("#page\\:mainForm\\:outerForm\\:innerForm1\\:submit1");
+  let form1OutputFieldFn = testFrameQuerySelectorFn("#page\\:mainForm\\:outerForm\\:innerForm1\\:out1 span");
+  let alertFn = testFrameQuerySelectorAllFn("#page\\:messages .alert-danger label");
 
-  var TTT = new TobagoTestTool(assert);
+  let TTT = new TobagoTestTool(assert);
   TTT.action(function () {
-    form1InputFieldFn().val("Alice");
+    form1InputFieldFn().value = "Alice";
     form1SubmitButtonFn().click();
   });
   TTT.waitForResponse();
   TTT.asserts(3, function () {
-    assert.equal(form1InputFieldFn().val(), "Alice");
-    assert.equal(form1OutputFieldFn().text(), "Alice");
+    assert.equal(form1InputFieldFn().value, "Alice");
+    assert.equal(form1OutputFieldFn().textContent, "Alice");
     assert.equal(alertFn().length, "0");
   });
   TTT.startTest();
 });
 
 QUnit.test("submit inner form 2, violate required field", function (assert) {
-  var form2InputFieldFn = jQueryFrameFn("#page\\:mainForm\\:outerForm\\:innerForm2\\:in2\\:\\:field");
-  var form2SubmitButtonFn = jQueryFrameFn("#page\\:mainForm\\:outerForm\\:innerForm2\\:submit2");
-  var form2OutputFieldFn = jQueryFrameFn("#page\\:mainForm\\:outerForm\\:innerForm2\\:out2 span");
-  var form2OutputFieldValue = form2OutputFieldFn().text();
-  var alertFn = jQueryFrameFn("#page\\:messages .alert-danger label");
+  let form2InputFieldFn = testFrameQuerySelectorFn("#page\\:mainForm\\:outerForm\\:innerForm2\\:in2\\:\\:field");
+  let form2SubmitButtonFn = testFrameQuerySelectorFn("#page\\:mainForm\\:outerForm\\:innerForm2\\:submit2");
+  let form2OutputFieldFn = testFrameQuerySelectorFn("#page\\:mainForm\\:outerForm\\:innerForm2\\:out2 span");
+  let form2OutputFieldValue = form2OutputFieldFn().textContent;
+  let alertFn = testFrameQuerySelectorAllFn("#page\\:messages .alert-danger label");
 
-  var TTT = new TobagoTestTool(assert);
+  let TTT = new TobagoTestTool(assert);
   TTT.action(function () {
-    form2InputFieldFn().val("");
+    form2InputFieldFn().value = "";
   });
   TTT.asserts(1, function () {
-    assert.equal(form2InputFieldFn().val(), "");
+    assert.equal(form2InputFieldFn().value, "");
   });
   TTT.action(function () {
     form2SubmitButtonFn().click();
   });
   TTT.waitForResponse();
   TTT.asserts(3, function () {
-    assert.equal(form2InputFieldFn().val(), "");
-    assert.equal(form2OutputFieldFn().text(), form2OutputFieldValue);
+    assert.equal(form2InputFieldFn().value, "");
+    assert.equal(form2OutputFieldFn().textContent, form2OutputFieldValue);
     assert.equal(alertFn().length, "1");
   });
   TTT.startTest();
 });
 
 QUnit.test("submit inner form 2 without violations", function (assert) {
-  var form2InputFieldFn = jQueryFrameFn("#page\\:mainForm\\:outerForm\\:innerForm2\\:in2\\:\\:field");
-  var form2SubmitButtonFn = jQueryFrameFn("#page\\:mainForm\\:outerForm\\:innerForm2\\:submit2");
-  var form2OutputFieldFn = jQueryFrameFn("#page\\:mainForm\\:outerForm\\:innerForm2\\:out2 span");
-  var alertFn = jQueryFrameFn("#page\\:messages .alert-danger label");
+  let form2InputFieldFn = testFrameQuerySelectorFn("#page\\:mainForm\\:outerForm\\:innerForm2\\:in2\\:\\:field");
+  let form2SubmitButtonFn = testFrameQuerySelectorFn("#page\\:mainForm\\:outerForm\\:innerForm2\\:submit2");
+  let form2OutputFieldFn = testFrameQuerySelectorFn("#page\\:mainForm\\:outerForm\\:innerForm2\\:out2 span");
+  let alertFn = testFrameQuerySelectorAllFn("#page\\:messages .alert-danger label");
 
-  var TTT = new TobagoTestTool(assert);
+  let TTT = new TobagoTestTool(assert);
   TTT.action(function () {
-    form2InputFieldFn().val("Bob");
+    form2InputFieldFn().value = "Bob";
   });
   TTT.asserts(1, function () {
-    assert.equal(form2InputFieldFn().val(), "Bob");
+    assert.equal(form2InputFieldFn().value, "Bob");
   });
   TTT.action(function () {
     form2SubmitButtonFn().click();
   });
   TTT.waitForResponse();
   TTT.asserts(3, function () {
-    assert.equal(form2InputFieldFn().val(), "Bob");
-    assert.equal(form2OutputFieldFn().text(), "Bob");
+    assert.equal(form2InputFieldFn().value, "Bob");
+    assert.equal(form2OutputFieldFn().textContent, "Bob");
     assert.equal(alertFn().length, "0");
   });
   TTT.startTest();
 });
 
 QUnit.test("submit outer form, violate both required fields", function (assert) {
-  var form2InputFieldFn = jQueryFrameFn("#page\\:mainForm\\:outerForm\\:innerForm2\\:in2\\:\\:field");
-  var outerFormInputFieldFn = jQueryFrameFn("#page\\:mainForm\\:outerForm\\:in\\:\\:field");
-  var outerFormSubmitButtonFn = jQueryFrameFn("#page\\:mainForm\\:outerForm\\:submit");
-  var form2OutputFieldFn = jQueryFrameFn("#page\\:mainForm\\:outerForm\\:innerForm2\\:out2 span");
-  var outerFormOutputFieldFn = jQueryFrameFn("#page\\:mainForm\\:outerForm\\:out span");
-  var alertFn = jQueryFrameFn("#page\\:messages .alert-danger label");
+  let form2InputFieldFn = testFrameQuerySelectorFn("#page\\:mainForm\\:outerForm\\:innerForm2\\:in2\\:\\:field");
+  let outerFormInputFieldFn = testFrameQuerySelectorFn("#page\\:mainForm\\:outerForm\\:in\\:\\:field");
+  let outerFormSubmitButtonFn = testFrameQuerySelectorFn("#page\\:mainForm\\:outerForm\\:submit");
+  let form2OutputFieldFn = testFrameQuerySelectorFn("#page\\:mainForm\\:outerForm\\:innerForm2\\:out2 span");
+  let outerFormOutputFieldFn = testFrameQuerySelectorFn("#page\\:mainForm\\:outerForm\\:out span");
+  let alertFn = testFrameQuerySelectorAllFn("#page\\:messages .alert-danger label");
 
-  var form2OutputFieldValue = form2OutputFieldFn().text();
-  var outerFormOutputFieldValue = outerFormOutputFieldFn().text();
+  let form2OutputFieldValue = form2OutputFieldFn().textContent;
+  let outerFormOutputFieldValue = outerFormOutputFieldFn().textContent;
 
-  var TTT = new TobagoTestTool(assert);
+  let TTT = new TobagoTestTool(assert);
   TTT.action(function () {
-    form2InputFieldFn().val("");
-    outerFormInputFieldFn().val("");
+    form2InputFieldFn().value = "";
+    outerFormInputFieldFn().value = "";
     outerFormSubmitButtonFn().click();
   });
   TTT.waitForResponse();
   TTT.asserts(5, function () {
-    assert.equal(form2InputFieldFn().val(), "");
-    assert.equal(form2OutputFieldFn().text(), form2OutputFieldValue);
-    assert.equal(outerFormInputFieldFn().val(), "");
-    assert.equal(outerFormOutputFieldFn().text(), outerFormOutputFieldValue);
+    assert.equal(form2InputFieldFn().value, "");
+    assert.equal(form2OutputFieldFn().textContent, form2OutputFieldValue);
+    assert.equal(outerFormInputFieldFn().value, "");
+    assert.equal(outerFormOutputFieldFn().textContent, outerFormOutputFieldValue);
     assert.equal(alertFn().length, "2");
   });
   TTT.startTest();
 });
 
 QUnit.test("submit outer form, violate required field in form 2", function (assert) {
-  var form2InputFieldFn = jQueryFrameFn("#page\\:mainForm\\:outerForm\\:innerForm2\\:in2\\:\\:field");
-  var outerFormInputFieldFn = jQueryFrameFn("#page\\:mainForm\\:outerForm\\:in\\:\\:field");
-  var outerFormSubmitButtonFn = jQueryFrameFn("#page\\:mainForm\\:outerForm\\:submit");
-  var form2OutputFieldFn = jQueryFrameFn("#page\\:mainForm\\:outerForm\\:innerForm2\\:out2 span");
-  var outerFormOutputFieldFn = jQueryFrameFn("#page\\:mainForm\\:outerForm\\:out span");
-  var alertFn = jQueryFrameFn("#page\\:messages .alert-danger label");
+  let form2InputFieldFn = testFrameQuerySelectorFn("#page\\:mainForm\\:outerForm\\:innerForm2\\:in2\\:\\:field");
+  let outerFormInputFieldFn = testFrameQuerySelectorFn("#page\\:mainForm\\:outerForm\\:in\\:\\:field");
+  let outerFormSubmitButtonFn = testFrameQuerySelectorFn("#page\\:mainForm\\:outerForm\\:submit");
+  let form2OutputFieldFn = testFrameQuerySelectorFn("#page\\:mainForm\\:outerForm\\:innerForm2\\:out2 span");
+  let outerFormOutputFieldFn = testFrameQuerySelectorFn("#page\\:mainForm\\:outerForm\\:out span");
+  let alertFn = testFrameQuerySelectorAllFn("#page\\:messages .alert-danger label");
 
-  var form2OutputFieldValue = form2OutputFieldFn().text();
-  var outerFormOutputFieldValue = outerFormOutputFieldFn().text();
+  let form2OutputFieldValue = form2OutputFieldFn().textContent;
+  let outerFormOutputFieldValue = outerFormOutputFieldFn().textContent;
 
-  var TTT = new TobagoTestTool(assert);
+  let TTT = new TobagoTestTool(assert);
   TTT.action(function () {
-    form2InputFieldFn().val("");
-    outerFormInputFieldFn().val("Charlie");
+    form2InputFieldFn().value = "";
+    outerFormInputFieldFn().value = "Charlie";
     outerFormSubmitButtonFn().click();
   });
   TTT.waitForResponse();
   TTT.asserts(5, function () {
-    assert.equal(form2InputFieldFn().val(), "");
-    assert.equal(form2OutputFieldFn().text(), form2OutputFieldValue);
-    assert.equal(outerFormInputFieldFn().val(), "Charlie");
-    assert.equal(outerFormOutputFieldFn().text(), outerFormOutputFieldValue);
+    assert.equal(form2InputFieldFn().value, "");
+    assert.equal(form2OutputFieldFn().textContent, form2OutputFieldValue);
+    assert.equal(outerFormInputFieldFn().value, "Charlie");
+    assert.equal(outerFormOutputFieldFn().textContent, outerFormOutputFieldValue);
     assert.equal(alertFn().length, "1");
   });
   TTT.startTest();
 });
 
 QUnit.test("submit outer form, violate required field in outer form", function (assert) {
-  var form2InputFieldFn = jQueryFrameFn("#page\\:mainForm\\:outerForm\\:innerForm2\\:in2\\:\\:field");
-  var outerFormInputFieldFn = jQueryFrameFn("#page\\:mainForm\\:outerForm\\:in\\:\\:field");
-  var outerFormSubmitButtonFn = jQueryFrameFn("#page\\:mainForm\\:outerForm\\:submit");
-  var form2OutputFieldFn = jQueryFrameFn("#page\\:mainForm\\:outerForm\\:innerForm2\\:out2 span");
-  var outerFormOutputFieldFn = jQueryFrameFn("#page\\:mainForm\\:outerForm\\:out span");
-  var alertFn = jQueryFrameFn("#page\\:messages .alert-danger label");
+  let form2InputFieldFn = testFrameQuerySelectorFn("#page\\:mainForm\\:outerForm\\:innerForm2\\:in2\\:\\:field");
+  let outerFormInputFieldFn = testFrameQuerySelectorFn("#page\\:mainForm\\:outerForm\\:in\\:\\:field");
+  let outerFormSubmitButtonFn = testFrameQuerySelectorFn("#page\\:mainForm\\:outerForm\\:submit");
+  let form2OutputFieldFn = testFrameQuerySelectorFn("#page\\:mainForm\\:outerForm\\:innerForm2\\:out2 span");
+  let outerFormOutputFieldFn = testFrameQuerySelectorFn("#page\\:mainForm\\:outerForm\\:out span");
+  let alertFn = testFrameQuerySelectorAllFn("#page\\:messages .alert-danger label");
 
-  var form2OutputFieldValue = form2OutputFieldFn().text();
-  var outerFormOutputFieldValue = outerFormOutputFieldFn().text();
+  let form2OutputFieldValue = form2OutputFieldFn().textContent;
+  let outerFormOutputFieldValue = outerFormOutputFieldFn().textContent;
 
-  var TTT = new TobagoTestTool(assert);
+  let TTT = new TobagoTestTool(assert);
   TTT.action(function () {
-    form2InputFieldFn().val("Dave");
-    outerFormInputFieldFn().val("");
+    form2InputFieldFn().value = "Dave";
+    outerFormInputFieldFn().value = "";
     outerFormSubmitButtonFn().click();
   });
   TTT.waitForResponse();
   TTT.asserts(5, function () {
-    assert.equal(form2InputFieldFn().val(), "Dave");
-    assert.equal(form2OutputFieldFn().text(), form2OutputFieldValue);
-    assert.equal(outerFormInputFieldFn().val(), "");
-    assert.equal(outerFormOutputFieldFn().text(), outerFormOutputFieldValue);
+    assert.equal(form2InputFieldFn().value, "Dave");
+    assert.equal(form2OutputFieldFn().textContent, form2OutputFieldValue);
+    assert.equal(outerFormInputFieldFn().value, "");
+    assert.equal(outerFormOutputFieldFn().textContent, outerFormOutputFieldValue);
     assert.equal(alertFn().length, "1");
   });
   TTT.startTest();
 });
 
 QUnit.test("submit outer form without violations", function (assert) {
-  var form1InputFieldFn = jQueryFrameFn("#page\\:mainForm\\:outerForm\\:innerForm1\\:in1\\:\\:field");
-  var form2InputFieldFn = jQueryFrameFn("#page\\:mainForm\\:outerForm\\:innerForm2\\:in2\\:\\:field");
-  var outerFormInputFieldFn = jQueryFrameFn("#page\\:mainForm\\:outerForm\\:in\\:\\:field");
-  var outerFormSubmitButtonFn = jQueryFrameFn("#page\\:mainForm\\:outerForm\\:submit");
-  var form1OutputFieldFn = jQueryFrameFn("#page\\:mainForm\\:outerForm\\:innerForm1\\:out1 span");
-  var form2OutputFieldFn = jQueryFrameFn("#page\\:mainForm\\:outerForm\\:innerForm2\\:out2 span");
-  var outerFormOutputFieldFn = jQueryFrameFn("#page\\:mainForm\\:outerForm\\:out span");
-  var alertFn = jQueryFrameFn("#page\\:messages .alert-danger label");
-
-  var TTT = new TobagoTestTool(assert);
+  let form1InputFieldFn = testFrameQuerySelectorFn("#page\\:mainForm\\:outerForm\\:innerForm1\\:in1\\:\\:field");
+  let form2InputFieldFn = testFrameQuerySelectorFn("#page\\:mainForm\\:outerForm\\:innerForm2\\:in2\\:\\:field");
+  let outerFormInputFieldFn = testFrameQuerySelectorFn("#page\\:mainForm\\:outerForm\\:in\\:\\:field");
+  let outerFormSubmitButtonFn = testFrameQuerySelectorFn("#page\\:mainForm\\:outerForm\\:submit");
+  let form1OutputFieldFn = testFrameQuerySelectorFn("#page\\:mainForm\\:outerForm\\:innerForm1\\:out1 span");
+  let form2OutputFieldFn = testFrameQuerySelectorFn("#page\\:mainForm\\:outerForm\\:innerForm2\\:out2 span");
+  let outerFormOutputFieldFn = testFrameQuerySelectorFn("#page\\:mainForm\\:outerForm\\:out span");
+  let alertFn = testFrameQuerySelectorAllFn("#page\\:messages .alert-danger label");
+
+  let TTT = new TobagoTestTool(assert);
   TTT.action(function () {
-    form1InputFieldFn().val("Eve");
-    form2InputFieldFn().val("Frank");
-    outerFormInputFieldFn().val("Grace");
+    form1InputFieldFn().value = "Eve";
+    form2InputFieldFn().value = "Frank";
+    outerFormInputFieldFn().value = "Grace";
     outerFormSubmitButtonFn().click();
   });
   TTT.waitForResponse();
   TTT.asserts(7, function () {
-    assert.equal(form1InputFieldFn().val(), "Eve");
-    assert.equal(form1OutputFieldFn().text(), "Eve");
-    assert.equal(form2InputFieldFn().val(), "Frank");
-    assert.equal(form2OutputFieldFn().text(), "Frank");
-    assert.equal(outerFormInputFieldFn().val(), "Grace");
-    assert.equal(outerFormOutputFieldFn().text(), "Grace");
+    assert.equal(form1InputFieldFn().value, "Eve");
+    assert.equal(form1OutputFieldFn().textContent, "Eve");
+    assert.equal(form2InputFieldFn().value, "Frank");
+    assert.equal(form2OutputFieldFn().textContent, "Frank");
+    assert.equal(outerFormInputFieldFn().value, "Grace");
+    assert.equal(outerFormOutputFieldFn().textContent, "Grace");
     assert.equal(alertFn().length, "0");
   });
   TTT.startTest();
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/30-concept/08-form/20-ajax/Ajax.test.js b/tobago-example/tobago-example-demo/src/main/webapp/content/30-concept/08-form/20-ajax/Ajax.test.js
index de9897d..308043a 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/30-concept/08-form/20-ajax/Ajax.test.js
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/30-concept/08-form/20-ajax/Ajax.test.js
@@ -15,331 +15,331 @@
  * limitations under the License.
  */
 
-import {jQueryFrameFn} from "/script/tobago-test.js";
+import {testFrameQuerySelectorAllFn, testFrameQuerySelectorFn} from "/script/tobago-test.js";
 import {TobagoTestTool} from "/tobago/test/tobago-test-tool.js";
 
 QUnit.test("submit inner form 1 without violations", function (assert) {
-  var form1InputFieldFn = jQueryFrameFn("#page\\:mainForm\\:outerForm\\:form1\\:in1\\:\\:field");
-  var form1OutputFieldFn = jQueryFrameFn("#page\\:mainForm\\:outerForm\\:form1\\:out1 span");
-  var buttonFn = jQueryFrameFn("#page\\:mainForm\\:outerForm\\:form1\\:submit1");
-  var alertFn = jQueryFrameFn("#page\\:messages .alert-danger label");
+  let form1InputFieldFn = testFrameQuerySelectorFn("#page\\:mainForm\\:outerForm\\:form1\\:in1\\:\\:field");
+  let form1OutputFieldFn = testFrameQuerySelectorFn("#page\\:mainForm\\:outerForm\\:form1\\:out1 span");
+  let buttonFn = testFrameQuerySelectorFn("#page\\:mainForm\\:outerForm\\:form1\\:submit1");
+  let alertFn = testFrameQuerySelectorAllFn("#page\\:messages .alert-danger label");
 
-  var TTT = new TobagoTestTool(assert);
+  let TTT = new TobagoTestTool(assert);
   TTT.action(function () {
-    form1InputFieldFn().val("Alice");
+    form1InputFieldFn().value = "Alice";
     buttonFn().click();
   });
   TTT.waitForResponse();
   TTT.asserts(3, function () {
-    assert.equal(form1InputFieldFn().val(), "Alice");
-    assert.equal(form1OutputFieldFn().text(), "Alice");
+    assert.equal(form1InputFieldFn().value, "Alice");
+    assert.equal(form1OutputFieldFn().textContent, "Alice");
     assert.equal(alertFn().length, "0");
   });
   TTT.startTest();
 });
 
 QUnit.test("submit inner form 2, violate required field", function (assert) {
-  var form2InputFieldFn = jQueryFrameFn("#page\\:mainForm\\:outerForm\\:form2\\:in2\\:\\:field");
-  var form2OutputFieldFn = jQueryFrameFn("#page\\:mainForm\\:outerForm\\:form2\\:out2 span");
-  var buttonFn = jQueryFrameFn("#page\\:mainForm\\:outerForm\\:form2\\:submit2");
-  var alertFn = jQueryFrameFn("#page\\:messages .alert-danger label");
+  let form2InputFieldFn = testFrameQuerySelectorFn("#page\\:mainForm\\:outerForm\\:form2\\:in2\\:\\:field");
+  let form2OutputFieldFn = testFrameQuerySelectorFn("#page\\:mainForm\\:outerForm\\:form2\\:out2 span");
+  let buttonFn = testFrameQuerySelectorFn("#page\\:mainForm\\:outerForm\\:form2\\:submit2");
+  let alertFn = testFrameQuerySelectorAllFn("#page\\:messages .alert-danger label");
 
-  var form2OutputFieldValue = form2OutputFieldFn().text();
+  let form2OutputFieldValue = form2OutputFieldFn().textContent;
 
-  var TTT = new TobagoTestTool(assert);
+  let TTT = new TobagoTestTool(assert);
   TTT.action(function () {
-    form2InputFieldFn().val("");
+    form2InputFieldFn().value = "";
     buttonFn().click();
   });
   TTT.waitForResponse();
   TTT.asserts(3, function () {
-    assert.equal(form2InputFieldFn().val(), "");
-    assert.equal(form2OutputFieldFn().text(), form2OutputFieldValue);
+    assert.equal(form2InputFieldFn().value, "");
+    assert.equal(form2OutputFieldFn().textContent, form2OutputFieldValue);
     assert.equal(alertFn().length, "1");
   });
   TTT.startTest();
 });
 
 QUnit.test("submit inner form 2 without violations", function (assert) {
-  var form2InputFieldFn = jQueryFrameFn("#page\\:mainForm\\:outerForm\\:form2\\:in2\\:\\:field");
-  var form2OutputFieldFn = jQueryFrameFn("#page\\:mainForm\\:outerForm\\:form2\\:out2 span");
-  var buttonFn = jQueryFrameFn("#page\\:mainForm\\:outerForm\\:form2\\:submit2");
-  var alertFn = jQueryFrameFn("#page\\:messages .alert-danger label");
+  let form2InputFieldFn = testFrameQuerySelectorFn("#page\\:mainForm\\:outerForm\\:form2\\:in2\\:\\:field");
+  let form2OutputFieldFn = testFrameQuerySelectorFn("#page\\:mainForm\\:outerForm\\:form2\\:out2 span");
+  let buttonFn = testFrameQuerySelectorFn("#page\\:mainForm\\:outerForm\\:form2\\:submit2");
+  let alertFn = testFrameQuerySelectorAllFn("#page\\:messages .alert-danger label");
 
-  var TTT = new TobagoTestTool(assert);
+  let TTT = new TobagoTestTool(assert);
   TTT.action(function () {
-    form2InputFieldFn().val("Bob");
+    form2InputFieldFn().value = "Bob";
     buttonFn().click();
   });
   TTT.waitForResponse();
   TTT.asserts(3, function () {
-    assert.equal(form2InputFieldFn().val(), "Bob");
-    assert.equal(form2OutputFieldFn().text(), "Bob");
+    assert.equal(form2InputFieldFn().value, "Bob");
+    assert.equal(form2OutputFieldFn().textContent, "Bob");
     assert.equal(alertFn().length, "0");
   });
   TTT.startTest();
 });
 
 QUnit.test("submit outer form, violate both required fields", function (assert) {
-  var form1InputFieldFn = jQueryFrameFn("#page\\:mainForm\\:outerForm\\:form1\\:in1\\:\\:field");
-  var form1OutputFieldFn = jQueryFrameFn("#page\\:mainForm\\:outerForm\\:form1\\:out1 span");
-  var form2InputFieldFn = jQueryFrameFn("#page\\:mainForm\\:outerForm\\:form2\\:in2\\:\\:field");
-  var form2OutputFieldFn = jQueryFrameFn("#page\\:mainForm\\:outerForm\\:form2\\:out2 span");
-  var outerFormInputFieldFn = jQueryFrameFn("#page\\:mainForm\\:outerForm\\:in\\:\\:field");
-  var outerFormOutputFieldFn = jQueryFrameFn("#page\\:mainForm\\:outerForm\\:out span");
-  var buttonFn = jQueryFrameFn("#page\\:mainForm\\:outerForm\\:submit");
-  var alertFn = jQueryFrameFn("#page\\:messages .alert-danger label");
+  let form1InputFieldFn = testFrameQuerySelectorFn("#page\\:mainForm\\:outerForm\\:form1\\:in1\\:\\:field");
+  let form1OutputFieldFn = testFrameQuerySelectorFn("#page\\:mainForm\\:outerForm\\:form1\\:out1 span");
+  let form2InputFieldFn = testFrameQuerySelectorFn("#page\\:mainForm\\:outerForm\\:form2\\:in2\\:\\:field");
+  let form2OutputFieldFn = testFrameQuerySelectorFn("#page\\:mainForm\\:outerForm\\:form2\\:out2 span");
+  let outerFormInputFieldFn = testFrameQuerySelectorFn("#page\\:mainForm\\:outerForm\\:in\\:\\:field");
+  let outerFormOutputFieldFn = testFrameQuerySelectorFn("#page\\:mainForm\\:outerForm\\:out span");
+  let buttonFn = testFrameQuerySelectorFn("#page\\:mainForm\\:outerForm\\:submit");
+  let alertFn = testFrameQuerySelectorAllFn("#page\\:messages .alert-danger label");
 
-  var form1OutputFieldValue = form1OutputFieldFn().text();
-  var form2OutputFieldValue = form2OutputFieldFn().text();
-  var outerFormOutputFieldValue = outerFormOutputFieldFn().text();
+  let form1OutputFieldValue = form1OutputFieldFn().textContent;
+  let form2OutputFieldValue = form2OutputFieldFn().textContent;
+  let outerFormOutputFieldValue = outerFormOutputFieldFn().textContent;
 
-  var TTT = new TobagoTestTool(assert);
+  let TTT = new TobagoTestTool(assert);
   TTT.action(function () {
-    form1InputFieldFn().val("Charlie");
-    form2InputFieldFn().val("");
-    outerFormInputFieldFn().val("");
+    form1InputFieldFn().value = "Charlie";
+    form2InputFieldFn().value = "";
+    outerFormInputFieldFn().value = "";
     buttonFn().click();
   });
   TTT.waitForResponse();
   TTT.asserts(7, function () {
-    assert.equal(form1InputFieldFn().val(), "Charlie");
-    assert.equal(form1OutputFieldFn().text(), form1OutputFieldValue);
-    assert.equal(form2InputFieldFn().val(), "");
-    assert.equal(form2OutputFieldFn().text(), form2OutputFieldValue);
-    assert.equal(outerFormInputFieldFn().val(), "");
-    assert.equal(outerFormOutputFieldFn().text(), outerFormOutputFieldValue);
+    assert.equal(form1InputFieldFn().value, "Charlie");
+    assert.equal(form1OutputFieldFn().textContent, form1OutputFieldValue);
+    assert.equal(form2InputFieldFn().value, "");
+    assert.equal(form2OutputFieldFn().textContent, form2OutputFieldValue);
+    assert.equal(outerFormInputFieldFn().value, "");
+    assert.equal(outerFormOutputFieldFn().textContent, outerFormOutputFieldValue);
     assert.equal(alertFn().length, "2");
   });
   TTT.startTest();
 });
 
 QUnit.test("submit outer form, violate required field in form 2", function (assert) {
-  var form1InputFieldFn = jQueryFrameFn("#page\\:mainForm\\:outerForm\\:form1\\:in1\\:\\:field");
-  var form1OutputFieldFn = jQueryFrameFn("#page\\:mainForm\\:outerForm\\:form1\\:out1 span");
-  var form2InputFieldFn = jQueryFrameFn("#page\\:mainForm\\:outerForm\\:form2\\:in2\\:\\:field");
-  var form2OutputFieldFn = jQueryFrameFn("#page\\:mainForm\\:outerForm\\:form2\\:out2 span");
-  var outerFormInputFieldFn = jQueryFrameFn("#page\\:mainForm\\:outerForm\\:in\\:\\:field");
-  var outerFormOutputFieldFn = jQueryFrameFn("#page\\:mainForm\\:outerForm\\:out span");
-  var buttonFn = jQueryFrameFn("#page\\:mainForm\\:outerForm\\:submit");
-  var alertFn = jQueryFrameFn("#page\\:messages .alert-danger label");
+  let form1InputFieldFn = testFrameQuerySelectorFn("#page\\:mainForm\\:outerForm\\:form1\\:in1\\:\\:field");
+  let form1OutputFieldFn = testFrameQuerySelectorFn("#page\\:mainForm\\:outerForm\\:form1\\:out1 span");
+  let form2InputFieldFn = testFrameQuerySelectorFn("#page\\:mainForm\\:outerForm\\:form2\\:in2\\:\\:field");
+  let form2OutputFieldFn = testFrameQuerySelectorFn("#page\\:mainForm\\:outerForm\\:form2\\:out2 span");
+  let outerFormInputFieldFn = testFrameQuerySelectorFn("#page\\:mainForm\\:outerForm\\:in\\:\\:field");
+  let outerFormOutputFieldFn = testFrameQuerySelectorFn("#page\\:mainForm\\:outerForm\\:out span");
+  let buttonFn = testFrameQuerySelectorFn("#page\\:mainForm\\:outerForm\\:submit");
+  let alertFn = testFrameQuerySelectorAllFn("#page\\:messages .alert-danger label");
 
-  var form1OutputFieldValue = form1OutputFieldFn().text();
-  var form2OutputFieldValue = form2OutputFieldFn().text();
-  var outerFormOutputFieldValue = outerFormOutputFieldFn().text();
+  let form1OutputFieldValue = form1OutputFieldFn().textContent;
+  let form2OutputFieldValue = form2OutputFieldFn().textContent;
+  let outerFormOutputFieldValue = outerFormOutputFieldFn().textContent;
 
-  var TTT = new TobagoTestTool(assert);
+  let TTT = new TobagoTestTool(assert);
   TTT.action(function () {
-    form1InputFieldFn().val("Dave");
-    form2InputFieldFn().val("");
-    outerFormInputFieldFn().val("Eve");
+    form1InputFieldFn().value = "Dave";
+    form2InputFieldFn().value = "";
+    outerFormInputFieldFn().value = "Eve";
     buttonFn().click();
   });
   TTT.waitForResponse();
   TTT.asserts(7, function () {
-    assert.equal(form1InputFieldFn().val(), "Dave");
-    assert.equal(form1OutputFieldFn().text(), form1OutputFieldValue);
-    assert.equal(form2InputFieldFn().val(), "");
-    assert.equal(form2OutputFieldFn().text(), form2OutputFieldValue);
-    assert.equal(outerFormInputFieldFn().val(), "Eve");
-    assert.equal(outerFormOutputFieldFn().text(), outerFormOutputFieldValue);
+    assert.equal(form1InputFieldFn().value, "Dave");
+    assert.equal(form1OutputFieldFn().textContent, form1OutputFieldValue);
+    assert.equal(form2InputFieldFn().value, "");
+    assert.equal(form2OutputFieldFn().textContent, form2OutputFieldValue);
+    assert.equal(outerFormInputFieldFn().value, "Eve");
+    assert.equal(outerFormOutputFieldFn().textContent, outerFormOutputFieldValue);
     assert.equal(alertFn().length, "1");
   });
   TTT.startTest();
 });
 
 QUnit.test("submit outer form, violate required field in outer form", function (assert) {
-  var form1InputFieldFn = jQueryFrameFn("#page\\:mainForm\\:outerForm\\:form1\\:in1\\:\\:field");
-  var form1OutputFieldFn = jQueryFrameFn("#page\\:mainForm\\:outerForm\\:form1\\:out1 span");
-  var form2InputFieldFn = jQueryFrameFn("#page\\:mainForm\\:outerForm\\:form2\\:in2\\:\\:field");
-  var form2OutputFieldFn = jQueryFrameFn("#page\\:mainForm\\:outerForm\\:form2\\:out2 span");
-  var outerFormInputFieldFn = jQueryFrameFn("#page\\:mainForm\\:outerForm\\:in\\:\\:field");
-  var outerFormOutputFieldFn = jQueryFrameFn("#page\\:mainForm\\:outerForm\\:out span");
-  var buttonFn = jQueryFrameFn("#page\\:mainForm\\:outerForm\\:submit");
-  var alertFn = jQueryFrameFn("#page\\:messages .alert-danger label");
+  let form1InputFieldFn = testFrameQuerySelectorFn("#page\\:mainForm\\:outerForm\\:form1\\:in1\\:\\:field");
+  let form1OutputFieldFn = testFrameQuerySelectorFn("#page\\:mainForm\\:outerForm\\:form1\\:out1 span");
+  let form2InputFieldFn = testFrameQuerySelectorFn("#page\\:mainForm\\:outerForm\\:form2\\:in2\\:\\:field");
+  let form2OutputFieldFn = testFrameQuerySelectorFn("#page\\:mainForm\\:outerForm\\:form2\\:out2 span");
+  let outerFormInputFieldFn = testFrameQuerySelectorFn("#page\\:mainForm\\:outerForm\\:in\\:\\:field");
+  let outerFormOutputFieldFn = testFrameQuerySelectorFn("#page\\:mainForm\\:outerForm\\:out span");
+  let buttonFn = testFrameQuerySelectorFn("#page\\:mainForm\\:outerForm\\:submit");
+  let alertFn = testFrameQuerySelectorAllFn("#page\\:messages .alert-danger label");
 
-  var form1OutputFieldValue = form1OutputFieldFn().text();
-  var form2OutputFieldValue = form2OutputFieldFn().text();
-  var outerFormOutputFieldValue = outerFormOutputFieldFn().text();
+  let form1OutputFieldValue = form1OutputFieldFn().textContent;
+  let form2OutputFieldValue = form2OutputFieldFn().textContent;
+  let outerFormOutputFieldValue = outerFormOutputFieldFn().textContent;
 
-  var TTT = new TobagoTestTool(assert);
+  let TTT = new TobagoTestTool(assert);
   TTT.action(function () {
-    form1InputFieldFn().val("Frank");
-    form2InputFieldFn().val("Grace");
-    outerFormInputFieldFn().val("");
+    form1InputFieldFn().value = "Frank";
+    form2InputFieldFn().value = "Grace";
+    outerFormInputFieldFn().value = "";
     buttonFn().click();
   });
   TTT.waitForResponse();
   TTT.asserts(7, function () {
-    assert.equal(form1InputFieldFn().val(), "Frank");
-    assert.equal(form1OutputFieldFn().text(), form1OutputFieldValue);
-    assert.equal(form2InputFieldFn().val(), "Grace");
-    assert.equal(form2OutputFieldFn().text(), form2OutputFieldValue);
-    assert.equal(outerFormInputFieldFn().val(), "");
-    assert.equal(outerFormOutputFieldFn().text(), outerFormOutputFieldValue);
+    assert.equal(form1InputFieldFn().value, "Frank");
+    assert.equal(form1OutputFieldFn().textContent, form1OutputFieldValue);
+    assert.equal(form2InputFieldFn().value, "Grace");
+    assert.equal(form2OutputFieldFn().textContent, form2OutputFieldValue);
+    assert.equal(outerFormInputFieldFn().value, "");
+    assert.equal(outerFormOutputFieldFn().textContent, outerFormOutputFieldValue);
     assert.equal(alertFn().length, "1");
   });
   TTT.startTest();
 });
 
 QUnit.test("submit outer form without violations", function (assert) {
-  var form1InputFieldFn = jQueryFrameFn("#page\\:mainForm\\:outerForm\\:form1\\:in1\\:\\:field");
-  var form1OutputFieldFn = jQueryFrameFn("#page\\:mainForm\\:outerForm\\:form1\\:out1 span");
-  var form2InputFieldFn = jQueryFrameFn("#page\\:mainForm\\:outerForm\\:form2\\:in2\\:\\:field");
-  var form2OutputFieldFn = jQueryFrameFn("#page\\:mainForm\\:outerForm\\:form2\\:out2 span");
-  var outerFormInputFieldFn = jQueryFrameFn("#page\\:mainForm\\:outerForm\\:in\\:\\:field");
-  var outerFormOutputFieldFn = jQueryFrameFn("#page\\:mainForm\\:outerForm\\:out span");
-  var buttonFn = jQueryFrameFn("#page\\:mainForm\\:outerForm\\:submit");
-  var alertFn = jQueryFrameFn("#page\\:messages .alert-danger label");
+  let form1InputFieldFn = testFrameQuerySelectorFn("#page\\:mainForm\\:outerForm\\:form1\\:in1\\:\\:field");
+  let form1OutputFieldFn = testFrameQuerySelectorFn("#page\\:mainForm\\:outerForm\\:form1\\:out1 span");
+  let form2InputFieldFn = testFrameQuerySelectorFn("#page\\:mainForm\\:outerForm\\:form2\\:in2\\:\\:field");
+  let form2OutputFieldFn = testFrameQuerySelectorFn("#page\\:mainForm\\:outerForm\\:form2\\:out2 span");
+  let outerFormInputFieldFn = testFrameQuerySelectorFn("#page\\:mainForm\\:outerForm\\:in\\:\\:field");
+  let outerFormOutputFieldFn = testFrameQuerySelectorFn("#page\\:mainForm\\:outerForm\\:out span");
+  let buttonFn = testFrameQuerySelectorFn("#page\\:mainForm\\:outerForm\\:submit");
+  let alertFn = testFrameQuerySelectorAllFn("#page\\:messages .alert-danger label");
 
-  var TTT = new TobagoTestTool(assert);
+  let TTT = new TobagoTestTool(assert);
   TTT.action(function () {
-    form1InputFieldFn().val("Hank");
-    form2InputFieldFn().val("Irene");
-    outerFormInputFieldFn().val("John");
+    form1InputFieldFn().value = "Hank";
+    form2InputFieldFn().value = "Irene";
+    outerFormInputFieldFn().value = "John";
     buttonFn().click();
   });
   TTT.waitForResponse();
   TTT.asserts(7, function () {
-    assert.equal(form1InputFieldFn().val(), "Hank");
-    assert.equal(form1OutputFieldFn().text(), "Hank");
-    assert.equal(form2InputFieldFn().val(), "Irene");
-    assert.equal(form2OutputFieldFn().text(), "Irene");
-    assert.equal(outerFormInputFieldFn().val(), "John");
-    assert.equal(outerFormOutputFieldFn().text(), "John");
+    assert.equal(form1InputFieldFn().value, "Hank");
+    assert.equal(form1OutputFieldFn().textContent, "Hank");
+    assert.equal(form2InputFieldFn().value, "Irene");
+    assert.equal(form2OutputFieldFn().textContent, "Irene");
+    assert.equal(outerFormInputFieldFn().value, "John");
+    assert.equal(outerFormOutputFieldFn().textContent, "John");
     assert.equal(alertFn().length, "0");
   });
   TTT.startTest();
 });
 
 QUnit.test("submit inner forms, violate required field in form 2", function (assert) {
-  var form1InputFieldFn = jQueryFrameFn("#page\\:mainForm\\:outerForm\\:form1\\:in1\\:\\:field");
-  var form1OutputFieldFn = jQueryFrameFn("#page\\:mainForm\\:outerForm\\:form1\\:out1 span");
-  var form2InputFieldFn = jQueryFrameFn("#page\\:mainForm\\:outerForm\\:form2\\:in2\\:\\:field");
-  var form2OutputFieldFn = jQueryFrameFn("#page\\:mainForm\\:outerForm\\:form2\\:out2 span");
-  var outerFormInputFieldFn = jQueryFrameFn("#page\\:mainForm\\:outerForm\\:in\\:\\:field");
-  var outerFormOutputFieldFn = jQueryFrameFn("#page\\:mainForm\\:outerForm\\:out span");
-  var buttonFn = jQueryFrameFn("#page\\:mainForm\\:outerForm\\:submitInnerForms");
-  var alertFn = jQueryFrameFn("#page\\:messages .alert-danger label");
+  let form1InputFieldFn = testFrameQuerySelectorFn("#page\\:mainForm\\:outerForm\\:form1\\:in1\\:\\:field");
+  let form1OutputFieldFn = testFrameQuerySelectorFn("#page\\:mainForm\\:outerForm\\:form1\\:out1 span");
+  let form2InputFieldFn = testFrameQuerySelectorFn("#page\\:mainForm\\:outerForm\\:form2\\:in2\\:\\:field");
+  let form2OutputFieldFn = testFrameQuerySelectorFn("#page\\:mainForm\\:outerForm\\:form2\\:out2 span");
+  let outerFormInputFieldFn = testFrameQuerySelectorFn("#page\\:mainForm\\:outerForm\\:in\\:\\:field");
+  let outerFormOutputFieldFn = testFrameQuerySelectorFn("#page\\:mainForm\\:outerForm\\:out span");
+  let buttonFn = testFrameQuerySelectorFn("#page\\:mainForm\\:outerForm\\:submitInnerForms");
+  let alertFn = testFrameQuerySelectorAllFn("#page\\:messages .alert-danger label");
 
-  var form1OutputFieldValue = form1OutputFieldFn().text();
-  var form2OutputFieldValue = form2OutputFieldFn().text();
-  var outerFormOutputFieldValue = outerFormOutputFieldFn().text();
+  let form1OutputFieldValue = form1OutputFieldFn().textContent;
+  let form2OutputFieldValue = form2OutputFieldFn().textContent;
+  let outerFormOutputFieldValue = outerFormOutputFieldFn().textContent;
 
-  var TTT = new TobagoTestTool(assert);
+  let TTT = new TobagoTestTool(assert);
   TTT.action(function () {
-    form1InputFieldFn().val("Kate");
-    form2InputFieldFn().val("");
-    outerFormInputFieldFn().val("Leonard");
+    form1InputFieldFn().value = "Kate";
+    form2InputFieldFn().value = "";
+    outerFormInputFieldFn().value = "Leonard";
     buttonFn().click();
   });
   TTT.waitForResponse();
   TTT.asserts(7, function () {
-    assert.equal(form1InputFieldFn().val(), "Kate");
-    assert.equal(form1OutputFieldFn().text(), form1OutputFieldValue);
-    assert.equal(form2InputFieldFn().val(), "");
-    assert.equal(form2OutputFieldFn().text(), form2OutputFieldValue);
-    assert.equal(outerFormInputFieldFn().val(), "Leonard");
-    assert.equal(outerFormOutputFieldFn().text(), outerFormOutputFieldValue);
+    assert.equal(form1InputFieldFn().value, "Kate");
+    assert.equal(form1OutputFieldFn().textContent, form1OutputFieldValue);
+    assert.equal(form2InputFieldFn().value, "");
+    assert.equal(form2OutputFieldFn().textContent, form2OutputFieldValue);
+    assert.equal(outerFormInputFieldFn().value, "Leonard");
+    assert.equal(outerFormOutputFieldFn().textContent, outerFormOutputFieldValue);
     assert.equal(alertFn().length, "1");
   });
   TTT.startTest();
 });
 
 QUnit.test("submit inner forms without violations", function (assert) {
-  var form1InputFieldFn = jQueryFrameFn("#page\\:mainForm\\:outerForm\\:form1\\:in1\\:\\:field");
-  var form1OutputFieldFn = jQueryFrameFn("#page\\:mainForm\\:outerForm\\:form1\\:out1 span");
-  var form2InputFieldFn = jQueryFrameFn("#page\\:mainForm\\:outerForm\\:form2\\:in2\\:\\:field");
-  var form2OutputFieldFn = jQueryFrameFn("#page\\:mainForm\\:outerForm\\:form2\\:out2 span");
-  var outerFormInputFieldFn = jQueryFrameFn("#page\\:mainForm\\:outerForm\\:in\\:\\:field");
-  var outerFormOutputFieldFn = jQueryFrameFn("#page\\:mainForm\\:outerForm\\:out span");
-  var buttonFn = jQueryFrameFn("#page\\:mainForm\\:outerForm\\:submitInnerForms");
-  var alertFn = jQueryFrameFn("#page\\:messages .alert-danger label");
+  let form1InputFieldFn = testFrameQuerySelectorFn("#page\\:mainForm\\:outerForm\\:form1\\:in1\\:\\:field");
+  let form1OutputFieldFn = testFrameQuerySelectorFn("#page\\:mainForm\\:outerForm\\:form1\\:out1 span");
+  let form2InputFieldFn = testFrameQuerySelectorFn("#page\\:mainForm\\:outerForm\\:form2\\:in2\\:\\:field");
+  let form2OutputFieldFn = testFrameQuerySelectorFn("#page\\:mainForm\\:outerForm\\:form2\\:out2 span");
+  let outerFormInputFieldFn = testFrameQuerySelectorFn("#page\\:mainForm\\:outerForm\\:in\\:\\:field");
+  let outerFormOutputFieldFn = testFrameQuerySelectorFn("#page\\:mainForm\\:outerForm\\:out span");
+  let buttonFn = testFrameQuerySelectorFn("#page\\:mainForm\\:outerForm\\:submitInnerForms");
+  let alertFn = testFrameQuerySelectorAllFn("#page\\:messages .alert-danger label");
 
-  var outerFormOutputFieldValue = outerFormOutputFieldFn().text();
+  let outerFormOutputFieldValue = outerFormOutputFieldFn().textContent;
 
-  var TTT = new TobagoTestTool(assert);
+  let TTT = new TobagoTestTool(assert);
   TTT.action(function () {
-    form1InputFieldFn().val("Mike");
-    form2InputFieldFn().val("Neil");
-    outerFormInputFieldFn().val("");
+    form1InputFieldFn().value = "Mike";
+    form2InputFieldFn().value = "Neil";
+    outerFormInputFieldFn().value = "";
     buttonFn().click();
   });
   TTT.waitForResponse();
   TTT.asserts(7, function () {
-    assert.equal(form1InputFieldFn().val(), "Mike");
-    assert.equal(form1OutputFieldFn().text(), "Mike");
-    assert.equal(form2InputFieldFn().val(), "Neil");
-    assert.equal(form2OutputFieldFn().text(), "Neil");
-    assert.equal(outerFormInputFieldFn().val(), "");
-    assert.equal(outerFormOutputFieldFn().text(), outerFormOutputFieldValue);
+    assert.equal(form1InputFieldFn().value, "Mike");
+    assert.equal(form1OutputFieldFn().textContent, "Mike");
+    assert.equal(form2InputFieldFn().value, "Neil");
+    assert.equal(form2OutputFieldFn().textContent, "Neil");
+    assert.equal(outerFormInputFieldFn().value, "");
+    assert.equal(outerFormOutputFieldFn().textContent, outerFormOutputFieldValue);
     assert.equal(alertFn().length, "0");
   });
   TTT.startTest();
 });
 
 QUnit.test("submit outer value, violate required field", function (assert) {
-  var form1InputFieldFn = jQueryFrameFn("#page\\:mainForm\\:outerForm\\:form1\\:in1\\:\\:field");
-  var form1OutputFieldFn = jQueryFrameFn("#page\\:mainForm\\:outerForm\\:form1\\:out1 span");
-  var form2InputFieldFn = jQueryFrameFn("#page\\:mainForm\\:outerForm\\:form2\\:in2\\:\\:field");
-  var form2OutputFieldFn = jQueryFrameFn("#page\\:mainForm\\:outerForm\\:form2\\:out2 span");
-  var outerFormInputFieldFn = jQueryFrameFn("#page\\:mainForm\\:outerForm\\:in\\:\\:field");
-  var outerFormOutputFieldFn = jQueryFrameFn("#page\\:mainForm\\:outerForm\\:out span");
-  var buttonFn = jQueryFrameFn("#page\\:mainForm\\:outerForm\\:submitOuterValue");
-  var alertFn = jQueryFrameFn("#page\\:messages .alert-danger label");
+  let form1InputFieldFn = testFrameQuerySelectorFn("#page\\:mainForm\\:outerForm\\:form1\\:in1\\:\\:field");
+  let form1OutputFieldFn = testFrameQuerySelectorFn("#page\\:mainForm\\:outerForm\\:form1\\:out1 span");
+  let form2InputFieldFn = testFrameQuerySelectorFn("#page\\:mainForm\\:outerForm\\:form2\\:in2\\:\\:field");
+  let form2OutputFieldFn = testFrameQuerySelectorFn("#page\\:mainForm\\:outerForm\\:form2\\:out2 span");
+  let outerFormInputFieldFn = testFrameQuerySelectorFn("#page\\:mainForm\\:outerForm\\:in\\:\\:field");
+  let outerFormOutputFieldFn = testFrameQuerySelectorFn("#page\\:mainForm\\:outerForm\\:out span");
+  let buttonFn = testFrameQuerySelectorFn("#page\\:mainForm\\:outerForm\\:submitOuterValue");
+  let alertFn = testFrameQuerySelectorAllFn("#page\\:messages .alert-danger label");
 
-  var form1OutputFieldValue = form1OutputFieldFn().text();
-  var form2OutputFieldValue = form2OutputFieldFn().text();
-  var outerFormOutputFieldValue = outerFormOutputFieldFn().text();
+  let form1OutputFieldValue = form1OutputFieldFn().textContent;
+  let form2OutputFieldValue = form2OutputFieldFn().textContent;
+  let outerFormOutputFieldValue = outerFormOutputFieldFn().textContent;
 
-  var TTT = new TobagoTestTool(assert);
+  let TTT = new TobagoTestTool(assert);
   TTT.action(function () {
-    form1InputFieldFn().val("Oscar");
-    form2InputFieldFn().val("Penny");
-    outerFormInputFieldFn().val("");
+    form1InputFieldFn().value = "Oscar";
+    form2InputFieldFn().value = "Penny";
+    outerFormInputFieldFn().value = "";
     buttonFn().click();
   });
   TTT.waitForResponse();
   TTT.asserts(7, function () {
-    assert.equal(form1InputFieldFn().val(), "Oscar");
-    assert.equal(form1OutputFieldFn().text(), form1OutputFieldValue);
-    assert.equal(form2InputFieldFn().val(), "Penny");
-    assert.equal(form2OutputFieldFn().text(), form2OutputFieldValue);
-    assert.equal(outerFormInputFieldFn().val(), "");
-    assert.equal(outerFormOutputFieldFn().text(), outerFormOutputFieldValue);
+    assert.equal(form1InputFieldFn().value, "Oscar");
+    assert.equal(form1OutputFieldFn().textContent, form1OutputFieldValue);
+    assert.equal(form2InputFieldFn().value, "Penny");
+    assert.equal(form2OutputFieldFn().textContent, form2OutputFieldValue);
+    assert.equal(outerFormInputFieldFn().value, "");
+    assert.equal(outerFormOutputFieldFn().textContent, outerFormOutputFieldValue);
     assert.equal(alertFn().length, "1");
   });
   TTT.startTest();
 });
 
 QUnit.test("submit outer value without violations", function (assert) {
-  var form1InputFieldFn = jQueryFrameFn("#page\\:mainForm\\:outerForm\\:form1\\:in1\\:\\:field");
-  var form1OutputFieldFn = jQueryFrameFn("#page\\:mainForm\\:outerForm\\:form1\\:out1 span");
-  var form2InputFieldFn = jQueryFrameFn("#page\\:mainForm\\:outerForm\\:form2\\:in2\\:\\:field");
-  var form2OutputFieldFn = jQueryFrameFn("#page\\:mainForm\\:outerForm\\:form2\\:out2 span");
-  var outerFormInputFieldFn = jQueryFrameFn("#page\\:mainForm\\:outerForm\\:in\\:\\:field");
-  var outerFormOutputFieldFn = jQueryFrameFn("#page\\:mainForm\\:outerForm\\:out span");
-  var buttonFn = jQueryFrameFn("#page\\:mainForm\\:outerForm\\:submitOuterValue");
-  var alertFn = jQueryFrameFn("#page\\:messages .alert-danger label");
+  let form1InputFieldFn = testFrameQuerySelectorFn("#page\\:mainForm\\:outerForm\\:form1\\:in1\\:\\:field");
+  let form1OutputFieldFn = testFrameQuerySelectorFn("#page\\:mainForm\\:outerForm\\:form1\\:out1 span");
+  let form2InputFieldFn = testFrameQuerySelectorFn("#page\\:mainForm\\:outerForm\\:form2\\:in2\\:\\:field");
+  let form2OutputFieldFn = testFrameQuerySelectorFn("#page\\:mainForm\\:outerForm\\:form2\\:out2 span");
+  let outerFormInputFieldFn = testFrameQuerySelectorFn("#page\\:mainForm\\:outerForm\\:in\\:\\:field");
+  let outerFormOutputFieldFn = testFrameQuerySelectorFn("#page\\:mainForm\\:outerForm\\:out span");
+  let buttonFn = testFrameQuerySelectorFn("#page\\:mainForm\\:outerForm\\:submitOuterValue");
+  let alertFn = testFrameQuerySelectorAllFn("#page\\:messages .alert-danger label");
 
-  var form1OutputFieldValue = form1OutputFieldFn().text();
-  var form2OutputFieldValue = form2OutputFieldFn().text();
+  let form1OutputFieldValue = form1OutputFieldFn().textContent;
+  let form2OutputFieldValue = form2OutputFieldFn().textContent;
 
-  var TTT = new TobagoTestTool(assert);
+  let TTT = new TobagoTestTool(assert);
   TTT.action(function () {
-    form1InputFieldFn().val("Quin");
-    form2InputFieldFn().val("Sue");
-    outerFormInputFieldFn().val("Ted");
+    form1InputFieldFn().value = "Quin";
+    form2InputFieldFn().value = "Sue";
+    outerFormInputFieldFn().value = "Ted";
     buttonFn().click();
   });
   TTT.waitForResponse();
   TTT.asserts(7, function () {
-    assert.equal(form1InputFieldFn().val(), "Quin");
-    assert.equal(form1OutputFieldFn().text(), form1OutputFieldValue);
-    assert.equal(form2InputFieldFn().val(), "Sue");
-    assert.equal(form2OutputFieldFn().text(), form2OutputFieldValue);
-    assert.equal(outerFormInputFieldFn().val(), "Ted");
-    assert.equal(outerFormOutputFieldFn().text(), "Ted");
+    assert.equal(form1InputFieldFn().value, "Quin");
+    assert.equal(form1OutputFieldFn().textContent, form1OutputFieldValue);
+    assert.equal(form2InputFieldFn().value, "Sue");
+    assert.equal(form2OutputFieldFn().textContent, form2OutputFieldValue);
+    assert.equal(outerFormInputFieldFn().value, "Ted");
+    assert.equal(outerFormOutputFieldFn().textContent, "Ted");
     assert.equal(alertFn().length, "0");
   });
   TTT.startTest();
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/30-concept/08-form/Form.test.js b/tobago-example/tobago-example-demo/src/main/webapp/content/30-concept/08-form/Form.test.js
index 934c2c7..139c006 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/30-concept/08-form/Form.test.js
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/30-concept/08-form/Form.test.js
@@ -15,53 +15,53 @@
  * limitations under the License.
  */
 
-import {jQueryFrameFn} from "/script/tobago-test.js";
+import {testFrameQuerySelectorFn} from "/script/tobago-test.js";
 import {TobagoTestTool} from "/tobago/test/tobago-test-tool.js";
 
 QUnit.test("submit form 1", function (assert) {
-  var form1InputFieldFn = jQueryFrameFn("#page\\:mainForm\\:form1\\:in1\\:\\:field");
-  var form2InputFieldFn = jQueryFrameFn("#page\\:mainForm\\:form2\\:in2\\:\\:field");
-  var form1OutputFieldFn = jQueryFrameFn("#page\\:mainForm\\:form1\\:out1 span");
-  var form2OutputFieldFn = jQueryFrameFn("#page\\:mainForm\\:form2\\:out2 span");
-  var form1SubmitButtonFn = jQueryFrameFn("#page\\:mainForm\\:form1\\:submit1");
-  var $form2OutputFieldValue = form2OutputFieldFn().text();
+  let form1InputFieldFn = testFrameQuerySelectorFn("#page\\:mainForm\\:form1\\:in1\\:\\:field");
+  let form2InputFieldFn = testFrameQuerySelectorFn("#page\\:mainForm\\:form2\\:in2\\:\\:field");
+  let form1OutputFieldFn = testFrameQuerySelectorFn("#page\\:mainForm\\:form1\\:out1 span");
+  let form2OutputFieldFn = testFrameQuerySelectorFn("#page\\:mainForm\\:form2\\:out2 span");
+  let form1SubmitButtonFn = testFrameQuerySelectorFn("#page\\:mainForm\\:form1\\:submit1");
+  let $form2OutputFieldValue = form2OutputFieldFn().textContent;
 
-  var TTT = new TobagoTestTool(assert);
+  let TTT = new TobagoTestTool(assert);
   TTT.action(function () {
-    form1InputFieldFn().val("Oliver");
-    form2InputFieldFn().val("Peter");
+    form1InputFieldFn().value = "Oliver";
+    form2InputFieldFn().value = "Peter";
     form1SubmitButtonFn().click();
   });
   TTT.waitForResponse();
   TTT.asserts(4, function () {
-    assert.equal(form1InputFieldFn().val(), "Oliver");
-    assert.equal(form1OutputFieldFn().text(), "Oliver");
-    assert.equal(form2InputFieldFn().val(), "Peter");
-    assert.equal(form2OutputFieldFn().text(), $form2OutputFieldValue);
+    assert.equal(form1InputFieldFn().value, "Oliver");
+    assert.equal(form1OutputFieldFn().textContent, "Oliver");
+    assert.equal(form2InputFieldFn().value, "Peter");
+    assert.equal(form2OutputFieldFn().textContent, $form2OutputFieldValue);
   });
   TTT.startTest();
 });
 
 QUnit.test("submit form 2", function (assert) {
-  var form1InputFieldFn = jQueryFrameFn("#page\\:mainForm\\:form1\\:in1\\:\\:field");
-  var form2InputFieldFn = jQueryFrameFn("#page\\:mainForm\\:form2\\:in2\\:\\:field");
-  var form1OutputFieldFn = jQueryFrameFn("#page\\:mainForm\\:form1\\:out1 span");
-  var form2OutputFieldFn = jQueryFrameFn("#page\\:mainForm\\:form2\\:out2 span");
-  var form2SubmitButtonFn = jQueryFrameFn("#page\\:mainForm\\:form2\\:submit2");
-  var $form1OutputFieldValue = form1OutputFieldFn().text();
+  let form1InputFieldFn = testFrameQuerySelectorFn("#page\\:mainForm\\:form1\\:in1\\:\\:field");
+  let form2InputFieldFn = testFrameQuerySelectorFn("#page\\:mainForm\\:form2\\:in2\\:\\:field");
+  let form1OutputFieldFn = testFrameQuerySelectorFn("#page\\:mainForm\\:form1\\:out1 span");
+  let form2OutputFieldFn = testFrameQuerySelectorFn("#page\\:mainForm\\:form2\\:out2 span");
+  let form2SubmitButtonFn = testFrameQuerySelectorFn("#page\\:mainForm\\:form2\\:submit2");
+  let $form1OutputFieldValue = form1OutputFieldFn().textContent;
 
-  var TTT = new TobagoTestTool(assert);
+  let TTT = new TobagoTestTool(assert);
   TTT.action(function () {
-    form1InputFieldFn().val("Oliver");
-    form2InputFieldFn().val("Peter");
+    form1InputFieldFn().value = "Oliver";
+    form2InputFieldFn().value = "Peter";
     form2SubmitButtonFn().click();
   });
   TTT.waitForResponse();
   TTT.asserts(4, function () {
-    assert.equal(form1InputFieldFn().val(), "Oliver");
-    assert.equal(form1OutputFieldFn().text(), $form1OutputFieldValue);
-    assert.equal(form2InputFieldFn().val(), "Peter");
-    assert.equal(form2OutputFieldFn().text(), "Peter");
+    assert.equal(form1InputFieldFn().value, "Oliver");
+    assert.equal(form1OutputFieldFn().textContent, $form1OutputFieldValue);
+    assert.equal(form2InputFieldFn().value, "Peter");
+    assert.equal(form2OutputFieldFn().textContent, "Peter");
   });
   TTT.startTest();
 });
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/30-concept/51-for-each/For_Each.test.js b/tobago-example/tobago-example-demo/src/main/webapp/content/30-concept/51-for-each/For_Each.test.js
index 05ae6fd..1e2ead6 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/30-concept/51-for-each/For_Each.test.js
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/30-concept/51-for-each/For_Each.test.js
@@ -15,19 +15,19 @@
  * limitations under the License.
  */
 
-import {jQueryFrameFn} from "/script/tobago-test.js";
+import {testFrameQuerySelectorAllFn, testFrameQuerySelectorFn} from "/script/tobago-test.js";
 import {TobagoTestTool} from "/tobago/test/tobago-test-tool.js";
 
 QUnit.test("Add a river and reset.", function (assert) {
-  var nameFn = jQueryFrameFn("#page\\:mainForm\\:add\\:inName\\:\\:field");
-  var lengthFn = jQueryFrameFn("#page\\:mainForm\\:add\\:inLength\\:\\:field");
-  var dischargeFn = jQueryFrameFn("#page\\:mainForm\\:add\\:inDischarge\\:\\:field");
-  var addFn = jQueryFrameFn("#page\\:mainForm\\:add\\:buttonAdd");
-  var resetFn = jQueryFrameFn("#page\\:mainForm\\:reset\\:buttonReset");
-  var forEachBoxesFn = jQueryFrameFn("#page\\:mainForm\\:forEach .tobago-box");
-  var uiRepeatSectionsFn = jQueryFrameFn("#page\\:mainForm\\:uiRepeat .tobago-section");
+  let nameFn = testFrameQuerySelectorFn("#page\\:mainForm\\:add\\:inName\\:\\:field");
+  let lengthFn = testFrameQuerySelectorFn("#page\\:mainForm\\:add\\:inLength\\:\\:field");
+  let dischargeFn = testFrameQuerySelectorFn("#page\\:mainForm\\:add\\:inDischarge\\:\\:field");
+  let addFn = testFrameQuerySelectorFn("#page\\:mainForm\\:add\\:buttonAdd");
+  let resetFn = testFrameQuerySelectorFn("#page\\:mainForm\\:reset\\:buttonReset");
+  let forEachBoxesFn = testFrameQuerySelectorAllFn("#page\\:mainForm\\:forEach .tobago-box");
+  let uiRepeatSectionsFn = testFrameQuerySelectorAllFn("#page\\:mainForm\\:uiRepeat .tobago-section");
 
-  var TTT = new TobagoTestTool(assert);
+  let TTT = new TobagoTestTool(assert);
   TTT.action(function () {
     resetFn().click();
   });
@@ -37,9 +37,9 @@ QUnit.test("Add a river and reset.", function (assert) {
     assert.equal(uiRepeatSectionsFn().length, 3);
   });
   TTT.action(function () {
-    nameFn().val("Mississippi");
-    lengthFn().val("6275");
-    dischargeFn().val("16200");
+    nameFn().value = "Mississippi";
+    lengthFn().value = "6275";
+    dischargeFn().value = "16200";
     addFn().click();
   });
   TTT.waitForResponse();
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/30-concept/53-collapsible/00-collapsible-box/Collapsible_Box.test.js b/tobago-example/tobago-example-demo/src/main/webapp/content/30-concept/53-collapsible/00-collapsible-box/Collapsible_Box.test.js
index 1a6c433..3fa4388 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/30-concept/53-collapsible/00-collapsible-box/Collapsible_Box.test.js
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/30-concept/53-collapsible/00-collapsible-box/Collapsible_Box.test.js
@@ -15,69 +15,69 @@
  * limitations under the License.
  */
 
-import {jQueryFrameFn} from "/script/tobago-test.js";
+import {testFrameQuerySelectorAllFn, testFrameQuerySelectorFn} from "/script/tobago-test.js";
 import {TobagoTestTool} from "/tobago/test/tobago-test-tool.js";
 
 QUnit.test("Simple Collapsible Box: show -> hide transition", function (assert) {
-  var showFn = jQueryFrameFn("#page\\:mainForm\\:controller\\:show");
-  var hideFn = jQueryFrameFn("#page\\:mainForm\\:controller\\:hide");
-  var contentFn = jQueryFrameFn("#page\\:mainForm\\:controller\\:content");
+  let showFn = testFrameQuerySelectorFn("#page\\:mainForm\\:controller\\:show");
+  let hideFn = testFrameQuerySelectorFn("#page\\:mainForm\\:controller\\:hide");
+  let contentFn = testFrameQuerySelectorFn("#page\\:mainForm\\:controller\\:content");
 
-  var TTT = new TobagoTestTool(assert);
+  let TTT = new TobagoTestTool(assert);
   TTT.action(function () {
     showFn().click();
   });
   TTT.waitForResponse();
   TTT.asserts(1, function () {
-    assert.equal(contentFn().length, 1);
+    assert.ok(contentFn() !== null);
   });
   TTT.action(function () {
     hideFn().click();
   });
   TTT.waitForResponse();
   TTT.asserts(1, function () {
-    assert.equal(contentFn().length, 0);
+    assert.equal(contentFn(), null);
   });
   TTT.startTest();
 });
 
 QUnit.test("Simple Collapsible Box: hide -> show transition", function (assert) {
-  var showFn = jQueryFrameFn("#page\\:mainForm\\:controller\\:show");
-  var hideFn = jQueryFrameFn("#page\\:mainForm\\:controller\\:hide");
-  var contentFn = jQueryFrameFn("#page\\:mainForm\\:controller\\:content");
+  let showFn = testFrameQuerySelectorFn("#page\\:mainForm\\:controller\\:show");
+  let hideFn = testFrameQuerySelectorFn("#page\\:mainForm\\:controller\\:hide");
+  let contentFn = testFrameQuerySelectorFn("#page\\:mainForm\\:controller\\:content");
 
-  var TTT = new TobagoTestTool(assert);
+  let TTT = new TobagoTestTool(assert);
   TTT.action(function () {
     hideFn().click();
   });
   TTT.waitForResponse();
   TTT.asserts(1, function () {
-    assert.equal(contentFn().length, 0);
+    assert.equal(contentFn(), null);
   });
   TTT.action(function () {
     showFn().click();
   });
   TTT.waitForResponse();
   TTT.asserts(1, function () {
-    assert.equal(contentFn().length, 1);
+    assert.ok(contentFn() !== null);
   });
   TTT.startTest();
 });
 
 QUnit.test("Full Server Request: open both boxes", function (assert) {
-  var show1Fn = jQueryFrameFn("#page\\:mainForm\\:server\\:show1");
-  var show2Fn = jQueryFrameFn("#page\\:mainForm\\:server\\:show2");
-  var content1Fn = jQueryFrameFn("#page\\:mainForm\\:server\\:content1");
-  var content2Fn = jQueryFrameFn("#page\\:mainForm\\:server\\:content2");
-  var content2Length = content2Fn().length;
+  let show1Fn = testFrameQuerySelectorFn("#page\\:mainForm\\:server\\:show1");
+  let show2Fn = testFrameQuerySelectorFn("#page\\:mainForm\\:server\\:show2");
+  let content1Fn = testFrameQuerySelectorFn("#page\\:mainForm\\:server\\:content1");
+  let content2Fn = testFrameQuerySelectorFn("#page\\:mainForm\\:server\\:content2");
+  let content2Length = content2Fn().length;
 
-  var TTT = new TobagoTestTool(assert);
+  let TTT = new TobagoTestTool(assert);
   TTT.action(function () {
     show1Fn().click();
   });
   TTT.waitForResponse();
   TTT.asserts(2, function () {
-    assert.equal(content1Fn().length, 1);
+    assert.ok(content1Fn() !== null);
     assert.equal(content2Fn().length, content2Length);
   });
   TTT.action(function () {
@@ -85,26 +85,26 @@ QUnit.test("Full Server Request: open both boxes", function (assert) {
   });
   TTT.waitForResponse();
   TTT.asserts(2, function () {
-    assert.equal(content1Fn().length, 1);
-    assert.equal(content2Fn().length, 1);
+    assert.ok(content1Fn() !== null);
+    assert.ok(content2Fn() !== null);
   });
   TTT.startTest();
 });
 
 QUnit.test("Full Server Request: open box 1, close box 2", function (assert) {
-  var show1Fn = jQueryFrameFn("#page\\:mainForm\\:server\\:show1");
-  var hide2Fn = jQueryFrameFn("#page\\:mainForm\\:server\\:hide2");
-  var content1Fn = jQueryFrameFn("#page\\:mainForm\\:server\\:content1");
-  var content2Fn = jQueryFrameFn("#page\\:mainForm\\:server\\:content2");
-  var content2Length = content2Fn().length;
+  let show1Fn = testFrameQuerySelectorFn("#page\\:mainForm\\:server\\:show1");
+  let hide2Fn = testFrameQuerySelectorFn("#page\\:mainForm\\:server\\:hide2");
+  let content1Fn = testFrameQuerySelectorFn("#page\\:mainForm\\:server\\:content1");
+  let content2Fn = testFrameQuerySelectorFn("#page\\:mainForm\\:server\\:content2");
+  let content2Length = content2Fn().length;
 
-  var TTT = new TobagoTestTool(assert);
+  let TTT = new TobagoTestTool(assert);
   TTT.action(function () {
     show1Fn().click();
   });
   TTT.waitForResponse();
   TTT.asserts(2, function () {
-    assert.equal(content1Fn().length, 1);
+    assert.ok(content1Fn() !== null);
     assert.equal(content2Fn().length, content2Length);
   });
   TTT.action(function () {
@@ -112,125 +112,125 @@ QUnit.test("Full Server Request: open box 1, close box 2", function (assert) {
   });
   TTT.waitForResponse();
   TTT.asserts(2, function () {
-    assert.equal(content1Fn().length, 1);
-    assert.equal(content2Fn().length, 0);
+    assert.ok(content1Fn() !== null);
+    assert.equal(content2Fn(), null);
   });
   TTT.startTest();
 });
 
 QUnit.test("Full Server Request: close box 1, open box 2", function (assert) {
-  var hide1Fn = jQueryFrameFn("#page\\:mainForm\\:server\\:hide1");
-  var show2Fn = jQueryFrameFn("#page\\:mainForm\\:server\\:show2");
-  var content1Fn = jQueryFrameFn("#page\\:mainForm\\:server\\:content1");
-  var content2Fn = jQueryFrameFn("#page\\:mainForm\\:server\\:content2");
-  var content2Length = content2Fn().length;
+  let hide1Fn = testFrameQuerySelectorFn("#page\\:mainForm\\:server\\:hide1");
+  let show2Fn = testFrameQuerySelectorFn("#page\\:mainForm\\:server\\:show2");
+  let content1Fn = testFrameQuerySelectorFn("#page\\:mainForm\\:server\\:content1");
+  let content2Fn = testFrameQuerySelectorFn("#page\\:mainForm\\:server\\:content2");
+  let existContent2 = content2Fn() !== null;
 
-  var TTT = new TobagoTestTool(assert);
+  let TTT = new TobagoTestTool(assert);
   TTT.action(function () {
     hide1Fn().click();
   });
   TTT.waitForResponse();
   TTT.asserts(2, function () {
-    assert.equal(content1Fn().length, 0);
-    assert.equal(content2Fn().length, content2Length);
+    assert.equal(content1Fn(), null);
+    assert.equal(content2Fn() !== null, existContent2);
   });
   TTT.action(function () {
     show2Fn().click();
   });
   TTT.waitForResponse();
   TTT.asserts(2, function () {
-    assert.equal(content1Fn().length, 0);
-    assert.equal(content2Fn().length, 1);
+    assert.equal(content1Fn(), null);
+    assert.ok(content2Fn() !== null);
   });
   TTT.startTest();
 });
 
 QUnit.test("Full Server Request: close both boxes", function (assert) {
-  var hide1Fn = jQueryFrameFn("#page\\:mainForm\\:server\\:hide1");
-  var hide2Fn = jQueryFrameFn("#page\\:mainForm\\:server\\:hide2");
-  var content1Fn = jQueryFrameFn("#page\\:mainForm\\:server\\:content1");
-  var content2Fn = jQueryFrameFn("#page\\:mainForm\\:server\\:content2");
-  var content2Length = content2Fn().length;
+  let hide1Fn = testFrameQuerySelectorFn("#page\\:mainForm\\:server\\:hide1");
+  let hide2Fn = testFrameQuerySelectorFn("#page\\:mainForm\\:server\\:hide2");
+  let content1Fn = testFrameQuerySelectorFn("#page\\:mainForm\\:server\\:content1");
+  let content2Fn = testFrameQuerySelectorFn("#page\\:mainForm\\:server\\:content2");
+  let existContent2 = content2Fn() !== null;
 
-  var TTT = new TobagoTestTool(assert);
+  let TTT = new TobagoTestTool(assert);
   TTT.action(function () {
     hide1Fn().click();
   });
   TTT.waitForResponse();
   TTT.asserts(2, function () {
-    assert.equal(content1Fn().length, 0);
-    assert.equal(content2Fn().length, content2Length);
+    assert.equal(content1Fn(), null);
+    assert.equal(content2Fn() !== null, existContent2);
   });
   TTT.action(function () {
     hide2Fn().click();
   });
   TTT.waitForResponse();
   TTT.asserts(2, function () {
-    assert.equal(content1Fn().length, 0);
-    assert.equal(content2Fn().length, 0);
+    assert.equal(content1Fn(), null);
+    assert.equal(content2Fn(), null);
   });
   TTT.startTest();
 });
 
 QUnit.test("Client Side: show -> hide transition", function (assert) {
-  var showFn = jQueryFrameFn("#page\\:mainForm\\:client\\:showNoRequestBox");
-  var hideFn = jQueryFrameFn("#page\\:mainForm\\:client\\:hideNoRequestBox");
-  var boxFn = jQueryFrameFn("#page\\:mainForm\\:client\\:noRequestBox");
+  let showFn = testFrameQuerySelectorFn("#page\\:mainForm\\:client\\:showNoRequestBox");
+  let hideFn = testFrameQuerySelectorFn("#page\\:mainForm\\:client\\:hideNoRequestBox");
+  let boxFn = testFrameQuerySelectorFn("#page\\:mainForm\\:client\\:noRequestBox");
 
-  var TTT = new TobagoTestTool(assert);
+  let TTT = new TobagoTestTool(assert);
   TTT.action(function () {
     showFn().click();
   });
   TTT.asserts(1, function () {
-    assert.equal(boxFn().hasClass("tobago-collapsed"), false);
+    assert.equal(boxFn().classList.contains("tobago-collapsed"), false);
   });
   TTT.action(function () {
     hideFn().click();
   });
   TTT.asserts(1, function () {
-    assert.equal(boxFn().hasClass("tobago-collapsed"), true);
+    assert.equal(boxFn().classList.contains("tobago-collapsed"), true);
   });
   TTT.startTest();
 });
 
 QUnit.test("Client Side: hide -> show transition", function (assert) {
-  var showFn = jQueryFrameFn("#page\\:mainForm\\:client\\:showNoRequestBox");
-  var hideFn = jQueryFrameFn("#page\\:mainForm\\:client\\:hideNoRequestBox");
-  var boxFn = jQueryFrameFn("#page\\:mainForm\\:client\\:noRequestBox");
+  let showFn = testFrameQuerySelectorFn("#page\\:mainForm\\:client\\:showNoRequestBox");
+  let hideFn = testFrameQuerySelectorFn("#page\\:mainForm\\:client\\:hideNoRequestBox");
+  let boxFn = testFrameQuerySelectorFn("#page\\:mainForm\\:client\\:noRequestBox");
 
-  var TTT = new TobagoTestTool(assert);
+  let TTT = new TobagoTestTool(assert);
   TTT.action(function () {
     hideFn().click();
   });
   TTT.asserts(1, function () {
-    assert.equal(boxFn().hasClass("tobago-collapsed"), true);
+    assert.equal(boxFn().classList.contains("tobago-collapsed"), true);
   });
   TTT.action(function () {
     showFn().click();
   });
   TTT.asserts(1, function () {
-    assert.equal(boxFn().hasClass("tobago-collapsed"), false);
+    assert.equal(boxFn().classList.contains("tobago-collapsed"), false);
   });
   TTT.startTest();
 });
 
 QUnit.test("Client Side: hide content and submit empty string", function (assert) {
-  var messagesFn = jQueryFrameFn("#page\\:messages.tobago-messages div");
-  var showFn = jQueryFrameFn("#page\\:mainForm\\:client\\:showNoRequestBox");
-  var hideFn = jQueryFrameFn("#page\\:mainForm\\:client\\:hideNoRequestBox");
-  var boxFn = jQueryFrameFn("#page\\:mainForm\\:client\\:noRequestBox");
-  var inFn = jQueryFrameFn("#page\\:mainForm\\:client\\:inNoRequestBox\\:\\:field");
-  var submitFn = jQueryFrameFn("#page\\:mainForm\\:client\\:submitNoRequestBox");
+  let messagesFn = testFrameQuerySelectorAllFn("#page\\:messages.tobago-messages div");
+  let showFn = testFrameQuerySelectorFn("#page\\:mainForm\\:client\\:showNoRequestBox");
+  let hideFn = testFrameQuerySelectorFn("#page\\:mainForm\\:client\\:hideNoRequestBox");
+  let boxFn = testFrameQuerySelectorFn("#page\\:mainForm\\:client\\:noRequestBox");
+  let inFn = testFrameQuerySelectorFn("#page\\:mainForm\\:client\\:inNoRequestBox\\:\\:field");
+  let submitFn = testFrameQuerySelectorFn("#page\\:mainForm\\:client\\:submitNoRequestBox");
 
-  var TTT = new TobagoTestTool(assert);
+  let TTT = new TobagoTestTool(assert);
   TTT.action(function () {
     hideFn().click();
   });
   TTT.asserts(1, function () {
-    assert.equal(boxFn().hasClass("tobago-collapsed"), true);
+    assert.equal(boxFn().classList.contains("tobago-collapsed"), true);
   });
   TTT.action(function () {
-    inFn().val("");
+    inFn().value = "";
     submitFn().click();
   });
   TTT.waitForResponse();
@@ -241,73 +241,73 @@ QUnit.test("Client Side: hide content and submit empty string", function (assert
 });
 
 QUnit.test("Ajax: show -> hide transition", function (assert) {
-  var showFn = jQueryFrameFn("#page\\:mainForm\\:ajax\\:showAjaxBox");
-  var hideFn = jQueryFrameFn("#page\\:mainForm\\:ajax\\:hideAjaxBox");
-  var inFn = jQueryFrameFn("#page\\:mainForm\\:ajax\\:inAjaxBox\\:\\:field");
+  let showFn = testFrameQuerySelectorFn("#page\\:mainForm\\:ajax\\:showAjaxBox");
+  let hideFn = testFrameQuerySelectorFn("#page\\:mainForm\\:ajax\\:hideAjaxBox");
+  let inFn = testFrameQuerySelectorFn("#page\\:mainForm\\:ajax\\:inAjaxBox\\:\\:field");
 
-  var TTT = new TobagoTestTool(assert);
+  let TTT = new TobagoTestTool(assert);
   TTT.action(function () {
     showFn().click();
   });
   TTT.waitForResponse();
   TTT.asserts(1, function () {
-    assert.equal(inFn().length, 1);
+    assert.ok(inFn() !== null);
   });
   TTT.action(function () {
     hideFn().click();
   });
   TTT.waitForResponse();
   TTT.asserts(1, function () {
-    assert.equal(inFn().length, 0);
+    assert.equal(inFn(), null);
   });
   TTT.startTest();
 });
 
 QUnit.test("Ajax: hide -> show transition", function (assert) {
-  var showFn = jQueryFrameFn("#page\\:mainForm\\:ajax\\:showAjaxBox");
-  var hideFn = jQueryFrameFn("#page\\:mainForm\\:ajax\\:hideAjaxBox");
-  var inFn = jQueryFrameFn("#page\\:mainForm\\:ajax\\:inAjaxBox\\:\\:field");
+  let showFn = testFrameQuerySelectorFn("#page\\:mainForm\\:ajax\\:showAjaxBox");
+  let hideFn = testFrameQuerySelectorFn("#page\\:mainForm\\:ajax\\:hideAjaxBox");
+  let inFn = testFrameQuerySelectorFn("#page\\:mainForm\\:ajax\\:inAjaxBox\\:\\:field");
 
-  var TTT = new TobagoTestTool(assert);
+  let TTT = new TobagoTestTool(assert);
   TTT.action(function () {
     hideFn().click();
   });
   TTT.waitForResponse();
   TTT.asserts(1, function () {
-    assert.equal(inFn().length, 0);
+    assert.equal(inFn(), null);
   });
   TTT.action(function () {
     showFn().click();
   });
   TTT.waitForResponse();
   TTT.asserts(1, function () {
-    assert.equal(inFn().length, 1);
+    assert.ok(inFn() !== null);
   });
   TTT.startTest();
 });
 
 QUnit.test("Ajax: hide content and submit empty string", function (assert) {
-  var messagesFn = jQueryFrameFn("#page\\:messages .tobago-messages");
-  var showFn = jQueryFrameFn("#page\\:mainForm\\:ajax\\:showAjaxBox");
-  var hideFn = jQueryFrameFn("#page\\:mainForm\\:ajax\\:hideAjaxBox");
-  var inFn = jQueryFrameFn("#page\\:mainForm\\:ajax\\:inAjaxBox\\:\\:field");
-  var submitFn = jQueryFrameFn("#page\\:mainForm\\:ajax\\:submitAjaxBox");
+  let messagesFn = testFrameQuerySelectorAllFn("#page\\:messages.tobago-messages .alert");
+  let showFn = testFrameQuerySelectorFn("#page\\:mainForm\\:ajax\\:showAjaxBox");
+  let hideFn = testFrameQuerySelectorFn("#page\\:mainForm\\:ajax\\:hideAjaxBox");
+  let inFn = testFrameQuerySelectorFn("#page\\:mainForm\\:ajax\\:inAjaxBox\\:\\:field");
+  let submitFn = testFrameQuerySelectorFn("#page\\:mainForm\\:ajax\\:submitAjaxBox");
 
-  var TTT = new TobagoTestTool(assert);
+  let TTT = new TobagoTestTool(assert);
   TTT.action(function () {
     showFn().click();
   });
   TTT.waitForResponse();
   TTT.asserts(1, function () {
-    assert.equal(inFn().length, 1);
+    assert.ok(inFn() !== null);
   });
   TTT.action(function () {
-    inFn().val("");
+    inFn().value = "";
     hideFn().click();
   });
   TTT.waitForResponse();
   TTT.asserts(1, function () {
-    assert.equal(inFn().length, 0);
+    assert.equal(inFn(), null);
   });
   TTT.action(function () {
     submitFn().click();
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/30-concept/53-collapsible/10-collapsible-popup/Collapsible_Popup.test.js b/tobago-example/tobago-example-demo/src/main/webapp/content/30-concept/53-collapsible/10-collapsible-popup/Collapsible_Popup.test.js
index d471f6b..e5b3d3c 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/30-concept/53-collapsible/10-collapsible-popup/Collapsible_Popup.test.js
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/30-concept/53-collapsible/10-collapsible-popup/Collapsible_Popup.test.js
@@ -15,51 +15,51 @@
  * limitations under the License.
  */
 
-import {jQueryFrameFn} from "/script/tobago-test.js";
+import {testFrameQuerySelectorAllFn, testFrameQuerySelectorFn} from "/script/tobago-test.js";
 import {TobagoTestTool} from "/tobago/test/tobago-test-tool.js";
 
 QUnit.test("Simple Popup", function (assert) {
-  var messagesFn = jQueryFrameFn("#page\\:messages.tobago-messages div");
-  var openFn = jQueryFrameFn("#page\\:mainForm\\:simple\\:open1");
-  var submitOnPageFn = jQueryFrameFn("#page\\:mainForm\\:simple\\:submitOnPage1");
-  var inFn = jQueryFrameFn("#page\\:mainForm\\:simple\\:controllerPopup\\:in1\\:\\:field");
-  var submitOnPopupFn = jQueryFrameFn("#page\\:mainForm\\:simple\\:controllerPopup\\:submitOnPopup1");
-  var closeFn = jQueryFrameFn("#page\\:mainForm\\:simple\\:controllerPopup\\:close1");
+  let messagesFn = testFrameQuerySelectorAllFn("#page\\:messages.tobago-messages div");
+  let openFn = testFrameQuerySelectorFn("#page\\:mainForm\\:simple\\:open1");
+  let submitOnPageFn = testFrameQuerySelectorFn("#page\\:mainForm\\:simple\\:submitOnPage1");
+  let inFn = testFrameQuerySelectorFn("#page\\:mainForm\\:simple\\:controllerPopup\\:in1\\:\\:field");
+  let submitOnPopupFn = testFrameQuerySelectorFn("#page\\:mainForm\\:simple\\:controllerPopup\\:submitOnPopup1");
+  let closeFn = testFrameQuerySelectorFn("#page\\:mainForm\\:simple\\:controllerPopup\\:close1");
 
-  var TTT = new TobagoTestTool(assert);
+  let TTT = new TobagoTestTool(assert);
   TTT.action(function () {
     openFn().click();
   });
   TTT.waitForResponse();
   TTT.asserts(1, function () {
-    assert.equal(inFn().length, 1);
+    assert.ok(inFn() !== null);
   });
   TTT.action(function () {
-    inFn().val("some text");
+    inFn().value = "some text";
     submitOnPopupFn().click();
   });
   TTT.waitForResponse();
   TTT.asserts(3, function () {
     assert.equal(messagesFn().length, 0);
-    assert.equal(inFn().length, 1);
-    assert.equal(inFn().val(), "some text");
+    assert.ok(inFn() !== null);
+    assert.equal(inFn().value, "some text");
   });
   TTT.action(function () {
-    inFn().val("");
+    inFn().value = "";
     submitOnPopupFn().click();
   });
   TTT.waitForResponse();
   TTT.asserts(3, function () {
     assert.equal(messagesFn().length, 1);
-    assert.equal(inFn().length, 1);
-    assert.equal(inFn().val(), "");
+    assert.ok(inFn() !== null);
+    assert.equal(inFn().value, "");
   });
   TTT.action(function () {
     closeFn().click();
   });
   TTT.waitForResponse();
   TTT.asserts(1, function () {
-    assert.equal(inFn().length, 0);
+    assert.equal(inFn(), null);
   });
   TTT.action(function () {
     submitOnPageFn().click();
@@ -72,47 +72,47 @@ QUnit.test("Simple Popup", function (assert) {
 });
 
 QUnit.test("Full Server Request", function (assert) {
-  var messagesFn = jQueryFrameFn("#page\\:messages.tobago-messages div");
-  var openFn = jQueryFrameFn("#page\\:mainForm\\:server\\:open2");
-  var submitOnPageFn = jQueryFrameFn("#page\\:mainForm\\:server\\:submitOnPage2");
-  var inFn = jQueryFrameFn("#page\\:mainForm\\:server\\:fullServerRequestPopup\\:in2\\:\\:field");
-  var submitOnPopupFn = jQueryFrameFn("#page\\:mainForm\\:server\\:fullServerRequestPopup\\:submitOnPopup2");
-  var closeFn = jQueryFrameFn("#page\\:mainForm\\:server\\:fullServerRequestPopup\\:close2");
+  let messagesFn = testFrameQuerySelectorAllFn("#page\\:messages.tobago-messages div");
+  let openFn = testFrameQuerySelectorFn("#page\\:mainForm\\:server\\:open2");
+  let submitOnPageFn = testFrameQuerySelectorFn("#page\\:mainForm\\:server\\:submitOnPage2");
+  let inFn = testFrameQuerySelectorFn("#page\\:mainForm\\:server\\:fullServerRequestPopup\\:in2\\:\\:field");
+  let submitOnPopupFn = testFrameQuerySelectorFn("#page\\:mainForm\\:server\\:fullServerRequestPopup\\:submitOnPopup2");
+  let closeFn = testFrameQuerySelectorFn("#page\\:mainForm\\:server\\:fullServerRequestPopup\\:close2");
 
-  var TTT = new TobagoTestTool(assert);
+  let TTT = new TobagoTestTool(assert);
   TTT.action(function () {
     openFn().click();
   });
   TTT.waitForResponse();
   TTT.asserts(1, function () {
-    assert.equal(inFn().length, 1);
+    assert.ok(inFn() !== null);
   });
   TTT.action(function () {
-    inFn().val("some text");
+    inFn().value = "some text";
     submitOnPopupFn().click();
   });
   TTT.waitForResponse();
   TTT.asserts(3, function () {
     assert.equal(messagesFn().length, 0);
-    assert.equal(inFn().length, 1);
-    assert.equal(inFn().val(), "some text");
+    assert.ok(inFn() !== null);
+    assert.equal(inFn().value, "some text");
   });
   TTT.action(function () {
-    inFn().val("");
+    inFn().value = "";
     submitOnPopupFn().click();
   });
   TTT.waitForResponse();
   TTT.asserts(3, function () {
     assert.equal(messagesFn().length, 1);
-    assert.equal(inFn().length, 1);
-    assert.equal(inFn().val(), "");
+    assert.ok(inFn() !== null);
+    assert.equal(inFn().value, "");
   });
   TTT.action(function () {
     closeFn().click();
   });
   TTT.waitForResponse();
   TTT.asserts(1, function () {
-    assert.equal(inFn().length, 0);
+    assert.equal(inFn(), null);
   });
   TTT.action(function () {
     submitOnPageFn().click();
@@ -125,56 +125,56 @@ QUnit.test("Full Server Request", function (assert) {
 });
 
 QUnit.test("Client Side", function (assert) {
-  var messagesFn = jQueryFrameFn("#page\\:messages.tobago-messages div");
-  var openFn = jQueryFrameFn("#page\\:mainForm\\:client\\:open3");
-  var submitOnPageFn = jQueryFrameFn("#page\\:mainForm\\:client\\:submitOnPage3");
-  var popupCollapsedFn = jQueryFrameFn("#page\\:mainForm\\:client\\:clientPopup\\:\\:collapse");
-  var inFn = jQueryFrameFn("#page\\:mainForm\\:client\\:clientPopup\\:in3\\:\\:field");
-  var submitOnPopupFn = jQueryFrameFn("#page\\:mainForm\\:client\\:clientPopup\\:submitOnPopup3");
-  var closeFn = jQueryFrameFn("#page\\:mainForm\\:client\\:clientPopup\\:close3");
+  let messagesFn = testFrameQuerySelectorAllFn("#page\\:messages.tobago-messages div");
+  let openFn = testFrameQuerySelectorFn("#page\\:mainForm\\:client\\:open3");
+  let submitOnPageFn = testFrameQuerySelectorFn("#page\\:mainForm\\:client\\:submitOnPage3");
+  let popupCollapsedFn = testFrameQuerySelectorFn("#page\\:mainForm\\:client\\:clientPopup\\:\\:collapse");
+  let inFn = testFrameQuerySelectorFn("#page\\:mainForm\\:client\\:clientPopup\\:in3\\:\\:field");
+  let submitOnPopupFn = testFrameQuerySelectorFn("#page\\:mainForm\\:client\\:clientPopup\\:submitOnPopup3");
+  let closeFn = testFrameQuerySelectorFn("#page\\:mainForm\\:client\\:clientPopup\\:close3");
 
-  var TTT = new TobagoTestTool(assert);
+  let TTT = new TobagoTestTool(assert);
   TTT.action(function () {
     openFn().click();
   });
   TTT.asserts(1, function () {
-    assert.equal(popupCollapsedFn().val(), "false");
+    assert.equal(popupCollapsedFn().value, "false");
   });
   TTT.action(function () {
     closeFn().click();
   });
   TTT.asserts(1, function () {
-    assert.equal(popupCollapsedFn().val(), "true");
+    assert.equal(popupCollapsedFn().value, "true");
   });
   TTT.action(function () {
     openFn().click();
   });
   TTT.asserts(1, function () {
-    assert.equal(popupCollapsedFn().val(), "false");
+    assert.equal(popupCollapsedFn().value, "false");
   });
   TTT.action(function () {
-    inFn().val("some text");
+    inFn().value = "some text";
     submitOnPopupFn().click();
   });
   TTT.waitForResponse();
   TTT.asserts(2, function () {
     assert.equal(messagesFn().length, 0);
-    assert.equal(popupCollapsedFn().val(), "true");
+    assert.equal(popupCollapsedFn().value, "true");
   });
   TTT.action(function () {
     openFn().click();
   });
   TTT.asserts(1, function () {
-    assert.equal(popupCollapsedFn().val(), "false");
+    assert.equal(popupCollapsedFn().value, "false");
   });
   TTT.action(function () {
-    inFn().val("");
+    inFn().value = "";
     submitOnPopupFn().click();
   });
   TTT.waitForResponse();
   TTT.asserts(2, function () {
     assert.equal(messagesFn().length, 1);
-    assert.equal(popupCollapsedFn().val(), "true");
+    assert.equal(popupCollapsedFn().value, "true");
   });
   TTT.action(function () {
     submitOnPageFn().click();
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/30-concept/53-collapsible/20-collapsible-panel/Collapsible_Panel.test.js b/tobago-example/tobago-example-demo/src/main/webapp/content/30-concept/53-collapsible/20-collapsible-panel/Collapsible_Panel.test.js
index 7901ad9..cdd3275 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/30-concept/53-collapsible/20-collapsible-panel/Collapsible_Panel.test.js
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/30-concept/53-collapsible/20-collapsible-panel/Collapsible_Panel.test.js
@@ -15,45 +15,45 @@
  * limitations under the License.
  */
 
-import {jQueryFrameFn} from "/script/tobago-test.js";
+import {testFrameQuerySelectorAllFn, testFrameQuerySelectorFn} from "/script/tobago-test.js";
 import {TobagoTestTool} from "/tobago/test/tobago-test-tool.js";
 
 QUnit.test("Simple Panel", function (assert) {
-  var messagesFn = jQueryFrameFn("#page\\:messages.tobago-messages div");
-  var showFn = jQueryFrameFn("#\\page\\:mainForm\\:simple\\:showSimple");
-  var hideFn = jQueryFrameFn("#\\page\\:mainForm\\:simple\\:hideSimple");
-  var submitFn = jQueryFrameFn("#\\page\\:mainForm\\:simple\\:submitSimple");
-  var panelCollapsedFn = jQueryFrameFn("#page\\:mainForm\\:simple\\:simplePanel\\:\\:collapse");
-  var inFn = jQueryFrameFn("#page\\:mainForm\\:simple\\:inSimple\\:\\:field");
+  let messagesFn = testFrameQuerySelectorAllFn("#page\\:messages.tobago-messages div");
+  let showFn = testFrameQuerySelectorFn("#page\\:mainForm\\:simple\\:showSimple");
+  let hideFn = testFrameQuerySelectorFn("#page\\:mainForm\\:simple\\:hideSimple");
+  let submitFn = testFrameQuerySelectorFn("#page\\:mainForm\\:simple\\:submitSimple");
+  let panelCollapsedFn = testFrameQuerySelectorFn("#page\\:mainForm\\:simple\\:simplePanel\\:\\:collapse");
+  let inFn = testFrameQuerySelectorFn("#page\\:mainForm\\:simple\\:inSimple\\:\\:field");
 
-  var TTT = new TobagoTestTool(assert);
+  let TTT = new TobagoTestTool(assert);
   TTT.action(function () {
     showFn().click();
   });
   TTT.waitForResponse();
   TTT.asserts(2, function () {
-    assert.equal(panelCollapsedFn().val(), "false");
-    assert.equal(inFn().length, 1);
+    assert.equal(panelCollapsedFn().value, "false");
+    assert.ok(inFn() !== null);
   });
   TTT.action(function () {
-    inFn().val("some text");
+    inFn().value = "some text";
     submitFn().click();
   });
   TTT.waitForResponse();
   TTT.asserts(3, function () {
     assert.equal(messagesFn().length, 0);
-    assert.equal(panelCollapsedFn().val(), "false");
-    assert.equal(inFn().length, 1);
+    assert.equal(panelCollapsedFn().value, "false");
+    assert.ok(inFn() !== null);
   });
   TTT.action(function () {
-    inFn().val("");
+    inFn().value = "";
     submitFn().click();
   });
   TTT.waitForResponse();
   TTT.asserts(3, function () {
     assert.equal(messagesFn().length, 1);
-    assert.equal(panelCollapsedFn().val(), "false");
-    assert.equal(inFn().length, 1);
+    assert.equal(panelCollapsedFn().value, "false");
+    assert.ok(inFn() !== null);
   });
   TTT.action(function () {
     hideFn().click();
@@ -61,8 +61,8 @@ QUnit.test("Simple Panel", function (assert) {
   TTT.waitForResponse();
   TTT.asserts(3, function () {
     assert.equal(messagesFn().length, 0);
-    assert.equal(panelCollapsedFn().val(), "true");
-    assert.equal(inFn().length, 0);
+    assert.equal(panelCollapsedFn().value, "true");
+    assert.equal(inFn(), null);
   });
   TTT.action(function () {
     submitFn().click();
@@ -70,48 +70,48 @@ QUnit.test("Simple Panel", function (assert) {
   TTT.waitForResponse();
   TTT.asserts(3, function () {
     assert.equal(messagesFn().length, 0);
-    assert.equal(panelCollapsedFn().val(), "true");
-    assert.equal(inFn().length, 0);
+    assert.equal(panelCollapsedFn().value, "true");
+    assert.equal(inFn(), null);
   });
   TTT.startTest();
 });
 
 QUnit.test("Full Server Request", function (assert) {
-  var messagesFn = jQueryFrameFn("#page\\:messages.tobago-messages div");
-  var showFn = jQueryFrameFn("#\\page\\:mainForm\\:server\\:showServer");
-  var hideFn = jQueryFrameFn("#\\page\\:mainForm\\:server\\:hideServer");
-  var submitFn = jQueryFrameFn("#\\page\\:mainForm\\:server\\:submitServer");
-  var panelCollapsedFn = jQueryFrameFn("#page\\:mainForm\\:server\\:serverPanel\\:\\:collapse");
-  var inFn = jQueryFrameFn("#page\\:mainForm\\:server\\:inServer\\:\\:field");
+  let messagesFn = testFrameQuerySelectorAllFn("#page\\:messages.tobago-messages div");
+  let showFn = testFrameQuerySelectorFn("#page\\:mainForm\\:server\\:showServer");
+  let hideFn = testFrameQuerySelectorFn("#page\\:mainForm\\:server\\:hideServer");
+  let submitFn = testFrameQuerySelectorFn("#page\\:mainForm\\:server\\:submitServer");
+  let panelCollapsedFn = testFrameQuerySelectorFn("#page\\:mainForm\\:server\\:serverPanel\\:\\:collapse");
+  let inFn = testFrameQuerySelectorFn("#page\\:mainForm\\:server\\:inServer\\:\\:field");
 
-  var TTT = new TobagoTestTool(assert);
+  let TTT = new TobagoTestTool(assert);
   TTT.action(function () {
     showFn().click();
   });
   TTT.waitForResponse();
   TTT.asserts(2, function () {
-    assert.equal(panelCollapsedFn().val(), "false");
-    assert.equal(inFn().length, 1);
+    assert.equal(panelCollapsedFn().value, "false");
+    assert.ok(inFn() !== null);
   });
   TTT.action(function () {
-    inFn().val("some text");
+    inFn().value = "some text";
     submitFn().click();
   });
   TTT.waitForResponse();
   TTT.asserts(3, function () {
     assert.equal(messagesFn().length, 0);
-    assert.equal(panelCollapsedFn().val(), "false");
-    assert.equal(inFn().length, 1);
+    assert.equal(panelCollapsedFn().value, "false");
+    assert.ok(inFn() !== null);
   });
   TTT.action(function () {
-    inFn().val("");
+    inFn().value = "";
     submitFn().click();
   });
   TTT.waitForResponse();
   TTT.asserts(3, function () {
     assert.equal(messagesFn().length, 1);
-    assert.equal(panelCollapsedFn().val(), "false");
-    assert.equal(inFn().length, 1);
+    assert.equal(panelCollapsedFn().value, "false");
+    assert.ok(inFn() !== null);
   });
   TTT.action(function () {
     hideFn().click();
@@ -119,8 +119,8 @@ QUnit.test("Full Server Request", function (assert) {
   TTT.waitForResponse();
   TTT.asserts(3, function () {
     assert.equal(messagesFn().length, 0);
-    assert.equal(panelCollapsedFn().val(), "true");
-    assert.equal(inFn().length, 0);
+    assert.equal(panelCollapsedFn().value, "true");
+    assert.equal(inFn(), null);
   });
   TTT.action(function () {
     submitFn().click();
@@ -128,55 +128,55 @@ QUnit.test("Full Server Request", function (assert) {
   TTT.waitForResponse();
   TTT.asserts(3, function () {
     assert.equal(messagesFn().length, 0);
-    assert.equal(panelCollapsedFn().val(), "true");
-    assert.equal(inFn().length, 0);
+    assert.equal(panelCollapsedFn().value, "true");
+    assert.equal(inFn(), null);
   });
   TTT.startTest();
 });
 
 QUnit.test("Client Side", function (assert) {
-  var messagesFn = jQueryFrameFn("#page\\:messages.tobago-messages div");
-  var showFn = jQueryFrameFn("#\\page\\:mainForm\\:client\\:showClient");
-  var hideFn = jQueryFrameFn("#\\page\\:mainForm\\:client\\:hideClient");
-  var submitFn = jQueryFrameFn("#\\page\\:mainForm\\:client\\:submitClient");
-  var panelCollapsedFn = jQueryFrameFn("#page\\:mainForm\\:client\\:clientPanel\\:\\:collapse");
-  var inFn = jQueryFrameFn("#page\\:mainForm\\:client\\:inClient\\:\\:field");
+  let messagesFn = testFrameQuerySelectorAllFn("#page\\:messages.tobago-messages div");
+  let showFn = testFrameQuerySelectorFn("#page\\:mainForm\\:client\\:showClient");
+  let hideFn = testFrameQuerySelectorFn("#page\\:mainForm\\:client\\:hideClient");
+  let submitFn = testFrameQuerySelectorFn("#page\\:mainForm\\:client\\:submitClient");
+  let panelCollapsedFn = testFrameQuerySelectorFn("#page\\:mainForm\\:client\\:clientPanel\\:\\:collapse");
+  let inFn = testFrameQuerySelectorFn("#page\\:mainForm\\:client\\:inClient\\:\\:field");
 
-  var TTT = new TobagoTestTool(assert);
+  let TTT = new TobagoTestTool(assert);
   TTT.action(function () {
     showFn().click();
   });
   TTT.asserts(2, function () {
-    assert.equal(panelCollapsedFn().val(), "false");
-    assert.equal(inFn().length, 1);
+    assert.equal(panelCollapsedFn().value, "false");
+    assert.ok(inFn() !== null);
   });
   TTT.action(function () {
-    inFn().val("some text");
+    inFn().value = "some text";
     submitFn().click();
   });
   TTT.waitForResponse();
   TTT.asserts(3, function () {
     assert.equal(messagesFn().length, 0);
-    assert.equal(panelCollapsedFn().val(), "false");
-    assert.equal(inFn().length, 1);
+    assert.equal(panelCollapsedFn().value, "false");
+    assert.ok(inFn() !== null);
   });
   TTT.action(function () {
-    inFn().val("");
+    inFn().value = "";
     submitFn().click();
   });
   TTT.waitForResponse();
   TTT.asserts(3, function () {
     assert.equal(messagesFn().length, 1);
-    assert.equal(panelCollapsedFn().val(), "false");
-    assert.equal(inFn().length, 1);
+    assert.equal(panelCollapsedFn().value, "false");
+    assert.ok(inFn() !== null);
   });
   TTT.action(function () {
     hideFn().click();
   });
   TTT.asserts(3, function () {
     assert.equal(messagesFn().length, 1);
-    assert.equal(panelCollapsedFn().val(), "true");
-    assert.equal(inFn().length, 1);
+    assert.equal(panelCollapsedFn().value, "true");
+    assert.ok(inFn() !== null);
   });
   TTT.action(function () {
     submitFn().click();
@@ -184,56 +184,56 @@ QUnit.test("Client Side", function (assert) {
   TTT.waitForResponse();
   TTT.asserts(3, function () {
     assert.equal(messagesFn().length, 1);
-    assert.equal(panelCollapsedFn().val(), "false");
-    assert.equal(inFn().length, 1);
+    assert.equal(panelCollapsedFn().value, "false");
+    assert.ok(inFn() !== null);
   });
   TTT.startTest();
 });
 
 QUnit.test("Ajax", function (assert) {
-  var messagesFn = jQueryFrameFn("#page\\:messages.tobago-messages div");
-  var showFn = jQueryFrameFn("#\\page\\:mainForm\\:ajax\\:showAjax");
-  var hideFn = jQueryFrameFn("#\\page\\:mainForm\\:ajax\\:hideAjax");
-  var submitFn = jQueryFrameFn("#\\page\\:mainForm\\:ajax\\:submitAjax");
-  var panelCollapsedFn = jQueryFrameFn("#page\\:mainForm\\:ajax\\:ajaxPanel\\:\\:collapse");
-  var inFn = jQueryFrameFn("#page\\:mainForm\\:ajax\\:inAjax\\:\\:field");
+  let messagesFn = testFrameQuerySelectorAllFn("#page\\:messages.tobago-messages div");
+  let showFn = testFrameQuerySelectorFn("#page\\:mainForm\\:ajax\\:showAjax");
+  let hideFn = testFrameQuerySelectorFn("#page\\:mainForm\\:ajax\\:hideAjax");
+  let submitFn = testFrameQuerySelectorFn("#page\\:mainForm\\:ajax\\:submitAjax");
+  let panelCollapsedFn = testFrameQuerySelectorFn("#page\\:mainForm\\:ajax\\:ajaxPanel\\:\\:collapse");
+  let inFn = testFrameQuerySelectorFn("#page\\:mainForm\\:ajax\\:inAjax\\:\\:field");
 
-  var TTT = new TobagoTestTool(assert);
+  let TTT = new TobagoTestTool(assert);
   TTT.action(function () {
     showFn().click();
   });
   TTT.waitForResponse();
   TTT.asserts(2, function () {
-    assert.equal(panelCollapsedFn().val(), "false");
-    assert.equal(inFn().length, 1);
+    assert.equal(panelCollapsedFn().value, "false");
+    assert.ok(inFn() !== null);
   });
   TTT.action(function () {
-    inFn().val("some text");
+    inFn().value = "some text";
     submitFn().click();
   });
   TTT.waitForResponse();
   TTT.asserts(3, function () {
     assert.equal(messagesFn().length, 0);
-    assert.equal(panelCollapsedFn().val(), "false");
-    assert.equal(inFn().length, 1);
+    assert.equal(panelCollapsedFn().value, "false");
+    assert.ok(inFn() !== null);
   });
   TTT.action(function () {
-    inFn().val("");
+    inFn().value = "";
     submitFn().click();
   });
   TTT.waitForResponse();
   TTT.asserts(3, function () {
     assert.equal(messagesFn().length, 1);
-    assert.equal(panelCollapsedFn().val(), "false");
-    assert.equal(inFn().length, 1);
+    assert.equal(panelCollapsedFn().value, "false");
+    assert.ok(inFn() !== null);
   });
   TTT.action(function () {
     hideFn().click();
   });
   TTT.waitForResponse();
   TTT.asserts(2, function () {
-    assert.equal(panelCollapsedFn().val(), "true");
-    assert.equal(inFn().length, 0);
+    assert.equal(panelCollapsedFn().value, "true");
+    assert.equal(inFn(), null);
   });
   TTT.action(function () {
     submitFn().click();
@@ -241,8 +241,8 @@ QUnit.test("Ajax", function (assert) {
   TTT.waitForResponse();
   TTT.asserts(3, function () {
     assert.equal(messagesFn().length, 0);
-    assert.equal(panelCollapsedFn().val(), "true");
-    assert.equal(inFn().length, 0);
+    assert.equal(panelCollapsedFn().value, "true");
+    assert.equal(inFn(), null);
   });
   TTT.startTest();
 });
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/30-concept/53-collapsible/30-collapsible-section/Collapsible_Section.test.js b/tobago-example/tobago-example-demo/src/main/webapp/content/30-concept/53-collapsible/30-collapsible-section/Collapsible_Section.test.js
index a16012a..629f67f 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/30-concept/53-collapsible/30-collapsible-section/Collapsible_Section.test.js
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/30-concept/53-collapsible/30-collapsible-section/Collapsible_Section.test.js
@@ -15,45 +15,45 @@
  * limitations under the License.
  */
 
-import {jQueryFrameFn} from "/script/tobago-test.js";
+import {testFrameQuerySelectorAllFn, testFrameQuerySelectorFn} from "/script/tobago-test.js";
 import {TobagoTestTool} from "/tobago/test/tobago-test-tool.js";
 
 QUnit.test("Simple Panel", function (assert) {
-  var messagesFn = jQueryFrameFn("#page\\:messages.tobago-messages div");
-  var submitFn = jQueryFrameFn("#\\page\\:mainForm\\:simple\\:submitSimple");
-  var showFn = jQueryFrameFn("#\\page\\:mainForm\\:simple\\:showSimple");
-  var hideFn = jQueryFrameFn("#\\page\\:mainForm\\:simple\\:hideSimple");
-  var sectionCollapsedFn = jQueryFrameFn("#page\\:mainForm\\:simple\\:simpleSection\\:\\:collapse");
-  var inFn = jQueryFrameFn("#page\\:mainForm\\:simple\\:inSimple\\:\\:field");
+  let messagesFn = testFrameQuerySelectorAllFn("#page\\:messages.tobago-messages div");
+  let submitFn = testFrameQuerySelectorFn("#page\\:mainForm\\:simple\\:submitSimple");
+  let showFn = testFrameQuerySelectorFn("#page\\:mainForm\\:simple\\:showSimple");
+  let hideFn = testFrameQuerySelectorFn("#page\\:mainForm\\:simple\\:hideSimple");
+  let sectionCollapsedFn = testFrameQuerySelectorFn("#page\\:mainForm\\:simple\\:simpleSection\\:\\:collapse");
+  let inFn = testFrameQuerySelectorFn("#page\\:mainForm\\:simple\\:inSimple\\:\\:field");
 
-  var TTT = new TobagoTestTool(assert);
+  let TTT = new TobagoTestTool(assert);
   TTT.action(function () {
     showFn().click();
   });
   TTT.waitForResponse();
   TTT.asserts(2, function () {
-    assert.equal(sectionCollapsedFn().val(), "false");
-    assert.equal(inFn().length, 1);
+    assert.equal(sectionCollapsedFn().value, "false");
+    assert.ok(inFn() !== null);
   });
   TTT.action(function () {
-    inFn().val("some text");
+    inFn().value = "some text";
     submitFn().click();
   });
   TTT.waitForResponse();
   TTT.asserts(3, function () {
     assert.equal(messagesFn().length, 0);
-    assert.equal(sectionCollapsedFn().val(), "false");
-    assert.equal(inFn().length, 1);
+    assert.equal(sectionCollapsedFn().value, "false");
+    assert.ok(inFn() !== null);
   });
   TTT.action(function () {
-    inFn().val("");
+    inFn().value = "";
     submitFn().click();
   });
   TTT.waitForResponse();
   TTT.asserts(3, function () {
     assert.equal(messagesFn().length, 1);
-    assert.equal(sectionCollapsedFn().val(), "false");
-    assert.equal(inFn().length, 1);
+    assert.equal(sectionCollapsedFn().value, "false");
+    assert.ok(inFn() !== null);
   });
   TTT.action(function () {
     hideFn().click();
@@ -61,8 +61,8 @@ QUnit.test("Simple Panel", function (assert) {
   TTT.waitForResponse();
   TTT.asserts(3, function () {
     assert.equal(messagesFn().length, 0);
-    assert.equal(sectionCollapsedFn().val(), "true");
-    assert.equal(inFn().length, 0);
+    assert.equal(sectionCollapsedFn().value, "true");
+    assert.equal(inFn(), null);
   });
   TTT.action(function () {
     submitFn().click();
@@ -70,48 +70,48 @@ QUnit.test("Simple Panel", function (assert) {
   TTT.waitForResponse();
   TTT.asserts(3, function () {
     assert.equal(messagesFn().length, 0);
-    assert.equal(sectionCollapsedFn().val(), "true");
-    assert.equal(inFn().length, 0);
+    assert.equal(sectionCollapsedFn().value, "true");
+    assert.equal(inFn(), null);
   });
   TTT.startTest();
 });
 
 QUnit.test("Full Server Request", function (assert) {
-  var messagesFn = jQueryFrameFn("#page\\:messages.tobago-messages div");
-  var submitFn = jQueryFrameFn("#\\page\\:mainForm\\:server\\:submitServer");
-  var showFn = jQueryFrameFn("#\\page\\:mainForm\\:server\\:showServer");
-  var hideFn = jQueryFrameFn("#\\page\\:mainForm\\:server\\:hideServer");
-  var sectionCollapsedFn = jQueryFrameFn("#page\\:mainForm\\:server\\:fullRequestSection\\:\\:collapse");
-  var inFn = jQueryFrameFn("#page\\:mainForm\\:server\\:inServer\\:\\:field");
+  let messagesFn = testFrameQuerySelectorAllFn("#page\\:messages.tobago-messages div");
+  let submitFn = testFrameQuerySelectorFn("#page\\:mainForm\\:server\\:submitServer");
+  let showFn = testFrameQuerySelectorFn("#page\\:mainForm\\:server\\:showServer");
+  let hideFn = testFrameQuerySelectorFn("#page\\:mainForm\\:server\\:hideServer");
+  let sectionCollapsedFn = testFrameQuerySelectorFn("#page\\:mainForm\\:server\\:fullRequestSection\\:\\:collapse");
+  let inFn = testFrameQuerySelectorFn("#page\\:mainForm\\:server\\:inServer\\:\\:field");
 
-  var TTT = new TobagoTestTool(assert);
+  let TTT = new TobagoTestTool(assert);
   TTT.action(function () {
     showFn().click();
   });
   TTT.waitForResponse();
   TTT.asserts(2, function () {
-    assert.equal(sectionCollapsedFn().val(), "false");
-    assert.equal(inFn().length, 1);
+    assert.equal(sectionCollapsedFn().value, "false");
+    assert.ok(inFn() !== null);
   });
   TTT.action(function () {
-    inFn().val("some text");
+    inFn().value = "some text";
     submitFn().click();
   });
   TTT.waitForResponse();
   TTT.asserts(3, function () {
     assert.equal(messagesFn().length, 0);
-    assert.equal(sectionCollapsedFn().val(), "false");
-    assert.equal(inFn().length, 1);
+    assert.equal(sectionCollapsedFn().value, "false");
+    assert.ok(inFn() !== null);
   });
   TTT.action(function () {
-    inFn().val("");
+    inFn().value = "";
     submitFn().click();
   });
   TTT.waitForResponse();
   TTT.asserts(3, function () {
     assert.equal(messagesFn().length, 1);
-    assert.equal(sectionCollapsedFn().val(), "false");
-    assert.equal(inFn().length, 1);
+    assert.equal(sectionCollapsedFn().value, "false");
+    assert.ok(inFn() !== null);
   });
   TTT.action(function () {
     hideFn().click();
@@ -119,8 +119,8 @@ QUnit.test("Full Server Request", function (assert) {
   TTT.waitForResponse();
   TTT.asserts(3, function () {
     assert.equal(messagesFn().length, 0);
-    assert.equal(sectionCollapsedFn().val(), "true");
-    assert.equal(inFn().length, 0);
+    assert.equal(sectionCollapsedFn().value, "true");
+    assert.equal(inFn(), null);
   });
   TTT.action(function () {
     submitFn().click();
@@ -128,55 +128,55 @@ QUnit.test("Full Server Request", function (assert) {
   TTT.waitForResponse();
   TTT.asserts(3, function () {
     assert.equal(messagesFn().length, 0);
-    assert.equal(sectionCollapsedFn().val(), "true");
-    assert.equal(inFn().length, 0);
+    assert.equal(sectionCollapsedFn().value, "true");
+    assert.equal(inFn(), null);
   });
   TTT.startTest();
 });
 
 QUnit.test("Client Side", function (assert) {
-  var messagesFn = jQueryFrameFn("#page\\:messages.tobago-messages div");
-  var submitFn = jQueryFrameFn("#\\page\\:mainForm\\:client\\:submitClient");
-  var showFn = jQueryFrameFn("#\\page\\:mainForm\\:client\\:showClient");
-  var hideFn = jQueryFrameFn("#\\page\\:mainForm\\:client\\:hideClient");
-  var sectionCollapsedFn = jQueryFrameFn("#page\\:mainForm\\:client\\:clientSection\\:\\:collapse");
-  var inFn = jQueryFrameFn("#page\\:mainForm\\:client\\:inClient\\:\\:field");
+  let messagesFn = testFrameQuerySelectorAllFn("#page\\:messages.tobago-messages div");
+  let submitFn = testFrameQuerySelectorFn("#page\\:mainForm\\:client\\:submitClient");
+  let showFn = testFrameQuerySelectorFn("#page\\:mainForm\\:client\\:showClient");
+  let hideFn = testFrameQuerySelectorFn("#page\\:mainForm\\:client\\:hideClient");
+  let sectionCollapsedFn = testFrameQuerySelectorFn("#page\\:mainForm\\:client\\:clientSection\\:\\:collapse");
+  let inFn = testFrameQuerySelectorFn("#page\\:mainForm\\:client\\:inClient\\:\\:field");
 
-  var TTT = new TobagoTestTool(assert);
+  let TTT = new TobagoTestTool(assert);
   TTT.action(function () {
     showFn().click();
   });
   TTT.asserts(2, function () {
-    assert.equal(sectionCollapsedFn().val(), "false");
-    assert.equal(inFn().length, 1);
+    assert.equal(sectionCollapsedFn().value, "false");
+    assert.ok(inFn() !== null);
   });
   TTT.action(function () {
-    inFn().val("some text");
+    inFn().value = "some text";
     submitFn().click();
   });
   TTT.waitForResponse();
   TTT.asserts(3, function () {
     assert.equal(messagesFn().length, 0);
-    assert.equal(sectionCollapsedFn().val(), "false");
-    assert.equal(inFn().length, 1);
+    assert.equal(sectionCollapsedFn().value, "false");
+    assert.ok(inFn() !== null);
   });
   TTT.action(function () {
-    inFn().val("");
+    inFn().value = "";
     submitFn().click();
   });
   TTT.waitForResponse();
   TTT.asserts(3, function () {
     assert.equal(messagesFn().length, 1);
-    assert.equal(sectionCollapsedFn().val(), "false");
-    assert.equal(inFn().length, 1);
+    assert.equal(sectionCollapsedFn().value, "false");
+    assert.ok(inFn() !== null);
   });
   TTT.action(function () {
     hideFn().click();
   });
   TTT.asserts(3, function () {
     assert.equal(messagesFn().length, 1);
-    assert.equal(sectionCollapsedFn().val(), "true");
-    assert.equal(inFn().length, 1);
+    assert.equal(sectionCollapsedFn().value, "true");
+    assert.ok(inFn() !== null);
   });
   TTT.action(function () {
     submitFn().click();
@@ -184,56 +184,56 @@ QUnit.test("Client Side", function (assert) {
   TTT.waitForResponse();
   TTT.asserts(3, function () {
     assert.equal(messagesFn().length, 1);
-    assert.equal(sectionCollapsedFn().val(), "false");
-    assert.equal(inFn().length, 1);
+    assert.equal(sectionCollapsedFn().value, "false");
+    assert.ok(inFn() !== null);
   });
   TTT.startTest();
 });
 
 QUnit.test("Ajax", function (assert) {
-  var messagesFn = jQueryFrameFn("#page\\:messages.tobago-messages div");
-  var submitFn = jQueryFrameFn("#\\page\\:mainForm\\:ajax\\:submitAjax");
-  var showFn = jQueryFrameFn("#\\page\\:mainForm\\:ajax\\:showAjax");
-  var hideFn = jQueryFrameFn("#\\page\\:mainForm\\:ajax\\:hideAjax");
-  var sectionCollapsedFn = jQueryFrameFn("#page\\:mainForm\\:ajax\\:ajaxSection\\:\\:collapse");
-  var inFn = jQueryFrameFn("#page\\:mainForm\\:ajax\\:inAjax\\:\\:field");
+  let messagesFn = testFrameQuerySelectorAllFn("#page\\:messages.tobago-messages div");
+  let submitFn = testFrameQuerySelectorFn("#page\\:mainForm\\:ajax\\:submitAjax");
+  let showFn = testFrameQuerySelectorFn("#page\\:mainForm\\:ajax\\:showAjax");
+  let hideFn = testFrameQuerySelectorFn("#page\\:mainForm\\:ajax\\:hideAjax");
+  let sectionCollapsedFn = testFrameQuerySelectorFn("#page\\:mainForm\\:ajax\\:ajaxSection\\:\\:collapse");
+  let inFn = testFrameQuerySelectorFn("#page\\:mainForm\\:ajax\\:inAjax\\:\\:field");
 
-  var TTT = new TobagoTestTool(assert);
+  let TTT = new TobagoTestTool(assert);
   TTT.action(function () {
     showFn().click();
   });
   TTT.waitForResponse();
   TTT.asserts(2, function () {
-    assert.equal(sectionCollapsedFn().val(), "false");
-    assert.equal(inFn().length, 1);
+    assert.equal(sectionCollapsedFn().value, "false");
+    assert.ok(inFn() !== null);
   });
   TTT.action(function () {
-    inFn().val("some text");
+    inFn().value = "some text";
     submitFn().click();
   });
   TTT.waitForResponse();
   TTT.asserts(3, function () {
     assert.equal(messagesFn().length, 0);
-    assert.equal(sectionCollapsedFn().val(), "false");
-    assert.equal(inFn().length, 1);
+    assert.equal(sectionCollapsedFn().value, "false");
+    assert.ok(inFn() !== null);
   });
   TTT.action(function () {
-    inFn().val("");
+    inFn().value = "";
     submitFn().click();
   });
   TTT.waitForResponse();
   TTT.asserts(3, function () {
     assert.equal(messagesFn().length, 1);
-    assert.equal(sectionCollapsedFn().val(), "false");
-    assert.equal(inFn().length, 1);
+    assert.equal(sectionCollapsedFn().value, "false");
+    assert.ok(inFn() !== null);
   });
   TTT.action(function () {
     hideFn().click();
   });
   TTT.waitForResponse();
   TTT.asserts(2, function () {
-    assert.equal(sectionCollapsedFn().val(), "true");
-    assert.equal(inFn().length, 0);
+    assert.equal(sectionCollapsedFn().value, "true");
+    assert.equal(inFn(), null);
   });
   TTT.action(function () {
     submitFn().click();
@@ -241,8 +241,8 @@ QUnit.test("Ajax", function (assert) {
   TTT.waitForResponse();
   TTT.asserts(3, function () {
     assert.equal(messagesFn().length, 0);
-    assert.equal(sectionCollapsedFn().val(), "true");
-    assert.equal(inFn().length, 0);
+    assert.equal(sectionCollapsedFn().value, "true");
+    assert.equal(inFn(), null);
   });
   TTT.startTest();
 });
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/1040-date/Date.test.js b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/1040-date/Date.test.js
index 91cd006..209081a 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/1040-date/Date.test.js
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/1040-date/Date.test.js
@@ -15,21 +15,21 @@
  * limitations under the License.
  */
 
-import {jQueryFrame} from "/script/tobago-test.js";
+import {testFrameQuerySelectorAllFn, testFrameQuerySelectorFn} from "/script/tobago-test.js";
 
 QUnit.test("inputfield with label", function (assert) {
-  var $dateField = jQueryFrame("#page\\:mainForm\\:dateNoPattern\\:\\:field");
-  var $dateButton = jQueryFrame("#page\\:mainForm\\:dateNoPattern button");
+  let dateFieldFn = testFrameQuerySelectorFn("#page\\:mainForm\\:dateNoPattern\\:\\:field");
+  let dateButtonFn = testFrameQuerySelectorFn("#page\\:mainForm\\:dateNoPattern button");
 
-  assert.equal($dateField.val(), "");
+  assert.equal(dateFieldFn().value, "");
 
-  var $datepicker = jQueryFrame(".bootstrap-datetimepicker-widget");
-  assert.notOk($datepicker.get(0));
+  let datepickerFn = testFrameQuerySelectorAllFn(".bootstrap-datetimepicker-widget");
+  assert.notOk(datepickerFn().item(0));
 
-  $dateButton.click();
+  dateButtonFn().click();
 
-  $datepicker = jQueryFrame(".bootstrap-datetimepicker-widget");
-  assert.ok($datepicker.get(0));
+  datepickerFn = testFrameQuerySelectorAllFn(".bootstrap-datetimepicker-widget");
+  assert.ok(datepickerFn().item(0));
 
-  assert.notEqual($dateField.val(), "");
+  assert.notEqual(dateFieldFn().value, "");
 });
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/1041-date-tobagoConverter/Date_TobagoConverter.test.js b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/1041-date-tobagoConverter/Date_TobagoConverter.test.js
index bac4269..856aac8 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/1041-date-tobagoConverter/Date_TobagoConverter.test.js
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/1041-date-tobagoConverter/Date_TobagoConverter.test.js
@@ -15,13 +15,13 @@
  * limitations under the License.
  */
 
-import {jQueryFrameFn} from "/script/tobago-test.js";
+import {testFrameQuerySelectorFn} from "/script/tobago-test.js";
 import {TobagoTestTool} from "/tobago/test/tobago-test-tool.js";
 
 QUnit.test("Date - f:convertDateTime", function (assert) {
-  var inputFn = jQueryFrameFn("#page\\:mainForm\\:myfacesDateInput\\:\\:field");
-  var datepickerButtonFn = jQueryFrameFn("#page\\:mainForm\\:myfacesDateInput .datepickerbutton");
-  var outputFn = jQueryFrameFn("#page\\:mainForm\\:myfacesDateOutput .tobago-out");
+  let inputFn = testFrameQuerySelectorFn("#page\\:mainForm\\:myfacesDateInput\\:\\:field");
+  let datepickerButtonFn = testFrameQuerySelectorFn("#page\\:mainForm\\:myfacesDateInput .datepickerbutton");
+  let outputFn = testFrameQuerySelectorFn("#page\\:mainForm\\:myfacesDateOutput .tobago-out");
 
   testConvertDateTime(assert,
       inputFn, datepickerButtonFn, outputFn,
@@ -30,9 +30,9 @@ QUnit.test("Date - f:convertDateTime", function (assert) {
 });
 
 QUnit.test("Date - tc:convertDateTime", function (assert) {
-  var inputFn = jQueryFrameFn("#page\\:mainForm\\:tobagoDateInput\\:\\:field");
-  var datepickerButtonFn = jQueryFrameFn("#page\\:mainForm\\:tobagoDateInput .datepickerbutton");
-  var outputFn = jQueryFrameFn("#page\\:mainForm\\:tobagoDateOutput .tobago-out");
+  let inputFn = testFrameQuerySelectorFn("#page\\:mainForm\\:tobagoDateInput\\:\\:field");
+  let datepickerButtonFn = testFrameQuerySelectorFn("#page\\:mainForm\\:tobagoDateInput .datepickerbutton");
+  let outputFn = testFrameQuerySelectorFn("#page\\:mainForm\\:tobagoDateOutput .tobago-out");
 
   testConvertDateTime(assert,
       inputFn, datepickerButtonFn, outputFn,
@@ -41,9 +41,9 @@ QUnit.test("Date - tc:convertDateTime", function (assert) {
 });
 
 QUnit.test("Calendar - tc:convertDateTime", function (assert) {
-  var inputFn = jQueryFrameFn("#page\\:mainForm\\:tobagoDateInput\\:\\:field");
-  var datepickerButtonFn = jQueryFrameFn("#page\\:mainForm\\:tobagoDateInput .datepickerbutton");
-  var outputFn = jQueryFrameFn("#page\\:mainForm\\:tobagoDateOutput .tobago-out");
+  let inputFn = testFrameQuerySelectorFn("#page\\:mainForm\\:tobagoDateInput\\:\\:field");
+  let datepickerButtonFn = testFrameQuerySelectorFn("#page\\:mainForm\\:tobagoDateInput .datepickerbutton");
+  let outputFn = testFrameQuerySelectorFn("#page\\:mainForm\\:tobagoDateOutput .tobago-out");
 
   testConvertDateTime(assert,
       inputFn, datepickerButtonFn, outputFn,
@@ -52,11 +52,11 @@ QUnit.test("Calendar - tc:convertDateTime", function (assert) {
 });
 
 QUnit.test("LocalDate - f:convertDateTime", function (assert) {
-  var inputFn = jQueryFrameFn("#page\\:mainForm\\:myfacesLocalDateInput\\:\\:field");
-  var datepickerButtonFn = jQueryFrameFn("#page\\:mainForm\\:myfacesLocalDateInput .datepickerbutton");
-  var outputFn = jQueryFrameFn("#page\\:mainForm\\:myfacesLocalDateOutput .tobago-out");
+  let inputFn = testFrameQuerySelectorFn("#page\\:mainForm\\:myfacesLocalDateInput\\:\\:field");
+  let datepickerButtonFn = testFrameQuerySelectorFn("#page\\:mainForm\\:myfacesLocalDateInput .datepickerbutton");
+  let outputFn = testFrameQuerySelectorFn("#page\\:mainForm\\:myfacesLocalDateOutput .tobago-out");
 
-  if (inputFn().length > 0) {
+  if (inputFn() !== null) {
     testConvertDateTime(assert,
         inputFn, datepickerButtonFn, outputFn,
         "dd.MM.yyyy", true, false,
@@ -67,9 +67,9 @@ QUnit.test("LocalDate - f:convertDateTime", function (assert) {
 });
 
 QUnit.test("LocalDate - tc:convertDateTime", function (assert) {
-  var inputFn = jQueryFrameFn("#page\\:mainForm\\:tobagoLocalDateInput\\:\\:field");
-  var datepickerButtonFn = jQueryFrameFn("#page\\:mainForm\\:tobagoLocalDateInput .datepickerbutton");
-  var outputFn = jQueryFrameFn("#page\\:mainForm\\:tobagoLocalDateOutput .tobago-out");
+  let inputFn = testFrameQuerySelectorFn("#page\\:mainForm\\:tobagoLocalDateInput\\:\\:field");
+  let datepickerButtonFn = testFrameQuerySelectorFn("#page\\:mainForm\\:tobagoLocalDateInput .datepickerbutton");
+  let outputFn = testFrameQuerySelectorFn("#page\\:mainForm\\:tobagoLocalDateOutput .tobago-out");
 
   testConvertDateTime(assert,
       inputFn, datepickerButtonFn, outputFn,
@@ -78,11 +78,11 @@ QUnit.test("LocalDate - tc:convertDateTime", function (assert) {
 });
 
 QUnit.test("LocalTime - f:convertDateTime", function (assert) {
-  var inputFn = jQueryFrameFn("#page\\:mainForm\\:myfacesLocalTimeInput\\:\\:field");
-  var datepickerButtonFn = jQueryFrameFn("#page\\:mainForm\\:myfacesLocalTimeInput .datepickerbutton");
-  var outputFn = jQueryFrameFn("#page\\:mainForm\\:myfacesLocalTimeOutput .tobago-out");
+  let inputFn = testFrameQuerySelectorFn("#page\\:mainForm\\:myfacesLocalTimeInput\\:\\:field");
+  let datepickerButtonFn = testFrameQuerySelectorFn("#page\\:mainForm\\:myfacesLocalTimeInput .datepickerbutton");
+  let outputFn = testFrameQuerySelectorFn("#page\\:mainForm\\:myfacesLocalTimeOutput .tobago-out");
 
-  if (inputFn().length > 0) {
+  if (inputFn() !== null) {
     testConvertDateTime(assert,
         inputFn, datepickerButtonFn, outputFn,
         "HH:mm:ss", false, true,
@@ -93,9 +93,9 @@ QUnit.test("LocalTime - f:convertDateTime", function (assert) {
 });
 
 QUnit.test("LocalTime - tc:convertDateTime", function (assert) {
-  var inputFn = jQueryFrameFn("#page\\:mainForm\\:tobagoLocalTimeInput\\:\\:field");
-  var datepickerButtonFn = jQueryFrameFn("#page\\:mainForm\\:tobagoLocalTimeInput .datepickerbutton");
-  var outputFn = jQueryFrameFn("#page\\:mainForm\\:tobagoLocalTimeOutput .tobago-out");
+  let inputFn = testFrameQuerySelectorFn("#page\\:mainForm\\:tobagoLocalTimeInput\\:\\:field");
+  let datepickerButtonFn = testFrameQuerySelectorFn("#page\\:mainForm\\:tobagoLocalTimeInput .datepickerbutton");
+  let outputFn = testFrameQuerySelectorFn("#page\\:mainForm\\:tobagoLocalTimeOutput .tobago-out");
 
   testConvertDateTime(assert,
       inputFn, datepickerButtonFn, outputFn,
@@ -104,11 +104,11 @@ QUnit.test("LocalTime - tc:convertDateTime", function (assert) {
 });
 
 QUnit.test("LocalDateTime - f:convertDateTime", function (assert) {
-  var inputFn = jQueryFrameFn("#page\\:mainForm\\:myfacesLocalDateTimeInput\\:\\:field");
-  var datepickerButtonFn = jQueryFrameFn("#page\\:mainForm\\:myfacesLocalDateTimeInput .datepickerbutton");
-  var outputFn = jQueryFrameFn("#page\\:mainForm\\:myfacesLocalDateTimeOutput .tobago-out");
+  let inputFn = testFrameQuerySelectorFn("#page\\:mainForm\\:myfacesLocalDateTimeInput\\:\\:field");
+  let datepickerButtonFn = testFrameQuerySelectorFn("#page\\:mainForm\\:myfacesLocalDateTimeInput .datepickerbutton");
+  let outputFn = testFrameQuerySelectorFn("#page\\:mainForm\\:myfacesLocalDateTimeOutput .tobago-out");
 
-  if (inputFn().length > 0) {
+  if (inputFn() !== null) {
     testConvertDateTime(assert,
         inputFn, datepickerButtonFn, outputFn,
         "dd.MM.yyyy HH:mm:ss", true, true,
@@ -119,9 +119,9 @@ QUnit.test("LocalDateTime - f:convertDateTime", function (assert) {
 });
 
 QUnit.test("LocalDateTime - tc:convertDateTime", function (assert) {
-  var inputFn = jQueryFrameFn("#page\\:mainForm\\:tobagoLocalDateTimeInput\\:\\:field");
-  var datepickerButtonFn = jQueryFrameFn("#page\\:mainForm\\:tobagoLocalDateTimeInput .datepickerbutton");
-  var outputFn = jQueryFrameFn("#page\\:mainForm\\:tobagoLocalDateTimeOutput .tobago-out");
+  let inputFn = testFrameQuerySelectorFn("#page\\:mainForm\\:tobagoLocalDateTimeInput\\:\\:field");
+  let datepickerButtonFn = testFrameQuerySelectorFn("#page\\:mainForm\\:tobagoLocalDateTimeInput .datepickerbutton");
+  let outputFn = testFrameQuerySelectorFn("#page\\:mainForm\\:tobagoLocalDateTimeOutput .tobago-out");
 
   testConvertDateTime(assert,
       inputFn, datepickerButtonFn, outputFn,
@@ -130,11 +130,11 @@ QUnit.test("LocalDateTime - tc:convertDateTime", function (assert) {
 });
 
 QUnit.test("OffsetTime - f:convertDateTime", function (assert) {
-  var inputFn = jQueryFrameFn("#page\\:mainForm\\:myfacesOffsetTimeInput\\:\\:field");
-  var datepickerButtonFn = jQueryFrameFn("#page\\:mainForm\\:myfacesOffsetTimeInput .datepickerbutton");
-  var outputFn = jQueryFrameFn("#page\\:mainForm\\:myfacesOffsetTimeOutput .tobago-out");
+  let inputFn = testFrameQuerySelectorFn("#page\\:mainForm\\:myfacesOffsetTimeInput\\:\\:field");
+  let datepickerButtonFn = testFrameQuerySelectorFn("#page\\:mainForm\\:myfacesOffsetTimeInput .datepickerbutton");
+  let outputFn = testFrameQuerySelectorFn("#page\\:mainForm\\:myfacesOffsetTimeOutput .tobago-out");
 
-  if (inputFn().length > 0) {
+  if (inputFn() !== null) {
     testConvertDateTime(assert,
         inputFn, datepickerButtonFn, outputFn,
         "HH:mm:ss Z", false, true,
@@ -145,9 +145,9 @@ QUnit.test("OffsetTime - f:convertDateTime", function (assert) {
 });
 
 QUnit.test("OffsetTime - tc:convertDateTime", function (assert) {
-  var inputFn = jQueryFrameFn("#page\\:mainForm\\:tobagoOffsetTimeInput\\:\\:field");
-  var datepickerButtonFn = jQueryFrameFn("#page\\:mainForm\\:tobagoOffsetTimeInput .datepickerbutton");
-  var outputFn = jQueryFrameFn("#page\\:mainForm\\:tobagoOffsetTimeOutput .tobago-out");
+  let inputFn = testFrameQuerySelectorFn("#page\\:mainForm\\:tobagoOffsetTimeInput\\:\\:field");
+  let datepickerButtonFn = testFrameQuerySelectorFn("#page\\:mainForm\\:tobagoOffsetTimeInput .datepickerbutton");
+  let outputFn = testFrameQuerySelectorFn("#page\\:mainForm\\:tobagoOffsetTimeOutput .tobago-out");
 
   testConvertDateTime(assert,
       inputFn, datepickerButtonFn, outputFn,
@@ -156,11 +156,11 @@ QUnit.test("OffsetTime - tc:convertDateTime", function (assert) {
 });
 
 QUnit.test("OffsetDateTime - f:convertDateTime", function (assert) {
-  var inputFn = jQueryFrameFn("#page\\:mainForm\\:myfacesOffsetDateTimeInput\\:\\:field");
-  var datepickerButtonFn = jQueryFrameFn("#page\\:mainForm\\:myfacesOffsetDateTimeInput .datepickerbutton");
-  var outputFn = jQueryFrameFn("#page\\:mainForm\\:myfacesOffsetDateTimeOutput .tobago-out");
+  let inputFn = testFrameQuerySelectorFn("#page\\:mainForm\\:myfacesOffsetDateTimeInput\\:\\:field");
+  let datepickerButtonFn = testFrameQuerySelectorFn("#page\\:mainForm\\:myfacesOffsetDateTimeInput .datepickerbutton");
+  let outputFn = testFrameQuerySelectorFn("#page\\:mainForm\\:myfacesOffsetDateTimeOutput .tobago-out");
 
-  if (inputFn().length > 0) {
+  if (inputFn() !== null) {
     testConvertDateTime(assert,
         inputFn, datepickerButtonFn, outputFn,
         "dd.MM.yyyy HH:mm:ss Z", true, true,
@@ -171,9 +171,9 @@ QUnit.test("OffsetDateTime - f:convertDateTime", function (assert) {
 });
 
 QUnit.test("OffsetDateTime - tc:convertDateTime", function (assert) {
-  var inputFn = jQueryFrameFn("#page\\:mainForm\\:tobagoOffsetDateTimeInput\\:\\:field");
-  var datepickerButtonFn = jQueryFrameFn("#page\\:mainForm\\:tobagoOffsetDateTimeInput .datepickerbutton");
-  var outputFn = jQueryFrameFn("#page\\:mainForm\\:tobagoOffsetDateTimeOutput .tobago-out");
+  let inputFn = testFrameQuerySelectorFn("#page\\:mainForm\\:tobagoOffsetDateTimeInput\\:\\:field");
+  let datepickerButtonFn = testFrameQuerySelectorFn("#page\\:mainForm\\:tobagoOffsetDateTimeInput .datepickerbutton");
+  let outputFn = testFrameQuerySelectorFn("#page\\:mainForm\\:tobagoOffsetDateTimeOutput .tobago-out");
 
   testConvertDateTime(assert,
       inputFn, datepickerButtonFn, outputFn,
@@ -182,11 +182,11 @@ QUnit.test("OffsetDateTime - tc:convertDateTime", function (assert) {
 });
 
 QUnit.test("ZonedDateTime - f:convertDateTime", function (assert) {
-  var inputFn = jQueryFrameFn("#page\\:mainForm\\:myfacesZonedDateTimeInput\\:\\:field");
-  var datepickerButtonFn = jQueryFrameFn("#page\\:mainForm\\:myfacesZonedDateTimeInput .datepickerbutton");
-  var outputFn = jQueryFrameFn("#page\\:mainForm\\:myfacesZonedDateTimeOutput .tobago-out");
+  let inputFn = testFrameQuerySelectorFn("#page\\:mainForm\\:myfacesZonedDateTimeInput\\:\\:field");
+  let datepickerButtonFn = testFrameQuerySelectorFn("#page\\:mainForm\\:myfacesZonedDateTimeInput .datepickerbutton");
+  let outputFn = testFrameQuerySelectorFn("#page\\:mainForm\\:myfacesZonedDateTimeOutput .tobago-out");
 
-  if (inputFn().length > 0) {
+  if (inputFn() !== null) {
     testConvertDateTime(assert,
         inputFn, datepickerButtonFn, outputFn,
         "dd.MM.yyyy HH:mm:ss Z", true, true,
@@ -197,9 +197,9 @@ QUnit.test("ZonedDateTime - f:convertDateTime", function (assert) {
 });
 
 QUnit.test("ZonedDateTime - tc:convertDateTime", function (assert) {
-  var inputFn = jQueryFrameFn("#page\\:mainForm\\:tobagoZonedDateTimeInput\\:\\:field");
-  var datepickerButtonFn = jQueryFrameFn("#page\\:mainForm\\:tobagoZonedDateTimeInput .datepickerbutton");
-  var outputFn = jQueryFrameFn("#page\\:mainForm\\:tobagoZonedDateTimeOutput .tobago-out");
+  let inputFn = testFrameQuerySelectorFn("#page\\:mainForm\\:tobagoZonedDateTimeInput\\:\\:field");
+  let datepickerButtonFn = testFrameQuerySelectorFn("#page\\:mainForm\\:tobagoZonedDateTimeInput .datepickerbutton");
+  let outputFn = testFrameQuerySelectorFn("#page\\:mainForm\\:tobagoZonedDateTimeOutput .tobago-out");
 
   testConvertDateTime(assert,
       inputFn, datepickerButtonFn, outputFn,
@@ -210,21 +210,22 @@ QUnit.test("ZonedDateTime - tc:convertDateTime", function (assert) {
 function testConvertDateTime(assert, inputFn, datepickerButtonFn, outputFn,
                              expectPattern, expectCalendarIcon, expectClockIcon,
                              inputValue, expectOutputValue) {
-  var submitButtonFn = jQueryFrameFn("#page\\:mainForm\\:submitButton");
+  let submitButtonFn = testFrameQuerySelectorFn("#page\\:mainForm\\:submitButton");
 
-  var TTT = new TobagoTestTool(assert);
+  let TTT = new TobagoTestTool(assert);
   TTT.asserts(3, function () {
-    assert.equal(inputFn().data("tobago-pattern"), expectPattern);
-    assert.equal(datepickerButtonFn().find(".fa-calendar").length, expectCalendarIcon);
-    assert.equal(datepickerButtonFn().find(".fa-clock-o").length, expectClockIcon);
+    assert.equal(inputFn().dataset.tobagoPattern, expectPattern);
+    assert.equal(datepickerButtonFn().querySelector(".fa-calendar") !== null, expectCalendarIcon);
+    assert.equal(datepickerButtonFn().querySelector(".fa-clock-o") !== null, expectClockIcon);
   });
   TTT.action(function () {
-    inputFn().val(inputValue);
-    submitButtonFn().click();
-  });
+        inputFn().value = inputValue;
+        submitButtonFn().click();
+      }
+  );
   TTT.waitForResponse();
   TTT.asserts(1, function () {
-    assert.equal(outputFn().text(), expectOutputValue);
+    assert.equal(outputFn().textContent, expectOutputValue);
   });
   TTT.startTest();
 }
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/1500-output/21-label-for/Label_For.test.js b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/1500-output/21-label-for/Label_For.test.js
index a1ec951..665066e 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/1500-output/21-label-for/Label_For.test.js
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/1500-output/21-label-for/Label_For.test.js
@@ -15,36 +15,36 @@
  * limitations under the License.
  */
 
-import {jQueryFrame} from "/script/tobago-test.js";
+import {testFrameQuerySelectorFn} from "/script/tobago-test.js";
 
 QUnit.test("Test for required CSS class", function (assert) {
   assert.expect(13);
 
-  var $inLabel = jQueryFrame("#page\\:mainForm\\:inLabel");
-  var $dateLabel = jQueryFrame("#page\\:mainForm\\:dateLabel");
-  var $fileLabel = jQueryFrame("#page\\:mainForm\\:fileLabel");
-  var $textareaLabel = jQueryFrame("#page\\:mainForm\\:textareaLabel");
-  var $selectBooleanCheckboxLabel = jQueryFrame("#page\\:mainForm\\:selectBooleanCheckboxLabel");
-  var $selectBooleanToggleLabel = jQueryFrame("#page\\:mainForm\\:selectBooleanToggleLabel");
-  var $selectOneRadioLabel = jQueryFrame("#page\\:mainForm\\:selectOneRadioLabel");
-  var $selectManyCheckboxLabel = jQueryFrame("#page\\:mainForm\\:selectManyCheckboxLabel");
-  var $selectOneChoiceLabel = jQueryFrame("#page\\:mainForm\\:selectOneChoiceLabel");
-  var $selectOneListboxLabel = jQueryFrame("#page\\:mainForm\\:selectOneListboxLabel");
-  var $selectManyListboxLabel = jQueryFrame("#page\\:mainForm\\:selectManyListboxLabel");
-  var $selectManyShuttleLabel = jQueryFrame("#page\\:mainForm\\:selectManyShuttleLabel");
-  var $starsLabel = jQueryFrame("#page\\:mainForm\\:starsLabel");
+  let inLabel = testFrameQuerySelectorFn("#page\\:mainForm\\:inLabel");
+  let dateLabel = testFrameQuerySelectorFn("#page\\:mainForm\\:dateLabel");
+  let fileLabel = testFrameQuerySelectorFn("#page\\:mainForm\\:fileLabel");
+  let textareaLabel = testFrameQuerySelectorFn("#page\\:mainForm\\:textareaLabel");
+  let selectBooleanCheckboxLabel = testFrameQuerySelectorFn("#page\\:mainForm\\:selectBooleanCheckboxLabel");
+  let selectBooleanToggleLabel = testFrameQuerySelectorFn("#page\\:mainForm\\:selectBooleanToggleLabel");
+  let selectOneRadioLabel = testFrameQuerySelectorFn("#page\\:mainForm\\:selectOneRadioLabel");
+  let selectManyCheckboxLabel = testFrameQuerySelectorFn("#page\\:mainForm\\:selectManyCheckboxLabel");
+  let selectOneChoiceLabel = testFrameQuerySelectorFn("#page\\:mainForm\\:selectOneChoiceLabel");
+  let selectOneListboxLabel = testFrameQuerySelectorFn("#page\\:mainForm\\:selectOneListboxLabel");
+  let selectManyListboxLabel = testFrameQuerySelectorFn("#page\\:mainForm\\:selectManyListboxLabel");
+  let selectManyShuttleLabel = testFrameQuerySelectorFn("#page\\:mainForm\\:selectManyShuttleLabel");
+  let starsLabel = testFrameQuerySelectorFn("#page\\:mainForm\\:starsLabel");
 
-  assert.ok($inLabel.hasClass("tobago-required"));
-  assert.ok($dateLabel.hasClass("tobago-required"));
-  assert.ok($fileLabel.hasClass("tobago-required"));
-  assert.ok($textareaLabel.hasClass("tobago-required"));
-  assert.ok($selectBooleanCheckboxLabel.hasClass("tobago-required"));
-  assert.ok($selectBooleanToggleLabel.hasClass("tobago-required"));
-  assert.ok($selectOneRadioLabel.hasClass("tobago-required"));
-  assert.ok($selectManyCheckboxLabel.hasClass("tobago-required"));
-  assert.ok($selectOneChoiceLabel.hasClass("tobago-required"));
-  assert.ok($selectOneListboxLabel.hasClass("tobago-required"));
-  assert.ok($selectManyListboxLabel.hasClass("tobago-required"));
-  assert.ok($selectManyShuttleLabel.hasClass("tobago-required"));
-  assert.ok($starsLabel.hasClass("tobago-required"));
+  assert.ok(inLabel().classList.contains("tobago-required"));
+  assert.ok(dateLabel().classList.contains("tobago-required"));
+  assert.ok(fileLabel().classList.contains("tobago-required"));
+  assert.ok(textareaLabel().classList.contains("tobago-required"));
+  assert.ok(selectBooleanCheckboxLabel().classList.contains("tobago-required"));
+  assert.ok(selectBooleanToggleLabel().classList.contains("tobago-required"));
+  assert.ok(selectOneRadioLabel().classList.contains("tobago-required"));
+  assert.ok(selectManyCheckboxLabel().classList.contains("tobago-required"));
+  assert.ok(selectOneChoiceLabel().classList.contains("tobago-required"));
+  assert.ok(selectOneListboxLabel().classList.contains("tobago-required"));
+  assert.ok(selectManyListboxLabel().classList.contains("tobago-required"));
+  assert.ok(selectManyShuttleLabel().classList.contains("tobago-required"));
+  assert.ok(starsLabel().classList.contains("tobago-required"));
 });
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/4000-button-link/4050-ajax-dropdown/Ajax_Dropdown.test.js b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/4000-button-link/4050-ajax-dropdown/Ajax_Dropdown.test.js
index e7267f8..fa01e57 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/4000-button-link/4050-ajax-dropdown/Ajax_Dropdown.test.js
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/4000-button-link/4050-ajax-dropdown/Ajax_Dropdown.test.js
@@ -15,38 +15,40 @@
  * limitations under the License.
  */
 
-import {jQueryFrameFn} from "/script/tobago-test.js";
+import {testFrameQuerySelectorFn} from "/script/tobago-test.js";
 import {TobagoTestTool} from "/tobago/test/tobago-test-tool.js";
 
 QUnit.test("Execute 'AJAX' entry in dropdown menu", function (assert) {
-  var dropdownMenuButtonFn = jQueryFrameFn("#page\\:mainForm\\:dropdownMenuButton\\:\\:command");
-  var ajaxEntryFn = jQueryFrameFn("#page\\:mainForm\\:ajaxEntry");
-  var inputFn = jQueryFrameFn("#page\\:mainForm\\:inputAjax\\:\\:field");
-  var outputFn = jQueryFrameFn("#page\\:mainForm\\:outputAjax .tobago-out");
+  let dropdownMenuButtonFn = testFrameQuerySelectorFn("#page\\:mainForm\\:dropdownMenuButton\\:\\:command");
+  const ajaxEntryId = "#page\\:mainForm\\:ajaxEntry";
+  let ajaxEntryFn = testFrameQuerySelectorFn(ajaxEntryId);
+  let tobagoPageMenuStoreFn = testFrameQuerySelectorFn(".tobago-page-menuStore");
+  let inputFn = testFrameQuerySelectorFn("#page\\:mainForm\\:inputAjax\\:\\:field");
+  let outputFn = testFrameQuerySelectorFn("#page\\:mainForm\\:outputAjax .tobago-out");
 
-  var TTT = new TobagoTestTool(assert);
+  let TTT = new TobagoTestTool(assert);
   TTT.asserts(1, function () {
-    assert.equal(ajaxEntryFn().parents(".tobago-page-menuStore").length, 0, "Dropdown menu should be closed.");
+    assert.ok(tobagoPageMenuStoreFn().querySelector(ajaxEntryId) === null, "Dropdown menu should be closed.");
   });
   TTT.action(function () {
     dropdownMenuButtonFn().click();
   });
   TTT.asserts(1, function () {
-    assert.equal(ajaxEntryFn().parents(".tobago-page-menuStore").length, 1, "Dropdown menu should be opened.");
+    assert.ok(tobagoPageMenuStoreFn().querySelector(ajaxEntryId) !== null, "Dropdown menu should be opened.");
   });
   TTT.action(function () {
-    inputFn().val("Tobago, yay!");
+    inputFn().value = "Tobago, yay!";
   });
   TTT.asserts(1, function () {
-    assert.equal(outputFn().text(), "", "Output should be empty.");
+    assert.equal(outputFn().textContent, "", "Output should be empty.");
   });
   TTT.action(function () {
     ajaxEntryFn().click();
   });
   TTT.waitForResponse();
   TTT.asserts(2, function () {
-    assert.equal(outputFn().text(), "Tobago, yay!");
-    assert.equal(ajaxEntryFn().parents(".tobago-page-menuStore").length, 0, "Dropdown menu should be closed.");
+    assert.equal(outputFn().textContent, "Tobago, yay!");
+    assert.ok(tobagoPageMenuStoreFn().querySelector(ajaxEntryId) === null, "Dropdown menu should be closed.");
   });
   TTT.startTest();
 });
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/4000-button-link/Button_Link.test.js b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/4000-button-link/Button_Link.test.js
index 102d757..3dedd25 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/4000-button-link/Button_Link.test.js
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/4000-button-link/Button_Link.test.js
@@ -15,99 +15,99 @@
  * limitations under the License.
  */
 
-import {jQueryFrame, jQueryFrameFn} from "/script/tobago-test.js";
+import {testFrameQuerySelectorFn} from "/script/tobago-test.js";
 import {TobagoTestTool} from "/tobago/test/tobago-test-tool.js";
 
 QUnit.test("Standard Action Button", function (assert) {
-  var commandFn = jQueryFrameFn("#page\\:mainForm\\:standardButtonAction");
-  var destinationSectionFn = jQueryFrameFn("#page\\:actionSection");
+  let commandFn = testFrameQuerySelectorFn("#page\\:mainForm\\:standardButtonAction");
+  let destinationSectionFn = testFrameQuerySelectorFn("#page\\:actionSection");
   testStandardCommands(commandFn, destinationSectionFn, assert);
 });
 
 QUnit.test("Standard Link Button", function (assert) {
-  var commandFn = jQueryFrameFn("#page\\:mainForm\\:standardButtonLink");
-  var destinationSectionFn = jQueryFrameFn("#page\\:linkSection");
+  let commandFn = testFrameQuerySelectorFn("#page\\:mainForm\\:standardButtonLink");
+  let destinationSectionFn = testFrameQuerySelectorFn("#page\\:linkSection");
   testStandardCommands(commandFn, destinationSectionFn, assert);
 });
 
 QUnit.test("Standard Action Link", function (assert) {
-  var commandFn = jQueryFrameFn("#page\\:mainForm\\:standardLinkAction");
-  var destinationSectionFn = jQueryFrameFn("#page\\:actionSection");
+  let commandFn = testFrameQuerySelectorFn("#page\\:mainForm\\:standardLinkAction");
+  let destinationSectionFn = testFrameQuerySelectorFn("#page\\:actionSection");
   testStandardCommands(commandFn, destinationSectionFn, assert);
 });
 
 QUnit.test("Standard Link Link", function (assert) {
-  var commandFn = jQueryFrameFn("#page\\:mainForm\\:standardLinkLink");
-  var destinationSectionFn = jQueryFrameFn("#page\\:linkSection");
+  let commandFn = testFrameQuerySelectorFn("#page\\:mainForm\\:standardLinkLink");
+  let destinationSectionFn = testFrameQuerySelectorFn("#page\\:linkSection");
   testStandardCommands(commandFn, destinationSectionFn, assert);
 });
 
 function testStandardCommands(commandFn, destinationSectionFn, assert) {
-  var backFn = jQueryFrameFn("#page\\:back");
+  let backFn = testFrameQuerySelectorFn("#page\\:back");
 
-  var TTT = new TobagoTestTool(assert);
+  let TTT = new TobagoTestTool(assert);
   TTT.action(function () {
-    commandFn()[0].click();
+    commandFn().click();
   });
   TTT.waitForResponse();
   TTT.asserts(1, function () {
-    assert.equal(destinationSectionFn().length, 1);
+    assert.ok(destinationSectionFn() !== null);
   });
   TTT.action(function () {
-    backFn()[0].click();
+    backFn().click();
   });
   TTT.waitForResponse();
   TTT.asserts(1, function () {
-    assert.equal(commandFn().length, 1);
+    assert.ok(commandFn() !== null);
   });
   TTT.startTest();
 }
 
 QUnit.test("Target Action Button", function (assert) {
-  var commandFn = jQueryFrameFn("#page\\:mainForm\\:targetButtonAction");
-  testTargetCommands(commandFn, "#textInput", "accessed by action", assert);
+  let commandFn = testFrameQuerySelectorFn("#page\\:mainForm\\:targetButtonAction");
+  testTargetCommands(commandFn, "accessed by action", assert);
 });
 
 QUnit.test("Target Link Button", function (assert) {
-  var commandFn = jQueryFrameFn("#page\\:mainForm\\:targetButtonLink");
-  testTargetCommands(commandFn, "#textInput", "accessed by link", assert);
+  let commandFn = testFrameQuerySelectorFn("#page\\:mainForm\\:targetButtonLink");
+  testTargetCommands(commandFn, "accessed by link", assert);
 });
 
 QUnit.test("Target Action Link", function (assert) {
-  var commandFn = jQueryFrameFn("#page\\:mainForm\\:targetLinkAction");
-  testTargetCommands(commandFn, "#textInput", "accessed by action", assert);
+  let commandFn = testFrameQuerySelectorFn("#page\\:mainForm\\:targetLinkAction");
+  testTargetCommands(commandFn, "accessed by action", assert);
 });
 
 QUnit.test("Target Link Link", function (assert) {
-  var commandFn = jQueryFrameFn("#page\\:mainForm\\:targetLinkLink");
-  testTargetCommands(commandFn, "#textInput", "accessed by link", assert);
+  let commandFn = testFrameQuerySelectorFn("#page\\:mainForm\\:targetLinkLink");
+  testTargetCommands(commandFn, "accessed by link", assert);
 });
 
 QUnit.test("Style must not be a dropdown item", function (assert) {
   assert.expect(3);
 
-  var dropdownMenuFn = jQueryFrameFn("#page\\:mainForm\\:dropdownWithStyle .dropdown-menu");
-  var styleAsItemFn = jQueryFrameFn("#page\\:mainForm\\:dropdownWithStyle .dropdown-menu .dropdown-item > style");
-  var buttonFn = jQueryFrameFn("#page\\:mainForm\\:dropdownWithStyle > .tobago-button");
+  let dropdownMenuFn = testFrameQuerySelectorFn("#page\\:mainForm\\:dropdownWithStyle .dropdown-menu");
+  let styleAsItemFn = testFrameQuerySelectorFn("#page\\:mainForm\\:dropdownWithStyle .dropdown-menu .dropdown-item > style");
+  let buttonFn = testFrameQuerySelectorFn("#page\\:mainForm\\:dropdownWithStyle > .tobago-button");
 
-  assert.equal(dropdownMenuFn().length, 1);
-  assert.equal(styleAsItemFn().length, 0);
-  assert.equal(buttonFn().css("width"), "200px");
+  assert.ok(dropdownMenuFn() !== null);
+  assert.equal(styleAsItemFn(), null);
+  assert.equal(buttonFn().offsetWidth, 200);
 });
 
-function testTargetCommands(commandFn, targetTextInputSelector, expectedText, assert) {
-  var TTT = new TobagoTestTool(assert);
+function testTargetCommands(commandFn, expectedText, assert) {
+  let TTT = new TobagoTestTool(assert);
   TTT.action(function () {
-    commandFn()[0].click();
+    commandFn().click();
   });
   TTT.waitMs(2000); //TobagoTestTools.waitForResponse() didn't recognize responses on a target frame, so we just wait
   TTT.asserts(1, function () {
-    var $targetTextInput = jQueryTargetFrame(targetTextInputSelector);
-    assert.equal($targetTextInput.val(), expectedText);
+    assert.equal(getTargetFrameTestInputValue(), expectedText);
   });
   TTT.startTest();
 }
 
-function jQueryTargetFrame(expression) {
-  return jQueryFrame("#page\\:mainForm\\:targetFrame").contents().find(expression);
+function getTargetFrameTestInputValue() {
+  return testFrameQuerySelectorFn("#page\\:mainForm\\:targetFrame")().contentWindow
+      .document.querySelector("#textInput").value;
 }
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/40000-style/100-headings/Headings.test.js b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/40000-style/100-headings/Headings.test.js
index a187f0b..3fd6803 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/40000-style/100-headings/Headings.test.js
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/40000-style/100-headings/Headings.test.js
@@ -15,78 +15,80 @@
  * limitations under the License.
  */
 
-import {jQueryFrameFn} from "/script/tobago-test.js";
+import {testFrameQuerySelectorFn} from "/script/tobago-test.js";
 import {TobagoTestTool} from "/tobago/test/tobago-test-tool.js";
 
 QUnit.test("Test h1", function (assert) {
-  var alinkFn = jQueryFrameFn("#page\\:mainForm\\:link1");
-  var buttonlinkFn = jQueryFrameFn("#page\\:mainForm\\:actionLink1");
+  let alinkFn = testFrameQuerySelectorFn("#page\\:mainForm\\:link1");
+  let buttonlinkFn = testFrameQuerySelectorFn("#page\\:mainForm\\:actionLink1");
   testFont(assert, alinkFn, buttonlinkFn);
 });
 
 QUnit.test("Test h2", function (assert) {
-  var alinkFn = jQueryFrameFn("#page\\:mainForm\\:link2");
-  var buttonlinkFn = jQueryFrameFn("#page\\:mainForm\\:actionLink2");
+  let alinkFn = testFrameQuerySelectorFn("#page\\:mainForm\\:link2");
+  let buttonlinkFn = testFrameQuerySelectorFn("#page\\:mainForm\\:actionLink2");
   testFont(assert, alinkFn, buttonlinkFn);
 });
 
 QUnit.test("Test h3", function (assert) {
-  var alinkFn = jQueryFrameFn("#page\\:mainForm\\:link3");
-  var buttonlinkFn = jQueryFrameFn("#page\\:mainForm\\:actionLink3");
+  let alinkFn = testFrameQuerySelectorFn("#page\\:mainForm\\:link3");
+  let buttonlinkFn = testFrameQuerySelectorFn("#page\\:mainForm\\:actionLink3");
   testFont(assert, alinkFn, buttonlinkFn);
 });
 
 QUnit.test("Test h4", function (assert) {
-  var alinkFn = jQueryFrameFn("#page\\:mainForm\\:link4");
-  var buttonlinkFn = jQueryFrameFn("#page\\:mainForm\\:actionLink4");
+  let alinkFn = testFrameQuerySelectorFn("#page\\:mainForm\\:link4");
+  let buttonlinkFn = testFrameQuerySelectorFn("#page\\:mainForm\\:actionLink4");
   testFont(assert, alinkFn, buttonlinkFn);
 });
 
 QUnit.test("Test h5", function (assert) {
-  var alinkFn = jQueryFrameFn("#page\\:mainForm\\:link5");
-  var buttonlinkFn = jQueryFrameFn("#page\\:mainForm\\:actionLink5");
+  let alinkFn = testFrameQuerySelectorFn("#page\\:mainForm\\:link5");
+  let buttonlinkFn = testFrameQuerySelectorFn("#page\\:mainForm\\:actionLink5");
   testFont(assert, alinkFn, buttonlinkFn);
 });
 
 QUnit.test("Test h6", function (assert) {
-  var alinkFn = jQueryFrameFn("#page\\:mainForm\\:link6");
-  var buttonlinkFn = jQueryFrameFn("#page\\:mainForm\\:actionLink6");
+  let alinkFn = testFrameQuerySelectorFn("#page\\:mainForm\\:link6");
+  let buttonlinkFn = testFrameQuerySelectorFn("#page\\:mainForm\\:actionLink6");
   testFont(assert, alinkFn, buttonlinkFn);
 });
 
 QUnit.test("Test no heading", function (assert) {
-  var alinkFn = jQueryFrameFn("#page\\:mainForm\\:link0");
-  var buttonlinkFn = jQueryFrameFn("#page\\:mainForm\\:actionLink0");
+  let alinkFn = testFrameQuerySelectorFn("#page\\:mainForm\\:link0");
+  let buttonlinkFn = testFrameQuerySelectorFn("#page\\:mainForm\\:actionLink0");
   testFont(assert, alinkFn, buttonlinkFn);
 });
 
 function testFont(assert, alinkFn, buttonlinkFn) {
   assert.expect(5);
 
-  assert.equal(alinkFn().css("color"), buttonlinkFn().css("color"));
-  assert.equal(alinkFn().css("font-family"), buttonlinkFn().css("font-family"));
-  assert.equal(alinkFn().css("font-size"), buttonlinkFn().css("font-size"));
-  assert.equal(alinkFn().css("font-weight"), buttonlinkFn().css("font-weight"));
-  assert.equal(alinkFn().css("text-decoration"), buttonlinkFn().css("text-decoration"));
+  const alinkComputedStyle = getComputedStyle(alinkFn());
+  const buttonlinkFnComputedStyle = getComputedStyle(buttonlinkFn());
+  assert.equal(alinkComputedStyle.color, buttonlinkFnComputedStyle.color);
+  assert.equal(alinkComputedStyle.fontFamily, buttonlinkFnComputedStyle.fontFamily);
+  assert.equal(alinkComputedStyle.fontSize, buttonlinkFnComputedStyle.fontSize);
+  assert.equal(alinkComputedStyle.fontWeight, buttonlinkFnComputedStyle.fontWeight);
+  assert.equal(alinkComputedStyle.textDecoration, buttonlinkFnComputedStyle.textDecoration);
 }
 
 QUnit.test("Ajax reload for section 2", function (assert) {
-  var reloadButtonFn = jQueryFrameFn("#page\\:mainForm\\:reloadSection2");
-  var section2HeaderFn = jQueryFrameFn("#page\\:mainForm\\:levelTwoSection h3");
-  var timestampFn = jQueryFrameFn("#page\\:mainForm\\:timestamp span");
-  var firstTimestamp = timestampFn().text();
+  let reloadButtonFn = testFrameQuerySelectorFn("#page\\:mainForm\\:reloadSection2");
+  let section2HeaderFn = testFrameQuerySelectorFn("#page\\:mainForm\\:levelTwoSection h3");
+  let timestampFn = testFrameQuerySelectorFn("#page\\:mainForm\\:timestamp span");
+  let firstTimestamp = timestampFn().textContent;
 
-  var TTT = new TobagoTestTool(assert);
+  let TTT = new TobagoTestTool(assert);
   TTT.asserts(1, function () {
-    assert.equal(section2HeaderFn().length, 1);
+    assert.ok(section2HeaderFn() !== null);
   });
   TTT.action(function () {
     reloadButtonFn().click();
   });
   TTT.waitForResponse();
   TTT.asserts(2, function () {
-    assert.equal(section2HeaderFn().length, 1);
-    assert.ok(firstTimestamp < timestampFn().text(), "value of new timestamp must be higher");
+    assert.ok(section2HeaderFn() !== null);
+    assert.ok(firstTimestamp < timestampFn().textContent, "value of new timestamp must be higher");
   });
   TTT.startTest();
 });
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/4800-labelLayout/100-id-markup/Id_Markup.test.js b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/4800-labelLayout/100-id-markup/Id_Markup.test.js
index 8c1a482..52ae01d 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/4800-labelLayout/100-id-markup/Id_Markup.test.js
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/4800-labelLayout/100-id-markup/Id_Markup.test.js
@@ -15,176 +15,169 @@
  * limitations under the License.
  */
 
-import {jQueryFrame} from "/script/tobago-test.js";
+import {testFrameQuerySelectorFn} from "/script/tobago-test.js";
 
 QUnit.test("No label set", function (assert) {
   assert.expect(5);
 
-  var $section = jQueryFrame("#page\\:mainForm\\:sectionNoLabel");
-  var $rootDiv = $section.find(".tobago-section-content > div");
-  var $label = $rootDiv.find("label");
-  var $input = $rootDiv.find("input");
+  let sectionFn = testFrameQuerySelectorFn("#page\\:mainForm\\:sectionNoLabel");
+  let rootDiv = sectionFn().querySelector(".tobago-section-content > div");
+  let label = rootDiv.querySelector("label");
+  let input = rootDiv.querySelector("input");
 
-  assert.equal($rootDiv.attr('id'), "page:mainForm:inNoLabel");
-  assert.equal($label.length, 0);
-  assert.equal($input.attr('id'), "page:mainForm:inNoLabel::field");
-  assert.equal($input.attr('name'), "page:mainForm:inNoLabel");
+  assert.equal(rootDiv.id, "page:mainForm:inNoLabel");
+  assert.equal(label, null);
+  assert.equal(input.id, "page:mainForm:inNoLabel::field");
+  assert.equal(input.name, "page:mainForm:inNoLabel");
 
-  assert.equal(JSON.parse($rootDiv.attr('data-tobago-markup'))[0], "testmarkup");
+  assert.equal(JSON.parse(rootDiv.dataset.tobagoMarkup)[0], "testmarkup");
 });
 
 QUnit.test("labelLayout=none", function (assert) {
   assert.expect(5);
 
-  var $section = jQueryFrame("#page\\:mainForm\\:sectionNone");
-  var $rootDiv = $section.find(".tobago-section-content > div");
-  var $label = $rootDiv.find("label");
-  var $input = $rootDiv.find("input");
+  let sectionFn = testFrameQuerySelectorFn("#page\\:mainForm\\:sectionNone");
+  let rootDiv = sectionFn().querySelector(".tobago-section-content > div");
+  let label = rootDiv.querySelector("label");
+  let input = rootDiv.querySelector("input");
 
-  assert.equal($rootDiv.attr('id'), "page:mainForm:inNone");
-  assert.equal($label.length, 0);
-  assert.equal($input.attr('id'), "page:mainForm:inNone::field");
-  assert.equal($input.attr('name'), "page:mainForm:inNone");
+  assert.equal(rootDiv.id, "page:mainForm:inNone");
+  assert.equal(label, null);
+  assert.equal(input.id, "page:mainForm:inNone::field");
+  assert.equal(input.name, "page:mainForm:inNone");
 
-  assert.equal(JSON.parse($rootDiv.attr('data-tobago-markup'))[0], "testmarkup");
+  assert.equal(JSON.parse(rootDiv.dataset.tobagoMarkup)[0], "testmarkup");
 });
 
 QUnit.test("labelLayout=skip", function (assert) {
   assert.expect(3);
 
-  var $section = jQueryFrame("#page\\:mainForm\\:sectionSkip");
-  var $rootInput = $section.find(".tobago-section-content > input");
-  var $label = $section.find("label");
+  let sectionFn = testFrameQuerySelectorFn("#page\\:mainForm\\:sectionSkip");
+  let rootInput = sectionFn().querySelector(".tobago-section-content > input");
+  let label = sectionFn().querySelector("label");
 
-  assert.equal($label.length, 0);
-  assert.equal($rootInput.attr('id'), "page:mainForm:inSkip");
+  assert.equal(label, null);
+  assert.equal(rootInput.id, "page:mainForm:inSkip");
 
-  assert.equal(JSON.parse($rootInput.attr('data-tobago-markup'))[0], "testmarkup");
+  assert.equal(JSON.parse(rootInput.dataset.tobagoMarkup)[0], "testmarkup");
 });
 
 QUnit.test("labelLayout=top", function (assert) {
   assert.expect(5);
 
-  var $section = jQueryFrame("#page\\:mainForm\\:sectionTop");
-  var $rootDiv = $section.find(".tobago-section-content > div");
-  var $label = $rootDiv.find("label");
-  var $input = $rootDiv.find("input");
+  let sectionFn = testFrameQuerySelectorFn("#page\\:mainForm\\:sectionTop");
+  let rootDiv = sectionFn().querySelector(".tobago-section-content > div");
+  let label = rootDiv.querySelector("label");
+  let input = rootDiv.querySelector("input");
 
-  assert.equal($rootDiv.attr('id'), "page:mainForm:inTop");
-  assert.equal($label.attr('for'), "page:mainForm:inTop::field");
-  assert.equal($input.attr('id'), "page:mainForm:inTop::field");
-  assert.equal($input.attr('name'), "page:mainForm:inTop");
+  assert.equal(rootDiv.id, "page:mainForm:inTop");
+  assert.equal(label.getAttribute('for'), "page:mainForm:inTop::field");
+  assert.equal(input.id, "page:mainForm:inTop::field");
+  assert.equal(input.name, "page:mainForm:inTop");
 
-  assert.equal(JSON.parse($rootDiv.attr('data-tobago-markup'))[0], "testmarkup");
+  assert.equal(JSON.parse(rootDiv.dataset.tobagoMarkup)[0], "testmarkup");
 });
 
 QUnit.test("labelLayout=flowLeft", function (assert) {
   assert.expect(5);
 
-  var $section = jQueryFrame("#page\\:mainForm\\:sectionFlowLeft");
-  var $rootDiv = $section.find(".tobago-section-content > div");
-  var $label = $rootDiv.find("label");
-  var $input = $rootDiv.find("input");
+  let sectionFn = testFrameQuerySelectorFn("#page\\:mainForm\\:sectionFlowLeft");
+  let rootDiv = sectionFn().querySelector(".tobago-section-content > div");
+  let label = rootDiv.querySelector("label");
+  let input = rootDiv.querySelector("input");
 
-  assert.equal($rootDiv.attr('id'), "page:mainForm:inFlowLeft");
-  assert.equal($label.attr('for'), "page:mainForm:inFlowLeft::field");
-  assert.equal($input.attr('id'), "page:mainForm:inFlowLeft::field");
-  assert.equal($input.attr('name'), "page:mainForm:inFlowLeft");
+  assert.equal(rootDiv.id, "page:mainForm:inFlowLeft");
+  assert.equal(label.getAttribute('for'), "page:mainForm:inFlowLeft::field");
+  assert.equal(input.id, "page:mainForm:inFlowLeft::field");
+  assert.equal(input.name, "page:mainForm:inFlowLeft");
 
-  assert.equal(JSON.parse($rootDiv.attr('data-tobago-markup'))[0], "testmarkup");
+  assert.equal(JSON.parse(rootDiv.dataset.tobagoMarkup)[0], "testmarkup");
 });
 
 QUnit.test("labelLayout=flowRight", function (assert) {
   assert.expect(5);
 
-  var $section = jQueryFrame("#page\\:mainForm\\:sectionFlowRight");
-  var $rootDiv = $section.find(".tobago-section-content > div");
-  var $label = $rootDiv.find("label");
-  var $input = $rootDiv.find("input");
+  let sectionFn = testFrameQuerySelectorFn("#page\\:mainForm\\:sectionFlowRight");
+  let rootDiv = sectionFn().querySelector(".tobago-section-content > div");
+  let label = rootDiv.querySelector("label");
+  let input = rootDiv.querySelector("input");
 
-  assert.equal($rootDiv.attr('id'), "page:mainForm:inFlowRight");
-  assert.equal($label.attr('for'), "page:mainForm:inFlowRight::field");
-  assert.equal($input.attr('id'), "page:mainForm:inFlowRight::field");
-  assert.equal($input.attr('name'), "page:mainForm:inFlowRight");
+  assert.equal(rootDiv.id, "page:mainForm:inFlowRight");
+  assert.equal(label.getAttribute('for'), "page:mainForm:inFlowRight::field");
+  assert.equal(input.id, "page:mainForm:inFlowRight::field");
+  assert.equal(input.name, "page:mainForm:inFlowRight");
 
-  assert.equal(JSON.parse($rootDiv.attr('data-tobago-markup'))[0], "testmarkup");
+  assert.equal(JSON.parse(rootDiv.dataset.tobagoMarkup)[0], "testmarkup");
 });
 
 QUnit.test("labelLayout=flexLeft", function (assert) {
   assert.expect(5);
 
-  var $section = jQueryFrame("#page\\:mainForm\\:sectionFlexLeft");
-  var $rootDiv = $section.find(".tobago-section-content > div");
-  var $label = $rootDiv.find("label");
-  var $input = $rootDiv.find("input");
+  let sectionFn = testFrameQuerySelectorFn("#page\\:mainForm\\:sectionFlexLeft");
+  let rootDiv = sectionFn().querySelector(".tobago-section-content > div");
+  let label = rootDiv.querySelector("label");
+  let input = rootDiv.querySelector("input");
 
-  assert.equal($rootDiv.attr('id'), "page:mainForm:inFlexLeft");
-  assert.equal($label.attr('for'), "page:mainForm:inFlexLeft::field");
-  assert.equal($input.attr('id'), "page:mainForm:inFlexLeft::field");
-  assert.equal($input.attr('name'), "page:mainForm:inFlexLeft");
+  assert.equal(rootDiv.id, "page:mainForm:inFlexLeft");
+  assert.equal(label.getAttribute('for'), "page:mainForm:inFlexLeft::field");
+  assert.equal(input.id, "page:mainForm:inFlexLeft::field");
+  assert.equal(input.name, "page:mainForm:inFlexLeft");
 
-  assert.equal(JSON.parse($rootDiv.attr('data-tobago-markup'))[0], "testmarkup");
+  assert.equal(JSON.parse(rootDiv.dataset.tobagoMarkup)[0], "testmarkup");
 });
 
 QUnit.test("labelLayout=flexRight", function (assert) {
   assert.expect(5);
 
-  var $section = jQueryFrame("#page\\:mainForm\\:sectionFlexRight");
-  var $rootDiv = $section.find(".tobago-section-content > div");
-  var $label = $rootDiv.find("label");
-  var $input = $rootDiv.find("input");
+  let sectionFn = testFrameQuerySelectorFn("#page\\:mainForm\\:sectionFlexRight");
+  let rootDiv = sectionFn().querySelector(".tobago-section-content > div");
+  let label = rootDiv.querySelector("label");
+  let input = rootDiv.querySelector("input");
 
-  assert.equal($rootDiv.attr('id'), "page:mainForm:inFlexRight");
-  assert.equal($label.attr('for'), "page:mainForm:inFlexRight::field");
-  assert.equal($input.attr('id'), "page:mainForm:inFlexRight::field");
-  assert.equal($input.attr('name'), "page:mainForm:inFlexRight");
+  assert.equal(rootDiv.id, "page:mainForm:inFlexRight");
+  assert.equal(label.getAttribute('for'), "page:mainForm:inFlexRight::field");
+  assert.equal(input.id, "page:mainForm:inFlexRight::field");
+  assert.equal(input.name, "page:mainForm:inFlexRight");
 
-  assert.equal(JSON.parse($rootDiv.attr('data-tobago-markup'))[0], "testmarkup");
+  assert.equal(JSON.parse(rootDiv.dataset.tobagoMarkup)[0], "testmarkup");
 });
 
 QUnit.test("labelLayout=segmentLeft", function (assert) {
   assert.expect(7);
 
-  var $section = jQueryFrame("#page\\:mainForm\\:sectionSegmentLeft");
-  var $segmentLayout = $section.find(".tobago-section-content > div");
-  var $labelSegment = $segmentLayout.find(".col-3 > div");
-  var $inputSegment = $segmentLayout.find(".col-9 > div");
-  var $label = $labelSegment.find("label");
-  var $input = $inputSegment.find("input");
-
-  assert.equal($labelSegment.attr('id'), "page:mainForm:inSegmentLeft::label");
-  assert.equal($label.attr('for'), "page:mainForm:inSegmentLeft::field");
-  assert.equal($inputSegment.attr('id'), "page:mainForm:inSegmentLeft");
-  assert.equal($input.attr('id'), "page:mainForm:inSegmentLeft::field");
-  assert.equal($input.attr('name'), "page:mainForm:inSegmentLeft");
-
-  assert.equal(JSON.parse($labelSegment.attr('data-tobago-markup'))[0], "testmarkup");
-  assert.equal(JSON.parse($inputSegment.attr('data-tobago-markup'))[0], "testmarkup");
+  let sectionFn = testFrameQuerySelectorFn("#page\\:mainForm\\:sectionSegmentLeft");
+  let segmentLayout = sectionFn().querySelector(".tobago-section-content > div");
+  let labelSegment = segmentLayout.querySelector(".col-3 > div");
+  let inputSegment = segmentLayout.querySelector(".col-9 > div");
+  let label = labelSegment.querySelector("label");
+  let input = inputSegment.querySelector("input");
+
+  assert.equal(labelSegment.id, "page:mainForm:inSegmentLeft::label");
+  assert.equal(label.getAttribute('for'), "page:mainForm:inSegmentLeft::field");
+  assert.equal(inputSegment.id, "page:mainForm:inSegmentLeft");
+  assert.equal(input.id, "page:mainForm:inSegmentLeft::field");
+  assert.equal(input.name, "page:mainForm:inSegmentLeft");
+
+  assert.equal(JSON.parse(labelSegment.dataset.tobagoMarkup)[0], "testmarkup");
+  assert.equal(JSON.parse(inputSegment.dataset.tobagoMarkup)[0], "testmarkup");
 });
 
 QUnit.test("labelLayout=segmentRight", function (assert) {
   assert.expect(7);
 
-  var $section = jQueryFrame("#page\\:mainForm\\:sectionSegmentRight");
-  var $segmentLayout = $section.find(".tobago-section-content > div");
-  var $labelSegment = $segmentLayout.find(".col-3 > div");
-  var $inputSegment = $segmentLayout.find(".col-9 > div");
-  var $label = $labelSegment.find("label");
-  var $input = $inputSegment.find("input");
-
-  assert.equal($labelSegment.attr('id'), "page:mainForm:inSegmentRight::label");
-  assert.equal($label.attr('for'), "page:mainForm:inSegmentRight::field");
-  assert.equal($inputSegment.attr('id'), "page:mainForm:inSegmentRight");
-  assert.equal($input.attr('id'), "page:mainForm:inSegmentRight::field");
-  assert.equal($input.attr('name'), "page:mainForm:inSegmentRight");
-
-  assert.equal(JSON.parse($labelSegment.attr('data-tobago-markup'))[0], "testmarkup");
-  assert.equal(JSON.parse($inputSegment.attr('data-tobago-markup'))[0], "testmarkup");
-});
-
-QUnit.test("Number of data-tobago-markup attributes", function (assert) {
-  assert.expect(1);
-
-  var $dataTobagoMarkups = jQueryFrame("#page\\:content .tobago-section-content [data-tobago-markup]");
-  assert.equal($dataTobagoMarkups.length, 12, "Two for segment layout components, one for all other components");
+  let sectionFn = testFrameQuerySelectorFn("#page\\:mainForm\\:sectionSegmentRight");
+  let segmentLayout = sectionFn().querySelector(".tobago-section-content > div");
+  let labelSegment = segmentLayout.querySelector(".col-3 > div");
+  let inputSegment = segmentLayout.querySelector(".col-9 > div");
+  let label = labelSegment.querySelector("label");
+  let input = inputSegment.querySelector("input");
+
+  assert.equal(labelSegment.id, "page:mainForm:inSegmentRight::label");
+  assert.equal(label.getAttribute('for'), "page:mainForm:inSegmentRight::field");
+  assert.equal(inputSegment.id, "page:mainForm:inSegmentRight");
+  assert.equal(input.id, "page:mainForm:inSegmentRight::field");
+  assert.equal(input.name, "page:mainForm:inSegmentRight");
+
+  assert.equal(JSON.parse(labelSegment.dataset.tobagoMarkup)[0], "testmarkup");
+  assert.equal(JSON.parse(inputSegment.dataset.tobagoMarkup)[0], "testmarkup");
 });
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/4810-labelLayoutTop/LabelLayoutTop.test.js b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/4810-labelLayoutTop/LabelLayoutTop.test.js
index d5d5356..68e0e65 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/4810-labelLayoutTop/LabelLayoutTop.test.js
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/4810-labelLayoutTop/LabelLayoutTop.test.js
@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import {jQueryFrame} from "/script/tobago-test.js";
+import {testFrameQuerySelectorFn} from "/script/tobago-test.js";
 
 QUnit.test("Check width for tc:date", function (assert) {
   assert.expect(2);
@@ -83,9 +83,9 @@ QUnit.test("Check width for tc:textarea", function (assert) {
 });
 
 function testWidth(assert, idPart) {
-  var $compLabel = jQueryFrame("#page\\:mainForm\\:" + idPart + " label");
-  var $compTopLabel = jQueryFrame("#page\\:mainForm\\:" + idPart + "Top label");
+  let compLabelFn = testFrameQuerySelectorFn("#page\\:mainForm\\:" + idPart + " label");
+  let compTopFn = testFrameQuerySelectorFn("#page\\:mainForm\\:" + idPart + "Top");
 
-  assert.equal($compLabel.width(), "155");
-  assert.equal($compTopLabel.width(), $compTopLabel.width());
+  assert.equal(getComputedStyle(compLabelFn()).width, "155px");
+  assert.equal(getComputedStyle(compTopFn().querySelector("label")).width, getComputedStyle(compTopFn()).width);
 }
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/50000-java/20-ajax-execute/Ajax_Execute.test.js b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/50000-java/20-ajax-execute/Ajax_Execute.test.js
index 533a474..9178dab 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/50000-java/20-ajax-execute/Ajax_Execute.test.js
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/50000-java/20-ajax-execute/Ajax_Execute.test.js
@@ -15,56 +15,56 @@
  * limitations under the License.
  */
 
-import {jQueryFrameFn} from "/script/tobago-test.js";
+import {testFrameQuerySelectorFn} from "/script/tobago-test.js";
 import {TobagoTestTool} from "/tobago/test/tobago-test-tool.js";
 
 QUnit.test("ajax excecute", function (assert) {
-  var in1Fn = jQueryFrameFn("#page\\:mainForm\\:in1\\:\\:field");
-  var in2Fn = jQueryFrameFn("#page\\:mainForm\\:in2\\:\\:field");
-  var in3Fn = jQueryFrameFn("#page\\:mainForm\\:in3\\:\\:field");
-  var in4Fn = jQueryFrameFn("#page\\:mainForm\\:in4\\:\\:field");
-  var clearButtonFn = jQueryFrameFn("#page\\:mainForm\\:clear");
-  var submitButtonFn = jQueryFrameFn("#page\\:mainForm\\:submit");
-  var reloadButtonFn = jQueryFrameFn("#page\\:mainForm\\:reload");
+  let in1Fn = testFrameQuerySelectorFn("#page\\:mainForm\\:in1\\:\\:field");
+  let in2Fn = testFrameQuerySelectorFn("#page\\:mainForm\\:in2\\:\\:field");
+  let in3Fn = testFrameQuerySelectorFn("#page\\:mainForm\\:in3\\:\\:field");
+  let in4Fn = testFrameQuerySelectorFn("#page\\:mainForm\\:in4\\:\\:field");
+  let clearButtonFn = testFrameQuerySelectorFn("#page\\:mainForm\\:clear");
+  let submitButtonFn = testFrameQuerySelectorFn("#page\\:mainForm\\:submit");
+  let reloadButtonFn = testFrameQuerySelectorFn("#page\\:mainForm\\:reload");
 
-  var TTT = new TobagoTestTool(assert);
+  let TTT = new TobagoTestTool(assert);
   TTT.action(function () {
-    in1Fn().val("a");
-    in2Fn().val("b");
-    in3Fn().val("c");
-    in4Fn().val("d");
+    in1Fn().value = "a";
+    in2Fn().value = "b";
+    in3Fn().value = "c";
+    in4Fn().value = "d";
     clearButtonFn().click();
   });
   TTT.waitForResponse();
   TTT.asserts(4, function () {
-    assert.equal(in1Fn().val(), "");
-    assert.equal(in2Fn().val(), "");
-    assert.equal(in3Fn().val(), "");
-    assert.equal(in4Fn().val(), "");
+    assert.equal(in1Fn().value, "");
+    assert.equal(in2Fn().value, "");
+    assert.equal(in3Fn().value, "");
+    assert.equal(in4Fn().value, "");
   });
   TTT.action(function () {
-    in1Fn().val("a");
-    in2Fn().val("b");
-    in3Fn().val("c");
-    in4Fn().val("d");
+    in1Fn().value = "a";
+    in2Fn().value = "b";
+    in3Fn().value = "c";
+    in4Fn().value = "d";
     submitButtonFn().click();
   });
   TTT.waitForResponse();
   TTT.asserts(4, function () {
-    assert.equal(in1Fn().val(), "a");
-    assert.equal(in2Fn().val(), "b");
-    assert.equal(in3Fn().val(), "c");
-    assert.equal(in4Fn().val(), "");
+    assert.equal(in1Fn().value, "a");
+    assert.equal(in2Fn().value, "b");
+    assert.equal(in3Fn().value, "c");
+    assert.equal(in4Fn().value, "");
   });
   TTT.action(function () {
     reloadButtonFn().click();
   });
   TTT.waitForResponse();
   TTT.asserts(4, function () {
-    assert.equal(in1Fn().val(), "a");
-    assert.equal(in2Fn().val(), "");
-    assert.equal(in3Fn().val(), "c");
-    assert.equal(in4Fn().val(), "");
+    assert.equal(in1Fn().value, "a");
+    assert.equal(in2Fn().value, "");
+    assert.equal(in3Fn().value, "c");
+    assert.equal(in4Fn().value, "");
   });
   TTT.startTest();
 });
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/50000-java/30-ajax-special-character/Ajax_Special_Character.test.js b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/50000-java/30-ajax-special-character/Ajax_Special_Character.test.js
index 1e81d80..a02891d 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/50000-java/30-ajax-special-character/Ajax_Special_Character.test.js
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/50000-java/30-ajax-special-character/Ajax_Special_Character.test.js
@@ -15,28 +15,28 @@
  * limitations under the License.
  */
 
-import {jQueryFrameFn} from "/script/tobago-test.js";
+import {testFrameQuerySelectorFn} from "/script/tobago-test.js";
 import {TobagoTestTool} from "/tobago/test/tobago-test-tool.js";
 
 QUnit.test("ajax excecute", function (assert) {
-  var timestampFn = jQueryFrameFn("#page\\:mainForm\\:timestamp span");
-  var textFn = jQueryFrameFn("#page\\:mainForm\\:outText span");
-  var tipFn = jQueryFrameFn("#page\\:mainForm\\:outTip span");
-  var buttonFn = jQueryFrameFn("#page\\:mainForm\\:ajaxButton");
+  let timestampFn = testFrameQuerySelectorFn("#page\\:mainForm\\:timestamp span");
+  let textFn = testFrameQuerySelectorFn("#page\\:mainForm\\:outText span");
+  let tipFn = testFrameQuerySelectorFn("#page\\:mainForm\\:outTip span");
+  let buttonFn = testFrameQuerySelectorFn("#page\\:mainForm\\:ajaxButton");
 
-  var timestampValue = timestampFn().text();
-  var textValue = textFn().text();
-  var tipValue = tipFn().attr('title');
+  let timestampValue = timestampFn().textContent;
+  let textValue = textFn().textContent;
+  let tipValue = tipFn().getAttribute('title');
 
-  var TTT = new TobagoTestTool(assert);
+  let TTT = new TobagoTestTool(assert);
   TTT.action(function () {
     buttonFn().click();
   });
   TTT.waitForResponse();
   TTT.asserts(3, function () {
-    assert.notEqual(timestampFn().text(), timestampValue);
-    assert.equal(textFn().text(), textValue);
-    assert.equal(tipFn().attr('title'), tipValue);
+    assert.notEqual(timestampFn().textContent, timestampValue);
+    assert.equal(textFn().textContent, textValue);
+    assert.equal(tipFn().getAttribute('title'), tipValue);
   });
   TTT.startTest();
 });
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/6500-behavior/Behavior.test.js b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/6500-behavior/Behavior.test.js
index 1be0b1a..56833c4 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/6500-behavior/Behavior.test.js
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/6500-behavior/Behavior.test.js
@@ -15,14 +15,14 @@
  * limitations under the License.
  */
 
-import {jQueryFrame, jQueryFrameFn} from "/script/tobago-test.js";
+import {testFrameQuerySelectorAllFn, testFrameQuerySelectorFn} from "/script/tobago-test.js";
 import {TobagoTestTool} from "/tobago/test/tobago-test-tool.js";
 
 QUnit.test("Simple Event", function (assert) {
-  var buttonFn = jQueryFrameFn("#page\\:mainForm\\:simpleEvent");
-  var oldCounterValues = getCounterValues();
+  let buttonFn = testFrameQuerySelectorFn("#page\\:mainForm\\:simpleEvent");
+  let oldCounterValues = getCounterValues();
 
-  var TTT = new TobagoTestTool(assert);
+  let TTT = new TobagoTestTool(assert);
   TTT.action(function () {
     buttonFn().click();
   });
@@ -34,10 +34,10 @@ QUnit.test("Simple Event", function (assert) {
 });
 
 QUnit.test("Simple Ajax", function (assert) {
-  var buttonFn = jQueryFrameFn("#page\\:mainForm\\:simpleAjax");
-  var oldCounterValues = getCounterValues();
+  let buttonFn = testFrameQuerySelectorFn("#page\\:mainForm\\:simpleAjax");
+  let oldCounterValues = getCounterValues();
 
-  var TTT = new TobagoTestTool(assert);
+  let TTT = new TobagoTestTool(assert);
   TTT.action(function () {
     buttonFn().click();
   });
@@ -49,10 +49,10 @@ QUnit.test("Simple Ajax", function (assert) {
 });
 
 QUnit.test("Simple EventAjax", function (assert) {
-  var buttonFn = jQueryFrameFn("#page\\:mainForm\\:simpleEventAjax");
-  var oldCounterValues = getCounterValues();
+  let buttonFn = testFrameQuerySelectorFn("#page\\:mainForm\\:simpleEventAjax");
+  let oldCounterValues = getCounterValues();
 
-  var TTT = new TobagoTestTool(assert);
+  let TTT = new TobagoTestTool(assert);
   TTT.action(function () {
     buttonFn().click();
   });
@@ -64,74 +64,78 @@ QUnit.test("Simple EventAjax", function (assert) {
 });
 
 QUnit.test("Advanced Button: Option 1", function (assert) {
-  var optionFn = jQueryFrameFn("#page\\:mainForm\\:advancedSelector\\:\\:0");
-  var buttonFn = jQueryFrameFn("#page\\:mainForm\\:advancedButton");
-  testEventOption(assert, optionFn, buttonFn, "dblclick", 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0);
+  const optionId = 0; //Event 1 + no Ajax enabled
+  let buttonFn = testFrameQuerySelectorFn("#page\\:mainForm\\:advancedButton");
+  testEventOption(assert, optionId, buttonFn, "dblclick", 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0);
 });
 
 QUnit.test("Advanced Button: Option 2", function (assert) {
-  var optionFn = jQueryFrameFn("#page\\:mainForm\\:advancedSelector\\:\\:1");
-  var buttonFn = jQueryFrameFn("#page\\:mainForm\\:advancedButton");
-
-  testAjaxOption(assert, optionFn, buttonFn, "dblclick", 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 1);
+  const optionId = 1; //Event 2 + Ajax 3 enabled
+  let buttonFn = testFrameQuerySelectorFn("#page\\:mainForm\\:advancedButton");
+  testAjaxOption(assert, optionId, buttonFn, "dblclick", 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 1);
 });
 
 QUnit.test("Advanced Button: Option 3", function (assert) {
-  var optionFn = jQueryFrameFn("#page\\:mainForm\\:advancedSelector\\:\\:2");
-  var buttonFn = jQueryFrameFn("#page\\:mainForm\\:advancedButton");
-  testAjaxOption(assert, optionFn, buttonFn, "click", 1, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1);
+  const optionId = 2; //Event 3 + all Ajax enabled
+  let buttonFn = testFrameQuerySelectorFn("#page\\:mainForm\\:advancedButton");
+  testAjaxOption(assert, optionId, buttonFn, "click", 1, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1);
 });
 
 QUnit.test("Row: Option 1", function (assert) {
-  var optionFn = jQueryFrameFn("#page\\:mainForm\\:advancedSelector\\:\\:0");
-  var rowFn = jQueryFrameFn("#page\\:mainForm\\:sheet\\:0\\:row");
-  testEventOption(assert, optionFn, rowFn, "dblclick", 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0);
+  const optionId = 0; //Event 1 + no Ajax enabled
+  let rowFn = testFrameQuerySelectorFn("#page\\:mainForm\\:sheet\\:0\\:row");
+  testEventOption(assert, optionId, rowFn, "dblclick", 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0);
 });
 
 QUnit.test("Row: Option 2", function (assert) {
-  var optionFn = jQueryFrameFn("#page\\:mainForm\\:advancedSelector\\:\\:1");
-  var rowFn = jQueryFrameFn("#page\\:mainForm\\:sheet\\:0\\:row");
-  testAjaxOption(assert, optionFn, rowFn, "dblclick", 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 1);
+  const optionId = 1; //Event 2 + Ajax 3 enabled
+  let rowFn = testFrameQuerySelectorFn("#page\\:mainForm\\:sheet\\:0\\:row");
+  testAjaxOption(assert, optionId, rowFn, "dblclick", 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 1);
 });
 
 QUnit.test("Row: Option 3", function (assert) {
-  var optionFn = jQueryFrameFn("#page\\:mainForm\\:advancedSelector\\:\\:2");
-  var rowFn = jQueryFrameFn("#page\\:mainForm\\:sheet\\:0\\:row");
-  testAjaxOption(assert, optionFn, rowFn, "click", 0, 0, 0, 0, 1, 0, 0, 1, 1, 1, 1);
+  const optionId = 2; //Event 3 + all Ajax enabled
+  let rowFn = testFrameQuerySelectorFn("#page\\:mainForm\\:sheet\\:0\\:row");
+  testAjaxOption(assert, optionId, rowFn, "click", 0, 0, 0, 0, 1, 0, 0, 1, 1, 1, 1);
 });
 
 QUnit.test("Input: Click Event", function (assert) {
-  var inputFn = jQueryFrameFn("#page\\:mainForm\\:inputClick\\:\\:field");
+  let inputFn = testFrameQuerySelectorFn("#page\\:mainForm\\:inputClick\\:\\:field");
   testInputSection(assert, inputFn, "click");
 });
 
-function testEventOption(assert, optionFn, componentFn, event,
+function testEventOption(assert, optionId, componentFn, eventName,
                          buttonActionPlus, buttonActionListenerPlus,
                          action1Plus, actionListener1Plus, ajaxListener1Plus,
                          action2Plus, actionListener2Plus, ajaxListener2Plus,
                          action3Plus, actionListener3Plus, ajaxListener3Plus) {
-  var hideFn = jQueryFrameFn("#page\\:mainForm\\:hideOperationTextBox");
-  var operationOutFn = jQueryFrameFn("#page\\:mainForm\\:operationOut");
-  var oldCounterValues = getCounterValues();
+  let hideFn = testFrameQuerySelectorFn("#page\\:mainForm\\:hideOperationTextBox");
+  let operationOutFn = testFrameQuerySelectorFn("#page\\:mainForm\\:operationOut");
+  let oldCounterValues = getCounterValues();
+  let optionsFn = testFrameQuerySelectorAllFn("#page\\:mainForm\\:advancedSelector input[type='radio']");
 
-  var TTT = new TobagoTestTool(assert);
+  let TTT = new TobagoTestTool(assert);
   TTT.action(function () {
     hideFn().click();
   });
   TTT.waitForResponse();
   TTT.asserts(1, function () {
-    assert.equal(operationOutFn().length, 0, "Content of operation test box must be hidden.");
+    assert.equal(operationOutFn(), null, "Content of operation test box must be hidden.");
   });
   TTT.action(function () {
-    optionFn().click();
+    optionsFn().item(0).checked = false;
+    optionsFn().item(1).checked = false;
+    optionsFn().item(2).checked = false;
+    optionsFn().item(optionId).checked = true;
+    optionsFn().item(optionId).dispatchEvent(new Event('change'));
   });
   TTT.waitForResponse();
   TTT.action(function () {
-    componentFn().trigger(event);
+    componentFn().dispatchEvent(new Event(eventName));
   });
   TTT.waitForResponse();
   TTT.asserts(12, function () {
-    assert.equal(operationOutFn().length, 1, "Content of operation test box must be shown.");
+    assert.notEqual(operationOutFn(), null, "Content of operation test box must be shown.");
 
     compareCounterValues(assert, oldCounterValues,
         buttonActionPlus, buttonActionListenerPlus,
@@ -142,33 +146,38 @@ function testEventOption(assert, optionFn, componentFn, event,
   TTT.startTest();
 }
 
-function testAjaxOption(assert, optionFn, componentFn, event,
+function testAjaxOption(assert, optionId, componentFn, eventName,
                         buttonActionPlus, buttonActionListenerPlus,
                         action1Plus, actionListener1Plus, ajaxListener1Plus,
                         action2Plus, actionListener2Plus, ajaxListener2Plus,
                         action3Plus, actionListener3Plus, ajaxListener3Plus) {
-  var hideFn = jQueryFrameFn("#page\\:mainForm\\:hideOperationTextBox");
-  var operationOutFn = jQueryFrameFn("#page\\:mainForm\\:operationOut");
-  var oldCounterValues = getCounterValues();
+  let hideFn = testFrameQuerySelectorFn("#page\\:mainForm\\:hideOperationTextBox");
+  let operationOutFn = testFrameQuerySelectorFn("#page\\:mainForm\\:operationOut");
+  let oldCounterValues = getCounterValues();
+  let optionsFn = testFrameQuerySelectorAllFn("#page\\:mainForm\\:advancedSelector input[type='radio']");
 
-  var TTT = new TobagoTestTool(assert);
+  let TTT = new TobagoTestTool(assert);
   TTT.action(function () {
     hideFn().click();
   });
   TTT.waitForResponse();
   TTT.asserts(1, function () {
-    assert.equal(operationOutFn().length, 0, "Content of operation test box must be hidden.");
+    assert.equal(operationOutFn(), null, "Content of operation test box must be hidden.");
   });
   TTT.action(function () {
-    optionFn().click();
+    optionsFn().item(0).checked = false;
+    optionsFn().item(1).checked = false;
+    optionsFn().item(2).checked = false;
+    optionsFn().item(optionId).checked = true;
+    optionsFn().item(optionId).dispatchEvent(new Event('change'));
   });
   TTT.waitForResponse();
   TTT.action(function () {
-    componentFn().trigger(event);
+    componentFn().dispatchEvent(new Event(eventName));
   });
   TTT.waitForResponse();
   TTT.asserts(12, function () {
-    assert.equal(operationOutFn().length, 1, "Content of operation test box must be shown.");
+    assert.notEqual(operationOutFn(), null, "Content of operation test box must be shown.");
 
     compareCounterValues(assert, oldCounterValues,
         buttonActionPlus, buttonActionListenerPlus,
@@ -180,41 +189,42 @@ function testAjaxOption(assert, optionFn, componentFn, event,
 }
 
 function testInputSection(assert, inputFn, eventName) {
-  var hideFn = jQueryFrameFn("#page\\:mainForm\\:hideOperationTextBox");
+  let hideFn = testFrameQuerySelectorFn("#page\\:mainForm\\:hideOperationTextBox");
+  let operationOutFn = testFrameQuerySelectorFn("#page\\:mainForm\\:operationOut");
 
-  var TTT = new TobagoTestTool(assert);
+  let TTT = new TobagoTestTool(assert);
   TTT.action(function () {
     hideFn().click();
   });
   TTT.waitForResponse();
   TTT.asserts(1, function () {
-    assert.ok(isOperationTestBoxCollapsed(), "Content of operation test box must be hidden.");
+    assert.ok(operationOutFn() === null, "Content of operation test box must be hidden.");
   });
   TTT.action(function () {
-    inputFn().trigger(eventName);
+    inputFn().dispatchEvent(new Event(eventName));
   });
   TTT.waitForResponse();
   TTT.asserts(1, function () {
-    assert.notOk(isOperationTestBoxCollapsed(), "Content of operation test box must be shown.");
+    assert.notOk(operationOutFn() === null, "Content of operation test box must be shown.");
   });
   TTT.startTest();
 }
 
 function getCounterValues() {
-  var buttonActionCounter = jQueryFrame("#page\\:mainForm\\:buttonActionCounter.tobago-out").text();
-  var buttonActionListenerCounter = jQueryFrame("#page\\:mainForm\\:buttonActionListenerCounter.tobago-out").text();
+  let buttonActionCounter = testFrameQuerySelectorFn("#page\\:mainForm\\:buttonActionCounter.tobago-out")().textContent;
+  let buttonActionListenerCounter = testFrameQuerySelectorFn("#page\\:mainForm\\:buttonActionListenerCounter.tobago-out")().textContent;
 
-  var actionCount1 = jQueryFrame("#page\\:mainForm\\:actionCounter1.tobago-out").text();
-  var actionListenerCount1 = jQueryFrame("#page\\:mainForm\\:actionListenerCounter1.tobago-out").text();
-  var ajaxListenerCount1 = jQueryFrame("#page\\:mainForm\\:ajaxListenerCounter1.tobago-out").text();
+  let actionCount1 = testFrameQuerySelectorFn("#page\\:mainForm\\:actionCounter1.tobago-out")().textContent;
+  let actionListenerCount1 = testFrameQuerySelectorFn("#page\\:mainForm\\:actionListenerCounter1.tobago-out")().textContent;
+  let ajaxListenerCount1 = testFrameQuerySelectorFn("#page\\:mainForm\\:ajaxListenerCounter1.tobago-out")().textContent;
 
-  var actionCount2 = jQueryFrame("#page\\:mainForm\\:actionCounter2.tobago-out").text();
-  var actionListenerCount2 = jQueryFrame("#page\\:mainForm\\:actionListenerCounter2.tobago-out").text();
-  var ajaxListenerCount2 = jQueryFrame("#page\\:mainForm\\:ajaxListenerCounter2.tobago-out").text();
+  let actionCount2 = testFrameQuerySelectorFn("#page\\:mainForm\\:actionCounter2.tobago-out")().textContent;
+  let actionListenerCount2 = testFrameQuerySelectorFn("#page\\:mainForm\\:actionListenerCounter2.tobago-out")().textContent;
+  let ajaxListenerCount2 = testFrameQuerySelectorFn("#page\\:mainForm\\:ajaxListenerCounter2.tobago-out")().textContent;
 
-  var actionCount3 = jQueryFrame("#page\\:mainForm\\:actionCounter3.tobago-out").text();
-  var actionListenerCount3 = jQueryFrame("#page\\:mainForm\\:actionListenerCounter3.tobago-out").text();
-  var ajaxListenerCount3 = jQueryFrame("#page\\:mainForm\\:ajaxListenerCounter3.tobago-out").text();
+  let actionCount3 = testFrameQuerySelectorFn("#page\\:mainForm\\:actionCounter3.tobago-out")().textContent;
+  let actionListenerCount3 = testFrameQuerySelectorFn("#page\\:mainForm\\:actionListenerCounter3.tobago-out")().textContent;
+  let ajaxListenerCount3 = testFrameQuerySelectorFn("#page\\:mainForm\\:ajaxListenerCounter3.tobago-out")().textContent;
 
   return [buttonActionCounter, buttonActionListenerCounter,
     actionCount1, actionListenerCount1, ajaxListenerCount1,
@@ -227,7 +237,7 @@ function compareCounterValues(assert, oldCounterValues,
                               action1Plus, actionListener1Plus, ajaxListener1Plus,
                               action2Plus, actionListener2Plus, ajaxListener2Plus,
                               action3Plus, actionListener3Plus, ajaxListener3Plus) {
-  var newCounterValues = getCounterValues();
+  let newCounterValues = getCounterValues();
 
   assert.equal(parseInt(newCounterValues[0]), parseInt(oldCounterValues[0]) + buttonActionPlus);
   assert.equal(parseInt(newCounterValues[1]), parseInt(oldCounterValues[1]) + buttonActionListenerPlus);
@@ -241,8 +251,3 @@ function compareCounterValues(assert, oldCounterValues,
   assert.equal(parseInt(newCounterValues[9]), parseInt(oldCounterValues[9]) + actionListener3Plus);
   assert.equal(parseInt(newCounterValues[10]), parseInt(oldCounterValues[10]) + ajaxListener3Plus);
 }
-
-function isOperationTestBoxCollapsed() {
-  var $operationOut = jQueryFrame("#page\\:mainForm\\:operationOut");
-  return $operationOut.length === 0;
-}
diff --git a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/9010-mode-valueIfSet/Mode_ValueIfSet.test.js b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/9010-mode-valueIfSet/Mode_ValueIfSet.test.js
index a38df3e..5e041cf 100644
--- a/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/9010-mode-valueIfSet/Mode_ValueIfSet.test.js
+++ b/tobago-example/tobago-example-demo/src/main/webapp/content/40-test/9010-mode-valueIfSet/Mode_ValueIfSet.test.js
@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import {jQueryFrame} from "/script/tobago-test.js";
+import {testFrameQuerySelectorFn} from "/script/tobago-test.js";
 
 function escapeClientId(clientId) {
   return '#' + clientId.replace(/([:\.])/g, '\\$1');
@@ -26,10 +26,9 @@ QUnit.test("inputfield with label", function (assert) {
   assert.expect(6);
 
   function testValueEquals(id) {
-
-    var $field = jQueryFrame(escapeClientId(id));
-    var $label = jQueryFrame("[for='" + id + "']");
-    assert.equal($field.val(), $label.text());
+    let fieldFn = testFrameQuerySelectorFn(escapeClientId(id));
+    let labelFn = testFrameQuerySelectorFn("[for='" + id + "']");
+    assert.equal(fieldFn().value, labelFn().textContent);
   }
 
   testValueEquals("page:mainForm:direct::field");
@@ -37,7 +36,10 @@ QUnit.test("inputfield with label", function (assert) {
   testValueEquals("page:mainForm:v2::field");
   testValueEquals("page:mainForm:v3::field");
   testValueEquals("page:mainForm:v4::field");
-  testValueEquals("page:mainForm:vu::field");
+
+  const testVuId = "page:mainForm:vu::field";
+  let fieldVuFn = testFrameQuerySelectorFn(escapeClientId(testVuId));
+  assert.equal(fieldVuFn().value, "");
 });
 
 QUnit.test("inputfield with label", function (assert) {
@@ -45,10 +47,9 @@ QUnit.test("inputfield with label", function (assert) {
   assert.expect(2);
 
   function testValueEquals(id) {
-
-    var $field = jQueryFrame(escapeClientId(id));
-    var $label = jQueryFrame("[for='" + id + "']");
-    assert.equal($field.attr("id"), $label.text());
+    let fieldFn = testFrameQuerySelectorFn(escapeClientId(id));
+    let labelFn = testFrameQuerySelectorFn("[for='" + id + "']");
+    assert.equal(fieldFn().id, labelFn().textContent);
   }
 
   testValueEquals("page:mainForm:my_number_1::field");


Mime
View raw message