chore: put "auto expect" codegen feature under a checkbox (#37038)

Author: dgozman

packages/playwright-core/src/protocol/validator.ts

@@ -459,6 +459,7 @@ scheme.DebugControllerSetReportStateChangedResult = tOptional(tObject({}));
 scheme.DebugControllerSetRecorderModeParams = tObject({
   mode: tEnum(['inspecting', 'recording', 'none']),
   testIdAttributeName: tOptional(tString),
+  generateAutoExpect: tOptional(tBoolean),
 });
 scheme.DebugControllerSetRecorderModeResult = tOptional(tObject({}));
 scheme.DebugControllerHighlightParams = tObject({

packages/playwright-core/src/server/codegen/language.ts

@@ -22,16 +22,16 @@ import type * as actions from '@recorder/actions';
 export function generateCode(actions: actions.ActionInContext[], languageGenerator: LanguageGenerator, options: LanguageGeneratorOptions) {
   const header = languageGenerator.generateHeader(options);
   const footer = languageGenerator.generateFooter(options.saveStorage);
-  const actionTexts = actions.map(a => generateActionText(languageGenerator, a)).filter(Boolean) as string[];
+  const actionTexts = actions.map(a => generateActionText(languageGenerator, a, !!options.generateAutoExpect)).filter(Boolean) as string[];
   const text = [header, ...actionTexts, footer].join('\n');
   return { header, footer, actionTexts, text };
 }
 
-function generateActionText(generator: LanguageGenerator, action: actions.ActionInContext): string | undefined {
+function generateActionText(generator: LanguageGenerator, action: actions.ActionInContext, generateAutoExpect: boolean): string | undefined {
   let text = generator.generateAction(action);
   if (!text)
     return;
-  if (action.action.preconditionSelector) {
+  if (generateAutoExpect && action.action.preconditionSelector) {
     const expectAction: actions.ActionInContext = {
       frame: action.frame,
       startTime: action.startTime,
@@ -44,7 +44,7 @@ function generateActionText(generator: LanguageGenerator, action: actions.Action
     };
     const expectText = generator.generateAction(expectAction);
     if (expectText)
-      text = expectText + '\n' + text;
+      text = expectText + '\n\n' + text;
   }
   return text;
 }

packages/playwright-core/src/server/codegen/types.ts

@@ -25,6 +25,7 @@ export type LanguageGeneratorOptions = {
   contextOptions: BrowserContextOptions;
   deviceName?: string;
   saveStorage?: string;
+  generateAutoExpect?: boolean;
 };
 
 export interface LanguageGenerator {

packages/playwright-core/src/server/debugController.ts

@@ -45,6 +45,7 @@ export class DebugController extends SdkObject {
   private _trackHierarchyListener: InstrumentationListener | undefined;
   private _playwright: Playwright;
   _sdkLanguage: Language = 'javascript';
+  _generateAutoExpect = false;
 
   constructor(playwright: Playwright) {
     super({ attribution: { isInternalPlaywright: true }, instrumentation: createInstrumentation() } as any, undefined, 'DebugController');
@@ -73,8 +74,9 @@ export class DebugController extends SdkObject {
     }
   }
 
-  async setRecorderMode(progress: Progress, params: { mode: Mode, testIdAttributeName?: string }) {
+  async setRecorderMode(progress: Progress, params: { mode: Mode, testIdAttributeName?: string, generateAutoExpect?: boolean }) {
     await progress.race(this._closeBrowsersWithoutPages());
+    this._generateAutoExpect = !!params.generateAutoExpect;
 
     if (params.mode === 'none') {
       for (const recorder of await progress.race(this._allRecorders())) {
@@ -181,6 +183,7 @@ function wireListeners(recorder: Recorder, debugController: DebugController) {
       browserName: 'chromium',
       launchOptions: {},
       contextOptions: {},
+      generateAutoExpect: debugController._generateAutoExpect,
     });
     debugController.emit(DebugController.Events.SourceChanged, { text, header, footer, actions: actionTexts });
   };

packages/playwright-core/src/server/recorder/recorderApp.ts

@@ -138,6 +138,11 @@ export class RecorderApp {
       }
       return;
     }
+    if (data.event === 'setAutoExpect') {
+      this._languageGeneratorOptions.generateAutoExpect = data.params.autoExpect;
+      this._updateActions();
+      return;
+    }
     if (data.event === 'setMode') {
       this._recorder.setMode(data.params.mode);
       return;

packages/protocol/src/channels.d.ts

@@ -770,9 +770,11 @@ export type DebugControllerSetReportStateChangedResult = void;
 export type DebugControllerSetRecorderModeParams = {
   mode: 'inspecting' | 'recording' | 'none',
   testIdAttributeName?: string,
+  generateAutoExpect?: boolean,
 };
 export type DebugControllerSetRecorderModeOptions = {
   testIdAttributeName?: string,
+  generateAutoExpect?: boolean,
 };
 export type DebugControllerSetRecorderModeResult = void;
 export type DebugControllerHighlightParams = {

packages/protocol/src/protocol.yml

@@ -895,6 +895,7 @@ DebugController:
             - recording
             - none
         testIdAttributeName: string?
+        generateAutoExpect: boolean?
 
     highlight:
       internal: true

packages/recorder/src/recorder.css

@@ -57,3 +57,20 @@ body.dark-mode .recorder .toolbar-button.toggled.circle-large-filled {
 .recorder .selector-input {
   flex: auto;
 }
+
+.setting {
+  display: flex;
+  align-items: center;
+}
+
+.setting label {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  cursor: pointer;
+}
+
+.setting input {
+  margin-right: 5px;
+  flex-shrink: 0;
+}

packages/recorder/src/recorder.tsx

@@ -26,10 +26,11 @@ import * as React from 'react';
 import { CallLogView } from './callLog';
 import './recorder.css';
 import { asLocator } from '@isomorphic/locatorGenerators';
-import { toggleTheme } from '@web/theme';
+import { useDarkModeSetting } from '@web/theme';
 import { copy, useSetting } from '@web/uiUtils';
 import yaml from 'yaml';
 import { parseAriaSnapshot } from '@isomorphic/ariaSnapshot';
+import { Dialog } from '@web/components/dialog';
 
 export interface RecorderProps {
   sources: Source[],
@@ -48,8 +49,16 @@ export const Recorder: React.FC<RecorderProps> = ({
   const [selectedTab, setSelectedTab] = useSetting<string>('recorderPropertiesTab', 'log');
   const [ariaSnapshot, setAriaSnapshot] = React.useState<string | undefined>();
   const [ariaSnapshotErrors, setAriaSnapshotErrors] = React.useState<SourceHighlight[]>();
+  const [settingsOpen, setSettingsOpen] = React.useState(false);
+  const [darkMode, setDarkMode] = useDarkModeSetting();
+  const [autoExpect, setAutoExpect] = useSetting<boolean>('autoExpect', false);
+  const settingsButtonRef = React.useRef<HTMLButtonElement>(null);
   window.playwrightSelectSource = selectedSourceId => setSelectedFileId(selectedSourceId);
 
+  React.useEffect(() => {
+    window.dispatch({ event: 'setAutoExpect', params: { autoExpect } });
+  }, [autoExpect]);
+
   const source = React.useMemo(() => {
     const source = sources.find(s => s.id === selectedFileId);
     return source ?? emptySource();
@@ -178,7 +187,33 @@ export const Recorder: React.FC<RecorderProps> = ({
       <ToolbarButton icon='clear-all' title='Clear' disabled={!source || !source.text} onClick={() => {
         window.dispatch({ event: 'clear' });
       }}></ToolbarButton>
-      <ToolbarButton icon='color-mode' title='Toggle color mode' toggled={false} onClick={() => toggleTheme()}></ToolbarButton>
+      <ToolbarButton
+        ref={settingsButtonRef}
+        icon='settings-gear'
+        title='Settings'
+        onClick={() => setSettingsOpen(current => !current)}
+      />
+      <Dialog
+        style={{ padding: '4px 8px' }}
+        open={settingsOpen}
+        width={200}
+        verticalOffset={8}
+        requestClose={() => setSettingsOpen(false)}
+        anchor={settingsButtonRef}
+        dataTestId='settings-dialog'
+      >
+        <div key='dark-mode-setting' className='setting'>
+          <input type='checkbox' id='dark-mode-setting' checked={darkMode} onChange={() => setDarkMode(!darkMode)} />
+          <label htmlFor='dark-mode-setting'>Dark mode</label>
+        </div>
+        <div key='auto-expect-setting' className='setting' title='Automatically generate assertions while recording'>
+          <input type='checkbox' id='auto-expect-setting' checked={autoExpect} onChange={() => {
+            window.dispatch({ event: 'setAutoExpect', params: { autoExpect: !autoExpect } });
+            setAutoExpect(!autoExpect);
+          }} />
+          <label htmlFor='auto-expect-setting'>Generate assertions</label>
+        </div>
+      </Dialog>
     </Toolbar>
     <SplitView
       sidebarSize={200}

packages/trace-viewer/src/ui/settingsToolbarButton.tsx

@@ -15,7 +15,7 @@
 */
 
 import * as React from 'react';
-import { Dialog } from './shared/dialog';
+import { Dialog } from '@web/components/dialog';
 import { ToolbarButton } from '@web/components/toolbarButton';
 import { DefaultSettingsView } from './defaultSettingsView';