test: added required tests

DevExpress · felis2803 · Feb 10, 2023 · Jan 20, 2023 · Jan 20, 2023 · Jan 20, 2023
commit 31264da355b831e2928c0646da44c0e74d5a5d76
diff --git a/test/functional/fixtures/ui/pages/example.html b/test/functional/fixtures/ui/pages/example.html
@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<html><head>
+<meta http-equiv="content-type" content="text/html; charset=UTF-8">
+    <meta charset="utf-8">
+    <title>TestCafe Example Page</title>
+</head>
+<body>
+
+    <form id="main-form" action="#">
+<div class="main-content">
+    <header>
+        <h1>Example</h1>
+        <p>This webpage is used as a sample in TestCafe tutorials.</p>
+        <div id="shadow-host"></div>
+    </header>
+    <div class="row">
+<div class="column col-1">
+        <fieldset>
+            <legend>Your name:</legend>
+            <input id="developer-name" name="name" type="text" data-testid="name-input">
+            <input type="button" id="populate" data-testid="populate-button" value="Populate">
+        </fieldset>
+        <fieldset>
+            <legend>Which features are important to you:</legend>
+            <p><label for="remote-testing"><input type="checkbox" name="remote" id="remote-testing" data-testid="remote-testing-checkbox">Support for testing on remote devices</label></p>
+            <p><label for="reusing-js-code"><input type="checkbox" name="re-using" id="reusing-js-code" data-testid="reusing-js-code-checkbox">Re-using existing JavaScript code for testing</label></p>
+            <p><label for="background-parallel-testing"><input type="checkbox" name="background" id="background-parallel-testing" data-testid="parallel-testing-checkbox">Running tests in background and/or in parallel in multiple browsers</label></p>
+            <p><label for="continuous-integration-embedding"><input type="checkbox" name="CI" id="continuous-integration-embedding" data-testid="ci-checkbox">Easy embedding into a Continuous integration system</label></p>
+            <p><label for="traffic-markup-analysis"><input type="checkbox" name="analysis" id="traffic-markup-analysis" data-testid="analysis-checkbox">Advanced traffic and markup analysis</label></p>
+        </fieldset>
+</div>
+
+<div class="column col-2">
+        <fieldset>
+            <legend>What is your primary Operating System:</legend>
+            <p><label for="windows"><input type="radio" name="os" id="windows" value="Windows" data-testid="windows-radio">Windows</label></p>
+            <p><label for="macos"><input type="radio" name="os" id="macos" value="MacOS" data-testid="macos-radio">MacOS</label></p>
+            <p><label for="linux"><input type="radio" name="os" id="linux" value="Linux" data-testid="linux-radio">Linux</label></p>
+        </fieldset>
+
+        <fieldset>
+            <legend>Which TestCafe interface do you use:</legend>
+            <select id="preferred-interface" name="preferred-interface" data-testid="preferred-interface-select">
+                <option selected="selected">Command Line</option>
+                <option>JavaScript API</option>
+                <option>Both</option>
+            </select>
+        </fieldset>
+</div>
+</div>
+<div class="form-bottom">
+        <fieldset id="tried-section">
+            <label for="tried-test-cafe"><input type="checkbox" name="tried-test-cafe" id="tried-test-cafe" data-testid="tried-testcafe-checkbox">I have tried TestCafe</label>
+        </fieldset>
+
+        <fieldset>
+            <legend>How would you rate TestCafe on a scale from 1 to 10</legend>
+            <div class="slider-container">
+            <div id="slider" class="ui-slider ui-corner-all ui-slider-horizontal ui-widget ui-widget-content ui-slider-disabled ui-state-disabled"><span tabindex="0" class="ui-slider-handle ui-corner-all ui-state-default" style="left: 0%;"></span></div>
+            <div class="slider-values">
+                <div class="slider-value">1</div>
+                <div class="slider-value">2</div>
+                <div class="slider-value">3</div>
+                <div class="slider-value">4</div>
+                <div class="slider-value">5</div>
+                <div class="slider-value">6</div>
+                <div class="slider-value">7</div>
+                <div class="slider-value">8</div>
+                <div class="slider-value">9</div>
+                <div class="slider-value">10</div>
+            </div>
+            </div>
+        </fieldset>
+
+        <fieldset>
+            <legend>Please let us know what you think:</legend>
+            <textarea id="comments" name="comments" data-testid="comments-area" disabled="disabled"></textarea>
+        </fieldset>
+
+        <button type="submit" id="submit-button" data-testid="submit-button" disabled="disabled">Submit</button>
+</div>
+        </div>
+    </form>
+
+</body></html>
diff --git a/test/functional/fixtures/ui/selector-inspector-utils.js b/test/functional/fixtures/ui/selector-inspector-utils.js
@@ -0,0 +1,218 @@
+Object.assign(window, {
+    isVisible (element) {
+        return element.style.visibility !== 'hidden' && element.style.display !== 'none';
+    },
+
+    canBeShownInPicking (element) {
+        return [
+            'element-frame-hammerhead-shadow-ui',
+            'tooltip-hammerhead-shadow-ui',
+            'arrow-hammerhead-shadow-ui',
+        ].includes(element.className);
+    },
+
+    isElementsRectsEql (firstElement, secondElement) {
+        const firstRect  = firstElement.getBoundingClientRect();
+        const secondRect = secondElement.getBoundingClientRect();
+
+        for (const key in firstElement) {
+            if (firstRect[key] !== secondRect[key])
+                return false;
+        }
+
+        return true;
+    },
+
+    getSelectedValue () {
+        const { nativeMethods } = window['%hammerhead%'];
+
+        const activeElement = nativeMethods.documentActiveElementGetter.call(document);
+
+        return activeElement.value.substring(activeElement.selectionStart, activeElement.selectionend);
+    },
+
+    simulateEvent (element, eventName, options) {
+        const { eventSandbox } = window['%hammerhead%'];
+
+        eventSandbox.eventSimulator[eventName](element, options);
+    },
+
+    click (element) {
+        this.simulateEvent(element, 'click');
+    },
+
+    mousedown (element) {
+        this.simulateEvent(element, 'mousedown');
+    },
+
+    mousemove (element) {
+        const { x, y } = element.getBoundingClientRect();
+
+        this.simulateEvent(element, 'mousemove', { clientX: x + 1, clientY: y + 1 });
+    },
+
+    input (element, value) {
+        this.simulateEvent(element, 'input', value);
+    },
+
+    focus (element) {
+        this.simulateEvent(element, 'focus');
+    },
+
+    getShadowUIElements () {
+        return window['%hammerhead%'].shadowUI.root.firstChild.children;
+    },
+
+    pickElement (element) {
+        this.mousemove(element);
+        this.click(element);
+    },
+
+    getGeneratedSelectors () {
+        const { elementPicker } = window['%testCafeDriverInstance%'].selectorInspectorPanel;
+
+        return elementPicker.actualSelectors.map(selector => selector.value);
+    },
+
+    querySelector (cssSelector, element = document) {
+        const { nativeMethods } = window['%hammerhead%'];
+
+        return nativeMethods.querySelector.call(element, cssSelector);
+    },
+
+    querySelectorAll (cssSelector, element = document) {
+        const { nativeMethods } = window['%hammerhead%'];
+
+        return nativeMethods.querySelectorAll.call(element, cssSelector);
+    },
+
+    async retryExecute (fn, retryTimeout = 80) {
+        return new Promise(resolve => {
+            const intervalId = setInterval(() => fn(result => {
+                clearInterval(intervalId);
+                resolve(result);
+            }), retryTimeout);
+        });
+    },
+
+    async getElement (cssSelector) {
+        return this.retryExecute(resolve => {
+            const element = this.querySelector(cssSelector);
+
+            if (element)
+                resolve(element);
+        });
+    },
+
+    async getElements (cssSelector) {
+        return this.retryExecute(resolve => {
+            const elements = this.querySelectorAll(cssSelector);
+
+            if (elements && elements.length)
+                resolve(elements);
+        });
+    },
+
+    async resumeTest () {
+        const resumeButton = await this.getElement('.resume-hammerhead-shadow-ui');
+
+        this.mousedown(resumeButton);
+    },
+
+    async startPicking () {
+        const pickButton = await this.getElement('.pick-button-hammerhead-shadow-ui');
+
+        this.click(pickButton);
+    },
+
+    async getSelectorInput () {
+        return this.getElement('.selector-input-hammerhead-shadow-ui');
+    },
+
+    async getSelectorInputValue () {
+        return this.getSelectorInput().then(input => input.value);
+    },
+
+    async typeSelector (value) {
+        const selectorInput = await this.getSelectorInput();
+
+        selectorInput.value = value;
+
+        selectorInput.focus();
+    },
+
+    async getMatchIndicator () {
+        return this.getElement('.match-indicator-hammerhead-shadow-ui');
+    },
+
+    async getMatchIndicatorInnerText () {
+        return this.getMatchIndicator().then(indicator => indicator.innerText);
+    },
+
+    async expandSelectorsList () {
+        const expandButton = await this.getElement('.expand-selector-list-hammerhead-shadow-ui');
+
+        this.click(expandButton);
+    },
+
+    async getSelectorsList () {
+        return this.getElement('.selectors-list-hammerhead-shadow-ui');
+    },
+
+    async getSelectorsListValues () {
+        const selectorsList = await this.getSelectorsList();
+        const values        = [];
+
+        for (const selectorValueElement of selectorsList.children)
+            values.push(selectorValueElement.innerText);
+
+        return values;
+    },
+
+    async selectSelectorFromList (index) {
+        await this.expandSelectorsList();
+
+        const selectorsList        = await this.getSelectorsList();
+        const selectorValueElement = selectorsList.children[index];
+
+        this.click(selectorValueElement);
+    },
+
+    async getElementFrames () {
+        const RENDERING_DELAY = 200;
+        const CSS_SELECTOR    = '.element-frame-hammerhead-shadow-ui';
+
+        await this.getElement(CSS_SELECTOR);
+
+        await new Promise(resolve => setTimeout(resolve, RENDERING_DELAY));
+
+        return this.querySelectorAll(CSS_SELECTOR);
+    },
+
+    async mockOnceCopyCommand () {
+        const originExecCommand = document.execCommand;
+
+        return new Promise(resolve => {
+            document.execCommand = cmd => {
+                if (cmd !== 'copy')
+                    return originExecCommand.call(document, cmd);
+
+                document.execCommand = originExecCommand;
+
+                resolve(this.getSelectedValue());
+
+                return document.execCommand(cmd);
+            };
+        });
+    },
+
+    async copySelector () {
+        const copyButton = await this.getElement('input[value="Copy"]');
+
+        const promise = this.mockOnceCopyCommand();
+
+        this.click(copyButton);
+
+        return promise;
+    },
+});
diff --git a/test/functional/fixtures/ui/test.js b/test/functional/fixtures/ui/test.js
@@ -1,20 +1,67 @@
 const config = require('../../config');
 
