Laravel Dusk + Vue 与 ElementUI

Question

我需要帮助编写 Laravel Dusk 测试。我将 Vue 与 ElementUI 一起使用.我真的很喜欢这个框架，但是，我不能使用 Dusk 的内置 select()我测试中的方法。

这是因为select ElementUI 的组件不会生成真正的 <select>标记，而是创建一个普通的 <input> (这是只读的)并且在页面底部，带有选择选项的弹出器，因此，没有 <select>我页面中的标签，只有一个 <div> 和一个只读的 <input> 。

我如何使用 Dusk 编写一个让我点击“div”的测试？

如果我尝试在该输入上输入类似这样的内容:

// $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 的选择 :(

请帮忙，

谢谢!

编辑

发布由 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 元素并等待弹出器打开:

$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 中的任何位置。