[FEATURE] Support setting CSS of DOM element by setCssOfElement

TYPO3-Documentation · Nov 6, 2021 · 58b000c · 58b000c
1 parent e91bbc0
commit 58b000c
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 0 deletions.
diff --git a/packages/screenshots/Classes/Configuration/Configuration.php b/packages/screenshots/Classes/Configuration/Configuration.php
@@ -248,6 +248,13 @@ public function createBasicConfig(): void
                             ['include' => '_default'],
                             ['action' => 'see', 'text' => 'Extension Builder'],
                             ['action' => 'click', 'link' => 'Extension Builder'],
+                            ['action' => 'click', 'link' => '.t3js-topbar-button-modulemenu'],
+                            ['action' => 'switchToContentFrame'],
+                            ['action' => 'selectOption', 'select' => '.t3-js-jumpMenuBox', 'option' => 'Domain Modelling'],
+                            ['action' => 'seeElement', 'selector' => '#alertPanelButton'],
+                            ['action' => 'click', 'link' => '#alertPanelButton'],
+                            ['action' => 'dragAndDrop', 'source' => '#moduleBar', 'target' => '#modelingLayer'],
+                            ['action' => 'setCssOfElement', 'selector' => '//text()[contains(.,"click to edit")]/ancestor::div[contains(@class, "WireIt-Container")][1]', 'css' => ['left' => '10px', 'top' => '100px']],
                             ['action' => 'makeScreenshotOfFullPage', 'fileName' => 'ExtensionBuilderFullPage'],
                         ]
                     ]

diff --git a/packages/screenshots/Classes/Runner/Codeception/Support/Helper/Typo3Navigation.php b/packages/screenshots/Classes/Runner/Codeception/Support/Helper/Typo3Navigation.php
@@ -451,6 +451,30 @@ public function _scrollFrameToBottom($frameSelector): void
         $this->getWebDriver()->executeJS("arguments[0].scrollTop = arguments[0].scrollHeight", [$frameElement]);
     }
 
+    /**
+     * Set specified CSS properties of a DOM element.
+     *
+     * Note: Use this action with caution, as it can interfere with the natural behavior of a website. This action was
+     * introduced to neatly position elements on a drawing pane, which are normally dragged and dropped by the user.
+     *
+     * ``` php
+     * <?php
+     * $I->setCssOfElement('#drag', ['left' => '10px', 'top' => '100px']);
+     * ?>
+     * ```
+     *
+     * @param string $selector
+     * @param array $css
+     * @return void
+     */
+    public function setCssOfElement(string $selector, array $css): void
+    {
+        $element = $this->getWebDriver()->_findElements($selector)[0];
+        foreach ($css as $propertyName => $value) {
+            $this->getWebDriver()->executeJS("arguments[0].style.$propertyName = \"$value\"", [$element]);
+        }
+    }
+
     /**
      * Navigate directly to a TYPO3 backend record form.
      *