Web code samples

Web example

The following example shows

  • how to log into a flight booking website and perform various selections on the site and retrieve data
  • how to verify that sign-in is available and use VRI to locate objects
  • how to get all the images ALT attributes
var assert = require("assert");
var LFT = require("leanft");
var expect = require("leanft/expect");
var fs = require("fs");
var Web = LFT.Web;
var ImageUtils = LFT.ImageUtils;
var browser;

jasmine.DEFAULT_TIMEOUT_INTERVAL = 120000;

// Browser name can be defined using the LFT_Browser env var, default is Chrome
var browserName = process.env.LFT_BROWSER || "Chrome";

describe("Web examples", function(){
	beforeAll(function(done){
		LFT.init();
		LFT.whenDone(done);
	});

	beforeEach(function(done){
		LFT.beforeTest();

		Web.Browser.launch(Web.BrowserType[browserName]).then(function(launched_browser){
			browser = launched_browser;
		});

		LFT.whenDone(done);
	});

	it("should show basic usage - navigate a web browser to a web site", function(done){
		browser.navigate("http://newtours.demoaut.com/");
		var linkObject = browser.$(Web.Link({
			tagName: "A",
			innerText: "Business Travel @ About.com"
		}));
		linkObject.click();
		browser.sync();
		var url = browser.url();
		expect(url).toBe("http://businesstravel.about.com/mbody.htm?PM=78_101_T&cob=home");

		LFT.whenDone(done);
	});

	it("should validate the status of edit fields for logon credentials after inserting the credentials at least once, verifying the edit fields are not read only.", function(done){
		browser.navigate("http://newtours.demoaut.com/");
		var userName = browser.$(Web.Edit({
			name: "userName"
		}));
		var password = browser.$(Web.Edit({
			type: "password",
			name: "password"
		}));
		userName.setValue("mercury");
		password.setSecure("58342efbe007334a77f89130e84b8cde57631c9f");
		var image = browser.$(Web.Image({
			alt: "Sign-In",
			type: "button",
			tagName: "INPUT"
		}));
		image.click();

		var logOff = browser.$(Web.Link({
			innerText: "SIGN-OFF"
		}));
		logOff.click();
		expect(userName.isReadOnly()).toBeFalsy();
		expect(password.isReadOnly()).toBeFalsey();

		LFT.whenDone(done);
	});

	it("should find the date label using XPath and verify the date. ", function(done){
		var today = new Date().toLocaleDateString('en-US', {day: 'numeric', month: 'short', year: 'numeric'});
		browser.navigate("http://newtours.demoaut.com/");
		var dateLabel = browser.$(Web.Element({
			xpath: "/html/body/div/table/tbody/tr/td[2]/table/tbody/tr[4]/td/table/tbody/tr/td[2]/table/tbody/tr[2]/td[3]/form/table/tbody/tr[1]/td/font/b"
		}));
		expect(dateLabel.innerText()).toEqual(today);

		LFT.whenDone(done);
	});

	it("should print flight price for each flight in the Specials table. ", function(done){
		browser.navigate("http://newtours.demoaut.com/");
		var specialOffers = browser.$(Web.Table({
			tagName: "TABLE",
			index: 9
		}));
		specialOffers.cells().then(function(cells){
			var numberOfRows = cells.length;
			console.log("number of rows:" + numberOfRows);
			for (var i = 0; i < numberOfRows; i++){
				specialOffers.cells(i, 1).text().then(function(cellText){
					console.log("cellText: " + cellText);
					var cellTextString = "" + cellText;
					console.log("char at 0: " + cellTextString.charAt(0));
				});
			}
			console.log("Finished going over rows and cells");
		});

		LFT.whenDone(done);
	});

	it("should show how to retrieve the cities from the departure cities listbox.  ", function(done){
		browser.navigate("http://newtours.demoaut.com/");
		var userName = browser.$(Web.Edit({
			name: "userName"
		}));
		var password = browser.$(Web.Edit({
			type: "password",
			name: "password"
		}));

		userName.setValue("mercury");
		password.setSecure("58342efbe007334a77f89130e84b8cde57631c9f");
		var image = browser.$(Web.Image({
			alt: "Sign-In",
			type: "button",
			tagName: "INPUT"
		}));
		image.click();

		// Retrieve a list of departure cities.
		var departuresCombo = browser.$(Web.ListBox({
			tagName: "SELECT",
			name: "fromPort"
		}));
		departuresCombo.items().then(function(cities){
			var numberOfCities = cities.length;
			console.log("number of cities: " + numberOfCities);
			for (var i = 0; i < numberOfCities; i++){
				console.log("City #" + i + ": " + cities[i]);
			}
			expect(cities[0]).toBe("Acapulco");
		});

		LFT.whenDone(done);
	});

	it("should verify sign-in is available and use VRI to locate objects", function(done){
		browser.navigate("http://newtours.demoaut.com/");
		browser.sync();
		var userNameLabel = browser.$(Web.Element({
			tagName: "TD",
			innerText: "User Name:"
		}));

		var passwordLabel = browser.$(Web.Element({
			tagName: "TD",
			innerText: "Password:"
		}));

		browser.$(Web.Edit({
			vri: [{anchor: userNameLabel, horizontal: 
			LFT.Horizontal.left, hInline: true}]
		}
		)).setValue("mercury");

		browser.$(Web.Edit({
			vri: [{anchor: passwordLabel, horizontal: 
			LFT.Horizontal.left, hInline: true}]
			}
		)).setSecure("55940fd62c96a30a62b4ab4d3db57c430de69cde");

		var image = browser.$(Web.Image({
			alt: "Sign-In",
			type: "button",
			tagName: "INPUT"
		}));
		image.click();

		var logOff = browser.$(Web.Link({
			innerText: "SIGN-OFF"
		}));
		expect(logOff.exists()).toBeTruthy();

		LFT.whenDone(done);
	});

	// This test will fail because not all images have the "alt" attribute
	it("should get the ALT attributes of all the images", function(done){
		browser.navigate("http://newtours.demoaut.com/");

		browser.$$(Web.Image()).then(function(images){
			images.forEach(function(image){
				image.getAttribute("alt").then(function(al){
					console.log(al);
				});
				expect(image.getAttribute("alt")).not.toBeNull();
			});
		});

		LFT.whenDone(done);
	});

	afterEach(function(done){
		LFT.afterTest();
		if (browser){
			browser.close();
		}
		LFT.whenDone(done);
	});

	afterAll(function(done){
		LFT.cleanup();
		LFT.whenDone(done);
	});
});
		

