first commit

core/tests/Drupal/FunctionalJavascriptTests/Ajax/AjaxCallbacksTest.php

@@ -0,0 +1,51 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Drupal\FunctionalJavascriptTests\Ajax;
+
+use Drupal\FunctionalJavascriptTests\WebDriverTestBase;
+
+/**
+ * Tests Ajax callbacks on FAPI elements.
+ *
+ * @group Ajax
+ */
+class AjaxCallbacksTest extends WebDriverTestBase {
+
+  /**
+   * {@inheritdoc}
+   */
+  protected static $modules = ['ajax_forms_test'];
+
+  /**
+   * {@inheritdoc}
+   */
+  protected $defaultTheme = 'stark';
+
+  /**
+   * Tests if Ajax callback works on date element.
+   */
+  public function testDateAjaxCallback(): void {
+
+    // Test Ajax callback when date changes.
+    $this->drupalGet('ajax_forms_test_ajax_element_form');
+    $this->assertNotEmpty($this->getSession()->getPage()->find('xpath', '//div[@id="ajax_date_value"][text()="No date yet selected"]'));
+    $this->getSession()->executeScript('jQuery("[data-drupal-selector=edit-date]").val("2016-01-01").trigger("change");');
+    $this->assertNotEmpty($this->assertSession()->waitForElement('xpath', '//div[@id="ajax_date_value"]/div[text()="2016-01-01"]'));
+  }
+
+  /**
+   * Tests if Ajax callback works on datetime element.
+   */
+  public function testDateTimeAjaxCallback(): void {
+
+    // Test Ajax callback when datetime changes.
+    $this->drupalGet('ajax_forms_test_ajax_element_form');
+    $this->assertNotEmpty($this->getSession()->getPage()->find('xpath', '//div[@id="ajax_datetime_value"][text()="No datetime selected."]'));
+    $this->getSession()->executeScript('jQuery("[data-drupal-selector=edit-datetime-date]").val("2016-01-01");');
+    $this->getSession()->executeScript('jQuery("[data-drupal-selector=edit-datetime-time]").val("12:00:00").trigger("change");');
+    $this->assertNotEmpty($this->assertSession()->waitForElement('xpath', '//div[@id="ajax_datetime_value"]/div[text()="2016-01-01 12:00:00"]'));
+  }
+
+}

core/tests/Drupal/FunctionalJavascriptTests/Ajax/AjaxFormCacheTest.php

@@ -0,0 +1,110 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Drupal\FunctionalJavascriptTests\Ajax;
+
+use Drupal\Core\Url;
+use Drupal\FunctionalJavascriptTests\WebDriverTestBase;
+
+/**
+ * Tests the usage of form caching for AJAX forms.
+ *
+ * @group Ajax
+ */
+class AjaxFormCacheTest extends WebDriverTestBase {
+
+  /**
+   * {@inheritdoc}
+   */
+  protected static $modules = ['ajax_test', 'ajax_forms_test'];
+
+  /**
+   * {@inheritdoc}
+   */
+  protected $defaultTheme = 'stark';
+
+  /**
+   * Tests the usage of form cache for AJAX forms.
+   */
+  public function testFormCacheUsage(): void {
+    /** @var \Drupal\Core\KeyValueStore\KeyValueStoreExpirableInterface $key_value_expirable */
+    $key_value_expirable = \Drupal::service('keyvalue.expirable')->get('form');
+    $this->drupalLogin($this->rootUser);
+
+    // Ensure that the cache is empty.
+    $this->assertCount(0, $key_value_expirable->getAll());
+
+    // Visit an AJAX form that is not cached, 3 times.
+    $uncached_form_url = Url::fromRoute('ajax_forms_test.commands_form');
+    $this->drupalGet($uncached_form_url);
+    $this->drupalGet($uncached_form_url);
+    $this->drupalGet($uncached_form_url);
+
+    // The number of cache entries should not have changed.
+    $this->assertCount(0, $key_value_expirable->getAll());
+  }
+
+  /**
+   * Tests AJAX forms in blocks.
+   */
+  public function testBlockForms(): void {
+    $this->container->get('module_installer')->install(['block', 'search']);
+    $this->rebuildContainer();
+    $this->drupalLogin($this->rootUser);
+
+    $this->drupalPlaceBlock('search_form_block', ['weight' => -5]);
+    $this->drupalPlaceBlock('ajax_forms_test_block');
+
+    $this->drupalGet('');
+    $session = $this->getSession();
+
+    // Select first option and trigger ajax update.
+    $session->getPage()->selectFieldOption('edit-test1', 'option1');
+
+    // DOM update: The InsertCommand in the AJAX response changes the text
+    // in the option element to 'Option1!!!'.
+    $opt1_selector = $this->assertSession()->waitForElement('css', "select[data-drupal-selector='edit-test1'] option:contains('Option 1!!!')");
+    $this->assertNotEmpty($opt1_selector);
+    $this->assertTrue($opt1_selector->isSelected());
+
+    // Confirm option 3 exists.
+    $page = $session->getPage();
+    $opt3_selector = $page->find('xpath', '//select[@data-drupal-selector="edit-test1"]//option[@value="option3"]');
+    $this->assertNotEmpty($opt3_selector);
+
+    // Confirm success message appears after a submit.
+    $page->findButton('edit-submit')->click();
+    $this->assertSession()->waitForButton('edit-submit');
+    $updated_page = $session->getPage();
+    $updated_page->hasContent('Submission successful.');
+  }
+
+  /**
+   * Tests AJAX forms on pages with a query string.
+   */
+  public function testQueryString(): void {
+    $this->container->get('module_installer')->install(['block']);
+    $this->drupalLogin($this->rootUser);
+
+    $this->drupalPlaceBlock('ajax_forms_test_block');
+
+    $url = Url::fromRoute('entity.user.canonical', ['user' => $this->rootUser->id()], ['query' => ['foo' => 'bar']]);
+    $this->drupalGet($url);
+
+    $session = $this->getSession();
+    // Select first option and trigger ajax update.
+    $session->getPage()->selectFieldOption('edit-test1', 'option1');
+
+    // DOM update: The InsertCommand in the AJAX response changes the text
+    // in the option element to 'Option1!!!'.
+    $opt1_selector = $this->assertSession()->waitForElement('css', "option:contains('Option 1!!!')");
+    $this->assertNotEmpty($opt1_selector);
+
+    $url->setOption('query', [
+      'foo' => 'bar',
+    ]);
+    $this->assertSession()->addressEquals($url);
+  }
+
+}

core/tests/Drupal/FunctionalJavascriptTests/Ajax/AjaxFormImageButtonTest.php

@@ -0,0 +1,56 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Drupal\FunctionalJavascriptTests\Ajax;
+
+use Drupal\FunctionalJavascriptTests\WebDriverTestBase;
+
+/**
+ * Tests the Ajax image buttons work with key press events.
+ *
+ * @group Ajax
+ */
+class AjaxFormImageButtonTest extends WebDriverTestBase {
+
+  /**
+   * {@inheritdoc}
+   */
+  protected static $modules = ['ajax_forms_test'];
+
+  /**
+   * {@inheritdoc}
+   */
+  protected $defaultTheme = 'stark';
+
+  /**
+   * Tests image buttons can be operated with the keyboard ENTER key.
+   */
+  public function testAjaxImageButtonKeypressEnter(): void {
+    // Get a Field UI manage-display page.
+    $this->drupalGet('ajax_forms_image_button_form');
+    $assertSession = $this->assertSession();
+    $session = $this->getSession();
+
+    $button = $session->getPage()->findButton('Edit');
+    $button->keyPress(13);
+
+    $this->assertNotEmpty($assertSession->waitForElementVisible('css', '#ajax-1-more-div'), 'Page updated after image button pressed');
+  }
+
+  /**
+   * Tests image buttons can be operated with the keyboard SPACE key.
+   */
+  public function testAjaxImageButtonKeypressSpace(): void {
+    // Get a Field UI manage-display page.
+    $this->drupalGet('ajax_forms_image_button_form');
+    $assertSession = $this->assertSession();
+    $session = $this->getSession();
+
+    $button = $session->getPage()->findButton('Edit');
+    $button->keyPress(32);
+
+    $this->assertNotEmpty($assertSession->waitForElementVisible('css', '#ajax-1-more-div'), 'Page updated after image button pressed');
+  }
+
+}

core/tests/Drupal/FunctionalJavascriptTests/Ajax/AjaxFormPageCacheTest.php

