htmlCapture Nightwatch command

[chrisjcook]

Status: Opened for visibility

Reviewers: @mobify-derrick @twangtina @ellenmobify @jgermyn @gsaray

To Test:

1. Create a branch off of any Adaptive project and change the "nightwatch-commands" line in the pacakge.json file to:

   "nightwatch-commands": "git://github.com/mobify/nightwatch-commands.git#nightwatch-commands-htmlcapture"

2. Run "npm install" to get the new dependencies
3. In your "nightwatch.json" file, add a new "test_settings" entry for "desktop". This should be the same as your default, but with no "--user-agent" or "--window-size" entries.
4. You can now use the htmlCapture command in any Nightwatch test. Here is an absolute bare-bones test using the command:

module.exports = {
    'home.html Fixture': function(browser) {
        browser
            .get("http://www.carnival.com")
            .htmlCapture('home.html')
        .end();
    }
};

The command will grab and save the HTML of whatever page Nightwatch is currently testing against. It will save the file as whatever you specify in '.htmlCapture("namehere.html")' to the "tests/fixtures/" folder for future integration tests. So for pages that need a workflow to get to, either put the htmlCapture command after the navigation workflow or create a separate, dedicated test with the same workflow (recommended).

Since you'll be creating a separate test to pull HTML fixtures from each page (and therefore each Nightwatch file), it's going to be more manageable to have all of these tests in one place. Also, since we want to be capturing desktop HTML source, we need to use htmlCapture independently of any mobile tests. Currently, I've created a new folder in tests/system/ called "htmlfixtures", which contains two files, "static.js" and "workflow.js". The "static.js" contains pages that are accessible by previewing or navigating to directly, whereas "workflow.js" contains pages like Checkout and Account that need a workflow to get to. Here's what that file structure looks like:

Remember: Make sure to include your "desktop" environment setting in your nightwatch command. IE:

grunt nightwatch -test "tests/system/htmlcapture/static.js" -e "desktop"

[ellenmobify]

There's an issue where .source grabs the page source before the page is completely loaded - specifically for dynamic content. Possible ways to get around this would be to put the capture command after checking for the existence of dynamically loaded content, hardcoding pauses, checking for active ajax requests.

[ellenmobify]

:+1: Works as expected with the desktop environment.