Bug 1531315 - Rename aboutdebugging test classnames from js-* to qa-* r=Ola
authorJulian Descottes <jdescottes@mozilla.com>
Thu, 02 May 2019 10:14:47 +0000
changeset 531077 3e3bc1430b8284c8fe7e0a30b5f6702d5a48e041
parent 531076 3ce407a093087045f4eab069aecc55c0bbb972b9
child 531078 082c0dba73cbd801b3a17409723e128c7c075009
push id11265
push userffxbld-merge
push dateMon, 13 May 2019 10:53:39 +0000
treeherdermozilla-beta@77e0fe8dbdd3 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersOla
bugs1531315
milestone68.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1531315 - Rename aboutdebugging test classnames from js-* to qa-* r=Ola Differential Revision: https://phabricator.services.mozilla.com/D28946
devtools/client/aboutdebugging-new/src/components/CompatibilityWarning.js
devtools/client/aboutdebugging-new/src/components/ConnectionPromptSetting.js
devtools/client/aboutdebugging-new/src/components/ExtensionDebugSetting.js
devtools/client/aboutdebugging-new/src/components/ProfilerDialog.js
devtools/client/aboutdebugging-new/src/components/RuntimeActions.js
devtools/client/aboutdebugging-new/src/components/RuntimeInfo.js
devtools/client/aboutdebugging-new/src/components/RuntimePage.js
devtools/client/aboutdebugging-new/src/components/ServiceWorkersWarning.js
devtools/client/aboutdebugging-new/src/components/connect/ConnectPage.js
devtools/client/aboutdebugging-new/src/components/connect/NetworkLocationsForm.js
devtools/client/aboutdebugging-new/src/components/connect/NetworkLocationsList.js
devtools/client/aboutdebugging-new/src/components/debugtarget/DebugTargetItem.js
devtools/client/aboutdebugging-new/src/components/debugtarget/DebugTargetList.js
devtools/client/aboutdebugging-new/src/components/debugtarget/DebugTargetPane.js
devtools/client/aboutdebugging-new/src/components/debugtarget/ExtensionDetail.js
devtools/client/aboutdebugging-new/src/components/debugtarget/InspectAction.js
devtools/client/aboutdebugging-new/src/components/debugtarget/ServiceWorkerAction.js
devtools/client/aboutdebugging-new/src/components/debugtarget/ServiceWorkerAdditionalActions.js
devtools/client/aboutdebugging-new/src/components/debugtarget/TemporaryExtensionAdditionalActions.js
devtools/client/aboutdebugging-new/src/components/debugtarget/TemporaryExtensionDetail.js
devtools/client/aboutdebugging-new/src/components/debugtarget/TemporaryExtensionInstallSection.js
devtools/client/aboutdebugging-new/src/components/debugtarget/TemporaryExtensionInstaller.js
devtools/client/aboutdebugging-new/src/components/debugtarget/WorkerDetail.js
devtools/client/aboutdebugging-new/src/components/shared/Message.js
devtools/client/aboutdebugging-new/src/components/sidebar/RefreshDevicesButton.js
devtools/client/aboutdebugging-new/src/components/sidebar/Sidebar.js
devtools/client/aboutdebugging-new/src/components/sidebar/SidebarItem.js
devtools/client/aboutdebugging-new/src/components/sidebar/SidebarRuntimeItem.js
devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_addons_debug_setting_thisfirefox.js
devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_addons_debug_setting_usb.js
devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_addons_manifest_url.js
devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_addons_remote_runtime.js
devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_addons_temporary_addon_buttons.js
devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_addons_temporary_id_message.js
devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_addons_temporary_install_error.js
devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_addons_temporary_reload_error.js
devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_addons_warnings.js
devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_connect_networklocations.js
devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_connect_toggle_usb_devices.js
devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_connection_prompt_setting.js
devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_debug-target-pane_collapsibilities_interaction.js
devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_debug-target-pane_empty.js
devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_devtools.js
devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_devtoolstoolbox_focus.js
devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_devtoolstoolbox_target_destroyed.js
devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_message_close.js
devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_navigate.js
devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_persist_connection.js
devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_profiler_dialog.js
devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_real_usb_runtime_page_runtime_info.js
devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_routes.js
devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_runtime_compatibility_warning.js
devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_runtime_disconnect_remote_runtime.js
devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_runtime_remote_runtime_buttons.js
devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_runtime_usbclient_closed.js
devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_select_network_runtime.js
devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_select_page_with_serviceworker.js
devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_serviceworker_fetch_flag.js
devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_serviceworker_multie10s.js
devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_serviceworker_not_compatible.js
devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_serviceworker_push.js
devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_serviceworker_pushservice_url.js
devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_serviceworker_runtime-page.js
devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_serviceworker_start.js
devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_serviceworker_status.js
devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_serviceworker_timeout.js
devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_serviceworker_unregister.js
devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_sidebar_connection_state.js
devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_sidebar_network_runtimes.js
devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_sidebar_usb_runtime_connect.js
devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_sidebar_usb_runtime_refresh.js
devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_sidebar_usb_runtime_select.js
devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_sidebar_usb_status.js
devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_sidebar_usb_unavailable_runtime.js
devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_tab_favicons.js
devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_telemetry_inspect.js
devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_telemetry_navigate.js
devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_telemetry_runtime_actions.js
devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_thisfirefox.js
devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_thisfirefox_runtime_info.js
devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_workers_remote_runtime.js
devtools/client/aboutdebugging-new/test/browser/head.js
devtools/client/aboutdebugging-new/test/browser/helper-addons.js
devtools/client/aboutdebugging-new/test/browser/helper-collapsibilities.js
devtools/client/aboutdebugging-new/test/browser/helper-real-usb.js
devtools/client/aboutdebugging-new/test/browser/helper-serviceworker.js
devtools/client/framework/components/DebugTargetErrorPage.js
devtools/client/framework/components/DebugTargetInfo.js
devtools/client/framework/test/browser_about-devtools-toolbox_load.js
devtools/client/framework/test/jest/components/__snapshots__/debug-target-info.test.js.snap
devtools/client/framework/test/jest/components/debug-target-info.test.js
--- a/devtools/client/aboutdebugging-new/src/components/CompatibilityWarning.js
+++ b/devtools/client/aboutdebugging-new/src/components/CompatibilityWarning.js
@@ -32,25 +32,25 @@ class CompatibilityWarning extends PureC
 
     if (status === COMPATIBILITY_STATUS.COMPATIBLE) {
       return null;
     }
 
     let localizationId, statusClassName;
     switch (status) {
       case COMPATIBILITY_STATUS.TOO_OLD:
-        statusClassName = "js-compatibility-warning-too-old";
+        statusClassName = "qa-compatibility-warning-too-old";
         localizationId = "about-debugging-browser-version-too-old";
         break;
       case COMPATIBILITY_STATUS.TOO_RECENT:
-        statusClassName = "js-compatibility-warning-too-recent";
+        statusClassName = "qa-compatibility-warning-too-recent";
         localizationId = "about-debugging-browser-version-too-recent";
         break;
       case COMPATIBILITY_STATUS.TOO_OLD_67_DEBUGGER:
-        statusClassName = "js-compatibility-warning-too-old-67-debugger";
+        statusClassName = "qa-compatibility-warning-too-old-67-debugger";
         localizationId = "about-debugging-browser-version-too-old-67-debugger";
         break;
     }
 
     return Message(
       {
         level: MESSAGE_LEVEL.WARNING,
         isCloseable: true,
@@ -65,17 +65,17 @@ class CompatibilityWarning extends PureC
           $localID: localID,
           $localVersion: localVersion,
           $minVersion: minVersion,
           $runtimeID: runtimeID,
           $runtimeVersion: runtimeVersion,
         },
         dom.p(
           {
-            className: `js-compatibility-warning ${statusClassName}`,
+            className: `qa-compatibility-warning ${statusClassName}`,
           },
           localizationId,
         ),
       )
     );
   }
 }
 
--- a/devtools/client/aboutdebugging-new/src/components/ConnectionPromptSetting.js
+++ b/devtools/client/aboutdebugging-new/src/components/ConnectionPromptSetting.js
@@ -35,17 +35,17 @@ class ConnectionPromptSetting extends Pu
                              : "about-debugging-connection-prompt-enable-button";
 
     return Localized(
       {
         id: localizedState,
       },
       dom.button(
         {
-          className: `${ className } default-button js-connection-prompt-toggle-button`,
+          className: `${ className } default-button qa-connection-prompt-toggle-button`,
           onClick: () => this.onToggleClick(),
         },
         localizedState
       )
     );
   }
 }
 
--- a/devtools/client/aboutdebugging-new/src/components/ExtensionDebugSetting.js
+++ b/devtools/client/aboutdebugging-new/src/components/ExtensionDebugSetting.js
@@ -32,17 +32,17 @@ class ExtensionDebugSetting extends Pure
 
   renderCheckbox() {
     const { extensionDebugEnabled } = this.props;
 
     return dom.input(
       {
         type: "checkbox",
         id: "extension-debug-setting-input",
-        className: "default-checkbox  js-extension-debug-checkbox",
+        className: "default-checkbox  qa-extension-debug-checkbox",
         checked: extensionDebugEnabled,
         onChange: () => this.onToggle(),
       }
     );
   }
 
   renderLabel() {
     return Localized(
--- a/devtools/client/aboutdebugging-new/src/components/ProfilerDialog.js
+++ b/devtools/client/aboutdebugging-new/src/components/ProfilerDialog.js
@@ -29,22 +29,22 @@ class ProfilerDialog extends PureCompone
     this.props.dispatch(Actions.hideProfilerDialog());
   }
 
   render() {
     const { clientWrapper } = this.props.runtimeDetails;
 
     return dom.div(
       {
-        className: "profiler-dialog__mask js-profiler-dialog-mask",
+        className: "profiler-dialog__mask qa-profiler-dialog-mask",
         onClick: () => this.hide(),
       },
       dom.article(
         {
-          className: "profiler-dialog__inner js-profiler-dialog",
+          className: "profiler-dialog__inner qa-profiler-dialog",
           onClick: e => e.stopPropagation(),
         },
         dom.header(
           {
             className: "profiler-dialog__header",
           },
           Localized(
             {
@@ -54,17 +54,17 @@ class ProfilerDialog extends PureCompone
               {
                 className: "profiler-dialog__header__title",
               },
               "about-debugging-profiler-dialog-title2",
             )
           ),
           dom.button(
             {
-              className: "ghost-button js-profiler-dialog-close",
+              className: "ghost-button qa-profiler-dialog-close",
               onClick: () => this.hide(),
             },
             dom.img(
               {
                 src: "chrome://devtools/skin/images/close.svg",
               }
             )
           )
--- a/devtools/client/aboutdebugging-new/src/components/RuntimeActions.js
+++ b/devtools/client/aboutdebugging-new/src/components/RuntimeActions.js
@@ -61,17 +61,17 @@ class RuntimeActions extends PureCompone
 
     return runtimeId !== RUNTIMES.THIS_FIREFOX
          ? Localized(
            {
              id: "about-debugging-runtime-profile-button2",
            },
            dom.button(
              {
-               className: "default-button js-profile-runtime-button",
+               className: "default-button qa-profile-runtime-button",
                onClick: () => this.onProfilerButtonClick(),
              },
              "about-debugging-runtime-profile-button2"
            ),
          )
          : null;
   }
 
--- a/devtools/client/aboutdebugging-new/src/components/RuntimeInfo.js
+++ b/devtools/client/aboutdebugging-new/src/components/RuntimeInfo.js
@@ -44,17 +44,17 @@ class RuntimeInfo extends PureComponent 
       Localized(
         {
           id: "about-debugging-runtime-name",
           $name: name,
           $version: version,
         },
         dom.label(
           {
-            className: "js-runtime-name runtime-info__title",
+            className: "qa-runtime-name runtime-info__title",
           },
           `${ name } (${ version })`
         )
       ),
       deviceName ?
         dom.label(
           {
             className: "main-heading-subtitle runtime-info__subtitle",
--- a/devtools/client/aboutdebugging-new/src/components/RuntimePage.js
+++ b/devtools/client/aboutdebugging-new/src/components/RuntimePage.js
@@ -142,17 +142,17 @@ class RuntimePage extends PureComponent 
       // to a runtime B (between unwatchRuntime and watchRuntime).
       return null;
     }
 
     const { compatibilityReport } = runtimeDetails;
 
     return dom.article(
       {
-        className: "page js-runtime-page",
+        className: "page qa-runtime-page",
       },
       RuntimeInfo({ ...runtimeDetails.info, runtimeId, dispatch }),
       RuntimeActions({ dispatch, runtimeId, runtimeDetails }),
       runtimeDetails.serviceWorkersAvailable ? null : ServiceWorkersWarning(),
       CompatibilityWarning({ compatibilityReport }),
       this.renderDebugTargetPane("Tabs",
                                  this.getIconByType(DEBUG_TARGETS.TAB),
                                  tabs,
--- a/devtools/client/aboutdebugging-new/src/components/ServiceWorkersWarning.js
+++ b/devtools/client/aboutdebugging-new/src/components/ServiceWorkersWarning.js
@@ -27,17 +27,17 @@ class ServiceWorkersWarning extends Pure
           id: "about-debugging-runtime-service-workers-not-compatible",
           a: dom.a({
             href: DOC_URL,
             target: "_blank",
           }),
         },
         dom.p(
           {
-            className: "js-service-workers-warning",
+            className: "qa-service-workers-warning",
           },
           "about-debugging-runtime-service-workers-not-compatible",
         ),
       )
     );
   }
 }
 
--- a/devtools/client/aboutdebugging-new/src/components/connect/ConnectPage.js
+++ b/devtools/client/aboutdebugging-new/src/components/connect/ConnectPage.js
@@ -103,17 +103,17 @@ class ConnectPage extends PureComponent 
     return Localized(
       {
         id: localizedState,
       },
       dom.button(
         {
           className:
             "default-button connect-page__usb-section__heading__toggle " +
-            "js-connect-usb-toggle-button",
+            "qa-connect-usb-toggle-button",
           disabled,
           onClick: () => this.onToggleUSBClick(),
         },
         localizedState
       )
     );
   }
 
@@ -161,17 +161,17 @@ class ConnectPage extends PureComponent 
           }
         )
         : Localized(
           {
             id: "about-debugging-setup-usb-disabled",
           },
           dom.aside(
             {
-              className: "js-connect-usb-disabled-message",
+              className: "qa-connect-usb-disabled-message",
             },
             "Enabling this will download and add the required Android USB debugging " +
               "components to Firefox."
           )
         ),
     );
   }
 
@@ -194,17 +194,17 @@ class ConnectPage extends PureComponent 
         ),
       })
     );
   }
 
   render() {
     return dom.article(
       {
-        className: "page connect-page js-connect-page",
+        className: "page connect-page qa-connect-page",
       },
       Localized(
         {
           id: "about-debugging-setup-title",
         },
         dom.h1(
           {
             className: "alt-heading alt-heading--larger",
--- a/devtools/client/aboutdebugging-new/src/components/connect/NetworkLocationsForm.js
+++ b/devtools/client/aboutdebugging-new/src/components/connect/NetworkLocationsForm.js
@@ -103,32 +103,32 @@ class NetworkLocationsForm extends PureC
           {
             htmlFor: "about-debugging-network-locations-host-input",
           },
           "Host",
         )
       ),
       dom.input({
         id: "about-debugging-network-locations-host-input",
-        className: "default-input js-network-form-input",
+        className: "default-input qa-network-form-input",
         placeholder: "localhost:6080",
         type: "text",
         value: this.state.value,
         onChange: (e) => {
           const value = e.target.value;
           this.setState({ value });
         },
       }),
       Localized(
         {
           id: "about-debugging-network-locations-add-button",
         },
         dom.button(
           {
-            className: "primary-button js-network-form-submit-button",
+            className: "primary-button qa-network-form-submit-button",
           },
           "Add"
         )
       ),
     );
   }
 }
 
