diff --git a/core/modules/image/src/Tests/ImageAdminStylesTest.php b/core/modules/image/src/Tests/ImageAdminStylesTest.php
index 38fd984876..b1927db97f 100644
--- a/core/modules/image/src/Tests/ImageAdminStylesTest.php
+++ b/core/modules/image/src/Tests/ImageAdminStylesTest.php
@@ -290,47 +290,6 @@ public function testStyle() {
 
   }
 
-  /**
-   * Tests editing Ajax-enabled image effect forms.
-   */
-  public function testAjaxEnabledEffectForm() {
-    $admin_path = 'admin/config/media/image-styles';
-
-    // Setup a style to be created and effects to add to it.
-    $style_name = strtolower($this->randomMachineName(10));
-    $style_label = $this->randomString();
-    $style_path = $admin_path . '/manage/' . $style_name;
-    $effect_edit = [
-      'data[test_parameter]' => 100,
-    ];
-
-    // Add style form.
-    $edit = [
-      'name' => $style_name,
-      'label' => $style_label,
-    ];
-    $this->drupalPostForm($admin_path . '/add', $edit, t('Create new style'));
-    $this->assertRaw(t('Style %name was created.', ['%name' => $style_label]));
-
-    // Add two Ajax-enabled test effects.
-    $this->drupalPostForm($style_path, ['new' => 'image_module_test_ajax'], t('Add'));
-    $this->drupalPostForm(NULL, $effect_edit, t('Add effect'));
-    $this->drupalPostForm($style_path, ['new' => 'image_module_test_ajax'], t('Add'));
-    $this->drupalPostForm(NULL, $effect_edit, t('Add effect'));
-
-    // Load the saved image style.
-    $style = ImageStyle::load($style_name);
-
-    // Edit back the effects.
-    foreach ($style->getEffects() as $uuid => $effect) {
-      $effect_path = $admin_path . '/manage/' . $style_name . '/effects/' . $uuid;
-      $this->drupalGet($effect_path);
-      $this->drupalPostAjaxForm(NULL, $effect_edit, ['op' => t('Ajax refresh')]);
-      $this->drupalPostForm(NULL, $effect_edit, t('Update effect'));
-    }
-
-  }
-
   /**
    * Test deleting a style and choosing a replacement style.
    */
diff --git a/core/modules/image/tests/src/FunctionalJavascript/ImageAdminStylesTest.php b/core/modules/image/tests/src/FunctionalJavascript/ImageAdminStylesTest.php
new file mode 100644
index 0000000000..32ecafbe56
--- /dev/null
+++ b/core/modules/image/tests/src/FunctionalJavascript/ImageAdminStylesTest.php
@@ -0,0 +1,83 @@
+<?php
+
+namespace Drupal\Tests\image\FunctionalJavascript;
+
+use Drupal\Component\Utility\Xss;
+use Drupal\Core\Render\Markup;
+use Drupal\FunctionalJavascriptTests\JavascriptTestBase;
+use Drupal\image\Entity\ImageStyle;
+
+/**
+ * Tests creation, deletion, and editing of image styles and effects.
+ *
+ * @group image
+ */
+class ImageAdminStylesTest extends JavascriptTestBase {
+
+  /**
+   * Modules to enable.
+   *
+   * @var array
+   */
+  public static $modules = ['image', 'image_module_test'];
+
+  /**
+   * {@inheritdoc}
+   */
+  protected function setUp() {
+    parent::setUp();
+
+    $this->drupalLogin($this->drupalCreateUser([
+      'access administration pages',
+      'administer image styles',
+    ]));
+  }
+
+  /**
+   * Tests editing Ajax-enabled image effect forms.
+   */
+  public function testAjaxEnabledEffectForm() {
+    $admin_path = 'admin/config/media/image-styles';
+    $page = $this->getSession()->getPage();
+    $assert_session = $this->assertSession();
+
+    // Setup a style to be created and effects to add to it.
+    $style_name = strtolower($this->randomMachineName(10));
+    $style_label = $this->randomString();
+    $style_path = $admin_path . '/manage/' . $style_name;
+    $effect_edit = [
+      'data[test_parameter]' => '100',
+    ];
+
+    // Add style form.
+    $edit = [
+      'name' => $style_name,
+      'label' => $style_label,
+    ];
+    $this->drupalPostForm($admin_path . '/add', $edit, t('Create new style'));
+
+    // Fix HTML entities to simulate what the user sees.
+    $safe_label = Markup::create(Xss::filter($style_label));
+    $this->assertRaw(t('Style %name was created.', ['%name' => $safe_label]));
+
+    // Add two Ajax-enabled test effects.
+    $this->drupalPostForm($style_path, ['new' => 'image_module_test_ajax'], t('Add'));
+    $this->drupalPostForm(NULL, $effect_edit, t('Add effect'));
+    $this->drupalPostForm($style_path, ['new' => 'image_module_test_ajax'], t('Add'));
+    $this->drupalPostForm(NULL, $effect_edit, t('Add effect'));
+
+    // Load the saved image style.
+    $style = ImageStyle::load($style_name);
+
+    // Edit back the effects.
+    foreach ($style->getEffects() as $uuid => $effect) {
+      $effect_path = $admin_path . '/manage/' . $style_name . '/effects/' . $uuid;
+      $this->drupalGet($effect_path);
+      $page->fillField(key($effect_edit), current($effect_edit));
+      $page->pressButton(t('Ajax refresh'));
+      $assert_session->waitForElement('css', '.ajax-new-content');
+      $this->drupalPostForm(NULL, $effect_edit, t('Update effect'));
+    }
+  }
+
+}