fix(codegen): replace html lib with createElement (#5531)

We are not using html that much, since most of our UI moved to the Recorder App. Getting rid of `innerHTML` assignment fixes the TrustedTypes issue.
microsoft · Feb 22, 2021 · b42c369 · b42c369
1 parent eb9c8ce
commit b42c369
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 230 deletions.
diff --git a/src/server/supplements/injected/html.ts b/src/server/supplements/injected/html.ts
diff --git a/src/server/supplements/injected/recorder.ts b/src/server/supplements/injected/recorder.ts
@@ -17,7 +17,6 @@
 import type * as actions from '../recorder/recorderActions';
 import type InjectedScript from '../../injected/injectedScript';
 import { generateSelector, querySelector } from './selectorGenerator';
-import { html } from './html';
 import type { Point } from '../../../common/types';
 import type { UIState } from '../recorder/recorderTypes';
 
@@ -57,33 +56,30 @@ export class Recorder {
   constructor(injectedScript: InjectedScript, params: { isUnderTest: boolean }) {
     this._params = params;
     this._injectedScript = injectedScript;
-    this._outerGlassPaneElement = html`
-      <x-pw-glass style="
-        position: fixed;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        left: 0;
-        z-index: 2147483647;
-        pointer-events: none;
-        display: flex;
-      ">
-      </x-pw-glass>`;
-
-    this._tooltipElement = html`<x-pw-tooltip></x-pw-tooltip>`;
-    this._actionPointElement = html`<x-pw-action-point hidden=true></x-pw-action-point>`;
-
-    this._innerGlassPaneElement = html`
-      <x-pw-glass-inner style="flex: auto">
-        ${this._tooltipElement}
-      </x-pw-glass-inner>`;
+    this._outerGlassPaneElement = document.createElement('x-pw-glass');
+    this._outerGlassPaneElement.style.position = 'fixed';
+    this._outerGlassPaneElement.style.top = '0';
+    this._outerGlassPaneElement.style.right = '0';
+    this._outerGlassPaneElement.style.bottom = '0';
+    this._outerGlassPaneElement.style.left = '0';
+    this._outerGlassPaneElement.style.zIndex = '2147483647';
+    this._outerGlassPaneElement.style.pointerEvents = 'none';
+    this._outerGlassPaneElement.style.display = 'flex';
+
+    this._tooltipElement = document.createElement('x-pw-tooltip');
+    this._actionPointElement = document.createElement('x-pw-action-point');
+    this._actionPointElement.setAttribute('hidden', 'true');
+
+    this._innerGlassPaneElement = document.createElement('x-pw-glass-inner');
+    this._innerGlassPaneElement.style.flex = 'auto';
+    this._innerGlassPaneElement.appendChild(this._tooltipElement);
 
     // Use a closed shadow root to prevent selectors matching our internal previews.
     this._glassPaneShadow = this._outerGlassPaneElement.attachShadow({ mode: this._params.isUnderTest ? 'open' : 'closed' });
     this._glassPaneShadow.appendChild(this._innerGlassPaneElement);
     this._glassPaneShadow.appendChild(this._actionPointElement);
-    this._glassPaneShadow.appendChild(html`
-      <style>
+    const styleElement = document.createElement('style');
+    styleElement.textContent = `
         x-pw-tooltip {
           align-items: center;
           backdrop-filter: blur(5px);
@@ -120,8 +116,9 @@ export class Recorder {
         *[hidden] {
           display: none !important;
         }
-      </style>
-    `);
+    `;
+    this._glassPaneShadow.appendChild(styleElement);
+
     this._refreshListenersIfNeeded();
     setInterval(() => {
       this._refreshListenersIfNeeded();
@@ -394,15 +391,13 @@ export class Recorder {
   }
 
   private _createHighlightElement(): HTMLElement {
-    const highlightElement = html`
-      <x-pw-highlight style="
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 0;
-        height: 0;
-        box-sizing: border-box;">
-      </x-pw-highlight>`;
+    const highlightElement = document.createElement('x-pw-highlight');
+    highlightElement.style.position = 'absolute';
+    highlightElement.style.top = '0';
+    highlightElement.style.left = '0';
+    highlightElement.style.width = '0';
+    highlightElement.style.height = '0';
+    highlightElement.style.boxSizing = 'border-box';
     this._glassPaneShadow.appendChild(highlightElement);
     return highlightElement;
   }

diff --git a/test/cli/cli-codegen-1.spec.ts b/test/cli/cli-codegen-1.spec.ts
@@ -83,6 +83,43 @@ await page.ClickAsync("text=Submit");`);
     expect(message.text()).toBe('click');
   });
 
+  it('should work with TrustedTypes', async ({ page, recorder }) => {
+    await recorder.setContentAndWait(`
+      <head>
+        <meta http-equiv="Content-Security-Policy" content="trusted-types unsafe escape; require-trusted-types-for 'script'">
+    </head>
+    <body>
+      <button onclick="console.log('click')">Submit</button>
+    </body>`);
+
+    const selector = await recorder.hoverOverElement('button');
+    expect(selector).toBe('text=Submit');
+
+    const [message, sources] = await Promise.all([
+      page.waitForEvent('console'),
+      recorder.waitForOutput('<javascript>', 'click'),
+      page.dispatchEvent('button', 'click', { detail: 1 })
+    ]);
+
+    expect(sources.get('<javascript>').text).toContain(`
+  // Click text=Submit
+  await page.click('text=Submit');`);
+
+    expect(sources.get('<python>').text).toContain(`
+    # Click text=Submit
+    page.click("text=Submit")`);
+
+    expect(sources.get('<async python>').text).toContain(`
+    # Click text=Submit
+    await page.click("text=Submit")`);
+
+    expect(sources.get('<csharp>').text).toContain(`
+// Click text=Submit
+await page.ClickAsync("text=Submit");`);
+
+    expect(message.text()).toBe('click');
+  });
+
   it('should not target selector preview by text regexp', async ({ page, recorder }) => {
     await recorder.setContentAndWait(`<span>dummy</span>`);