Add full page screenshot generation

DeploySentinel · Nov 21, 2021 · e535c77 · e535c77
1 parent 171d824
commit e535c77
Show file tree

Hide file tree

Showing 8 changed files with 173 additions and 50 deletions.
diff --git a/README.md b/README.md
@@ -56,7 +56,7 @@ feel free to open an issue or PR for what you think is missing.
 | Copy Code to Clipboard         | ✅                      | ✅                | ❌                        | ✅                     |
 | data-testid Selector Support   | ✅                      | ✅                | ❌                        | ✅                     |
 | Text selector support          | ❌                      | ❌                | ❌                        | ✅                     |
-| Screenshot event generation    | ❌                      | ✅                | ❌                        | ❌                     |
+| Screenshot event generation    | ✅                      | ✅                | ❌                        | ❌                     |
 | Hover event generation         | ✅                      | ❌                | ❌                        | ❌                     |
 | Record from Chrome Stable      | ✅                      | ✅                | ❌                        | ❌                     |
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "deploysentinel-recorder",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "A Chrome Extension that generates Playwright and Puppeteer scripts automatically from your browser interactions.",
   "license": "Apache-2.0",
   "scripts": {

diff --git a/src/pages/Common/styles.css b/src/pages/Common/styles.css
@@ -137,6 +137,9 @@
 .mr-2 {
   margin-right: 0.5em;
 }
+.mr-4 {
+  margin-right: 1em;
+}
 .mb-2 {
   margin-bottom: 0.5em;
 }

diff --git a/src/pages/Content/ActionList.tsx b/src/pages/Content/ActionList.tsx
@@ -78,6 +78,10 @@ function ActionListItem({
             X:{action.deltaX}, Y:{action.deltaY}
           </span>
         </>
+      ) : action.type === 'fullScreenshot' ? (
+        <>
+          <span className="em-text">Take full page screenshot</span>
+        </>
       ) : (
         <></>
       )}
@@ -89,7 +93,7 @@ export default function ActionList({ actions }: { actions: Action[] }) {
   return (
     <>
       <style>{ActionListStyle}</style>
-      <div className="ActionList">
+      <div className="ActionList" data-testId="action-list">
         {actions
           .filter((action) =>
             [
@@ -100,6 +104,7 @@ export default function ActionList({ actions }: { actions: Action[] }) {
               'load',
               'resize',
               'wheel',
+              'fullScreenshot',
             ].includes(action.type)
           )
           .map((action, i) => (

diff --git a/src/pages/Content/CodeGen.tsx b/src/pages/Content/CodeGen.tsx
@@ -77,6 +77,10 @@ ${lines}
       deltaY
     )});`;
   }
+
+  fullScreenshot() {
+    return `await page.screenshot({ path: 'screenshot.png', fullPage: true });`;
+  }
 }
 
 class PuppeteerScriptBuilder {
@@ -159,6 +163,10 @@ ${lines}
   wheel(deltaX: number, deltaY: number) {
     return `await page.evaluate(() => window.scrollBy(${deltaX}, ${deltaY}));`;
   }
+
+  fullScreenshot() {
+    return `await page.screenshot({ path: 'screenshot.png', fullPage: true });`;
+  }
 }
 
 function describeAction(action: Action) {
@@ -192,6 +200,8 @@ function describeAction(action: Action) {
     ? `Resize window to ${action.width} x ${action.height}`
     : action.type === 'wheel'
     ? `Scroll wheel by X:${action.deltaX}, Y:${action.deltaY}`
+    : action.type === 'fullScreenshot'
+    ? `Take full page screenshot`
     : '';
 }
 
@@ -255,6 +265,8 @@ export function genCode(
       line += scriptBuilder.resize(action.width, action.height);
     } else if (action.type === 'wheel') {
       line += scriptBuilder.wheel(action.deltaX, action.deltaY);
+    } else if (action.type === 'fullScreenshot') {
+      line += scriptBuilder.fullScreenshot();
     } else {
       return null;
     }

diff --git a/src/pages/Content/ControlBar.tsx b/src/pages/Content/ControlBar.tsx
@@ -4,6 +4,7 @@ import { CopyToClipboard } from 'react-copy-to-clipboard';
 
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import {
+  faCamera,
   faCopy,
   faCheck,
   faCheckCircle,
@@ -26,12 +27,14 @@ const ActionButton = ({
   onClick,
   children,
   label,
+  testId,
 }: {
   onClick: () => void;
   children: JSX.Element;
   label: String;
+  testId?: String;
 }) => (
-  <div className="ActionButton" onClick={onClick}>
+  <div className="ActionButton" onClick={onClick} data-testId={testId}>
     <div>
       <div
         style={{
@@ -76,6 +79,8 @@ function RenderActionText({ action }: { action: Action }) {
         ? `Resize window to ${action.width} x ${action.height}`
         : action.type === 'wheel'
         ? `Scroll wheel by X:${action.deltaX}, Y:${action.deltaY}`
+        : action.type === 'fullScreenshot'
+        ? `Take full page screenshot`
         : ''}
     </>
   );
@@ -102,6 +107,7 @@ export default function ControlBar({ onExit }: { onExit: () => void }) {
     'actions' | 'playwright' | 'puppeteer'
   >('playwright');
   const [copyCodeConfirm, setCopyCodeConfirm] = useState<boolean>(false);
+  const [screenshotConfirm, setScreenshotConfirm] = useState<boolean>(false);
 
   const [isFinished, setIsFinished] = useState<boolean>(false);
 
@@ -208,7 +214,10 @@ export default function ControlBar({ onExit }: { onExit: () => void }) {
           <div className="p-4">
             <div className="d-flex justify-between mb-2">
               <div className="text-xl">
-                <span className="mr-2">Recording Finished!</span>🎉
+                <span className="mr-2" data-testId="recording-finished">
+                  Recording Finished!
+                </span>
+                🎉
               </div>
               <div className="text-button" onClick={() => onClose()}>
                 <FontAwesomeIcon icon={faTimes} size="sm" />
@@ -233,7 +242,11 @@ export default function ControlBar({ onExit }: { onExit: () => void }) {
           </div>
         ) : (
           <div className="d-flex items-center">
-            <ActionButton label="End Test" onClick={() => onEndRecording()}>
+            <ActionButton
+              label="End Test"
+              onClick={() => onEndRecording()}
+              testId="end-test"
+            >
               <FontAwesomeIcon icon={faCheckCircle} size="2x" />
             </ActionButton>
             <div className="w-100 p-4">
@@ -254,9 +267,12 @@ export default function ControlBar({ onExit }: { onExit: () => void }) {
                 </div>
                 <div
                   className="text-sm link-button"
+                  data-testid={
+                    showAllActions ? 'show-less-actions' : 'show-more-actions'
+                  }
                   onClick={() => setShowAllActions(!showAllActions)}
                 >
-                  {showAllActions ? 'Hide' : 'See'} Prior Steps{' '}
+                  {showAllActions ? 'Show Less' : 'Show More'}{' '}
                   <FontAwesomeIcon
                     icon={showAllActions ? faChevronUp : faChevronDown}
                   />
@@ -271,58 +287,78 @@ export default function ControlBar({ onExit }: { onExit: () => void }) {
               <div className="mb-4">
                 <span
                   className="text-sm link-button mr-2"
+                  data-testId={`show-${
+                    showActionsMode === 'actions' ? 'code' : 'actions'
+                  }`}
                   onClick={() => {
                     setShowActionsMode(
                       showActionsMode === 'actions' ? 'playwright' : 'actions'
                     );
                   }}
                 >
-                  Show{' '}
-                  {showActionsMode === 'actions' ? 'Generated Code' : 'Actions'}
+                  Show {showActionsMode === 'actions' ? 'Code' : 'Actions'}
+                </span>
+                <span
+                  className={`text-sm link-button mr-2 ${
+                    screenshotConfirm ? 'text-green' : ''
+                  }`}
+                  data-testid="record-screenshot"
+                  onClick={() => {
+                    recorderRef.current?.onFullScreenshot();
+                    setScreenshotConfirm(true);
+                    setTimeout(() => {
+                      setScreenshotConfirm(false);
+                    }, 2000);
+                  }}
+                >
+                  <FontAwesomeIcon
+                    icon={screenshotConfirm ? faCheck : faCamera}
+                    size="sm"
+                  />{' '}
+                  Record Screenshot
                 </span>
-                {(showActionsMode === 'playwright' ||
-                  showActionsMode === 'puppeteer') && (
-                  <span
-                    className="text-sm link-button mb-4"
-                    onClick={() => {
-                      setShowActionsMode(
-                        showActionsMode === 'playwright'
-                          ? 'puppeteer'
-                          : 'playwright'
-                      );
-                    }}
-                  >
-                    Switch to{' '}
-                    {showActionsMode === 'playwright'
-                      ? 'Puppeteer'
-                      : 'Playwright'}
-                  </span>
-                )}
               </div>
               <div>
                 {(showActionsMode === 'playwright' ||
                   showActionsMode === 'puppeteer') && (
-                  <CopyToClipboard
-                    text={genCode(actions, true, showActionsMode)}
-                    onCopy={() => {
-                      setCopyCodeConfirm(true);
-                      setTimeout(() => {
-                        setCopyCodeConfirm(false);
-                      }, 2000);
-                    }}
-                  >
+                  <>
                     <span
-                      className={`text-sm link-button ${
-                        copyCodeConfirm ? 'text-green' : ''
-                      }`}
+                      className="text-sm link-button mb-4 mr-4"
+                      onClick={() => {
+                        setShowActionsMode(
+                          showActionsMode === 'playwright'
+                            ? 'puppeteer'
+                            : 'playwright'
+                        );
+                      }}
                     >
-                      <FontAwesomeIcon
-                        icon={copyCodeConfirm ? faCheck : faCopy}
-                        size="sm"
-                      />{' '}
-                      Copy Code
+                      Switch to{' '}
+                      {showActionsMode === 'playwright'
+                        ? 'Puppeteer'
+                        : 'Playwright'}
                     </span>
-                  </CopyToClipboard>
+                    <CopyToClipboard
+                      text={genCode(actions, true, showActionsMode)}
+                      onCopy={() => {
+                        setCopyCodeConfirm(true);
+                        setTimeout(() => {
+                          setCopyCodeConfirm(false);
+                        }, 2000);
+                      }}
+                    >
+                      <span
+                        className={`text-sm link-button ${
+                          copyCodeConfirm ? 'text-green' : ''
+                        }`}
+                      >
+                        <FontAwesomeIcon
+                          icon={copyCodeConfirm ? faCheck : faCopy}
+                          size="sm"
+                        />{' '}
+                        Copy Code
+                      </span>
+                    </CopyToClipboard>
+                  </>
                 )}
               </div>
             </div>

diff --git a/src/pages/Content/recorder.ts b/src/pages/Content/recorder.ts
@@ -36,7 +36,8 @@ export type Action =
       source: string;
     }
   | ResizeAction
-  | { type: 'wheel'; deltaY: number; deltaX: number };
+  | { type: 'wheel'; deltaY: number; deltaX: number }
+  | { type: 'fullScreenshot' };
 
 function isEventFromOverlay(event: Event) {
   return (
@@ -308,6 +309,7 @@ class Recorder {
       timestamp: event.timeStamp,
     };
 
+    // @ts-ignore
     this.appendToRecording(action);
   };
 
@@ -319,7 +321,7 @@ class Recorder {
       lastResizeAction.width !== width ||
       lastResizeAction.height !== height
     ) {
-      const action = {
+      const action: Action = {
         type: 'resize',
         width,
         height,
@@ -341,6 +343,14 @@ class Recorder {
   };
 
   private debouncedOnResize = debounce(this.onResize, 300);
+
+  public onFullScreenshot = (): void => {
+    const action: Action = {
+      type: 'fullScreenshot',
+    };
+
+    this.appendToRecording(action);
+  };
 }
 
 export default Recorder;