element() and elements() on section return different results

[lloiser]

Describe the bug

The result of element(...) or elements(...) calls in sections are wrapped in an additional "result" object.

For example the result of an element call inside a test:

client.element("css selector", ".btn-download", (result) => {
  console.log(">>> client.element result =", result);
});
// >>> client.element result = {
//   value: {
//     'element-6066-11e4-a52e-4f735466cecf': 'bcc3bd3b-e1ae-5443-9cb5-2e80eed4ded8'
//   }
// }

The result of an element call in a section:

this.api.element("css selector", ".btn-download", (result) => {
  console.log(">>> section.element result =", result);
});
// >>> section.element result = {
//   value: 'bcc3bd3b-e1ae-5443-9cb5-2e80eed4ded8',
//   status: 0,
//   result: {
//     value: {
//       'element-6066-11e4-a52e-4f735466cecf': 'bcc3bd3b-e1ae-5443-9cb5-2e80eed4ded8'
//     },
//     WebdriverElementId: 'bcc3bd3b-e1ae-5443-9cb5-2e80eed4ded8'
//   },
//   now: 1611266852585,
//   error: undefined
// }

Sample test

tests/elements.js

module.exports = {
  before(client) {
    this.homePage = client.page.home();
    this.homePage.navigate();
  },

  'element'(client) {
    client.element("css selector", ".btn-download", (result) => {
      console.log(">>> client.element result =", result);
    });
  },
  'elements'(client) {
    client.elements("css selector", ".btn", (result) => {
      console.log(">>> client.elements result =", result);
    });
  },

  'page element'(client) {
    this.homePage.theButton();
  },
  'page elements'(client) {
    this.homePage.allButtons();
  },

  'section element'(client) {
    this.homePage.section.body.theButton();
  },
  'section elements'(client) {
    this.homePage.section.body.allButtons();
  },

  after(client) {
    client.end();
  }
};

pages/home.js

module.exports = {
  url: '/',
  commands: [
    {
      theButton() {
        this.api.element("css selector", ".btn-download", (result) => {
          console.log(">>> page.element result =", result);
        });
      },
      allButtons() {
        this.api.elements("css selector", ".btn", (result) => {
          console.log(">>> page.elements result =", result);
        });
      }
    }
  ],

  elements: {},

  sections: {
    body: {
      selector: 'body',
      commands: [
        {
          theButton() {
            this.api.element("css selector", ".btn-download", (result) => {
              console.log(">>> section.element result =", result);
            });
          },
          allButtons() {
            this.api.elements("css selector", ".btn", (result) => {
              console.log(">>> section.elements result =", result);
            });
          }
        }
      ]

    }
  }
};

Run with command

$ nightwatch ./tests/elements.js

Verbose output

debug.log

 Starting GeckoDriver on port 4444...
 GeckoDriver up and running on port 4444 with pid: 76598 (129ms).

