Add e2e test Computed pane property traces

Bug: chromium:1106251
Change-Id: I759c8d7c7afdc77481424f836e60805a4c084832
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2329781
Reviewed-by: Alex Rudenko <alexrudenko@chromium.org>
Commit-Queue: Changhao Han <changhaohan@chromium.org>
Auto-Submit: Changhao Han <changhaohan@chromium.org>

test/e2e/elements/computed-pane-properties_test.ts

@@ -6,7 +6,7 @@ import {assert} from 'chai';
 import {describe, it} from 'mocha';
 
 import {getBrowserAndPages, goToResource} from '../../shared/helper.js';
-import {focusElementsTree, getAllPropertiesFromComputedPane, getContentOfComputedPane, navigateToSidePane, toggleShowAllComputedProperties, waitForComputedPaneChange, waitForElementsComputedSection} from '../helpers/elements-helpers.js';
+import {COMPUTED_PROPERTY_SELECTOR, focusElementsTree, getAllPropertiesFromComputedPane, getContentOfComputedPane, getTracesFromComputedStyle, navigateToSidePane, toggleShowAllComputedProperties, waitForComputedPaneChange, waitForElementsComputedSection} from '../helpers/elements-helpers.js';
 
 describe('The Computed pane', async () => {
   beforeEach(async function() {
@@ -73,4 +73,20 @@ describe('The Computed pane', async () => {
       value: 'normal',
     });
   });
+
+  it('can show traces when clicked on a property', async () => {
+    const {frontend} = getBrowserAndPages();
+
+    // Select the H1 element and wait for the computed pane to change.
+    const content = await getContentOfComputedPane();
+    await frontend.keyboard.press('ArrowDown');
+    await waitForComputedPaneChange(content);
+    await waitForElementsComputedSection();
+
+    const tracesText = await getTracesFromComputedStyle(COMPUTED_PROPERTY_SELECTOR);
+    assert.deepEqual(tracesText, [
+      '#f06body h1simple-styled-page.html:16',
+      '#f05h1simple-styled-page.html:9',
+    ]);
+  });
 });

test/e2e/elements/style-pane-properties_test.ts

@@ -39,7 +39,7 @@ describe('The Styles pane', async () => {
 
     const h1Rules = await getDisplayedStyleRules();
     // Checking the first h1 rule, that's the authored rule, right after the element style.
-    assert.deepEqual(h1Rules[1], {selectorText: 'h1', propertyNames: ['color']}, 'The correct rule is displayed');
+    assert.deepEqual(h1Rules[1], {selectorText: 'body h1', propertyNames: ['color']}, 'The correct rule is displayed');
 
     // Select the H2 element by pressing down.
     const onH2RuleAppeared = waitForStyleRule('h2');

test/e2e/helpers/elements-helpers.ts

@@ -11,9 +11,10 @@ const SELECTED_TREE_ELEMENT_SELECTOR = '.selected[role="treeitem"]';
 const CSS_PROPERTY_NAME_SELECTOR = '.webkit-css-property';
 const CSS_PROPERTY_SWATCH_SELECTOR = '.color-swatch-inner';
 const CSS_STYLE_RULE_SELECTOR = '[aria-label*="css selector"]';
-const COMPUTED_PROPERTY_SELECTOR = '.computed-style-property';
+export const COMPUTED_PROPERTY_SELECTOR = '.computed-style-property';
 const COMPUTED_STYLES_PANEL_SELECTOR = '[aria-label="Computed panel"]';
 const COMPUTED_STYLES_SHOW_ALL_SELECTOR = '[aria-label="Show all"]';
+const COMPUTED_STYLE_TRACES_SELECTOR = '.expanded .property-trace';
 const ELEMENTS_PANEL_SELECTOR = '.panel[aria-label="elements"]';
 const SECTION_SUBTITLE_SELECTOR = '.styles-section-subtitle';
 
@@ -116,6 +117,14 @@ export const getAllPropertiesFromComputedPane = async () => {
   });
 };
 
+export const getTracesFromComputedStyle = async (computedStyleSelector: string) => {
+  const computedStyleProperty = await $(computedStyleSelector);
+  await click(computedStyleProperty);
+  await waitFor(COMPUTED_STYLE_TRACES_SELECTOR);  // avoid flakiness
+  const propertyTraces = await $$(COMPUTED_STYLE_TRACES_SELECTOR);
+  return propertyTraces.evaluate((nodes: Element[]) => nodes.map(node => node.textContent));
+};
+
 export const expandSelectedNodeRecursively = async () => {
   const EXPAND_RECURSIVELY = '[aria-label="Expand recursively"]';
 

test/e2e/resources/elements/simple-styled-page.html

@@ -7,12 +7,15 @@
 <meta charset="utf-8">
 <style>
   h1 {
-    color: #f06;
+    color: #f05;
   }
   h2 {
     background-color: gold;
     color: black;
   }
+  body h1 {
+    color: #f06;
+  }
 </style>
 <h1>Hello Test Page!</h1>
 <h2>Inspect me.</h2>