This is a migrated thread and some comments may be shown as answers.

Problem with Cordova Demo Application

3 Answers 69 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
hasantha
Top achievements
Rank 1
hasantha asked on 15 Sep 2014, 11:30 AM
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?

3 Answers, 1 is accepted

Sort by
0
Martin
Telerik team
answered on 15 Sep 2014, 03:50 PM
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.
 
0
hasantha
Top achievements
Rank 1
answered on 17 Sep 2014, 04:00 AM
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.
0
Martin
Telerik team
answered on 17 Sep 2014, 06:39 AM
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.
 
Tags
General Discussions
Asked by
hasantha
Top achievements
Rank 1
Answers by
Martin
Telerik team
hasantha
Top achievements
Rank 1
Share this question
or