[Elements] Test Suite
=====================
⠋ Connecting to localhost on port 4444...
   Request POST  /session  
   {
     capabilities: {
       browserName: 'firefox',
       alwaysMatch: { acceptInsecureCerts: true },
       name: 'Elements'
     },
     desiredCapabilities: {
       browserName: 'firefox',
       alwaysMatch: { acceptInsecureCerts: true },
       name: 'Elements'
     }
⠋ Connecting to localhost on port 4444...
   Response 200 POST /session (3210ms)
   {
     value: {
       sessionId: 'f89df99d-8ff3-8d46-b31d-b63e5cd3c7b6',
       capabilities: {
         acceptInsecureCerts: true,
         browserName: 'firefox',
         browserVersion: '84.0.2',
         'moz:accessibilityChecks': false,
         'moz:buildID': '20210105180113',
         'moz:geckodriverVersion': '0.24.0',
         'moz:headless': false,
         'moz:processID': 76600,
         'moz:profile': '/var/folders/g2/hj8cnxyj3rq8260dwm6672k00000gn/T/rust_mozprofile.wEV94cBTRgOT',
         'moz:shutdownTimeout': 60000,
         'moz:useNonSpecCompliantPointerOrigin': false,
         'moz:webdriverClick': true,
         pageLoadStrategy: 'normal',
         platformName: 'mac',
         platformVersion: '20.2.0',
         rotatable: false,
         setWindowRect: true,
         strictFileInteractability: false,
         timeouts: { implicit: 0, pageLoad: 300000, script: 30000 },
         unhandledPromptBehavior: 'dismiss and notify'
       }
     }
ℹ Connected to localhost on port 4444 (3272ms).
  Using: firefox (84.0.2) on mac 20.2.0 platform.

 Received session with ID: f89df99d-8ff3-8d46-b31d-b63e5cd3c7b6

 → Running [before]:
 
 → Running command: url ('https://nightwatchjs.org/', )
   Request POST  /session/f89df99d-8ff3-8d46-b31d-b63e5cd3c7b6/url  
   { url: 'https://nightwatchjs.org/' }
   Response 200 POST /session/f89df99d-8ff3-8d46-b31d-b63e5cd3c7b6/url (2898ms)
   { value: null }
  → Completed command: url ('https://nightwatchjs.org/', ) (2900ms)
 → Completed [before].
Running:  element

 → Running [beforeEach]:
 → Completed [beforeEach].
 
 → Running command: element ('css selector', '.btn-download', [Function])
   Request POST  /session/f89df99d-8ff3-8d46-b31d-b63e5cd3c7b6/element  
   { using: 'css selector', value: '.btn-download' }
   Response 200 POST /session/f89df99d-8ff3-8d46-b31d-b63e5cd3c7b6/element (32ms)
   {
     value: {
       'element-6066-11e4-a52e-4f735466cecf': 'bcc3bd3b-e1ae-5443-9cb5-2e80eed4ded8'
     }
}
>>> client.element result = {
  value: {
    'element-6066-11e4-a52e-4f735466cecf': 'bcc3bd3b-e1ae-5443-9cb5-2e80eed4ded8'
  }
}
  → Completed command: element ('css selector', '.btn-download', [Function]) (33ms)
 → Running [afterEach]:
 → Completed [afterEach].
No assertions ran.

Running:  elements

 → Running [beforeEach]:
 → Completed [beforeEach].
 
 → Running command: elements ('css selector', '.btn', [Function])
   Request POST  /session/f89df99d-8ff3-8d46-b31d-b63e5cd3c7b6/elements  
   { using: 'css selector', value: '.btn' }
   Response 200 POST /session/f89df99d-8ff3-8d46-b31d-b63e5cd3c7b6/elements (13ms)
   {
     value: [
       {
         'element-6066-11e4-a52e-4f735466cecf': 'bcc3bd3b-e1ae-5443-9cb5-2e80eed4ded8'
       },
       {
         'element-6066-11e4-a52e-4f735466cecf': 'ed7dabaf-f29b-b24c-ad24-f60483e0ec61'
       },
       {
         'element-6066-11e4-a52e-4f735466cecf': '65fa3dd3-7475-d546-a326-eb7224c86d5c'
       },
       {
         'element-6066-11e4-a52e-4f735466cecf': '039d4004-14d9-ab47-9c9e-d8ecd294fc7d'
       },
       {
         'element-6066-11e4-a52e-4f735466cecf': '53474590-f43f-b04f-ac7d-f35809f61ff9'
       }
     ]
}
>>> client.elements result = {
  value: [
    {
      'element-6066-11e4-a52e-4f735466cecf': 'bcc3bd3b-e1ae-5443-9cb5-2e80eed4ded8'
    },
    {
      'element-6066-11e4-a52e-4f735466cecf': 'ed7dabaf-f29b-b24c-ad24-f60483e0ec61'
    },
    {
      'element-6066-11e4-a52e-4f735466cecf': '65fa3dd3-7475-d546-a326-eb7224c86d5c'
    },
    {
      'element-6066-11e4-a52e-4f735466cecf': '039d4004-14d9-ab47-9c9e-d8ecd294fc7d'
    },
    {
      'element-6066-11e4-a52e-4f735466cecf': '53474590-f43f-b04f-ac7d-f35809f61ff9'
    }
  ]
}
  → Completed command: elements ('css selector', '.btn', [Function]) (13ms)
 → Running [afterEach]:
 → Completed [afterEach].
No assertions ran.

Running:  page element

 → Running [beforeEach]:
 → Completed [beforeEach].
 
 → Running command: element ('css selector', '.btn-download', [Function])
   Request POST  /session/f89df99d-8ff3-8d46-b31d-b63e5cd3c7b6/element  
   { using: 'css selector', value: '.btn-download' }
   Response 200 POST /session/f89df99d-8ff3-8d46-b31d-b63e5cd3c7b6/element (20ms)
   {
     value: {
       'element-6066-11e4-a52e-4f735466cecf': 'bcc3bd3b-e1ae-5443-9cb5-2e80eed4ded8'
     }
}
>>> page.element result = {
  value: {
    'element-6066-11e4-a52e-4f735466cecf': 'bcc3bd3b-e1ae-5443-9cb5-2e80eed4ded8'
  }
}
  → Completed command: element ('css selector', '.btn-download', [Function]) (21ms)
 → Running [afterEach]:
 → Completed [afterEach].
No assertions ran.

Running:  page elements

 → Running [beforeEach]:
 → Completed [beforeEach].
 
 → Running command: elements ('css selector', '.btn', [Function])
   Request POST  /session/f89df99d-8ff3-8d46-b31d-b63e5cd3c7b6/elements  
   { using: 'css selector', value: '.btn' }
   Response 200 POST /session/f89df99d-8ff3-8d46-b31d-b63e5cd3c7b6/elements (15ms)
   {
     value: [
       {
         'element-6066-11e4-a52e-4f735466cecf': 'bcc3bd3b-e1ae-5443-9cb5-2e80eed4ded8'
       },
       {
         'element-6066-11e4-a52e-4f735466cecf': 'ed7dabaf-f29b-b24c-ad24-f60483e0ec61'
       },
       {
         'element-6066-11e4-a52e-4f735466cecf': '65fa3dd3-7475-d546-a326-eb7224c86d5c'
       },
       {
         'element-6066-11e4-a52e-4f735466cecf': '039d4004-14d9-ab47-9c9e-d8ecd294fc7d'
       },
       {
         'element-6066-11e4-a52e-4f735466cecf': '53474590-f43f-b04f-ac7d-f35809f61ff9'
       }
     ]
}
>>> page.elements result = {
  value: [
    {
      'element-6066-11e4-a52e-4f735466cecf': 'bcc3bd3b-e1ae-5443-9cb5-2e80eed4ded8'
    },
    {
      'element-6066-11e4-a52e-4f735466cecf': 'ed7dabaf-f29b-b24c-ad24-f60483e0ec61'
    },
    {
      'element-6066-11e4-a52e-4f735466cecf': '65fa3dd3-7475-d546-a326-eb7224c86d5c'
    },
    {
      'element-6066-11e4-a52e-4f735466cecf': '039d4004-14d9-ab47-9c9e-d8ecd294fc7d'
    },
    {
      'element-6066-11e4-a52e-4f735466cecf': '53474590-f43f-b04f-ac7d-f35809f61ff9'
    }
  ]
}
  → Completed command: elements ('css selector', '.btn', [Function]) (25ms)
 → Running [afterEach]:
 → Completed [afterEach].
No assertions ran.

Running:  section element

 → Running [beforeEach]:
 → Completed [beforeEach].
 
 → Running command: element ({name, __index, __selector, locateStrategy, pseudoSelector, parent, resolvedElement}, '.btn-download', [Function])
   Request POST  /session/f89df99d-8ff3-8d46-b31d-b63e5cd3c7b6/elements  
   { using: 'css selector', value: 'body' }
   Response 200 POST /session/f89df99d-8ff3-8d46-b31d-b63e5cd3c7b6/elements (11ms)
   {
     value: [
       {
         'element-6066-11e4-a52e-4f735466cecf': '915feedc-7689-4645-a015-969c4d7312a2'
       }
     ]
}
   Request POST  /session/f89df99d-8ff3-8d46-b31d-b63e5cd3c7b6/element/915feedc-7689-4645-a015-969c4d7312a2/element  
   { using: 'css selector', value: '.btn-download' }
   Response 200 POST /session/f89df99d-8ff3-8d46-b31d-b63e5cd3c7b6/element/915feedc-7689-4645-a015-969c4d7312a2/element (8ms)
   {
     value: {
       'element-6066-11e4-a52e-4f735466cecf': 'bcc3bd3b-e1ae-5443-9cb5-2e80eed4ded8'
     }
}
>>> section.element result = {
  value: 'bcc3bd3b-e1ae-5443-9cb5-2e80eed4ded8',
  status: 0,
  result: {
    value: {
      'element-6066-11e4-a52e-4f735466cecf': 'bcc3bd3b-e1ae-5443-9cb5-2e80eed4ded8'
    },
    WebdriverElementId: 'bcc3bd3b-e1ae-5443-9cb5-2e80eed4ded8'
  },
  now: 1611266852585,
  error: undefined
}
  → Completed command: element ({name, __index, __selector, locateStrategy, pseudoSelector, parent, resolvedElement}, '.btn-download', [Function]) (21ms)
 → Running [afterEach]:
 → Completed [afterEach].
No assertions ran.

Running:  section elements

 → Running [beforeEach]:
 → Completed [beforeEach].
 
 → Running command: elements ({name, __index, __selector, locateStrategy, pseudoSelector, parent, resolvedElement}, '.btn', [Function])
   Request POST  /session/f89df99d-8ff3-8d46-b31d-b63e5cd3c7b6/elements  
   { using: 'css selector', value: 'body' }
   Response 200 POST /session/f89df99d-8ff3-8d46-b31d-b63e5cd3c7b6/elements (7ms)
   {
     value: [
       {
         'element-6066-11e4-a52e-4f735466cecf': '915feedc-7689-4645-a015-969c4d7312a2'
       }
     ]
}
   Request POST  /session/f89df99d-8ff3-8d46-b31d-b63e5cd3c7b6/element/915feedc-7689-4645-a015-969c4d7312a2/elements  
   { using: 'css selector', value: '.btn' }
   Response 200 POST /session/f89df99d-8ff3-8d46-b31d-b63e5cd3c7b6/element/915feedc-7689-4645-a015-969c4d7312a2/elements (8ms)
   {
     value: [
       {
         'element-6066-11e4-a52e-4f735466cecf': 'bcc3bd3b-e1ae-5443-9cb5-2e80eed4ded8'
       },
       {
         'element-6066-11e4-a52e-4f735466cecf': 'ed7dabaf-f29b-b24c-ad24-f60483e0ec61'
       },
       {
         'element-6066-11e4-a52e-4f735466cecf': '65fa3dd3-7475-d546-a326-eb7224c86d5c'
       },
       {
         'element-6066-11e4-a52e-4f735466cecf': '039d4004-14d9-ab47-9c9e-d8ecd294fc7d'
       },
       {
         'element-6066-11e4-a52e-4f735466cecf': '53474590-f43f-b04f-ac7d-f35809f61ff9'
       }
     ]
}
   Warning: More than one element (5) found for element <.btn> with selector: ".btn". Only the first one will be used.
>>> section.elements result = {
  value: 'bcc3bd3b-e1ae-5443-9cb5-2e80eed4ded8',
  status: 0,
  result: {
    value: [ [Object], [Object], [Object], [Object], [Object] ],
    WebdriverElementId: 'bcc3bd3b-e1ae-5443-9cb5-2e80eed4ded8'
  },
  now: 1611266852603,
  error: undefined
}
  → Completed command: elements ({name, __index, __selector, locateStrategy, pseudoSelector, parent, resolvedElement}, '.btn', [Function]) (18ms)
 → Running [afterEach]:
 → Completed [afterEach].
No assertions ran.

 → Running [after]:
 
 → Running command: end ()
 
 → Running command: session ('delete', [Function])
   Request DELETE  /session/f89df99d-8ff3-8d46-b31d-b63e5cd3c7b6  
   Response 200 DELETE /session/f89df99d-8ff3-8d46-b31d-b63e5cd3c7b6 (669ms)
   { value: null }
  → Completed command: end () (671ms)
  → Completed command: session ('delete', [Function]) (670ms)
 → Completed [after].

OK. 6 tests passed (7.257s)

Configuration

nightwatch.conf.js

module.exports = {
  src_folders: ['test'],
  page_objects_path : 'lib/pages',
  custom_commands_path : 'lib/custom-commands',
  custom_assertions_path : 'lib/custom-assertions',

  webdriver: {
    start_process: true,
    port: 4444,
    server_path: 'node_modules/.bin/geckodriver',
    cli_args: [
      // Can be used for a faster startup of Firefox, which needs to be started using: firefox -marionette
      // '--connect-existing',
      // '--marionette-port=2828'
    ]
  },

  test_settings: {
    default: {
      desiredCapabilities : {
        browserName : 'firefox',
        alwaysMatch: {
          acceptInsecureCerts: true
        }
      },

      launch_url: 'https://nightwatchjs.org',

      globals: {
        // NIGHTWATCH_VERSION is defined as an environment variable (.env files are supported also)
        nightwatchVersion: '${NIGHTWATCH_VERSION}'
      }
    }
  }
};

Your Environment

Executable	Version
nightwatch --version	1.5.1
npm --version	6.14.8
node --version	v12.20.0

Browser driver	Version
geckodriver	1.16.2
chromedriver	84

OS	Version
macOS Bug Sur	11.1

[lloiser]

In an attempt to fix this I looked through the code and found this test:

nightwatch/test/src/element/testPageObjectElementSelectors.js

Lines 116 to 140 in fbd021e

	it('page section custom commands', function(done) {
	nocks
	.elementsFound('#signupSection')
	.elementsId('0', '#helpBtn', [{ELEMENT: '4'}])
	.elementId('0', '#helpBtn');
	const page = Nightwatch.api().page.simplePageObj();
	const section = page.section.signUp;
	section.sectionElement(function(result) {
	assert.strictEqual(result.status, 0);
	assert.strictEqual(result.value, '0');
	assert.deepStrictEqual(result.result.value, { ELEMENT: '0' });
	assert.strictEqual(result.result.WebdriverElementId, '0');
	});
	section.sectionElements(function(result) {
	assert.strictEqual(result.status, 0);
	assert.strictEqual(result.value, '4');
	assert.deepStrictEqual(result.result.value, [{ELEMENT: '4'}]);
	assert.strictEqual(result.result.WebdriverElementId, '4');
	});
	Nightwatch.start(done);
	});

Looking at line 128 and 135 it seems that this is actually desired.

Sry but I don't understand why the result of elements() calls in sections have to be different to calls in test files or page objects?

[beatfactor]

Well, in the first case, the response of the .element() command is unprocessed whereas in the second case, it is processed because the command has context.

[lloiser]

Thanks for the answer but it is not really satisfying...

I still think that the difference in the "result" objects is very much unexpected...

Btw this was not the case with 1.2.4. (which I'm currently trying to upgrade from, unfortunately the products test base is large and therefore upgrading got a lot harder...)