html - Wrapped selects breaking dusk tests

Question

I'm using dusk to do my browser testing. Recently I started to use mdbootstrap, but that's not the point. The point is that mdb is wrapping selects in a way which makes them untestable in the way I do it usually.

What I do in my blade:

<select class="mdb-select md-form" id="selectId" name="selectName">
  @foreach($elements as $element)
     <option value="{{ $element->id }}">{{ $element->display_name }}</option>
  @endforeach
</select>

How my DOM really looks like

<div class="select-wrapper mdb-select md-form">
  <span class="caret">▼&lt;/span>
  <input type="text" class="select-dropdown" readonly="true" data-activates="select-options-f8364f16-85fb-4f93-a212-a11ee81271f1" value="" data-cip-id="cIPJQ342845639">
  <ul id="select-options-f8364f16-85fb-4f93-a212-a11ee81271f1" class="dropdown-content select-dropdown w-100">
    <li class="active"><span class="filtrable">Some Text</span></li>
  </ul>
  <select class="mdb-select md-form initialized" id="selectId" name="selectName">
    <option value="1"></option>
  </select>
</div>

Trying to use the normal select('@selector', 'value'); results in an "Element is not currently visible and may not be manipulated" error.
Any ideas how I can test my selects now?
When I only have one select I could maybe try to click those ul and li tags manually but when I have multiple of them the truoble starts. The wrapper ids aren't predictable so I can't hardcode them.

Answer 1

Thanks to Jonas Staudenmeir, I was able to build a nice solution.

I wrote a function to select one item of a select element by providing the class or id of the element and the text of the item to select.
I also wrote a function to test if a specific item is selected.
It may look a bit quick and dirty and may be able to improve it but I'm happy for now.

select function:

    /**
     * Selects an mdBootstrap select
     * @param Browser $browser
     * @param $method string "id" or "class"
     * @param $selector string id or class of the searched select element
     * @param $text string text of the select item to select 
     */
    public function mdbSelectByNativeSelector(Browser $browser, $method, $selector, $text)
    {
        $text = trim($text);
        //Find the select element itself
        $selects = $browser->elements(".select-wrapper");
        $select = 0;

    foreach ($selects as $el)
    {
        if ($el->findElement(WebDriverBy::tagName("select"))->getAttribute($method) == $selector)
        {
            $select = $el;
        }
    }
    PHPUnit::assertTrue(is_a($select, RemoteWebElement::class), "Select with {$method} {$selector} not found!");
    $select->click();

    //Find the content of the select
    $select_content = $select->findElement(WebDriverBy::className("dropdown-content"));
    //Select the nthElement (li) of the select content.

    $liElements = $select_content->findElements(WebDriverBy::tagName("li"));
    foreach ($liElements as $el)
    {
        if ($el->getText() == $text)
        {
            $el->click();
            return;
        }
    }
}

assert selected function:

   /**
     * Tests if an mdbSelect is selected
     * @param $method string "id" or "name"
     * @param $selector string the id or name of the native select element
     * @param $text string the content of the selectable element (value not possible because it's flushed away)
     * @return DuskBrowser
     */
    public function assertMDBSelected($method, $selector, $text)
    {

        //Find the select element itself
        $selects = $this->elements(".select-wrapper");
        $select = 0;
        $success = false;

    foreach ($selects as $el)
    {
        if ($el->findElement(WebDriverBy::tagName("select"))->getAttribute($method) == $selector)
        {
            $select = $el;
        }
    }

    PHPUnit::assertTrue(is_a($el, RemoteWebElement::class), "Didn't find expected native select with {$method} {$selector}.");

    //Find the content of the select
    $select_content = $select->findElement(WebDriverBy::className("dropdown-content"));
    //Select the nthElement (li) of the select content.
    $liElements = $select_content->findElements(WebDriverBy::tagName("li"));
    foreach ($liElements as $el)
    {
        if (strpos($el->getAttribute("class"), "active") !== false)
        {
            //We need to ltrim because mdb inserts some problematic whitespaces in the text.
            if(ltrim($el->findElement(WebDriverBy::tagName("span"))->getAttribute("innerHTML")) == $text){
                $success = true;
                break;
            }
        }
    }
    PHPUnit::assertTrue($success, "Select is not selected!");
    return $this;
}

A few words to the last function:
To use own dusk assertions you need to create an own Browser. I followed this guide. The most important steps here:

1. Create a class DuskBrowser which extends Browser
2. Include your custom assert function there.

3. Override the protected function newBrowser. Its only job is to return a new DuskBrowser.

   protected function newBrowser($driver)
{
return new DuskBrowser($driver);
}