@@ -0,0 +1,134 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Drupal\FunctionalJavascriptTests\Ajax;
+
+use Drupal\FunctionalJavascriptTests\WebDriverTestBase;
+
+/**
+ * Performs tests on AJAX forms in cached pages.
+ *
+ * @group Ajax
+ */
+class AjaxFormPageCacheTest extends WebDriverTestBase {
+
+  /**
+   * {@inheritdoc}
+   */
+  protected static $modules = ['ajax_test', 'ajax_forms_test'];
+
+  /**
+   * {@inheritdoc}
+   */
+  protected $defaultTheme = 'stark';
+
+  /**
+   * {@inheritdoc}
+   */
+  protected function setUp(): void {
+    parent::setUp();
+
+    $config = $this->config('system.performance');
+    $config->set('cache.page.max_age', 300);
+    $config->save();
+  }
+
+  /**
+   * Return the build id of the current form.
+   */
+  protected function getFormBuildId() {
+    // Ensure the hidden 'form_build_id' field is unique.
+    $this->assertSession()->elementsCount('xpath', '//input[@name="form_build_id"]', 1);
+    return $this->assertSession()->hiddenFieldExists('form_build_id')->getValue();
+  }
+
+  /**
+   * Create a simple form, then submit the form via AJAX to change to it.
+   */
+  public function testSimpleAJAXFormValue(): void {
+    $this->drupalGet('ajax_forms_test_get_form');
+    $build_id_initial = $this->getFormBuildId();
+
+    // Changing the value of a select input element, triggers an AJAX
+    // request/response. The callback on the form responds with three AJAX
+    // commands:
+    // - UpdateBuildIdCommand
+    // - HtmlCommand
+    // - DataCommand
+    $session = $this->getSession();
+    $session->getPage()->selectFieldOption('select', 'green');
+
+    // Wait for the DOM to update. The HtmlCommand will update
+    // #ajax_selected_color to reflect the color change.
+    $green_span = $this->assertSession()->waitForElement('css', "#ajax_selected_color:contains('green')");
+    $this->assertNotNull($green_span, 'DOM update: The selected color SPAN is green.');
+
+    // Confirm the operation of the UpdateBuildIdCommand.
+    $build_id_first_ajax = $this->getFormBuildId();
+    $this->assertNotEquals($build_id_initial, $build_id_first_ajax, 'Build id is changed in the form_build_id element on first AJAX submission');
+
+    // Changing the value of a select input element, triggers an AJAX
+    // request/response.
+    $session->getPage()->selectFieldOption('select', 'red');
+
+    // Wait for the DOM to update.
+    $red_span = $this->assertSession()->waitForElement('css', "#ajax_selected_color:contains('red')");
+    $this->assertNotNull($red_span, 'DOM update: The selected color SPAN is red.');
+
+    // Confirm the operation of the UpdateBuildIdCommand.
+    $build_id_second_ajax = $this->getFormBuildId();
+    $this->assertNotEquals($build_id_first_ajax, $build_id_second_ajax, 'Build id changes on subsequent AJAX submissions');
+
+    // Emulate a push of the reload button and then repeat the test sequence
+    // this time with a page loaded from the cache.
+    $session->reload();
+    $build_id_from_cache_initial = $this->getFormBuildId();
+    $this->assertEquals($build_id_initial, $build_id_from_cache_initial, 'Build id is the same as on the first request');
+
+    // Changing the value of a select input element, triggers an AJAX
+    // request/response.
+    $session->getPage()->selectFieldOption('select', 'green');
+
+    // Wait for the DOM to update.
+    $green_span2 = $this->assertSession()->waitForElement('css', "#ajax_selected_color:contains('green')");
+    $this->assertNotNull($green_span2, 'DOM update: After reload - the selected color SPAN is green.');
+
+    $build_id_from_cache_first_ajax = $this->getFormBuildId();
+    $this->assertNotEquals($build_id_from_cache_initial, $build_id_from_cache_first_ajax, 'Build id is changed in the DOM on first AJAX submission');
+    $this->assertNotEquals($build_id_first_ajax, $build_id_from_cache_first_ajax, 'Build id from first user is not reused');
+
+    // Changing the value of a select input element, triggers an AJAX
+    // request/response.
+    $session->getPage()->selectFieldOption('select', 'red');
+
+    // Wait for the DOM to update.
+    $red_span2 = $this->assertSession()->waitForElement('css', "#ajax_selected_color:contains('red')");
+    $this->assertNotNull($red_span2, 'DOM update: After reload - the selected color SPAN is red.');
+
+    $build_id_from_cache_second_ajax = $this->getFormBuildId();
+    $this->assertNotEquals($build_id_from_cache_first_ajax, $build_id_from_cache_second_ajax, 'Build id changes on subsequent AJAX submissions');
+
+  }
+
+  /**
+   * Tests that updating the text field trigger an AJAX request/response.
+   *
+   * @see \Drupal\system\Tests\Ajax\ElementValidationTest::testAjaxElementValidation()
+   */
+  public function testAjaxElementValidation(): void {
+    $this->drupalGet('ajax_validation_test');
+    // Changing the value of the textfield will trigger an AJAX
+    // request/response.
+    $field = $this->getSession()->getPage()->findField('driver_text');
+    $field->setValue('some dumb text');
+    $field->blur();
+
+    // When the AJAX command updates the DOM a <ul> unsorted list
+    // "message__list" structure will appear on the page echoing back the
+    // "some dumb text" message.
+    $placeholder = $this->assertSession()->waitForElement('css', "[aria-label='Status message'] > ul > li > em:contains('some dumb text')");
+    $this->assertNotNull($placeholder, 'Message structure containing input data located.');
+  }
+
+}

core/tests/Drupal/FunctionalJavascriptTests/Ajax/AjaxInGroupTest.php

@@ -0,0 +1,64 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Drupal\FunctionalJavascriptTests\Ajax;
+
+use Drupal\FunctionalJavascriptTests\WebDriverTestBase;
+
+/**
+ * Tests that form elements in groups work correctly with AJAX.
+ *
+ * @group Ajax
+ */
+class AjaxInGroupTest extends WebDriverTestBase {
+
+  /**
+   * {@inheritdoc}
+   */
+  protected static $modules = ['ajax_forms_test'];
+
+  /**
+   * {@inheritdoc}
+   */
+  protected $defaultTheme = 'stark';
+
+  /**
+   * {@inheritdoc}
+   */
+  protected function setUp(): void {
+    parent::setUp();
+
+    $this->drupalLogin($this->drupalCreateUser(['access content']));
+  }
+
+  /**
+   * Submits forms with select and checkbox elements via Ajax.
+   */
+  public function testSimpleAjaxFormValue(): void {
+    $this->drupalGet('/ajax_forms_test_get_form');
+
+    $assert_session = $this->assertSession();
+    $assert_session->responseContains('Test group');
+    $assert_session->responseContains('AJAX checkbox in a group');
+
+    $session = $this->getSession();
+    $checkbox_original = $session->getPage()->findField('checkbox_in_group');
+    $this->assertNotNull($checkbox_original, 'The checkbox_in_group is on the page.');
+    $original_id = $checkbox_original->getAttribute('id');
+
+    // Triggers an AJAX request/response.
+    $checkbox_original->check();
+
+    // The response contains a new nested "test group" form element, similar
+    // to the one already in the DOM except for a change in the form build id.
+    $checkbox_new = $assert_session->waitForElement('xpath', "//input[@name='checkbox_in_group' and not(@id='$original_id')]");
+    $this->assertNotNull($checkbox_new, 'DOM update: clicking the checkbox refreshed the checkbox_in_group structure');
+
+    $assert_session->responseContains('Test group');
+    $assert_session->responseContains('AJAX checkbox in a group');
+    $assert_session->responseContains('AJAX checkbox in a nested group');
+    $assert_session->responseContains('Another AJAX checkbox in a nested group');
+  }
+
+}

core/tests/Drupal/FunctionalJavascriptTests/Ajax/AjaxMaintenanceModeTest.php

@@ -0,0 +1,69 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Drupal\FunctionalJavascriptTests\Ajax;
+
+use Drupal\FunctionalJavascriptTests\WebDriverTestBase;
+use Drupal\Tests\field_ui\Traits\FieldUiTestTrait;
+use Drupal\Tests\file\Functional\FileFieldCreationTrait;
+use Drupal\Tests\TestFileCreationTrait;
+
+/**
+ * Tests maintenance message during an AJAX call.
+ *
+ * @group Ajax
+ */
+class AjaxMaintenanceModeTest extends WebDriverTestBase {
+
+  use FieldUiTestTrait;
+  use FileFieldCreationTrait;
+  use TestFileCreationTrait;
+
+  /**
+   * An user with administration permissions.
+   *
+   * @var \Drupal\user\UserInterface
+   */
+  protected $adminUser;
+
+  /**
+   * {@inheritdoc}
+   */
+  protected static $modules = ['ajax_test'];
+
+  /**
+   * {@inheritdoc}
+   */
+  protected $defaultTheme = 'stark';
+
+  /**
+   * {@inheritdoc}
+   */
+  protected function setUp(): void {
+    parent::setUp();
+    $this->adminUser = $this->drupalCreateUser([
+      'access administration pages',
+      'administer site configuration',
+      'access site in maintenance mode',
+    ]);
+    $this->drupalLogin($this->adminUser);
+  }
+
+  /**
+   * Tests maintenance message only appears once on an AJAX call.
+   */
+  public function testAjaxCallMaintenanceMode(): void {
+    $page = $this->getSession()->getPage();
+    $assert_session = $this->assertSession();
+
+    \Drupal::state()->set('system.maintenance_mode', TRUE);
+
+    $this->drupalGet('ajax-test/insert-inline-wrapper');
+    $assert_session->pageTextContains('Target inline');
+    $page->clickLink('Link html pre-wrapped-div');
+    $this->assertSession()->assertWaitOnAjaxRequest();
+    $this->assertSession()->pageTextContainsOnce('Operating in maintenance mode');
+  }
+
+}

core/tests/Drupal/FunctionalJavascriptTests/Ajax/AjaxTest.php

