0

In our Nightwatch codebase we utilise the page object pattern.

I’m trying to create a selectFromDropdown function to use throughout our checks, so I thought putting this in a customCommands folder made sense.

Now, when I go to use my selectFromDropdown function in our page js file, the code looks like this:

selectFromDropdown('@minMonthlyPrice', min, client)

Anyone familiar with Nightwatch will recognise that @ bit to reference an element.

SO… finally the problem I’m facing - It seems that I cannot successfully pass through this @ style selector. I am seeing this error when I do...

Error while running .locateMultipleElements() protocol action: invalid selector: An invalid or illegal selector was specified

However, when I pass the css selector path straight into the selectFromDropdown function it all works fine.

Has anyone figured out a way to overcome this issue? Is it possible to use @ selectors with customer commands?

I've tried rewriting my export function as a class as per this: https://nightwatchjs.org/guide/extending-nightwatch/#writing-custom-commands However it didn't seem to make a difference. I was experiencing the same behaviour as mentioned earlier.

Any help is much appreciated!

EDIT - 03/10/19

The custom command SelectFromDropdown is being imported into the page file where I want to use the SelectFromDropdown function. Inside this page file I am also declaring the css path of the @ selector. 

import { SelectFromDropdown } from'../../customCommands/selectFromDropdown

The code inside my selectFromDropdown js.file looks like this:

export function selectFromDropdown(cssSelector, value, client) {
     client.waitForElementVisible(cssSelector, 10000)
     client.click(cssSelector, () => {
             client.waitForElementVisible(`option[value="${value}"]`, 10000)
             client.click(`option[value="${value}"]`)
         })
         .assert.value(cssSelector, value.replace(/'/g, ''))
 }
Hannah Haken
  • 1
  • 2

1 Answers1

0

To answer your last question first, it is definitely possible to use @ selectors with custom commands.

I'd need to see more of your selectFromDropdown command or how you're calling it to be certain, but I suspect that you are calling that custom command on the browser client object (e.g. browser.selectFromDropdown('@minMonthlyPrice', min, client)) instead of on the page object (e.g. browser.page.somePage().selectFromDropdown('@minMonthlyPrice', min, client)). You have to call the custom command on an object that "knows" what element @minMonthlyPrice refers to.

Micah L-C
  • 104
  • 1
  • 10