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/node/node.preview.js b/core/modules/node/node.preview.js
index ec48832..a7d9dca 100644
--- a/core/modules/node/node.preview.js
+++ b/core/modules/node/node.preview.js
@@ -51,7 +51,7 @@
 
       var $preview = $(context).find('.content').once('node-preview');
       if ($(context).find('.node-preview-container').length) {
-        $preview.on('click.preview', 'a:not([href^=#], #edit-backlink, #toolbar-administration a)', clickPreviewModal);
+        $preview.on('click.preview', 'a:not([href^=#], #edit-backlink, [data-drupal-selector="toolbar-administration"] a)', clickPreviewModal);
       }
     },
     detach: function (context, settings, trigger) {
diff --git a/core/modules/simpletest/simpletest.js b/core/modules/simpletest/simpletest.js
index ed67ff5..b33f2f1 100644
--- a/core/modules/simpletest/simpletest.js
+++ b/core/modules/simpletest/simpletest.js
@@ -107,14 +107,14 @@
           // Indicate that a search has been performed, and hide the
           // "select all" checkbox.
           searched = true;
-          $('#simpletest-form-table thead th.select-all input').hide();
+          $('[data-drupal-selector="simpletest-form-table"] thead th.select-all input').hide();
 
           $rows.each(showTestRow);
         }
         // Restore to the original state if any searching has occurred.
         else if (searched) {
           searched = false;
-          $('#simpletest-form-table thead th.select-all input').show();
+          $('[data-drupal-selector="simpletest-form-table"] thead th.select-all input').show();
           // Restore all rows to their original display state.
           $rows.css('display', '');
         }
diff --git a/core/modules/simpletest/src/Form/SimpletestTestForm.php b/core/modules/simpletest/src/Form/SimpletestTestForm.php
index a46be86..35e8307 100644
--- a/core/modules/simpletest/src/Form/SimpletestTestForm.php
+++ b/core/modules/simpletest/src/Form/SimpletestTestForm.php
@@ -93,6 +93,7 @@ public function buildForm(array $form, FormStateInterface $form_state) {
     $form['tests'] = array(
       '#type' => 'table',
       '#id' => 'simpletest-form-table',
+      '#data-drupal-selector' => 'simpletest-form-table',
       '#tableselect' => TRUE,
       '#header' => array(
         array('data' => $this->t('Test'), 'class' => array('simpletest-test-label')),
diff --git a/core/modules/toolbar/js/toolbar.js b/core/modules/toolbar/js/toolbar.js
index 9a19205..3911cb6 100644
--- a/core/modules/toolbar/js/toolbar.js
+++ b/core/modules/toolbar/js/toolbar.js
@@ -47,7 +47,7 @@
         return;
       }
       // Process the administrative toolbar.
-      $(context).find('#toolbar-administration').once('toolbar').each(function () {
+      $(context).find('[data-drupal-selector="toolbar-administration"]').once('toolbar').each(function () {
 
         // Establish the toolbar models and views.
         var model = Drupal.toolbar.models.toolbarModel = new Drupal.toolbar.ToolbarModel({
diff --git a/core/modules/toolbar/src/Element/Toolbar.php b/core/modules/toolbar/src/Element/Toolbar.php
index 0db1166..b4286be 100644
--- a/core/modules/toolbar/src/Element/Toolbar.php
+++ b/core/modules/toolbar/src/Element/Toolbar.php
@@ -39,6 +39,7 @@ public function getInfo() {
         // simpletest tests listing which produces a checkbox with attribute
         // id="toolbar".
         'id' => 'toolbar-administration',
+        'data-drupal-selector' => 'toolbar-administration',
         'role' => 'group',
         'aria-label' => $this->t('Site administration toolbar'),
       ),
@@ -47,6 +48,7 @@ public function getInfo() {
         '#heading' => $this->t('Toolbar items'),
         '#attributes' => array(
           'id' => 'toolbar-bar',
+          'data-drupal-selector' => 'toolbar-bar',
           'role' => 'navigation',
           'aria-label' => $this->t('Toolbar items'),
         ),
diff --git a/core/modules/tour/js/tour.js b/core/modules/tour/js/tour.js
index c751329..026c7d8 100644
--- a/core/modules/tour/js/tour.js
+++ b/core/modules/tour/js/tour.js
@@ -31,7 +31,7 @@
       $('body').once('tour').each(function () {
         var model = new Drupal.tour.models.StateModel();
         new Drupal.tour.views.ToggleTourView({
-          el: $(context).find('#toolbar-tab-tour'),
+          el: $(context).find('[data-drupal-selector="toolbar-tab-tour"]'),
           model: model
         });
 
@@ -42,7 +42,7 @@
           })
           // Initialization: check whether a tour is available on the current
           // page.
-          .set('tour', $(context).find('ol#tour'));
+          .set('tour', $(context).find('ol[data-drupal-selector="tour"]'));
 
         // Start the tour immediately if toggled via query string.
         if (/tour=?/i.test(queryString)) {
@@ -237,7 +237,7 @@
           }
           // Remove tip from the DOM if there is no corresponding page element.
           if ((!itemId && !itemClass) ||
-            (itemId && $document.find('#' + itemId).length) ||
+            (itemId && $document.find('[data-drupal-selector="' + itemId + '"]').length) ||
             (itemClass && $document.find('.' + itemClass).length)) {
             return;
           }
diff --git a/core/modules/tour/tour.module b/core/modules/tour/tour.module
index a71058b..7eec35b 100644
--- a/core/modules/tour/tour.module
+++ b/core/modules/tour/tour.module
@@ -60,6 +60,7 @@ function tour_toolbar() {
     '#wrapper_attributes' => array(
       'class' => array('tour-toolbar-tab', 'hidden'),
       'id' => 'toolbar-tab-tour',
+      'data-drupal-selector' => 'toolbar-tab-tour',
     ),
     '#attached' => array(
       'library' => array(