包裹选择打破黄昏测试

时间:2018-11-21 03:24:39

标签: html laravel-dusk mdbootstrap

我正在使用黄昏进行浏览器测试。最近,我开始使用mdbootstrap,但这不是重点。关键是,mdb包装选择的方式使其无法像我通常那样进行测试。

我在刀片中做什么:

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

我的DOM的样子

<div class="select-wrapper mdb-select md-form">
  <span class="caret">▼</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>

尝试使用普通的select('@selector', 'value');会导致"Element is not currently visible and may not be manipulated"错误。
有什么想法可以立即测试我的选择吗?
当我只有一个选择时,我也许可以尝试手动单击那些ul和li标记,但是当我有多个选择时,便会出现问题。包装器ID不可预测,因此我无法对其进行硬编码。

1 个答案:

答案 0 :(得分:0)

由于Jonas Staudenmeir,我得以建立一个不错的解决方案。

我编写了一个函数,通过提供选择元素的类或ID以及要选择的项目的文本来选择select元素的一项。
我还编写了一个函数来测试是否选择了特定项目。
它可能看上去很快又脏又可以改善它,但是我现在很高兴。

选择功能:

    /**
     * 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;
        }
    }
}

确认所选功能:

   /**
     * 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;
}

最后一个功能的几句话:
要使用自己的黄昏断言,您需要创建自己的浏览器。我关注了this guide。 这里最重要的步骤:

  1. 创建一个扩展DuskBrowser的类Browser
  2. 在其中包括您的自定义断言函数。
  3. 覆盖protected函数newBrowser。 它唯一的工作就是返回一个新的DuskBrowser。

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