Frontend testing using puppeteer

.drone.yml

@@ -703,6 +703,32 @@ pipeline:
     when:
       matrix:
         TEST: memcache-redis-cluster
+  ui-regression:
+    image: nextcloudci/ui-regression:ui-regression-1
+    commands:
+      - cd tests/ui-regression
+      - npm install
+      - chown -R pptruser out node_modules
+      - bash -c "until curl -s http://ui-regression-php-master > /dev/null && curl -s http://ui-regression-php > /dev/null; do sleep 2; done"
+      - sudo -u pptruser node runTests.js || true
+      - echo "The result can be found at https://s3.bitgrid.net/nextcloud-ui-regression/nextcloud/server/${DRONE_PULL_REQUEST}/index.html"
+    shm_size: '1gb'
+    when:
+      matrix:
+        TESTS: ui-regression
+  publish-s3:
+    image: plugins/s3
+    endpoint: https://ci-assets.nextcloud.com
+    bucket: nextcloud-ui-regression
+    path_style: true
+    source: tests/ui-regression/out/**/*
+    strip_prefix: tests/ui-regression/out/
+    acl: public-read
+    target: ${DRONE_REPO_OWNER}/${DRONE_REPO_NAME}/${DRONE_PULL_REQUEST}
+    secrets: [ aws_access_key_id, aws_secret_access_key ]
+    when:
+      matrix:
+        TESTS: ui-regression
 matrix:
   include:
     - TESTS: checkers
@@ -848,13 +874,35 @@ matrix:
       ENABLE_REDIS_CLUSTER: true
     - TESTS: sqlite-php7.0-webdav-apache
       ENABLE_REDIS: true
+    - TESTS: ui-regression
 
 services:
   cache:
     image: redis
     when:
       matrix:
        ENABLE_REDIS: true
+  ui-regression-php:
+    image: nextcloudci/server:server-1
+    commands:
+      - . /etc/apache2/envvars
+      - rm -fr /var/www/html
+      - mkdir /var/www/html && cp -rT . /var/www/html && chown -R www-data:www-data /var/www/html
+      - rm -fr /var/www/html/config/config.php /var/www/html/data/*
+      - apache2 -DFOREGROUND
+    when:
+      matrix:
+        TESTS: ui-regression
+  ui-regression-php-master:
+    image: nextcloudci/server:server-1
+    commands:
+      - . /etc/apache2/envvars
+      - rm -fr /var/www/html/config/config.php /var/www/html/data/*
+      - su www-data -c "cd /var/www/html/ && git checkout $DRONE_REPO_BRANCH && git pull && git submodule update"
+      - apache2 -DFOREGROUND 
+    when:
+      matrix:
+        TESTS: ui-regression
   cache-cluster:
     image: morrisjobke/redis-cluster
     when:

.gitignore

@@ -139,6 +139,9 @@ Vagrantfile
 /tests/autotest*
 /tests/data/lorem-copy.txt
 /tests/data/testimage-copy.png
+/tests/ui-regression/out/
+/tests/ui-regression/node_modules/
+/tests/ui-regression/package-lock.json
 /config/config-autotest-backup.php
 /config/autoconfig.php
 clover.xml

core/css/guest.css

@@ -454,13 +454,14 @@ form #selectDbType {
 	text-align:center;
 	white-space: nowrap;
 	margin: 0;
+	display: flex;
 }
 form #selectDbType .info {
 	white-space: normal;
 }
 form #selectDbType label {
-	position: static;
-	margin: 0 -3px 5px;
+	flex-grow: 1;
+	margin: 0 -1px 5px;
 	font-size: 12px;
 	background:#f8f8f8;
 	color:#888;
@@ -469,7 +470,7 @@ form #selectDbType label {
 }
 form #selectDbType label span {
 	cursor: pointer;
-	padding: 10px 20px;
+	padding: 10px 17px;
 }
 form #selectDbType label.ui-state-hover,
 form #selectDbType label.ui-state-active {

tests/ui-regression/config.js

@@ -0,0 +1,58 @@
+/**
+ * @copyright 2018 Julius Härtl <jus@bitgrid.net>
+ *
+ * @author 2018 Julius Härtl <jus@bitgrid.net>
+ *
+ * @license GNU AGPL version 3 or any later version
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+
+module.exports = {
+
+	/**
+	 * Define resolutions to be tested when diffing screenshots
+	 */
+	resolutions: [
+		{title: 'mobile', w: 360, h: 480},
+		{title: 'narrow', w: 800, h: 600},
+		{title: 'normal', w: 1024, h: 768},
+		{title: 'wide', w: 1920, h: 1080},
+		{title: 'qhd', w: 2560, h: 1440},
+	],
+
+	/**
+	 * URL that holds the base branch
+	 */
+	urlBase: 'http://ui-regression-php-master/',
+
+	/**
+	 * URL that holds the branch to be diffed
+	 */
+	urlChange: 'http://ui-regression-php/',
+
+	/**
+	 * Path to output directory for screenshot files
+	 */
+	outputDirectory: 'out',
+
+	/**
+	 * Run in headless mode (useful for debugging)
+	 */
+	headless: true,
+
+	slowMo: 0,
+
+};