Basic iframe interactions

iframeexample.html

http://www.littlewebhut.com/articles/html_iframe_example/

spec.js

it('iframe test', function (done) {
    var driver = ST.defaultContext.driver;

    // switch the "context" to the iframe (where iframe.id = "imgbox")
    driver.frame('imgbox');

    ST  
        .element('img') // we're in the iframe context, so get element
        .get('src') // get 'src' attribute
        .and(function (future) {
            // first expectation, should have default image
            expect(future.data.src).toBe('http://www.littlewebhut.com/images/eightball.gif');
        })
        .and(function (future) {
            // switch context back to full page (iframe parent)
            driver.frame(null).then(function () {
                // find the correct link element
                ST.element('.wholecontent .article a[href="\/images\/redball.gif"]')
                    .click() // click it to change iframe image content
                    .and(function () {
                        // once more, switch to iframe context
                        driver.frame('imgbox').then(function () {
                            // and finally, assert the same value
                            ST  
                                .element('img')
                                .get('src')
                                .and(function (future) {
                                    expect(future.data.src).toBe('http://www.littlewebhut.com/images/redball.gif');
                                    done();
                                });
                        });
                    });
            });
        });
});

specwithpageobject

it('iframe test', function (done) {
    var driver = ST.defaultContext.driver;
            
    var IH = {
        iframe: function () {
            return driver.frame('imgbox');
        },
        defaultFrame: function () {
            return driver.frame(null);
        },
        img: function () {
            return ST.element('img');
        },
        clickLink: function () {
            return ST.element('.wholecontent .article a[href="\/images\/redball.gif"]').click();
        },
        assert: function (value) {
            return IH.img().get('src').and(function (future) {
                expect(future.data.src).toBe(value);
            });
        }
    };    
    // switch the "context" to the iframe (where iframe.id = "imgbox")
    IH.iframe();
    IH  
        // assert the initial image value
        .assert('http://www.littlewebhut.com/images/eightball.gif')
        .and(function (future) {
            // switch to default frame context    
            IH.defaultFrame().then(function () {
                // click the link
                IH.clickLink().and(function () {
                    // switch back to iframe context
                    IH.iframe().then(function () {
                        // assert the image value
                        IH
                            .assert('http://www.littlewebhut.com/images/redball.gif')
                            .and(function () {
                                done();
                            });
                    });
                });
            });
        });
});