@@ -0,0 +1,347 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Drupal\FunctionalJavascriptTests\Ajax;
+
+use Drupal\Component\Utility\UrlHelper;
+use Drupal\FunctionalJavascriptTests\WebDriverTestBase;
+
+/**
+ * Tests AJAX responses.
+ *
+ * @group Ajax
+ */
+class AjaxTest extends WebDriverTestBase {
+
+  /**
+   * {@inheritdoc}
+   */
+  protected static $modules = ['ajax_test', 'ajax_forms_test'];
+
+  /**
+   * {@inheritdoc}
+   */
+  protected $defaultTheme = 'stark';
+
+  public function testAjaxWithAdminRoute(): void {
+    \Drupal::service('theme_installer')->install(['stable9', 'claro']);
+    $theme_config = \Drupal::configFactory()->getEditable('system.theme');
+    $theme_config->set('admin', 'claro');
+    $theme_config->set('default', 'stable9');
+    $theme_config->save();
+
+    $account = $this->drupalCreateUser(['view the administration theme']);
+    $this->drupalLogin($account);
+
+    // First visit the site directly via the URL. This should render it in the
+    // admin theme.
+    $this->drupalGet('admin/ajax-test/theme');
+    $assert = $this->assertSession();
+    $assert->pageTextContains('Current theme: claro');
+
+    // Now click the modal, which should use the front-end theme.
+    $this->drupalGet('ajax-test/dialog');
+    $assert->pageTextNotContains('Current theme: stable9');
+    $this->clickLink('Link 8 (ajax)');
+    $assert->assertWaitOnAjaxRequest();
+
+    $assert->pageTextContains('Current theme: stable9');
+    $assert->pageTextNotContains('Current theme: claro');
+  }
+
+  /**
+   * Tests that AJAX loaded libraries are not retained between requests.
+   *
+   * @see https://www.drupal.org/node/2647916
+   */
+  public function testDrupalSettingsCachingRegression(): void {
+    $this->drupalGet('ajax-test/dialog');
+    $assert = $this->assertSession();
+    $session = $this->getSession();
+
+    // Insert a fake library into the already loaded library settings.
+    $fake_library = 'fakeLibrary/fakeLibrary';
+    $libraries = $session->evaluateScript("drupalSettings.ajaxPageState.libraries");
+    $libraries = UrlHelper::compressQueryParameter(UrlHelper::uncompressQueryParameter($libraries) . ',' . $fake_library);
+    $session->evaluateScript("drupalSettings.ajaxPageState.libraries = '$libraries';");
+    $ajax_page_state = $session->evaluateScript("drupalSettings.ajaxPageState");
+    $libraries = UrlHelper::uncompressQueryParameter($ajax_page_state['libraries']);
+    // Test that the fake library is set.
+    $this->assertStringContainsString($fake_library, $libraries);
+
+    // Click on the AJAX link.
+    $this->clickLink('Link 8 (ajax)');
+    $assert->assertWaitOnAjaxRequest();
+
+    // Test that the fake library is still set after the AJAX call.
+    $ajax_page_state = $session->evaluateScript("drupalSettings.ajaxPageState");
+    // Test that the fake library is set.
+    $this->assertStringContainsString($fake_library, UrlHelper::uncompressQueryParameter($ajax_page_state['libraries']));
+
+    // Reload the page, this should reset the loaded libraries and remove the
+    // fake library.
+    $this->drupalGet('ajax-test/dialog');
+    $ajax_page_state = $session->evaluateScript("drupalSettings.ajaxPageState");
+    $this->assertStringNotContainsString($fake_library, UrlHelper::uncompressQueryParameter($ajax_page_state['libraries']));
+
+    // Click on the AJAX link again, and the libraries should still not contain
+    // the fake library.
+    $this->clickLink('Link 8 (ajax)');
+    $assert->assertWaitOnAjaxRequest();
+    $ajax_page_state = $session->evaluateScript("drupalSettings.ajaxPageState");
+    $this->assertStringNotContainsString($fake_library, UrlHelper::uncompressQueryParameter($ajax_page_state['libraries']));
+  }
+
+  /**
+   * Tests that various AJAX responses with DOM elements are correctly inserted.
+   *
+   * After inserting DOM elements, Drupal JavaScript behaviors should be
+   * reattached and all top-level elements of type Node.ELEMENT_NODE need to be
+   * part of the context.
+   */
+  public function testInsertAjaxResponse(): void {
+    $render_single_root = [
+      'pre-wrapped-div' => '<div class="pre-wrapped">pre-wrapped<script> var test;</script></div>',
+      'pre-wrapped-span' => '<span class="pre-wrapped">pre-wrapped<script> var test;</script></span>',
+      'pre-wrapped-whitespace' => ' <div class="pre-wrapped-whitespace">pre-wrapped-whitespace</div>' . "\n",
+      'not-wrapped' => 'not-wrapped',
+      'comment-string-not-wrapped' => '<!-- COMMENT -->comment-string-not-wrapped',
+      'comment-not-wrapped' => '<!-- COMMENT --><div class="comment-not-wrapped">comment-not-wrapped</div>',
+      'svg' => '<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10"><rect x="0" y="0" height="10" width="10" fill="green"></rect></svg>',
+      'empty' => '',
+    ];
+    $render_multiple_root_unwrap = [
+      'mixed' => ' foo <!-- COMMENT -->  foo bar<div class="a class"><p>some string</p></div> additional not wrapped strings, <!-- ANOTHER COMMENT --> <p>final string</p>',
+      'top-level-only' => '<div>element #1</div><div>element #2</div>',
+      'top-level-only-pre-whitespace' => ' <div>element #1</div><div>element #2</div> ',
+      'top-level-only-middle-whitespace-span' => '<span>element #1</span> <span>element #2</span>',
+      'top-level-only-middle-whitespace-div' => '<div>element #1</div> <div>element #2</div>',
+    ];
+
+    // This is temporary behavior for BC reason.
+    $render_multiple_root_wrapper = [];
+    foreach ($render_multiple_root_unwrap as $key => $render) {
+      $render_multiple_root_wrapper["$key--effect"] = '<div>' . $render . '</div>';
+    }
+
+    $expected_renders = array_merge(
+      $render_single_root,
+      $render_multiple_root_wrapper,
+      $render_multiple_root_unwrap
+    );
+
+    // Checking default process of wrapping Ajax content.
+    foreach ($expected_renders as $render_type => $expected) {
+      $this->assertInsert($render_type, $expected);
+    }
+
+    // Checking custom ajaxWrapperMultipleRootElements wrapping.
+    $custom_wrapper_multiple_root = <<<JS
+    (function($, Drupal){
+      Drupal.theme.ajaxWrapperMultipleRootElements = function (elements) {
+        return $('<div class="my-favorite-div"></div>').append(elements);
+      };
+    }(jQuery, Drupal));
+JS;
+    $expected = '<div class="my-favorite-div"><span>element #1</span> <span>element #2</span></div>';
+    $this->assertInsert('top-level-only-middle-whitespace-span--effect', $expected, $custom_wrapper_multiple_root);
+
+    // Checking custom ajaxWrapperNewContent wrapping.
+    $custom_wrapper_new_content = <<<JS
+    (function($, Drupal){
+      Drupal.theme.ajaxWrapperNewContent = function (elements) {
+        return $('<div class="div-wrapper-forever"></div>').append(elements);
+      };
+    }(jQuery, Drupal));
+JS;
+    $expected = '<div class="div-wrapper-forever"></div>';
+    $this->assertInsert('empty', $expected, $custom_wrapper_new_content);
+  }
+
+  /**
+   * Tests that jQuery's global Ajax events are triggered at the correct time.
+   */
+  public function testGlobalEvents(): void {
+    $session = $this->getSession();
+    $assert = $this->assertSession();
+    $expected_event_order = implode('', ['ajaxSuccess', 'ajaxComplete', 'ajaxStop']);
+
+    $this->drupalGet('ajax-test/global-events');
+
+    // Ensure that a non-Drupal Ajax request triggers the expected events, in
+    // the correct order, a single time.
+    $session->executeScript('jQuery.get(Drupal.url("core/COPYRIGHT.txt"))');
+    $assert->assertWaitOnAjaxRequest();
+    $assert->elementTextEquals('css', '#test_global_events_log', $expected_event_order);
+    $assert->elementTextEquals('css', '#test_global_events_log2', $expected_event_order);
+
+    // Ensure that an Ajax request to a Drupal Ajax response, but that was not
+    // initiated with Drupal.Ajax(), triggers the expected events, in the
+    // correct order, a single time. We expect $expected_event_order to appear
+    // twice in each log element, because Drupal Ajax response commands (such
+    // as the one to clear the log element) are only executed for requests
+    // initiated with Drupal.Ajax(), and these elements already contain the
+    // text that was added above.
+    $session->executeScript('jQuery.get(Drupal.url("ajax-test/global-events/clear-log"))');
+    $assert->assertWaitOnAjaxRequest();
+    $assert->elementTextEquals('css', '#test_global_events_log', str_repeat($expected_event_order, 2));
+    $assert->elementTextEquals('css', '#test_global_events_log2', str_repeat($expected_event_order, 2));
+
+    // Ensure that a Drupal Ajax request triggers the expected events, in the
+    // correct order, a single time.
+    // - We expect the first log element to list the events exactly once,
+    //   because the Ajax response clears it, and we expect the events to be
+    //   triggered after the commands are executed.
+    // - We expect the second log element to list the events exactly three
+    //   times, because it already contains the two from the code that was
+    //   already executed above. This additional log element that isn't cleared
+    //   by the response's command ensures that the events weren't triggered
+    //   additional times before the response commands were executed.
+    $this->click('#test_global_events_drupal_ajax_link');
+    $assert->assertWaitOnAjaxRequest();
+    $assert->elementTextEquals('css', '#test_global_events_log', $expected_event_order);
+    $assert->elementTextEquals('css', '#test_global_events_log2', str_repeat($expected_event_order, 3));
+  }
+
+  /**
+   * Assert insert.
+   *
+   * @param string $render_type
+   *   Render type.
+   * @param string $expected
+   *   Expected result.
+   * @param string $script
+   *   Script for additional theming.
+   *
+   * @internal
+   */
+  public function assertInsert(string $render_type, string $expected, string $script = ''): void {
+    // Check insert to block element.
+    $this->drupalGet('ajax-test/insert-block-wrapper');
+    $this->getSession()->executeScript($script);
+    $this->clickLink("Link html $render_type");
+    $this->assertWaitPageContains('<div class="ajax-target-wrapper"><div id="ajax-target">' . $expected . '</div></div>');
+
+    $this->drupalGet('ajax-test/insert-block-wrapper');
+    $this->getSession()->executeScript($script);
+    $this->clickLink("Link replaceWith $render_type");
+    $this->assertWaitPageContains('<div class="ajax-target-wrapper">' . $expected . '</div>');
+
+    // Check insert to inline element.
+    $this->drupalGet('ajax-test/insert-inline-wrapper');
+    $this->getSession()->executeScript($script);
+    $this->clickLink("Link html $render_type");
+    $this->assertWaitPageContains('<div class="ajax-target-wrapper"><span id="ajax-target-inline">' . $expected . '</span></div>');
+
+    $this->drupalGet('ajax-test/insert-inline-wrapper');
+    $this->getSession()->executeScript($script);
+    $this->clickLink("Link replaceWith $render_type");
+    $this->assertWaitPageContains('<div class="ajax-target-wrapper">' . $expected . '</div>');
+  }
+
+  /**
+   * Asserts that page contains an expected value after waiting.
+   *
+   * @param string $expected
+   *   A needle text.
+   *
+   * @internal
+   */
+  protected function assertWaitPageContains(string $expected): void {
+    $page = $this->getSession()->getPage();
+    $this->assertTrue($page->waitFor(10, function () use ($page, $expected) {
+      // Clear content from empty styles and "processed" classes after effect.
+      $content = str_replace([' class="processed"', ' processed', ' style=""'], '', $page->getContent());
+      return stripos($content, $expected) !== FALSE;
+    }), "Page contains expected value: $expected");
+  }
+
+  /**
+   * Tests that Ajax errors are visible in the UI.
+   */
+  public function testUiAjaxException(): void {
+    $themes = [
+      'olivero',
+      'claro',
+      'stark',
+    ];
+    \Drupal::service('theme_installer')->install($themes);
+
+    foreach ($themes as $theme) {
+      $theme_config = \Drupal::configFactory()->getEditable('system.theme');
+      $theme_config->set('default', $theme);
+      $theme_config->save();
+      \Drupal::service('router.builder')->rebuildIfNeeded();
+
+      $this->drupalGet('ajax-test/exception-link');
+      $page = $this->getSession()->getPage();
+      // We don't want the test to error out because of an expected Javascript
+      // console error.
+      $this->failOnJavascriptConsoleErrors = FALSE;
+      // Click on the AJAX link.
+      $this->clickLink('Ajax Exception');
+      $this->assertSession()
+        ->statusMessageContainsAfterWait("Oops, something went wrong. Check your browser's developer console for more details.", 'error');
+
+      if ($theme === 'olivero') {
+        // Check that the message can be closed.
+        $this->click('.messages__close');
+        $this->assertTrue($page->find('css', '.messages--error')
+          ->hasClass('hidden'));
+      }
+    }
+
+    // This is needed to avoid an unfinished AJAX request error from tearDown()
+    // because this test intentionally does not complete all AJAX requests.
+    $this->getSession()->executeScript("delete window.drupalActiveXhrCount");
+  }
+
+  /**
+   * Tests ajax focus handling.
+   */
+  public function testAjaxFocus(): void {
+    $this->markTestSkipped("Skipped due to frequent random test failures. See https://www.drupal.org/project/drupal/issues/3396536");
+    $this->drupalGet('/ajax_forms_test_get_form');
+
+    $this->assertNotNull($select = $this->assertSession()->elementExists('css', '#edit-select'));
+    $select->setValue('green');
+    $this->assertSession()->assertWaitOnAjaxRequest();
+    $has_focus_id = $this->getSession()->evaluateScript('document.activeElement.id');
+    $this->assertEquals('edit-select', $has_focus_id);
+
+    $this->assertNotNull($checkbox = $this->assertSession()->elementExists('css', '#edit-checkbox'));
+    $checkbox->check();
+    $this->assertSession()->assertWaitOnAjaxRequest();
+    $has_focus_id = $this->getSession()->evaluateScript('document.activeElement.id');
+    $this->assertEquals('edit-checkbox', $has_focus_id);
+
+    $this->assertNotNull($textfield1 = $this->assertSession()->elementExists('css', '#edit-textfield'));
+    $this->assertNotNull($textfield2 = $this->assertSession()->elementExists('css', '#edit-textfield-2'));
+    $this->assertNotNull($textfield3 = $this->assertSession()->elementExists('css', '#edit-textfield-3'));
+
+    // Test textfield with 'blur' event listener.
+    $textfield1->setValue('Kittens say purr');
+    $textfield2->focus();
+    $this->assertSession()->assertWaitOnAjaxRequest();
+    $has_focus_id = $this->getSession()->evaluateScript('document.activeElement.id');
+    $this->assertEquals('edit-textfield-2', $has_focus_id);
+
+    // Test textfield with 'change' event listener with refocus-blur set to
+    // FALSE.
+    $textfield2->setValue('Llamas say hi');
+    $textfield3->focus();
+    $this->assertSession()->assertWaitOnAjaxRequest();
+    $has_focus_id = $this->getSession()->evaluateScript('document.activeElement.id');
+    $this->assertEquals('edit-textfield-2', $has_focus_id);
+
+    // Test textfield with 'change' event.
+    $textfield3->focus();
+    $textfield3->setValue('Wasps buzz');
+    $textfield3->blur();
+    $this->assertSession()->assertWaitOnAjaxRequest();
+    $has_focus_id = $this->getSession()->evaluateScript('document.activeElement.id');
+    $this->assertEquals('edit-textfield-3', $has_focus_id);
+  }
+
+}

core/tests/Drupal/FunctionalJavascriptTests/Ajax/CommandsTest.php

@@ -0,0 +1,182 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Drupal\FunctionalJavascriptTests\Ajax;
+
+use Drupal\FunctionalJavascriptTests\WebDriverTestBase;
+
+/**
+ * Performs tests on AJAX framework commands.
+ *
+ * @group Ajax
+ */
+class CommandsTest extends WebDriverTestBase {
+
+  /**
+   * {@inheritdoc}
+   */
+  protected static $modules = ['node', 'ajax_test', 'ajax_forms_test'];
+
+  /**
+   * {@inheritdoc}
+   */
+  protected $defaultTheme = 'stark';
+
+  /**
+   * Tests the various Ajax Commands.
+   */
+  public function testAjaxCommands(): void {
+    $session = $this->getSession();
+    $page = $this->getSession()->getPage();
+
+    $form_path = 'ajax_forms_test_ajax_commands_form';
+    $web_user = $this->drupalCreateUser(['access content']);
+    $this->drupalLogin($web_user);
+    $this->drupalGet($form_path);
+
+    // Tests the 'add_css' command.
+    $page->pressButton("AJAX 'add_css' command");
+    $this->assertWaitPageContains('my/file.css');
+    $this->assertSession()->elementExists('css', 'link[href="my/file.css"]');
+    $this->assertSession()->elementExists('css', 'link[href="https://example.com/css?family=Open+Sans"]');
+
+    // Tests the 'after' command.
+    $page->pressButton("AJAX 'After': Click to put something after the div");
+    $this->assertWaitPageContains('<div id="after_div">Something can be inserted after this</div>This will be placed after');
+
+    // Tests the 'alert' command.
+    $page->pressButton("AJAX 'Alert': Click to alert");
+    // Wait for the alert to appear.
+    $page->waitFor(10, function () use ($session) {
+      try {
+        $session->getDriver()->getWebDriverSession()->getAlert_text();
+        return TRUE;
+      }
+      catch (\Exception $e) {
+        return FALSE;
+      }
+    });
+    $alert_text = $this->getSession()->getDriver()->getWebDriverSession()->getAlert_text();
+    $this->assertEquals('Alert', $alert_text);
+    $this->getSession()->getDriver()->getWebDriverSession()->accept_alert();
+
+    $this->drupalGet($form_path);
+    $page->pressButton("AJAX 'Announce': Click to announce");
+    $this->assertWaitPageContains('<div id="drupal-live-announce" class="visually-hidden" aria-live="polite" aria-busy="false">Default announcement.</div>');
+
+    $this->drupalGet($form_path);
+    $page->pressButton("AJAX 'Announce': Click to announce with 'polite' priority");
+    $this->assertWaitPageContains('<div id="drupal-live-announce" class="visually-hidden" aria-live="polite" aria-busy="false">Polite announcement.</div>');
+
+    $this->drupalGet($form_path);
+    $page->pressButton("AJAX 'Announce': Click to announce with 'assertive' priority");
+    $this->assertWaitPageContains('<div id="drupal-live-announce" class="visually-hidden" aria-live="assertive" aria-busy="false">Assertive announcement.</div>');
+
+    $this->drupalGet($form_path);
+    $page->pressButton("AJAX 'Announce': Click to announce twice");
+    $this->assertWaitPageContains('<div id="drupal-live-announce" class="visually-hidden" aria-live="assertive" aria-busy="false">Assertive announcement.' . "\nAnother announcement.</div>");
+
+    // Tests the 'append' command.
+    $page->pressButton("AJAX 'Append': Click to append something");
+    $this->assertWaitPageContains('<div id="append_div">Append inside this divAppended text</div>');
+
+    // Tests the 'before' command.
+    $page->pressButton("AJAX 'before': Click to put something before the div");
+    $this->assertWaitPageContains('Before text<div id="before_div">Insert something before this.</div>');
+
+    // Tests the 'changed' command.
+    $page->pressButton("AJAX changed: Click to mark div changed.");
+    $this->assertWaitPageContains('<div id="changed_div" class="ajax-changed">');
+
+    // Tests the 'changed' command using the second argument.
+    // Refresh page for testing 'changed' command to same element again.
+    $this->drupalGet($form_path);
+    $page->pressButton("AJAX changed: Click to mark div changed with asterisk.");
+    $this->assertWaitPageContains('<div id="changed_div" class="ajax-changed"> <div id="changed_div_mark_this">This div can be marked as changed or not. <abbr class="ajax-changed" title="Changed">*</abbr> </div></div>');
+
+    // Tests the 'css' command.
+    $page->pressButton("Set the '#box' div to be blue.");
+    $this->assertWaitPageContains('<div id="css_div" style="background-color: blue;">');
+
+    // Tests the 'data' command.
+    $page->pressButton("AJAX data command: Issue command.");
+    $this->assertTrue($page->waitFor(10, function () use ($session) {
+      return 'test_value' === $session->evaluateScript('window.jQuery("#data_div").data("test_key")');
+    }));
+
+    // Tests the 'html' command.
+    $page->pressButton("AJAX html: Replace the HTML in a selector.");
+    $this->assertWaitPageContains('<div id="html_div">replacement text</div>');
+
+    // Tests the 'insert' command.
+    $page->pressButton("AJAX insert: Let client insert based on #ajax['method'].");
+    $this->assertWaitPageContains('<div id="insert_div">insert replacement textOriginal contents</div>');
+
+    // Tests the 'invoke' command.
+    $page->pressButton("AJAX invoke command: Invoke addClass() method.");
+    $this->assertWaitPageContains('<div id="invoke_div" class="error">Original contents</div>');
+
+    // Tests the 'prepend' command.
+    $page->pressButton("AJAX 'prepend': Click to prepend something");
+    $this->assertWaitPageContains('<div id="prepend_div">prepended textSomething will be prepended to this div. </div>');
+
+    // Tests the 'remove' command.
+    $page->pressButton("AJAX 'remove': Click to remove text");
+    $this->assertWaitPageContains('<div id="remove_div"></div>');
+
+    // Tests the 'restripe' command.
+    $page->pressButton("AJAX 'restripe' command");
+    $this->assertWaitPageContains('<tr id="table-first" class="odd"><td>first row</td></tr>');
+    $this->assertWaitPageContains('<tr class="even"><td>second row</td></tr>');
+
+    // Tests the 'settings' command.
+    $test_settings_command = <<<JS
+Drupal.behaviors.testSettingsCommand = {
+  attach: function (context, settings) {
+    window.jQuery('body').append('<div class="test-settings-command">' + settings.ajax_forms_test.foo + '</div>');
+  }
+};
+JS;
+    $session->executeScript($test_settings_command);
+    // @todo Replace after https://www.drupal.org/project/drupal/issues/2616184
+    $session->executeScript('window.jQuery("#edit-settings-command-example").mousedown();');
+    $this->assertWaitPageContains('<div class="test-settings-command">42</div>');
+  }
+
+  /**
+   * Tests the various Ajax Commands with legacy parameters.
+   * @group legacy
+   */
+  public function testLegacyAjaxCommands(): void {
+    $session = $this->getSession();
+    $page = $this->getSession()->getPage();
+
+    $form_path = 'ajax_forms_test_ajax_commands_form';
+    $web_user = $this->drupalCreateUser(['access content']);
+    $this->drupalLogin($web_user);
+    $this->drupalGet($form_path);
+
+    // Tests the 'add_css' command with legacy string value.
+    $this->expectDeprecation('Javascript Deprecation: Passing a string to the Drupal.ajax.add_css() method is deprecated in 10.1.0 and is removed from drupal:11.0.0. See https://www.drupal.org/node/3154948.');
+    $page->pressButton("AJAX 'add_css' legacy command");
+    $this->assertWaitPageContains('my/file.css');
+  }
+
+  /**
+   * Asserts that page contains a text after waiting.
+   *
+   * @param string $text
+   *   A needle text.
+   *
+   * @internal
+   */
+  protected function assertWaitPageContains(string $text): void {
+    $page = $this->getSession()->getPage();
+    $page->waitFor(10, function () use ($page, $text) {
+      return stripos($page->getContent(), $text) !== FALSE;
+    });
+    $this->assertStringContainsString($text, $page->getContent());
+  }
+
+}

