xPath issue in NightwatchJS

Question

I am trying to test a command I created in NightwatchJS but I keep getting errors related to the selectors. The error is "expected 'visible' but got: 'not found'". This seems to be related to the second selector's xPath not being correct. The selector functions utilize the xPath and test the element using the Nightwatch method .waitForElementVisible. I created a common command (that is basically just a selector) outside of the command I am working in that successfully selects the element using a filename as an argument. The problem is the second selector (shoeboxDropdown), which takes the first selector(shoeboxSelectButton) and adds a /div. The shoeboxDropdown selector must be related to the shoeboxSelectButton. What I want to do is select the button and then click the dropdown menu for that button. If you look at the xPaths, you may see my delima.

shoeboxSelectButton:

  "//*[@id=\"sidebar-plugins\"]/div[1]/div[3]/div/div/div[2]/div[1]/ul/li/div[span/text()='" + filename + "']"

shoeboxDropdown:

//*[@id="sidebar-plugins"]/div[1]/div[3]/div/div/div[2]/div[1]/ul/li/div[2]

They both reside under the same list item li, but under separate divs. The text for the filename lives in div[1], while the dropdown menu lives in div[2]. How can I use the first selector to get the second using the xPath?

shoeboxSelectButton = require "../Common/shoeboxSelectButton"

exports.command = (filename) ->
    mappx = @page.mappx()

    shoeboxDropdown = () ->
      shoeboxSelectButton(filename) + "/div" 

Answer 1

OK-After many trials I was able to figure it out. It seems that adding // allows the path to be derived from initial path. My solution looks somewhat like this and I was able to apply it to other slectors as well. First, I had to tweak the xPath for my shoeboxSelectButton selector to this (Note: this is in Coffeescript):

module.exports = (filename) ->
"//*[@id=\"sidebar-plugins\"]/div[1]/div[3]/div/div/div[2]/div[1]/ul/li[.//span/text()='" + filename + "']"

Then, changed the code in my command to derive the selector for shoeboxDropdown (and shoeboxRemoveButton) to look like this:

shoeboxSelectButton = require "../Common/shoeboxSelectButton"

exports.command = (filename) ->
    mappx = @page.mappx()

shoeboxDropdown = () ->
    shoeboxSelectButton(filename) + "//em"

shoeboxRemoveButton = () ->
    shoeboxSelectButton(filename) + "//ul/li[3]/a"

Finally, I just had to make one call within the test file and wah-lah; it works! Hope this helps someone in the future.

browser.ShoeboxPanel.deleteShoebox "Typical"  

Answer 2

Try using the parent selector and then index to that second div. Something like this...

"//*[@id=\"sidebar-plugins\"]/div1/div[3]/div/div/div[2]/div1/ul/li/div[span/text()='" + filename + "']/../div[2]"

https://www.simple-talk.com/dotnet/net-framework/xpath-css-dom-and-selenium-the-rosetta-stone/ I personally use the Rosetta stone pdf for xpath to figure out some of these types of cases.