Confirming the order of items in an array

Question

I am having some difficulty using Nightwatch.JS to assert that a list of filenames in an app are in the correct order as those filenames can be dragged and dropped in different orders. The problem is not necessarily related to the Nightwatch methods as much as using simple Javascript. Let's say I have a list of names in a specific order: 0 - Becky, 1 - Ann, 2 - Billy, 3 - Seth. I have and array that lists those names as well: var names = ["Becky", "Ann", "Billy", "Seth"]; and I want to check order of the actual list (assume each name is an xPath selector) against the names in the 'names' array. Using the starting code below, how would I check the actual order of the array? Note: the code is in shorthand coffeescript, not javascript.

exports.command = (names) ->
@useXpath()

names.forEach (name) =>
  shoeboxItemSelector = "//*[@id='sidebar-plugins']//div[@class='webgis-shoebox-item']//div[contains(text(), '#{ name }')]"
  @assert.elementPresent shoeboxItemSelector

this

Answer 1

OK, with the help of my colleague, we were able to resolve this issue by using a few Nightwatch specific methods and adding and index and a few parameters. The first thing I needed to do was to ascertain the order value for each item in my "actual" list. To do this, we use the WebDriven Protocol @element/element() to search for the element in application and assert it's order value. Once this was done, and index value was added to each selector to check the order of the parameter array items and then assert some other attributes (title and type - not really relevant to the initial question though). The final code looks like this:

exports.command = (names) ->
  @useXpath()

  @elements "xpath", "//div[div[@class='webgis-shoebox-item']]//div[contains(@class, 'item-icon')]", ({ value }) ->
    @assert.equal value.length, names.length

    names.map ({ title, type }, index) =>
        nameByTypeSelector = "(//div[div[@class='webgis-shoebox-item']]//div[contains(@class, 'item-icon')])[#{ index + 1 }]"
        nameByTitleSelector = "(//div[div[@class='webgis-shoebox-item']]//div[contains(@class, 'webgis-shoebox-label-text')])[#{ index + 1 }]"

        @assert.containsText nameByTitleSelector, title
        @assert.cssClassPresent nameByTypeSelector, type
this

Hope this helps anyone with a similar issue.