Skip to content

How to use Codeception with web components using shadow? #6824

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
mschop opened this issue Feb 3, 2025 · 1 comment
Open

How to use Codeception with web components using shadow? #6824

mschop opened this issue Feb 3, 2025 · 1 comment

Comments

@mschop
Copy link

mschop commented Feb 3, 2025

Hi,

we are using web components with shadow DOM. Is it possible to access the shadow DOM with built-in functions of Codeception?

How to reproduce?

  1. Add this component
class MyComponent extends WebComponent {
  constructor() {
        super()
        this.attachShadow({mode: 'open'})
    }

    connectedCallback() {
        this.shadowRoot.innerHTML = '<div id=test></div>'
    }
}

window.customElements.define('my-component', MyComponent)
  1. Adding the component to the DOM.
<my-component />
  1. Now try to access it from Codeception:
$I->waitForElementVisible('#test'); // not working

I didn't find a way to access the div in a shadow root.

The only way I would see is, to execute js with $I->executeJS(); but relying on this function for testing a complete application seems horrible to me.

Any ideas or tips?

Best Regards
mschop

@mschop
Copy link
Author

mschop commented Feb 4, 2025

Hi,

I found a way to make this work for me. It's really not ideal, but a good enough solution for now. I added a method which allows css-selectors with a ::shadow pseudo.
First I extended the web driver:

<?php

declare(strict_types=1);

namespace Tests\Support\Helper;

use Codeception\Module\WebDriver;
use Facebook\WebDriver\Remote\RemoteWebElement;
use Facebook\WebDriver\WebDriverBy;

class ShadowAwareWebDriver extends WebDriver
{
    public function findElement(string $selector): RemoteWebElement
    {
        $items = $this->findElements($selector);
        return $items[array_key_first($items)];
    }

    /**
     * @param string $selector
     * @return RemoteWebElement[]
     */
    public function findElements(string $selector): array
    {
        if (!str_contains($selector, '::shadow')) {
            return $this->_findElements($selector);
        }
        $selectors = array_map(
            fn(string $selector) => WebDriverBy::cssSelector(trim($selector)),
            explode('::shadow', $selector)
        );
        $firstSelector = array_shift($selectors);
        $topLevelRoots = $this->_findElements($firstSelector);

        $result = [];

        foreach ($topLevelRoots as $root) {
            foreach ($this->resolveShadowSelector($root, $selectors) as $element) {
                $result[] = $element;
            }
        }

        return $result;
    }

    /**
     * @param WebDriverBy[] $selectors
     * @return RemoteWebElement[]
     */
    protected function resolveShadowSelector(RemoteWebElement $root, array $selectors): array
    {
        if (empty($selectors)) {
            return [];
        }
        $selector = array_shift($selectors);

        $subs = $root->getShadowRoot()->findElements($selector);

        if (empty($selectors)) {
            return $subs;
        }

        $result = [];
        foreach($subs as $sub) {
            foreach ($this->resolveShadowSelector($sub, $selectors) as $fromSub) {
                $result[] = $fromSub;
            }
        }
        return $result;
    }
}

And I registered that one in the config:

suites:
    acceptance:
        actor: AcceptanceTester
        path: .
        modules:
            enabled:
                - \Tests\Support\Helper\ShadowAwareWebDriver:

In my tests I can now use that method:

$shadowDom = $this->findElement('parent-web-component::shadow child-web-component')->getShadowRoot();
$shadowDom->findElement(WebDriverBy::cssSelector('#my-selector'));

With this I am now able to access the shadow dom / shadow root.

One more thing: Is there any reason, why _findElements and _findElement methods are not exposed by default? They seem very useful to me.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy