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

Bit of background:
The team is writing QUnit UI tests AND browser automation tests using C#. I would like to create a JSON object that can be shared between the two. That way if a class name gets changed, the config file will only need to be updated in one place.

The site is very dynamic using templating so these test object config files must be created at run time, can’t just parse static html.

  • In Rails, how do you functional test a Javascript response format?
  • How do I can get a text of all the cells of the table using testcafe
  • JavaScript In-Browser Functional Testing
  • How to check if “should has text” in Jasmine?
  • What happened to GremCheck? Is there a viable replacement?
  • What testing does Selenium cover over and above Karma?
  • I could hand generate the data structure or write a tool to help me capture the ids/classes and then modify the generated data structure. I’d prefer to not hand code it as the site my team is testing has hundreds of controls.

    The tests would leverage these test objects to make maintenance easier as the site is under a lot of churn and our current tests break daily. Once all the tests reference the same test object, it would only require fixing that objects config.

    Currently I am thinking of creating a JavaScript function that takes a selector and generates all the properties for that element and its children. I could at run time call the function passing the control I want to scrape, cut and paste the output for later use. Is there a better way to generate these objects?

    Illustration:

    Nav bar with children A, B, C. One can be selected.

    <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" },
        }
    }
    

    I could then add some special properties by hand like selectedItem:

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

    With that I could 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 class “.selected” changes, I don’t have to search and replace throughout the test code, just update the one config file for selectedItem.selector.

    Thanks in advance,
    Joe

  • How to check if an element is not clickable with Protractor?
  • Custom Linear Congruential Generator in Javascript
  • JavaScript In-Browser Functional Testing
  • Nightwatch js how to assert multiple elements
  • What testing does Selenium cover over and above Karma?
  • What happened to GremCheck? Is there a viable replacement?
  • One Solution collect form web for “What is the best way to generate JavaScript test objects for website automation”

    I don’t understand what you are trying achieve by generating test objects. Once you do nav.b.click() do you want to test that b is now the selected class?

    You should look into using PhantomJS or testing with Zombie.js.