Add bar position option, experimental Cypress test browser support (#23)

* Add bar position option, experimental Cypress test browser support

* Fix tests

src/pages/Background/index.ts

@@ -36,15 +36,17 @@ async function onNavEvent(
   details: chrome.webNavigation.WebNavigationTransitionCallbackDetails
 ) {
   const { tabId, url, transitionType, transitionQualifiers, frameId } = details;
-  const { recording, recordingTabId, recordingState } = await localStorageGet([
-    'recording',
-    'recordingState',
-    'recordingTabId',
-  ]);
+  const { recording, recordingTabId, recordingFrameId, recordingState } =
+    await localStorageGet([
+      'recording',
+      'recordingState',
+      'recordingTabId',
+      'recordingFrameId',
+    ]);
 
   // Check if it's a parent frame, we're recording, and it's the right tabid
   if (
-    frameId !== 0 ||
+    frameId !== recordingFrameId ||
     recordingState !== 'active' ||
     recordingTabId !== tabId
   ) {
@@ -75,7 +77,7 @@ chrome.runtime.onMessage.addListener(async function (
       throw new Error('New tab id not defined');
     }
 
-    setStartRecordingStorage(tabId, newUrl, testEditorTabId);
+    setStartRecordingStorage(tabId, 0, newUrl, testEditorTabId);
   } else if (request.type === 'forward-recording') {
     // Focus the original deploysentinel webapp tab post-recording
     chrome.tabs.update(request.tabId, { active: true });
@@ -103,19 +105,22 @@ chrome.webNavigation.onCommitted.addListener(onNavEvent);
 chrome.webNavigation.onCompleted.addListener(async (details) => {
   const { tabId, frameId } = details;
 
-  if (frameId !== 0) {
-    return;
-  }
+  const { recordingTabId, recordingFrameId, recordingState } =
+    await localStorageGet([
+      'recordingTabId',
+      'recordingFrameId',
+      'recordingState',
+    ]);
 
-  const { recordingTabId, recordingState } = await localStorageGet([
-    'recordingTabId',
-    'recordingState',
-  ]);
-  if (tabId != recordingTabId || recordingState != 'active') {
+  if (
+    frameId !== recordingFrameId ||
+    tabId != recordingTabId ||
+    recordingState != 'active'
+  ) {
     return;
   }
 
-  executeScript(tabId, 'contentScript.bundle.js');
+  executeScript(tabId, recordingFrameId, 'contentScript.bundle.js');
 });
 
 chrome.contextMenus.removeAll();

src/pages/Common/ScriptTypeSelect.tsx

@@ -0,0 +1,41 @@
+import React, { useEffect, useState } from 'react';
+import { ScriptType } from '../types';
+
+export default function ScriptTypeSelect({
+  value,
+  onChange,
+  color,
+  fontSize,
+  shortDescription,
+}: {
+  value: ScriptType;
+  onChange: (val: ScriptType) => void;
+  color?: string;
+  fontSize?: number;
+  shortDescription?: boolean;
+}) {
+  return (
+    <select
+      className="link-button mr-4"
+      style={{
+        backgroundColor: '#080a0b',
+        color: color ?? 'white',
+        border: 'none',
+        outline: 'none',
+        fontSize,
+      }}
+      onChange={(e) => onChange(e.target.value as ScriptType)}
+      value={value}
+    >
+      <option value={ScriptType.Playwright}>
+        Playwright{!shortDescription ? ' Library' : ''}
+      </option>
+      <option value={ScriptType.Puppeteer}>
+        Puppeteer{!shortDescription ? ' Library' : ''}
+      </option>
+      <option value={ScriptType.Cypress}>
+        Cypress{!shortDescription ? ' Library' : ''}
+      </option>
+    </select>
+  );
+}

src/pages/Common/hooks.ts

@@ -0,0 +1,49 @@
+import React, { useEffect, useState } from 'react';
+
+import {
+  setPreferredLibraryStorage,
+  setPreferredBarPositionStorage,
+  localStorageGet,
+} from './utils';
+import { ScriptType, BarPosition } from '../types';
+
+export function usePreferredLibrary() {
+  const [preferredLibrary, setPreferredLibrary] = useState<ScriptType | null>(
+    null
+  );
+
+  useEffect(() => {
+    localStorageGet(['preferredLibrary']).then(
+      ({ preferredLibrary: storedPreferredLibrary }) => {
+        setPreferredLibrary(storedPreferredLibrary);
+      }
+    );
+  }, []);
+
+  const setPreferredLibraryWithStorage = (library: ScriptType) => {
+    setPreferredLibrary(library);
+    setPreferredLibraryStorage(library);
+  };
+
+  return [preferredLibrary, setPreferredLibraryWithStorage] as const;
+}
+
+export function usePreferredBarPosition(defaultPosition: BarPosition) {
+  const [preferredBarPosition, setPreferredBarPosition] =
+    useState<BarPosition | null>(defaultPosition);
+
+  useEffect(() => {
+    localStorageGet(['preferredBarPosition']).then(
+      ({ preferredBarPosition: storedPreferredBarPosition }) => {
+        setPreferredBarPosition(storedPreferredBarPosition ?? defaultPosition);
+      }
+    );
+  }, []);
+
+  const setPreferredBarPositionWithStorage = (barPosition: BarPosition) => {
+    setPreferredBarPosition(barPosition);
+    setPreferredBarPositionStorage(barPosition);
+  };
+
+  return [preferredBarPosition, setPreferredBarPositionWithStorage] as const;
+}

src/pages/Common/styles.css

@@ -91,6 +91,9 @@
 .justify-between {
   justify-content: space-between;
 }
+.justify-content-center {
+  justify-content: center;
+}
 .items-center {
   align-items: center;
 }

src/pages/Common/utils.ts

@@ -2,18 +2,29 @@ export function setEndRecordingStorage() {
   chrome.storage.local.set({
     recordingState: 'finished',
     recordingTabId: null,
+    recordingFrameId: null,
     returnTabId: null,
   });
 }
 
+export function setPreferredLibraryStorage(library: string) {
+  chrome.storage.local.set({ preferredLibrary: library });
+}
+
+export function setPreferredBarPositionStorage(position: string) {
+  chrome.storage.local.set({ preferredBarPosition: position });
+}
+
 export function setStartRecordingStorage(
   tabId: number,
+  frameId: number,
   newUrl: string,
   returnTabId?: number
 ) {
   const storage = {
     recordingState: 'active',
     recordingTabId: tabId,
+    recordingFrameId: frameId,
     recording: [
       {
         type: 'load',
@@ -72,20 +83,47 @@ export async function getCurrentTab(): Promise<chrome.tabs.Tab> {
   return tab;
 }
 
-export async function executeScript(tabId: number, file: string) {
+// Determins if the current tab is a Cypress test tab
+export function isCypressBrowser(tabId: number) {
+  if (typeof browser === 'object') {
+    return browser.tabs
+      .executeScript(tabId, {
+        code: `document.querySelector('script[src*="/__cypress"]') != null`,
+      })
+      .then((result) => (result?.[0] ?? false) as boolean);
+  } else {
+    return new Promise((resolve, reject) => {
+      chrome.scripting.executeScript(
+        {
+          target: { tabId },
+          func: () =>
+            document.querySelector('script[src*="/__cypress"]') != null,
+        },
+        (executedScript) => resolve(executedScript?.[0]?.result ?? false)
+      );
+    });
+  }
+}
+
+export async function executeScript(
+  tabId: number,
+  frameId: number,
+  file: string
+) {
   if (typeof browser === 'object') {
-    await browser.tabs.executeScript(tabId, { file });
+    await browser.tabs.executeScript(tabId, { file, frameId });
   } else {
     await chrome.scripting.executeScript({
-      target: { tabId },
+      target: { tabId, frameIds: [frameId] },
       files: [file],
     });
   }
 }
 
-export async function executeCleanUp(tabId: number) {
+export async function executeCleanUp(tabId: number, frameId: number) {
   if (typeof browser === 'object') {
     await browser.tabs.executeScript(tabId, {
+      frameId,
       code: `
         if (typeof window?.__DEPLOYSENTINEL_CLEAN_UP === 'function') {
           window.__DEPLOYSENTINEL_CLEAN_UP();
@@ -94,7 +132,7 @@ export async function executeCleanUp(tabId: number) {
     });
   } else {
     await chrome.scripting.executeScript({
-      target: { tabId },
+      target: { tabId, frameIds: [frameId] },
       func: () => {
         if (typeof window?.__DEPLOYSENTINEL_CLEAN_UP === 'function') {
           window.__DEPLOYSENTINEL_CLEAN_UP();