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?

Kategorien
Wochenbericht

Wochenbericht 2021.22

  1. a package for writing scripts in JavaScript instead of Bash
  2. Did you know you can make printer owners happy with only five lines of CSS?
  3. Random SVG avatar generator based on user names
  4. JWTs done right: Quebec’s proof of vaccination
  5. Software Developer Community Stack Overflow Sold to Tech Giant Prosus for $1.8 Billion
  6. Symfony 5.3.0 released (Symfony Blog)

Was zum Lachen: Loading Weekend

Kategorien
Wochenbericht

Wochenbericht 2021.20

1Nachdem letzte Woche der Post brückentagsbedingt ausgefallen ist, hier nun eine neue Woche, neues Glück.

  1. Introducing WebContainers: Run Node.js natively in your browser
  2. New in Symfony 5.3: Service Autowiring with Attributes
  3. Symfony – project tamed
  4. 🔥What you may not know about symfony components
  5. I finally released Codewell! A website where beginner developers can download high quality design templates to improve their HTML and CSS skills!

Was zum Lachen: New Library