--- a/devtools/client/inspector/animation/test/browser.ini
+++ b/devtools/client/inspector/animation/test/browser.ini
@@ -1,13 +1,14 @@
 [DEFAULT]
 tags = devtools
 subsuite = devtools
 support-files =
   doc_custom_playback_rate.html
+  doc_frame_script.js
   doc_multi_easings.html
   doc_multi_keyframes.html
   doc_multi_timings.html
   doc_simple_animation.html
   head.js
   !/devtools/client/inspector/test/head.js
   !/devtools/client/inspector/test/shared-head.js
   !/devtools/client/shared/test/frame-script-utils.js

--- a/devtools/client/inspector/animation/test/browser_animation_animated-property-list.js
+++ b/devtools/client/inspector/animation/test/browser_animation_animated-property-list.js
@@ -15,16 +15,17 @@ const TEST_DATA = [
   {
     targetClass: "compositor-notall",
     expectedNumber: 3,
   },
 ];
 
 add_task(async function() {
   await addTab(URL_ROOT + "doc_simple_animation.html");
+  await removeAnimatedElementsExcept(TEST_DATA.map(t => `.${ t.targetClass }`));
   const { inspector, panel } = await openAnimationInspector();
 
   info("Checking animated property list and items existence at initial");
   ok(!panel.querySelector(".animated-property-list"),
      "The animated-property-list should not be in the DOM at initial");
 
   for (const { targetClass, expectedNumber } of TEST_DATA) {
     info(`Checking animated-property-list and items existence at ${ targetClass }`);

--- a/devtools/client/inspector/animation/test/browser_animation_animated-property-list_unchanged-items.js
+++ b/devtools/client/inspector/animation/test/browser_animation_animated-property-list_unchanged-items.js
@@ -18,20 +18,20 @@ const TEST_DATA = [
   { property: "background-size", isUnchanged: true },
   { property: "padding-bottom", isUnchanged: true },
   { property: "padding-right", isUnchanged: true },
   { property: "padding-top", isUnchanged: true },
 ];
 
 add_task(async function() {
   await addTab(URL_ROOT + "doc_simple_animation.html");
-  const { inspector, panel } = await openAnimationInspector();
+  await removeAnimatedElementsExcept([".longhand"]);
+  const { panel } = await openAnimationInspector();
 
   info("Checking unchanged animated property item");
-  await selectNodeAndWaitForAnimations(".longhand", inspector);
   const itemEls = panel.querySelectorAll(".animated-property-item");
   is(itemEls.length, TEST_DATA.length,
     `Count of animated property item should be ${ TEST_DATA.length }`);
 
   for (let i = 0; i < TEST_DATA.length; i++) {
     const { property, isUnchanged } = TEST_DATA[i];
     const itemEl = itemEls[i];
 

--- a/devtools/client/inspector/animation/test/browser_animation_animated-property-name.js
+++ b/devtools/client/inspector/animation/test/browser_animation_animated-property-name.js
@@ -19,21 +19,20 @@ const TEST_DATA = [
   },
   {
     property: "width",
   },
 ];
 
 add_task(async function() {
   await addTab(URL_ROOT + "doc_simple_animation.html");
-  const { inspector, panel } = await openAnimationInspector();
+  await removeAnimatedElementsExcept([".compositor-notall"]);
+  const { panel } = await openAnimationInspector();
 
   info("Checking animated property name component");
-  await selectNodeAndWaitForAnimations(".compositor-notall", inspector);
-
   const animatedPropertyNameEls = panel.querySelectorAll(".animated-property-name");
   is(animatedPropertyNameEls.length, TEST_DATA.length,
     `Number of animated property name elements should be ${ TEST_DATA.length }`);
 
   for (const [index, animatedPropertyNameEl] of animatedPropertyNameEls.entries()) {
     const {
       property,
       isOnCompositor,

--- a/devtools/client/inspector/animation/test/browser_animation_animation-detail_close-button.js
+++ b/devtools/client/inspector/animation/test/browser_animation_animation-detail_close-button.js
@@ -1,17 +1,17 @@
 /* Any copyright is dedicated to the Public Domain.
    http://creativecommons.org/publicdomain/zero/1.0/ */
 
 "use strict";
 
 // Test that whether close button in header of animation detail works.
 
 add_task(async function() {
-  await addTab(URL_ROOT + "doc_multi_timings.html");
+  await addTab(URL_ROOT + "doc_custom_playback_rate.html");
   const { animationInspector, panel } = await openAnimationInspector();
 
   info("Checking close button in header of animation detail");
   await clickOnAnimation(animationInspector, panel, 0);
   const detailEl = panel.querySelector("#animation-container .controlled");
   const win = panel.ownerGlobal;
   isnot(win.getComputedStyle(detailEl).display, "none",
     "detailEl should be visibled before clicking close button");

--- a/devtools/client/inspector/animation/test/browser_animation_animation-detail_title.js
+++ b/devtools/client/inspector/animation/test/browser_animation_animation-detail_title.js
@@ -17,16 +17,17 @@ const TEST_DATA = [
   {
     targetClass: "easing-step",
     expectedTitle: "Script Animation",
   },
 ];
 
 add_task(async function() {
   await addTab(URL_ROOT + "doc_multi_timings.html");
+  await removeAnimatedElementsExcept(TEST_DATA.map(t => `.${ t.targetClass }`));
   const { inspector, panel } = await openAnimationInspector();
 
   info("Checking title in each header of animation detail");
 
   for (const { targetClass, expectedTitle } of TEST_DATA) {
     info(`Checking title at ${ targetClass }`);
     await selectNodeAndWaitForAnimations(`.${ targetClass }`, inspector);
     const titleEl = panel.querySelector(".animation-detail-title");

--- a/devtools/client/inspector/animation/test/browser_animation_animation-detail_visibility.js
+++ b/devtools/client/inspector/animation/test/browser_animation_animation-detail_visibility.js
@@ -3,17 +3,17 @@
 
 "use strict";
 
 // Test that whether animations detail could be displayed if there is selected animation.
 
 requestLongerTimeout(2);
 
 add_task(async function() {
-  await addTab(URL_ROOT + "doc_multi_timings.html");
+  await addTab(URL_ROOT + "doc_custom_playback_rate.html");
   const { animationInspector, inspector, panel } = await openAnimationInspector();
 
   info("Checking animation detail visibility if animation was unselected");
   const detailEl = panel.querySelector("#animation-container .controlled");
   ok(detailEl, "The detail pane should be in the DOM");
   const win = panel.ownerGlobal;
   is(win.getComputedStyle(detailEl).display, "none", "detailEl should be unvisibled");
 
@@ -22,12 +22,12 @@ add_task(async function() {
   isnot(win.getComputedStyle(detailEl).display, "none", "detailEl should be visibled");
 
   info("Checking animation detail visibility when choose node which has animations");
   await selectNodeAndWaitForAnimations("html", inspector);
   is(win.getComputedStyle(detailEl).display, "none",
     "detailEl should be unvisibled after choose html node");
 
   info("Checking animation detail visibility when choose node which has an animation");
-  await selectNodeAndWaitForAnimations(".cssanimation-normal", inspector);
+  await selectNodeAndWaitForAnimations("div", inspector);
   isnot(win.getComputedStyle(detailEl).display, "none",
     "detailEl should be visibled after choose .cssanimation-normal node");
 });

--- a/devtools/client/inspector/animation/test/browser_animation_animation-list.js
+++ b/devtools/client/inspector/animation/test/browser_animation_animation-list.js
@@ -2,17 +2,17 @@
    http://creativecommons.org/publicdomain/zero/1.0/ */
 
 "use strict";
 
 // Test that whether animations ui could be displayed
 
 add_task(async function() {
   await addTab(URL_ROOT + "doc_simple_animation.html");
-
+  await removeAnimatedElementsExcept([".animated", ".long"]);
   const { animationInspector, inspector, panel } = await openAnimationInspector();
 
   info("Checking animation list and items existence");
   ok(panel.querySelector(".animation-list"),
     "The animation-list is in the DOM");
   is(panel.querySelectorAll(".animation-list .animation-item").length,
      animationInspector.state.animations.length,
      "The number of animations displayed matches the number of animations");
@@ -22,13 +22,12 @@ add_task(async function() {
   const evenColor =
     panel.ownerGlobal.getComputedStyle(animationItemEls[0]).backgroundColor;
   const oddColor =
     panel.ownerGlobal.getComputedStyle(animationItemEls[1]).backgroundColor;
   isnot(evenColor, oddColor,
     "Background color of an even animation should be different from odd");
 
   info("Checking list and items existence after select a element which has an animation");
-  const animatedNode = await getNodeFront(".animated", inspector);
-  await selectNodeAndWaitForAnimations(animatedNode, inspector);
+  await selectNodeAndWaitForAnimations(".animated", inspector);
   is(panel.querySelectorAll(".animation-list .animation-item").length, 1,
     "The number of animations displayed should be 1 for .animated element");
 });

--- a/devtools/client/inspector/animation/test/browser_animation_animation-target.js
+++ b/devtools/client/inspector/animation/test/browser_animation_animation-target.js
@@ -5,16 +5,17 @@
 
 // Test for following AnimationTarget component works.
 // * element existance
 // * number of elements
 // * content of element
 
 add_task(async function() {
   await addTab(URL_ROOT + "doc_simple_animation.html");
+  await removeAnimatedElementsExcept([".animated", ".long"]);
   const { animationInspector, inspector, panel } = await openAnimationInspector();
 
   info("Checking the animation target elements existance");
   const animationItemEls = panel.querySelectorAll(".animation-list .animation-item");
   is(animationItemEls.length, animationInspector.state.animations.length,
      "Number of animation target element should be same to number of animations " +
      "that displays");
 

--- a/devtools/client/inspector/animation/test/browser_animation_animation-timeline-tick.js
+++ b/devtools/client/inspector/animation/test/browser_animation_animation-timeline-tick.js
@@ -13,16 +13,17 @@ const { findOptimalTimeInterval } =
   require("devtools/client/inspector/animation/utils/utils");
 
 // Should be kept in sync with TIME_GRADUATION_MIN_SPACING in
 // AnimationTimeTickList component.
 const TIME_GRADUATION_MIN_SPACING = 40;
 
 add_task(async function() {
   await addTab(URL_ROOT + "doc_simple_animation.html");
+  await removeAnimatedElementsExcept([".end-delay", ".negative-delay"]);
   const { animationInspector, inspector, panel } = await openAnimationInspector();
   const timeScale = new TimeScale(animationInspector.state.animations);
 
   info("Checking animation list header element existence");
   const listContainerEl = panel.querySelector(".animation-list-container");
   const listHeaderEl = listContainerEl.querySelector(".devtools-toolbar");
   ok(listHeaderEl, "The header element should be in animation list container element");
 

--- a/devtools/client/inspector/animation/test/browser_animation_current-time-label.js
+++ b/devtools/client/inspector/animation/test/browser_animation_current-time-label.js
@@ -4,24 +4,24 @@
 "use strict";
 
 // Test for following CurrentTimeLabel component:
 // * element existence
 // * label content at plural timing
 
 add_task(async function() {
   await addTab(URL_ROOT + "doc_multi_timings.html");
-  const { animationInspector, inspector, panel } = await openAnimationInspector();
+  await removeAnimatedElementsExcept([".keyframes-easing-step"]);
+  const { animationInspector, panel } = await openAnimationInspector();
 
   info("Checking current time label existence");
   const labelEl = panel.querySelector(".current-time-label");
   ok(labelEl, "current time label should exist");
 
   info("Checking current time label content");
-  await selectNodeAndWaitForAnimations(".keyframes-easing-step", inspector);
   await clickOnCurrentTimeScrubberController(animationInspector, panel, 0.5);
   assertLabelContent(labelEl, animationInspector.state.animations[0].state.currentTime);
   await clickOnCurrentTimeScrubberController(animationInspector, panel, 0.2);
   assertLabelContent(labelEl, animationInspector.state.animations[0].state.currentTime);
 
   info("Checking current time label content during running");
   // Resume
   await clickOnPauseResumeButton(animationInspector, panel);

--- a/devtools/client/inspector/animation/test/browser_animation_current-time-scrubber.js
+++ b/devtools/client/inspector/animation/test/browser_animation_current-time-scrubber.js
@@ -6,28 +6,28 @@
 // Test for following CurrentTimeScrubber and CurrentTimeScrubberController components:
 // * element existence
 // * scrubber position validity
 // * make animations currentTime to change by click on the controller
 // * mouse drag on the scrubber
 
 add_task(async function() {
   await addTab(URL_ROOT + "doc_simple_animation.html");
-  const { animationInspector, inspector, panel } = await openAnimationInspector();
+  await removeAnimatedElementsExcept([".long"]);
+  const { animationInspector, panel } = await openAnimationInspector();
 
   info("Checking scrubber controller existence");
   const controllerEl = panel.querySelector(".current-time-scrubber-controller");
   ok(controllerEl, "scrubber controller should exist");
 
   info("Checking scrubber existence");
   const scrubberEl = controllerEl.querySelector(".current-time-scrubber");
   ok(scrubberEl, "scrubber should exist");
 
   info("Checking scrubber changes current time of animation and the position");
-  await selectNodeAndWaitForAnimations(".long", inspector);
   const duration = animationInspector.state.timeScale.getDuration();
   await clickOnCurrentTimeScrubberController(animationInspector, panel, 0);
   assertAnimationsCurrentTime(animationInspector, 0);
   assertPosition(scrubberEl, controllerEl, 0, animationInspector);
 
   await clickOnCurrentTimeScrubberController(animationInspector, panel, 1);
   assertAnimationsCurrentTime(animationInspector, duration);
   assertPosition(scrubberEl, controllerEl, duration, animationInspector);

--- a/devtools/client/inspector/animation/test/browser_animation_empty_on_invalid_nodes.js
+++ b/devtools/client/inspector/animation/test/browser_animation_empty_on_invalid_nodes.js
@@ -3,17 +3,17 @@
 "use strict";
 
 requestLongerTimeout(2);
 
 // Test that the panel shows no animation data for invalid or not animated nodes
 
 add_task(async function() {
   await addTab(URL_ROOT + "doc_simple_animation.html");
-
+  await removeAnimatedElementsExcept([".animated", ".long", ".still"]);
   const { inspector, panel } = await openAnimationInspector();
 
   info("Checking animation list and error message existence for a still node");
   const stillNode = await getNodeFront(".still", inspector);
   await selectNodeAndWaitForAnimations(stillNode, inspector);
 
   ok(panel.querySelector(".animation-error-message"),
      "Element which has animation-error-message class should exist for a still node");

--- a/devtools/client/inspector/animation/test/browser_animation_keyframes-graph_computed-value-path.js
+++ b/devtools/client/inspector/animation/test/browser_animation_keyframes-graph_computed-value-path.js
@@ -407,17 +407,16 @@ const TEST_DATA = [
         ],
       },
     ],
   },
 ];
 
 add_task(async function() {
   await addTab(URL_ROOT + "doc_multi_keyframes.html");
-
   const { inspector, panel } = await openAnimationInspector();
 
   for (const { properties, targetClass } of TEST_DATA) {
     info(`Checking keyframes graph for ${ targetClass }`);
     await selectNodeAndWaitForAnimations(`.${ targetClass }`, inspector);
 
     for (const property of properties) {
       const {

--- a/devtools/client/inspector/animation/test/browser_animation_keyframes-graph_computed-value-path_easing-hint.js
+++ b/devtools/client/inspector/animation/test/browser_animation_keyframes-graph_computed-value-path_easing-hint.js
@@ -186,17 +186,17 @@ const TEST_DATA = [
         ],
       },
     ],
   },
 ];
 
 add_task(async function() {
   await addTab(URL_ROOT + "doc_multi_easings.html");
-
+  await removeAnimatedElementsExcept(TEST_DATA.map(t => `.${ t.targetClass }`));
   const { inspector, panel } = await openAnimationInspector();
 
   for (const { properties, targetClass } of TEST_DATA) {
     info(`Checking keyframes graph for ${ targetClass }`);
     await selectNodeAndWaitForAnimations(`.${ targetClass }`, inspector);
 
     for (const { name, expectedHints } of properties) {
       const testTarget = `${ name } in ${ targetClass }`;

--- a/devtools/client/inspector/animation/test/browser_animation_keyframes-graph_keyframe-marker.js
+++ b/devtools/client/inspector/animation/test/browser_animation_keyframes-graph_keyframe-marker.js
@@ -130,17 +130,17 @@ const TEST_DATA = [
         ],
       },
     ],
   }
 ];
 
 add_task(async function() {
   await addTab(URL_ROOT + "doc_multi_keyframes.html");
-
+  await removeAnimatedElementsExcept(TEST_DATA.map(t => `.${ t.targetClass }`));
   const { inspector, panel } = await openAnimationInspector();
 
   for (const { properties, targetClass } of TEST_DATA) {
     info(`Checking keyframe marker for ${ targetClass }`);
     await selectNodeAndWaitForAnimations(`.${ targetClass }`, inspector);
 
     for (const { name, expectedValues } of properties) {
       const testTarget = `${ name } in ${ targetClass }`;

--- a/devtools/client/inspector/animation/test/browser_animation_keyframes-progress-bar.js
+++ b/devtools/client/inspector/animation/test/browser_animation_keyframes-progress-bar.js
@@ -51,16 +51,17 @@ const TEST_DATA = [
     targetClass: "fill-both-width-delay-iterationstart",
     scrubberPositions: [0, 0.33, 0.66, 0.833, 1],
     expectedPositions: [0.5, 0.5, 0.99, 0.25, 0.5],
   },
 ];
 
 add_task(async function() {
   await addTab(URL_ROOT + "doc_multi_timings.html");
+  await removeAnimatedElementsExcept(TEST_DATA.map(t => `.${ t.targetClass }`));
   const { animationInspector, inspector, panel } = await openAnimationInspector();
 
   info("Checking progress bar position in multi effect timings");
 
   for (const testdata of TEST_DATA) {
     const {
       targetClass,
       scrubberPositions,

--- a/devtools/client/inspector/animation/test/browser_animation_logic_auto-stop.js
+++ b/devtools/client/inspector/animation/test/browser_animation_logic_auto-stop.js
@@ -7,16 +7,17 @@
 // after end of animation duration except iterations infinity.
 // Test followings:
 // * state of animations and UI components after end of animation duration
 // * state of animations and UI components after end of animation duration
 //   but iteration count is infinity
 
 add_task(async function() {
   await addTab(URL_ROOT + "doc_simple_animation.html");
+  await removeAnimatedElementsExcept([".compositor-all", ".long"]);
   const { animationInspector, inspector, panel } = await openAnimationInspector();
 
   info("Checking state after end of animation duration");
   await selectNodeAndWaitForAnimations(".long", inspector);
   const pixelsData = getDurationAndRate(animationInspector, panel, 5);
   await clickOnCurrentTimeScrubberController(animationInspector,
                                              panel, 1 - pixelsData.rate);
   await clickOnPauseResumeButton(animationInspector, panel);

--- a/devtools/client/inspector/animation/test/browser_animation_logic_mutations.js
+++ b/devtools/client/inspector/animation/test/browser_animation_logic_mutations.js
@@ -5,16 +5,18 @@
 
 // Test for following mutations:
 // * add animation
 // * remove animation
 // * modify animation
 
 add_task(async function() {
   await addTab(URL_ROOT + "doc_simple_animation.html");
+  await removeAnimatedElementsExcept(
+    [".compositor-all", ".compositor-notall", ".no-compositor", ".still"]);
   const { animationInspector, inspector, panel } = await openAnimationInspector();
 
   info("Checking the mutation for add an animation");
   const originalAnimationCount = animationInspector.state.animations.length;
   await setClassAttribute(animationInspector, ".still", "ball no-compositor");
   is(animationInspector.state.animations.length, originalAnimationCount + 1,
     "Count of animation should be plus one to original count");
 

--- a/devtools/client/inspector/animation/test/browser_animation_summary-graph_animation-name.js
+++ b/devtools/client/inspector/animation/test/browser_animation_summary-graph_animation-name.js
@@ -26,17 +26,17 @@ const TEST_DATA = [
   },
   {
     targetClass: "easing-step",
   },
 ];
 
 add_task(async function() {
   await addTab(URL_ROOT + "doc_multi_timings.html");
-
+  await removeAnimatedElementsExcept(TEST_DATA.map(t => `.${ t.targetClass }`));
   const { panel } = await openAnimationInspector();
 
   for (const { targetClass, expectedLabel } of TEST_DATA) {
     const animationItemEl =
       findAnimationItemElementsByTargetClassName(panel, targetClass);
 
     info(`Checking animation name element existance for ${ targetClass }`);
     const animationNameEl = animationItemEl.querySelector(".animation-name");

--- a/devtools/client/inspector/animation/test/browser_animation_summary-graph_compositor.js
+++ b/devtools/client/inspector/animation/test/browser_animation_summary-graph_compositor.js
@@ -3,17 +3,18 @@
 
 "use strict";
 
 // Test that when animations displayed in the timeline are running on the
 // compositor, they get a special icon and information in the tooltip.
 
 add_task(async function() {
   await addTab(URL_ROOT + "doc_simple_animation.html");
-
+  await removeAnimatedElementsExcept(
+    [".compositor-all", ".compositor-notall", ".no-compositor"]);
   const { inspector, panel } = await openAnimationInspector();
 
   info("Select a test node we know has an animation running on the compositor");
   await selectNodeAndWaitForAnimations(".compositor-all", inspector);
 
   const summaryGraphEl = panel.querySelector(".animation-summary-graph");
   ok(summaryGraphEl.classList.contains("compositor"),
     "The element has the compositor css class");

--- a/devtools/client/inspector/animation/test/browser_animation_summary-graph_computed-timing-path.js
+++ b/devtools/client/inspector/animation/test/browser_animation_summary-graph_computed-timing-path.js
@@ -386,17 +386,16 @@ const TEST_DATA = [
         { x: 999999, y: 50 },
       ]
     ],
   },
 ];
 
 add_task(async function() {
   await addTab(URL_ROOT + "doc_multi_timings.html");
-
   const { panel } = await openAnimationInspector();
 
   for (const testData of TEST_DATA) {
     const {
       expectedDelayPath,
       expectedEndDelayPath,
       expectedForwardsPath,
       expectedIterationPathList,

--- a/devtools/client/inspector/animation/test/browser_animation_summary-graph_computed-timing-path_different-timescale.js
+++ b/devtools/client/inspector/animation/test/browser_animation_summary-graph_computed-timing-path_different-timescale.js
@@ -2,16 +2,17 @@
    http://creativecommons.org/publicdomain/zero/1.0/ */
 
 "use strict";
 
 // Test the Computed Timing Path component for different time scales.
 
 add_task(async function() {
   await addTab(URL_ROOT + "doc_simple_animation.html");
+  await removeAnimatedElementsExcept([".animated", ".end-delay"]);
   const { inspector, panel } = await openAnimationInspector();
 
   info("Checking the path for different time scale");
   await selectNodeAndWaitForAnimations(".animated", inspector);
   const pathStringA = panel.querySelector(".animation-iteration-path").getAttribute("d");
 
   info("Select animation which has different time scale from no-compositor");
   await selectNodeAndWaitForAnimations(".end-delay", inspector);

--- a/devtools/client/inspector/animation/test/browser_animation_summary-graph_delay-sign.js
+++ b/devtools/client/inspector/animation/test/browser_animation_summary-graph_delay-sign.js
@@ -46,17 +46,17 @@ const TEST_DATA = [
   },
   {
     targetClass: "keyframes-easing-step",
   },
 ];
 
 add_task(async function() {
   await addTab(URL_ROOT + "doc_multi_timings.html");
-
+  await removeAnimatedElementsExcept(TEST_DATA.map(t => `.${ t.targetClass }`));
   const { panel } = await openAnimationInspector();
 
   for (const { targetClass, expectedResult } of TEST_DATA) {
     const animationItemEl =
       findAnimationItemElementsByTargetClassName(panel, targetClass);
 
     info(`Checking delay sign existance for ${ targetClass }`);
     const delaySignEl = animationItemEl.querySelector(".animation-delay-sign");

--- a/devtools/client/inspector/animation/test/browser_animation_summary-graph_effect-timing-path.js
+++ b/devtools/client/inspector/animation/test/browser_animation_summary-graph_effect-timing-path.js
@@ -26,17 +26,17 @@ const TEST_DATA = [
   },
   {
     targetClass: "keyframes-easing-step",
   },
 ];
 
 add_task(async function() {
   await addTab(URL_ROOT + "doc_multi_timings.html");
-
+  await removeAnimatedElementsExcept(TEST_DATA.map(t => `.${ t.targetClass }`));
   const { panel } = await openAnimationInspector();
 
   for (const { targetClass, expectedPath } of TEST_DATA) {
     const animationItemEl =
       findAnimationItemElementsByTargetClassName(panel, targetClass);
 
     info(`Checking effect timing path existance for ${ targetClass }`);
     const effectTimingPathEl =

--- a/devtools/client/inspector/animation/test/browser_animation_summary-graph_end-delay-sign.js
+++ b/devtools/client/inspector/animation/test/browser_animation_summary-graph_end-delay-sign.js
@@ -32,23 +32,23 @@ const TEST_DATA = [
       left: "75%",
       width: "25%",
     },
   },
   {
     targetClass: "enddelay-with-iterations-infinity",
   },
   {
-    targetClass: "keyframes-easing-step",
+    targetClass: "delay-negative",
   },
 ];
 
 add_task(async function() {
   await addTab(URL_ROOT + "doc_multi_timings.html");
-
+  await removeAnimatedElementsExcept(TEST_DATA.map(t => `.${ t.targetClass }`));
   const { panel } = await openAnimationInspector();
 
   for (const { targetClass, expectedResult } of TEST_DATA) {
     const animationItemEl =
       findAnimationItemElementsByTargetClassName(panel, targetClass);
 
     info(`Checking endDelay sign existance for ${ targetClass }`);
     const endDelaySignEl = animationItemEl.querySelector(".animation-end-delay-sign");

--- a/devtools/client/inspector/animation/test/browser_animation_summary-graph_negative-delay-path.js
+++ b/devtools/client/inspector/animation/test/browser_animation_summary-graph_negative-delay-path.js
@@ -19,17 +19,17 @@ const TEST_DATA = [
       { x: 0, y: 50 },
       { x: 0, y: 0 },
     ],
   },
 ];
 
 add_task(async function() {
   await addTab(URL_ROOT + "doc_multi_timings.html");
-
+  await removeAnimatedElementsExcept(TEST_DATA.map(t => `.${ t.targetClass }`));
   const { panel } = await openAnimationInspector();
 
   for (const { targetClass, expectedPath } of TEST_DATA) {
     const animationItemEl =
       findAnimationItemElementsByTargetClassName(panel, targetClass);
 
     info(`Checking negative delay path existence for ${ targetClass }`);
     const negativeDelayPathEl =

--- a/devtools/client/inspector/animation/test/browser_animation_summary-graph_negative-end-delay-path.js
+++ b/devtools/client/inspector/animation/test/browser_animation_summary-graph_negative-end-delay-path.js
@@ -20,17 +20,17 @@ const TEST_DATA = [
       { x: 1000000, y: 100 },
       { x: 1000000, y: 0 },
     ],
   },
 ];
 
 add_task(async function() {
   await addTab(URL_ROOT + "doc_multi_timings.html");
-
+  await removeAnimatedElementsExcept(TEST_DATA.map(t => `.${ t.targetClass }`));
   const { panel } = await openAnimationInspector();
 
   for (const { targetClass, expectedPath } of TEST_DATA) {
     const animationItemEl =
       findAnimationItemElementsByTargetClassName(panel, targetClass);
 
     info(`Checking negative endDelay path existance for ${ targetClass }`);
     const negativeEndDelayPathEl =

--- a/devtools/client/inspector/animation/test/browser_animation_summary-graph_tooltip.js
+++ b/devtools/client/inspector/animation/test/browser_animation_summary-graph_tooltip.js
@@ -171,17 +171,17 @@ const TEST_DATA = [
       nameAndType: "Script Animation",
       duration: "1,000s",
     },
   },
 ];
 
 add_task(async function() {
   await addTab(URL_ROOT + "doc_multi_timings.html");
-
+  await removeAnimatedElementsExcept(TEST_DATA.map(t => `.${ t.targetClass }`));
   const { panel } = await openAnimationInspector();
 
   for (const { targetClass, expectedResult } of TEST_DATA) {
     const animationItemEl =
       findAnimationItemElementsByTargetClassName(panel, targetClass);
     const summaryGraphEl = animationItemEl.querySelector(".animation-summary-graph");
 
     info(`Checking tooltip for ${ targetClass }`);

new file mode 100644
--- /dev/null
+++ b/devtools/client/inspector/animation/test/doc_frame_script.js
@@ -0,0 +1,29 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+/* globals addMessageListener, sendAsyncMessage */
+
+"use strict";
+
+// A helper frame-script for animation inspector.
+
+addMessageListener("Test:RemoveAnimatedElementsExcept", function(msg) {
+  const { selectors } = msg.data;
+
+  for (const animation of content.document.getAnimations()) {
+    if (isRemovableElement(animation, selectors)) {
+      animation.effect.target.remove();
+    }
+  }
+
+  sendAsyncMessage("Test:RemoveAnimatedElementsExcept");
+});
+
+function isRemovableElement(animation, selectors) {
+  for (const selector of selectors) {
+    if (animation.effect.target.matches(selector)) {
+      return false;
+    }
+  }
+
+  return true;
+}

--- a/devtools/client/inspector/animation/test/head.js
+++ b/devtools/client/inspector/animation/test/head.js
@@ -80,16 +80,26 @@ addTab = async function(url) {
   const browser = tab.linkedBrowser;
   info("Loading the helper frame script " + FRAME_SCRIPT_URL);
   browser.messageManager.loadFrameScript(FRAME_SCRIPT_URL, false);
   loadFrameScriptUtils(browser);
   return tab;
 };
 
 /**
+ * Remove animated elements from document except given selectors.
+ *
+ * @param {Array} selectors
+ * @return {Promise}
+ */
+const removeAnimatedElementsExcept = async function(selectors) {
+  return executeInContent("Test:RemoveAnimatedElementsExcept", { selectors });
+};
+
+/**
  * Click on an animation in the timeline to select it.
  *
  * @param {AnimationInspector} animationInspector.
  * @param {AnimationsPanel} panel
  *        The panel instance.
  * @param {Number} index
  *        The index of the animation to click on.
  */