Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Behat tests broken in v1.4.0 #318

Open
athanro opened this issue Mar 20, 2020 · 7 comments
Open

Behat tests broken in v1.4.0 #318

athanro opened this issue Mar 20, 2020 · 7 comments

Comments

@athanro
Copy link

athanro commented Mar 20, 2020

This change (removed . Key::TAB)
67c5b8a#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
Copy link
Member

stof commented Mar 20, 2020

Can you share a reproducing case ?

@athanro
Copy link
Author

athanro commented Mar 20, 2020

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>

Obraz 1

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

@oleg-andreyev
Copy link
Contributor

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

@athanro
Copy link
Author

athanro commented Mar 23, 2020

Adding z-index fixed this problem.

But another test is broken, this time relates to this commit
d8adafd

I have input with autocomplete. (ant dropdown)
Screenshot from 2020-03-23 10-27-47

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
Copy link
Contributor

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
Copy link
Author

athanro commented Mar 24, 2020

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
Copy link
Member

stof commented Mar 24, 2020

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants