Implement Nightwatch tests for Navigation module

We also need:

1. Own testing tag EG: '@tags': ['navigation'],
2. Add tests in different themes contexts. Umami / Claro / Olivero / NO_THEME

Like was done https://git.drupalcode.org/project/navigation/-/merge_requests/79/diffs

The nightwatch MR has basic accessibility tests running. It's good to have these running, and this demonstrates that adding Nightwatch doesn't require any major errfor.

The Axe A11y tests already caught a duplicate ID, which is now fixed in that same MR. Given that this already caught an accessibility bug, I think this basic implementation should get in sooner than later so it can surface other accessibility problems as this project evolves.

The NW testing can get more comprehensive than what is currently there if we see the need. I think beginning with something simple like this is helpful as it gets basic A11y checks going and is a starting point for additional NW tests.

Also creating some `dark` testing theme could be useful here.
Like:
body { background-color: black; color: white; }

Added a11y test and expand/collapse test.

Ally reports now

   ✖ 1) Tests/a11y

   – Accessibility - Navigation Module - Claro page (10.3s)

   → ✖ NightwatchAssertError
   aXe rule: button-name - Buttons must have discernible text
        In element: .toolbar-button--icon--sidebar-toggle
   → ✖ NightwatchAssertError
   aXe rule: link-name - Links must have discernible text
        In element: .toolbar-button--icon--system-themes-page
   → ✖ NightwatchAssertError
   aXe rule: link-name - Links must have discernible text
        In element: .toolbar-button--icon--system-modules-list
   → ✖ NightwatchAssertError
   aXe rule: link-name - Links must have discernible text
        In element: .toolbar-button--icon--entity-user-collection

   – Accessibility - Navigation Module - HomePage (6.613s)

   → ✖ NightwatchAssertError
   aXe rule: button-name - Buttons must have discernible text
        In element: .toolbar-button--icon--sidebar-toggle
   → ✖ NightwatchAssertError
   aXe rule: heading-order - Heading levels should only increase by one
        In element: .label
   → ✖ NightwatchAssertError
   aXe rule: landmark-unique - Ensures landmarks are unique
        In element: #admin-toolbar
   → ✖ NightwatchAssertError
   aXe rule: link-name - Links must have discernible text
        In element: .toolbar-button--icon--system-themes-page
   → ✖ NightwatchAssertError
   aXe rule: link-name - Links must have discernible text
        In element: .toolbar-button--icon--system-modules-list
   → ✖ NightwatchAssertError
   aXe rule: link-name - Links must have discernible text
        In element: .toolbar-button--icon--entity-user-collection
   → ✖ NightwatchAssertError
   aXe rule: region - All page content should be contained by landmarks
        In element: #primary-tabs-title

We need to add tooltip tests and mobile. basically will be fine

hello all!
I have small misunderstanding.
We want to add Nightwatch testing. But i don’t really want to reproduce all Drupal Nightwatch infrastructure in module. Currently I’m running tests from core dir like yarn run test:nightwatch --tag navigation
But it will be useless in Navigation module CI.

So idk. I’ll continue in same approach. Probably we need to move Drupal Nightwatch functions into npm package. So it can be useful for modules/themes CI

Idk seems CI runned somehow. Need to check its context.

Started working on the tests, copied over @bnjmnm test https://git.drupalcode.org/project/drupal/-/merge_requests/7980

Experimental modules can't be installed using the install module command. since it won't be experimental for long, I just used a test setup script

We have a problem here. The scroll wrapper, .admin-toolbar__scroll-wrapper, causes WebDriver to think any elements within it are not visible for interaction. Oddly enough waitForElementVisible passes. Probably because the latter is inspecting the DOM and not interacting with it.

When I made these changes, the tests passed:

.admin-toolbar__scroll-wrapper {
  /*display: flex;*/
  /*overflow-x: hidden;*/
  /*overflow-y: auto;*/
  flex-direction: column;
...
}

@media (min-width: 64rem) {
  .admin-toolbar__scroll-wrapper {
    /*display: contents;*/
    /*background: none;*/
  }
}

I also needed to fix the footer's z-index in #3446340: Fix z-index . Once the wrapper adjustments were made, the footer was hidden behind the navigation.

Okay, I worked backward and added back styles. It is the display: contents

@media (min-width: 64rem) {
  .admin-toolbar__scroll-wrapper {
    display: contents;

From caniuse https://caniuse.com/?search=display%3A%20contents

Buttons are not accessible with display: contents applied. See issues for Chromium, Firefox, and WebKit

I guess this is blocked on #3446357: Fix overflow visibility for wrapper content in navigation CSS, then.

The test is green, but:

- cherry-pick fix from #3446357: Fix overflow visibility for wrapper content in navigation CSS
- reverts #3446340: Fix z-index

Also pushed the axe test. It is failing. I think we should:

- Merge #3446357: Fix overflow visibility for wrapper content in navigation CSS to apply fix
- Follow @ckrina idea of making this a meta issue
- Commit the test site install script and expandCollapseTest.js (this issue or new child?)
- Make the child issues from #14 including a11y test

I've added special tag for module for :

`yarn test:nightwatch --tag navigation`

I've removed initial titles.
Now they are not defined.
Only block level titles we have now.

Backender review required here.

Test passed now.

I think we can merge it and create META for other tests.

The Needs Review Queue Bot tested this issue. It no longer applies to Drupal core. Therefore, this issue status is now "Needs work".

This does not mean that the patch necessarily needs to be re-rolled or the MR rebased. Read the Issue Summary, the issue tags and the latest discussion here to determine what needs to be done.

Consult the Drupal Contributor Guide to find step-by-step guides for working with issues.

css fix in #3446357: Fix overflow visibility for wrapper content in navigation CSS committed

Left a comment on MR. Should be small fix.

Updated the merge request to address the <h4> issue. See MR comment for details.

Added comment suggesting a different approach to set the <h4> title using the original logic we had in place.
Let's decide the preferred approach and wrap this one!

Addressed comments from @plopesc. Ready for review.

Looks good to me. Also i've removed outdated classnames. they are only should be on block level now.

Thank you for the progress here!

I'm missing these 2 small tasks from the strategy defined in #37

• Remove ID from h4and aria-labelledby from ul
• Open a follow-up to add back the ID and aria-labelled-by with JS to avoid caching issues. Also in this follow-up replace the ID on the li items, r evaluate if they are needed.

Other than that, I think this is good to go!

Follow up https://www.drupal.org/project/drupal/issues/3452724

This is looking good to me! Items in #43 have been addressed. Tests are passing and making good sense to me.

Sorry, keep in in rtbc. we also had that heading ID in footer.

few comments

• Created follow-up issue #3455058: drupalInstallModule nightwatch function does not work with Experimental modules to deal with issues enabling experimental modules in Nightwatch tests
• Moved some reused selectors to constants
• Added references to followup issues in @todo comments

These changes are not affecting the code and tests are still green, so I'm moving it back to RTBC directly.

Thank you

committed followup, we can clean up this MR

Back to RTBC once #3455058: drupalInstallModule nightwatch function does not work with Experimental modules was merged and the module installation process simplified.

Thanks

not committing to 10.3.x because of the id removal, might backport once follow-up is in.

Committed and pushed 9e83195c5d to 11.x and 07d570cfc7 to 11.0.x and 74cd44af63 to 10.4.x. Thanks!