Back to top

Expect - one liners

The following code shows some one-liners examples of how you can use expect.

var LFT = require("leanft");
var expect = require("leanft/verify");


// expect one liner examplesfunction showExpectUsages()
{
	var a=1;
	var b=2;
	var string1="SomeString";
	var trueValue = true;
	var falseValue = false;

	expect(a).toEqual(1);
	expect(b).toNotEqual(1);
	expect(string1).toBe("SomeString");
	expect(trueValue).toBeTruthy();
	expect(falseValue).toBeFalsey();

	expect(b).toBeGreaterThan(1);
	expect(a).toBeLessThan(2);
}

Back to top

Test on an emulated device using Google Chrome's Device mode

If the device on which you want test your app is not connected to Mobile Center, or if Mobile Center does not support the device, you can use Google Chrome's Device Mode to emulate the device.

The following example shows how to test on an emulated iPhone 6:

it("Chrome browser should open for predefined emulated device",function(done){
	Web.Browser.launchEmulated(Web.BrowserType.Chrome,EmulatedDevice.IPhone6).then(function(b){
		browser = b;
		browser.navigate("www.google.com");
	});

	LFT.whenDone(done);

});

The following example shows how test on a custom emulated device:

it("Chrome browser should open for custom emulated device",function(done){
	var env = {
		width: 375,
		height: 667,
		scaleFactor: 2,
		userAgent: "Mozilla/5.0 (iPhone; CPU iPhone OS 8_0 like Mac OS X) AppleWebKit/600.1.3 (KHTML, like Gecko) Version/8.0 Mobile/12A4345d Safari/600.1.4",
		isTouchable: true,
	};
    
	Web.Browser.launchEmulated(Web.BrowserType.Chrome,env).then(function(b){ //EmulatedDevice.IPhone6
		browser = b;
		browser.navigate("www.google.com");
	});

	LFT.whenDone(done);
});

Back to top

See also: