How .elements() works in nightwatch?

Question

Considering I have multiple trs I want to pick one and edit value in it by clicking edit button bounded to it.

I'm doing something like this:

browser.elements('css selector', '#someId  tr', elements => {
  elements.value.forEach(val => {
    console.log(val)
  }

And I get something like this:

{
  'abcd-1234-qwer-0987': 'some id'
},
{
  'abcd-1234-qwer-0987': 'some other id'
}

1. What is exactly 'abcd-1234-qwer-0987', is this session id kind of stuff and does it change?
2. What is the best way to grab particular element? Because as I guess my approach is wrong: elements.value[1]['abcd-1234-qwer-0987']

Answer 1

When I run browser.elements and log the entries in the elements.value array, I get something like { ELEMENT: '5' }. So, to answer your questions:

1. What is exactly 'abcd-1234-qwer-0987', is this session id kind of stuff and does it change?

Probably some sort of session ID, but I'm not sure. Whatever it is, you don't need it for what you're doing.

2. What is the best way to grab particular element?

If I'm trying to select one out of several similar elements, my code ends up looking something like this:

browser.elements('css selector', '#someId', result => {
  // index is defined somewhere else
  browser.elementIdClick(result.value[index].ELEMENT, () => {
    // whatever you want to do after you click the element.
  });
});

If this doesn't work for you, can you share what OS and browser you are running on, as well as your nightwatch configuration file?

Answer 2

All of the documentation I've found around what you're trying to do says I should be able to use obj.ELEMENT but what they don't say is that it requires setting w3c to false in your nightwatch config.

Example with context:

  test_settings: {
    default: {
      end_session_on_fail: false,
      disable_error_log: false,
      launch_url: 'http://localhost:3000',

      desiredCapabilities : {
        browserName : 'chrome',
        'goog:chromeOptions' : {
          // More info on Chromedriver: https://sites.google.com/a/chromium.org/chromedriver/
          //
          // w3c:false tells Chromedriver to run using the legacy JSONWire protocol (not required in Chrome 78)
          w3c: true,
          args: [
            '--auto-open-devtools-for-tabs',
            //'--no-sandbox',
. . .

Here is an example of how I use it:

    .elements('css selector', `${targetNodeSelector} #nodeCard`, nodeContents => {
      console.log(nodeContents.value)
      nodeContents.value.forEach(nodeContent => {
        console.log(nodeContent.ELEMENT)
        // browser.elementIdText(nodeContent.ELEMENT, function (result) {
        //   console.log('\n' + result.value)
        // })
      })
    })

This will display the correct keys/values:

[
  { ELEMENT: '0.944080972569816-108' },
  { ELEMENT: '0.944080972569816-109' },
  { ELEMENT: '0.944080972569816-110' },