feat: Selector Inspector

package.json

@@ -58,7 +58,9 @@
     "test-functional-local-headless-chrome-esm": "npm run build && npm run test-functional-local-headless-chrome-run-esm",
     "publish-please-only": "publish-please",
     "publish-please": "del-cli package-lock.json node_modules && npm i && publish-please",
-    "prepublishOnly": "publish-please guard"
+    "prepublishOnly": "publish-please guard",
+    "inspector-run": "node bin/testcafe.js chrome temp.js",
+    "inspector": "gulp fast-build && npm run inspector-run"
   },
   "dependencies": {
     "@babel/core": "^7.12.1",
@@ -151,6 +153,7 @@
     "testcafe-reporter-spec": "^2.1.1",
     "testcafe-reporter-xunit": "^2.2.1",
     "testcafe-safe-storage": "^1.1.1",
+    "testcafe-selector-generator": "git+https://github.com/devexpress/testcafe-selector-generator",
     "time-limit-promise": "^1.0.2",
     "tmp": "0.0.28",
     "tree-kill": "^1.2.2",

src/browser/connection/gateway.ts

@@ -15,6 +15,7 @@ import { IncomingMessage, ServerResponse } from 'http';
 import SERVICE_ROUTES from './service-routes';
 import EMPTY_PAGE_MARKUP from '../../proxyless/empty-page-markup';
 import PROXYLESS_ERROR_ROUTE from '../../proxyless/error-route';
+import { initSelector } from '../../test-run/commands/validations/initializers';
 
 export default class BrowserConnectionGateway {
     private _connections: Dictionary<BrowserConnection> = {};
@@ -72,6 +73,7 @@ export default class BrowserConnectionGateway {
         this._dispatch(`${SERVICE_ROUTES.closeWindow}/{id}`, proxy, BrowserConnectionGateway._onCloseWindowRequest, 'POST');
         this._dispatch(`${SERVICE_ROUTES.openFileProtocol}/{id}`, proxy, BrowserConnectionGateway._onOpenFileProtocolRequest, 'POST');
         this._dispatch(`${SERVICE_ROUTES.dispatchProxylessEvent}/{id}`, proxy, BrowserConnectionGateway._onDispatchProxylessEvent, 'POST', this.proxyless);
+        this._dispatch(`${SERVICE_ROUTES.parseSelector}/{id}`, proxy, BrowserConnectionGateway._parseSelector, 'POST');
 
         proxy.GET(SERVICE_ROUTES.connect, (req: IncomingMessage, res: ServerResponse) => this._connectNextRemoteBrowser(req, res));
         proxy.GET(SERVICE_ROUTES.connectWithTrailingSlash, (req: IncomingMessage, res: ServerResponse) => this._connectNextRemoteBrowser(req, res));
@@ -245,6 +247,30 @@ export default class BrowserConnectionGateway {
             respond500(res, 'There are no available _connections to establish.');
     }
 
+    private static _parseSelector (req: IncomingMessage, res: ServerResponse, connection: BrowserConnection): void {
+        if (BrowserConnectionGateway._ensureConnectionReady(res, connection)) {
+            BrowserConnectionGateway._fetchRequestData(req, data => {
+                try {
+                    const options = {
+                        testRun:             connection.getCurrentTestRun(),
+                        skipVisibilityCheck: true,
+                        collectionMode:      true,
+                    };
+
+                    const rawSelector    = JSON.parse(data).selector;
+                    const value          = rawSelector.trim().startsWith('Selector(') ? rawSelector : `'${rawSelector}'`;
+                    const selector       = { type: 'js-expr', value };
+                    const parsedSelector = initSelector('selector', selector, options);
+
+                    respondWithJSON(res, parsedSelector);
+                }
+                catch (error) {
+                    respondWithJSON(res);
+                }
+            });
+        }
+    }
+
     // API
     public startServingConnection (connection: BrowserConnection): void {
         this._connections[connection.id] = connection;

src/browser/connection/index.ts

@@ -120,6 +120,7 @@ export default class BrowserConnection extends EventEmitter {
     public openFileProtocolRelativeUrl = '';
     public openFileProtocolUrl = '';
     public dispatchProxylessEventRelativeUrl = '';
+    public parseSelectorUrl = '';
     private readonly debugLogger: debug.Debugger;
     private osInfo: OSInfo | null = null;
 
@@ -195,6 +196,7 @@ export default class BrowserConnection extends EventEmitter {
         this.closeWindowUrl                    = `${SERVICE_ROUTES.closeWindow}/${this.id}`;
         this.openFileProtocolRelativeUrl       = `${SERVICE_ROUTES.openFileProtocol}/${this.id}`;
         this.dispatchProxylessEventRelativeUrl = `${SERVICE_ROUTES.dispatchProxylessEvent}/${this.id}`;
+        this.parseSelectorUrl                  = `${SERVICE_ROUTES.parseSelector}/${this.id}`;
 
         this.idleUrl             = proxy.resolveRelativeServiceUrl(this.idleRelativeUrl);
         this.heartbeatUrl        = proxy.resolveRelativeServiceUrl(this.heartbeatRelativeUrl);

src/browser/connection/service-routes.ts

@@ -12,6 +12,7 @@ export default {
     serviceWorker:            '/service-worker.js',
     openFileProtocol:         '/browser/open-file-protocol',
     dispatchProxylessEvent:   '/browser/dispatch-proxyless-event',
+    parseSelector:            '/parse-selector',
 
     assets: {
         index:  '/browser/assets/index.js',

src/client/browser/index.js

@@ -213,3 +213,10 @@ export async function dispatchProxylessEvent (dispatchProxylessEventUrl, testCaf
 
     await testCafeUI.show();
 }
+
+export function parseSelector (parseSelectorUrl, createXHR, selector) {
+    return sendXHR(parseSelectorUrl, createXHR, {
+        method: 'POST',
+        data:   JSON.stringify({ selector }), //eslint-disable-line no-restricted-globals
+    });
+}

src/client/driver/driver.js

@@ -190,7 +190,8 @@ export default class Driver extends serviceUtils.EventEmitter {
         this.childWindowDriverLinks = [];
         this.parentWindowDriverLink = null;
 
-        this.statusBar = null;
+        this.statusBar              = null;
+        this.selectorInspectorPanel = null;
 
         this.windowId                         = this._getCurrentWindowId();
         this.role                             = DriverRole.replica;
@@ -1449,6 +1450,8 @@ export default class Driver extends serviceUtils.EventEmitter {
     _onSetBreakpointCommand ({ isTestError, inCompilerService }) {
         const showDebuggingStatusPromise = this.statusBar.showDebuggingStatus(isTestError);
 
+        this.selectorInspectorPanel.show();
+
         if (inCompilerService) {
             showDebuggingStatusPromise.then(debug => {
                 this.debug = debug;
@@ -1653,6 +1656,8 @@ export default class Driver extends serviceUtils.EventEmitter {
     _executeCommand (command) {
         this.contextStorage.setItem(this.WINDOW_COMMAND_API_CALL_FLAG, false);
 
+        this.selectorInspectorPanel.hide();
+
         if (this.customCommandHandlers[command.type])
             this._onCustomCommand(command);
 
@@ -1898,8 +1903,9 @@ export default class Driver extends serviceUtils.EventEmitter {
             proxyless,
         });
 
-        this.nativeDialogsTracker = new NativeDialogTracker(this.contextStorage, { proxyless, dialogHandler });
-        this.statusBar            = new testCafeUI.StatusBar(this.runInfo.userAgent, this.runInfo.fixtureName, this.runInfo.testName, this.contextStorage);
+        this.nativeDialogsTracker   = new NativeDialogTracker(this.contextStorage, { proxyless, dialogHandler });
+        this.statusBar              = new testCafeUI.StatusBar(this.runInfo.userAgent, this.runInfo.fixtureName, this.runInfo.testName, this.contextStorage);
+        this.selectorInspectorPanel = new testCafeUI.SelectorInspectorPanel(this.statusBar);
 
         const self = this;
 

src/client/test-run/index.js.mustache

@@ -29,6 +29,7 @@
     var browserActiveWindowIdUrl         = origin + {{{browserActiveWindowIdUrl}}};
     var browserCloseWindowUrl            = origin + {{{browserCloseWindowUrl}}};
     var browserDispatchProxylessEventUrl = origin + {{{browserDispatchProxylessEventRelativeUrl}}};
+    var browserParseSelectorUrl          = origin + {{{browserParseSelectorUrl}}};
     var skipJsErrors                     = {{{skipJsErrors}}};
     var dialogHandler                    = {{{dialogHandler}}};
     var userAgent                        = {{{userAgent}}};
@@ -47,6 +48,7 @@
             closeWindow:            browserCloseWindowUrl,
             openFileProtocolUrl:    browserOpenFileProtocolUrl,
             dispatchProxylessEvent: browserDispatchProxylessEventUrl,
+            parseSelectorUrl:       browserParseSelectorUrl,
         },
         {
             userAgent:      userAgent,

src/client/ui/index.js

@@ -10,6 +10,7 @@ import cursorUI from './cursor';
 import iframeCursorUI from './cursor/iframe-cursor';
 import screenshotMark from './screenshot-mark';
 import uiRoot from './ui-root';
+import SelectorInspectorPanel from './selector-inspector-panel';
 
 
 const Promise        = hammerhead.Promise;
@@ -45,6 +46,8 @@ exports.ProgressPanel   = ProgressPanel;
 exports.StatusBar       = StatusBar;
 exports.IframeStatusBar = IframeStatusBar;
 
+exports.SelectorInspectorPanel = SelectorInspectorPanel;
+
 
 exports.hide = function (hideTopRoot) {
     if (hideTopRoot)

src/client/ui/selector-inspector-panel/copy-button.js

@@ -0,0 +1,54 @@
+import hammerhead from './../deps/hammerhead';
+import testCafeCore from './../deps/testcafe-core';
+
+import { createElementFromDescriptor } from './utils/create-element-from-descriptor';
+import { setStyles } from './utils/set-styles';
+import { copy } from './utils/copy';
+
+import * as descriptors from './descriptors';
+
+const nativeMethods = hammerhead.nativeMethods;
+
+const eventUtils = testCafeCore.eventUtils;
+
+const ANIMATION_TIMEOUT = 1200;
+
+const VALUES = {
+    copy:   'Copy',
+    copied: 'Copied!',
+};
+
+export class CopyButton {
+    element;
+    sourceElement;
+
+    constructor (sourceElement) {
+        this.element       = createElementFromDescriptor(descriptors.copyButton);
+        this.sourceElement = sourceElement;
+
+        eventUtils.bind(this.element, 'click', () => this._copySelector());
+    }
+
+    _copySelector () {
+        // eslint-disable-next-line no-restricted-properties
+        copy(this.sourceElement.value);
+
+        this._animate();
+    }
+
+    _animate () {
+        this._changeAppearance(VALUES.copied, 'bold');
+
+        nativeMethods.setTimeout.call(window, () => this._resetAppearance(), ANIMATION_TIMEOUT);
+    }
+
+    _resetAppearance () {
+        this._changeAppearance(VALUES.copy, '');
+    }
+
+    _changeAppearance (value, fontWeight) {
+        nativeMethods.inputValueSetter.call(this.element, value);
+
+        setStyles(this.element, { fontWeight });
+    }
+}

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

@@ -0,0 +1,57 @@
+export const pickButton = {
+    tag:   'input',
+    type:  'button',
+    value: 'Pick',
+    class: 'pick-button',
+};
+
+export const selectorInput = {
+    tag:   'input',
+    type:  'text',
+    class: 'selector-input',
+};
+
+export const matchIndicator = {
+    class: 'match-indicator',
+    text:  'Not Found',
+};
+
+export const expandSelectorsList = {
+    class: 'expand-selector-list',
+};
+
+export const selectorInputContainer = {
+    class: 'selector-input-container',
+};
+
+export const copyButton = {
+    tag:   'input',
+    type:  'button',
+    value: 'Copy',
+};
+
+export const selectorsList = {
+    class: 'selectors-list',
+};
+
+export const panel = {
+    class: 'selector-inspector-panel',
+};
+
+export const elementFrame = {
+    class: 'element-frame',
+};
+
+export const tooltip = {
+    class: 'tooltip',
+};
+
+export const arrow = {
+    class: 'arrow',
+};
+
+export const auxiliaryCopyInput = {
+    tag:   'input',
+    type:  'text',
+    class: 'auxiliary',
+};

src/client/ui/selector-inspector-panel/element-picker.js

@@ -0,0 +1,95 @@
+import hammerhead from './../deps/hammerhead';
+import testCafeCore from './../deps/testcafe-core';
+
+import { getChildren } from './utils/ui-root';
+
+import { selectorGenerator } from './selector-generator';
+import { highlighter } from './highlighter';
+import { tooltip } from './tooltip';
+
+const listeners = hammerhead.eventSandbox.listeners;
+
+const styleUtils   = testCafeCore.styleUtils;
+const serviceUtils = testCafeCore.serviceUtils;
+
+export const ELEMENT_PICKED = 'element-piked';
+
+class ElementPicker extends serviceUtils.EventEmitter {
+    actualSelectors;
+    hiddenTestCafeElements = new Map();
+    handlers;
+
+    constructor () {
+        super();
+
+        this.handlers = {
+            onClick:     this._getClickHandler(),
+            onMouseMove: this._getMouseMoveHandler(),
+        };
+    }
+
+    _hideTestCafeElements () {
+        const children = getChildren();
+
+        for (const element of children) {
+            const visibilityValue = styleUtils.get(element, 'visibility');
+
+            this.hiddenTestCafeElements.set(element, visibilityValue);
+
+            styleUtils.set(element, 'visibility', 'hidden');
+        }
+    }
+
+    _showTestCafeElements () {
+        this.hiddenTestCafeElements.forEach((visibilityValue, element) => {
+            styleUtils.set(element, 'visibility', visibilityValue);
+        });
+
+        this.hiddenTestCafeElements.clear();
+    }
+
+    _getClickHandler () {
+        return () => {
+            this._showTestCafeElements();
+
+            listeners.removeInternalEventBeforeListener(window, ['mousemove'], this.handlers.onMouseMove);
+            listeners.removeInternalEventBeforeListener(window, ['click'], this.handlers.onClick);
+
+            this.emit(ELEMENT_PICKED, this.actualSelectors);
+
+            tooltip.hide();
+        };
+    }
+
+    _getMouseMoveHandler () {
+        return event => {
+            const x = event.clientX;
+            const y = event.clientY;
+
+            const target = document.elementFromPoint(x, y);
+
+            if (!target)
+                return;
+
+            this.actualSelectors = selectorGenerator.generate(target);
+
+            highlighter.stopHighlighting();
+            highlighter.highlight(target);
+
+            // eslint-disable-next-line no-restricted-properties
+            tooltip.show(this.actualSelectors[0].value, target);
+        };
+    }
+
+    start (startEvent) {
+        this._hideTestCafeElements();
+
+        listeners.initElementListening(window, ['mousemove', 'click']);
+        listeners.addFirstInternalEventBeforeListener(window, ['mousemove'], this.handlers.onMouseMove);
+        listeners.addFirstInternalEventBeforeListener(window, ['click'], this.handlers.onClick);
+
+        this.handlers.onMouseMove(startEvent);
+    }
+}
+
+export const elementPicker = new ElementPicker();