diff --git a/core/modules/block/js/block.admin.js b/core/modules/block/js/block.admin.js
index d301ade..c102e8c 100644
--- a/core/modules/block/js/block.admin.js
+++ b/core/modules/block/js/block.admin.js
@@ -75,7 +75,7 @@
   Drupal.behaviors.blockHighlightPlacement = {
     attach: function (context, settings) {
       if (settings.blockPlacement) {
-        $('#blocks').once('block-highlight').each(function () {
+        $(context).find('[data-drupal-selector="blocks"]').once('block-highlight').each(function () {
           var $container = $(this);
           // Just scrolling the document.body will not work in Firefox. The html
           // element is needed as well.
diff --git a/core/modules/block/js/block.js b/core/modules/block/js/block.js
index c3a4d0d..d72fc61 100644
--- a/core/modules/block/js/block.js
+++ b/core/modules/block/js/block.js
@@ -27,9 +27,9 @@
         return vals.join(', ');
       }
 
-      $('#edit-visibility-node-type, #edit-visibility-language, #edit-visibility-user-role').drupalSetSummary(checkboxesSummary);
+      $('[data-drupal-selector="visibility-node-type"], [data-drupal-selector="visibility-language"], [data-drupal-selector="visibility-user-role"]').drupalSetSummary(checkboxesSummary);
 
-      $('#edit-visibility-request-path').drupalSetSummary(function (context) {
+      $('[data-drupal-selector="visibility-request-path"]').drupalSetSummary(function (context) {
         var $pages = $(context).find('textarea[name="visibility[request_path][pages]"]');
         if (!$pages.val()) {
           return Drupal.t('Not restricted');
@@ -54,7 +54,7 @@
         return;
       }
 
-      var table = $('#blocks');
+      var table = $('[data-drupal-selector="blocks"]');
       var tableDrag = Drupal.tableDrag.blocks; // Get the blocks tableDrag object.
 
       // Add a handler for when a row is swapped, update empty regions.
diff --git a/core/modules/block/src/BlockForm.php b/core/modules/block/src/BlockForm.php
index 1aefa68..8fd15cc 100644
--- a/core/modules/block/src/BlockForm.php
+++ b/core/modules/block/src/BlockForm.php
@@ -233,6 +233,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';
@@ -240,12 +241,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';
@@ -255,6 +258,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 196713a..429f8ba 100644
--- a/core/modules/block/src/BlockListBuilder.php
+++ b/core/modules/block/src/BlockListBuilder.php
@@ -177,6 +177,7 @@ public function buildForm(array $form, FormStateInterface $form_state) {
       ),
       '#attributes' => array(
         'id' => 'blocks',
+        'data-drupal-selector' => 'blocks',
       ),
     );
 
diff --git a/core/modules/color/color.js b/core/modules/color/color.js
index c177c4c..c3bc951 100644
--- a/core/modules/color/color.js
+++ b/core/modules/color/color.js
@@ -13,7 +13,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;
       }
@@ -42,7 +42,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).
@@ -57,7 +57,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]) {
@@ -65,7 +65,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();
@@ -175,7 +175,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 f121ade..96d8f61 100644
--- a/core/modules/color/preview.js
+++ b/core/modules/color/preview.js
@@ -15,8 +15,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) {
@@ -43,7 +43,7 @@
             }
             accum = color_start;
             // Render gradient lines.
-            form.find('#gradient-' + i + ' > div').each(gradientLineColor);
+            form.find('[data-drupal-selector="gradient-' + i + '"] > div').each(gradientLineColor);
           }
         }
       }