diff --git a/core/modules/block/src/BlockForm.php b/core/modules/block/src/BlockForm.php
index 8c13bbb..5f7e35d 100644
--- a/core/modules/block/src/BlockForm.php
+++ b/core/modules/block/src/BlockForm.php
@@ -240,6 +240,7 @@ protected function buildVisibilityInterface(array $form, FormStateInterface $for
 
     if (isset($form['node_type'])) {
       $form['node_type']['#title'] = $this->t('Content types');
+      $form['node_type']['#attributes']['data-drupal-selector'] = 'visibility-node-type';
       $form['node_type']['bundles']['#title'] = $this->t('Content types');
       $form['node_type']['negate']['#type'] = 'value';
       $form['node_type']['negate']['#title_display'] = 'invisible';
@@ -247,12 +248,14 @@ protected function buildVisibilityInterface(array $form, FormStateInterface $for
     }
     if (isset($form['user_role'])) {
       $form['user_role']['#title'] = $this->t('Roles');
+      $form['user_role']['#attributes']['data-drupal-selector'] = 'visibility-user-role';
       unset($form['user_role']['roles']['#description']);
       $form['user_role']['negate']['#type'] = 'value';
       $form['user_role']['negate']['#value'] = $form['user_role']['negate']['#default_value'];
     }
     if (isset($form['request_path'])) {
       $form['request_path']['#title'] = $this->t('Pages');
+      $form['request_path']['#attributes']['data-drupal-selector'] = 'visibility-request-path';
       $form['request_path']['negate']['#type'] = 'radios';
       $form['request_path']['negate']['#default_value'] = (int) $form['request_path']['negate']['#default_value'];
       $form['request_path']['negate']['#title_display'] = 'invisible';
@@ -262,6 +265,7 @@ protected function buildVisibilityInterface(array $form, FormStateInterface $for
       ];
     }
     if (isset($form['language'])) {
+      $form['language']['#attributes']['data-drupal-selector'] = 'visibility-language';
       $form['language']['negate']['#type'] = 'value';
       $form['language']['negate']['#value'] = $form['language']['negate']['#default_value'];
     }
diff --git a/core/modules/block/src/BlockListBuilder.php b/core/modules/block/src/BlockListBuilder.php
index b92e7ae..4b7262a 100644
--- a/core/modules/block/src/BlockListBuilder.php
+++ b/core/modules/block/src/BlockListBuilder.php
@@ -175,6 +175,7 @@ protected function buildBlocksForm() {
       ),
       '#attributes' => array(
         'id' => 'blocks',
+        'data-drupal-selector' => 'blocks',
       ),
     );
 
diff --git a/core/modules/color/color.js b/core/modules/color/color.js
index 437dffe..40635c5 100644
--- a/core/modules/color/color.js
+++ b/core/modules/color/color.js
@@ -21,7 +21,7 @@
       var j;
       var colors;
       // This behavior attaches by ID, so is only valid once on a page.
-      var form = $(context).find('#system-theme-settings .color-form').once('color');
+      var form = $(context).find('[data-drupal-selector="system-theme-settings"]').find('.color-form').once('color');
       if (form.length === 0) {
         return;
       }
@@ -50,7 +50,7 @@
         if (settings.gradients.hasOwnProperty(i)) {
           // Add element to display the gradient.
           $('.color-preview').once('color').append('<div id="gradient-' + i + '"></div>');
-          var gradient = $('.color-preview #gradient-' + i);
+          var gradient = $('.color-preview').find('[data-drupal-selector="gradient-' + i + '"]');
           // Add height of current gradient to the list (divided by 10).
           height.push(parseInt(gradient.css('height'), 10) / 10);
           // Add width of current gradient to the list (divided by 10).
@@ -66,7 +66,7 @@
       }
 
       // Set up colorScheme selector.
-      form.find('#edit-scheme').on('change', function () {
+      form.find('[data-drupal-selector="edit-scheme"]').on('change', function () {
         var schemes = settings.color.schemes;
         var colorScheme = this.options[this.selectedIndex].value;
         if (colorScheme !== '' && schemes[colorScheme]) {
@@ -74,7 +74,7 @@
           colors = schemes[colorScheme];
           for (var fieldName in colors) {
             if (colors.hasOwnProperty(fieldName)) {
-              callback($('#edit-palette-' + fieldName), colors[fieldName], false, true);
+              callback($('[data-drupal-selector="edit-palette-' + fieldName + '"]'), colors[fieldName], false, true);
             }
           }
           preview();
@@ -206,7 +206,7 @@
        * Resets the color scheme selector.
        */
       function resetScheme() {
-        form.find('#edit-scheme').each(function () {
+        form.find('[data-drupal-selector="edit-scheme"]').each(function () {
           this.selectedIndex = this.options.length - 1;
         });
       }
diff --git a/core/modules/color/preview.js b/core/modules/color/preview.js
index 551cfd7..5e959fb 100644
--- a/core/modules/color/preview.js
+++ b/core/modules/color/preview.js
@@ -37,8 +37,8 @@
       form.find('.color-preview').css('backgroundColor', form.find('.color-palette input[name="palette[base]"]').val());
 
       // Text preview.
-      form.find('#text').css('color', form.find('.color-palette input[name="palette[text]"]').val());
-      form.find('#text a, #text h2').css('color', form.find('.color-palette input[name="palette[link]"]').val());
+      form.find('[data-drupal-selector="text"]').css('color', form.find('.color-palette input[name="palette[text]"]').val());
+      form.find('[data-drupal-selector="text"] a, [data-drupal-selector="text"] h2').css('color', form.find('.color-palette input[name="palette[link]"]').val());
 
       function gradientLineColor(i, element) {
         for (var k in accum) {
@@ -65,7 +65,7 @@
             }
             accum = color_start;
             // Render gradient lines.
-            form.find('#gradient-' + i + ' > div').each(gradientLineColor);
+            form.find('[data-drupal-selector="gradient-' + i + '"] > div').each(gradientLineColor);
           }
         }
       }
diff --git a/core/modules/language/language.admin.js b/core/modules/language/language.admin.js
index cedd78d..0d7addd 100644
--- a/core/modules/language/language.admin.js
+++ b/core/modules/language/language.admin.js
@@ -17,7 +17,7 @@
    */
   Drupal.behaviors.negotiationLanguage = {
     attach: function () {
-      var $configForm = $('#language-negotiation-configure-form');
+      var $configForm = $('[data-drupal-selector="language-negotiation-configure-form"]');
       var inputSelector = 'input[name$="[configurable]"]';
       // Given a customization checkbox derive the language type being changed.
       function toggleTable(checkbox) {
diff --git a/core/modules/language/src/Form/NegotiationConfigureForm.php b/core/modules/language/src/Form/NegotiationConfigureForm.php
index 7f23045..7b0793e 100644
--- a/core/modules/language/src/Form/NegotiationConfigureForm.php
+++ b/core/modules/language/src/Form/NegotiationConfigureForm.php
@@ -134,6 +134,9 @@ public function buildForm(array $form, FormStateInterface $form_state) {
       '#theme' => 'language_negotiation_configure_form',
       '#language_types_info' => $this->languageManager->getDefinedLanguageTypesInfo(),
       '#language_negotiation_info' => $this->negotiator->getNegotiationMethods(),
+      '#attributes' => [
+        'data-drupal-selector' => 'language-negotiation-configure-form',
+      ]
     );
     $form['#language_types'] = array();