Add focus assertions to JavaScript tests

Totally makes sense to me! +1 for concept. And thanks for doing this! 🙏

1. +++ b/core/tests/Drupal/FunctionalJavascriptTests/JSWebAssert.php
   @@ -275,6 +275,66 @@ public function assertNotVisibleInViewport($selector_type, $selector, $corner =
   +   * Tests that an element has focus.
   ...
   +   * Tests that an element does not have focus.
   

   s/Tests that/Asserts if/

2. +++ b/core/tests/Drupal/FunctionalJavascriptTests/JSWebAssert.php
   @@ -275,6 +275,66 @@ public function assertNotVisibleInViewport($selector_type, $selector, $corner =
   +   *   The element selector type (CSS, XPath).
   

   \Behat\Mink\WebAssert::elementExists lists other possible values. Or is this case-insensitive? :O

3. +++ b/core/tests/Drupal/FunctionalJavascriptTests/JSWebAssert.php
   @@ -275,6 +275,66 @@ public function assertNotVisibleInViewport($selector_type, $selector, $corner =
   +  public function assertHasFocus($selector_type, $selector, $message = 'Element has focus.') {
   

   It'd be better to set NULL as the default, so that we can detect if (is_null($message)) {…} and then generate a more meaningful error message, one that also conveys the used selector. This results in a better DX.

4. +++ b/core/tests/Drupal/FunctionalJavascriptTests/JSWebAssert.php
   @@ -275,6 +275,66 @@ public function assertNotVisibleInViewport($selector_type, $selector, $corner =
   +   * Check the focus of a node.
   

   Must be third person singular.

5. +++ b/core/tests/Drupal/FunctionalJavascriptTests/JSWebAssert.php
   @@ -275,6 +275,66 @@ public function assertNotVisibleInViewport($selector_type, $selector, $corner =
   +  private function checkFocus(NodeElement $node) {
   

   I wonder if elementHasFocus() would be more appropriate?

6. +++ b/core/tests/Drupal/FunctionalJavascriptTests/JSWebAssert.php
   @@ -275,6 +275,66 @@ public function assertNotVisibleInViewport($selector_type, $selector, $corner =
   +return document.evaluate("$xpath", document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue === document.activeElement;
   

   Woah, what?!

   Could use docs.

+++ b/core/tests/Drupal/FunctionalJavascriptTests/JSWebAssert.php
@@ -275,6 +275,66 @@ public function assertNotVisibleInViewport($selector_type, $selector, $corner =
+  public function assertHasFocus($selector_type, $selector, $message = 'Element has focus.') {
...
+  public function assertNotHasFocus($selector_type, $selector, $message = 'Element does not have focus.') {

This looks super useful! Can we add a container parameter to these methods? A selector could not be unique in the page, while it is unique in a container.

+++ b/core/tests/Drupal/FunctionalJavascriptTests/JSWebAssert.php
@@ -275,6 +276,76 @@ public function assertNotVisibleInViewport($selector_type, $selector, $corner =
+  public function assertHasFocus($selector_type, $selector, ElementInterface $container = NULL, $message = 'Element has focus.') {
...
+  public function assertNotHasFocus($selector_type, $selector, ElementInterface $container = NULL, $message = 'Element does not have focus.') {

Since the message being set here is the message in the exception when the assert fails, I would expect the messages to be the other way around

1. Improving PHPDoc commens.

2. Most methods of the WebAssert class do return the found elements or there is a plan to do it. Let's do the same in this case.
#2913411: Make methods in WebAssert return matching elements.

Re #3.2

vendor/behat/mink/src/Exception/ElementNotFoundException.php using lowercase element selector type so this is case sensitive.

class ElementNotFoundException extends ExpectationException
{
    /**
     * Initializes exception.
     *
     * @param DriverInterface|Session $driver   driver instance
     * @param string                  $type     element type
     * @param string                  $selector element selector type
     * @param string                  $locator  element locator
     */
    public function __construct($driver, $type = null, $selector = null, $locator = null)
    {
        $message = '';

        if (null !== $type) {
            $message .= ucfirst($type);
        } else {
            $message .= 'Tag';
        }

        if (null !== $locator) {
            if (null === $selector || in_array($selector, array('css', 'xpath'))) {
                $selector = 'matching '.($selector ?: 'locator');
            } else {
                $selector = 'with '.$selector;
            }
            $message .= ' '.$selector.' "'.$locator.'"';
        }

        $message .= ' not found.';

        parent::__construct($message, $driver);
    }
}

/**
 * Checks that specific element exists on the current page.
 *
 * @param string           $selectorType element selector type (css, xpath)
 * @param string|array     $selector     element selector
 * @param ElementInterface $container    document to check against
 *
 * @return NodeElement
 *
 * @throws ElementNotFoundException
 */
public function elementExists($selectorType, $selector, ElementInterface $container = null)
{
    $container = $container ?: $this->session->getPage();
    $node = $container->find($selectorType, $selector);

    if (null === $node) {
        if (is_array($selector)) {
            $selector = implode(' ', $selector);
        }

        throw new ElementNotFoundException($this->session->getDriver(), 'element', $selectorType, $selector);
    }

    return $node;
}

+1 to adding assertions for this! 🔥

+++ b/core/tests/Drupal/FunctionalJavascriptTests/JSWebAssert.php
@@ -275,6 +276,88 @@ public function assertNotVisibleInViewport($selector_type, $selector, $corner =
+return document.evaluate("$xpath", document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue === document.activeElement;

To avoid false positives, it makes sense that we assert whether the specific element is focused, not taking into account that children could be focused. We should document this explicitly in the doc block to avoid confusion.

Follow-up #3.2 and #9 I created quick fix.

#3041900: The element selector type "CSS, XPath" in JSWebAssert should be lowercase

--- a/core/tests/Drupal/FunctionalJavascriptTests/JSWebAssert.php
+++ b/core/tests/Drupal/FunctionalJavascriptTests/JSWebAssert.php
@@ -200,7 +200,7 @@ public function waitOnAutocomplete() {
    * @param string $selector_type
-   *   The element selector type (CSS, XPath).
+   *   The element selector type (css, xpath).
    * @param string|array $selector
@@ -243,7 +243,7 @@ public function assertVisibleInViewport($selector_type, $selector, $corner = FAL
    * @param string $selector_type
-   *   The element selector type (CSS, XPath).
+   *   The element selector type (css, xpath).
    * @param string|array $selector

It can be confusing so we should change it in other places.

+1 for this!

Sounds like there are small changes needed for #10 possibly #11.

Another approach for this is described here https://opensource.com/article/23/2/automated-accessibility-testing

by using https://github.com/dmtrKovalenko/cypress-real-events

Not sure if there is a similar library for Nightwatch or if JsWebAssert is essentially equivalent.