core/tests/Drupal/FunctionalJavascriptTests/Ajax/DialogTest.php

@@ -0,0 +1,255 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Drupal\FunctionalJavascriptTests\Ajax;
+
+use Drupal\ajax_test\Controller\AjaxTestController;
+use Drupal\Core\Ajax\OpenModalDialogWithUrl;
+use Drupal\FunctionalJavascriptTests\WebDriverTestBase;
+
+// cspell:ignore testdialog
+
+/**
+ * Performs tests on opening and manipulating dialogs via AJAX commands.
+ *
+ * @group Ajax
+ */
+class DialogTest extends WebDriverTestBase {
+
+  /**
+   * {@inheritdoc}
+   */
+  protected static $modules = ['ajax_test', 'ajax_forms_test', 'contact'];
+
+  /**
+   * {@inheritdoc}
+   */
+  protected $defaultTheme = 'stark';
+
+  /**
+   * Tests sending non-JS and AJAX requests to open and manipulate modals.
+   */
+  public function testDialog(): void {
+    $this->drupalLogin($this->drupalCreateUser(['administer contact forms']));
+    // Ensure the elements render without notices or exceptions.
+    $this->drupalGet('ajax-test/dialog');
+
+    // Set up variables for this test.
+    $dialog_renderable = AjaxTestController::dialogContents();
+    $dialog_contents = \Drupal::service('renderer')->renderRoot($dialog_renderable);
+
+    // Check that requesting a modal dialog without JS goes to a page.
+    $this->drupalGet('ajax-test/dialog-contents');
+    $this->assertSession()->responseContains($dialog_contents);
+
+    // Visit the page containing the many test dialog links.
+    $this->drupalGet('ajax-test/dialog');
+
+    // Tests a basic modal dialog by verifying the contents of the dialog are as
+    // expected.
+    $this->getSession()->getPage()->clickLink('Link 1 (modal)');
+
+    // Clicking the link triggers an AJAX request/response.
+    // Opens a Dialog panel.
+    $link1_dialog_div = $this->assertSession()->waitForElementVisible('css', 'div.ui-dialog');
+    $this->assertNotNull($link1_dialog_div, 'Link was used to open a dialog ( modal )');
+
+    $link1_modal = $link1_dialog_div->find('css', '#drupal-modal');
+    $this->assertNotNull($link1_modal, 'Link was used to open a dialog ( non-modal )');
+    $this->assertSession()->responseContains($dialog_contents);
+
+    $dialog_title = $link1_dialog_div->find('css', "span.ui-dialog-title:contains('AJAX Dialog & contents')");
+    $this->assertNotNull($dialog_title);
+    $dialog_title_amp = $link1_dialog_div->find('css', "span.ui-dialog-title:contains('AJAX Dialog &amp; contents')");
+    $this->assertNull($dialog_title_amp);
+
+    // Close open dialog, return to the dialog links page.
+    $close_button = $link1_dialog_div->findButton('Close');
+    $this->assertNotNull($close_button);
+    $close_button->press();
+
+    // Tests a modal with a dialog-option.
+    // Link 2 is similar to Link 1, except it submits additional width
+    // information which must be echoed in the resulting  DOM update.
+    $this->getSession()->getPage()->clickLink('Link 2 (modal)');
+    $dialog = $this->assertSession()->waitForElementVisible('css', 'div.ui-dialog');
+    $this->assertNotNull($dialog, 'Link was used to open a dialog ( non-modal, with options )');
+    $style = $dialog->getAttribute('style');
+    $this->assertStringContainsString('width: 400px;', $style, "Modal respected the dialog-options width parameter.  Style = $style");
+
+    // Reset: Return to the dialog links page.
+    $this->drupalGet('ajax-test/dialog');
+
+    // Test a non-modal dialog ( with target ).
+    $this->clickLink('Link 3 (non-modal)');
+    $non_modal_dialog = $this->assertSession()->waitForElementVisible('css', 'div.ui-dialog');
+    $this->assertNotNull($non_modal_dialog, 'Link opens a non-modal dialog.');
+
+    // Tests the dialog contains a target element specified in the AJAX request.
+    $non_modal_dialog->find('css', 'div#ajax-test-dialog-wrapper-1');
+    $this->assertSession()->responseContains($dialog_contents);
+
+    // Reset: Return to the dialog links page.
+    $this->drupalGet('ajax-test/dialog');
+
+    // Tests a non-modal dialog ( without target ).
+    $this->clickLink('Link 7 (non-modal, no target)');
+    $no_target_dialog = $this->assertSession()->waitForElementVisible('css', 'div.ui-dialog');
+    $this->assertNotNull($no_target_dialog, 'Link opens a non-modal dialog.');
+
+    $contents_no_target = $no_target_dialog->find('css', 'div.ui-dialog-content');
+    $this->assertNotNull($contents_no_target, 'non-modal dialog opens ( no target ). ');
+    $id = $contents_no_target->getAttribute('id');
+    $partial_match = str_starts_with($id, 'drupal-dialog-ajax-testdialog-contents');
+    $this->assertTrue($partial_match, 'The non-modal ID has the expected prefix.');
+
+    $no_target_button = $no_target_dialog->findButton('Close');
+    $this->assertNotNull($no_target_button, 'Link dialog has a close button');
+    $no_target_button->press();
+
+    $this->getSession()->getPage()->findButton('Button 1 (modal)')->press();
+    $button1_dialog = $this->assertSession()->waitForElementVisible('css', 'div.ui-dialog');
+    $this->assertNotNull($button1_dialog, 'Button opens a modal dialog.');
+
+    $button1_dialog_content = $button1_dialog->find('css', 'div.ui-dialog-content');
+    $this->assertNotNull($button1_dialog_content, 'Button opens a modal dialog.');
+
+    // Test the HTML escaping of & character.
+    $button1_dialog_title = $button1_dialog->find('css', "span.ui-dialog-title:contains('AJAX Dialog & contents')");
+    $this->assertNotNull($button1_dialog_title);
+    $button1_dialog_title_amp = $button1_dialog->find('css', "span.ui-dialog-title:contains('AJAX Dialog &amp; contents')");
+    $this->assertNull($button1_dialog_title_amp);
+
+    // Reset: Close the dialog.
+    $button1_dialog->findButton('Close')->press();
+
+    // Abbreviated test for "normal" dialogs, testing only the difference.
+    $this->getSession()->getPage()->findButton('Button 2 (non-modal)')->press();
+    $button2_dialog = $this->assertSession()->waitForElementVisible('css', 'div.ui-dialog-content');
+    $this->assertNotNull($button2_dialog, 'Non-modal content displays as expected.');
+
+    // Use a link to close the panel opened by button 2.
+    $this->getSession()->getPage()->clickLink('Link 4 (close non-modal if open)');
+
+    // Test dialogs opened using OpenModalDialogWithUrl.
+    $this->getSession()->getPage()->findButton('Button 3 (modal from url)')->press();
+    // Check that title was fetched properly.
+    // @see \Drupal\ajax_test\Form\AjaxTestDialogForm::dialog.
+    $form_dialog_title = $this->assertSession()->waitForElement('css', "span.ui-dialog-title:contains('Ajax Form contents')");
+    $this->assertNotNull($form_dialog_title, 'Dialog form has the expected title.');
+    $button1_dialog->findButton('Close')->press();
+    // Test external URL.
+    $dialog_obj = new OpenModalDialogWithUrl('http://example.com', []);
+    try {
+      $dialog_obj->render();
+    }
+    catch (\LogicException $e) {
+      $this->assertEquals('External URLs are not allowed.', $e->getMessage());
+    }
+
+    // Form modal.
+    $this->clickLink('Link 5 (form)');
+    // Two links have been clicked in succession - This time wait for a change
+    // in the title as the previous closing dialog may temporarily be open.
+    $form_dialog_title = $this->assertSession()->waitForElementVisible('css', "span.ui-dialog-title:contains('Ajax Form contents')");
+    $this->assertNotNull($form_dialog_title, 'Dialog form has the expected title.');
+    // Locate the newly opened dialog.
+    $form_dialog = $this->getSession()->getPage()->find('css', 'div.ui-dialog');
+    $this->assertNotNull($form_dialog, 'Form dialog is visible');
+
+    $form_contents = $form_dialog->find('css', "p:contains('Ajax Form contents description.')");
+    $this->assertNotNull($form_contents, 'For has the expected text.');
+    $do_it = $form_dialog->findButton('Do it');
+    $this->assertNotNull($do_it, 'The dialog has a "Do it" button.');
+    $preview = $form_dialog->findButton('Preview');
+    $this->assertNotNull($preview, 'The dialog contains a "Preview" button.');
+
+    // Form submit inputs, link buttons, and buttons in dialog are copied to the
+    // dialog buttonpane as buttons. The originals should have their styles set
+    // to display: none.
+    $hidden_buttons = $this->getSession()->getPage()->findAll('css', '.ajax-test-form .button');
+    $this->assertCount(3, $hidden_buttons);
+    $hidden_button_text = [];
+    foreach ($hidden_buttons as $button) {
+      $styles = $button->getAttribute('style');
+      $this->assertStringContainsStringIgnoringCase('display: none;', $styles);
+      $hidden_button_text[] = $button->hasAttribute('value') ? $button->getAttribute('value') : $button->getHtml();
+    }
+
+    // The copied buttons should have the same text as the submit inputs they
+    // were copied from.
+    $moved_to_buttonpane_buttons = $this->getSession()->getPage()->findAll('css', '.ui-dialog-buttonpane button');
+    $this->assertCount(3, $moved_to_buttonpane_buttons);
+    foreach ($moved_to_buttonpane_buttons as $key => $button) {
+      $this->assertEquals($hidden_button_text[$key], $button->getText());
+    }
+
+    // Press buttons in the dialog to ensure there are no AJAX errors.
+    $this->assertSession()->elementExists('css', '.ui-dialog-buttonpane')->pressButton('Hello world');
+    $this->assertSession()->assertWaitOnAjaxRequest();
+    $has_focus_text = $this->getSession()->evaluateScript('document.activeElement.textContent');
+    $this->assertEquals('Do it', $has_focus_text);
+    $this->assertSession()->elementExists('css', '.ui-dialog-buttonpane')->pressButton('Preview');
+    $this->assertSession()->assertWaitOnAjaxRequest();
+    $has_focus_text = $this->getSession()->evaluateScript('document.activeElement.textContent');
+    $this->assertEquals('Do it', $has_focus_text);
+
+    // Reset: close the form.
+    $form_dialog->findButton('Close')->press();
+
+    // Non AJAX version of Link 6.
+    $this->drupalGet('admin/structure/contact/add');
+    // Check we get a chunk of the code, we can't test the whole form as form
+    // build id and token with be different.
+    $this->assertSession()->elementExists('xpath', "//form[@id='contact-form-add-form']");
+
+    // Reset: Return to the dialog links page.
+    $this->drupalGet('ajax-test/dialog');
+
+    $this->clickLink('Link 6 (entity form)');
+    $dialog_add = $this->assertSession()->waitForElementVisible('css', 'div.ui-dialog');
+    $this->assertNotNull($dialog_add, 'Form dialog is visible');
+
+    $form_add = $dialog_add->find('css', 'form.contact-form-add-form');
+    $this->assertNotNull($form_add, 'Modal dialog JSON contains entity form.');
+
+    $form_title = $dialog_add->find('css', "span.ui-dialog-title:contains('Add contact form')");
+    $this->assertNotNull($form_title, 'The add form title is as expected.');
+  }
+
+  /**
+   * Tests dialog link opener with different HTTP methods.
+   */
+  public function testHttpMethod(): void {
+    $assert = $this->assertSession();
+    $script = <<<SCRIPT
+      (function() {
+        return document.querySelector('div[aria-describedby="drupal-modal"]').offsetWidth;
+      }())
+      SCRIPT;
+
+    // Open the modal dialog with POST HTTP method.
+    $this->drupalGet('/ajax-test/http-methods');
+    $this->clickLink('Link');
+    $assert->assertWaitOnAjaxRequest();
+    $assert->pageTextContains('Modal dialog contents');
+    $width = $this->getSession()->getDriver()->evaluateScript($script);
+    // The theme is adding 4px as padding and border on each side.
+    $this->assertSame(808, $width);
+
+    // Switch to GET HTTP method.
+    // @see \Drupal\ajax_test\Controller\AjaxTestController::httpMethods()
+    \Drupal::state()->set('ajax_test.http_method', 'GET');
+
+    // Open the modal dialog with GET HTTP method.
+    $this->drupalGet('/ajax-test/http-methods');
+    $this->clickLink('Link');
+    $assert->assertWaitOnAjaxRequest();
+    $assert->pageTextContains('Modal dialog contents');
+    $width = $this->getSession()->getDriver()->evaluateScript($script);
+    // The theme is adding 4px as padding and border on each side.
+    $this->assertSame(808, $width);
+  }
+
+}

core/tests/Drupal/FunctionalJavascriptTests/Ajax/ElementValidationTest.php

@@ -0,0 +1,60 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Drupal\FunctionalJavascriptTests\Ajax;
+
+use Drupal\FunctionalJavascriptTests\WebDriverTestBase;
+
+/**
+ * Various tests of AJAX behavior.
+ *
+ * @group Ajax
+ */
+class ElementValidationTest extends WebDriverTestBase {
+
+  /**
+   * {@inheritdoc}
+   */
+  protected static $modules = ['ajax_test', 'ajax_forms_test'];
+
+  /**
+   * {@inheritdoc}
+   */
+  protected $defaultTheme = 'stark';
+
+  /**
+   * Tries to post an Ajax change to a form that has a validated element.
+   *
+   * Drupal AJAX commands update the DOM echoing back the validated values in
+   * the form of messages that appear on the page.
+   */
+  public function testAjaxElementValidation(): void {
+    $this->drupalGet('ajax_validation_test');
+    $page = $this->getSession()->getPage();
+    $assert = $this->assertSession();
+
+    // Partially complete the form with a string.
+    $page->fillField('driver_text', 'some dumb text');
+    // Move focus away from this field to trigger AJAX.
+    $page->findField('spare_required_field')->focus();
+
+    // When the AJAX command updates the DOM a <ul> unsorted list
+    // "message__list" structure will appear on the page echoing back the
+    // "some dumb text" message.
+    $placeholder_text = $assert->waitForElement('css', "[aria-label='Status message'] > ul > li > em:contains('some dumb text')");
+    $this->assertNotNull($placeholder_text, 'A callback successfully echoed back a string.');
+
+    $this->drupalGet('ajax_validation_test');
+    // Partially complete the form with a number.
+    $page->fillField('driver_number', '12345');
+    $page->findField('spare_required_field')->focus();
+
+    // The AJAX request/response will complete successfully when an
+    // InsertCommand injects a message with a placeholder element into the DOM
+    // with the submitted number.
+    $placeholder_number = $assert->waitForElement('css', "[aria-label='Status message'] > ul > li > em:contains('12345')");
+    $this->assertNotNull($placeholder_number, 'A callback successfully echoed back a number.');
+  }
+
+}

core/tests/Drupal/FunctionalJavascriptTests/Ajax/FocusFirstCommandTest.php

@@ -0,0 +1,83 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Drupal\FunctionalJavascriptTests\Ajax;
+
+use Drupal\FunctionalJavascriptTests\WebDriverTestBase;
+
+/**
+ * Tests setting focus via AJAX command.
+ *
+ * @group Ajax
+ */
+class FocusFirstCommandTest extends WebDriverTestBase {
+  /**
+   * {@inheritdoc}
+   */
+  protected static $modules = ['ajax_test'];
+
+  /**
+   * {@inheritdoc}
+   */
+  protected $defaultTheme = 'stark';
+
+  /**
+   * Tests AjaxFocusFirstCommand on a page.
+   */
+  public function testFocusFirst(): void {
+    $page = $this->getSession()->getPage();
+    $assert_session = $this->assertSession();
+
+    $this->drupalGet('ajax-test/focus-first');
+    $has_focus_id = $this->getSession()->evaluateScript('document.activeElement.id');
+    $this->assertNotContains($has_focus_id, ['edit-first-input', 'edit-first-container-input']);
+
+    // Confirm that focus does not change if the selector targets a
+    // non-focusable container containing no tabbable elements.
+    $page->pressButton('SelectorNothingTabbable');
+    $this->assertNotNull($assert_session->waitForElementVisible('css', '#edit-selector-has-nothing-tabbable[data-has-focus]'));
+    $has_focus_id = $this->getSession()->evaluateScript('document.activeElement.id');
+    $this->assertEquals('edit-selector-has-nothing-tabbable', $has_focus_id);
+
+    // Confirm that focus does not change if the page has no match for the
+    // provided selector.
+    $page->pressButton('SelectorNotExist');
+    $this->assertNotNull($assert_session->waitForElementVisible('css', '#edit-selector-does-not-exist[data-has-focus]'));
+    $has_focus_id = $this->getSession()->evaluateScript('document.activeElement.id');
+    $this->assertEquals('edit-selector-does-not-exist', $has_focus_id);
+
+    // Confirm focus is moved to first tabbable element in a container.
+    $page->pressButton('focusFirstContainer');
+    $this->assertNotNull($assert_session->waitForElementVisible('css', '#edit-first-container-input[data-has-focus]'));
+    $has_focus_id = $this->getSession()->evaluateScript('document.activeElement.id');
+    $this->assertEquals('edit-first-container-input', $has_focus_id);
+
+    // Confirm focus is moved to first tabbable element in a form.
+    $page->pressButton('focusFirstForm');
+    $this->assertNotNull($assert_session->waitForElementVisible('css', '#ajax-test-focus-first-command-form #edit-first-input[data-has-focus]'));
+
+    // Confirm the form has more than one input to confirm that focus is moved
+    // to the first tabbable element in the container.
+    $this->assertNotNull($page->find('css', '#ajax-test-focus-first-command-form #edit-second-input'));
+    $has_focus_id = $this->getSession()->evaluateScript('document.activeElement.id');
+    $this->assertEquals('edit-first-input', $has_focus_id);
+
+    // Confirm that the selector provided will use the first match in the DOM as
+    // the container.
+    $page->pressButton('SelectorMultipleMatches');
+    $this->assertNotNull($assert_session->waitForElementVisible('css', '#edit-inside-same-selector-container-1[data-has-focus]'));
+    $this->assertNotNull($page->findById('edit-inside-same-selector-container-2'));
+    $this->assertNull($assert_session->waitForElementVisible('css', '#edit-inside-same-selector-container-2[data-has-focus]'));
+    $has_focus_id = $this->getSession()->evaluateScript('document.activeElement.id');
+    $this->assertEquals('edit-inside-same-selector-container-1', $has_focus_id);
+
+    // Confirm that if a container has no tabbable children, but is itself
+    // focusable, then that container receives focus.
+    $page->pressButton('focusableContainerNotTabbableChildren');
+    $this->assertNotNull($assert_session->waitForElementVisible('css', '#focusable-container-without-tabbable-children[data-has-focus]'));
+    $has_focus_id = $this->getSession()->evaluateScript('document.activeElement.id');
+    $this->assertEquals('focusable-container-without-tabbable-children', $has_focus_id);
+  }
+
+}

core/tests/Drupal/FunctionalJavascriptTests/Ajax/FormValuesTest.php

