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.
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>
.
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);
It throws me an Exception:
Facebook\WebDriver\Exception\InvalidElementStateException: invalid element state: Element must be user-editable in order to clear it.
So I don't know how to test ElementUI's selects :(
Please help,
Thx!
Edit
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>
Edit 2:
I added a simple JSFiddle with ElementUI's select example. I simply want to test that select with Laravel Dusk
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();
Or by text:
$selector = "//li[@class='el-select-dropdown__item']/span[text()='Option3']";
$browser->driver->findElement(WebDriverBy::xpath($selector))->click();
I don't see a way to select options by value, since the values aren't anywhere in the HTML.
This works only if you only have one el-select on the page when you have multiple there is no way to identify them or add an identifier
@Lionslair is right: If you use more than one el-select
in your page, @JonasStaudenmeir's solution returns error.
To make it works, i use javascript execution. You can add this function in your custom Browser
or in your 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);
}
To run test :
$browser
->click('.el-select.first')
->elSelectDropdownClick(0);
$browser
->click('.el-select.second')
->elSelectDropdownClick(2);
来源:https://stackoverflow.com/questions/49514382/laravel-dusk-vue-with-elementui