--- a/devtools/client/aboutdebugging-new/src/components/connect/NetworkLocationsList.js
+++ b/devtools/client/aboutdebugging-new/src/components/connect/NetworkLocationsList.js
@@ -23,32 +23,32 @@ class NetworkLocationsList extends PureC
   }
 
   renderList() {
     return dom.ul(
       {},
       this.props.networkLocations.map(location =>
         dom.li(
           {
-            className: "network-location js-network-location",
+            className: "network-location qa-network-location",
             key: location,
           },
           dom.span(
             {
-              className: "ellipsis-text js-network-location-value",
+              className: "ellipsis-text qa-network-location-value",
             },
             location
           ),
           Localized(
             {
               id: "about-debugging-network-locations-remove-button",
             },
             dom.button(
               {
-                className: "default-button js-network-location-remove-button",
+                className: "default-button qa-network-location-remove-button",
                 onClick: () => {
                   this.props.dispatch(Actions.removeNetworkLocation(location));
                 },
               },
               "Remove",
             ),
           )
         )
--- a/devtools/client/aboutdebugging-new/src/components/debugtarget/DebugTargetItem.js
+++ b/devtools/client/aboutdebugging-new/src/components/debugtarget/DebugTargetItem.js
@@ -51,17 +51,17 @@ class DebugTargetItem extends PureCompon
 
   renderDetail() {
     const { detailComponent, target } = this.props;
     return detailComponent({ target });
   }
 
   renderIcon() {
     return dom.img({
-      className: "debug-target-item__icon js-debug-target-item-icon",
+      className: "debug-target-item__icon qa-debug-target-item-icon",
       src: this.props.target.icon,
     });
   }
 
   renderName() {
     return dom.span(
       {
         className: "debug-target-item__name ellipsis-text",
@@ -69,17 +69,17 @@ class DebugTargetItem extends PureCompon
       },
       this.props.target.name,
     );
   }
 
   render() {
     return dom.li(
       {
-        className: "card debug-target-item js-debug-target-item",
+        className: "card debug-target-item qa-debug-target-item",
       },
       this.renderIcon(),
       this.renderName(),
       this.renderAction(),
       this.renderDetail(),
       this.renderAdditionalActions(),
     );
   }
--- a/devtools/client/aboutdebugging-new/src/components/debugtarget/DebugTargetList.js
+++ b/devtools/client/aboutdebugging-new/src/components/debugtarget/DebugTargetList.js
@@ -32,17 +32,17 @@ class DebugTargetList extends PureCompon
 
   renderEmptyList() {
     return Localized(
       {
         id: "about-debugging-debug-target-list-empty",
       },
       dom.p(
         {
-          className: "js-debug-target-list-empty",
+          className: "qa-debug-target-list-empty",
         },
         "Nothing yet."
       )
     );
   }
 
   render() {
     const {
@@ -52,17 +52,17 @@ class DebugTargetList extends PureCompon
       dispatch,
       targets,
     } = this.props;
 
     return targets.length === 0
       ? this.renderEmptyList()
       : dom.ul(
         {
-          className: "debug-target-list js-debug-target-list",
+          className: "debug-target-list qa-debug-target-list",
         },
         targets.map((target, key) =>
           DebugTargetItem({
             actionComponent,
             additionalActionsComponent,
             detailComponent,
             dispatch,
             key,
--- a/devtools/client/aboutdebugging-new/src/components/debugtarget/DebugTargetPane.js
+++ b/devtools/client/aboutdebugging-new/src/components/debugtarget/DebugTargetPane.js
@@ -83,22 +83,22 @@ class DebugTargetPane extends PureCompon
       name,
       targets,
     } = this.props;
 
     const title = getString("about-debugging-collapse-expand-debug-targets");
 
     return dom.section(
       {
-        className: "js-debug-target-pane",
+        className: "qa-debug-target-pane",
       },
       dom.a(
         {
           className: "undecorated-link debug-target-pane__title " +
-                     "js-debug-target-pane-title",
+                     "qa-debug-target-pane-title",
           title,
           onClick: e => this.toggleCollapsibility(),
         },
         dom.h2(
           { className: "main-subheading debug-target-pane__heading" },
           dom.img(
             {
               className: "main-subheading__icon",
@@ -112,17 +112,17 @@ class DebugTargetPane extends PureCompon
                             (isCollapsed ? " debug-target-pane__icon--collapsed" : ""),
               src: "chrome://devtools/skin/images/arrow-e.svg",
             }
           ),
         )
       ),
       dom.div(
         {
-          className: "debug-target-pane__collapsable js-debug-target-pane__collapsable" +
+          className: "debug-target-pane__collapsable qa-debug-target-pane__collapsable" +
                      (isCollapsed ? " debug-target-pane__collapsable--collapsed" : ""),
           ref: this.collapsableRef,
         },
         children,
         DebugTargetList({
           actionComponent,
           additionalActionsComponent,
           detailComponent,
--- a/devtools/client/aboutdebugging-new/src/components/debugtarget/ExtensionDetail.js
+++ b/devtools/client/aboutdebugging-new/src/components/debugtarget/ExtensionDetail.js
@@ -119,17 +119,17 @@ class ExtensionDetail extends PureCompon
   renderManifest() {
     const { manifestURL } = this.props.target.details;
     if (!manifestURL) {
       return null;
     }
 
     const link = dom.a(
       {
-        className: "js-manifest-url",
+        className: "qa-manifest-url",
         href: manifestURL,
         target: "_blank",
       },
       manifestURL,
     );
 
     return Localized(
       {
--- a/devtools/client/aboutdebugging-new/src/components/debugtarget/InspectAction.js
+++ b/devtools/client/aboutdebugging-new/src/components/debugtarget/InspectAction.js
@@ -36,17 +36,17 @@ class InspectAction extends PureComponen
 
     return Localized(
       {
         id: "about-debugging-debug-target-inspect-button",
       },
       dom.button(
         {
           onClick: e => this.inspect(),
-          className: "default-button  js-debug-target-inspect-button",
+          className: "default-button  qa-debug-target-inspect-button",
           disabled,
         },
         "Inspect"
       )
     );
   }
 }
 
--- a/devtools/client/aboutdebugging-new/src/components/debugtarget/ServiceWorkerAction.js
+++ b/devtools/client/aboutdebugging-new/src/components/debugtarget/ServiceWorkerAction.js
@@ -69,17 +69,17 @@ class ServiceWorkerAction extends PureCo
 
     return Localized(
       {
         id: this._getStatusLocalizationId(status),
       },
       dom.span(
         {
           className:
-            `service-worker-action__status js-worker-status ${ statusClassName }`,
+            `service-worker-action__status qa-worker-status ${ statusClassName }`,
         },
         status
       )
     );
   }
 
   render() {
     return dom.div(
--- a/devtools/client/aboutdebugging-new/src/components/debugtarget/ServiceWorkerAdditionalActions.js
+++ b/devtools/client/aboutdebugging-new/src/components/debugtarget/ServiceWorkerAdditionalActions.js
@@ -62,37 +62,37 @@ class ServiceWorkerAdditionalActions ext
         },
         labelId,
       )
     );
   }
 
   _renderPushButton() {
     return this._renderButton({
-      className: "default-button default-button--micro js-push-button",
+      className: "default-button default-button--micro qa-push-button",
       disabled: this.props.runtimeDetails.isMultiE10s,
       key: "service-worker-push-button",
       labelId: "about-debugging-worker-action-push",
       onClick: this.push.bind(this),
     });
   }
 
   _renderStartButton() {
     return this._renderButton({
-      className: "default-button default-button--micro js-start-button",
+      className: "default-button default-button--micro qa-start-button",
       disabled: this.props.runtimeDetails.isMultiE10s,
       key: "service-worker-start-button",
       labelId: "about-debugging-worker-action-start",
       onClick: this.start.bind(this),
     });
   }
 
   _renderUnregisterButton() {
     return this._renderButton({
-      className: "default-button default-button--micro js-unregister-button",
+      className: "default-button default-button--micro qa-unregister-button",
       key: "service-worker-unregister-button",
       labelId: "about-debugging-worker-action-unregister",
       onClick: this.unregister.bind(this),
     });
   }
 
   _renderActionButtons() {
     const { status } = this.props.target.details;
--- a/devtools/client/aboutdebugging-new/src/components/debugtarget/TemporaryExtensionAdditionalActions.js
+++ b/devtools/client/aboutdebugging-new/src/components/debugtarget/TemporaryExtensionAdditionalActions.js
@@ -63,30 +63,30 @@ class TemporaryExtensionAdditionalAction
         },
         Localized(
           {
             id: "about-debugging-tmp-extension-reload-button",
           },
           dom.button(
             {
               className: "default-button default-button--micro " +
-                         "js-temporary-extension-reload-button",
+                         "qa-temporary-extension-reload-button",
               onClick: e => this.reload(),
             },
             "Reload",
           )
         ),
         Localized(
           {
             id: "about-debugging-tmp-extension-remove-button",
           },
           dom.button(
             {
               className: "default-button default-button--micro " +
-                         "js-temporary-extension-remove-button",
+                         "qa-temporary-extension-remove-button",
               onClick: e => this.remove(),
             },
             "Remove",
           )
         ),
       ),
       this.renderReloadError(),
     ];
--- a/devtools/client/aboutdebugging-new/src/components/debugtarget/TemporaryExtensionDetail.js
+++ b/devtools/client/aboutdebugging-new/src/components/debugtarget/TemporaryExtensionDetail.js
@@ -31,23 +31,23 @@ class TemporaryExtensionDetail extends P
     };
   }
 
   renderTemporaryIdMessage() {
     return Localized(
       {
         id: "about-debugging-tmp-extension-temporary-id",
         a: dom.a({
-          className: "js-temporary-id-link",
+          className: "qa-temporary-id-link",
           href: TEMP_ID_DOC_URL,
           target: "_blank",
         }),
       },
       dom.div({
-        className: "js-temporary-id-message",
+        className: "qa-temporary-id-message",
       }),
     );
   }
 
   render() {
     return ExtensionDetail(
       {
         target: this.props.target,
--- a/devtools/client/aboutdebugging-new/src/components/debugtarget/TemporaryExtensionInstallSection.js
+++ b/devtools/client/aboutdebugging-new/src/components/debugtarget/TemporaryExtensionInstallSection.js
@@ -48,17 +48,17 @@ class TemporaryExtensionInstallSection e
         },
         message
       );
     });
 
     return Message(
       {
         level: MESSAGE_LEVEL.ERROR,
-        className: "js-tmp-extension-install-error",
+        className: "qa-tmp-extension-install-error",
         isCloseable: true,
       },
       Localized(
         {
           id: "about-debugging-tmp-extension-install-error",
         },
         dom.p(
           { },
--- a/devtools/client/aboutdebugging-new/src/components/debugtarget/TemporaryExtensionInstaller.js
+++ b/devtools/client/aboutdebugging-new/src/components/debugtarget/TemporaryExtensionInstaller.js
@@ -33,17 +33,17 @@ class TemporaryExtensionInstaller extend
 
     return Localized(
       {
         id: "about-debugging-tmp-extension-install-button",
       },
       dom.button(
         {
           className:
-            `${ className } default-button js-temporary-extension-install-button`,
+            `${ className } default-button qa-temporary-extension-install-button`,
           onClick: e => this.install(),
         },
         "Load Temporary Add-on…"
       )
     );
   }
 }
 
--- a/devtools/client/aboutdebugging-new/src/components/debugtarget/WorkerDetail.js
+++ b/devtools/client/aboutdebugging-new/src/components/debugtarget/WorkerDetail.js
@@ -44,17 +44,17 @@ class WorkerDetail extends PureComponent
         attrs: {
           label: true,
           value: true,
         },
       },
       FieldPair(
         {
           className: isListening ?
-            "js-worker-fetch-listening" : "js-worker-fetch-not-listening",
+            "qa-worker-fetch-listening" : "qa-worker-fetch-not-listening",
           label: "Fetch",
           slug: "fetch",
           value: "about-debugging-worker-fetch-value",
         }
       )
     );
   }
 
@@ -67,17 +67,17 @@ class WorkerDetail extends PureComponent
         attrs: { label: true },
       },
       FieldPair(
         {
           slug: "push-service",
           label: "Push Service",
           value: dom.span(
             {
-              className: "js-worker-push-service-value",
+              className: "qa-worker-push-service-value",
             },
             pushServiceEndpoint,
           ),
         }
       ),
     );
   }
 
--- a/devtools/client/aboutdebugging-new/src/components/shared/Message.js
+++ b/devtools/client/aboutdebugging-new/src/components/shared/Message.js
@@ -74,17 +74,17 @@ class Message extends PureComponent {
     const { isClosed } = this.state;
 
     if (isClosed) {
       return null;
     }
 
     return dom.aside(
       {
-        className: `message message--level-${level}  js-message` +
+        className: `message message--level-${level}  qa-message` +
                    (className ? ` ${ className }` : ""),
       },
       dom.img(
         {
           className: "message__icon",
           src: ICONS[level],
         }
       ),
--- a/devtools/client/aboutdebugging-new/src/components/sidebar/RefreshDevicesButton.js
+++ b/devtools/client/aboutdebugging-new/src/components/sidebar/RefreshDevicesButton.js
@@ -25,17 +25,17 @@ class RefreshDevicesButton extends PureC
     this.props.dispatch(Actions.scanUSBRuntimes());
   }
 
   render() {
     return Localized(
       { id: "about-debugging-refresh-usb-devices-button" },
       dom.button(
         {
-          className: "default-button js-refresh-devices-button",
+          className: "default-button qa-refresh-devices-button",
           disabled: this.props.isScanning,
           onClick: () => this.refreshDevices(),
         },
         "Refresh devices"
       )
     );
   }
 }
--- a/devtools/client/aboutdebugging-new/src/components/sidebar/Sidebar.js
+++ b/devtools/client/aboutdebugging-new/src/components/sidebar/Sidebar.js
@@ -50,34 +50,34 @@ class Sidebar extends PureComponent {
           level: isUsbEnabled ? ICON_LABEL_LEVEL.OK : ICON_LABEL_LEVEL.INFO,
       },
       Localized(
         {
           id: localizationId,
         },
         dom.span(
           {
-            className: "js-sidebar-usb-status",
+            className: "qa-sidebar-usb-status",
           },
           localizationId
         )
       )
     );
   }
 
   renderDevicesEmpty() {
     return SidebarItem(
       {},
       Localized(
         {
           id: "about-debugging-sidebar-no-devices",
         },
         dom.aside(
           {
-            className: "sidebar__label js-sidebar-no-devices",
+            className: "sidebar__label qa-sidebar-no-devices",
           },
           "No devices discovered"
         )
       )
     );
   }
 
   renderDevices() {
--- a/devtools/client/aboutdebugging-new/src/components/sidebar/SidebarItem.js
+++ b/devtools/client/aboutdebugging-new/src/components/sidebar/SidebarItem.js
@@ -40,35 +40,35 @@ class SidebarItem extends PureComponent 
             className: "sidebar-item__link",
             href: to,
             target: "_blank",
           },
           children,
         )
         : Link(
           {
-            className: "sidebar-item__link js-sidebar-link",
+            className: "sidebar-item__link qa-sidebar-link",
             to,
           },
           children,
         );
     }
 
     return children;
   }
 
   render() {
     const { className, isSelected, to } = this.props;
 
     return dom.li(
       {
-        className: "sidebar-item js-sidebar-item" +
+        className: "sidebar-item qa-sidebar-item" +
                    (className ? ` ${className}` : "") +
                    (isSelected ?
-                      " sidebar-item--selected js-sidebar-item-selected" :
+                      " sidebar-item--selected qa-sidebar-item-selected" :
                       ""
                    ) +
                    (to ? " sidebar-item--selectable" : ""),
       },
       this.renderContent()
     );
   }
 }
