How can I handle mixing async/await methods with NW chaining using .perform() ???

[pawlakmaly]

I'm not sure if I get it right but, using perform() and passing done argument to it I can execute any asynchronous code in a command chain. But does it work when I want to execute a chainable PO command in an async/await test case ?

For example:

My Page Object command:

myCommand: Function() {
return this.click('someElement').waitForElementNotVisible('someElement')

My test case:

'some test case': async function (browser){
const text = await browser.getText(selector);
await browser.setText(selector2, text)
await browser.perform((done) => {
 myGlobalPageObject.myCommand()
})

Is this correct thinking ??? Or it should be done different (and how?) ?

[beatfactor]

That should be fine. What are the issues you encounter?

[pawlakmaly]

An error:

The exact code is:

import { NightwatchBrowser } from "nightwatch";

module.exports = {
  after(browser: NightwatchBrowser) {
    browser.end();
  },
  "Async test case": async function (browser: NightwatchBrowser) {
    const ecosiaPage = browser.page.ecosiaPage();
    await browser.url("https://www.ecosia.org/");
    await browser.waitForElementVisible("body");
    await browser.perform(() => {
      ecosiaPage.myChainCommand();
    });
    await browser.verify.containsText(".mainline-results", "Nightwatch.js");
  }
};

And Page Object:

import { EnhancedPageObject, EnhancedSectionInstance } from "nightwatch";
const ecosiaCommands = {
  myChainCommand: function () {
    return this.verify
      .titleContains("Ecosia")
      .setValue("input[type=search]", "nightwatch")
      .click("button[type=submit]");
  },
};

const ecosiaPage = {
  url: "https://nightwatchjs.org/",
  elements: {
    body: "body",
    nonExistingElement: "SomeNotExistingElement",
    searchInput: "input[type=search]",
    submitButton: "button[type=submit]",
    mainResults: ".mainline-results",
  },

  commands: ecosiaCommands,
  props: {},
  sections: {
    testSection: {
      selector: "someSelector",
      elements: {
        sectionBody: {
          selector: "body",
          locateStrategy: "css selector",
        },
      },
      commands: {
        clickUsingSectionElement: function () {
          return this.click(this.elements.sectionBody, (result) => {
            console.log(
              "\nClick from clickUsingSectionElement() : " +
                JSON.stringify(result)
            );
          });
        },
        clickUsingOwnSelector: function () {
          const someSelector = {
            selector: "body",
            locateStrategy: "css selector",
          };
          return this.click(someSelector, (result) => {
            console.log(
              "\nClick from clickUsingOwnSelector() : " + JSON.stringify(result)
            );
          });
        },
      },
    },
  },
};

module.exports = ecosiaPage;

export interface EcosiaPage
  extends EnhancedPageObject<
    typeof ecosiaPage.commands,
    typeof ecosiaPage.elements,
    {
      testSection: TestSection;
    }
  > {
  props: typeof ecosiaPage.props;
}

export interface TestSection
  extends EnhancedSectionInstance<
    typeof ecosiaPage.sections.testSection.commands,
    typeof ecosiaPage.sections.testSection.elements
  > {
  selector: typeof ecosiaPage.sections.testSection.selector;
}

declare module "nightwatch" {
  interface NightwatchCustomPageObjects {
    ecosiaPage(): EcosiaPage;
  }
}

[pawlakmaly]

@beatfactor is this an bug or I'm doing something wrong ?

[beatfactor]

I think it is a limitation in the framework, but we'll address it in v1.7, which will be released soon.