[e2e] Attempt to deflake style-pane-properties test

Two changes to make the handling more robust:

  1) We wait for the 'load' event on the iframe before we add the
     styles to the iframe.

  2) We repeatedly try to expand the DOM tree node until the iframe
     shows up on the DevTools side.

R=alexrudenko@chromium.org

No-Tree-Checks: True
Bug: None
Change-Id: I562483bc165910b5e9bf6fa51c658b9de8d4be3c
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/7865928
Commit-Queue: Simon Zünd <szuend@chromium.org>
Auto-Submit: Simon Zünd <szuend@chromium.org>
Commit-Queue: Alex Rudenko <alexrudenko@chromium.org>
Reviewed-by: Alex Rudenko <alexrudenko@chromium.org>

Author: szuend

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

@@ -8,6 +8,7 @@ import type * as puppeteer from 'puppeteer-core';
 import {expectError} from '../../conductor/events.js';
 import {
   editQueryRuleText,
+  elementWithPartialText,
   expandSelectedNodeRecursively,
   focusCSSPropertyValue,
   getComputedStylesForDomNode,
@@ -1279,23 +1280,30 @@ describe('The Styles pane', () => {
        await goToResourceAndWaitForStyleSection('elements/css-inject-stylesheet.html', devToolsPage, inspectedPage);
        await prepareElementsTab(devToolsPage);
 
-       await inspectedPage.evaluate(async () => {
+       await inspectedPage.evaluate(() => {
          const iframe = document.createElement('iframe');
-         iframe.src = 'css-inject-stylesheet-iframe-data.html';
          document.getElementById('main')?.appendChild(iframe);
-       });
 
-       await expandSelectedNodeRecursively(devToolsPage);
-       await inspectedPage.evaluate(async () => {
-         const iframe = document.querySelector('iframe');
-         if (!iframe?.contentDocument) {
-           return;
-         }
-         const style = iframe.contentDocument.createElement('style');
-         style.textContent = '#iframeBody { background: red }';
-         iframe.contentDocument.head.append(style);
+         const {promise, resolve} = Promise.withResolvers<void>();
+         iframe.addEventListener('load', () => {
+           if (!iframe.contentDocument) {
+             return;
+           }
+           const style = iframe.contentDocument.createElement('style');
+           style.textContent = '#iframeBody { background: red }';
+           iframe.contentDocument.head.append(style);
+
+           resolve();
+         });
+
+         iframe.src = 'css-inject-stylesheet-iframe-data.html';
+         return promise;
        });
 
+       await devToolsPage.waitForFunction(async () => {
+         await expandSelectedNodeRecursively(devToolsPage);
+         return await elementWithPartialText('id=\u200B"iframeBody"', devToolsPage);
+       });
        await waitForAndClickTreeElementWithPartialText('id=\u200B"iframeBody"', devToolsPage);
        await waitForStyleRule('#iframeBody', devToolsPage);
        const inspectedRulesAfter = await getDisplayedStyleRulesCompact(devToolsPage);