Question

我需要帮助写Laravel Dusk的测试。我将Vue与ElementUI一起使用。我非常喜欢这个框架，但是，在我的测试中，我无法使用Dusk的内置select()方法。

这是因为ElementUI的select组件不会生成真正的<select>标记，而是创建一个普通的<input>（只读），并在底部该页面，popper有select选项，因此，我的页面中没有<select>标记，只有 <div> 和只读 <input> 即可。

我怎样才能用Dusk写一个测试，让我点击一个＆＃39; div＆＃39;

如果我尝试使用以下内容输入该输入：

// $browser->select('my_select_id'); not working,
$browser->type('my_select_id', 1);

它给我一个例外：

Facebook\WebDriver\Exception\InvalidElementStateException: invalid element state: Element must be user-editable in order to clear it.

所以我不知道如何测试ElementUI的选择：（

请帮忙，

THX！

修改

发布由ElementUI生成的HTML：

    <div class="el-select w-100 el-select--mini" value="0" title="Cliente" dusk="v-select-component">
        <div class="el-input el-input--mini el-input--suffix">
            <input autocomplete="off" placeholder="Cliente" size="mini" name="client_id" id="client_id" readonly="readonly" type="text" rows="2" class="el-input__inner">
            <span class="el-input__suffix">
                <span class="el-input__suffix-inner">
                    <i class="el-select__caret el-input__icon el-icon-arrow-up"></i>
                </span>
            </span>
        </div>
        <div class="el-select-dropdown el-popper" style="display: none; min-width: 512.344px;">
            <div class="el-scrollbar" style="">
                <div class="el-select-dropdown__wrap el-scrollbar__wrap" style="margin-bottom: -17px; margin-right: -17px;">
                    <ul class="el-scrollbar__view el-select-dropdown__list" style="position: relative;">
                        <li class="el-select-dropdown__item selected"><span>Item 1</span></li>
                        <li class="el-select-dropdown__item"><span>Item 2</span></li>
                    </ul>
                </div>
                <div class="el-scrollbar__bar is-horizontal">
                    <div class="el-scrollbar__thumb" style="transform: translateX(0%);"></div>
                </div>
                <div class="el-scrollbar__bar is-vertical">
                    <div class="el-scrollbar__thumb" style="transform: translateY(0%);"></div>
                </div>
            </div>
        </div>
    </div>

编辑2：

我添加了一个简单的JSFiddle和ElementUI的选择示例。我只是想用Laravel Dusk测试那个选择

Answer 1

您必须单击.el-select元素并等待popper打开：

$browser->click('.el-select');
$browser->waitFor('.el-select-dropdown.el-popper');

然后您可以按索引选择一个选项：

$browser->elements('.el-select-dropdown__item')[2]->click();

或通过文字：

$selector = "//li[@class='el-select-dropdown__item']/span[text()='Option3']";
$browser->driver->findElement(WebDriverBy::xpath($selector))->click();

我没有看到按价值选择选项的方法，因为HTML中没有任何值。

Answer 2

仅当您在页面上只有一个el-select却又没有多个选择时，此方法才有效

Answer 3

@Lionslair是正确的：如果您在页面中使用多个el-select，则@JonasStaudenmeir的解决方案将返回错误。

要使其工作，我使用javascript执行。您可以在自定义Browser或Component中添加此功能：

public function elSelectDropdownClose(Browser $browser)
{
    $browser->script(
<<<EOT
    Array.prototype.slice.call(document.querySelectorAll('.el-select-dropdown.el-popper:not([style*=\"display: none\"])')).map(function(el){
        el.style.display = 'none'
    })
EOT
    );
}
public function elSelectDropdownClick(Browser $browser, $index)
{
    $browser->script(
<<<EOT
    document.querySelectorAll('.el-select-dropdown.el-popper:not([style*=\"display: none\"]) .el-select-dropdown__item')[$index].click()
EOT
    );
    $this->elSelectDropdownClose($browser);
}

运行测试：

$browser
    ->click('.el-select.first')
    ->elSelectDropdownClick(0);

$browser
    ->click('.el-select.second')
    ->elSelectDropdownClick(2);

Laravel Dusk + Vue与ElementUI

3 个答案: