[feature] Make api calls allow objects as selectors

[EloB]

I been using nightwatch with page objects and sometimes I need to switch between css selectors and xpath. I want as clean code as possible. Here an example below that explains the feature request.

Current solution

module.exports = {
  elements: {
    something: '.something'
  },
  commands: [{
    doSomething() {
      this.waitForElementPresent('@something');
      this.api.useXpath();
      this.click(`//*[text()='Some custom text']`);
      this.api.useCss();
      return this;
    }
  }]
};

Wanted solution

import {
  xPath // === export const xPath = selector => ({ selector, locateStrategy: 'xpath' })
} from 'nightwatch'; 

module.exports = {
  elements: {
    something: '.something'
  },
  commands: [{
    doSomething(customText) {
      return this
        .waitForElementPresent('@something');
        .click(xPath(`//*[text()='${customText}']`)); // So the selector argument need to support object
    }
  }]
};

[beatfactor]

This would be fixed by supporting parametrized page object elements. There is an open PR regarding this: #1001. You could also create a custom command, e.g. "clickXpathElement" that would take care of the css/xpath switch.

[Tex-Hex]

I also ran into this issue (having to switch between this. and this.api.).
For me, following solution works fine:
Returning "this.api" on custom commands and within each line of testing use "this.api.".

var myCommand = {
  doSomeStuff: function() {
    this.api
        .waitForElementVisible('.backend ul.list')
        .useXpath()
        .click("//a[.='Publish']")
        .useCss()
        .waitForElementVisible(".container")
    return this.api;
  }
};

[EloB]

What I would like this on all commands not just the .click() and fallback to css selectors.

[Tex-Hex]

Ah, ok, got it. Thought the point was chaining commands...
Right, object as selectors would be great when reusing the same command with different selectors.

[senocular]

@EloB It sounds like what you're after is already in master via #1156 (a custom xPath function could easily return one of these formatted objects). But this isn't getting pushed into releases because of #1237.

@Tex-Hex You need to be careful about returning this.api. Once you do that, though you have access to all the commands again, your chaining is no longer in the scope of the page object, so you'll lose the ability to use page commands or @-element selectors.

I remember discussing the possibilities of expanding the page object api to include all commands, but there are some road blocks, notably collisions with url and elements which exists as separate implementations in both page objects and the standard api. Let me see if I can dig up that original discussion... I think this is it: #884

[EloB]

@senocular Looks promising... I would still want a helper to make it a bit shorter... To avoid lines longer than 120 chars. :)

// My example
import { xPath } from 'nightwatch';
this.api.click(xPath(`//*[text()='${customText}']`));

// vs current implementation
this.api.click(({selector:'//*[text()='${customText}']', locateStrategy:'xpath'});