Kategorien
Wochenbericht

Wochenbericht 2022.06

  1. ToolJet – Extensible open-source low-code framework. Connect to databases, cloud storages, GraphQL, API endpoints Airtable, etc and build apps using drag and drop editor. Alternative to PowerApps and Retool.
  2. Yes, I can connect to a DB in CSS
  3. German Court Rules Websites Embedding Google Fonts Violates GDPR
  4. Please make the nonsensical PHP hate stop.
  5. Safari Team Asks for Feedback Amid Accusations That ‘Safari Is the Worst, It’s the New IE’
  6. Use of Google Analytics declared illegal by French data protection authority

Was zum Lachen: Anticipate

Kategorien
Wochenbericht

Wochenbericht 2021.47

  1. Which SVG technique performs best for way too many icons?
  2. The Internet is Held Together With Spit & Baling Wire
  3. The New Life of PHP – The PHP Foundation
  4. Overengineering can kill your product
  5. PHP 8.1 Released

Was zum Lachen: Mixed Feelings

Kategorien
Wochenbericht

Wochenbericht 2021.42

  1. Redesigning the Symfony Docs Website
  2. How it feels to code an HTML email template in 2021
  3. Placeholder Images but useful
  4. Ubuntu 21.10 has landed
  5. vscode.dev Visual Studio Code for the Web

Was zum Lachen: Debate

Kategorien
Wochenbericht

Wochenbericht 2021.31

  1. Vue.js has been selected as Wikimedia Foundation’s future JavaScript framework
  2. Falsehoods Programmers Believe About Phone Numbers
  3. Ignorant managers cause bad code and developers can only compensate so much
  4. Apple’s Plan to “Think Different” About Encryption Opens a Backdoor to Your Private Life
  5. Webdriver und das Problem mit dem unsichtbaren Text.

Was zum Lachen: Outcome variables

Kategorien
Allgemein Webentwicklung Werkzeuge

Webdriver und das Problem mit dem unsichtbaren Text.

Neulich stand ich vor einem Problem, in dem ich mittels PHP-Webdriver versuchte, portentiell versteckten Inhalt aus einer Seite auszulesen.

Leider ist es so, dass das ganze nicht funktioniert, wenn der Inhalt versteckt ist. Dann wird zwar das Element gefunden, wenn man $element->getText() nutzt, wird aber null bzw ein leerer String ausgegeben. Das ist natürlich unschön und Webdriver selbst hat auch keine Möglichkeit, das DOM selbst zu verändern.

Aber natürlich gibt es einen Weg, dafür zu sorgen, dass man die Inhalte auslesen kann, immerhin muss das Element einfach nur sichtbar sein. Aber was, wenn das Element selbst nicht unsichtbar ist, sondern ein Eltern-Element das verursacht?

Hier die mögliche Lösung

PHP-Webdriver hat die Möglichkeit, einen Javascript-Codeblock an den Browser zu senden (analog zu browser.execute), der zweite Parameter von executeScript wird als arguments[] an die JS-Funktion übergeben. Damit bekommen wir das zu untersuchende Element.

In einer While-Schleife geht es dann (wenn ein Element nicht sichtbar ist) Element für Element nach oben. Dabei bekommt jedes einzelne Element ein display: block !important gesetzt.

Sobald ein überordnetes Element sichtbar ist, sind wir fertig. Eine while-Schleife stellt hier eine einfache Möglichkeit dar, den DOM-Tree rekursiv hochzuwandern.

Es besteht dabei auch die Möglichkeit, ein Element aus diesem Codeblock, der in eine Lambda-Funktion (auch “anonyme Funktion”) gepackt wird, zurückzugeben und das Element in PHP weiterzuverarbeiten. Allerdings müsste das Element dann zwischen den beiden Umgebungen ständig das Element für meine Schleifen hin- und hergereicht werden, das ist vermutlich weniger performant, als das einmal am Stück durchzugehen und das komplett in Javascript durchzuziehen, ohne vorher zurückzuspringen.

    /**
     * @param Client $client
     * @param RemoteWebElement $element
     * @throws \Exception
     */
    private function makeElementTreeVisible($client, $element): void
    {
        if (!$element->isDisplayed()) {
            $response = $client->executeScript('
                var element = arguments[0];

                function isVisible(elem){
                    return !!( elem.offsetWidth || elem.offsetHeight || elem.getClientRects().length )
                    && window.getComputedStyle(elem).visibility !== "hidden";
                }

                while (!isVisible(element) ) {
                    element.setAttribute("style", "display: block !important")
                    element = element.parentNode;
                }
            ', [$element]);
        }
    }

Vermutlich nicht die super-perfomanteste Weise, aber zumindest sollten damit alle Edge Cases abgebildet sein.

Andere Möglichkeiten wären noch: den Style für alle Elemente setzen oder versuchen alle CSS-Styles zu entfernen (hilft halt nicht gegen Inline-Styles).

Habt ihr dieses Problem schon einmal gehabt? Wie habt ihr das gelöst?