Enable E2E Tests on Firefox

.distignore

@@ -34,11 +34,11 @@ codecov.yml
 composer.json
 composer.lock
 CONTRIBUTING.md
+jest-puppeteer.config.js
 package.json
 package-lock.json
 phpcs.xml
 phpstan.neon.dist
 phpunit.xml.dist
-puppeteer.config.js
 README.md
 webpack.config.js

.eslintrc

@@ -217,7 +217,7 @@
     {
       "files": [
         "babel.config.js",
-        "puppeteer.config.js",
+        "jest-puppeteer.config.js",
         "webpack.config.js",
         ".storybook/*.js",
         "tests/js/*.js",

.travis.yml

@@ -45,6 +45,10 @@ install:
       nvm install
       npm ci
     fi
+  - |
+    if ! [ -z $PUPPETEER_PRODUCT ] ; then
+      npm ci puppeteer
+    fi
   - |
     if [ "$LINT" = "1" ] || [ "$PHP" = "1" ] || [ "$E2E" = "1" ] || [ "$DEPLOY_PLUGIN" = "1" ]; then
       composer install --no-interaction
@@ -114,7 +118,7 @@ script:
     if [ "$E2E" = "1" ]; then
       npm run build:js
       npm run env:start
-      npm run test:e2e:ci
+      npm run test:e2e
       npm run env:stop
     fi
   - set +e
@@ -151,9 +155,12 @@ jobs:
     - name: PHP and JavaScript unit tests (7.4, WordPress latest, with code coverage)
       php: 7.4
       env: JS=1 PHP=1 COVERAGE=1 WP_VERSION=latest
-    - name: E2E tests
+    - name: E2E tests (Chromium)
       php: 7.4
       env: E2E=1 WP_VERSION=latest PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=
+    - name: E2E tests (Firefox)
+      php: 7.4
+      env: E2E=1 WP_VERSION=latest PUPPETEER_SKIP_CHROMIUM_DOWNLOAD= PUPPETEER_PRODUCT=firefox
     - stage: deploy
       if: (NOT type IN (pull_request)) AND (branch = master)
       php: 7.3

bin/local-env/install-wordpress.sh

@@ -102,11 +102,6 @@ if [ "$CURRENT_URL" != "http://localhost:$HOST_PORT" ]; then
 	wp option update siteurl "http://localhost:$HOST_PORT" --quiet
 fi
 
-# Install a dummy favicon to avoid 404 errors.
-echo -e $(status_message "Installing a dummy favicon...")
-container touch /var/www/html/favicon.ico
-container chmod 767 /var/www/html/favicon.ico
-
 # Activate Web Stories plugin.
 echo -e $(status_message "Activating Web Stories plugin...")
 wp plugin activate web-stories --quiet

puppeteer.config.js → jest-puppeteer.config.js

@@ -18,5 +18,7 @@ module.exports = {
   launch: {
     headless: process.env.PUPPETEER_HEADLESS !== 'false',
     slowMo: parseInt(process.env.PUPPETEER_SLOWMO) || 0,
+    dumpio: true,
+    product: process.env.PUPPETEER_PRODUCT || 'chrome',
   },
 };

package.json

@@ -112,7 +112,7 @@
     "npm-run-all": "^4.1.5",
     "optimize-css-assets-webpack-plugin": "^5.0.3",
     "prettier": "^2.0.5",
-    "puppeteer": "^2.1.1",
+    "puppeteer": "^3.0.1",
     "react-test-renderer": "^16.13.1",
     "rtlcss-webpack-plugin": "^4.0.3",
     "source-map-loader": "^0.2.4",
@@ -170,7 +170,8 @@
     "test:e2e:help": "npm run test:e2e -- --help",
     "test:e2e:watch": "npm run test:e2e -- --watch",
     "test:e2e:interactive": "PUPPETEER_HEADLESS=false PUPPETEER_SLOWMO=80 npm run test:e2e",
-    "test:e2e:ci": "npm run test:e2e -- --runInBand"
+    "test:e2e:firefox": "PUPPETEER_PRODUCT=firefox WP_BASE_URL=http://localhost:8899 jest --runInBand --config=tests/e2e/jest.config.js",
+    "test:e2e:firefox:interactive": "PUPPETEER_PRODUCT=firefox PUPPETEER_HEADLESS=false PUPPETEER_SLOWMO=80 npm run test:e2e"
   },
   "husky": {
     "hooks": {

tests/e2e/config/bootstrap.js

@@ -105,6 +105,25 @@ function observeConsoleLogging() {
       return;
     }
 
+    // Firefox warns about this issue in WordPress admin.
+    if (text.includes('This page uses the non standard property “zoom”')) {
+      return;
+    }
+
+    // Firefox warns about this issue when there's no proper favicon.
+    if (
+      text.includes(
+        'Component returned failure code: 0x80040111 (NS_ERROR_NOT_AVAILABLE) [nsIContentSniffer.getMIMETypeFromContent]'
+      )
+    ) {
+      return;
+    }
+
+    // Firefox warns about this issue on the login screen.
+    if (text.includes('wp-includes/js/zxcvbn.min.js')) {
+      return;
+    }
+
     const logFunction = OBSERVED_CONSOLE_MESSAGE_TYPES[type];
 
     // As of Puppeteer 1.6.1, `message.text()` wrongly returns an object of