Laravel Dusk + Vue与ElementUI

问题描述

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

I need help writting test with Laravel Dusk. I'm using Vue with ElementUI. I really like this framework, however, I can't use Dusk's build-in select() method in my tests.

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

It's because the select component of ElementUI does not generate a real <select> tag, instead, it creates a normal <input> (that is readonly) and, at bottom of the page, the popper with select's options, so, there is not a <select> tag in my page, only a <div> and a readonly <input>.

如何使用Dusk编写测试，让我单击"div"?

How can I write a test with Dusk that lets me click on a 'div'??

如果我尝试使用类似以下内容的输入:

If I try to type on that input with something like this:

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

So I don't know how to test ElementUI's selects :(

请帮助

谢谢！

修改

发布由ElementUI生成的html:

Posting html generated by ElementUI:

    <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>

我用ElementUI的选择示例添加了一个简单的 JSFiddle .我只想与Laravel Dusk一起测试选择

I added a simple JSFiddle with ElementUI's select example. I simply want to test that select with Laravel Dusk

推荐答案

您必须单击.el-select元素，然后等待弹出器打开:

You have to click on the .el-select element and wait for the popper to open up:

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

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

Then you can select an option by index:

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

I don't see a way to select options by value, since the values aren't anywhere in the HTML.

这篇关于Laravel Dusk + Vue与ElementUI的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！