unhandledRejection using findElement chained to find

[reallymello]

Description of the bug/issue

I have an async page object command that returns an object containing Definition(s). Those definitions are found by chaining using syntax like

const billingCard = locateWith(By.css(`body`));
const headerElement = (await browser.element.find(billingCard)).findElement(
      By.css('[this="doesntExist"]')
    );

If billingCard is present in the DOM, but the selector in the chained findElement does not, when I run the test I get an unhandledRejection and Nightwatch exits unexpectedly without finishing out the test and closing the browser.

  Error
   unhandledRejection: no such element: Unable to locate element: {"method":"css selector","selector":"[this="doesntExist"]"}
  (Session info: chrome=123.0.6312.107)
NoSuchElementError: no such element: Unable to locate element: {"method":"css selector","selector":"[this="doesntExist"]"}
  (Session info: chrome=123.0.6312.107)
    at Object.throwDecodedError (C:\Users\agent\Desktop\unhandledBug\node_modules\selenium-webdriver\lib\error.js:524:15)
    at parseHttpResponse (C:\Users\agent\Desktop\unhandledBug\node_modules\selenium-webdriver\lib\http.js:601:13)
    at Executor.execute (C:\Users\agent\Desktop\unhandledBug\node_modules\selenium-webdriver\lib\http.js:529:28)
    at processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async Driver.execute (C:\Users\agent\Desktop\unhandledBug\node_modules\selenium-webdriver\lib\webdriver.js:745:17)

Steps to reproduce

1. Extract nightwatchUnhandled.zip
2. Run npm install
3. Run npx nightwatch nightwatch\test\google.ts

Sample test

import { NightwatchAPI, NightwatchTests } from 'nightwatch';

const home: NightwatchTests = {
  'Google title test': () => {
    browser.url('https://google.com/ncr').assert.titleEquals('Google');
  },

  'Google search test': async (browser: NightwatchAPI) => {
    const googleSearchPage = browser.page.Google.GoogleSearchPage();
    const billingCard = await googleSearchPage.returnBillingCardForId(
      'some-id'
    );
  },
};

export default home;

Command to run

npx nightwatch nightwatch\test\google.ts

Verbose Output

npx nightwatch nightwatch\test\google.ts --verbose

[Google] Test Suite
──────────────────────────────────────
⠋ Starting ChromeDriver on port 9515...
 Starting ChromeDriver...
