Stricter types when using `this` in Nightwatch BDD test syntax

[garg3133]

When writing this.someCustomProp in Nightwatch BDD test syntax (see below example), the property attains any type. We need to find a way to make the type of custom properties added to this stricter.

import {NightwatchBrowser} from "nightwatch";

describe('Ecosia.org Demo', function() {
  before(async (browser) => {
    await browser.navigateTo('https://www.ecosia.org/');
    this.nightwatchApi = browser;
  });

  it('Demo test ecosia.org', () => {
    (this.nightwatchApi as NightwatchBrowser)
      .waitForElementVisible('body')
      .assert.titleContains('Ecosia')
      .assert.visible('input[type=search]')
      .setValue('input[type=search]', 'nightwatch')
      .assert.visible('button[type=submit]')
      .click('button[type=submit]')
      .assert.containsText('.layout__content', 'Nightwatch.js');
  });

  after(browser => browser.end());
});

One solution I found is to make a custom class which will extend the DescribeInstance class and can be passed on to describe as generic type, but we still need a better and simpler way of doing this.

import { NightwatchBrowser, DescribeInstance } from "nightwatch";

class CustomDescribeInstance extends DescribeInstance {
  bodySelector?: string;
  nightwatchApi?: NightwatchBrowser;
}

describe<CustomDescribeInstance>('Ecosia.org Demo', function() {
  before(async (browser) => {
    await browser.navigateTo('https://www.ecosia.org/');
    this.nightwatchApi = browser;
    this.bodySelector = 'body';
  });

  it('Demo test ecosia.org', () => {
    this.nightwatchApi!
      .waitForElementVisible(bodySelector!)
      .assert.titleContains('Ecosia')
      .assert.visible('input[type=search]')
      .setValue('input[type=search]', 'nightwatch')
      .assert.visible('button[type=submit]')
      .click('button[type=submit]')
      .assert.containsText('.layout__content', 'Nightwatch.js');
  });

  after(browser => browser.end());
});

[garg3133]

Found a better way of doing this:

import { NightwatchBrowser } from "nightwatch";

interface ExtendedDescribeThis {
  bodySelector: string;
  nightwatchApi: NightwatchBrowser;
}

describe<ExtendedDescribeThis>('Ecosia.org Demo', function() {

  before(async (browser) => {
    await browser.navigateTo('https://www.ecosia.org/');

    this.nightwatchApi = browser;

    console.log(this.desiredCapabilities);
  });

  it('Demo test ecosia.org', () => {
    this.nightwatchApi!
      .waitForElementVisible('body')
      .assert.titleContains('Ecosia')
      .assert.visible('input[type=search]')
      .setValue('input[type=search]', 'nightwatch')
      .assert.visible('button[type=submit]')
      .click('button[type=submit]')
      .assert.containsText('.layout__content', 'Nightwatch.js');
  });

  after(browser => browser.end());
});

[AutomatedTester]

linking to #3300

[garg3133]

Raised: https://github.com/DefinitelyTyped/DefinitelyTyped/pull/61631

Along with a fix to this issue, it also completes the type definitions for BDD this.

[vaibhavsingh97]

Closing this issue, since above PR is merged