javascriptxpathnightwatch.jscustom-selectors

xPath issue in NightwatchJS


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. enter image description here 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" 

enter image description here


Solution

  • 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"