-
 describe('TestCafe UI', () => {
-    it('Should display correct status', () => {
-        return runTests('./testcafe-fixtures/status-bar-test.js', 'Show status prefix', { assertionTimeout: 3000 });
-    });
+    describe('Status Bar', () => {
+        it('Should display correct status', () => {
+            return runTests('./testcafe-fixtures/status-bar-test.js', 'Show status prefix', { assertionTimeout: 3000 });
+        });
+
+        it('Hide elements when resizing the window', () => {
+            return runTests('./testcafe-fixtures/status-bar-test.js', 'Hide elements when resizing the window', { skip: ['android', 'ipad', 'iphone', 'edge', 'safari'] });
+        });
+
+        it('Should hide the status bar even if document was hidden during initialization (GH-7384)', function () {
+            // NOTE: the test needs direct access to the CDP client through the test controller
+            if (config.experimentalDebug)
+                this.skip();
 
-    it('Hide elements when resizing the window', () => {
-        return runTests('./testcafe-fixtures/status-bar-test.js', 'Hide elements when resizing the window', { skip: ['android', 'ipad', 'iphone', 'edge', 'safari'] });
+            return runTests('./testcafe-fixtures/status-bar-test.js', 'Hide status bar after mouse move', { only: ['chrome'] });
+        });
     });
 
-    it('Should hide the status bar even if document was hidden during initialization (GH-7384)', function () {
-        // NOTE: the test needs direct access to the CDP client through the test controller
-        if (config.experimentalDebug)
-            this.skip();
+    describe('Selector Inspector', () => {
+        function runTest (testName) {
+            return runTests('./testcafe-fixtures/selector-inspector-test.js', testName);
+        }
+
+        it('panel should be shown in debug mode', () => {
+            return runTest('Show panel');
+        });
+
+        it('should hide TestCafe elements while piking', () => {
+            return runTest('Hide TestCafe element while picking');
+        });
+
+        it('should generate valid selector', () => {
+            return runTest('Generate selector');
+        });
+
+        it('should fill the selectors list with the generated selectors', () => {
+            return runTest('Fill the selectors list');
+        });
+
+        it('should indicate the correct number of elements matching the selector', () => {
+            return runTest('Indicate matching');
+        });
+
+        it('should indicate if the selector is invalid on input', () => {
+            return runTest('Indicate invalid');
+        });
+
+        it('should indicate that no matches on input', () => {
+            return runTest('Indicate no matching');
+        });
+
+        it('should highlight matches elements on input', () => {
+            return runTest('Highlight elements');
+        });
+
+        it('should place a selector selected from the list in the input field', () => {
+            return runTest('Select selector');
+        });
 
-        return runTests('./testcafe-fixtures/status-bar-test.js', 'Hide status bar after mouse move', { only: ['chrome'] });
+        it('should copy selector', () => {
+            return runTest('Copy selector');
+        });
     });
 });