Improve test suite robustness. (#1646)

..by waiting for DOM states instead of checking them only once.

tests/pageLaxMode.js

 'use strict';
 
-var webdriver = require('selenium-webdriver');
 var Page = require('./page');
 
-module.exports = function PageLaxMode(browser) {
-	Page.apply(this, [browser]);
+module.exports = function PageLaxMode() {
 
+	Page.apply(this, arguments);
 
-	this.tryGetMainSectionElement = function () {
-		return this.tryFindByXpath('//section//section');
+	this.getMainSectionCss = function () {
+		return 'section section';
 	};
 
-	this.tryGetFooterElement = function () {
-		return this.tryFindByXpath('//section//footer');
+	this.getFooterSectionCss = function () {
+		return 'section footer';
 	};
 
-	this.getTodoListXpath = function () {
-		return '(//section/ul | //section/div/ul | //ul[@id="todo-list"])';
+	this.getListCss = function (suffixCss) {
+		return [
+			'section > ul',
+			'section > div > ul',
+			'ul#todo-list',
+		].map(function (listCss) {
+			return listCss + (suffixCss || '');
+		}).join(', ');
 	};
 
-	this.getMarkAllCompletedCheckBox = function () {
-		var xpath = '(//section/input[@type="checkbox"] | //section/*/input[@type="checkbox"] | //input[@id="toggle-all"])';
-		return browser.findElement(webdriver.By.xpath(xpath));
+	this.getToggleAllCss = function () {
+		return [
+			'section > input[type="checkbox"]',
+			'section > * > input[type="checkbox"]',
+			'input#toggle-all',
+		].join(', ');
 	};
 
-	this.tryGetClearCompleteButton = function () {
-		var xpath = '(//footer/button | //footer/*/button | //button[@id="clear-completed"])';
-		return browser.findElements(webdriver.By.xpath(xpath));
+	this.getClearCompletedButtonCss = function () {
+		return [
+			'footer > button',
+			'footer > * > button',
+			'button#clear-completed',
+		].join(', ');
 	};
 
-	this.getItemsCountElement = function () {
-		var xpath = '(//footer/span | //footer/*/span)';
-		return browser.findElement(webdriver.By.xpath(xpath));
+	this.getItemCountCss = function () {
+		return [
+			'footer > span',
+			'footer > * > span',
+		].join(', ');
 	};
 
-	this.getFilterElements = function () {
-		return browser.findElements(webdriver.By.xpath('//footer//ul//a'));
+	this.getFilterCss = function (index) {
+		return 'footer ul li:nth-child(' + (index + 1) + ') a';
 	};
 
-
-	this.getItemInputField = function () {
-		// allow a more generic method for locating the text getItemInputField
-		var xpath = '(//header/input | //header/*/input | //input[@id="new-todo"])';
-		return browser.findElement(webdriver.By.xpath(xpath));
+	this.getNewInputCss = function () {
+		return [
+			'header > input',
+			'header > * > input',
+			'input#new-todo',
+		].join(', ');
 	};
 
-	this.tryGetToggleForItemAtIndex = function (index) {
-		// the specification dictates that the checkbox should have the 'toggle' CSS class. Some implementations deviate from
-		// this, hence in lax mode we simply look for any checkboxes within the specified 'li'.
-		var xpath = this.xPathForItemAtIndex(index) + '//input[@type="checkbox"]';
-		return browser.findElements(webdriver.By.xpath(xpath));
+	this.getListItemToggleCss = function (index) {
+		return this.getListItemCss(index, ' input[type="checkbox"]');
 	};
 
-	this.getEditInputForItemAtIndex = function (index) {
-		// the specification dictates that the input element that allows the user to edit a todo item should have a CSS
-		// class of 'edit'. In lax mode, we also look for an input of type 'text'.
-		var xpath = '(' + this.xPathForItemAtIndex(index) + '//input[@type="text"]' + '|' +
-			this.xPathForItemAtIndex(index) + '//input[contains(@class,"edit")]' + ')';
-		return browser.findElement(webdriver.By.xpath(xpath));
+	this.getListItemInputCss = function (index) {
+		return [
+			this.getListItemCss(index, ' input.edit'),
+			this.getListItemCss(index, ' input[type="text"]'),
+		].join(', ');
 	};
+
 };