--- a/devtools/client/aboutdebugging-new/src/components/sidebar/SidebarRuntimeItem.js
+++ b/devtools/client/aboutdebugging-new/src/components/sidebar/SidebarRuntimeItem.js
@@ -46,17 +46,17 @@ class SidebarRuntimeItem extends PureCom
                              ? "about-debugging-sidebar-item-connect-button-connecting"
                              : "about-debugging-sidebar-item-connect-button";
     return Localized(
       {
         id: localizationId,
       },
       dom.button(
         {
-          className: "default-button default-button--micro js-connect-button",
+          className: "default-button default-button--micro qa-connect-button",
           disabled: isConnecting,
           onClick: () => {
             const { dispatch, runtimeId } = this.props;
             dispatch(Actions.connectRuntime(runtimeId));
           },
         },
         localizationId
       )
--- a/devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_addons_debug_setting_thisfirefox.js
+++ b/devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_addons_debug_setting_thisfirefox.js
@@ -54,17 +54,17 @@ async function testState({ chromeEnabled
   await pushPref("devtools.chrome.enabled", chromeEnabled);
   await pushPref("devtools.debugger.remote-enabled", debuggerRemoteEnable);
 
   const { document, tab, window } = await openAboutDebugging();
   await selectThisFirefoxPage(document, window.AboutDebugging.store);
   await installExtensions(document);
 
   info("Check the status of extension debug setting checkbox and inspect buttons");
-  const checkbox = document.querySelector(".js-extension-debug-checkbox");
+  const checkbox = document.querySelector(".qa-extension-debug-checkbox");
   ok(checkbox, "Extension debug setting checkbox exists");
   is(checkbox.checked, isEnabledAtInitial, "The state of checkbox is correct");
   assertInspectButtons(isEnabledAtInitial, document);
 
   info("Check the status after toggling checkbox");
   checkbox.click();
   await waitUntil(() => checkbox.checked !== isEnabledAtInitial);
   ok(true, "The state of checkbox is changed correctly after toggling");
@@ -85,17 +85,17 @@ function assertInspectButtons(shouldBeEn
   assertInspectButtonsOnCategory(shouldBeEnabled, "Temporary Extensions", document);
   assertInspectButtonsOnCategory(shouldBeEnabled, "Extensions", document);
   // Inspect button on Tabs category should be always enabled.
   assertInspectButtonsOnCategory(true, "Tabs", document);
 }
 
 function assertInspectButtonsOnCategory(shouldBeEnabled, category, document) {
   const pane = getDebugTargetPane(category, document);
-  const buttons = pane.querySelectorAll(".js-debug-target-inspect-button");
+  const buttons = pane.querySelectorAll(".qa-debug-target-inspect-button");
   ok([...buttons].every(b => b.disabled !== shouldBeEnabled),
      `disabled attribute should be ${ !shouldBeEnabled } on ${ category }`);
 }
 
 async function installExtensions(document) {
   await installTemporaryExtensionFromXPI({
     id: TEMPORARY_EXTENSION_ID,
     name: TEMPORARY_EXTENSION_NAME,
--- a/devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_addons_debug_setting_usb.js
+++ b/devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_addons_debug_setting_usb.js
@@ -27,15 +27,15 @@ add_task(async function() {
 
   const { document, tab, window } = await openAboutDebugging();
   await selectThisFirefoxPage(document, window.AboutDebugging.store);
   mocks.emitUSBUpdate();
 
   info("Check the status of extension debug setting checkbox and inspect buttons");
   await connectToRuntime("Fancy Phone", document);
   await selectRuntime("Fancy Phone", "Lorem ipsum", document);
-  ok(!document.querySelector(".js-extension-debug-checkbox"),
+  ok(!document.querySelector(".qa-extension-debug-checkbox"),
      "Extension debug setting checkbox should not exist");
-  const buttons = document.querySelectorAll(".js-debug-target-inspect-button");
+  const buttons = document.querySelectorAll(".qa-debug-target-inspect-button");
   ok([...buttons].every(b => !b.disabled), "All inspect buttons should be enabled");
 
   await removeTab(tab);
 });
--- a/devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_addons_manifest_url.js
+++ b/devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_addons_manifest_url.js
@@ -14,28 +14,28 @@ Services.scriptloader.loadSubScript(CHRO
 // This test reuses the ADB extension to be sure to have a valid manifest URL to open.
 add_task(async function() {
   await pushPref("devtools.remote.adb.extensionURL",
                  CHROME_URL_ROOT + "resources/test-adb-extension/adb-extension-#OS#.xpi");
   await checkAdbNotRunning();
 
   const { document, tab, window } = await openAboutDebugging();
   await selectThisFirefoxPage(document, window.AboutDebugging.store);
-  const usbStatusElement = document.querySelector(".js-sidebar-usb-status");
+  const usbStatusElement = document.querySelector(".qa-sidebar-usb-status");
 
   info("Install ADB");
   adbAddon.install("internal");
   await waitUntil(() => usbStatusElement.textContent.includes("USB enabled"));
   await waitForAdbStart();
 
   info("Wait until the debug target for ADB appears");
   await waitUntil(() => findDebugTargetByText(ABD_ADDON_NAME, document));
   const adbExtensionItem = findDebugTargetByText(ABD_ADDON_NAME, document);
 
-  const manifestUrlElement = adbExtensionItem.querySelector(".js-manifest-url");
+  const manifestUrlElement = adbExtensionItem.querySelector(".qa-manifest-url");
   ok(manifestUrlElement, "A link to the manifest is displayed");
 
   info("Click on the manifest URL and wait for the new tab to open");
   const onTabOpened = once(gBrowser.tabContainer, "TabOpen");
   manifestUrlElement.click();
   const { target } = await onTabOpened;
   await BrowserTestUtils.browserLoaded(target.linkedBrowser);
 
--- a/devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_addons_remote_runtime.js
+++ b/devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_addons_remote_runtime.js
@@ -42,26 +42,26 @@ add_task(async function() {
 });
 
 /**
  * Check that addons are visible in the runtime page for a remote client (USB or network).
  */
 async function testAddonsOnMockedRemoteClient(remoteClient, firefoxClient, document) {
   const extensionPane = getDebugTargetPane("Extensions", document);
   info("Check an empty target pane message is displayed");
-  ok(extensionPane.querySelector(".js-debug-target-list-empty"),
+  ok(extensionPane.querySelector(".qa-debug-target-list-empty"),
     "Extensions list is empty");
 
   info("Add an extension to the remote client");
   const addon = { name: "Test extension name", debuggable: true };
   remoteClient.listAddons = () => [addon];
   remoteClient._eventEmitter.emit("addonListChanged");
 
   info("Wait until the extension appears");
-  await waitUntil(() => !extensionPane.querySelector(".js-debug-target-list-empty"));
+  await waitUntil(() => !extensionPane.querySelector(".qa-debug-target-list-empty"));
 
   const extensionTarget = findDebugTargetByText("Test extension name", document);
   ok(extensionTarget, "Extension target appeared for the remote runtime");
 
   // The goal here is to check that runtimes addons are only updated when the remote
   // runtime is sending addonListChanged events. The reason for this test is because the
   // previous implementation was updating the remote runtime extensions list when the
   // _local_ AddonManager was updated.
--- a/devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_addons_temporary_addon_buttons.js
+++ b/devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_addons_temporary_addon_buttons.js
@@ -22,31 +22,31 @@ add_task(async function() {
   const originalTarget = findDebugTargetByText(ORIGINAL_EXTENSION_NAME, document);
   ok(!!originalTarget, "The temporary extension isinstalled with the expected name");
 
   info("Update the name of the temporary extension in the manifest");
   updateTemporaryXPI({ id: EXTENSION_ID, name: UPDATED_EXTENSION_NAME }, addonFile);
 
   info("Click on the reload button for the temporary extension");
   const reloadButton =
-    originalTarget.querySelector(".js-temporary-extension-reload-button");
+    originalTarget.querySelector(".qa-temporary-extension-reload-button");
   reloadButton.click();
 
   info("Wait until the debug target with the original extension name disappears");
   await waitUntil(() => !findDebugTargetByText(ORIGINAL_EXTENSION_NAME, document));
 
   info("Wait until the debug target with the updated extension name appears");
   await waitUntil(() => findDebugTargetByText(UPDATED_EXTENSION_NAME, document));
 
   const updatedTarget = findDebugTargetByText(UPDATED_EXTENSION_NAME, document);
   ok(!!updatedTarget, "The temporary extension name has been updated");
 
   info("Click on the remove button for the temporary extension");
   const removeButton =
-    updatedTarget.querySelector(".js-temporary-extension-remove-button");
+    updatedTarget.querySelector(".qa-temporary-extension-remove-button");
   removeButton.click();
 
   info("Wait until the debug target with the updated extension name disappears");
   await waitUntil(() => !findDebugTargetByText(UPDATED_EXTENSION_NAME, document));
 
   await removeTab(tab);
 });
 
@@ -58,17 +58,17 @@ add_task(async function() {
   await selectThisFirefoxPage(document, window.AboutDebugging.store);
 
   await installRegularExtension("resources/packaged-extension/packaged-extension.xpi");
 
   info("Wait until extension appears in about:debugging");
   await waitUntil(() => findDebugTargetByText(PACKAGED_EXTENSION_NAME, document));
   const target = findDebugTargetByText(PACKAGED_EXTENSION_NAME, document);
 
-  const reloadButton = target.querySelector(".js-temporary-extension-reload-button");
+  const reloadButton = target.querySelector(".qa-temporary-extension-reload-button");
   ok(!reloadButton, "No reload button displayed for a regularly installed extension");
 
-  const removeButton = target.querySelector(".js-temporary-extension-remove-button");
+  const removeButton = target.querySelector(".qa-temporary-extension-remove-button");
   ok(!removeButton, "No remove button displayed for a regularly installed extension");
 
   await removeExtension(PACKAGED_EXTENSION_ID, PACKAGED_EXTENSION_NAME, document);
   await removeTab(tab);
 });
--- a/devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_addons_temporary_id_message.js
+++ b/devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_addons_temporary_id_message.js
@@ -19,20 +19,20 @@ add_task(async function() {
     name: EXTENSION_NAME,
   }, document);
 
   info("Wait until a debug target item appears");
   await waitUntil(() => findDebugTargetByText(EXTENSION_NAME, document));
 
   const target = findDebugTargetByText(EXTENSION_NAME, document);
 
-  const message = target.querySelector(".js-temporary-id-message");
+  const message = target.querySelector(".qa-temporary-id-message");
   ok(!!message, "Temporary id message is displayed for temporary extensions");
 
-  const link = target.querySelector(".js-temporary-id-link");
+  const link = target.querySelector(".qa-temporary-id-link");
   ok(!!link, "Temporary id link is displayed for temporary extensions");
 
   await removeTemporaryExtension(EXTENSION_NAME, document);
   await removeTab(tab);
 });
 
 // Test that the message and the link are not displayed for a regular extension.
 add_task(async function() {
@@ -43,14 +43,14 @@ add_task(async function() {
   await selectThisFirefoxPage(document, window.AboutDebugging.store);
 
   await installRegularExtension("resources/packaged-extension/packaged-extension.xpi");
 
   info("Wait until extension appears in about:debugging");
   await waitUntil(() => findDebugTargetByText(PACKAGED_EXTENSION_NAME, document));
   const target = findDebugTargetByText(PACKAGED_EXTENSION_NAME, document);
 
-  const tmpIdMessage = target.querySelector(".js-temporary-id-message");
+  const tmpIdMessage = target.querySelector(".qa-temporary-id-message");
   ok(!tmpIdMessage, "No temporary id message is displayed for a regular extension");
 
   await removeExtension(PACKAGED_EXTENSION_ID, PACKAGED_EXTENSION_NAME, document);
   await removeTab(tab);
 });
--- a/devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_addons_temporary_install_error.js
+++ b/devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_addons_temporary_install_error.js
@@ -26,17 +26,17 @@ add_task(async function testInvalidJsonE
   const installError = await installBadExtension(INVALID_JSON_EXTENSION_PATH, document);
   ok(installError.textContent.includes("JSON.parse: unexpected keyword"),
     "The expected installation error is displayed: " + installError.textContent);
 
   info("Install a valid extension to make the message disappear");
   await installTemporaryExtension(EXTENSION_PATH, EXTENSION_NAME, document);
 
   info("Wait until the error message disappears");
-  await waitUntil(() => !document.querySelector(".js-tmp-extension-install-error"));
+  await waitUntil(() => !document.querySelector(".qa-tmp-extension-install-error"));
 
   info("Wait for the temporary addon to be displayed as a debug target");
   await waitUntil(() => findDebugTargetByText(EXTENSION_NAME, document));
 
   await removeTemporaryExtension(EXTENSION_NAME, document);
 
   await removeTab(tab);
 });
@@ -57,14 +57,14 @@ add_task(async function testInvalidPrope
 
   await removeTab(tab);
 });
 
 async function installBadExtension(path, document) {
   info("Install a bad extension at path: " + path);
   // Do not use installTemporaryAddon here since the install will fail.
   prepareMockFilePicker(path);
-  document.querySelector(".js-temporary-extension-install-button").click();
+  document.querySelector(".qa-temporary-extension-install-button").click();
 
   info("Wait until the install error message appears");
-  await waitUntil(() => document.querySelector(".js-tmp-extension-install-error"));
-  return document.querySelector(".js-tmp-extension-install-error");
+  await waitUntil(() => document.querySelector(".qa-tmp-extension-install-error"));
+  return document.querySelector(".qa-tmp-extension-install-error");
 }
--- a/devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_addons_temporary_reload_error.js
+++ b/devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_addons_temporary_reload_error.js
@@ -22,32 +22,32 @@ add_task(async function() {
   ok(!!target, "The temporary extension is installed with the expected name");
 
   info("Update the name of the temporary extension in the manifest");
   addonFile = updateTemporaryXPI({ id: EXTENSION_ID }, addonFile);
 
   info("Click on the reload button for the invalid temporary extension");
   const waitForError =
     waitForDispatch(window.AboutDebugging.store, "TEMPORARY_EXTENSION_RELOAD_FAILURE");
-  const reloadButton = target.querySelector(".js-temporary-extension-reload-button");
+  const reloadButton = target.querySelector(".qa-temporary-extension-reload-button");
   reloadButton.click();
   await waitForError;
   ok(target.querySelector(".qa-temporary-extension-reload-error"),
      "The error message of reloading appears");
 
   info("Click on the reload button for the valid temporary extension");
   const waitForSuccess =
     waitForDispatch(window.AboutDebugging.store, "TEMPORARY_EXTENSION_RELOAD_SUCCESS");
   updateTemporaryXPI({ id: EXTENSION_ID, name: EXTENSION_NAME }, addonFile);
   reloadButton.click();
   await waitForSuccess;
   ok(!target.querySelector(".qa-temporary-extension-reload-error"),
      "The error message of reloading disappears");
 
   info("Click on the remove button for the temporary extension");
-  const removeButton = target.querySelector(".js-temporary-extension-remove-button");
+  const removeButton = target.querySelector(".qa-temporary-extension-remove-button");
   removeButton.click();
 
   info("Wait until the debug target with the extension disappears");
   await waitUntil(() => !findDebugTargetByText(EXTENSION_NAME, document));
 
   await removeTab(tab);
 });
--- a/devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_addons_warnings.js
+++ b/devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_addons_warnings.js
@@ -22,17 +22,17 @@ add_task(async function() {
       "wrongProperty": {},
     },
   }, document);
 
   info("Wait until a debug target item appears");
   await waitUntil(() => findDebugTargetByText(EXTENSION_NAME, document));
   const target = findDebugTargetByText(EXTENSION_NAME, document);
 
-  const warningMessage = target.querySelector(".js-message");
+  const warningMessage = target.querySelector(".qa-message");
   ok(!!warningMessage, "A warning message is displayed for the installed addon");
 
   const warningText = warningMessage.textContent;
   ok(warningText.includes("wrongProperty"), "The warning message mentions wrongProperty");
 
   await removeTemporaryExtension(EXTENSION_NAME, document);
   await removeTab(tab);
 });
--- a/devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_connect_networklocations.js
+++ b/devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_connect_networklocations.js
@@ -11,71 +11,71 @@
 const TEST_NETWORK_LOCATION = "localhost:1111";
 const TEST_NETWORK_LOCATION_INVALID = "testnetwork";
 
 add_task(async function() {
   const { document, tab } = await openAboutDebugging();
 
   await selectConnectPage(document);
 
-  let networkLocations = document.querySelectorAll(".js-network-location");
+  let networkLocations = document.querySelectorAll(".qa-network-location");
   is(networkLocations.length, 0, "By default, no network locations are displayed");
 
   info("Check whether error message should show if the input value is invalid");
   addNetworkLocation(TEST_NETWORK_LOCATION_INVALID, document);
   await waitUntil(() =>
     document.querySelector(".qa-connect-page__network-form__error-message"));
 
   info("Wait until the new network location is visible in the list");
   addNetworkLocation(TEST_NETWORK_LOCATION, document);
-  await waitUntil(() => document.querySelectorAll(".js-network-location").length === 1);
+  await waitUntil(() => document.querySelectorAll(".qa-network-location").length === 1);
   await waitUntil(() =>
     !document.querySelector(".qa-connect-page__network-form__error-message"));
 
-  networkLocations = document.querySelectorAll(".js-network-location");
+  networkLocations = document.querySelectorAll(".qa-network-location");
   const networkLocationValue =
-    networkLocations[0].querySelector(".js-network-location-value");
+    networkLocations[0].querySelector(".qa-network-location-value");
   is(networkLocationValue.textContent, TEST_NETWORK_LOCATION,
     "Added network location has the expected value");
 
   info("Check whether error message should show if the input value was duplicate");
   addNetworkLocation(TEST_NETWORK_LOCATION, document);
   await waitUntil(() =>
     document.querySelector(".qa-connect-page__network-form__error-message"));
 
   info("Wait until the new network location is removed from the list");
   removeNetworkLocation(TEST_NETWORK_LOCATION, document);
-  await waitUntil(() => document.querySelectorAll(".js-network-location").length === 0);
+  await waitUntil(() => document.querySelectorAll(".qa-network-location").length === 0);
 
   await removeTab(tab);
 });
 
 function addNetworkLocation(location, document) {
   info("Setting a value in the network form input");
   const networkLocationInput =
-    document.querySelector(".js-network-form-input");
+    document.querySelector(".qa-network-form-input");
   networkLocationInput.value = "";
   networkLocationInput.focus();
   EventUtils.sendString(location, networkLocationInput.ownerGlobal);
 
   info("Click on network form submit button");
   const networkLocationSubmitButton =
-    document.querySelector(".js-network-form-submit-button");
+    document.querySelector(".qa-network-form-submit-button");
   networkLocationSubmitButton.click();
 }
 
 function removeNetworkLocation(location, document) {
   const networkLocation = getNetworkLocation(location, document);
   ok(networkLocation, "Network location container found.");
 
   info("Click on the remove button for the provided network location");
   const removeButton =
-    networkLocation.querySelector(".js-network-location-remove-button");
+    networkLocation.querySelector(".qa-network-location-remove-button");
   removeButton.click();
 }
 
 function getNetworkLocation(location, document) {
   info("Find the container for network location: " + location);
-  const networkLocations = document.querySelectorAll(".js-network-location");
+  const networkLocations = document.querySelectorAll(".qa-network-location");
   return [...networkLocations].find(element => {
-    return element.querySelector(".js-network-location-value").textContent === location;
+    return element.querySelector(".qa-network-location-value").textContent === location;
   });
 }
--- a/devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_connect_toggle_usb_devices.js
+++ b/devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_connect_toggle_usb_devices.js
@@ -16,33 +16,33 @@ add_task(async function() {
                  CHROME_URL_ROOT + "resources/test-adb-extension/adb-extension-#OS#.xpi");
   await checkAdbNotRunning();
 
   const { document, tab } = await openAboutDebugging();
 
   await selectConnectPage(document);
 
   info("Wait until Connect page is displayed");
-  await waitUntil(() => document.querySelector(".js-connect-page"));
+  await waitUntil(() => document.querySelector(".qa-connect-page"));
 
   info("Check that by default USB devices are disabled");
-  const usbDisabledMessage = document.querySelector(".js-connect-usb-disabled-message");
+  const usbDisabledMessage = document.querySelector(".qa-connect-usb-disabled-message");
   ok(usbDisabledMessage, "A message about enabling USB devices is rendered");
 
-  const usbToggleButton = document.querySelector(".js-connect-usb-toggle-button");
+  const usbToggleButton = document.querySelector(".qa-connect-usb-toggle-button");
   ok(usbToggleButton, "The button to toggle USB devices debugging is rendered");
   ok(usbToggleButton.textContent.includes("Enable"),
     "The text of the toggle USB button is correct");
 
   info("Click on the toggle button");
   usbToggleButton.click();
 
   info("Wait until the toggle button text is updated");
   await waitUntil(() => usbToggleButton.textContent.includes("Disable"));
-  ok(!document.querySelector(".js-connect-usb-disabled-message"),
+  ok(!document.querySelector(".qa-connect-usb-disabled-message"),
     "The message about enabling USB devices is no longer rendered");
 
   info("Check that the addon was installed with the proper source");
   const adbExtensionId = Services.prefs.getCharPref("devtools.remote.adb.extensionID");
   const addon = await AddonManager.getAddonByID(adbExtensionId);
   Assert.deepEqual(addon.installTelemetryInfo, { source: "about:debugging" },
     "Got the expected addon.installTelemetryInfo");
 
@@ -52,15 +52,15 @@ add_task(async function() {
   // See Bug 1498469.
   await waitForAdbStart();
 
   info("Click on the toggle button");
   usbToggleButton.click();
 
   info("Wait until the toggle button text is updated");
   await waitUntil(() => usbToggleButton.textContent.includes("Enable"));
-  ok(document.querySelector(".js-connect-usb-disabled-message"),
+  ok(document.querySelector(".qa-connect-usb-disabled-message"),
     "The message about enabling USB devices is rendered again");
 
   await stopAdbProcess();
 
   await removeTab(tab);
 });
--- a/devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_connection_prompt_setting.js
+++ b/devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_connection_prompt_setting.js
@@ -26,24 +26,24 @@ add_task(async function() {
   await selectThisFirefoxPage(document, window.AboutDebugging.store);
 
   mocks.emitUSBUpdate();
   await connectToRuntime(USB_DEVICE_NAME, document);
   await selectRuntime(USB_DEVICE_NAME, USB_APP_NAME, document);
 
   info("Check whether connection prompt toggle button exists");
   let connectionPromptToggleButton =
-    document.querySelector(".js-connection-prompt-toggle-button");
+    document.querySelector(".qa-connection-prompt-toggle-button");
   ok(connectionPromptToggleButton, "Toggle button existed");
   ok(connectionPromptToggleButton.textContent.includes("Disable"),
     "Toggle button shows 'Disable'");
 
   info("Click on the toggle button");
   connectionPromptToggleButton =
-    document.querySelector(".js-connection-prompt-toggle-button");
+    document.querySelector(".qa-connection-prompt-toggle-button");
   connectionPromptToggleButton.click();
   info("Wait until the toggle button text is updated");
   await waitUntil(() => connectionPromptToggleButton.textContent.includes("Enable"));
   info("Check the preference");
   const disabledPref = runtime.getPreference("devtools.debugger.prompt-connection");
   is(disabledPref, false, "The preference should be updated");
 
   info("Click on the toggle button again");
--- a/devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_debug-target-pane_collapsibilities_interaction.js
+++ b/devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_debug-target-pane_collapsibilities_interaction.js
@@ -28,30 +28,30 @@ add_task(async function() {
 
   await removeTab(tab);
 });
 
 async function assertDebugTargetCollapsed(paneEl, title) {
   info("Check debug target is collapsed");
 
   // check list height
-  const targetEl = paneEl.querySelector(".js-debug-target-pane__collapsable");
+  const targetEl = paneEl.querySelector(".qa-debug-target-pane__collapsable");
   is(targetEl.clientHeight, 0, "Height of list element is zero");
   // check title
-  const titleEl = paneEl.querySelector(".js-debug-target-pane-title");
+  const titleEl = paneEl.querySelector(".qa-debug-target-pane-title");
   const expectedTitle =
-    `${ title } (${ targetEl.querySelectorAll(".js-debug-target-item").length })`;
+    `${ title } (${ targetEl.querySelectorAll(".qa-debug-target-item").length })`;
   is(titleEl.textContent, expectedTitle, "Collapsed title is correct");
 }
 
 async function assertDebugTargetExpanded(paneEl, title) {
   info("Check debug target is expanded");
 
   // check list height
-  const targetEl = paneEl.querySelector(".js-debug-target-pane__collapsable");
+  const targetEl = paneEl.querySelector(".qa-debug-target-pane__collapsable");
   await waitUntil(() => targetEl.clientHeight > 0);
   ok(true, "Height of list element is greater than zero");
   // check title
-  const titleEl = paneEl.querySelector(".js-debug-target-pane-title");
+  const titleEl = paneEl.querySelector(".qa-debug-target-pane-title");
   const expectedTitle =
-    `${ title } (${ targetEl.querySelectorAll(".js-debug-target-item").length })`;
+    `${ title } (${ targetEl.querySelectorAll(".qa-debug-target-item").length })`;
   is(titleEl.textContent, expectedTitle, "Expanded title is correct");
 }
--- a/devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_debug-target-pane_empty.js
+++ b/devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_debug-target-pane_empty.js
@@ -19,41 +19,41 @@ const EXTENSION_NAME = "test-temporary-e
 add_task(async function() {
   prepareCollapsibilitiesTest();
 
   const { document, tab, window } = await openAboutDebugging();
   await selectThisFirefoxPage(document, window.AboutDebugging.store);
 
   info("Check that the temporary extensions pane is empty");
   const temporaryExtensionPane = getDebugTargetPane("Temporary Extensions", document);
-  ok(!temporaryExtensionPane.querySelector(".js-debug-target-item"),
+  ok(!temporaryExtensionPane.querySelector(".qa-debug-target-item"),
     "Temporary Extensions pane contains no debug target");
 
   info("Check an empty target pane message is displayed");
-  ok(temporaryExtensionPane.querySelector(".js-debug-target-list-empty"),
+  ok(temporaryExtensionPane.querySelector(".qa-debug-target-list-empty"),
     "An empty target list message is displayed");
 
   info("Install a temporary extension");
   await installTemporaryExtension(EXTENSION_PATH, EXTENSION_NAME, document);
 
   info("Wait until a debug target item appears");
-  await waitUntil(() => temporaryExtensionPane.querySelector(".js-debug-target-item"));
+  await waitUntil(() => temporaryExtensionPane.querySelector(".qa-debug-target-item"));
 
   info("Check the empty target pane message is no longer displayed");
-  ok(!temporaryExtensionPane.querySelector(".js-debug-target-list-empty"),
+  ok(!temporaryExtensionPane.querySelector(".qa-debug-target-list-empty"),
     "The empty target list message is no longer displayed");
 
   const temporaryExtensionItem =
-    temporaryExtensionPane.querySelector(".js-debug-target-item");
+    temporaryExtensionPane.querySelector(".qa-debug-target-item");
   ok(temporaryExtensionItem, "Temporary Extensions pane now shows debug target");
 
   info("Remove the temporary extension");
-  temporaryExtensionItem.querySelector(".js-temporary-extension-remove-button").click();
+  temporaryExtensionItem.querySelector(".qa-temporary-extension-remove-button").click();
 
   info("Wait until the debug target item disappears");
-  await waitUntil(() => !temporaryExtensionPane.querySelector(".js-debug-target-item"));
+  await waitUntil(() => !temporaryExtensionPane.querySelector(".qa-debug-target-item"));
 
   info("Check the empty target pane message is displayed again");
-  ok(temporaryExtensionPane.querySelector(".js-debug-target-list-empty"),
+  ok(temporaryExtensionPane.querySelector(".qa-debug-target-list-empty"),
     "An empty target list message is displayed again");
 
   await removeTab(tab);
 });
--- a/devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_devtools.js
+++ b/devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_devtools.js
@@ -13,31 +13,31 @@ Services.scriptloader.loadSubScript(CHRO
 add_task(async function() {
   info("Force all debug target panes to be expanded");
   prepareCollapsibilitiesTest();
 
   const { document, tab, window } = await openAboutDebugging();
   await selectThisFirefoxPage(document, window.AboutDebugging.store);
 
   const connectSidebarItem = findSidebarItemByText("Setup", document);
-  const connectLink = connectSidebarItem.querySelector(".js-sidebar-link");
+  const connectLink = connectSidebarItem.querySelector(".qa-sidebar-link");
   ok(connectSidebarItem, "Found the Connect sidebar item");
 
   info("Open devtools on the current about:debugging tab");
   const toolbox = await openToolboxForTab(tab, "inspector");
   const inspector = toolbox.getPanel("inspector");
 
   info("DevTools starts workers, wait for requests to settle");
   const store = window.AboutDebugging.store;
   await waitForRequestsToSettle(store);
 
   info("Click on the Connect item in the sidebar");
   connectLink.click();
   await waitForDispatch(store, "UNWATCH_RUNTIME_SUCCESS");
 
   info("Wait until Connect page is displayed");
-  await waitUntil(() => document.querySelector(".js-connect-page"));
+  await waitUntil(() => document.querySelector(".qa-connect-page"));
 
   const markupViewElement = inspector.panelDoc.getElementById("markup-box");
   ok(markupViewElement, "Inspector is still rendered");
 
   await removeTab(tab);
 });
--- a/devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_devtoolstoolbox_focus.js
+++ b/devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_devtoolstoolbox_focus.js
@@ -55,17 +55,17 @@ add_task(async function() {
   await onToolboxDestroyed;
   await waitUntil(() => !findDebugTargetByText("Toolbox - ", document));
 
   await removeTab(tab);
 });
 
 function clickInspectButton(inspectionTarget, doc) {
   const target = findDebugTargetByText(inspectionTarget, doc);
-  const button = target.querySelector(".js-debug-target-inspect-button");
+  const button = target.querySelector(".qa-debug-target-inspect-button");
   button.click();
 }
 
 // Check that only one tab is currently opened for the provided URL.
 // Also check that this tab and the tab's window are focused.
 function assertDevtoolsToolboxTabState(devtoolsURL) {
   const existingTabs = [];
 
--- a/devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_devtoolstoolbox_target_destroyed.js
+++ b/devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_devtoolstoolbox_target_destroyed.js
@@ -9,22 +9,22 @@ add_task(async function() {
 
   const { document, tab, window } = await openAboutDebugging();
 
   // go to This Firefox and inspect the new tab
   info("Inspecting a new tab in This Firefox");
   await selectThisFirefoxPage(document, window.AboutDebugging.store);
   const { devtoolsDocument, devtoolsTab, devtoolsWindow } =
     await openAboutDevtoolsToolbox(document, tab, window, "about:home");
-  const targetInfoHeader = devtoolsDocument.querySelector(".js-debug-target-info");
+  const targetInfoHeader = devtoolsDocument.querySelector(".qa-debug-target-info");
   ok(targetInfoHeader.textContent.includes("about:home"),
     "about:devtools-toolbox is open for the target");
 
   // close the inspected tab and check that error page is shown
   info("removing the inspected tab");
   await removeTab(targetTab);
-  await waitUntil(() => devtoolsWindow.document.querySelector(".js-error-page"));
+  await waitUntil(() => devtoolsWindow.document.querySelector(".qa-error-page"));
 
   info("closing the toolbox");
   await removeTab(devtoolsTab);
   info("removing about:debugging tab");
   await removeTab(tab);
 });
--- a/devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_message_close.js
+++ b/devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_message_close.js
@@ -22,23 +22,23 @@ add_task(async function() {
       "wrongProperty": {},
     },
   }, document);
 
   info("Wait until a debug target item appears");
   await waitUntil(() => findDebugTargetByText(EXTENSION_NAME, document));
   const target = findDebugTargetByText(EXTENSION_NAME, document);
 
-  const warningMessage = target.querySelector(".js-message");
+  const warningMessage = target.querySelector(".qa-message");
   ok(!!warningMessage, "A warning message is displayed for the installed addon");
 
   const button = warningMessage.querySelector(".qa-message-button-close");
   ok(!!button, "The warning message has a close button");
 
   info("Closing the message and waiting for it to disappear");
   button.click();
   await waitUntil(() => {
-    return target.querySelector(".js-message") === null;
+    return target.querySelector(".qa-message") === null;
   });
 
   await removeTemporaryExtension(EXTENSION_NAME, document);
   await removeTab(tab);
 });
--- a/devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_navigate.js
+++ b/devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_navigate.js
@@ -18,58 +18,58 @@ add_task(async function() {
   info("Force all debug target panes to be expanded");
   prepareCollapsibilitiesTest();
 
   const { document, tab, window } = await openAboutDebugging();
   const AboutDebugging = window.AboutDebugging;
   await selectThisFirefoxPage(document, AboutDebugging.store);
 
   const connectSidebarItem = findSidebarItemByText("Setup", document);
-  const connectLink = connectSidebarItem.querySelector(".js-sidebar-link");
+  const connectLink = connectSidebarItem.querySelector(".qa-sidebar-link");
   ok(connectSidebarItem, "Found the Connect sidebar item");
 
   const thisFirefoxString = getThisFirefoxString(window);
   const thisFirefoxSidebarItem = findSidebarItemByText(thisFirefoxString, document);
-  const thisFirefoxLink = thisFirefoxSidebarItem.querySelector(".js-sidebar-link");
+  const thisFirefoxLink = thisFirefoxSidebarItem.querySelector(".qa-sidebar-link");
   ok(thisFirefoxSidebarItem, "Found the ThisFirefox sidebar item");
   ok(isSidebarItemSelected(thisFirefoxSidebarItem),
     "ThisFirefox sidebar item is selected by default");
 
   info("Open a new background tab TAB1");
   const backgroundTab1 = await addTab(TAB_URL_1, { background: true });
 
   info("Wait for the tab to appear in the debug targets with the correct name");
   await waitUntil(() => findDebugTargetByText("TAB1", document));
 
   await waitForRequestsToSettle(AboutDebugging.store);
   info("Click on the Connect item in the sidebar");
   connectLink.click();
 
   info("Wait until Connect page is displayed");
-  await waitUntil(() => document.querySelector(".js-connect-page"));
+  await waitUntil(() => document.querySelector(".qa-connect-page"));
   // we need to wait here because the sidebar isn't updated after mounting the page
   info("Wait until Connect sidebar item is selected");
   await waitUntil(() => isSidebarItemSelected(connectSidebarItem));
-  ok(!document.querySelector(".js-runtime-page"), "Runtime page no longer rendered");
+  ok(!document.querySelector(".qa-runtime-page"), "Runtime page no longer rendered");
 
   info("Open a new tab which should be listed when we go back to This Firefox");
   const backgroundTab2 = await addTab(TAB_URL_2, { background: true });
 
   info("Click on the ThisFirefox item in the sidebar");
   const requestsSuccess = waitForRequestsSuccess(AboutDebugging.store);
   thisFirefoxLink.click();
 
   info("Wait for all target requests to complete");
   await requestsSuccess;
 
   info("Wait until ThisFirefox page is displayed");
-  await waitUntil(() => document.querySelector(".js-runtime-page"));
+  await waitUntil(() => document.querySelector(".qa-runtime-page"));
   ok(isSidebarItemSelected(thisFirefoxSidebarItem),
     "ThisFirefox sidebar item is selected again");
-  ok(!document.querySelector(".js-connect-page"), "Connect page no longer rendered");
+  ok(!document.querySelector(".qa-connect-page"), "Connect page no longer rendered");
 
   info("TAB2 should already be displayed in the debug targets");
   await waitUntil(() => findDebugTargetByText("TAB2", document));
 
   info("Remove first background tab");
   await removeTab(backgroundTab1);
 
   info("Check TAB1 disappears, meaning ThisFirefox client is correctly connected");
@@ -82,10 +82,10 @@ add_task(async function() {
   await waitUntil(() => !findDebugTargetByText("TAB2", document));
 
   await waitForRequestsToSettle(AboutDebugging.store);
 
   await removeTab(tab);
 });
 
 function isSidebarItemSelected(item) {
-  return item.classList.contains("js-sidebar-item-selected");
+  return item.classList.contains("qa-sidebar-item-selected");
 }
--- a/devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_persist_connection.js
+++ b/devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_persist_connection.js
@@ -51,22 +51,22 @@ async function testRemoteClientPersistCo
   await selectRuntime(sidebarName, runtimeName, document);
 
   info("Reload about:debugging");
   document = await reloadAboutDebugging(tab);
 
   info("Wait until the remote runtime appears as connected");
   await waitUntil(() => {
     const sidebarItem = findSidebarItemByText(sidebarName, document);
-    return sidebarItem && !sidebarItem.querySelector(".js-connect-button");
+    return sidebarItem && !sidebarItem.querySelector(".qa-connect-button");
   });
 
   info("Wait until the remote runtime page is selected");
   await waitUntil(() => {
-    const runtimeInfo = document.querySelector(".js-runtime-name");
+    const runtimeInfo = document.querySelector(".qa-runtime-name");
     return runtimeInfo && runtimeInfo.textContent.includes(runtimeName);
   });
 
   // Remove the runtime without emitting an update.
   // This is what happens today when we simply close Firefox for Android.
   info("Remove the runtime from the list of remote runtimes");
   mocks.removeRuntime(id);
 
--- a/devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_profiler_dialog.js
+++ b/devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_profiler_dialog.js
@@ -20,48 +20,48 @@ add_task(async function() {
   await connectToRuntime("Fancy Phone", document);
   await selectRuntime("Fancy Phone", "Lorem ipsum", document);
 
   info("Open the profiler dialog");
   await openProfilerDialog(usbClient, document);
   assertDialogVisible(document);
 
   info("Click on the close button and wait until the dialog disappears");
-  const closeDialogButton = document.querySelector(".js-profiler-dialog-close");
+  const closeDialogButton = document.querySelector(".qa-profiler-dialog-close");
   closeDialogButton.click();
-  await waitUntil(() => !document.querySelector(".js-profiler-dialog"));
+  await waitUntil(() => !document.querySelector(".qa-profiler-dialog"));
   assertDialogHidden(document);
 
   info("Open the profiler dialog again");
   await openProfilerDialog(usbClient, document);
   assertDialogVisible(document);
 
   info("Click on the mask element and wait until the dialog disappears");
-  const mask = document.querySelector(".js-profiler-dialog-mask");
+  const mask = document.querySelector(".qa-profiler-dialog-mask");
   EventUtils.synthesizeMouse(mask, 5, 5, {}, window);
-  await waitUntil(() => !document.querySelector(".js-profiler-dialog"));
+  await waitUntil(() => !document.querySelector(".qa-profiler-dialog"));
   assertDialogHidden(document);
 
   info("Open the profiler dialog again");
   await openProfilerDialog(usbClient, document);
   assertDialogVisible(document);
 
   info("Navigate to this-firefox and wait until the dialog disappears");
   document.location.hash = "#/runtime/this-firefox";
-  await waitUntil(() => !document.querySelector(".js-profiler-dialog"));
+  await waitUntil(() => !document.querySelector(".qa-profiler-dialog"));
   assertDialogHidden(document);
 
   info("Select the remote runtime again, check the dialog is still hidden");
   await selectRuntime("Fancy Phone", "Lorem ipsum", document);
   assertDialogHidden(document);
 
   await removeTab(tab);
 });
 
 function assertDialogVisible(doc) {
-  ok(doc.querySelector(".js-profiler-dialog"), "Dialog is displayed");
-  ok(doc.querySelector(".js-profiler-dialog-mask"), "Dialog mask is displayed");
+  ok(doc.querySelector(".qa-profiler-dialog"), "Dialog is displayed");
+  ok(doc.querySelector(".qa-profiler-dialog-mask"), "Dialog mask is displayed");
 }
 
 function assertDialogHidden(doc) {
-  ok(!document.querySelector(".js-profiler-dialog"), "Dialog is removed");
-  ok(!document.querySelector(".js-profiler-dialog-mask"), "Dialog mask is removed");
+  ok(!document.querySelector(".qa-profiler-dialog"), "Dialog is removed");
+  ok(!document.querySelector(".qa-profiler-dialog-mask"), "Dialog mask is removed");
 }
--- a/devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_real_usb_runtime_page_runtime_info.js
+++ b/devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_real_usb_runtime_page_runtime_info.js
@@ -30,17 +30,17 @@ add_task(async function() {
     }, 5000)),
     /* eslint-enable mozilla/no-arbitrary-setTimeout */
   ]);
 
   info("Select a USB runtime");
   await selectRuntime(sidebarInfo.deviceName, runtimeDetails.info.name, document);
 
   info("Check that runtime info is properly displayed");
-  const runtimeInfo = document.querySelector(".js-runtime-name");
+  const runtimeInfo = document.querySelector(".qa-runtime-name");
   ok(runtimeInfo, "Runtime info is displayed");
   const runtimeInfoText = runtimeInfo.textContent;
   ok(runtimeInfoText.includes(runtimeDetails.info.name),
      "Runtime info shows the correct runtime name: " + runtimeInfoText);
   ok(runtimeInfoText.includes(runtimeDetails.info.version),
      "Runtime info shows the correct version number: " + runtimeInfoText);
 
   await removeTab(tab);
--- a/devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_routes.js
+++ b/devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_routes.js
@@ -20,30 +20,30 @@ add_task(async function() {
 add_task(async function() {
   // enable USB devices mocks
   const mocks = new Mocks();
 
   const { document, tab } = await openAboutDebugging();
 
   info("Check 'This Firefox' route");
   document.location.hash = "#/runtime/this-firefox";
-  await waitUntil(() => document.querySelector(".js-runtime-page"));
-  const infoLabel = document.querySelector(".js-runtime-name").textContent;
+  await waitUntil(() => document.querySelector(".qa-runtime-page"));
+  const infoLabel = document.querySelector(".qa-runtime-name").textContent;
   // NOTE: when using USB Mocks, we see only "Firefox" as the device name
   ok(infoLabel.includes("Firefox"), "Runtime is displayed as Firefox");
   ok(!infoLabel.includes(" on "), "Runtime is not associated to any device");
   is(
       document.title,
       "Debugging - Runtime / this-firefox",
       "Checking title for 'runtime' page"
   );
 
   info("Check 'Setup' page");
   document.location.hash = "#/setup";
-  await waitUntil(() => document.querySelector(".js-connect-page"));
+  await waitUntil(() => document.querySelector(".qa-connect-page"));
   ok(true, "Setup page has been shown");
   is(
       document.title,
       "Debugging - Setup",
       "Checking title for 'setup' page"
   );
 
   info("Check 'USB device runtime' page");
@@ -51,18 +51,18 @@ add_task(async function() {
   mocks.createUSBRuntime("1337id", {
     deviceName: "Fancy Phone",
     name: "Lorem ipsum",
   });
   mocks.emitUSBUpdate();
   await connectToRuntime("Fancy Phone", document);
   // navigate to it via URL
   document.location.hash = "#/runtime/1337id";
-  await waitUntil(() => document.querySelector(".js-runtime-page"));
-  const runtimeLabel = document.querySelector(".js-runtime-name").textContent;
+  await waitUntil(() => document.querySelector(".qa-runtime-page"));
+  const runtimeLabel = document.querySelector(".qa-runtime-name").textContent;
   is(
       document.title,
       "Debugging - Runtime / 1337id",
       "Checking title for 'runtime' page with USB device"
   );
   ok(runtimeLabel.includes("Lorem ipsum"), "Runtime is displayed with the mocked name");
 
   await removeTab(tab);
@@ -72,21 +72,21 @@ add_task(async function() {
  * Test that an invalid route redirects to / (currently This Firefox page)
  */
 add_task(async function() {
   info("Check an invalid route redirects to root");
   const { document, tab } = await openAboutDebugging();
 
   info("Waiting for a non setup page to load");
   document.location.hash = "#/runtime/this-firefox";
-  await waitUntil(() => document.querySelector(".js-runtime-page"));
+  await waitUntil(() => document.querySelector(".qa-runtime-page"));
 
   info("Update hash & wait for a redirect to root (connect page)");
   document.location.hash = "#/lorem-ipsum";
-  await waitUntil(() => document.querySelector(".js-connect-page"));
+  await waitUntil(() => document.querySelector(".qa-connect-page"));
   is(
       document.title,
       "Debugging - Setup",
       "Checking title for 'setup' page"
   );
   is(document.location.hash, "#/setup", "Redirected to root");
 
   await removeTab(tab);
@@ -98,19 +98,19 @@ add_task(async function() {
 add_task(async function testOldAboutDebuggingRoutes() {
   info("Check that routes from old about:debugging redirect to this Firefox");
   const { document, tab } = await openAboutDebugging();
 
   const routes = ["addons", "tabs", "workers"];
   for (const route of routes) {
     info("Move to setup page before testing the route");
     document.location.hash = "#/setup";
-    await waitUntil(() => document.querySelector(".js-connect-page"));
+    await waitUntil(() => document.querySelector(".qa-connect-page"));
 
     info(`Check that navigating to ${route} redirects to This Firefox`);
     document.location.hash = route;
-    await waitUntil(() => document.querySelector(".js-runtime-page"));
+    await waitUntil(() => document.querySelector(".qa-runtime-page"));
     is(document.location.hash, "#/runtime/this-firefox",
       `${route} was redirected to This Firefox`);
   }
 
   await removeTab(tab);
 });
--- a/devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_runtime_compatibility_warning.js
+++ b/devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_runtime_compatibility_warning.js
@@ -31,33 +31,33 @@ add_task(async function() {
   info("Connect to all runtimes");
   await connectToRuntime(COMPATIBLE_DEVICE, document);
   await connectToRuntime(OLD_DEVICE, document);
   await connectToRuntime(RECENT_DEVICE, document);
   await connectToRuntime(DEBUGGER_67_DEVICE, document);
 
   info("Select the compatible runtime and check that no warning is displayed");
   await selectRuntime(COMPATIBLE_DEVICE, COMPATIBLE_RUNTIME, document);
-  ok(!document.querySelector(".js-compatibility-warning"),
+  ok(!document.querySelector(".qa-compatibility-warning"),
     "Compatibility warning is not displayed");
 
   info("Select the old runtime and check that the too-old warning is displayed");
   await selectRuntime(OLD_DEVICE, OLD_RUNTIME, document);
-  ok(document.querySelector(".js-compatibility-warning-too-old"),
+  ok(document.querySelector(".qa-compatibility-warning-too-old"),
     "Expected compatibility warning is displayed (too-old)");
 
   info("Select the recent runtime and check that the too-recent warning is displayed");
   await selectRuntime(RECENT_DEVICE, RECENT_RUNTIME, document);
-  ok(document.querySelector(".js-compatibility-warning-too-recent"),
+  ok(document.querySelector(".qa-compatibility-warning-too-recent"),
     "Expected compatibility warning is displayed (too-recent)");
 
   info("Select the runtime incompatible with Fx 67 " +
     "and check that the debugger 67 warning is displayed");
   await selectRuntime(DEBUGGER_67_DEVICE, DEBUGGER_67_RUNTIME, document);
-  ok(document.querySelector(".js-compatibility-warning-too-old-67-debugger"));
+  ok(document.querySelector(".qa-compatibility-warning-too-old-67-debugger"));
 
   await removeTab(tab);
 });
 
 function createRuntimeWithReport(mocks, name, deviceName, status) {
   const runtimeId = [name, deviceName].join("-");
   const compatibleUsbClient = mocks.createUSBRuntime(runtimeId, { deviceName, name });
   const report = { status };
--- a/devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_runtime_disconnect_remote_runtime.js
+++ b/devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_runtime_disconnect_remote_runtime.js
@@ -34,15 +34,15 @@ add_task(async function() {
   info("Check whether disconnect remote runtime button exists");
   ok(!!disconnectRemoteRuntimeButton,
     "Runtime contains the disconnect button");
 
   info("Click on the disconnect button");
   disconnectRemoteRuntimeButton.click();
 
   info("Wait until the runtime is disconnected");
-  await waitUntil(() => document.querySelector(".js-connect-button"));
+  await waitUntil(() => document.querySelector(".qa-connect-button"));
 
   is(document.location.hash, DEFAULT_PAGE,
     "Redirection to the default page (this-firefox)");
 
   await removeTab(tab);
 });
--- a/devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_runtime_remote_runtime_buttons.js
+++ b/devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_runtime_remote_runtime_buttons.js
@@ -17,28 +17,28 @@ add_task(async function() {
     deviceName: USB_DEVICE_NAME,
     name: USB_APP_NAME,
   });
 
   const { document, tab, window } = await openAboutDebugging();
   await selectThisFirefoxPage(document, window.AboutDebugging.store);
 
   info("Checking This Firefox");
-  ok(!document.querySelector(".js-connection-prompt-toggle-button"),
+  ok(!document.querySelector(".qa-connection-prompt-toggle-button"),
     "This Firefox does not contain the connection prompt button");
-  ok(!document.querySelector(".js-profile-runtime-button"),
+  ok(!document.querySelector(".qa-profile-runtime-button"),
     "This Firefox does not contain the profile runtime button");
   ok(!document.querySelector(".qa-runtime-info__action"),
     "This Firefox does not contain the disconnect button");
 
   info("Checking a USB runtime");
   mocks.emitUSBUpdate();
   await connectToRuntime(USB_DEVICE_NAME, document);
   await selectRuntime(USB_DEVICE_NAME, USB_APP_NAME, document);
-  ok(!!document.querySelector(".js-connection-prompt-toggle-button"),
+  ok(!!document.querySelector(".qa-connection-prompt-toggle-button"),
     "Runtime contains the connection prompt button");
-  ok(!!document.querySelector(".js-profile-runtime-button"),
+  ok(!!document.querySelector(".qa-profile-runtime-button"),
     "Remote runtime contains the profile runtime button");
   ok(!!document.querySelector(".qa-runtime-info__action"),
     "Runtime contains the disconnect button");
 
   await removeTab(tab);
 });
--- a/devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_runtime_usbclient_closed.js
+++ b/devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_runtime_usbclient_closed.js
@@ -56,17 +56,17 @@ add_task(async function testUsbClientDis
 
   info("Simulate a client disconnection");
   usbClient.isClosed = () => true;
   usbClient._eventEmitter.emit("closed");
 
   info("Wait until the connect button for this runtime appears");
   await waitUntil(() => {
     const item = findSidebarItemByText(USB_DEVICE_NAME, document);
-    return item && item.querySelector(".js-connect-button");
+    return item && item.querySelector(".qa-connect-button");
   });
 
   is(document.location.hash, `#/runtime/this-firefox`,
     "Redirection to the default page (this-firefox)");
   await removeTab(tab);
 });
 
 // Test that about:debugging navigates back to the default page when the server for the
@@ -86,15 +86,15 @@ add_task(async function testNetworkClien
 
   info("Simulate a client disconnection");
   networkClient.isClosed = () => true;
   networkClient._eventEmitter.emit("closed");
 
   info("Wait until the connect button for this runtime appears");
   await waitUntil(() => {
     const item = findSidebarItemByText(NETWORK_RUNTIME_HOST, document);
-    return item && item.querySelector(".js-connect-button");
+    return item && item.querySelector(".qa-connect-button");
   });
 
   is(document.location.hash, `#/runtime/this-firefox`,
     "Redirection to the default page (this-firefox)");
   await removeTab(tab);
 });
--- a/devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_select_network_runtime.js
+++ b/devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_select_network_runtime.js
@@ -27,17 +27,17 @@ add_task(async function() {
     };
   };
 
   info("Test addons in runtime page for Network client");
   await connectToRuntime(NETWORK_RUNTIME_HOST, document);
   await selectRuntime(NETWORK_RUNTIME_HOST, NETWORK_RUNTIME_APP_NAME, document);
 
   info("Check that the network runtime mock is properly displayed");
-  const thisFirefoxRuntimeInfo = document.querySelector(".js-runtime-name");
+  const thisFirefoxRuntimeInfo = document.querySelector(".qa-runtime-name");
   ok(thisFirefoxRuntimeInfo, "Runtime info for this-firefox runtime is displayed");
   const runtimeInfoText = thisFirefoxRuntimeInfo.textContent;
 
   ok(runtimeInfoText.includes(NETWORK_RUNTIME_APP_NAME),
     "network runtime info shows the correct runtime name: " + runtimeInfoText);
   ok(runtimeInfoText.includes(NETWORK_RUNTIME_VERSION),
     "network runtime info shows the correct version number: " + runtimeInfoText);
 
--- a/devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_select_page_with_serviceworker.js
+++ b/devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_select_page_with_serviceworker.js
@@ -41,26 +41,26 @@ add_task(async function() {
   networkClient._eventEmitter.emit("workersUpdated");
 
   info("Wait until the service worker is displayed");
   await waitUntil(() => findDebugTargetByText(WORKER_NAME, document));
 
   info("Go to This Firefox again");
   const thisFirefoxString = getThisFirefoxString(window);
   const thisFirefoxSidebarItem = findSidebarItemByText(thisFirefoxString, document);
-  const thisFirefoxLink = thisFirefoxSidebarItem.querySelector(".js-sidebar-link");
+  const thisFirefoxLink = thisFirefoxSidebarItem.querySelector(".qa-sidebar-link");
   info("Click on the ThisFirefox item in the sidebar");
   const requestsSuccess = waitForRequestsSuccess(window.AboutDebugging.store);
   thisFirefoxLink.click();
 
   info("Wait for all target requests to complete");
   await requestsSuccess;
 
   info("Check that the runtime info is rendered for This Firefox");
-  const thisFirefoxRuntimeInfo = document.querySelector(".js-runtime-name");
+  const thisFirefoxRuntimeInfo = document.querySelector(".qa-runtime-name");
   ok(thisFirefoxRuntimeInfo, "Runtime info for this-firefox runtime is displayed");
 
   const text = thisFirefoxRuntimeInfo.textContent;
   ok(text.includes("Firefox") && text.includes("63.0"),
     "this-firefox runtime info shows the correct values");
 
   await removeTab(tab);
 });
--- a/devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_serviceworker_fetch_flag.js
+++ b/devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_serviceworker_fetch_flag.js
@@ -33,18 +33,18 @@ add_task(async function() {
 async function testServiceWorkerFetchStatus(doc, url, workerUrl, isListening) {
   // Open a tab that registers a fetch service worker.
   const swTab = await addTab(url);
 
   info("Wait until the service worker appears and is running");
   const targetElement = await waitForServiceWorkerRunning(workerUrl, doc);
 
   const expectedClassName = isListening ?
-    ".js-worker-fetch-listening" :
-    ".js-worker-fetch-not-listening";
+    ".qa-worker-fetch-listening" :
+    ".qa-worker-fetch-not-listening";
   const fetchStatus = targetElement.querySelector(expectedClassName);
   ok(!!fetchStatus, "Found the expected fetch status: " + expectedClassName);
 
   info("Unregister the service worker");
   await unregisterServiceWorker(swTab);
 
   info("Wait until the service worker disappears from about:debugging");
   await waitUntil(() => !findDebugTargetByText(workerUrl, doc));
--- a/devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_serviceworker_multie10s.js
+++ b/devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_serviceworker_multie10s.js
@@ -50,39 +50,39 @@ async function testDebuggingSW(enableMul
   await forwardServiceWorkerMessage(swTab);
 
   info("Wait for the service worker to claim the test window before proceeding.");
   await onTabMessage(swTab, "sw-claimed");
 
   info("Wait until the service worker appears and is running");
   await waitUntil(() => {
     const target = findDebugTargetByText(SERVICE_WORKER, document);
-    const status = target && target.querySelector(".js-worker-status");
+    const status = target && target.querySelector(".qa-worker-status");
     return status && status.textContent === "Running";
   });
 
   let targetElement = findDebugTargetByText(SERVICE_WORKER, document);
-  let pushButton = targetElement.querySelector(".js-push-button");
+  let pushButton = targetElement.querySelector(".qa-push-button");
   ok(!pushButton.disabled, "Push button is not disabled");
-  let inspectButton = targetElement.querySelector(".js-debug-target-inspect-button");
+  let inspectButton = targetElement.querySelector(".qa-debug-target-inspect-button");
   ok(!inspectButton.disabled, "Inspect button is not disabled");
 
   // enable multi e10s
   info("Enabling multi e10s");
   await enableMultiE10sFn();
 
   info("Wait for debug target to re-render");
   await waitUntil(() => {
     targetElement = findDebugTargetByText(SERVICE_WORKER, document);
-    pushButton = targetElement.querySelector(".js-push-button");
+    pushButton = targetElement.querySelector(".qa-push-button");
     return pushButton.disabled;
   });
 
   ok(pushButton.disabled, "Push button is disabled");
-  inspectButton = targetElement.querySelector(".js-debug-target-inspect-button");
+  inspectButton = targetElement.querySelector(".qa-debug-target-inspect-button");
   ok(inspectButton.disabled, "Inspect button is disabled");
 
   info("Unregister the service worker");
   await unregisterServiceWorker(swTab, "pushServiceWorkerRegistration");
 
   info("Wait until the service worker disappears from about:debugging");
   await waitUntil(() => !findDebugTargetByText(SERVICE_WORKER, document));
 
--- a/devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_serviceworker_not_compatible.js
+++ b/devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_serviceworker_not_compatible.js
@@ -89,12 +89,12 @@ add_task(async function testRemoteRuntim
     info("Remove all remote clients");
     await remoteClientManager.removeAllClients();
 
     await removeTab(tab);
   }
 });
 
 function assertWarningMessage(doc, expectedMessage) {
-  const hasMessage = !!doc.querySelector(".js-service-workers-warning");
+  const hasMessage = !!doc.querySelector(".qa-service-workers-warning");
   ok(hasMessage === expectedMessage, expectedMessage ?
     "Warning message is displayed" : "Warning message is not displayed");
 }
--- a/devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_serviceworker_push.js
+++ b/devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_serviceworker_push.js
@@ -25,17 +25,17 @@ add_task(async function() {
 
   info("Wait for the service worker to claim the test window before proceeding.");
   await onTabMessage(swTab, "sw-claimed");
 
   info("Wait until the service worker appears and is running");
   const targetElement = await waitForServiceWorkerRunning(SERVICE_WORKER, document);
 
   // Retrieve the Push button for the worker.
-  const pushButton = targetElement.querySelector(".js-push-button");
+  const pushButton = targetElement.querySelector(".qa-push-button");
   ok(pushButton, "Found its push button");
 
   info("Click on the Push button and wait for the push notification");
   const onPushNotification = onTabMessage(swTab, "sw-pushed");
   pushButton.click();
   await onPushNotification;
 
   info("Unregister the service worker");
--- a/devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_serviceworker_pushservice_url.js
+++ b/devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_serviceworker_pushservice_url.js
@@ -36,29 +36,29 @@ add_task(async function() {
   const targetElement = await waitForServiceWorkerRunning(SERVICE_WORKER, document);
 
   info("Subscribe from the push service");
   ContentTask.spawn(swTab.linkedBrowser, {}, () => {
     content.wrappedJSObject.subscribeToPush();
   });
 
   info("Wait until the push service appears");
-  await waitUntil(() => targetElement.querySelector(".js-worker-push-service-value"));
-  const pushUrl = targetElement.querySelector(".js-worker-push-service-value");
+  await waitUntil(() => targetElement.querySelector(".qa-worker-push-service-value"));
+  const pushUrl = targetElement.querySelector(".qa-worker-push-service-value");
 
   ok(!!pushUrl, "Push URL is displayed for the serviceworker");
   is(pushUrl.textContent, FAKE_ENDPOINT, "Push URL shows the expected content");
 
   info("Unsubscribe from the push service");
   ContentTask.spawn(swTab.linkedBrowser, {}, () => {
     content.wrappedJSObject.unsubscribeToPush();
   });
 
   info("Wait until the push service disappears");
-  await waitUntil(() => !targetElement.querySelector(".js-worker-push-service-value"));
+  await waitUntil(() => !targetElement.querySelector(".qa-worker-push-service-value"));
 
   info("Unregister the service worker");
   await unregisterServiceWorker(swTab);
 
   info("Wait until the service worker disappears from about:debugging");
   await waitUntil(() => !findDebugTargetByText(SERVICE_WORKER, document));
 
   info("Remove the service worker tab");
--- a/devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_serviceworker_runtime-page.js
+++ b/devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_serviceworker_runtime-page.js
@@ -25,39 +25,39 @@ add_task(async function() {
     await openAboutDebugging({ enableWorkerUpdates: true });
   const store = window.AboutDebugging.store;
 
   await selectThisFirefoxPage(document, store);
 
   // check that SW list is empty
   info("Check that the SW pane is empty");
   let swPane = getDebugTargetPane("Service Workers", document);
-  ok(!swPane.querySelector(".js-debug-target-item"),
+  ok(!swPane.querySelector(".qa-debug-target-item"),
     "SW list is empty");
 
   // open a tab and register service worker
   info("Register a service worker");
   const swTab = await addTab(SW_TAB_URL);
 
   // check that service worker is rendered
   info("Wait until the service worker appears and is running");
   await waitForServiceWorkerRunning(SW_URL, document);
 
   swPane = getDebugTargetPane("Service Workers", document);
-  ok(swPane.querySelectorAll(".js-debug-target-item").length === 1,
+  ok(swPane.querySelectorAll(".qa-debug-target-item").length === 1,
     "Service worker list has one element");
-  ok(swPane.querySelector(".js-debug-target-item").textContent.includes(SW_URL),
+  ok(swPane.querySelector(".qa-debug-target-item").textContent.includes(SW_URL),
     "Service worker list is the one we registered");
 
   // unregister the service worker
   info("Unregister service worker");
   await unregisterServiceWorker(swTab);
   // check that service worker is not rendered anymore
   info("Wait for service worker to disappear");
   await waitUntil(() => {
     swPane = getDebugTargetPane("Service Workers", document);
-    return swPane.querySelectorAll(".js-debug-target-item").length === 0;
+    return swPane.querySelectorAll(".qa-debug-target-item").length === 0;
   });
 
   info("Remove tabs");
   await removeTab(swTab);
   await removeTab(tab);
 });
--- a/devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_serviceworker_start.js
+++ b/devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_serviceworker_start.js
@@ -35,27 +35,27 @@ add_task(async function() {
   // Wait for the registration to make sure service worker has been started, and that we
   // are not just reading STOPPED as the initial state.
   await waitForRegistration(swTab);
 
   info("Wait until the service worker stops");
   const targetElement = await waitForServiceWorkerStopped(SW_URL, document);
 
   // Retrieve the Start button for the worker.
-  const startButton = targetElement.querySelector(".js-start-button");
+  const startButton = targetElement.querySelector(".qa-start-button");
   ok(startButton, "Found its start button");
 
   info("Click on the start button and wait for the service worker to be running");
   const onServiceWorkerRunning = waitForServiceWorkerRunning(SW_URL, document);
   startButton.click();
   const updatedTarget = await onServiceWorkerRunning;
 
   // Check that the buttons are displayed as expected.
-  const hasInspectButton = updatedTarget.querySelector(".js-debug-target-inspect-button");
-  const hasStartButton = updatedTarget.querySelector(".js-start-button");
+  const hasInspectButton = updatedTarget.querySelector(".qa-debug-target-inspect-button");
+  const hasStartButton = updatedTarget.querySelector(".qa-start-button");
   ok(hasInspectButton, "Service worker has an inspect button");
   ok(!hasStartButton, "Service worker does not have a start button");
 
   info("Unregister service worker");
   await unregisterServiceWorker(swTab);
 
   info("Wait until the service worker disappears from about:debugging");
   await waitUntil(() => !findDebugTargetByText(SW_URL, document));
--- a/devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_serviceworker_status.js
+++ b/devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_serviceworker_status.js
@@ -53,20 +53,20 @@ add_task(async function() {
   info("Remove tabs");
   await removeTab(swTab);
   await removeTab(tab);
 });
 
 function checkButtons({ inspect, push, start, unregister }, workerText, document) {
   const targetElement = findDebugTargetByText(SW_URL, document);
 
-  const inspectButton = targetElement.querySelector(".js-debug-target-inspect-button");
-  const pushButton = targetElement.querySelector(".js-push-button");
-  const startButton = targetElement.querySelector(".js-start-button");
-  const unregisterButton = targetElement.querySelector(".js-unregister-button");
+  const inspectButton = targetElement.querySelector(".qa-debug-target-inspect-button");
+  const pushButton = targetElement.querySelector(".qa-push-button");
+  const startButton = targetElement.querySelector(".qa-start-button");
+  const unregisterButton = targetElement.querySelector(".qa-unregister-button");
 
   is(!!inspectButton, inspect,
     "Inspect button should be " + (inspect ? "visible" : "hidden"));
   is(!!pushButton, push,
     "Push button should be " + (push ? "visible" : "hidden"));
   is(!!startButton, start,
     "Start button should be " + (start ? "visible" : "hidden"));
   is(!!unregisterButton, unregister,
--- a/devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_serviceworker_timeout.js
+++ b/devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_serviceworker_timeout.js
@@ -85,15 +85,15 @@ add_task(async function() {
 
   info("Remove tabs");
   await removeTab(swTab);
   await removeTab(tab);
 });
 
 function getStartButton(workerText, doc) {
   const target = findDebugTargetByText(workerText, doc);
-  return target ? target.querySelector(".js-start-button") : null;
+  return target ? target.querySelector(".qa-start-button") : null;
 }
 
 function getInspectButton(workerText, doc) {
   const target = findDebugTargetByText(workerText, doc);
-  return target ? target.querySelector(".js-debug-target-inspect-button") : null;
+  return target ? target.querySelector(".qa-debug-target-inspect-button") : null;
 }
--- a/devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_serviceworker_unregister.js
+++ b/devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_serviceworker_unregister.js
@@ -24,17 +24,17 @@ add_task(async function() {
 
   // Open a tab that registers a basic service worker.
   const swTab = await addTab(SW_TAB_URL);
 
   info("Wait until the service worker appears and is running");
   const targetElement = await waitForServiceWorkerRunning(SW_URL, document);
 
   // Retrieve the Start button for the worker.
-  const unregisterButton = targetElement.querySelector(".js-unregister-button");
+  const unregisterButton = targetElement.querySelector(".qa-unregister-button");
   ok(unregisterButton, "Found its unregister button");
 
   info("Click on the unregister button and wait for the service worker to disappear");
   unregisterButton.click();
   await waitUntil(() => !findDebugTargetByText(SW_URL, document));
 
   const hasServiceWorkerTarget = !!findDebugTargetByText(SW_URL, document);
   ok(!hasServiceWorkerTarget, "Service worker was successfully unregistered");
--- a/devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_sidebar_connection_state.js
+++ b/devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_sidebar_connection_state.js
@@ -27,17 +27,17 @@ add_task(async function() {
     deviceName: RUNTIME_DEVICE_NAME,
     shortName: RUNTIME_SHORT_NAME,
   });
   mocks.emitUSBUpdate();
 
   info("Wait until the USB sidebar item appears");
   await waitUntil(() => findSidebarItemByText(RUNTIME_DEVICE_NAME, document));
   const usbRuntimeSidebarItem = findSidebarItemByText(RUNTIME_DEVICE_NAME, document);
-  const connectButton = usbRuntimeSidebarItem.querySelector(".js-connect-button");
+  const connectButton = usbRuntimeSidebarItem.querySelector(".qa-connect-button");
 
   info("Simulate to happen connection error");
   mocks.runtimeClientFactoryMock.createClientForRuntime = async (runtime) => {
     throw new Error("Dummy connection error");
   };
 
   info("Check whether the error message displayed after clicking connect button");
   connectButton.click();
@@ -62,17 +62,17 @@ add_task(async function() {
      "A warning of connection not responding displays");
   ok(connectButton.disabled, "Connect button is disabled");
   ok(connectButton.textContent.startsWith("Connecting"),
      "Label of the connect button changes");
   ok(!document.querySelector(".qa-connection-error"), "Error message disappears");
 
   info("Unblock the connection and check the message and connect button disappear");
   resumeConnection();
-  await waitUntil(() => !usbRuntimeSidebarItem.querySelector(".js-connect-button"));
+  await waitUntil(() => !usbRuntimeSidebarItem.querySelector(".qa-connect-button"));
   ok(!document.querySelector(".qa-connection-error"), "Error disappears");
   ok(!document.querySelector(".qa-connection-not-responding"), "Warning disappears");
 
   info("Remove a USB runtime");
   mocks.removeUSBRuntime(RUNTIME_ID);
   mocks.emitUSBUpdate();
   await waitUntilUsbDeviceIsUnplugged(RUNTIME_DEVICE_NAME, document);
 
@@ -93,17 +93,17 @@ add_task(async function() {
     deviceName: RUNTIME_DEVICE_NAME,
     shortName: RUNTIME_SHORT_NAME,
   });
   mocks.emitUSBUpdate();
 
   info("Wait until the USB sidebar item appears");
   await waitUntil(() => findSidebarItemByText(RUNTIME_DEVICE_NAME, document));
   const usbRuntimeSidebarItem = findSidebarItemByText(RUNTIME_DEVICE_NAME, document);
-  const connectButton = usbRuntimeSidebarItem.querySelector(".js-connect-button");
+  const connectButton = usbRuntimeSidebarItem.querySelector(".qa-connect-button");
 
   let resumeConnection;
   const resumeConnectionPromise = new Promise(r => {
     resumeConnection = r;
   });
   mocks.runtimeClientFactoryMock.createClientForRuntime = async (runtime) => {
     await resumeConnectionPromise;
     return mocks._clients[runtime.type][runtime.id];
--- a/devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_sidebar_network_runtimes.js
+++ b/devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_sidebar_network_runtimes.js
@@ -12,29 +12,29 @@ const networkLocationsModule =
 
 add_task(async function() {
   registerCleanupFunction(() => {
     Services.prefs.clearUserPref("devtools.aboutdebugging.network-locations");
   });
 
   const { document, tab } = await openAboutDebugging();
 
-  const noDevicesElement = document.querySelector(".js-sidebar-no-devices");
+  const noDevicesElement = document.querySelector(".qa-sidebar-no-devices");
   ok(noDevicesElement, "Sidebar shows the 'no devices' element");
 
   info("Add a network location");
   networkLocationsModule.addNetworkLocation("localhost:6080");
 
   info("Wait for 'no devices' element to disappear");
-  waitUntil(() => !document.querySelector(".js-sidebar-no-devices"));
+  waitUntil(() => !document.querySelector(".qa-sidebar-no-devices"));
   ok(findSidebarItemByText("localhost:6080", document),
     "Found a sidebar item for localhost:6080");
 
   info("Remove the network location");
   networkLocationsModule.removeNetworkLocation("localhost:6080");
 
   info("Wait for 'no devices' element to reappear");
-  waitUntil(() => document.querySelector(".js-sidebar-no-devices"));
+  waitUntil(() => document.querySelector(".qa-sidebar-no-devices"));
   ok(!findSidebarItemByText("localhost:6080", document),
     "Sidebar item for localhost:6080 removed");
 
   await removeTab(tab);
 });
--- a/devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_sidebar_usb_runtime_connect.js
+++ b/devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_sidebar_usb_runtime_connect.js
@@ -21,22 +21,22 @@ add_task(async function() {
     deviceName: RUNTIME_DEVICE_NAME,
     shortName: RUNTIME_SHORT_NAME,
   });
   mocks.emitUSBUpdate();
 
   info("Wait until the USB sidebar item appears");
   await waitUntil(() => findSidebarItemByText(RUNTIME_DEVICE_NAME, document));
   const usbRuntimeSidebarItem = findSidebarItemByText(RUNTIME_DEVICE_NAME, document);
-  const connectButton = usbRuntimeSidebarItem.querySelector(".js-connect-button");
+  const connectButton = usbRuntimeSidebarItem.querySelector(".qa-connect-button");
   ok(connectButton, "Connect button is displayed for the USB runtime");
 
   info("Click on the connect button and wait until it disappears");
   connectButton.click();
-  await waitUntil(() => !usbRuntimeSidebarItem.querySelector(".js-connect-button"));
+  await waitUntil(() => !usbRuntimeSidebarItem.querySelector(".qa-connect-button"));
 
   info("Check whether the label of item is updated after connecting");
   ok(usbRuntimeSidebarItem.textContent.includes(RUNTIME_NAME), "Label of item updated");
 
   info("Remove all USB runtimes");
   mocks.removeUSBRuntime(RUNTIME_ID);
   mocks.emitUSBUpdate();
   await waitUntilUsbDeviceIsUnplugged(RUNTIME_DEVICE_NAME, document);
--- a/devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_sidebar_usb_runtime_refresh.js
+++ b/devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_sidebar_usb_runtime_refresh.js
@@ -28,19 +28,19 @@ add_task(async function() {
 
   info("Create a second runtime and click on Refresh Devices");
   mocks.createUSBRuntime(OTHER_RUNTIME_ID, {
     deviceName: OTHER_RUNTIME_APP_NAME,
   });
 
   // adb.updateRuntimes should ultimately fire the "runtime-list-updated" event.
   mocks.adbMock.adb.updateRuntimes = () => mocks.emitUSBUpdate();
-  document.querySelector(".js-refresh-devices-button").click();
+  document.querySelector(".qa-refresh-devices-button").click();
 
   info(`Wait until the sidebar item for ${OTHER_RUNTIME_APP_NAME} appears`);
   await waitUntil(() => findSidebarItemByText(OTHER_RUNTIME_APP_NAME, document));
 
   const sidebarItem = findSidebarItemByText(RUNTIME_DEVICE_NAME, document);
-  ok(!sidebarItem.querySelector(".js-connect-button"),
+  ok(!sidebarItem.querySelector(".qa-connect-button"),
     "Original USB runtime is still connected");
 
   await removeTab(tab);
 });
--- a/devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_sidebar_usb_runtime_select.js
+++ b/devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_sidebar_usb_runtime_select.js
@@ -13,17 +13,17 @@ add_task(async function() {
   const { document, tab } = await openAboutDebugging();
 
   mocks.createUSBRuntime(RUNTIME_DEVICE_ID, { deviceName: RUNTIME_DEVICE_NAME });
   mocks.emitUSBUpdate();
 
   info("Wait until the USB sidebar item appears");
   await waitUntil(() => findSidebarItemByText(RUNTIME_DEVICE_NAME, document));
   const sidebarItem = findSidebarItemByText(RUNTIME_DEVICE_NAME, document);
-  const connectButton = sidebarItem.querySelector(".js-connect-button");
+  const connectButton = sidebarItem.querySelector(".qa-connect-button");
   ok(connectButton, "Connect button is displayed for the USB runtime");
 
   info("Click on the connect button and wait until the sidebar displays a link");
   connectButton.click();
   await waitUntil(() => findSidebarItemLinkByText(RUNTIME_DEVICE_NAME, document));
 
   info("Click on the runtime link");
   const link = findSidebarItemLinkByText(RUNTIME_DEVICE_NAME, document);
--- a/devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_sidebar_usb_status.js
+++ b/devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_sidebar_usb_status.js
@@ -11,34 +11,34 @@ const { adbAddon } = require("devtools/s
  */
 add_task(async function() {
   const mocks = new Mocks();
 
   await pushPref("devtools.remote.adb.extensionURL",
                  CHROME_URL_ROOT + "resources/test-adb-extension/adb-extension-#OS#.xpi");
   const { document, tab } = await openAboutDebugging();
 
-  const usbStatusElement = document.querySelector(".js-sidebar-usb-status");
+  const usbStatusElement = document.querySelector(".qa-sidebar-usb-status");
   ok(usbStatusElement, "Sidebar shows the USB status element");
   ok(usbStatusElement.textContent.includes("USB disabled"),
     "USB status element has 'disabled' content");
 
   info("Install the adb extension and wait for the message to udpate");
   // Use "internal" as the install source to avoid triggering telemetry.
   adbAddon.install("internal");
   // When using mocks, we manually control the .start() call
   await mocks.adbProcessMock.adbProcess.start();
 
   info("Wait till the USB status element has 'enabled' content");
   await waitUntil(() => {
-    const el = document.querySelector(".js-sidebar-usb-status");
+    const el = document.querySelector(".qa-sidebar-usb-status");
     return el.textContent.includes("USB enabled");
   });
 
   info("Uninstall the adb extension and wait for USB status element to update");
   adbAddon.uninstall();
   await waitUntil(() => {
-    const el = document.querySelector(".js-sidebar-usb-status");
+    const el = document.querySelector(".qa-sidebar-usb-status");
     return el.textContent.includes("USB disabled");
   });
 
   await removeTab(tab);
 });
--- a/devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_sidebar_usb_unavailable_runtime.js
+++ b/devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_sidebar_usb_unavailable_runtime.js
@@ -23,35 +23,35 @@ add_task(async function() {
   info("Wait until the USB sidebar item appears");
   await waitUntil(() => findSidebarItemByText(DEVICE_NAME, document));
 
   const usbRuntimeSidebarItem = findSidebarItemByText(DEVICE_NAME, document);
 
   ok(usbRuntimeSidebarItem.querySelector(".qa-runtime-item-waiting-for-browser"),
     "Sidebar item shows as `Waiting for browser`");
 
-  const hasConnectButton = usbRuntimeSidebarItem.querySelector(".js-connect-button");
+  const hasConnectButton = usbRuntimeSidebarItem.querySelector(".qa-connect-button");
   ok(!hasConnectButton, "Connect button is not displayed");
 
-  const hasLink = usbRuntimeSidebarItem.querySelector(".js-sidebar-link");
+  const hasLink = usbRuntimeSidebarItem.querySelector(".qa-sidebar-link");
   ok(!hasLink, "Unavailable runtime is not selectable");
 
   info("Add a valid runtime for the same device id and emit update event");
   mocks.createUSBRuntime(RUNTIME_ID, {
     deviceId: DEVICE_ID,
     deviceName: DEVICE_NAME,
     shortName: RUNTIME_NAME,
   });
   mocks.removeDevice(DEVICE_ID);
   mocks.emitUSBUpdate();
 
   info("Wait until connect button appears for the USB runtime");
   let updatedSidebarItem = null;
   await waitUntil(() => {
     updatedSidebarItem = findSidebarItemByText(DEVICE_NAME, document);
-    return updatedSidebarItem && updatedSidebarItem.querySelector(".js-connect-button");
+    return updatedSidebarItem && updatedSidebarItem.querySelector(".qa-connect-button");
   });
 
   ok(updatedSidebarItem.querySelector(".qa-runtime-item-standard"),
     "Sidebar item for the USB runtime is now a standard sidebar item");
 
   await removeTab(tab);
 });
--- a/devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_tab_favicons.js
+++ b/devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_tab_favicons.js
@@ -21,17 +21,17 @@ const EXPECTED_FAVICON = "data:image/png
 
 add_task(async function() {
   const faviconTab = await addTab(TAB_URL, { background: true });
   const { document, tab, window } = await openAboutDebugging();
   await selectThisFirefoxPage(document, window.AboutDebugging.store);
 
   await waitUntil(() => findDebugTargetByText("Favicon tab", document));
   const faviconTabTarget = findDebugTargetByText("Favicon tab", document);
-  const faviconTabIcon = faviconTabTarget.querySelector(".js-debug-target-item-icon");
+  const faviconTabIcon = faviconTabTarget.querySelector(".qa-debug-target-item-icon");
 
   // Note this relies on PlaceUtils.promiseFaviconData returning the same data-url as the
   // one provided in the test page. If the implementation changes and PlaceUtils returns a
   // different base64 from the one we defined, we can instead load the image and check a
   // few pixels to verify it matches the expected icon.
   is(faviconTabIcon.src, EXPECTED_FAVICON,
     "The debug target item for the tab shows the favicon of the tab");
 
--- a/devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_telemetry_inspect.js
+++ b/devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_telemetry_inspect.js
@@ -22,17 +22,17 @@ add_task(async function() {
 
   info("Open a new background tab TEST_TAB");
   const backgroundTab1 = await addTab(TAB_URL, { background: true });
 
   info("Wait for the tab to appear in the debug targets with the correct name");
   await waitUntil(() => findDebugTargetByText("TEST_TAB", document));
 
   const tabTarget = findDebugTargetByText("TEST_TAB", document);
-  const inspectButton = tabTarget.querySelector(".js-debug-target-inspect-button");
+  const inspectButton = tabTarget.querySelector(".qa-debug-target-inspect-button");
   ok(inspectButton, "Inspect button for the tab is available");
 
   info("Click on the inspect button for the test tab");
   inspectButton.click();
   await BrowserTestUtils.browserLoaded(gBrowser.selectedBrowser);
   const newTabUrl = gBrowser.selectedBrowser.currentURI.spec;
   ok(newTabUrl.startsWith("about:devtools-toolbox"),
     "about:devtools-toolbox opened in a new tab");
--- a/devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_telemetry_navigate.js
+++ b/devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_telemetry_navigate.js
@@ -18,17 +18,17 @@ add_task(async function() {
   const { tab, document, window } = await openAboutDebugging();
   await selectThisFirefoxPage(document, window.AboutDebugging.store);
 
   const sessionId = getOpenEventSessionId();
   ok(!isNaN(sessionId), "Open event has a valid session id");
 
   info("Navigate to 'Connect' page");
   document.location.hash = "#/connect";
-  await waitUntil(() => document.querySelector(".js-connect-page"));
+  await waitUntil(() => document.querySelector(".qa-connect-page"));
   checkSelectPageEvent("connect", sessionId);
 
   info("Navigate to 'USB device runtime' page");
   await navigateToUSBRuntime(mocks, document);
   checkSelectPageEvent("runtime", sessionId);
   await waitForRequestsToSettle(window.AboutDebugging.store);
 
   await removeTab(tab);
@@ -46,10 +46,10 @@ async function navigateToUSBRuntime(mock
   mocks.createUSBRuntime("1337id", {
     deviceName: "Fancy Phone",
     name: "Lorem ipsum",
   });
   mocks.emitUSBUpdate();
   await connectToRuntime("Fancy Phone", doc);
   // navigate to it via URL
   doc.location.hash = "#/runtime/1337id";
-  await waitUntil(() => doc.querySelector(".js-runtime-page"));
+  await waitUntil(() => doc.querySelector(".qa-runtime-page"));
 }
--- a/devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_telemetry_runtime_actions.js
+++ b/devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_telemetry_runtime_actions.js
@@ -37,17 +37,17 @@ add_task(async function testUsbRuntimeUp
   await selectRuntime(RUNTIME_DEVICE_NAME, RUNTIME_NAME, document);
 
   info("Read telemetry events to flush unrelated events");
   const evts = readAboutDebuggingEvents();
   const runtimeAddedEvent = evts.filter(e => e.method === "runtime_added")[0];
   const telemetryRuntimeId = runtimeAddedEvent.extras.runtime_id;
 
   info("Click on the toggle button and wait until the text is updated");
-  const promptButton = document.querySelector(".js-connection-prompt-toggle-button");
+  const promptButton = document.querySelector(".qa-connection-prompt-toggle-button");
   promptButton.click();
   await waitUntil(() => promptButton.textContent.includes("Enable"));
 
   checkTelemetryEvents([{
     method: "update_conn_prompt",
     extras: { "prompt_enabled": "false", "runtime_id": telemetryRuntimeId },
   }], sessionId);
 
--- a/devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_thisfirefox.js
+++ b/devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_thisfirefox.js
@@ -39,24 +39,24 @@ add_task(async function testThisFirefoxW
   await checkThisFirefoxTargetPanes(document, expectedTargetPanesWithoutTabs);
 
   await removeTab(tab);
 });
 
 async function checkThisFirefoxTargetPanes(doc, expectedTargetPanes) {
   const win = doc.ownerGlobal;
   // Check that the selected sidebar item is "This Firefox"/"This Nightly"/...
-  const selectedSidebarItem = doc.querySelector(".js-sidebar-item-selected");
+  const selectedSidebarItem = doc.querySelector(".qa-sidebar-item-selected");
   ok(selectedSidebarItem, "An item is selected in the sidebar");
 
   const thisFirefoxString = getThisFirefoxString(win);
   is(selectedSidebarItem.textContent, thisFirefoxString,
     "The selected sidebar item is " + thisFirefoxString);
 
-  const paneTitlesEls = doc.querySelectorAll(".js-debug-target-pane-title");
+  const paneTitlesEls = doc.querySelectorAll(".qa-debug-target-pane-title");
   is(paneTitlesEls.length, expectedTargetPanes.length,
     "This Firefox has the expected number of debug target categories");
 
   const paneTitles = [...paneTitlesEls].map(el => el.textContent);
 
   for (let i = 0; i < expectedTargetPanes.length; i++) {
     const expectedPaneTitle = expectedTargetPanes[i];
     const actualPaneTitle = paneTitles[i];
--- a/devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_thisfirefox_runtime_info.js
+++ b/devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_thisfirefox_runtime_info.js
@@ -26,17 +26,17 @@ add_task(async function() {
   registerCleanupFunction(() => {
     disableRuntimeClientFactoryMock();
   });
 
   const { document, tab, window } = await openAboutDebugging();
   await selectThisFirefoxPage(document, window.AboutDebugging.store);
 
   info("Check that the 'This Firefox' mock is properly displayed");
-  const thisFirefoxRuntimeInfo = document.querySelector(".js-runtime-name");
+  const thisFirefoxRuntimeInfo = document.querySelector(".qa-runtime-name");
   ok(thisFirefoxRuntimeInfo, "Runtime info for this-firefox runtime is displayed");
   const runtimeInfoText = thisFirefoxRuntimeInfo.textContent;
   ok(runtimeInfoText.includes("Firefox"),
     "this-firefox runtime info shows the correct runtime name: " + runtimeInfoText);
   ok(runtimeInfoText.includes("63.0"),
     "this-firefox runtime info shows the correct version number: " + runtimeInfoText);
 
   await removeTab(tab);
--- a/devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_workers_remote_runtime.js
+++ b/devtools/client/aboutdebugging-new/test/browser/browser_aboutdebugging_workers_remote_runtime.js
@@ -76,33 +76,33 @@ add_task(async function() {
  */
 async function testWorkerOnMockedRemoteClient(testData, remoteClient, firefoxClient,
   document) {
   const { category, propertyName, workerName } = testData;
   info(`Test workers for category [${category}] in remote runtime`);
 
   const workersPane = getDebugTargetPane(category, document);
   info("Check an empty target pane message is displayed");
-  ok(workersPane.querySelector(".js-debug-target-list-empty"),
+  ok(workersPane.querySelector(".qa-debug-target-list-empty"),
     "Workers list is empty");
 
   info(`Add a worker of type [${propertyName}] to the remote client`);
   const workers = Object.assign({}, EMPTY_WORKERS_RESPONSE, {
     [propertyName]: [{
       name: workerName,
       workerTargetFront: {
         actorID: workerName,
       },
     }],
   });
   remoteClient.listWorkers = () => workers;
   remoteClient._eventEmitter.emit("workersUpdated");
 
   info("Wait until the worker appears");
-  await waitUntil(() => !workersPane.querySelector(".js-debug-target-list-empty"));
+  await waitUntil(() => !workersPane.querySelector(".qa-debug-target-list-empty"));
 
   const workerTarget = findDebugTargetByText(workerName, document);
   ok(workerTarget, "Worker target appeared for the remote runtime");
 
   // Check that the list of REMOTE workers are NOT updated when the local this-firefox
   // emits a workersUpdated event.
   info("Remove the worker from the remote client WITHOUT sending an event");
   remoteClient.listWorkers = () => EMPTY_WORKERS_RESPONSE;
--- a/devtools/client/aboutdebugging-new/test/browser/head.js
+++ b/devtools/client/aboutdebugging-new/test/browser/head.js
@@ -57,27 +57,27 @@ async function openAboutDebugging({ enab
   info("opening about:debugging");
 
   const tab = await addTab("about:debugging");
   const browser = tab.linkedBrowser;
   const document = browser.contentDocument;
   const window = browser.contentWindow;
 
   info("Wait until Connect page is displayed");
-  await waitUntil(() => document.querySelector(".js-connect-page"));
+  await waitUntil(() => document.querySelector(".qa-connect-page"));
 
   return { tab, document, window };
 }
 
 async function openAboutDevtoolsToolbox(doc, tab, win, targetText = "about:debugging",
                                         shouldWaitToolboxReady = true) {
   info("Open about:devtools-toolbox page");
   const target = findDebugTargetByText(targetText, doc);
   ok(target, `${ targetText } tab target appeared`);
-  const inspectButton = target.querySelector(".js-debug-target-inspect-button");
+  const inspectButton = target.querySelector(".qa-debug-target-inspect-button");
   ok(inspectButton, `Inspect button for ${ targetText } appeared`);
   inspectButton.click();
   await Promise.all([
     waitUntil(() => tab.nextElementSibling),
     waitForRequestsToSettle(win.AboutDebugging.store),
     shouldWaitToolboxReady ? gDevTools.once("toolbox-ready") : Promise.resolve(),
   ]);
 
@@ -86,17 +86,17 @@ async function openAboutDevtoolsToolbox(
   await waitUntil(() => gBrowser.selectedTab === devtoolsTab);
   const devtoolsBrowser = gBrowser.selectedBrowser;
   await waitUntil(() =>
     devtoolsBrowser.contentWindow.location.href.startsWith("about:devtools-toolbox?"));
 
   if (!shouldWaitToolboxReady) {
     // Wait for show error page.
     await waitUntil(() =>
-      devtoolsBrowser.contentDocument.querySelector(".js-error-page"));
+      devtoolsBrowser.contentDocument.querySelector(".qa-error-page"));
   }
 
   return {
     devtoolsBrowser,
     devtoolsDocument: devtoolsBrowser.contentDocument,
     devtoolsTab,
     devtoolsWindow: devtoolsBrowser.contentWindow,
   };
@@ -201,93 +201,93 @@ function waitForDispatch(store, type) {
  */
 async function selectThisFirefoxPage(doc, store) {
   info("Select This Firefox page");
   const onRequestSuccess = waitForRequestsSuccess(store);
   doc.location.hash = "#/runtime/this-firefox";
   info("Wait for requests to be complete");
   await onRequestSuccess;
   info("Wait for runtime page to be rendered");
-  await waitUntil(() => doc.querySelector(".js-runtime-page"));
+  await waitUntil(() => doc.querySelector(".qa-runtime-page"));
 }
 
 /**
  * Navigate to the Connect page. Resolves when the Connect page is rendered.
  */
 async function selectConnectPage(doc) {
-  const sidebarItems = doc.querySelectorAll(".js-sidebar-item");
+  const sidebarItems = doc.querySelectorAll(".qa-sidebar-item");
   const connectSidebarItem = [...sidebarItems].find(element => {
     return element.textContent === "Setup";
   });
   ok(connectSidebarItem, "Sidebar contains a Connect item");
-  const connectLink = connectSidebarItem.querySelector(".js-sidebar-link");
+  const connectLink = connectSidebarItem.querySelector(".qa-sidebar-link");
   ok(connectLink, "Sidebar contains a Connect link");
 
   info("Click on the Connect link in the sidebar");
   connectLink.click();
 
   info("Wait until Connect page is displayed");
-  await waitUntil(() => doc.querySelector(".js-connect-page"));
+  await waitUntil(() => doc.querySelector(".qa-connect-page"));
 }
 
 function getDebugTargetPane(title, document) {
   // removes the suffix "(<NUMBER>)" in debug target pane's title, if needed
   const sanitizeTitle = (x) => {
     return x.replace(/\s+\(\d+\)$/, "");
   };
 
   const targetTitle = sanitizeTitle(title);
-  for (const titleEl of document.querySelectorAll(".js-debug-target-pane-title")) {
+  for (const titleEl of document.querySelectorAll(".qa-debug-target-pane-title")) {
     if (sanitizeTitle(titleEl.textContent) !== targetTitle) {
       continue;
     }
 
-    return titleEl.closest(".js-debug-target-pane");
+    return titleEl.closest(".qa-debug-target-pane");
   }
 
   return null;
 }
 
 function findDebugTargetByText(text, document) {
-  const targets = [...document.querySelectorAll(".js-debug-target-item")];
+  const targets = [...document.querySelectorAll(".qa-debug-target-item")];
   return targets.find(target => target.textContent.includes(text));
 }
 
 function findSidebarItemByText(text, document) {
-  const sidebarItems = document.querySelectorAll(".js-sidebar-item");
+  const sidebarItems = document.querySelectorAll(".qa-sidebar-item");
   return [...sidebarItems].find(element => {
     return element.textContent.includes(text);
   });
 }
 
 function findSidebarItemLinkByText(text, document) {
-  const links = document.querySelectorAll(".js-sidebar-link");
+  const links = document.querySelectorAll(".qa-sidebar-link");
   return [...links].find(element => {
     return element.textContent.includes(text);
   });
 }
 
 async function connectToRuntime(deviceName, document) {
   info(`Wait until the sidebar item for ${deviceName} appears`);
   await waitUntil(() => findSidebarItemByText(deviceName, document));
   const sidebarItem = findSidebarItemByText(deviceName, document);
-  const connectButton = sidebarItem.querySelector(".js-connect-button");
+  const connectButton = sidebarItem.querySelector(".qa-connect-button");
   ok(connectButton, `Connect button is displayed for the runtime ${deviceName}`);
 
   info("Click on the connect button and wait until it disappears");
   connectButton.click();
-  await waitUntil(() => !sidebarItem.querySelector(".js-connect-button"));
+  await waitUntil(() => !sidebarItem.querySelector(".qa-connect-button"));
 }
 
 async function selectRuntime(deviceName, name, document) {
   const sidebarItem = findSidebarItemByText(deviceName, document);
-  sidebarItem.querySelector(".js-sidebar-link").click();
+  sidebarItem.querySelector(".qa-sidebar-link").click();
 
   await waitUntil(() => {
-    const runtimeInfo = document.querySelector(".js-runtime-name");
+    const runtimeInfo = document.querySelector(".qa-runtime-name");
     return runtimeInfo && runtimeInfo.textContent.includes(name);
   });
 }
 
 function getToolbox(win) {
   return gDevTools.getToolboxes().find(toolbox => toolbox.win === win);
 }
 
@@ -296,17 +296,17 @@ function getToolbox(win) {
  * client.
  */
 async function openProfilerDialog(client, doc) {
   const onProfilerLoaded = new Promise(r => {
     client.loadPerformanceProfiler = r;
   });
 
   info("Click on the Profile Runtime button");
-  const profileButton = doc.querySelector(".js-profile-runtime-button");
+  const profileButton = doc.querySelector(".qa-profile-runtime-button");
   profileButton.click();
 
   info("Wait for the loadPerformanceProfiler callback to be executed on client-wrapper");
   return onProfilerLoaded;
 }
 
 /**
  * The "This Firefox" string depends on the brandShortName, which will be different
--- a/devtools/client/aboutdebugging-new/test/browser/helper-addons.js
+++ b/devtools/client/aboutdebugging-new/test/browser/helper-addons.js
@@ -65,17 +65,17 @@ async function installTemporaryExtension
       }
 
       Management.off("startup", listener);
       done();
     });
   });
 
   // Trigger the file picker by clicking on the button
-  document.querySelector(".js-temporary-extension-install-button").click();
+  document.querySelector(".qa-temporary-extension-install-button").click();
 
   info("Wait for addon to be installed");
   await onAddonInstalled;
 }
 /* exported installTemporaryExtension */
 
 function createTemporaryXPI(xpiData) {
   const { ExtensionTestCommon } =
@@ -131,17 +131,17 @@ async function installTemporaryExtension
   await waitUntil(() => findDebugTargetByText(xpiData.name, document));
   return xpiFile;
 }
 /* exported installTemporaryExtensionFromXPI */
 
 async function removeTemporaryExtension(name, document) {
   info(`Remove the temporary extension with name: '${name}'`);
   const temporaryExtensionItem = findDebugTargetByText(name, document);
-  temporaryExtensionItem.querySelector(".js-temporary-extension-remove-button").click();
+  temporaryExtensionItem.querySelector(".qa-temporary-extension-remove-button").click();
 
   info("Wait until the debug target item disappears");
   await waitUntil(() => !findDebugTargetByText(name, document));
 }
 /* exported removeTemporaryExtension */
 
 async function removeExtension(id, name, document) {
   info("Retrieve the extension instance from the addon manager, and uninstall it");
--- a/devtools/client/aboutdebugging-new/test/browser/helper-collapsibilities.js
+++ b/devtools/client/aboutdebugging-new/test/browser/helper-collapsibilities.js
@@ -35,17 +35,17 @@ function prepareCollapsibilitiesTest() {
   // Make all collapsibilities to be expanded.
   for (const { pref } of TARGET_PANES) {
     Services.prefs.setBoolPref(pref, false);
   }
 }
 /* exported prepareCollapsibilitiesTest */
 
 async function toggleCollapsibility(debugTargetPane) {
-  debugTargetPane.querySelector(".js-debug-target-pane-title").click();
+  debugTargetPane.querySelector(".qa-debug-target-pane-title").click();
   // Wait for animation of collapse/expand.
   const animations = debugTargetPane.ownerDocument.getAnimations();
   await Promise.all(animations.map(animation => animation.finished));
 }
 /* exported toggleCollapsibility */
 
 registerCleanupFunction(() => {
   for (const { pref } of TARGET_PANES) {
--- a/devtools/client/aboutdebugging-new/test/browser/helper-real-usb.js
+++ b/devtools/client/aboutdebugging-new/test/browser/helper-real-usb.js
@@ -32,17 +32,17 @@ async function openAboutDebuggingWithADB
   const { document, tab, window } = await openAboutDebugging();
 
   await pushPref("devtools.remote.adb.extensionURL",
                  CHROME_URL_ROOT + "resources/test-adb-extension/adb-extension-#OS#.xpi");
   await checkAdbNotRunning();
 
   const { adbAddon } = require("devtools/shared/adb/adb-addon");
   adbAddon.install("internal");
-  const usbStatusElement = document.querySelector(".js-sidebar-usb-status");
+  const usbStatusElement = document.querySelector(".qa-sidebar-usb-status");
   await waitUntil(() => usbStatusElement.textContent.includes("USB enabled"));
   await waitForAdbStart();
 
   return { document, tab, window };
 }
 /* exported openAboutDebuggingWithADB */
 
 function _getExpectedRuntimesPath() {
--- a/devtools/client/aboutdebugging-new/test/browser/helper-serviceworker.js
+++ b/devtools/client/aboutdebugging-new/test/browser/helper-serviceworker.js
@@ -38,17 +38,17 @@ function onTabMessage(tab, message) {
     });
   });
 }
 /* exported onTabMessage */
 
 async function _waitForServiceWorkerStatus(workerText, status, document) {
   await waitUntil(() => {
     const target = findDebugTargetByText(workerText, document);
-    const statusElement = target && target.querySelector(".js-worker-status");
+    const statusElement = target && target.querySelector(".qa-worker-status");
     return statusElement && statusElement.textContent === status;
   });
 
   return findDebugTargetByText(workerText, document);
 }
 /* exported waitForServiceWorkerRunning */
 
 async function waitForServiceWorkerStopped(workerText, document) {
--- a/devtools/client/framework/components/DebugTargetErrorPage.js
+++ b/devtools/client/framework/components/DebugTargetErrorPage.js
@@ -20,17 +20,17 @@ class DebugTargetErrorPage extends PureC
     };
   }
 
   render() {
     const { errorMessage, L10N } = this.props;
 
     return dom.article(
       {
-        className: "error-page js-error-page",
+        className: "error-page qa-error-page",
       },
       dom.h1(
         {
           className: "error-page__title",
         },
         L10N.getStr("toolbox.debugTargetErrorPage.title"),
       ),
       dom.p(
--- a/devtools/client/framework/components/DebugTargetInfo.js
+++ b/devtools/client/framework/components/DebugTargetInfo.js
@@ -130,17 +130,17 @@ class DebugTargetInfo extends PureCompon
   }
 
   renderConnection() {
     const { connectionType } = this.props.debugTargetData;
     const { image, l10nId } = this.getAssetsForConnectionType();
 
     return dom.span(
       {
-        className: "iconized-label js-connection-info",
+        className: "iconized-label qa-connection-info",
       },
       dom.img({ src: image, alt: `${connectionType} icon`}),
       this.props.L10N.getStr(l10nId),
     );
   }
 
   renderRuntime() {
     const { channel, deviceName } = this.props.debugTargetData.deviceDescription;
@@ -166,25 +166,25 @@ class DebugTargetInfo extends PureCompon
 
     const { image, l10nId } = this.getAssetsForDebugTargetType();
 
     return dom.span(
       {
         className: "iconized-label",
       },
       dom.img({ src: image, alt: this.props.L10N.getStr(l10nId)}),
-      title ? dom.b({ className: "devtools-ellipsis-text js-target-title"}, title) : null,
+      title ? dom.b({ className: "devtools-ellipsis-text qa-target-title"}, title) : null,
       dom.span({ className: "devtools-ellipsis-text" }, url),
     );
   }
 
   render() {
     return dom.header(
       {
-        className: "debug-target-info js-debug-target-info",
+        className: "debug-target-info qa-debug-target-info",
       },
       this.shallRenderConnection() ? this.renderConnection() : null,
       this.renderRuntime(),
       this.renderTarget(),
     );
   }
 }
 
--- a/devtools/client/framework/test/browser_about-devtools-toolbox_load.js
+++ b/devtools/client/framework/test/browser_about-devtools-toolbox_load.js
@@ -17,12 +17,12 @@ add_task(async function() {
   await assertErrorIsShown(document);
   await removeTab(tab);
   // test that error is shown if `remoteId` refers to an unexisting target
   ({ document, tab } = await openAboutToolbox({ type: "tab", remoteId: "13371337" }));
   await assertErrorIsShown(document);
   await removeTab(tab);
 
   async function assertErrorIsShown(doc) {
-    await waitUntil(() => doc.querySelector(".js-error-page"));
-    ok(doc.querySelector(".js-error-page"), "Error page is rendered");
+    await waitUntil(() => doc.querySelector(".qa-error-page"));
+    ok(doc.querySelector(".qa-error-page"), "Error page is rendered");
   }
 });
--- a/devtools/client/framework/test/jest/components/__snapshots__/debug-target-info.test.js.snap
+++ b/devtools/client/framework/test/jest/components/__snapshots__/debug-target-info.test.js.snap
@@ -1,16 +1,16 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`DebugTargetInfo component Connection info renders the expected snapshot for USB Release target 1`] = `
 <header
-  className="debug-target-info js-debug-target-info"
+  className="debug-target-info qa-debug-target-info"
 >
   <span
-    className="iconized-label js-connection-info"
+    className="iconized-label qa-connection-info"
   >
     <img
       alt="usb icon"
       src="chrome://devtools/skin/images/aboutdebugging-usb-icon.svg"
     />
     toolbox.debugTargetInfo.connection.usb
   </span>
   <span
@@ -34,35 +34,35 @@ exports[`DebugTargetInfo component Conne
   <span
     className="iconized-label"
   >
     <img
       alt="toolbox.debugTargetInfo.targetType.tab"
       src="chrome://devtools/skin/images/globe.svg"
     />
     <b
-      className="devtools-ellipsis-text js-target-title"
+      className="devtools-ellipsis-text qa-target-title"
     >
       Test Tab Name
     </b>
     <span
       className="devtools-ellipsis-text"
     >
       http://some.target/url
     </span>
   </span>
 </header>
 `;
 
 exports[`DebugTargetInfo component Target icon renders the expected snapshot for a process target 1`] = `
 <header
-  className="debug-target-info js-debug-target-info"
+  className="debug-target-info qa-debug-target-info"
 >
   <span
-    className="iconized-label js-connection-info"
+    className="iconized-label qa-connection-info"
   >
     <img
       alt="usb icon"
       src="chrome://devtools/skin/images/aboutdebugging-usb-icon.svg"
     />
     toolbox.debugTargetInfo.connection.usb
   </span>
   <span
@@ -86,35 +86,35 @@ exports[`DebugTargetInfo component Targe
   <span
     className="iconized-label"
   >
     <img
       alt="toolbox.debugTargetInfo.targetType.process"
       src="chrome://devtools/skin/images/settings.svg"
     />
     <b
-      className="devtools-ellipsis-text js-target-title"
+      className="devtools-ellipsis-text qa-target-title"
     >
       Test Tab Name
     </b>
     <span
       className="devtools-ellipsis-text"
     >
       http://some.target/url
     </span>
   </span>
 </header>
 `;
 
 exports[`DebugTargetInfo component Target icon renders the expected snapshot for a tab target 1`] = `
 <header
-  className="debug-target-info js-debug-target-info"
+  className="debug-target-info qa-debug-target-info"
 >
   <span
-    className="iconized-label js-connection-info"
+    className="iconized-label qa-connection-info"
   >
     <img
       alt="usb icon"
       src="chrome://devtools/skin/images/aboutdebugging-usb-icon.svg"
     />
     toolbox.debugTargetInfo.connection.usb
   </span>
   <span
@@ -138,35 +138,35 @@ exports[`DebugTargetInfo component Targe
   <span
     className="iconized-label"
   >
     <img
       alt="toolbox.debugTargetInfo.targetType.tab"
       src="chrome://devtools/skin/images/globe.svg"
     />
     <b
-      className="devtools-ellipsis-text js-target-title"
+      className="devtools-ellipsis-text qa-target-title"
     >
       Test Tab Name
     </b>
     <span
       className="devtools-ellipsis-text"
     >
       http://some.target/url
     </span>
   </span>
 </header>
 `;
 
 exports[`DebugTargetInfo component Target icon renders the expected snapshot for a worker target 1`] = `
 <header
-  className="debug-target-info js-debug-target-info"
+  className="debug-target-info qa-debug-target-info"
 >
   <span
-    className="iconized-label js-connection-info"
+    className="iconized-label qa-connection-info"
   >
     <img
       alt="usb icon"
       src="chrome://devtools/skin/images/aboutdebugging-usb-icon.svg"
     />
     toolbox.debugTargetInfo.connection.usb
   </span>
   <span
@@ -190,35 +190,35 @@ exports[`DebugTargetInfo component Targe
   <span
     className="iconized-label"
   >
     <img
       alt="toolbox.debugTargetInfo.targetType.worker"
       src="chrome://devtools/skin/images/debugging-workers.svg"
     />
     <b
-      className="devtools-ellipsis-text js-target-title"
+      className="devtools-ellipsis-text qa-target-title"
     >
       Test Tab Name
     </b>
     <span
       className="devtools-ellipsis-text"
     >
       http://some.target/url
     </span>
   </span>
 </header>
 `;
 
 exports[`DebugTargetInfo component Target icon renders the expected snapshot for an extension target 1`] = `
 <header
-  className="debug-target-info js-debug-target-info"
+  className="debug-target-info qa-debug-target-info"
 >
   <span
-    className="iconized-label js-connection-info"
+    className="iconized-label qa-connection-info"
   >
     <img
       alt="usb icon"
       src="chrome://devtools/skin/images/aboutdebugging-usb-icon.svg"
     />
     toolbox.debugTargetInfo.connection.usb
   </span>
   <span
@@ -242,32 +242,32 @@ exports[`DebugTargetInfo component Targe
   <span
     className="iconized-label"
   >
     <img
       alt="toolbox.debugTargetInfo.targetType.extension"
       src="chrome://devtools/skin/images/debugging-addons.svg"
     />
     <b
-      className="devtools-ellipsis-text js-target-title"
+      className="devtools-ellipsis-text qa-target-title"
     >
       Test Tab Name
     </b>
     <span
       className="devtools-ellipsis-text"
     >
       http://some.target/url
     </span>
   </span>
 </header>
 `;
 
 exports[`DebugTargetInfo component Target title renders the expected snapshot for This Firefox target 1`] = `
 <header
-  className="debug-target-info js-debug-target-info"
+  className="debug-target-info qa-debug-target-info"
 >
   <span
     className="iconized-label"
   >
     <img
       className="channel-icon"
       src="chrome://devtools/skin/images/aboutdebugging-firefox-release.svg"
     />
@@ -283,32 +283,32 @@ exports[`DebugTargetInfo component Targe
   <span
     className="iconized-label"
   >
     <img
       alt="toolbox.debugTargetInfo.targetType.tab"
       src="chrome://devtools/skin/images/globe.svg"
     />
     <b
-      className="devtools-ellipsis-text js-target-title"
+      className="devtools-ellipsis-text qa-target-title"
     >
       Test Tab Name
     </b>
     <span
       className="devtools-ellipsis-text"
     >
       http://some.target/url
     </span>
   </span>
 </header>
 `;
 
 exports[`DebugTargetInfo component Target title renders the expected snapshot for a Toolbox with an unnamed target 1`] = `
 <header
-  className="debug-target-info js-debug-target-info"
+  className="debug-target-info qa-debug-target-info"
 >
   <span
     className="iconized-label"
   >
     <img
       className="channel-icon"
       src="chrome://devtools/skin/images/aboutdebugging-firefox-release.svg"
     />
--- a/devtools/client/framework/test/jest/components/debug-target-info.test.js
+++ b/devtools/client/framework/test/jest/components/debug-target-info.test.js
@@ -82,44 +82,44 @@ const THIS_FIREFOX_NO_NAME_TARGET_INFO =
   toolbox: TEST_TOOLBOX_NO_NAME,
   L10N: stubL10N,
 };
 
 describe("DebugTargetInfo component", () => {
   describe("Connection info", () => {
     it("displays connection info for USB Release target", () => {
       const component = renderer.create(DebugTargetInfo(USB_TARGET_INFO));
-      expect(findByClassName(component.root, "js-connection-info").length).toEqual(1);
+      expect(findByClassName(component.root, "qa-connection-info").length).toEqual(1);
     });
 
     it("renders the expected snapshot for USB Release target", () => {
       const component = renderer.create(DebugTargetInfo(USB_TARGET_INFO));
       expect(component.toJSON()).toMatchSnapshot();
     });
 
     it("hides the connection info for This Firefox target", () => {
       const component = renderer.create(DebugTargetInfo(THIS_FIREFOX_TARGET_INFO));
-      expect(findByClassName(component.root, "js-connection-info").length).toEqual(0);
+      expect(findByClassName(component.root, "qa-connection-info").length).toEqual(0);
     });
   });
 
   describe("Target title", () => {
     it("displays the target title if the target of the Toolbox has a name", () => {
       const component = renderer.create(DebugTargetInfo(THIS_FIREFOX_TARGET_INFO));
-      expect(findByClassName(component.root, "js-target-title").length).toEqual(1);
+      expect(findByClassName(component.root, "qa-target-title").length).toEqual(1);
     });
 
     it("renders the expected snapshot for This Firefox target", () => {
       const component = renderer.create(DebugTargetInfo(THIS_FIREFOX_TARGET_INFO));
       expect(component.toJSON()).toMatchSnapshot();
     });
 
     it("doesn't display the target title if the target of the Toolbox has no name", () => {
       const component = renderer.create(DebugTargetInfo(THIS_FIREFOX_NO_NAME_TARGET_INFO));
-      expect(findByClassName(component.root, "js-target-title").length).toEqual(0);
+      expect(findByClassName(component.root, "qa-target-title").length).toEqual(0);
     });
 
     it("renders the expected snapshot for a Toolbox with an unnamed target", () => {
       const component = renderer.create(DebugTargetInfo(THIS_FIREFOX_NO_NAME_TARGET_INFO));
       expect(component.toJSON()).toMatchSnapshot();
     });
   });