Home » Javascript » Why do these javascript objects look so different when stringified?

Why do these javascript objects look so different when stringified?

Posted by: admin August 19, 2018 Leave a comment

Questions:

I ran the same protractor test on two websites (the demo-page and the one I’m trying to write the test for). I wanted to examine one field of each page, demoField and realField. constructor.name told me both have the type ElementFinder.
I looked at the attributes and used json-stringify-safe to look inside the objects. They looked vastly different: demoField looked like this

Attributes:
browser_
then
parentElementArrayFinder
elementArrayFinder_
click
sendKeys
getTagName
getCssValue
getAttribute
getText
getSize
getLocation
isEnabled
isSelected
submit
clear
isDisplayed
getId
takeScreenshot

Stringify(demoField): (made with element(by.model('demo'))):
{ browser_: 
   { driver: 
      { flow_: [Object],
        session_: [Object],
        executor_: [Object],
        fileDetector_: null },
     baseUrl: '',
     getPageTimeout: 10000,
     params: {},
     resetUrl: 'data:text/html,<html></html>',
     debugHelper: { browserUnderDebug_: '[Circular ~.browser_]' },

and so on (about 100 lines), but realField looked like this:

Attributes:
driver_
id_
cancel
then
catch
getId


 Stringify(realField): (made with element(by.model('real'))):
{
  browser_: {
    controlFlow: function () {
        const args = arguments;
        for (let i = 0; i < args.length; i++) {
            if (args[i] instanceof element_1.ElementFinder) {
                args[i] = args[i].getWebElement();
            }
        }
        const run = () => {
            return from[fnName].apply(from, args);
        };
        if (setupFn) {
            const setupResult = setupFn();
            if (setupResult && (typeof setupResult.then === 'function')) {
                return setupResult.then(run);
            }
        }
        return run();
    },
    schedule: function () {
        const args = arguments;
        for (let i = 0; i < args.length; i++) {
            if (args[i] instanceof element_1.ElementFinder) {
                args[i] = args[i].getWebElement();
            }
        }
        const run = () => {
            return from[fnName].apply(from, args);
        };

and so on (about 6000 lines, mostly repeated blocks).

Can you explain the difference?
I guess the objects are different subtypes of ElementFinder. If so, how can I find out which ones?

Answers: