What is the best way to generate JavaScript test objects for website automation

A bit of background: The team wrote QUNIT UI tests And browser automation tests using C #. I would like to create a JSON object that can be shared between them. Thus, if the class name is changed, the configuration file will need to be updated only in one place.

The site is very dynamic using templates, so these test object configuration files must be created at runtime, they cannot just parse static html.

I could generate a data structure or write a tool that will help me grab identifiers / classes and then modify the generated data structure. I would prefer not to pass its code, because the site that my team is testing contains hundreds of controls.

Tests will use these test objects to simplify maintenance, as the site is under a large outflow and our current tests break daily. After all tests refer to the same test object, only a correction of the configuration of the objects will be required.

I'm currently thinking of creating a JavaScript function that accepts a selector and generates all the properties for this element and its children. During work, I could call a function that passes the control that I want to clear, cut, and paste the output for later use. Is there a better way to generate these objects?

Illustration:

Navigation bar with children A, B, C. You can select.

<div id="nav-bar">
    <div class="a selected">A</div>
    <div class="b">B</div>
    <div class="c">C</div>
</div>

I would like to create the following code (jQuery style selectors):

var nav_bar = {
    selector: "#nav-bar",
    children: {
        a: { selector: ".a" },
        b: { selector: ".b" },
        c: { selector: ".c" },
    }
}

Then I could add some special properties manually, like selectedItem:

var nav_bar = {
    selector: "#nav-bar",
    children: {
        a: { selector: ".a" },
        b: { selector: ".b" },
        c: { selector: ".c" },
        selectedItem: { selector: ".selected" }
    }
}

With this, I was able to parse the nav_bar object to create a useful test object:

var nav = createTestObject(nav_bar);
// var nav = {a: $(".a", "#nav-bar"), b: $(".b", "#nav-bar"), selectedItem: function() { return $(".selected", "#nav-bar"); }}
// Can automate a simple test at this point...could use some more helper functions
// Click b if not already selected
if(nav.b[0] != nav.selectedItem()[0])
{
   nav.b.click(); // assumes clicking causes selected class to change
}

If the ".selected" class changes, I don’t need to search and replace all the test code, just update one configuration file for selectedItem.selector.

Thanks in advance, Joe