@@ -0,0 +1,128 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Drupal\FunctionalJavascriptTests\Ajax;
+
+use Drupal\FunctionalJavascriptTests\WebDriverTestBase;
+
+/**
+ * Tests that form values are properly delivered to AJAX callbacks.
+ *
+ * @group Ajax
+ */
+class FormValuesTest extends WebDriverTestBase {
+
+  /**
+   * {@inheritdoc}
+   */
+  protected static $modules = ['node', 'ajax_test', 'ajax_forms_test'];
+
+  /**
+   * {@inheritdoc}
+   */
+  protected $defaultTheme = 'stark';
+
+  /**
+   * {@inheritdoc}
+   */
+  protected function setUp(): void {
+    parent::setUp();
+    $this->drupalLogin($this->drupalCreateUser(['access content']));
+  }
+
+  /**
+   * Submits forms with select and checkbox elements via Ajax.
+   *
+   * @dataProvider formModeProvider
+   */
+  public function testSimpleAjaxFormValue($form_mode): void {
+    $this->drupalGet('ajax_forms_test_get_form');
+
+    $session = $this->getSession();
+    $assertSession = $this->assertSession();
+
+    // Run the test both in a dialog and not in a dialog.
+    if ($form_mode === 'direct') {
+      $this->drupalGet('ajax_forms_test_get_form');
+    }
+    else {
+      $this->drupalGet('ajax_forms_test_dialog_form_link');
+      $assertSession->waitForElementVisible('css', '[data-once="ajax"]');
+      $this->clickLink("Open form in $form_mode");
+      $this->assertNotEmpty($assertSession->waitForElementVisible('css', '.ui-dialog [data-drupal-selector="edit-select"]'));
+    }
+
+    // Verify form values of a select element.
+    foreach (['green', 'blue', 'red'] as $item) {
+      // Updating the field will trigger an AJAX request/response.
+      $session->getPage()->selectFieldOption('select', $item);
+
+      // The AJAX command in the response will update the DOM.
+      $select = $assertSession->waitForElement('css', "div#ajax_selected_color:contains('$item')");
+      $this->assertNotNull($select, "DataCommand has updated the page with a value of $item.");
+      $condition = "(typeof jQuery !== 'undefined' && jQuery('[data-drupal-selector=\"edit-select\"]').is(':focus'))";
+      $this->assertJsCondition($condition, 5000);
+    }
+
+    // Verify form values of a checkbox element.
+    $session->getPage()->checkField('checkbox');
+    $div0 = $this->assertSession()->waitForElement('css', "div#ajax_checkbox_value:contains('checked')");
+    $this->assertNotNull($div0, 'DataCommand updates the DOM as expected when a checkbox is selected');
+
+    $session->getPage()->uncheckField('checkbox');
+    $div1 = $this->assertSession()->waitForElement('css', "div#ajax_checkbox_value:contains('unchecked')");
+    $this->assertNotNull($div1, 'DataCommand updates the DOM as expected when a checkbox is de-selected');
+  }
+
+  /**
+   * Tests that AJAX elements with invalid callbacks return error code 500.
+   */
+  public function testSimpleInvalidCallbacksAjaxFormValue(): void {
+    $this->drupalGet('ajax_forms_test_get_form');
+
+    $session = $this->getSession();
+
+    // Ensure the test error log is empty before these tests.
+    $this->assertFileDoesNotExist(DRUPAL_ROOT . '/' . $this->siteDirectory . '/error.log');
+
+    // We're going to do some invalid requests. The JavaScript errors thrown
+    // whilst doing so are expected. Do not interpret them as a test failure.
+    $this->failOnJavascriptConsoleErrors = FALSE;
+
+    // We don't need to check for the X-Drupal-Ajax-Token header with these
+    // invalid requests.
+    foreach (['null', 'empty', 'nonexistent'] as $key) {
+      $element_name = 'select_' . $key . '_callback';
+      // Updating the field will trigger an AJAX request/response.
+      $session->getPage()->selectFieldOption($element_name, 'green');
+
+      // The select element is disabled as the AJAX request is issued.
+      $this->assertSession()->waitForElement('css', "select[name=\"$element_name\"]:disabled");
+
+      // The select element is enabled as the response is received.
+      $this->assertSession()->waitForElement('css', "select[name=\"$element_name\"]:enabled");
+      // Not using File API, a potential error must trigger a PHP warning, which
+      // should be logged in the error.log.
+      $this->assertFileExists(DRUPAL_ROOT . '/' . $this->siteDirectory . '/error.log');
+      $this->assertStringContainsString('"The specified #ajax callback is empty or not callable."', file_get_contents(DRUPAL_ROOT . '/' . $this->siteDirectory . '/error.log'));
+      // Remove error.log, so we have a clean slate for the next request.
+      unlink(\Drupal::root() . '/' . $this->siteDirectory . '/error.log');
+    }
+    // We need to reload the page to kill any unfinished AJAX calls before
+    // tearDown() is called.
+    $this->drupalGet('ajax_forms_test_get_form');
+  }
+
+  /**
+   * Data provider for testSimpleAjaxFormValue.
+   */
+  public static function formModeProvider() {
+    return [
+      ['direct'],
+      ['dialog'],
+      ['off canvas dialog'],
+    ];
+  }
+
+}

core/tests/Drupal/FunctionalJavascriptTests/Ajax/MessageCommandTest.php

@@ -0,0 +1,226 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Drupal\FunctionalJavascriptTests\Ajax;
+
+use Drupal\FunctionalJavascriptTests\WebDriverTestBase;
+use PHPUnit\Framework\ExpectationFailedException;
+
+/**
+ * Tests adding messages via AJAX command.
+ *
+ * @group Ajax
+ */
+class MessageCommandTest extends WebDriverTestBase {
+
+  /**
+   * {@inheritdoc}
+   */
+  protected static $modules = ['ajax_test'];
+
+  /**
+   * {@inheritdoc}
+   */
+  protected $defaultTheme = 'stark';
+
+  /**
+   * Tests AJAX MessageCommand use in a form.
+   */
+  public function testMessageCommand(): void {
+    $page = $this->getSession()->getPage();
+    $assert_session = $this->assertSession();
+
+    $this->drupalGet('ajax-test/message');
+    $page->pressButton('Make Message In Default Location');
+    $this->waitForMessageVisible('I am a message in the default location.');
+    $this->assertAnnounceContains('I am a message in the default location.');
+    $assert_session->elementsCount('css', '.messages__wrapper .messages', 1);
+
+    $page->pressButton('Make Message In Alternate Location');
+    $this->waitForMessageVisible('I am a message in an alternate location.', '#alternate-message-container');
+    $assert_session->pageTextContains('I am a message in the default location.');
+    $this->assertAnnounceContains('I am a message in an alternate location.');
+    $assert_session->elementsCount('css', '.messages__wrapper .messages', 1);
+    $assert_session->elementsCount('css', '#alternate-message-container .messages', 1);
+
+    $page->pressButton('Make Warning Message');
+    $this->waitForMessageVisible('I am a warning message in the default location.', NULL, 'warning');
+    $assert_session->pageTextNotContains('I am a message in the default location.');
+    $assert_session->elementsCount('css', '.messages__wrapper .messages', 1);
+    $assert_session->elementsCount('css', '#alternate-message-container .messages', 1);
+
+    $this->drupalGet('ajax-test/message');
+    // Test that by default, previous messages in a location are removed.
+    for ($i = 0; $i < 6; $i++) {
+      $page->pressButton('Make Message In Default Location');
+      $this->waitForMessageVisible('I am a message in the default location.');
+      $assert_session->elementsCount('css', '.messages__wrapper .messages', 1);
+
+      $page->pressButton('Make Warning Message');
+      $this->waitForMessageVisible('I am a warning message in the default location.', NULL, 'warning');
+      // Test that setting MessageCommand::$option['announce'] => '' suppresses
+      // screen reader announcement.
+      $this->assertAnnounceNotContains('I am a warning message in the default location.');
+      $this->waitForMessageRemoved('I am a message in the default location.');
+      $assert_session->elementsCount('css', '.messages__wrapper .messages', 1);
+    }
+
+    // Test that if MessageCommand::clearPrevious is FALSE, messages will not
+    // be cleared.
+    $this->drupalGet('ajax-test/message');
+    for ($i = 1; $i < 7; $i++) {
+      $page->pressButton('Make Message In Alternate Location');
+      $expected_count = $page->waitFor(10, function () use ($i, $page) {
+        return count($page->findAll('css', '#alternate-message-container .messages')) === $i;
+      });
+      $this->assertTrue($expected_count);
+      $this->assertAnnounceContains('I am a message in an alternate location.');
+    }
+  }
+
+  /**
+   * Tests methods in JsWebAssert related to status messages.
+   */
+  public function testJsStatusMessageAssertions(): void {
+    $page = $this->getSession()->getPage();
+
+    $this->drupalGet('ajax-test/message');
+
+    $page->pressButton('Make Message In Default Location');
+    $this->assertSession()->statusMessageContainsAfterWait('I am a message in the default location.');
+
+    $page->pressButton('Make Message In Alternate Location');
+    $this->assertSession()->statusMessageContainsAfterWait('I am a message in an alternate location.', 'status');
+
+    $page->pressButton('Make Warning Message');
+    $this->assertSession()->statusMessageContainsAfterWait('I am a warning message in the default location.', 'warning');
+
+    // Reload and test some negative assertions.
+    $this->drupalGet('ajax-test/message');
+
+    $page->pressButton('Make Message In Default Location');
+    // Use message that is not on page.
+    $this->assertSession()->statusMessageNotContainsAfterWait('This is not a real message');
+
+    $page->pressButton('Make Message In Alternate Location');
+    // Use message that exists but has the wrong type.
+    $this->assertSession()->statusMessageNotContainsAfterWait('I am a message in an alternate location.', 'warning');
+
+    // Test partial match.
+    $page->pressButton('Make Warning Message');
+    $this->assertSession()->statusMessageContainsAfterWait('I am a warning');
+
+    // One more reload to try with different arg combinations.
+    $this->drupalGet('ajax-test/message');
+
+    $page->pressButton('Make Message In Default Location');
+    $this->assertSession()->statusMessageExistsAfterWait();
+
+    $page->pressButton('Make Message In Alternate Location');
+    $this->assertSession()->statusMessageNotExistsAfterWait('error');
+
+    $page->pressButton('Make Warning Message');
+    $this->assertSession()->statusMessageExistsAfterWait('warning');
+
+    // Perform a few assertions that should fail. We can only call
+    // TestCase::expectException() once per test, so we make a few
+    // try/catch blocks. We pass a relatively short timeout because
+    // it is a waste of time to wait 10 seconds in these assertions
+    // that we fully expect to fail.
+    $expected_failure_occurred = FALSE;
+    try {
+      $this->assertSession()->statusMessageContainsAfterWait('Not a real message', NULL, 1000);
+    }
+    catch (ExpectationFailedException $e) {
+      $expected_failure_occurred = TRUE;
+    }
+    $this->assertTrue($expected_failure_occurred, 'JsWebAssert::statusMessageContainsAfterWait() did not fail when it should have failed.');
+
+    $expected_failure_occurred = FALSE;
+    try {
+      $this->assertSession()->statusMessageNotContainsAfterWait('I am a warning', NULL, 1000);
+    }
+    catch (ExpectationFailedException $e) {
+      $expected_failure_occurred = TRUE;
+    }
+    $this->assertTrue($expected_failure_occurred, 'JsWebAssert::statusMessageNotContainsAfterWait() did not fail when it should have failed.');
+
+    $expected_failure_occurred = FALSE;
+    try {
+      $this->assertSession()->statusMessageExistsAfterWait('error', 1000);
+    }
+    catch (ExpectationFailedException $e) {
+      $expected_failure_occurred = TRUE;
+    }
+    $this->assertTrue($expected_failure_occurred, 'JsWebAssert::statusMessageExistsAfterWait() did not fail when it should have failed.');
+
+    $expected_failure_occurred = FALSE;
+    try {
+      $this->assertSession()->statusMessageNotExistsAfterWait('warning', 1000);
+    }
+    catch (ExpectationFailedException $e) {
+      $expected_failure_occurred = TRUE;
+    }
+    $this->assertTrue($expected_failure_occurred, 'JsWebAssert::statusMessageNotExistsAfterWait() did not fail when it should have failed.');
+
+    // Tests passing a bad status type.
+    $this->expectException(\InvalidArgumentException::class);
+    $this->assertSession()->statusMessageExistsAfterWait('not a valid type');
+  }
+
+  /**
+   * Asserts that a message of the expected type appears.
+   *
+   * @param string $message
+   *   The expected message.
+   * @param string $selector
+   *   The selector for the element in which to check for the expected message.
+   * @param string $type
+   *   The expected type.
+   */
+  protected function waitForMessageVisible($message, $selector = '[data-drupal-messages]', $type = 'status') {
+    $this->assertNotEmpty($this->assertSession()->waitForElementVisible('css', $selector . ' .messages--' . $type . ':contains("' . $message . '")'));
+  }
+
+  /**
+   * Asserts that a message of the expected type is removed.
+   *
+   * @param string $message
+   *   The expected message.
+   * @param string $selector
+   *   The selector for the element in which to check for the expected message.
+   * @param string $type
+   *   The expected type.
+   */
+  protected function waitForMessageRemoved($message, $selector = '[data-drupal-messages]', $type = 'status') {
+    $this->assertNotEmpty($this->assertSession()->waitForElementRemoved('css', $selector . ' .messages--' . $type . ':contains("' . $message . '")'));
+  }
+
+  /**
+   * Checks for inclusion of text in #drupal-live-announce.
+   *
+   * @param string $expected_message
+   *   The text expected to be present in #drupal-live-announce.
+   *
+   * @internal
+   */
+  protected function assertAnnounceContains(string $expected_message): void {
+    $assert_session = $this->assertSession();
+    $this->assertNotEmpty($assert_session->waitForElement('css', "#drupal-live-announce:contains('$expected_message')"));
+  }
+
+  /**
+   * Checks for absence of the given text from #drupal-live-announce.
+   *
+   * @param string $expected_message
+   *   The text expected to be absent from #drupal-live-announce.
+   *
+   * @internal
+   */
+  protected function assertAnnounceNotContains(string $expected_message): void {
+    $assert_session = $this->assertSession();
+    $this->assertEmpty($assert_session->waitForElement('css', "#drupal-live-announce:contains('$expected_message')", 1000));
+  }
+
+}

