@json-editor/json-editor 2.9.0 → 2.10.0

package/tests/codeceptjs/editors/autocomplete_test.js

@@ -1,16 +1,14 @@
 /* global Feature Scenario */
 
-var assert = require('assert')
-
 Feature('autocomplete')
 
-Scenario('autocomplete should work @autocomplete', async (I) => {
+Scenario('autocomplete should work @autocomplete', async ({ I }) => {
   I.amOnPage('autocomplete.html')
   I.waitForElement('.je-ready', 10)
   I.fillField('root', 'ir')
-  I.waitForText('iran', 10, '.autocomplete-result-list')
-  I.waitForText('iraq', 10, '.autocomplete-result-list')
+  I.waitForText('iran', 20, '.autocomplete-result-list')
+  I.waitForText('iraq', 20, '.autocomplete-result-list')
   I.click('iraq', '.autocomplete-result:nth-child(2)')
   I.wait(1)
-  assert.equal(await I.grabValueFrom('.value'), '"iraq"')
+  I.waitForValue('.value', '"iraq"')
 })

package/tests/codeceptjs/editors/button_test.js

@@ -1,43 +1,44 @@
-var assert = require('assert');
+/* global Feature Scenario */
+
 const { DEFAULT_WAIT_TIME } = require('../test-config')
 
-Feature('button');
+Feature('button')
 
-Scenario('should work with button editor callbacks', async (I) => {
-  I.amOnPage('button-callbacks.html');
+Scenario('should work with button editor callbacks', async ({ I }) => {
+  I.amOnPage('button-callbacks.html')
   I.waitForElement('.je-ready', DEFAULT_WAIT_TIME)
-  I.seeElement('[data-schemapath="root.button1"] button');
-  I.click('[data-schemapath="root.button1"] button');
-  assert.equal(await I.grabValueFrom('.value'), 'button1CB');
-});
+  I.seeElement('[data-schemapath="root.button1"] button')
+  I.click('[data-schemapath="root.button1"] button')
+  I.waitForValue('.value', 'button1CB')
+})
 
-Scenario('should work with option "validated"', async (I) => {
-  I.amOnPage('button-callbacks.html');
+Scenario('should work with option "validated" @validated', async ({ I }) => {
+  I.amOnPage('button-callbacks.html')
   I.waitForElement('.je-ready', DEFAULT_WAIT_TIME)
-  I.seeElement('[data-schemapath="root.button1"] button');
-  I.retry({ retries: 3, minTimeout: 500 }).seeDisabledAttribute('[data-schemapath="root.button2"] button');
-  await I.fillField('[name="root[textinput]"]', 'Hello World');
-  I.pressKey('Tab');
-  I.dontSeeDisabledAttribute('[data-schemapath="root.button2"] button');
-  I.click('[data-schemapath="root.button2"] button');
-  assert.equal(await I.grabValueFrom('.value'), 'button2CB');
-});
+  I.seeElement('[data-schemapath="root.button1"] button')
+  I.retry({ retries: 3, minTimeout: 500 }).seeDisabledAttribute('[data-schemapath="root.button2"] button')
+  await I.fillField('[name="root[textinput]"]', 'Hello World')
+  I.pressKey('Tab')
+  I.dontSeeDisabledAttribute('[data-schemapath="root.button2"] button')
+  I.click('[data-schemapath="root.button2"] button')
+  I.waitForValue('.value', 'button2CB')
+})
 
-Scenario('should not leave any footprints in result', async (I) => {
-  I.amOnPage('button-callbacks.html');
+Scenario('should not leave any footprints in result', async ({ I }) => {
+  I.amOnPage('button-callbacks.html')
   I.waitForElement('.je-ready', DEFAULT_WAIT_TIME)
-  I.click('.get-value');
-  assert.equal(await I.grabValueFrom('.value'), JSON.stringify({"textinput":""}));
-});
+  I.click('.get-value')
+  I.waitForValue('.value', JSON.stringify({ textinput: '' }))
+})
 
-Scenario('should be disabled if "readonly" is specified', async (I) => {
-  I.amOnPage('read-only.html');
+Scenario('should be disabled if "readonly" is specified', async ({ I }) => {
+  I.amOnPage('read-only.html')
   I.waitForElement('.je-ready', DEFAULT_WAIT_TIME)
-  I.seeDisabledAttribute('[data-schemapath="root.button"] button');
-});
+  I.seeDisabledAttribute('[data-schemapath="root.button"] button')
+})
 
-Scenario('should set icon @button @button-icon', async (I) => {
+Scenario('should set icon @button @button-icon', async ({ I }) => {
   I.amOnPage('button-icons.html')
   I.waitForElement('.je-ready', DEFAULT_WAIT_TIME)
   I.waitForElement('i.fas.fa-search', DEFAULT_WAIT_TIME)
-});
+})

package/tests/codeceptjs/editors/checkbox_test.js

@@ -1,22 +1,23 @@
-var assert = require('assert');
+/* global Feature Scenario */
+
 const { DEFAULT_WAIT_TIME } = require('../test-config')
 
-Feature('checkbox');
+Feature('checkbox')
 
-Scenario('should be disabled if "readonly" is specified', async (I) => {
-  I.amOnPage('read-only.html');
-  I.waitForText('READY', DEFAULT_WAIT_TIME, '.state');
-  I.seeDisabledAttribute('[name="root[checkbox]"]');
-});
+Scenario('should be disabled if "readonly" is specified', async ({ I }) => {
+  I.amOnPage('read-only.html')
+  I.waitForText('READY', DEFAULT_WAIT_TIME, '.state')
+  I.seeDisabledAttribute('[name="root[checkbox]"]')
+})
 
-Scenario('label should be visible for items at top level, but not in tables', async (I) => {
-  I.amOnPage('checkbox-labels.html');
-  I.waitForText('READY', DEFAULT_WAIT_TIME, '.state');
-  I.seeElement('//label[contains(@for, "root[Awesome Compact]")]');
-  I.seeElement('//label[contains(@for, "root[Awesome Not Compact]")]');
-  I.dontSeeElement('//label[contains(@for, "root[pets][0][Awesome in Object Table]")]');
-  I.dontSeeElement('//label[contains(@for, "root[pets][1][Awesome in Object Table]")]');
-  I.dontSeeElement('//label[contains(@for, "root[pets][2][Awesome in Object Table]")]');
-  I.dontSeeElement('//label[contains(@for, "root[pets][3][Awesome in Object Table]")]');
-  I.dontSeeElement('//label[contains(@for, "root[pets][4][Awesome in Object Table]")]');
-});
+Scenario('label should be visible for items at top level, but not in tables', async ({ I }) => {
+  I.amOnPage('checkbox-labels.html')
+  I.waitForText('READY', DEFAULT_WAIT_TIME, '.state')
+  I.seeElement('//label[contains(@for, "root[Awesome Compact]")]')
+  I.seeElement('//label[contains(@for, "root[Awesome Not Compact]")]')
+  I.dontSeeElement('//label[contains(@for, "root[pets][0][Awesome in Object Table]")]')
+  I.dontSeeElement('//label[contains(@for, "root[pets][1][Awesome in Object Table]")]')
+  I.dontSeeElement('//label[contains(@for, "root[pets][2][Awesome in Object Table]")]')
+  I.dontSeeElement('//label[contains(@for, "root[pets][3][Awesome in Object Table]")]')
+  I.dontSeeElement('//label[contains(@for, "root[pets][4][Awesome in Object Table]")]')
+})

package/tests/codeceptjs/editors/colorpicker_test.js

@@ -1,27 +1,29 @@
-var assert = require('assert');
+/* global Feature Scenario */
 
-Feature('colorpicker');
+const assert = require('assert')
 
-Scenario('test ColorPicker Editor  without third party library', async (I) => {
-  I.amOnPage('colorpicker-no-3rd-party.html');
-  I.seeElement('[name="root[colorpicker]');
-  I.click('.get-value');
-  assert.equal(await I.grabValueFrom('.debug'), JSON.stringify({"colorpicker":"#efefef"}));
-});
+Feature('colorpicker')
 
-Scenario('test ColorPicker Editor  using vanilla-picker', async (I) => {
-  I.amOnPage('colorpicker-use-vanilla-picker.html');
-  I.click('.get-value');
-  assert.equal(await I.grabValueFrom('.debug'), JSON.stringify({"colorpicker":"rgba(0,0,0,1)"}));
-  I.click('[data-schemapath="root.colorpicker"]');
-  I.seeElement('[name="root[colorpicker]"]');
+Scenario('test ColorPicker Editor  without third party library', async ({ I }) => {
+  I.amOnPage('colorpicker-no-3rd-party.html')
+  I.seeElement('[name="root[colorpicker]')
+  I.click('.get-value')
+  I.waitForValue('.debug', JSON.stringify({ colorpicker: '#efefef' }))
+})
+
+Scenario('test ColorPicker Editor  using vanilla-picker', async ({ I }) => {
+  I.amOnPage('colorpicker-use-vanilla-picker.html')
+  I.click('.get-value')
+  I.waitForValue('.debug', JSON.stringify({ colorpicker: 'rgba(0,0,0,1)' }))
+  I.click('[data-schemapath="root.colorpicker"]')
+  I.seeElement('[name="root[colorpicker]"]')
   await I.dragAndDrop('[data-schemapath="root.colorpicker"] .picker_wrapper .picker_sl .picker_selector', '[data-schemapath="root.colorpicker"] .picker_wrapper .picker_sl')
   await I.dragAndDrop('[data-schemapath="root.colorpicker"] .picker_wrapper .picker_hue .picker_selector', '[data-schemapath="root.colorpicker"] .picker_wrapper .picker_hue')
   await I.dragAndDrop('[data-schemapath="root.colorpicker"] .picker_wrapper .picker_alpha .picker_selector', '[data-schemapath="root.colorpicker"] .picker_wrapper .picker_alpha')
   I.click('.picker_done button')
   // I.click('.get-value');
-  I.click('.get-value');
+  I.click('.get-value')
   const color = await I.grabValueFrom('.debug')
-  const reg = /\{"colorpicker":"rgba\(6\d,19\d,19\d,0.5\d*\)"\}/;
-  assert.ok(reg.test(color), color + ' match ' + reg);
-});
+  const reg = /\{"colorpicker":"rgba\(6\d,19\d,19\d,0.5\d*\)"\}/
+  assert.ok(reg.test(color), color + ' match ' + reg)
+})

package/tests/codeceptjs/editors/datetime_test.js

@@ -10,24 +10,24 @@ const today = (offset) => {
 
 Feature('datetime')
 
-Scenario('should have correct initial value @datetime', async (I) => {
+Scenario('should have correct initial value @datetime', async ({ I }) => {
   I.amOnPage('datetime.html')
   I.wait(1)
   I.click('#get-value')
-  assert.equal(await I.grabValueFrom('#value'), '{"time":"12:00","date":"' + today() + '","datetimelocal":"' + today() + 'T00:00' + '"}')
+  I.waitForValue('#value', '{"time":"12:00","date":"' + today() + '","datetimelocal":"' + today() + 'T00:00' + '"}')
 })
 
-Scenario('time should have max and min attributes @datetime', async (I) => {
-  assert.equal(await I.grabAttributeFrom('[name="root[time]"]', 'min'), '11:00')
-  assert.equal(await I.grabAttributeFrom('[name="root[time]"]', 'max'), '13:00')
+Scenario('time should have max and min attributes @datetime', async ({ I }) => {
+  assert.strictEqual(await I.grabAttributeFrom('[name="root[time]"]', 'min'), '11:00')
+  assert.strictEqual(await I.grabAttributeFrom('[name="root[time]"]', 'max'), '13:00')
 })
 
-Scenario('date should have max and min attributes @datetime', async (I) => {
-  assert.equal(await I.grabAttributeFrom('[name="root[date]"]', 'min'), '1970-01-01')
-  assert.equal(await I.grabAttributeFrom('[name="root[date]"]', 'max'), '2100-01-01')
+Scenario('date should have max and min attributes @datetime', async ({ I }) => {
+  assert.strictEqual(await I.grabAttributeFrom('[name="root[date]"]', 'min'), '1970-01-01')
+  assert.strictEqual(await I.grabAttributeFrom('[name="root[date]"]', 'max'), '2100-01-01')
 })
 
-Scenario('datetimelocal should have max and min attributes @datetime', async (I) => {
-  assert.equal(await I.grabAttributeFrom('[name="root[datetimelocal]"]', 'min'), '1970-01-01T00:00')
-  assert.equal(await I.grabAttributeFrom('[name="root[datetimelocal]"]', 'max'), '2100-01-01T00:00')
+Scenario('datetimelocal should have max and min attributes @datetime', async ({ I }) => {
+  assert.strictEqual(await I.grabAttributeFrom('[name="root[datetimelocal]"]', 'min'), '1970-01-01T00:00')
+  assert.strictEqual(await I.grabAttributeFrom('[name="root[datetimelocal]"]', 'max'), '2100-01-01T00:00')
 })

package/tests/codeceptjs/editors/inheritance_test.js

@@ -1,11 +1,10 @@
-var assert = require('assert');
+/* global Feature Scenario */
 
-Feature('inheritance');
-
-Scenario('should display all required fields in the allOf hierarchy', async (I) => {
-  I.amOnPage('inheritance.html');
-  I.seeElement('[data-schemapath="root.breed"]');
-  I.seeElement('[data-schemapath="root.numLegs"]');
-  I.seeElement('[data-schemapath="root.id"]');
-});
+Feature('inheritance')
 
+Scenario('should display all required fields in the allOf hierarchy', async ({ I }) => {
+  I.amOnPage('inheritance.html')
+  I.seeElement('[data-schemapath="root.breed"]')
+  I.seeElement('[data-schemapath="root.numLegs"]')
+  I.seeElement('[data-schemapath="root.id"]')
+})

package/tests/codeceptjs/editors/integer_test.js

@@ -1,90 +1,89 @@
-var assert = require('assert');
+/* global Feature Scenario Event */
+
 const { DEFAULT_WAIT_TIME } = require('../test-config')
 
-Feature('integer');
+Feature('integer')
 
-Scenario('should have correct initial value', async (I) => {
-  I.amOnPage('integer.html');
-  I.click('.get-value');
-  assert.equal(await I.grabValueFrom('.value'), '{"integer":5,"integer_number":5,"integer_range":5}');
-});
+Scenario('should have correct initial value', async ({ I }) => {
+  I.amOnPage('integer.html')
+  I.click('.get-value')
+  I.waitForValue('.value', '{"integer":5,"integer_number":5,"integer_range":5}')
+})
 
-Scenario('should respect step by incrementing and decrementing the value of a number', async (I) => {
-  I.amOnPage('integer.html');
-  I.seeElement('[data-schemapath="root.integer"] input');
-  I.executeScript(function() {
-    var range = document.querySelector('[data-schemapath="root.integer_number"] input');
-    range.stepUp();
-    var event = new Event('change', {
-      'bubbles': true,
-      'cancelable': true
-    });
-    range.dispatchEvent(event);
-  });
-  I.click('.get-value');
-  assert.equal(await I.grabValueFrom('.value'), '{"integer":5,"integer_number":10,"integer_range":5}');
-  I.executeScript(function() {
-    var range = document.querySelector('[data-schemapath="root.integer_number"] input');
-    range.stepDown();
-    var event = new Event('change', {
-      'bubbles': true,
-      'cancelable': true
-    });
-    range.dispatchEvent(event);
-  });
-  I.click('.get-value');
-  assert.equal(await I.grabValueFrom('.value'), '{"integer":5,"integer_number":5,"integer_range":5}');
-});
+Scenario('should respect step by incrementing and decrementing the value of a number', async ({ I }) => {
+  I.amOnPage('integer.html')
+  I.seeElement('[data-schemapath="root.integer"] input')
+  I.executeScript(function () {
+    const range = document.querySelector('[data-schemapath="root.integer_number"] input')
+    range.stepUp()
+    const event = new Event('change', {
+      bubbles: true,
+      cancelable: true
+    })
+    range.dispatchEvent(event)
+  })
+  I.click('.get-value')
+  I.waitForValue('.value', '{"integer":5,"integer_number":10,"integer_range":5}')
+  I.executeScript(function () {
+    const range = document.querySelector('[data-schemapath="root.integer_number"] input')
+    range.stepDown()
+    const event = new Event('change', {
+      bubbles: true,
+      cancelable: true
+    })
+    range.dispatchEvent(event)
+  })
+  I.click('.get-value')
+  I.waitForValue('.value', '{"integer":5,"integer_number":5,"integer_range":5}')
+})
 
-Scenario('should respect step by incrementing and decrementing the value of a range', async (I) => {
-  I.amOnPage('integer.html');
-  I.seeElement('[data-schemapath="root.integer_range"] input');
-  I.executeScript(function() {
-    var range = document.querySelector('[data-schemapath="root.integer_range"] input');
-    range.stepUp();
-    var event = new Event('change', {
-      'bubbles': true,
-      'cancelable': true
-    });
-    range.dispatchEvent(event);
-  });
-  I.click('.get-value');
-  assert.equal(await I.grabValueFrom('.value'), '{"integer":5,"integer_number":5,"integer_range":10}');
-  I.executeScript(function() {
-    var range = document.querySelector('[data-schemapath="root.integer_range"] input');
-    range.stepDown();
-    var event = new Event('change', {
-      'bubbles': true,
-      'cancelable': true
-    });
-    range.dispatchEvent(event);
-  });
-  I.click('.get-value');
-  assert.equal(await I.grabValueFrom('.value'), '{"integer":5,"integer_number":5,"integer_range":5}');
-});
+Scenario('should respect step by incrementing and decrementing the value of a range', async ({ I }) => {
+  I.amOnPage('integer.html')
+  I.seeElement('[data-schemapath="root.integer_range"] input')
+  I.executeScript(function () {
+    const range = document.querySelector('[data-schemapath="root.integer_range"] input')
+    range.stepUp()
+    const event = new Event('change', {
+      bubbles: true,
+      cancelable: true
+    })
+    range.dispatchEvent(event)
+  })
+  I.click('.get-value')
+  I.waitForValue('.value', '{"integer":5,"integer_number":5,"integer_range":10}')
+  I.executeScript(function () {
+    const range = document.querySelector('[data-schemapath="root.integer_range"] input')
+    range.stepDown()
+    const event = new Event('change', {
+      bubbles: true,
+      cancelable: true
+    })
+    range.dispatchEvent(event)
+  })
+  I.click('.get-value')
+  I.waitForValue('.value', '{"integer":5,"integer_number":5,"integer_range":5}')
+})
 
-Scenario('should be readonly if specified and not disabled', async (I) => {
-  I.amOnPage('read-only.html');
-  I.seeReadOnlyAttribute('[name="root[integer]"]');
-});
+Scenario('should be readonly if specified and not disabled', async ({ I }) => {
+  I.amOnPage('read-only.html')
+  I.seeReadOnlyAttribute('[name="root[integer]"]')
+})
 
-Scenario('should update output when (method) setValue is called', async (I) => {
-  I.amOnPage('integer.html');
+Scenario('should update output when (method) setValue is called', async ({ I }) => {
+  I.amOnPage('integer.html')
   I.saveScreenshot('integer-setvalue-1.png')
-  I.waitForText('5', DEFAULT_WAIT_TIME, '[data-schemapath="root.integer_range"] output');
+  I.waitForText('5', DEFAULT_WAIT_TIME, '[data-schemapath="root.integer_range"] output')
   I.saveScreenshot('integer-setvalue-2.png')
-  I.click('.set-value');
+  I.click('.set-value')
   I.saveScreenshot('integer-setvalue-3.png')
-  I.waitForText('2', DEFAULT_WAIT_TIME, '[data-schemapath="root.integer_range"] output');
+  I.waitForText('2', DEFAULT_WAIT_TIME, '[data-schemapath="root.integer_range"] output')
   I.saveScreenshot('integer-setvalue-4.png')
-});
-
-Scenario('should validate value', async (I) => {
-  I.amOnPage('integer.html');
-  await I.fillField('[name="root[integer]"]', '5-5');
-  I.click('.get-value');
-  I.see('Value must be of type integer.', '[data-schemapath="root.integer"] div');
-  assert.equal(await I.grabValueFrom('.value'), '{"integer":"5-5","integer_number":5,"integer_range":5}');
-});
-
+})
 
+Scenario('should validate value', async ({ I }) => {
+  I.amOnPage('integer.html')
+  await I.fillField('[name="root[integer]"]', '5-5')
+  I.click('.get-value')
+  I.see('Value must be of type integer.', '[data-schemapath="root.integer"] div')
+  I.waitForValue('.value', '{"integer":"5-5","integer_number":5,"integer_range":5}')
+})

package/tests/codeceptjs/editors/jodit_test.js

@@ -1,24 +1,23 @@
-var assert = require('assert');
+/* global Feature Scenario */
 
-Feature('jodit');
+Feature('jodit')
 
-Scenario('should have correct initial value', async (I) => {
-  I.amOnPage('string-jodit-editor.html');
-  I.click('.get-value');
-  assert.equal(await I.grabValueFrom('.debug'), '[]');
-});
+Scenario('should have correct initial value', async ({ I }) => {
+  I.amOnPage('string-jodit-editor.html')
+  I.click('.get-value')
+  I.waitForValue('.debug', '[]')
+})
 
-Scenario('should have coerent values', async (I) => {
-  I.amOnPage('string-jodit-editor.html');
-  I.click('Add item');
-  I.see('item 1');
-  I.seeElement('.jodit-wysiwyg_mode');
+Scenario('should have coerent values', async ({ I }) => {
+  I.amOnPage('string-jodit-editor.html')
+  I.click('Add item')
+  I.see('item 1')
+  I.seeElement('.jodit-wysiwyg_mode')
 
-  I.click('.jodit-toolbar-button_bold button');
-  I.pressKeys('__JODIT__');
-  I.see('__JODIT__');
+  I.click('.jodit-toolbar-button_bold button')
+  I.pressKeys('__JODIT__')
+  I.see('__JODIT__')
 
-  I.click('.get-value');
-  assert.equal(await I.grabValueFrom('.debug'), JSON.stringify([{"editor":"<p><strong>__JODIT__</strong><br></p>"}]));
-
-});
+  I.click('.get-value')
+  I.waitForValue('.debug', JSON.stringify([{ editor: '<p><strong>__JODIT__</strong><br></p>' }]))
+})

package/tests/codeceptjs/editors/multiselect_test.js

@@ -1,8 +1,8 @@
-var assert = require('assert');
+/* global Feature Scenario */
 
-Feature('multiselect');
+Feature('multiselect')
 
-Scenario('should be disabled if "readonly" is specified', async (I) => {
-  I.amOnPage('read-only.html');
-  I.seeDisabledAttribute('[name="root[multiselect]"]');
-});
+Scenario('should be disabled if "readonly" is specified', async ({ I }) => {
+  I.amOnPage('read-only.html')
+  I.seeDisabledAttribute('[name="root[multiselect]"]')
+})

package/tests/codeceptjs/editors/number_test.js

@@ -1,83 +1,84 @@
-var assert = require('assert');
+/* global Feature Scenario Event */
+
 const { DEFAULT_WAIT_TIME } = require('../test-config')
 
-Feature('number');
+Feature('number')
 
-Scenario('should have correct initial value', async (I) => {
-  I.amOnPage('number.html');
-  I.click('.get-value');
-  assert.equal(await I.grabValueFrom('.value'), '{"number":5.75,"number_number":5.75,"number_range":5.75}');
-});
+Scenario('should have correct initial value @number', async ({ I }) => {
+  I.amOnPage('number.html')
+  I.click('.get-value')
+  I.waitForValue('.value', '{"number":5.75,"number_number":5.75,"number_range":5.75,"stepper_number_default":5,"stepper_integer_default":5}')
+})
 
-Scenario('should validate value', async (I) => {
-  I.amOnPage('number.html');
-  await I.fillField('[name="root[number]"]', '12-12');
-  I.click('.get-value');
-  I.waitForText('Value must be of type number.', DEFAULT_WAIT_TIME, '[data-schemapath="root.number"] .invalid-feedback');
-  assert.equal(await I.grabValueFrom('.value'), '{"number":"12-12","number_number":5.75,"number_range":5.75}');
-});
+Scenario('should validate value @number', async ({ I }) => {
+  I.amOnPage('number.html')
+  await I.fillField('[name="root[number]"]', '12-12')
+  I.click('.get-value')
+  I.waitForText('Value must be of type number.', DEFAULT_WAIT_TIME, '[data-schemapath="root.number"] .invalid-feedback')
+  I.waitForValue('.value', '{"number":"12-12","number_number":5.75,"number_range":5.75,"stepper_number_default":5,"stepper_integer_default":5}')
+})
 
-Scenario('should respect step by incrementing and decrementing the value of a number', async (I) => {
-  I.amOnPage('number.html');
-  I.seeElement('[data-schemapath="root.number_number"] input');
-  I.executeScript(function() {
-    var range = document.querySelector('[data-schemapath="root.number_number"] input');
-    range.stepUp();
+Scenario('should respect step by incrementing and decrementing the value of a  @number', async ({ I }) => {
+  I.amOnPage('number.html')
+  I.seeElement('[data-schemapath="root.number_number"] input')
+  I.executeScript(function () {
+    var range = document.querySelector('[data-schemapath="root.number_number"] input')
+    range.stepUp()
     var event = new Event('change', {
-      'bubbles': true,
-      'cancelable': true
-    });
-    range.dispatchEvent(event);
-  });
-  I.click('.get-value');
-  assert.equal(await I.grabValueFrom('.value'), '{"number":5.75,"number_number":6,"number_range":5.75}');
-  I.executeScript(function() {
-    var range = document.querySelector('[data-schemapath="root.number_number"] input');
-    range.stepDown();
+      bubbles: true,
+      cancelable: true
+    })
+    range.dispatchEvent(event)
+  })
+  I.click('.get-value')
+  I.waitForValue('.value', '{"number":5.75,"number_number":6,"number_range":5.75,"stepper_number_default":5,"stepper_integer_default":5}')
+  I.executeScript(function () {
+    var range = document.querySelector('[data-schemapath="root.number_number"] input')
+    range.stepDown()
     var event = new Event('change', {
-      'bubbles': true,
-      'cancelable': true
-    });
-    range.dispatchEvent(event);
-  });
-  I.click('.get-value');
-  assert.equal(await I.grabValueFrom('.value'), '{"number":5.75,"number_number":5.75,"number_range":5.75}');
-});
+      bubbles: true,
+      cancelable: true
+    })
+    range.dispatchEvent(event)
+  })
+  I.click('.get-value')
+  I.waitForValue('.value', '{"number":5.75,"number_number":5.75,"number_range":5.75,"stepper_number_default":5,"stepper_integer_default":5}')
+})
 
-Scenario('should respect step by incrementing and decrementing the value of a range', async (I) => {
-  I.amOnPage('number.html');
-  I.seeElement('[data-schemapath="root.number_range"] input');
-  I.executeScript(function() {
-    var range = document.querySelector('[data-schemapath="root.number_range"] input');
-    range.stepUp();
+Scenario('should respect step by incrementing and decrementing the value of a range @number', async ({ I }) => {
+  I.amOnPage('number.html')
+  I.seeElement('[data-schemapath="root.number_range"] input')
+  I.executeScript(function () {
+    var range = document.querySelector('[data-schemapath="root.number_range"] input')
+    range.stepUp()
     var event = new Event('change', {
-      'bubbles': true,
-      'cancelable': true
-    });
-    range.dispatchEvent(event);
-  });
-  I.click('.get-value');
-  assert.equal(await I.grabValueFrom('.value'), '{"number":5.75,"number_number":5.75,"number_range":6}');
-  I.executeScript(function() {
-    var range = document.querySelector('[data-schemapath="root.number_range"] input');
-    range.stepDown();
+      bubbles: true,
+      cancelable: true
+    })
+    range.dispatchEvent(event)
+  })
+  I.click('.get-value')
+  I.waitForValue('.value', '{"number":5.75,"number_number":5.75,"number_range":6,"stepper_number_default":5,"stepper_integer_default":5}')
+  I.executeScript(function () {
+    var range = document.querySelector('[data-schemapath="root.number_range"] input')
+    range.stepDown()
     var event = new Event('change', {
-      'bubbles': true,
-      'cancelable': true
-    });
-    range.dispatchEvent(event);
-  });
-  I.click('.get-value');
-  assert.equal(await I.grabValueFrom('.value'), '{"number":5.75,"number_number":5.75,"number_range":5.75}');
-});
+      bubbles: true,
+      cancelable: true
+    })
+    range.dispatchEvent(event)
+  })
+  I.click('.get-value')
+  I.waitForValue('.value', '{"number":5.75,"number_number":5.75,"number_range":5.75,"stepper_number_default":5,"stepper_integer_default":5}')
+})
 
-Scenario('should be readonly if specified and not disabled', async (I) => {
-  I.amOnPage('read-only.html');
-  I.seeReadOnlyAttribute('[name="root[number]"]');
-});
+Scenario('should be readonly if specified and not disabled @number', async ({ I }) => {
+  I.amOnPage('read-only.html')
+  I.seeReadOnlyAttribute('[name="root[number]"]')
+})
 
-Scenario('should update output when setValue is called', async (I) => {
-  I.amOnPage('number.html');
-  I.click('.set-value');
-  I.see('2', '[data-schemapath="root.number_range"] output');
-});
+Scenario('should update output when setValue is called @number', async ({ I }) => {
+  I.amOnPage('number.html')
+  I.click('.set-value')
+  I.see('2', '[data-schemapath="root.number_range"] output')
+})