Add custom network idle waiting and some JS injection to make tests more stable

Signed-off-by: Julius Härtl <jus@bitgrid.net>

3 files changed, 67 insertions, 17 deletions

diff --git a/tests/ui-regression/helper.js b/tests/ui-regression/helper.js
index ed2a58ea70a..fd9a074f155 100644
--- a/tests/ui-regression/helper.js
+++ b/tests/ui-regression/helper.js
@@ -32,6 +32,8 @@ module.exports = {
 	browser: null,
 	pageBase: null,
 	pageCompare: null,
+	lastBase: 0,
+	lastCompare: 0,
 	init: async function (test) {
 		this._outputDirectory = `${config.outputDirectory}/${test.title}`;
 		if (!fs.existsSync(config.outputDirectory)) fs.mkdirSync(config.outputDirectory);
@@ -54,6 +56,33 @@ module.exports = {
 		this.pageCompare = await this.browser.newPage();
 		this.pageBase.setDefaultNavigationTimeout(60000);
 		this.pageCompare.setDefaultNavigationTimeout(60000);
+
+		const self = this;
+		this.pageCompare.on('requestfinished', function() {
+			self.lastCompare = Date.now();
+		});
+		this.pageBase.on('requestfinished', function() {
+			self.lastBase = Date.now();
+		});
+	},
+
+	awaitNetworkIdle: async function (seconds) {
+		var self = this;
+		return new Promise(function (resolve, reject) {
+			const timeout = setTimeout(function() {
+				reject();
+			}, 10000)
+			const waitForFoo = function() {
+				const currentTime = Date.now() - seconds*1000;
+				if (self.lastBase < currentTime && self.lastCompare < currentTime) {
+					clearTimeout(timeout);
+					return resolve();
+				}
+				setTimeout(waitForFoo, 100);
+			};
+			waitForFoo();
+
+		});
 	},
 
 	login: async function (test) {
@@ -71,8 +100,9 @@ module.exports = {
 		await page.type('#user', 'admin');
 		await page.type('#password', 'admin');
 		const inputElement = await page.$('input[type=submit]');
-		inputElement.click();
-		return await page.waitForNavigation({waitUntil: 'networkidle0'});
+		await inputElement.click();
+		await page.waitForNavigation({waitUntil: 'networkidle2'});
+		return await page.waitForSelector('#header');
 	},
 
 	takeAndCompare: async function (test, route, action, options) {
@@ -107,16 +137,34 @@ module.exports = {
 				this.pageCompare.goto(`${config.urlChange}${route}`, {waitUntil: options.waitUntil})
 			]);
 		}
+
+		await this.pageBase.$eval('body', function (e) {
+			// force relative timestamp to fixed value, since it breaks screenshot diffing
+			$('.live-relative-timestamp').removeClass('live-relative-timestamp').text('5 minutes ago');
+		});
+		await this.pageCompare.$eval('body', function (e) {
+			// force relative timestamp to fixed value, since it breaks screenshot diffing
+			$('.live-relative-timestamp').removeClass('live-relative-timestamp').text('5 minutes ago');
+		});
+
 		var failed = null;
 		try {
-			await Promise.all([
-				action(this.pageBase),
-				action(this.pageCompare)
-			]);
+			await this.pageBase.bringToFront();
+			await action(this.pageBase);
+			await this.pageCompare.bringToFront();
+			await action(this.pageCompare);
 		} catch (err) {
 			failed = err;
 		}
-		await this.delay(100);
+		await this.awaitNetworkIdle(3);
+		await this.pageBase.$eval('body', function (e) {
+			$('.live-relative-timestamp').removeClass('live-relative-timestamp').text('5 minutes ago');
+			$(':focus').blur();
+		});
+		await this.pageCompare.$eval('body', function (e) {
+			$('.live-relative-timestamp').removeClass('live-relative-timestamp').text('5 minutes ago');
+			$(':focus').blur();
+		});
 		await Promise.all([
 			this.pageBase.screenshot({
 				path: `${this._outputDirectory}/${fileName}.base.png`,
diff --git a/tests/ui-regression/test/filesSpec.js b/tests/ui-regression/test/filesSpec.js
index be507390f4e..7a029b2f311 100644
--- a/tests/ui-regression/test/filesSpec.js
+++ b/tests/ui-regression/test/filesSpec.js
@@ -41,43 +41,44 @@ describe('files', function () {
 				await page.waitForSelector('.shareWithField');
 				await helper.delay(500);
 				await page.$eval('body', e => { $('.shareWithField').blur() });
-			}, {viewport: resolution, waitUntil: 'networkidle2'});
+			}, {viewport: resolution});
 		});
 		it('file-popover.' + resolution.title, async function () {
 			return helper.takeAndCompare(this, 'index.php/apps/files', async function (page) {
 				await page.click('[data-file=\'welcome.txt\'] .action-menu');
 				await page.waitForSelector('.fileActionsMenu');
-			}, {viewport: resolution, waitUntil: 'networkidle2'});
+			}, {viewport: resolution});
 		});
 		it('file-sidebar-details.' + resolution.title, async function() {
 			return helper.takeAndCompare(this, undefined, async function (page) {
 				await page.click('[data-file=\'welcome.txt\'] .fileActionsMenu [data-action=\'Details\']');
-				await page.waitForSelector('#commentsTabView');
+				await page.waitForSelector('[data-tabid=\'commentsTabView\']');
+				await page.$eval('body', e => { $('.shareWithField').blur() });
 				await helper.delay(500); // wait for animation
-			});
+			}, {viewport: resolution});
 		});
 		it('file-sidebar-details-sharing.' + resolution.title, async function() {
 			return helper.takeAndCompare(this, undefined, async function (page) {
 				let tab = await helper.childOfClassByText(page, 'tabHeaders', 'Sharing');
 				tab[0].click();
 				await page.waitForSelector('input.shareWithField');
-				await helper.delay(500); // wait for animation
 				await page.$eval('body', e => { $('.shareWithField').blur() });
-			});
+				await helper.delay(500); // wait for animation
+			}, {viewport: resolution});
 		});
 		it('file-sidebar-details-versions.' + resolution.title, async function() {
 			return helper.takeAndCompare(this, undefined, async function (page) {
 				let tab = await helper.childOfClassByText(page, 'tabHeaders', 'Versions');
 				tab[0].click();
 				await helper.delay(100); // wait for animation
-			});
+			}, {viewport: resolution});
 		});
 		it('file-popover.favorite.' + resolution.title, async function () {
 			return helper.takeAndCompare(this, 'index.php/apps/files', async function (page) {
 				await page.click('[data-file=\'welcome.txt\'] .action-menu');
 				await page.waitForSelector('.fileActionsMenu')
 				await page.click('[data-file=\'welcome.txt\'] .fileActionsMenu [data-action=\'Favorite\']');;
-			}, {viewport: resolution, waitUntil: 'networkidle2'});
+			}, {viewport: resolution});
 		});
 
 		it('file-favorites.' + resolution.title, async function () {
@@ -90,7 +91,7 @@ describe('files', function () {
 				} catch (err) {}
 				await page.click('#app-navigation [data-id=\'favorites\'] a');
 				await helper.delay(500); // wait for animation
-			}, {viewport: resolution, waitUntil: 'networkidle2'});
+			}, {viewport: resolution});
 		});
 
 
diff --git a/tests/ui-regression/test/installSpec.js b/tests/ui-regression/test/installSpec.js
index bfb063bd467..d2107cdb61f 100644
--- a/tests/ui-regression/test/installSpec.js
+++ b/tests/ui-regression/test/installSpec.js
@@ -66,7 +66,8 @@ describe('install', function () {
 			const password = await page.type('#adminpass', 'admin');
 			const inputElement = await page.$('input[type=submit]');
 			await inputElement.click();
-			await page.waitForNavigation({waitUntil: 'networkidle0'});
+			await page.waitForNavigation({waitUntil: 'networkidle2'});
+			await page.waitForSelector('#header');
 			helper.pageBase.setDefaultNavigationTimeout(60000);
 			helper.pageCompare.setDefaultNavigationTimeout(60000);
 		}, { waitUntil: 'networkidle0', viewport: {w: 1920, h: 1080}});