Behat tests broken in v1.4.0

[athanro]

This change (removed . Key::TAB) https://github.com/minkphp/MinkSelenium2Driver/commit/67c5b8a20274c53ec2f85fabda7005a6ac2dd1b9#diff-0369b4491b60042056986863691f6a7fL681 is breaking my tests.

$el = $this->getSession()->getPage()->find(css, '#product');
$el->click();

 element click intercepted: Element <input id="product" class="ant-input" placeholder="Product" type="text"> is not clickable at point (813, 212). Other element would receive the click: <label class="placeholder-label placeholder-label--select" for="product">...</label>
        (Session info: headless chrome=80.0.3987.116)

[stof]

Can you share a reproducing case ?

[athanro]

Can't share url, but can this html

<div class="ant-input-wrapper ant-input-affix-wrapper open-select arrow">
    <input id="product" class="ant-input" placeholder="Product" type="text" name="" autocomplete="off" readonly="">
    <label class="placeholder-label placeholder-label--select" for="product">Product</label>
    <div class="select-dropdown">
        <li class="select-list-item">
            <label class="ant-checkbox-wrapper">
                <span class="ant-checkbox">
                    <input name="search[product][0]" type="checkbox" value="New" class="ant-checkbox-input">
                    <span class="ant-checkbox-inner"></span>
                </span>
                <span class="select-one">New</span>
            </label>
        </li>
        <li class="select-list-item">
            <label class="ant-checkbox-wrapper"> 
                <span class="ant-checkbox">
                    <input name="search[product][1]" type="checkbox" value="Old" class="ant-checkbox-input">
                    <span class="ant-checkbox-inner"></span>
                </span>
                <span class="select-one">Old</span>
            </label>
        </li>
    </div>
</div>

It's select with checkboxes (https://ant.design/components/select/)

[oleg-andreyev]

From provided exception and HTML it seems that label is covering element, try adding z-index to input element

[athanro]

Adding z-index fixed this problem.

But another test is broken, this time relates to this commit https://github.com/minkphp/MinkSelenium2Driver/commit/d8adafd0ba04fcd5a3865400e2bd0500c683f981

I have input with autocomplete. (ant dropdown)

You click input, start typing and then you can choose localization. Problem is that input immediately looses focus after setValue(), div with autocomplete options won't appear and you can't choose localization. There is no behat error, just scenario fails.

$page = $this->getSession()->getPage();

$el = $page->find('css', 'input#localization');
$el->click();
$el->setValue($localization); /* Here focus is lost */

$page->waitFor(15, static function () use ($page) {
    $elements = $page->findAll('css', '.localization-option');
    return ($elements && $elements[0]->isVisible());
});

$el->keyPress(13);

<div id="select-localization" class="ant-select">
   <div class="ant-select-selection">
      <div class="ant-select-selection__rendered">
         <div class="ant-select-selection-selected-value" style="display: block; opacity: 1;">Fra</div>
         <div class="ant-select-search ant-select-search--inline" style="display: none;">
            <div><input id="localization" class="ant-select-search__field" value=""></div>
         </div>
      </div>
   </div>
   <div style="position: absolute; top: 0px; left: 0px; width: 100%;">
      <div>
         <div class="ant-select-dropdown" >
            <div style="overflow: auto;">
               <ul role="listbox" class="ant-select-dropdown-menu  ant-select-dropdown-menu-root ant-select-dropdown-menu-vertical" tabindex="0">
                  <li style="user-select: none;" class="ant-select-dropdown-menu-item localization-option ant-select-dropdown-menu-item-selected" unselectable="on" aria-selected="true">France</li>
                  <li style="user-select: none;" class="ant-select-dropdown-menu-item localization-option" unselectable="on" aria-selected="false">Frankfurt</li>
               </ul>
            </div>
         </div>
      </div>
   </div>
</div>

What fixes it is removing code added in this commit or adding long sleep(); after $element->postValue(array('value' => array($value))); so there is enough time to get localizations from db.

[oleg-andreyev]

What fixes it is removing code added in this commit or adding long sleep(); after $element->postValue(array('value' => array($value))); so there is enough time to get localizations from db.

If you have dynamically loaded element then you need to wait for it to load before trying, same behavior may have your customers.

[athanro]

Check this example https://ant.design/components/auto-complete/ When selenium finishes typing in input it looses focus, so it can't click in option in dynamic div because div won't appear.

[stof]

Well, setValue is about setting the value of a field, not about typing in a field while keeping focus (which was already not working in 1.3.0). The Mink expectation is that after you set the value of a field, the change event is triggered, and that won't happen if we only write in it without moving focus away.

There is an in-progress discussion about adding a separate API in Mink to be able to type in an element without moving focus away, to allow testing autocomplete elements, but that's not what setValue is about.