core/tests/Drupal/FunctionalJavascriptTests/Ajax/MultiFormTest.php

@@ -0,0 +1,113 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Drupal\FunctionalJavascriptTests\Ajax;
+
+use Drupal\Core\Field\FieldStorageDefinitionInterface;
+use Drupal\field\Entity\FieldConfig;
+use Drupal\field\Entity\FieldStorageConfig;
+use Drupal\FunctionalJavascriptTests\WebDriverTestBase;
+
+/**
+ * Tests AJAX-enabled forms when multiple instances of the form are on a page.
+ *
+ * @group Ajax
+ */
+class MultiFormTest extends WebDriverTestBase {
+
+  /**
+   * {@inheritdoc}
+   */
+  protected static $modules = ['node', 'form_test'];
+
+  /**
+   * {@inheritdoc}
+   */
+  protected $defaultTheme = 'stark';
+
+  /**
+   * {@inheritdoc}
+   */
+  protected function setUp(): void {
+    parent::setUp();
+
+    $this->drupalCreateContentType(['type' => 'page', 'name' => 'Page']);
+
+    // Create a multi-valued field for 'page' nodes to use for Ajax testing.
+    $field_name = 'field_ajax_test';
+    FieldStorageConfig::create([
+      'entity_type' => 'node',
+      'field_name' => $field_name,
+      'type' => 'text',
+      'cardinality' => FieldStorageDefinitionInterface::CARDINALITY_UNLIMITED,
+    ])->save();
+    FieldConfig::create([
+      'field_name' => $field_name,
+      'entity_type' => 'node',
+      'bundle' => 'page',
+    ])->save();
+    \Drupal::service('entity_display.repository')->getFormDisplay('node', 'page', 'default')
+      ->setComponent($field_name, ['type' => 'text_textfield'])
+      ->save();
+
+    // Log in a user who can create 'page' nodes.
+    $this->drupalLogin($this->drupalCreateUser(['create page content']));
+  }
+
+  /**
+   * Tests that pages with the 'node_page_form' included twice work correctly.
+   */
+  public function testMultiForm(): void {
+    // HTML IDs for elements within the field are potentially modified with
+    // each Ajax submission, but these variables are stable and help target the
+    // desired elements.
+    $field_name = 'field_ajax_test';
+
+    $form_xpath = '//form[starts-with(@id, "node-page-form")]';
+    $field_xpath = '//div[contains(@class, "field--name-field-ajax-test")]';
+    $button_name = $field_name . '_add_more';
+    $button_xpath_suffix = '//input[@name="' . $button_name . '"]';
+    $field_items_xpath_suffix = '//input[@type="text"]';
+
+    // Ensure the initial page contains both node forms and the correct number
+    // of field items and "add more" button for the multi-valued field within
+    // each form.
+    $this->drupalGet('form-test/two-instances-of-same-form');
+
+    $session = $this->getSession();
+    $page = $session->getPage();
+    $fields = $page->findAll('xpath', $form_xpath . $field_xpath);
+    $this->assertCount(2, $fields);
+    foreach ($fields as $field) {
+      $this->assertCount(1, $field->findAll('xpath', '.' . $field_items_xpath_suffix), 'Found the correct number of field items on the initial page.');
+      $this->assertNotNull($field->find('xpath', '.' . $button_xpath_suffix), 'Found the "add more" button on the initial page.');
+    }
+
+    $this->assertSession()->pageContainsNoDuplicateId();
+
+    // Submit the "add more" button of each form twice. After each corresponding
+    // page update, ensure the same as above.
+
+    for ($i = 0; $i < 2; $i++) {
+      $forms = $page->findAll('xpath', $form_xpath);
+      foreach ($forms as $offset => $form) {
+        $button = $form->findButton('Add another item');
+        $this->assertNotNull($button, 'Add Another Item button exists');
+        $button->press();
+
+        // Wait for field to be added with ajax.
+        $this->assertNotEmpty($page->waitFor(10, function () use ($form, $i) {
+          return $form->findField('field_ajax_test[' . ($i + 1) . '][value]');
+        }));
+
+        // After AJAX request and response verify the correct number of text
+        // fields (including title), as well as the "Add another item" button.
+        $this->assertCount($i + 3, $form->findAll('css', 'input[type="text"]'), 'Found the correct number of field items after an AJAX submission.');
+        $this->assertNotEmpty($form->findButton('Add another item'), 'Found the "add more" button after an AJAX submission.');
+        $this->assertSession()->pageContainsNoDuplicateId();
+      }
+    }
+  }
+
+}

core/tests/Drupal/FunctionalJavascriptTests/Ajax/ThrobberTest.php

@@ -0,0 +1,103 @@
+<?php
+
+declare(strict_types=1);
+
+namespace Drupal\FunctionalJavascriptTests\Ajax;
+
+use Drupal\FunctionalJavascriptTests\WebDriverTestBase;
+
+/**
+ * Tests the throbber.
+ *
+ * @group Ajax
+ */
+class ThrobberTest extends WebDriverTestBase {
+
+  /**
+   * {@inheritdoc}
+   */
+  protected static $modules = [
+    'node',
+    'views',
+    'views_ui',
+    'views_ui_test_field',
+    'hold_test',
+    'block',
+  ];
+
+  /**
+   * {@inheritdoc}
+   */
+  protected $defaultTheme = 'stark';
+
+  /**
+   * Tests theming throbber element.
+   */
+  public function testThemingThrobberElement(): void {
+    $session = $this->getSession();
+    $web_assert = $this->assertSession();
+    $page = $session->getPage();
+    $admin_user = $this->drupalCreateUser([
+      'administer views',
+      'administer blocks',
+    ]);
+    $this->drupalLogin($admin_user);
+
+    $custom_ajax_progress_indicator_fullscreen = <<<JS
+      Drupal.theme.ajaxProgressIndicatorFullscreen = function () {
+        return '<div class="custom-ajax-progress-fullscreen"></div>';
+      };
+JS;
+    $custom_ajax_progress_throbber = <<<JS
+      Drupal.theme.ajaxProgressThrobber = function (message) {
+        return '<div class="custom-ajax-progress-throbber"></div>';
+      };
+JS;
+    $custom_ajax_progress_message = <<<JS
+      Drupal.theme.ajaxProgressMessage = function (message) {
+        return '<div class="custom-ajax-progress-message">Hold door!</div>';
+      };
+JS;
+
+    $this->drupalGet('admin/structure/views/view/content');
+    $web_assert->assertNoElementAfterWait('css', '.ajax-progress-fullscreen');
+
+    // Test theming fullscreen throbber.
+    $session->executeScript($custom_ajax_progress_indicator_fullscreen);
+    hold_test_response(TRUE);
+    $page->clickLink('Content: Published (grouped)');
+    $this->assertNotNull($web_assert->waitForElement('css', '.custom-ajax-progress-fullscreen'), 'Custom ajaxProgressIndicatorFullscreen.');
+    hold_test_response(FALSE);
+    $web_assert->assertNoElementAfterWait('css', '.custom-ajax-progress-fullscreen');
+
+    // Test theming throbber message.
+    $web_assert->waitForElementVisible('css', '[data-drupal-selector="edit-options-group-info-add-group"]');
+    $session->executeScript($custom_ajax_progress_message);
+    hold_test_response(TRUE);
+    $page->pressButton('Add another item');
+    $this->assertNotNull($web_assert->waitForElement('css', '.ajax-progress-throbber .custom-ajax-progress-message'), 'Custom ajaxProgressMessage.');
+    hold_test_response(FALSE);
+    $web_assert->assertNoElementAfterWait('css', '.ajax-progress-throbber');
+
+    // Test theming throbber.
+    $web_assert->waitForElementVisible('css', '[data-drupal-selector="edit-options-group-info-group-items-3-title"]');
+    $session->executeScript($custom_ajax_progress_throbber);
+    hold_test_response(TRUE);
+    $page->pressButton('Add another item');
+    $this->assertNotNull($web_assert->waitForElement('css', '.custom-ajax-progress-throbber'), 'Custom ajaxProgressThrobber.');
+    hold_test_response(FALSE);
+    $web_assert->assertNoElementAfterWait('css', '.custom-ajax-progress-throbber');
+
+    // Test progress throbber position on a dropbutton in a table display.
+    $this->drupalGet('/admin/structure/block');
+    $this->clickLink('Place block');
+    $web_assert->assertWaitOnAjaxRequest();
+    $this->assertNotEmpty($web_assert->waitForElementVisible('css', '#drupal-modal'));
+    hold_test_response(TRUE);
+    $this->clickLink('Place block');
+    $this->assertNotNull($web_assert->waitForElement('xpath', '//div[contains(@class, "dropbutton-wrapper")]/following-sibling::div[contains(@class, "ajax-progress-throbber")]'));
+    hold_test_response(FALSE);
+    $web_assert->assertNoElementAfterWait('css', '.ajax-progress-throbber');
+  }
+
+}