add: debug with selector option added

src/api/test-controller/index.js

@@ -57,6 +57,7 @@ import {
     AddRequestHooksCommand,
     RemoveRequestHooksCommand,
     ReportCommand,
+    DebugCommand,
 } from '../../test-run/commands/actions';
 
 import {
@@ -67,7 +68,7 @@ import {
     MaximizeWindowCommand,
 } from '../../test-run/commands/browser-manipulation';
 
-import { WaitCommand, DebugCommand } from '../../test-run/commands/observation';
+import { WaitCommand } from '../../test-run/commands/observation';
 import { createExecutionContext as createContext } from './execution-context';
 import { isSelector } from '../../client-functions/types';
 
@@ -602,8 +603,8 @@ export default class TestController {
         return new Assertion(actual, this, callsite);
     }
 
-    [delegatedAPI(DebugCommand.methodName)] () {
-        return this.enqueueCommand(DebugCommand);
+    [delegatedAPI(DebugCommand.methodName)] (selector) {
+        return this.enqueueCommand(DebugCommand, { selector });
     }
 
     [delegatedAPI(SetTestSpeedCommand.methodName)] (speed) {

src/client/driver/driver.js

@@ -1481,10 +1481,10 @@ export default class Driver extends serviceUtils.EventEmitter {
             });
     }
 
-    _onSetBreakpointCommand ({ isTestError }) {
+    _onSetBreakpointCommand ({ isTestError, selector }) {
         const showDebuggingStatusPromise = this.statusBar.showDebuggingStatus(isTestError);
 
-        this.selectorInspectorPanel.show();
+        this.selectorInspectorPanel.show(selector);
 
         showDebuggingStatusPromise.then(debug => {
             const stopAfterNextAction = debug === STATUS_BAR_DEBUG_ACTION.step;

src/client/ui/selector-inspector-panel/index.js

@@ -17,16 +17,18 @@ export default class SelectorInspectorPanel {
         this.element = createElementFromDescriptor(panel);
 
         const pickButton             = new PickButton();
-        const selectorInputContainer = new SelectorInputContainer();
-        const copyButton             = new CopyButton(selectorInputContainer);
-        const container              = new MainContainer(pickButton.element, selectorInputContainer.element, copyButton.element);
+
+        this.selectorInputContainer = new SelectorInputContainer();
+        const copyButton             = new CopyButton(this.selectorInputContainer);
+        const container              = new MainContainer(pickButton.element, this.selectorInputContainer.element, copyButton.element);
         const hideButton             = new HideButton(this.element);
 
         this.element.appendChild(container.element);
         this.element.appendChild(hideButton.element);
     }
 
-    show () {
+    show (selector) {
+        this.selectorInputContainer._debugSelector(selector);
         if (!this.element.parentElement)
             uiRoot.insertFirstChildToPanelsContainer(this.element);
 

src/client/ui/selector-inspector-panel/selector-input-container.js

@@ -3,7 +3,7 @@ import hammerhead from './../deps/hammerhead';
 import testCafeCore from './../deps/testcafe-core';
 
 import { createElementFromDescriptor } from './utils/create-element-from-descriptor';
-import { getElementsBySelector } from './utils/get-elements-by-selector';
+import { getElementsBySelector, executeSelector } from './utils/get-elements-by-selector';
 
 import * as descriptors from './descriptors';
 import { elementPicker, ELEMENT_PICKED } from './element-picker';
@@ -159,4 +159,16 @@ export class SelectorInputContainer {
         this._indicateMatches(elements);
         this._highlightElements(elements);
     }
+
+    async _debugSelector (selector) {
+        highlighter.stopHighlighting();
+        const selectorValue = selector.apiFnChain.join('');
+
+        this.value = selectorValue;
+        let elements = await executeSelector(selector).catch(() => null);
+
+        elements = nativeMethods.isArray(elements) ? elements : [elements];
+        this._indicateMatches(elements);
+        this._highlightElements(elements);
+    }
 }

src/client/ui/selector-inspector-panel/utils/get-elements-by-selector.js

@@ -20,7 +20,7 @@ async function parseSelector (selector) {
     return browser.parseSelector(communicationUrls.parseSelector, createNativeXHR, selector);
 }
 
-async function executeSelector (parsedSelector) {
+export async function executeSelector (parsedSelector) {
     const startTime        = nativeMethods.date();
     const selectorExecutor = new SelectorExecutor(parsedSelector, GLOBAL_TIMEOUT, startTime, createNotFoundError, createIsInvisibleError);
     const elements         = await selectorExecutor.getResult();

src/test-run/commands/actions.js

@@ -175,6 +175,24 @@ export class ClickCommand extends ActionCommandBase {
     }
 }
 
+export class DebugCommand extends ActionCommandBase {
+    static methodName = camelCase(TYPE.debug);
+
+    constructor (obj, testRun,) {
+        super(obj, testRun, TYPE.debug);
+    }
+
+    getAssignableProperties () {
+        return [
+            { name: 'selector', init: (name, val, options) => {
+                return initSelector(name, val, Object.assign({}, options,
+                    { skipVisibilityCheck: true, collectionMode: true }
+                ));
+            }, required: false },
+        ];
+    }
+}
+
 export class RightClickCommand extends ActionCommandBase {
     static methodName = camelCase(TYPE.rightClick);
 

src/test-run/commands/base.d.ts

@@ -4,6 +4,7 @@ export class CommandBase {
     public constructor(obj?: object, testRun?: TestRun, type?: string, validateProperties?: boolean);
     public actionId: string;
     public type: string;
+    public selector: object;
     [key: string]: unknown;
     public getAssignableProperties(): { name: string }[];
     public getAllAssignableProperties(): { name: string }[];

src/test-run/commands/service.js

@@ -16,9 +16,10 @@ export class HideAssertionRetriesStatusCommand {
 }
 
 export class SetBreakpointCommand {
-    constructor (isTestError) {
+    constructor (isTestError, selector) {
         this.type        = TYPE.setBreakpoint;
         this.isTestError = isTestError;
+        this.selector = selector;
     }
 }
 

src/test-run/index.ts

@@ -698,7 +698,7 @@ export default class TestRun extends AsyncEventEmitter {
         if (this.errs.length && this.debugOnFail) {
             const errStr = this.debugReporterPluginHost.formatError(this.errs[0]);
 
-            await this._enqueueSetBreakpointCommand(void 0, errStr);
+            await this._enqueueSetBreakpointCommand(void 0, null, errStr);
         }
 
         await this.emit('before-done');
@@ -821,11 +821,11 @@ export default class TestRun extends AsyncEventEmitter {
         return this.cookieProvider.deleteCookies(cookies, urls);
     }
 
-    private async _enqueueSetBreakpointCommand (callsite: CallsiteRecord | undefined, error?: string): Promise<void> {
+    private async _enqueueSetBreakpointCommand (callsite: CallsiteRecord | undefined, selector?: object | null, error?: string): Promise<void> {
         if (this.debugLogger)
             this.debugLogger.showBreakpoint(this.session.id, this.browserConnection.userAgent, callsite, error);
 
-        this.debugging = await this._internalExecuteCommand(new serviceCommands.SetBreakpointCommand(!!error), callsite) as boolean;
+        this.debugging = await this._internalExecuteCommand(new serviceCommands.SetBreakpointCommand(!!error, selector), callsite) as boolean;
     }
 
     private _removeAllNonServiceTasks (): void {
@@ -1154,7 +1154,7 @@ export default class TestRun extends AsyncEventEmitter {
             const canDebug = !this.browserConnection.isHeadlessBrowser();
 
             if (canDebug)
-                return await this._enqueueSetBreakpointCommand(callsite as CallsiteRecord, void 0);
+                return await this._enqueueSetBreakpointCommand(callsite as CallsiteRecord, command?.selector, void 0);
 
             this.debugging = false;