Actions buttons regression

Created on 18 November 2024, 6 months ago

Problem/Motivation

After update to the last version 8.x-3.0-rc14 some of our behat tests failed with the following error when tries to save the node:

Failed step: And I press the "Save" button
        Behat\Mink\Driver\BrowserKitDriver supports clicking on links and submit or reset buttons only. But "label" provided (Behat\Mink\Exception\UnsupportedDriverActionException)

Reviewing the HTML, the save button is transformed into labels.

Actions HTML:

<div class="gin-sticky-form-actions js-form-wrapper form-wrapper" data-drupal-selector="edit-gin-sticky-actions" id="edit-gin-sticky-actions">

<!-- THEME DEBUG -->
<!-- THEME HOOK: 'container' -->
<!-- BEGIN OUTPUT from 'core/modules/system/templates/container.html.twig' -->
<div data-drupal-selector="edit-status" id="edit-status--2" class="js-form-wrapper form-wrapper"></div>

<!-- END OUTPUT from 'core/modules/system/templates/container.html.twig' -->

<label data-drupal-selector="edit-submit" for="edit-submit" role="button" class="button button--primary" tabindex="0" data-gin-sticky-form-selector="edit-submit">Save</label>
<label data-drupal-selector="edit-preview" for="edit-preview" role="button" class="button" tabindex="0" data-gin-sticky-form-selector="edit-preview">Preview</label>


<!-- THEME DEBUG -->
<!-- THEME HOOK: 'container' -->
<!-- BEGIN OUTPUT from 'core/modules/system/templates/container.html.twig' -->
<div class="gin-more-actions js-form-wrapper form-wrapper" data-drupal-selector="edit-more-actions" id="edit-more-actions"><a href="#toggle-more-actions" class="gin-more-actions__trigger trigger" data-gin-tooltip="" role="button" title="" aria-controls="gin_more_actions" data-once="ginTooltipInit ginMoreActionsToggle"><span class="visually-hidden">More actions</span></a><div class="gin-tooltip " style="inset-inline-start: 16px; inset-block-start: 6px;">
      More actions
    </div>

<!-- THEME DEBUG -->
<!-- THEME HOOK: 'container' -->
<!-- BEGIN OUTPUT from 'core/modules/system/templates/container.html.twig' -->
<div data-drupal-selector="edit-more-actions-items" class="gin-more-actions__menu js-form-wrapper form-wrapper" id="edit-more-actions-items"></div>

<!-- END OUTPUT from 'core/modules/system/templates/container.html.twig' -->

</div>

<!-- END OUTPUT from 'core/modules/system/templates/container.html.twig' -->

<a href="#toggle-sidebar" class="meta-sidebar__trigger trigger" data-gin-tooltip="" role="button" title="Show sidebar panel" aria-controls="gin_sidebar" data-once="ginTooltipInit ginSidebarToggle" aria-expanded="false"><span class="visually-hidden">Show sidebar panel</span></a><div class="gin-tooltip " style="inset-inline-start: 2552.6px; inset-block-start: 52.6625px;">Show sidebar panel</div></div>

🐛 Bug report
Status

Active

Component

Code

Created by

🇪🇸Spain eduardo morales alberti Spain, 🇪🇺

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • 🇨🇭Switzerland yobottehg Basel

    In addition to the regressions above in rc-14 the "preview" button is always displayed on the create page even if the preview is disabled for that entity type.

  • 🇧🇪Belgium dtfabio Ninove

    Hi yobottehg,

    After updating gin to rc-14 on Drupal version 10.2.8, I also had the problem that the preview buttons were shown even if they were disabled, MR 531 from the following ticket solved this problem for me:

    Cannot opt out buttons using #gin_action_item = TRUE 🐛 Cannot opt out buttons using #gin_action_item = TRUE Active

    Hope this will fix it for you as well.

    Greetings,

    Fabio

  • 🇩🇪Germany jurgenhaas Gottmadingen

    The preview button issue is out of scope of this issue. But as @dtfabio already mentioned, that's fixed. His linked issue 🐛 Cannot opt out buttons using #gin_action_item = TRUE Active has been merged into 3.x-dev and there is also work going on in 📌 Improve sticky actions implementation Active which I recommend applying for further testing.

    When it comes to the original topic of this issue, this is not necessarily a regression. It's a change in the markup of the action buttons that automatic testing needs to adjust to. We've had such changes in Cypress changes as well.

    For the background:

    The buttons are still present, but hidden in the form. What the user sees instead are the labels in the sticky top bar. However, the automatic tests in Behat, Cypress or other platforms, doesn't care about the visuals, they look into the markup and realize that the buttons are there but hidden. That gets them to assume that they are not clickable.

    In Cypress, this can be resolved by enforcing the submit instruction. That way, Cypress ignores the fact that the button is hidden.

    Not sure, what's the equivalent for that in Behat, but there should certainly be one. @eduardo morales alberti is there a way you could find out and let us know? I know, it's unfortunate that you have to update your tests, but these sticky action buttons can only be implemented that way, so we have to ask everyone to update their tests in that context.

  • 🇪🇸Spain eduardo morales alberti Spain, 🇪🇺

    Thank you @jurgenhaas

    We updated the tests using the following custom steps on Behat.

      /**
       * @Given I press the submit input
       */
      public function iPressTheButtonInput() {
        $session = $this->getSession();
        $driver = $session->getDriver();
    
        if ($driver instanceof \Behat\Mink\Driver\Selenium2Driver) {
          // JavaScript-enabled submission.
          $session->executeScript('document.querySelector("input#edit-submit").click();');
        } else {
          $session->getPage()->pressButton('edit-submit');
        }
    
      }
    
    
  • 🇨🇭Switzerland saschaeggi Zurich

    @eduardo can you check if 📌 Improve sticky actions implementation Active would fix your behat tests? If yes, can you provide feedback in that issue? Thanks!

Production build 0.71.5 2024