Problem with Cordova Demo Application

4 posts, 0 answers
  1. hasantha
    hasantha avatar
    9 posts
    Member since:
    Jun 2014

    Posted 15 Sep 2014 Link to this post

    Tthe cordova demo application has only one html file(index.html)
    the only test step that we can run against this demo application is,

    step("launch demo application");

    since there is only one html file in this cordova demo application, all other test steps that are in the spec file will obiviously failed if run.

    The question is where are those other html files?
  2. Martin
    Admin
    Martin avatar
    811 posts

    Posted 15 Sep 2014 Link to this post

    Hello Hasantha,

    Indeed the app contains only one page, but this page has many different controls. You can load the html file in any browser to see all the controls. The tests test the controls and not the page. So if you run them they should pass.

    Regards,
    Martin
    Telerik
     
    Test your Android and iOS apps against any device or browser with Telerik Mobile Testing. Part of the Telerik Platform.
     
  3. hasantha
    hasantha avatar
    9 posts
    Member since:
    Jun 2014

    Posted 16 Sep 2014 in reply to Martin Link to this post

    The index.html files is located in the following path of desktop

    Desktop\Telerik Mobile Testing Version 2.0.0.2\TelerikMobileTesting\Telerik Mobile Testing\samples\Cordova\DemoApplication\dimo\platforms\android\assets\www\index.html

    The 'dimo' is the directory name i specified to be generated by Cordova-CLI for the demo project. 

    And i have pasted the contents of that index.html file below for your reference


    <!DOCTYPE html>
    <!--
        Licensed to the Apache Software Foundation (ASF) under one
        or more contributor license agreements.  See the NOTICE file
        distributed with this work for additional information
        regarding copyright ownership.  The ASF licenses this file
        to you under the Apache License, Version 2.0 (the
        "License"); you may not use this file except in compliance
        with the License.  You may obtain a copy of the License at

        http://www.apache.org/licenses/LICENSE-2.0

        Unless required by applicable law or agreed to in writing,
        software distributed under the License is distributed on an
        "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
         KIND, either express or implied.  See the License for the
        specific language governing permissions and limitations
        under the License.
    -->
    <html>
        <head>
            <meta charset="utf-8" />
            <meta name="format-detection" content="telephone=no" />
            <!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
            <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
            <link rel="stylesheet" type="text/css" href="css/index.css" />
            <meta name="msapplication-tap-highlight" content="no" />
            <title>Hello World</title>
        </head>
        <body>
            <div class="app">
                <h1>Apache Cordova</h1>
                <div id="deviceready" class="blink">
                    <p class="event listening">Connecting to Device</p>
                    <p class="event received">Device is Ready</p>
                </div>
            </div>
            <script type="text/javascript" src="cordova.js"></script>
            <script type="text/javascript" src="js/index.js"></script>
            <script type="text/javascript">
                app.initialize();
            </script>
        </body>
    </html>



    And the contents of Test Spec file for this 'Demo Application'  are also pasted below.


    spec(function(){
    // queries for this suite, structured in a way
    // that makes sense for this web page
    var queries = {
    tacoBuilder: {
    tortilla: {className: "tortillaRadios"},
    filling: {name: "filling"},
    toppings: {name: "toppings"},
    comments: {name: "comments"},
    giftwrap: {name: "giftwrap"},
    subTotal: {className: "subtotal"}
    },
    contactInfo: {
    name: {name: "name"},
    phone: {name: "phone"},
    email: {name: "email"},
    newsletter: {name: "newsletterSubscribe"}
    },
    billingAddress: {
    address: {name: "address"},
    address2: {name: "address2"},
    city: {name: "city"},
    state: {name: "state"},
    zip: {name: "zip"}
    },
    billingInfo: {
    cardType: {className: "cardType"},
    cardNum: {name: "cardNum"},
    expiryMonth: {name: "expiryMonth"},
    expiryYear: {name: "expiryYear"},
    submit: {id: "submit"}
    }
    };

    // vars used by various steps
    var toppingsArr = ["avocado", "grilledOnion", "cilantro"],
    cornTortillaRadio = [queries.tacoBuilder.tortilla, {tagName: "input", index: 0}],
    flourTortillaRadio = [queries.tacoBuilder.tortilla, {tagName: "input", index: 1}],
    cheddaCard = [queries.billingInfo.cardType, {tagName: "input", index: 2}],
    ERROR_TEXT = "There were some problems with your order. Please correct them and submit again.",
    SUCCESS_TEXT = "Thank you for your order! A download link for your piping hot tacos will be emailed to you as soon as they're ready!";

    // define all steps here so they can be reused, and so that
    // the tests read in plain language
    var stepRepository = {
    "launch demo application": {
    'ios': [
    ios.launch('defaultAppURL://')
    ],
    'android': [
    android.launch('io.cordova.hellocordova')
    ],
    'wp8': [
    wp8.launch('defaultappurl'),
    ]
    },
    "select flour tortilla": {
    'default': [
    web.setChecked(flourTortillaRadio, true),
    web.getChecked(flourTortillaRadio, function(res){
    assert(res).equals(true);
    })
    ]
    },
    "tap corn tortilla": {
    'default': [
    web.tap(cornTortillaRadio),
    web.getChecked(cornTortillaRadio, function(res){
    assert(res).equals(true);
    })
    ]
    },
    "select fajita filling": {
    'default': [
    web.setSelectedValue(queries.tacoBuilder.filling, "fajita"),
    web.getSelectedValue(queries.tacoBuilder.filling, function(res){
    assert(res).equals("fajita");
    })
    ]
    },
    "hide tortillas": {
    'default': [
    web.setStyle(queries.tacoBuilder.tortilla, 'display', 'none'),
    web.getStyle(queries.tacoBuilder.tortilla, 'display', function(res) {
    assert(res).equals('none');
    })]
    },
    "show tortillas": {
    'default': [
    web.setStyle(queries.tacoBuilder.tortilla, 'display', 'block'),
    web.getStyle(queries.tacoBuilder.tortilla, 'display', function(res) {
    assert(res).equals('block');
    })]
    },
    "select avocado, grilled onion, and cilantro toppings": {
    'default': [
    web.setSelectedValue(queries.tacoBuilder.toppings, toppingsArr),
    web.getSelectedValue(queries.tacoBuilder.toppings, function(res){
    assert(res).equals(toppingsArr);
    })
    ]
    },
    "leave a comment": {
    'default': [
    web.setValue(queries.tacoBuilder.comments, "BAM!"),
    web.getValue(queries.tacoBuilder.comments, function(res){
    assert(res).equals("BAM!");
    })
    ]
    },
    "check 'gift wrapping' checkbox": {
    'default': [
    web.setChecked(queries.tacoBuilder.giftwrap, true),
    web.getChecked(queries.tacoBuilder.giftwrap, function(res){
    assert(res).equals(true);
    })
    ]
    },
    "ensure subtotal is $12.75": {
    'default': [
    web.getTextContent(queries.tacoBuilder.subTotal, function(res){
    assert(res).equals("12.75");
    })
    ]
    },

    "enter name input": {
    'default': [
    web.setValue(queries.contactInfo.name, "John Doe"),
    web.getValue(queries.contactInfo.name, function(res){
    assert(res).equals("John Doe");
    })
    ]
    },
    "enter phone input": {
    'default': [
    web.setValue(queries.contactInfo.phone, "1234567890"),
    web.getValue(queries.contactInfo.phone, function(res){
    assert(res).equals("1234567890");
    })
    ]
    },
    "enter email input": {
    'default': [
    web.setValue(queries.contactInfo.email, "johndoe@telerik.com"),
    web.getValue(queries.contactInfo.email, function(res){
    assert(res).equals("johndoe@telerik.com");
    })
    ]
    },
    "uncheck 'newsletter' checkbox": {
    'default': [
    web.setChecked(queries.contactInfo.newsletter, false),
    web.getChecked(queries.contactInfo.newsletter, function(res){
    assert(res).equals(false);
    })
    ]
    },

    "enter address": {
    'default': [
    web.setValue(queries.billingAddress.address, "1234 Something Street"),
    web.getValue(queries.billingAddress.address, function(res){
    assert(res).equals("1234 Something Street");
    })
    ]
    },
    "enter address cont.": {
    'default': [
    web.setValue(queries.billingAddress.address2, "apt. #9"),
    web.getValue(queries.billingAddress.address2, function(res){
    assert(res).equals("apt. #9");
    })
    ]
    },
    "enter city": {
    'default': [
    web.setValue(queries.billingAddress.city, "Austin"),
    web.getValue(queries.billingAddress.city, function(res){
    assert(res).equals("Austin");
    })
    ]
    },
    "select state": {
    'default': [
    web.setSelectedValue(queries.billingAddress.state, "TX"),
    web.getSelectedValue(queries.billingAddress.state, function(res){
    assert(res).equals("TX");
    })
    ]
    },
    "enter zip": {
    'default': [
    web.setValue(queries.billingAddress.zip, "78741"),
    web.getValue(queries.billingAddress.zip, function(res){
    assert(res).equals("78741");
    })
    ]
    },

    "set credit card radio": {
    'default': [
    web.setChecked(cheddaCard, true),
    web.getChecked(cheddaCard, function(res){
    assert(res).equals(true);
    })
    ]
    },
    "enter card number": {
    'default': [
    web.setValue(queries.billingInfo.cardNum, "1234-5678-9101-1121"),
    web.getValue(queries.billingInfo.cardNum, function(res){
    assert(res).equals("1234-5678-9101-1121");
    })
    ]
    },
    "select expiration month": {
    'default': [
    web.setSelectedValue(queries.billingInfo.expiryMonth, "03"),
    web.getSelectedValue(queries.billingInfo.expiryMonth, function(res){
    assert(res).equals("03");
    })
    ]
    },
    "select expiration year": {
    'default': [
    web.setSelectedValue(queries.billingInfo.expiryYear, "2016"),
    web.getSelectedValue(queries.billingInfo.expiryYear, function(res){
    assert(res).equals("2016");
    })
    ]
    },

    "clear card number field": {
    'default': [
    web.setValue(queries.billingInfo.cardNum, "")
    ]
    },
    "trigger validation error": {
    'default': [
    web.dialogs.prepare(web.dialogs.ALERT),
    web.click(queries.billingInfo.submit),
    web.dialogs.getState(function(state){
    assert(state[web.dialogs.ALERT].length).greaterThan(0);

    // grab the last alert dialog
    var dialog = state[web.dialogs.ALERT][state[web.dialogs.ALERT].length-1];

    assert(dialog.handled).equals(true);
    assert(dialog.actualText).equals(ERROR_TEXT);
    })
    ]
    },
    "fill card number field": {
    'default': [
    web.setValue(queries.billingInfo.cardNum, "1234-5678-9101-1121"),
    web.wait(100)
    ]
    },
    "submit form": {
    'default': [
    web.dialogs.prepare(web.dialogs.ALERT),
    web.click(queries.billingInfo.submit),
    web.dialogs.getState(function(state){

    assert(state[web.dialogs.ALERT].length).greaterThan(0);

    // grab the last alert dialog
    var dialog = state[web.dialogs.ALERT][state[web.dialogs.ALERT].length-1];

    assert(dialog.handled).equals(true);
    assert(dialog.actualText).equals(ERROR_TEXT);
    })
    ]
    }
    };


    // This suite represents a typical test suite
    // note that the steps are defined using a step definitions
    // object instead of being defined inline.

    describe("Taco form entry", function(){

    test("Build a taco", function(){
    step("launch demo application");
    step("select flour tortilla");
    step("tap corn tortilla");
    step("select fajita filling");
    step("select avocado, grilled onion, and cilantro toppings");
    step("leave a comment");
    step("check 'gift wrapping' checkbox");
    step("ensure subtotal is $12.75");
    });

    test("Test CSS get and set", function(){
    step("launch demo application");
    step("hide tortillas");
    step("show tortillas");
    });

    test("Enter contact info", function(){
    step("launch demo application");
    step("enter name input");
    step("enter phone input");
    step("enter email input");
    step("uncheck 'newsletter' checkbox");
    });

    test("Enter billing address info", function(){
    step("launch demo application");
    step("enter address");
    step("enter address cont.");
    step("enter city");
    step("select state");
    step("enter zip");
    });

    test("Enter billing info", function(){
    step("launch demo application");
    step("set credit card radio");
    step("enter card number");
    step("select expiration month");
    step("select expiration year");
    });

    test("Ensure invalid form does not submit", function(){
    step("launch demo application");
    step("clear card number field");
    step("trigger validation error");
    step("fill card number field");
    step("submit form");
    });

    }, stepRepository);
    });


    So, as you can see, except the following step,

    step("launch demo application")

    all other steps in this spec will obiviously failed 
    since they are testing controls which are not in the 
    index.html file.
  4. Martin
    Admin
    Martin avatar
    811 posts

    Posted 17 Sep 2014 Link to this post

    Hello Hasantha,

    Please note that the Hybrid demo app that comes with the installation is already created with the Cordova-CLI. That is why you should NOT create it once again. All you have to do, is to add the specific platform (iOS, Android, WP), and build it. With other words, you have to start from the Add Platforms paragraph in the Cordova-CLI manual

    You don't find the controls that the tests target because you are opening the wrong index.html. Using your file structure, the controls should be found in "Desktop\Telerik Mobile Testing Version 2.0.0.2\TelerikMobileTesting\Telerik Mobile Testing\samples\Cordova\DemoApplication\www\index.html. When Cordova-CLI adds a new platform (iOS, Android etc.), this page is copied to the specific platform folder and it is then launched when the execution starts.

    The problem with your setup is that you create a new Cordova project, which by default creates a blank index.html page. Once again, you should NOT create a new Cordova project, but use the one located at the path I specified above.

    Regards,
    Martin
    Telerik
     
    Test your Android and iOS apps against any device or browser with Telerik Mobile Testing. Part of the Telerik Platform.
     
Back to Top