Can't type a page object without error stating EnhancedPageObject is not compatible because "The types returned by 'setGeolocation(...)' are incompatible between these types."

[reallymello]

Description of the bug/issue

When I initialize a page object with the page object's interface I expect there to be no type errors, but instead if receive an error Type 'EnhancedPageObject<any, any, any>' is not assignable to type 'DuckPage'. The types returned by 'setGeolocation(...)' are incompatible between these types. Type 'Awaitable<EnhancedPageObject<any, any, any>, null>' is not assignable to type 'Awaitable<EnhancedPageObject<{}, Partial<{ [name: string]: string | ElementProperties; }> | Partial<{ [name: string]: string | ElementProperties; }>[] | undefined>, null>'. Type 'Omit<EnhancedPageObject<any, any, any>, "then"> & PromiseLike<null>' is missing the following properties from type 'Omit<EnhancedPageObject<{}, Partial<{ [name: string]: string | ElementProperties; }> | Partial<{ [name: string]: string | ElementProperties; }>[] | undefined>, "then">': axeInject, axeRun, debug, deleteCookie, and 97 more.

const duckPage: DuckPage = browser.page.DuckPage();

Steps to reproduce

1. Create a typescript project
2. Create a page-objects folder inside ./nightwatch
3. Set the nightwatch config page objects folder to the path of your page-objects folder
4. Create a page object DuckPage.ts inside the page-objects folder

//DuckPage.ts
import { PageObjectModel, EnhancedPageObject } from 'nightwatch';

const duckPageCommands = {};

const duckPage: PageObjectModel = {
  url: 'http://www.duckduckgo.com',
  commands: [duckPageCommands],
  elements: {
    searchBar: {
      selector: 'input[type=text]',
    },
    submit: {
      selector: 'input[name=btnK]',
    },
  },
} satisfies PageObjectModel;

export default duckPage;

export interface DuckPage
  extends EnhancedPageObject<
    typeof duckPageCommands,
    typeof duckPage.elements
  > {}

5. Create a test setting DuckPage to a constant giving it the type of the DuckPage interface

import { NightwatchTests } from 'nightwatch';
import { DuckPage } from '../page-objects/DuckPage';

const home: NightwatchTests = {
  'Duck Duck go navigate': () => {
    const duckPage: DuckPage = browser.page.DuckPage();

    duckPage.navigate();
  },
};

export default home;

You should see the error appear on hover of the duckPage variable in VSCode

Type 'EnhancedPageObject<any, any, any>' is not assignable to type 'DuckPage'. The types returned by 'setGeolocation(...)' are incompatible between these types. Type 'Awaitable<EnhancedPageObject<any, any, any>, null>' is not assignable to type 'Awaitable<EnhancedPageObject<{}, Partial<{ [name: string]: string | ElementProperties; }> | Partial<{ [name: string]: string | ElementProperties; }>[] | undefined>, null>'. Type 'Omit<EnhancedPageObject<any, any, any>, "then"> & PromiseLike<null>' is missing the following properties from type 'Omit<EnhancedPageObject<{}, Partial<{ [name: string]: string | ElementProperties; }> | Partial<{ [name: string]: string | ElementProperties; }>[] | undefined>, "then">': axeInject, axeRun, debug, deleteCookie, and 97 more.

Sample test

import { NightwatchTests } from 'nightwatch';
import { DuckPage } from '../page-objects/DuckPage';

const home: NightwatchTests = {
  'Duck Duck go navigate': () => {
    const duckPage: DuckPage = browser.page.DuckPage();

    duckPage.navigate();
  },
};

export default home;

Command to run

N/A

Verbose Output

N/A

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/tests'],

  // 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/
          args: [
            //'--no-sandbox',
            //'--ignore-certificate-errors',
            //'--allow-insecure-localhost',
            //'--headless=new'
          ],
        },
      },

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

Nightwatch.js Version

3.11.1

Node Version

22.13.1

Browser

No response

Operating System

No response

Additional Information

New folder (2).zip

[kishorprajapati1212]

Fixed TypeScript bug in Nightwatch Page Object By adding "any" in DuckPage.ts

• Used ChromeDriver default port 9515
• Resolved TypeScript errors in Page Object and test
  ''https://github.com/kishorprajapati1212/nightwatch_bug_fix_4384.git''

[reallymello]

I rediscovered the typescript boilerplate project and I think the issue stemmed from forgetting the types file override for nightwatch.d.ts

https://github.com/nightwatchjs-community/nightwatch-typescript-boilerplate

Maybe the page objects and wiring should be included during npm init nightwatch when users select the TypeScript project option to provide a better base

[kishorprajapati1212]

Got it. Do you think it would make sense to update the TypeScript setup to include the page objects and wiring by default? I can look into that if it helps.