diff --git a/core/modules/field/src/Tests/FormTest.php b/core/modules/field/src/Tests/FormTest.php
index ff1b3ee67b..786e367d41 100644
--- a/core/modules/field/src/Tests/FormTest.php
+++ b/core/modules/field/src/Tests/FormTest.php
@@ -389,62 +389,6 @@ public function testFieldFormMultivalueWithRequiredRadio() {
     $this->assertNoField("{$field_name}[2][value]", 'No extraneous widget is displayed');
   }
 
-  public function testFieldFormJSAddMore() {
-    $field_storage = $this->fieldStorageUnlimited;
-    $field_name = $field_storage['field_name'];
-    $this->field['field_name'] = $field_name;
-    FieldStorageConfig::create($field_storage)->save();
-    FieldConfig::create($this->field)->save();
-    entity_get_form_display($this->field['entity_type'], $this->field['bundle'], 'default')
-      ->setComponent($field_name)
-      ->save();
-
-    // Display creation form -> 1 widget.
-    $this->drupalGet('entity_test/add');
-
-    // Press 'add more' button a couple times -> 3 widgets.
-    // drupalPostAjaxForm() will not work iteratively, so we add those through
-    // non-JS submission.
-    $this->drupalPostForm(NULL, [], t('Add another item'));
-    $this->drupalPostForm(NULL, [], t('Add another item'));
-
-    // Prepare values and weights.
-    $count = 3;
-    $delta_range = $count - 1;
-    $values = $weights = $pattern = $expected_values = $edit = [];
-    for ($delta = 0; $delta <= $delta_range; $delta++) {
-      // Assign unique random values and weights.
-      do {
-        $value = mt_rand(1, 127);
-      } while (in_array($value, $values));
-      do {
-        $weight = mt_rand(-$delta_range, $delta_range);
-      } while (in_array($weight, $weights));
-      $edit["{$field_name}[$delta][value]"] = $value;
-      $edit["{$field_name}[$delta][_weight]"] = $weight;
-      // We'll need three slightly different formats to check the values.
-      $values[$delta] = $value;
-      $weights[$delta] = $weight;
-      $field_values[$weight]['value'] = (string) $value;
-      $pattern[$weight] = "<input [^>]*value=\"$value\" [^>]*";
-    }
-    // Press 'add more' button through Ajax, and place the expected HTML result
-    // as the tested content.
-    $commands = $this->drupalPostAjaxForm(NULL, $edit, $field_name . '_add_more');
-    $this->setRawContent($commands[2]['data']);
-
-    for ($delta = 0; $delta <= $delta_range; $delta++) {
-      $this->assertFieldByName("{$field_name}[$delta][value]", $values[$delta], "Widget $delta is displayed and has the right value");
-      $this->assertFieldByName("{$field_name}[$delta][_weight]", $weights[$delta], "Widget $delta has the right weight");
-    }
-    ksort($pattern);
-    $pattern = implode('.*', array_values($pattern));
-    $this->assertPattern("|$pattern|s", 'Widgets are displayed in the correct order');
-    $this->assertFieldByName("{$field_name}[$delta][value]", '', "New widget is displayed");
-    $this->assertFieldByName("{$field_name}[$delta][_weight]", $delta, "New widget has the right weight");
-    $this->assertNoField("{$field_name}[" . ($delta + 1) . '][value]', 'No extraneous widget is displayed');
-  }
-
   /**
    * Tests widgets handling multiple values.
    */