(node:37980) [DEP0040] DeprecationWarning: The `punycode` module is deprecated. Please use a userland alternative instead.
⠙ Starting ChromeDriver on port 9515...                                                                                                                                                                                                                              
   Request POST /session  
   {
     capabilities: {
       firstMatch: [ {} ],
       alwaysMatch: {
         browserName: 'chrome',
         'goog:chromeOptions': {
           binary: 'C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe'
         }
       }
     }
⠹ Starting ChromeDriver on port 9515...

⠦ Starting ChromeDriver on port 9515...
   Response 200 POST /session (460ms)
   {
     value: {
       capabilities: {
         acceptInsecureCerts: false,
         browserName: 'chrome',
         browserVersion: '123.0.6312.107',
         chrome: {
           chromedriverVersion: '123.0.6312.122 (31f8248cdd90acbac59f700b603fed0b5967ca50-refs/branch-heads/6312@{#824})',
           userDataDir: 'C:\\Users\\agent\\AppData\\Local\\Temp\\scoped_dir26900_507387180'
         },
         'fedcm:accounts': true,
         'goog:chromeOptions': { debuggerAddress: 'localhost:65121' },
         networkConnectionEnabled: false,
         pageLoadStrategy: 'normal',
         platformName: 'windows',
         proxy: {},
         setWindowRect: true,
         strictFileInteractability: false,
         timeouts: { implicit: 0, pageLoad: 300000, script: 30000 },
         unhandledPromptBehavior: 'dismiss and notify',
         'webauthn:extension:credBlob': true,
         'webauthn:extension:largeBlob': true,
         'webauthn:extension:minPinLength': true,
         'webauthn:extension:prf': true,
         'webauthn:virtualAuthenticators': true
       },
       sessionId: '7135f343dcf89235e2a21c28f2ed793a'
     }
ℹ Connected to ChromeDriver on port 9515 (669ms).                                                                                                                                                                                                                    
  Using: chrome (123.0.6312.107) on WINDOWS.

 Received session with ID: 7135f343dcf89235e2a21c28f2ed793a

 → Running [before]:
 → Completed [before].

  Running Google title test:
─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────
 → Running [beforeEach]:
 → Completed [beforeEach].

 → Running command: url ('https://google.com/ncr')
  ⠋ Loading url: https://google.com/ncr
   Request POST /session/7135f343dcf89235e2a21c28f2ed793a/url  
  ⠇ Loading url: https://google.com/ncr
   Response 200 POST /session/7135f343dcf89235e2a21c28f2ed793a/url (713ms)
  ℹ Loaded url https://google.com/ncr in 715ms                                                                                                                                                                                                                       
 → Completed command: url ('https://google.com/ncr') (715ms)

 → Running command: assert.titleEquals ('Google')

 → Running command: title ([Function])
   Request GET /session/7135f343dcf89235e2a21c28f2ed793a/title  

   Response 200 GET /session/7135f343dcf89235e2a21c28f2ed793a/title (3ms)
   { value: 'Google' }
  √ Testing if the page title equals 'Google' (15ms)
 → Completed command: title ([Function]) (5ms)
 → Completed command: assert.titleEquals ('Google') (16ms)
 → Running [afterEach]:
 → Completed [afterEach].

  ✨ PASSED. 1 assertions. (740ms)

  Running Google search test:
─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────
 → Running [beforeEach]:
 → Completed [beforeEach].

 → Running command: element.find ({ RelativeBy({"relative":{"root":{"css selector":"body"},"filters":[]}}) })
   Request POST /session/7135f343dcf89235e2a21c28f2ed793a/execute/sync  
   {
     script: '/* findElements */return (function(){return (function(){var aa=this||self;function ba(a){return"string"==typeof a}function ca(a,b){a=a.split(".");var c=aa;a[0]in c||"undefined"==typeof c.execScript||c... (53745 characters)',
     args: [
       { relative: { root: { 'css selector': 'body' }, filters: [] } }
     ]
  }
   Response 200 POST /session/7135f343dcf89235e2a21c28f2ed793a/execute/sync (7ms)
   {
     value: [
       {
         'element-6066-11e4-a52e-4f735466cecf': 'f.28CB8F7124F202161E14A7B91AA56DC2.d.C2962D48B6BC58D3C8C928FF0076C369.e.16'
       }
     ]
  }
 → Completed command: element.find ({ RelativeBy({"relative":{"root":{"css selector":"body"},"filters":[]}}) }) (9ms)
   Request POST /session/7135f343dcf89235e2a21c28f2ed793a/element/f.28CB8F7124F202161E14A7B91AA56DC2.d.C2962D48B6BC58D3C8C928FF0076C369.e.16/element  
   { using: 'css selector', value: '[this="doesntExist"]' }

 → Running command: element.find ({ RelativeBy({"relative":{"root":{"css selector":"body"},"filters":[]}}) })
   Request POST /session/7135f343dcf89235e2a21c28f2ed793a/execute/sync  
   {
     script: '/* findElements */return (function(){return (function(){var aa=this||self;function ba(a){return"string"==typeof a}function ca(a,b){a=a.split(".");var c=aa;a[0]in c||"undefined"==typeof c.execScript||c... (53745 characters)',
     args: [
       { relative: { root: { 'css selector': 'body' }, filters: [] } }
     ]
  }
   Response 404 POST /session/7135f343dcf89235e2a21c28f2ed793a/element/f.28CB8F7124F202161E14A7B91AA56DC2.d.C2962D48B6BC58D3C8C928FF0076C369.e.16/element (5ms)
   {
     value: {
       error: 'no such element',
       message: 'no such element: Unable to locate element: {"method":"css selector","selector":"[this="doesntExist"]"}\n' +
         '  (Session info: chrome=123.0.6312.107)',
       stacktrace: ''
     }
  }
  Error
   unhandledRejection: no such element: Unable to locate element: {"method":"css selector","selector":"[this="doesntExist"]"}
  (Session info: chrome=123.0.6312.107)
NoSuchElementError: no such element: Unable to locate element: {"method":"css selector","selector":"[this="doesntExist"]"}
  (Session info: chrome=123.0.6312.107)
    at Object.throwDecodedError (C:\Users\agent\Desktop\unhandledBug\node_modules\selenium-webdriver\lib\error.js:524:15)
    at parseHttpResponse (C:\Users\agent\Desktop\unhandledBug\node_modules\selenium-webdriver\lib\http.js:601:13)
    at Executor.execute (C:\Users\agent\Desktop\unhandledBug\node_modules\selenium-webdriver\lib\http.js:529:28)
    at processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async Driver.execute (C:\Users\agent\Desktop\unhandledBug\node_modules\selenium-webdriver\lib\webdriver.js:745:17)
PS C:\Users\agent\Desktop\unhandledBug>

Nightwatch Configuration

// Refer to the online docs for more details:
// https://nightwatchjs.org/gettingstarted/configuration/
//

//  _   _  _         _      _                     _          _
// | \ | |(_)       | |    | |                   | |        | |
// |  \| | _   __ _ | |__  | |_ __      __  __ _ | |_   ___ | |__
// | . ` || | / _` || '_ \ | __|\ \ /\ / / / _` || __| / __|| '_ \
// | |\  || || (_| || | | || |_  \ V  V / | (_| || |_ | (__ | | | |
// \_| \_/|_| \__, ||_| |_| \__|  \_/\_/   \__,_| \__| \___||_| |_|
//             __/ |
//            |___/

module.exports = {
  // An array of folders (excluding subfolders) where your tests are located;
  // if this is not specified, the test source must be passed as the second argument to the test runner.
  src_folders: ['nightwatch/test'],

  // See https://nightwatchjs.org/guide/concepts/page-object-model.html
  page_objects_path: ['nightwatch/page-objects'],

  // See https://nightwatchjs.org/guide/extending-nightwatch/adding-custom-commands.html
  custom_commands_path: [],

  // See https://nightwatchjs.org/guide/extending-nightwatch/adding-custom-assertions.html
  custom_assertions_path: [],

  // See https://nightwatchjs.org/guide/extending-nightwatch/adding-plugins.html
  plugins: [],

  // See https://nightwatchjs.org/guide/concepts/test-globals.html
  globals_path: '',

  webdriver: {},

  test_workers: {
    enabled: true,
  },

  test_settings: {
    default: {
      disable_error_log: false,
      launch_url: 'http://localhost',

      screenshots: {
        enabled: false,
        path: 'screens',
        on_failure: true,
      },

      desiredCapabilities: {
        browserName: 'chrome',
      },

      webdriver: {
        start_process: true,
        server_path: '',
      },
    },

    chrome: {
      desiredCapabilities: {
        browserName: 'chrome',
        'goog:chromeOptions': {
          // More info on Chromedriver: https://sites.google.com/a/chromium.org/chromedriver/
          //
          // w3c:false tells Chromedriver to run using the legacy JSONWire protocol (not required in Chrome 78)
          w3c: true,
          args: [
            //'--no-sandbox',
            //'--ignore-certificate-errors',
            //'--allow-insecure-localhost',
            //'--headless'
          ],
        },
      },

      webdriver: {
        start_process: true,
        server_path: '',
        cli_args: [
          // --verbose
        ],
      },
    },
  },
};

Nightwatch.js Version

3.6.0

Node Version

21.6.2

Browser

Chrome 123

Operating System

Windows 11

Additional Information

nightwatchUnhandled.zip

[garg3133]

This is actually a known issue where the test run ends abruptly on unhandledRejection or uncaughtError and I had started working on it but then had to re-prioritize stuff. I'll try to take this up on priority again.

But for your particular examples, it will be handled correctly by Nightwatch if you move the await from inside to outside the parenthesis:

const billingCard = locateWith(By.css(`body`));
const headerElement = await browser.element.find(billingCard).findElement(
  By.css('[this="doesntExist"]')
);

Explanation for above: When you do browser.element.find(), it returns a Nightwatch wrapper around the actual result, that contains the various API methods provided by Nightwatch (like chained .find() commands, .getText(), etc). But when you await this statement, it would resolve to the actual result (a WebElement instance here).

Now, if you do .findElement() on the WebElement instance directly (which you are doing in the example provided), it would directly go to Selenium and any errors won't be handled by Nightwatch (though we should add something to handle it in future), so you get the unhandledRejection error.

But if you call the findElement() on the Nightwatch wrapper directly, then the .findElement() command would go through the Nightwatch implementation, where everything is handled. This .findElement() will also in turn return the Nightwatch wrapper around the actual result, so to get the actual final result you can use await over the entire statement.