diff --git a/core/modules/ckeditor5/tests/src/FunctionalJavascript/ImageTestBase.php b/core/modules/ckeditor5/tests/src/FunctionalJavascript/ImageTestBase.php index 6332c5c5e5303ad9a7c62856f5a6022a1cbc7f5c..42863411758f2b2962463e73620171aae1c1c4e5 100644 --- a/core/modules/ckeditor5/tests/src/FunctionalJavascript/ImageTestBase.php +++ b/core/modules/ckeditor5/tests/src/FunctionalJavascript/ImageTestBase.php @@ -86,14 +86,8 @@ protected function addImage() { $this->waitForEditor(); $this->pressEditorButton('Insert image'); $panel = $page->find('css', '.ck-dropdown__panel.ck-image-insert__panel'); - // Do not use setValue method as it triggers a blur event by default that - // closes the CKEditor 5 panel, making it impossible to click on the Insert - // button. - $this->getSession()->executeScript(' - const input = document.querySelector(".ck-dropdown__panel.ck-image-insert__panel input[type=text]"); - input.value = "' . $src . '"; - input.dispatchEvent(new Event("input", {bubbles:true})); - '); + $src_input = $panel->find('css', 'input[type=text]'); + $src_input->setValue($src); $panel->find('xpath', "//button[span[text()='Insert']]")->click(); } diff --git a/core/modules/ckeditor5/tests/src/FunctionalJavascript/ImageUrlTest.php b/core/modules/ckeditor5/tests/src/FunctionalJavascript/ImageUrlTest.php index 524b13db9548f7ea281c9c4475558e0704cbc929..6b0e38fc96024cbce66dd7d0ef393c3fa128568b 100644 --- a/core/modules/ckeditor5/tests/src/FunctionalJavascript/ImageUrlTest.php +++ b/core/modules/ckeditor5/tests/src/FunctionalJavascript/ImageUrlTest.php @@ -104,14 +104,8 @@ public function testImageUrlWidget(): void { $this->pressEditorButton('Insert image'); $panel = $page->find('css', '.ck-dropdown__panel.ck-image-insert__panel'); - // Do not use setValue method as it triggers a blur event by default that - // closes the CKEditor 5 panel, making it impossible to click on the Insert - // button. - $this->getSession()->executeScript(' - const input = document.querySelector(".ck-dropdown__panel.ck-image-insert__panel input[type=text]"); - input.value = "' . $src . '"; - input.dispatchEvent(new Event("input", {bubbles:true})); - '); + $src_input = $panel->find('css', 'input[type=text]'); + $src_input->setValue($src); $panel->find('xpath', "//button[span[text()='Insert']]")->click(); $this->assertNotEmpty($assert_session->waitForElementVisible('css', $image_selector)); diff --git a/core/tests/Drupal/FunctionalJavascriptTests/DrupalSelenium2Driver.php b/core/tests/Drupal/FunctionalJavascriptTests/DrupalSelenium2Driver.php index 537de3c476ad70b764c3f98a20851b3baa394039..0e1a9b4c07b79f226f3d1625a0e5d62805a15c21 100644 --- a/core/tests/Drupal/FunctionalJavascriptTests/DrupalSelenium2Driver.php +++ b/core/tests/Drupal/FunctionalJavascriptTests/DrupalSelenium2Driver.php @@ -142,6 +142,24 @@ public function setValue($xpath, $value) { $not_clickable_exception = NULL; $result = $this->waitFor(10, function () use (&$not_clickable_exception, $xpath, $value) { try { + // \Behat\Mink\Driver\Selenium2Driver::setValue() will call .blur() on + // the element, modify that to trigger the "input" and "change" events + // instead. They indicate the value has changed, rather than implying + // user focus changes. + $this->executeJsOnXpath($xpath, <<<JS +var node = {{ELEMENT}}; +var original = node.blur; +node.blur = function() { + node.dispatchEvent(new Event("input", {bubbles:true})); + node.dispatchEvent(new Event("change", {bubbles:true})); + // Do not wait for the debounce, which only triggers the 'formUpdated` event + // up to once every 0.3 seconds. In tests, no humans are typing, hence there + // is no need to debounce. + // @see Drupal.behaviors.formUpdated + node.dispatchEvent(new Event("formUpdated", {bubbles:true})); + node.blur = original; +}; +JS); parent::setValue($xpath, $value); return TRUE; }