diff --git a/core/modules/field/tests/src/FunctionalJavascript/FormJSAddMoreTest.php b/core/modules/field/tests/src/FunctionalJavascript/FormJSAddMoreTest.php
new file mode 100644
index 0000000000..64ee24d469
--- /dev/null
+++ b/core/modules/field/tests/src/FunctionalJavascript/FormJSAddMoreTest.php
@@ -0,0 +1,123 @@
+<?php
+
+namespace Drupal\Tests\field\FunctionalJavascript;
+
+use Drupal\Core\Entity\Entity\EntityFormDisplay;
+use Drupal\Core\Field\FieldStorageDefinitionInterface;
+use Drupal\field\Entity\FieldConfig;
+use Drupal\field\Entity\FieldStorageConfig;
+use Drupal\FunctionalJavascriptTests\JavascriptTestBase;
+
+/**
+ * Tests add more behavior for a multiple value field.
+ *
+ * @group field
+ */
+class FormJSAddMoreTest extends JavascriptTestBase {
+
+  /**
+   * {@inheritdoc}
+   */
+  public static $modules = ['field_test', 'entity_test'];
+
+  /**
+   * {@inheritdoc}
+   */
+  protected function setUp() {
+    parent::setUp();
+
+    $account = $this->drupalCreateUser([
+      'view test entity',
+      'administer entity_test content',
+    ]);
+    $this->drupalLogin($account);
+
+    $field = [
+      'field_name' => 'field_unlimited',
+      'entity_type' => 'entity_test',
+      'bundle' => 'entity_test',
+      'label' => $this->randomMachineName() . '_label',
+      'description' => '[site:name]_description',
+      'weight' => mt_rand(0, 127),
+      'settings' => [
+        'test_field_setting' => $this->randomMachineName(),
+      ],
+    ];
+
+    FieldStorageConfig::create([
+      'field_name' => 'field_unlimited',
+      'entity_type' => 'entity_test',
+      'type' => 'test_field',
+      'cardinality' => FieldStorageDefinitionInterface::CARDINALITY_UNLIMITED,
+    ])->save();
+    FieldConfig::create($field)->save();
+
+    $entity_form_display = EntityFormDisplay::load($field['entity_type'] . '.' . $field['bundle'] . '.default');
+    $entity_form_display->setComponent($field['field_name'])->save();
+  }
+
+  /**
+   * Tests the 'Add more' functionality.
+   */
+  public function testFieldFormJsAddMore() {
+    $this->drupalGet('entity_test/add');
+
+    $assert_session = $this->assertSession();
+    $page = $this->getSession()->getPage();
+    $add_more_button = $page->findButton('field_unlimited_add_more');
+
+    // First set a value on the first input field.
+    $field_0 = $page->findField('field_unlimited[0][value]');
+    $field_0->setValue('1');
+
+    // Add another item.
+    $add_more_button->click();
+    $field_1 = $assert_session->waitForField('field_unlimited[1][value]');
+    $this->assertNotEmpty($field_1, 'Successfully added another item.');
+
+    // Validate the value of the first field has not changed.
+    $this->assertEquals('1', $field_0->getValue(), 'Value for the first item has not changed.');
+
+    // Validate the value of the second item is empty.
+    $this->assertEmpty($field_1->getValue(), 'Value for the second item is currently empty.');
+
+    // Add another item.
+    $add_more_button->click();
+    $field_2 = $assert_session->waitForField('field_unlimited[2][value]');
+    $this->assertNotEmpty($field_2, 'Successfully added another item.');
+
+    // Set values for the 2nd and 3rd fields to validate dragging.
+    $field_1->setValue('2');
+    $field_2->setValue('3');
+
+    $field_weight_0 = $page->findField('field_unlimited[0][_weight]');
+    $field_weight_1 = $page->findField('field_unlimited[1][_weight]');
+    $field_weight_2 = $page->findField('field_unlimited[2][_weight]');
+
+    // Assert starting situation matches expectations.
+    $this->assertGreaterThan($field_weight_0->getValue(), $field_weight_1->getValue());
+    $this->assertGreaterThan($field_weight_1->getValue(), $field_weight_2->getValue());
+
+    // Drag the first row after the third row.
+    $dragged = $field_0->find('xpath', 'ancestor::tr[contains(@class, "draggable")]//a[@class="tabledrag-handle"]');
+    $target = $field_2->find('xpath', 'ancestor::tr[contains(@class, "draggable")]');
+    $dragged->dragTo($target);
+
+    // Assert the order of items is updated correctly after dragging.
+    $this->assertGreaterThan($field_weight_2->getValue(), $field_weight_0->getValue());
+    $this->assertGreaterThan($field_weight_1->getValue(), $field_weight_2->getValue());
+
+    // Validate the order of items conforms to the last drag action after a
+    // updating the form via the server.
+    $add_more_button->click();
+    $field_3 = $assert_session->waitForField('field_unlimited[3][value]');
+    $this->assertNotEmpty($field_3);
+    $this->assertGreaterThan($field_weight_2->getValue(), $field_weight_0->getValue());
+    $this->assertGreaterThan($field_weight_1->getValue(), $field_weight_2->getValue());
+
+    // Validate no extraneous widget is displayed.
+    $element = $page->findField('field_unlimited[4][value]');
+    $this->assertEmpty($element);
+  }
+
+}