tests(ci): stop using xvfb (#15707)

.github/workflows/ci.yml

@@ -42,14 +42,12 @@ jobs:
     - name: Install Chrome ToT
       run: bash $GITHUB_WORKSPACE/core/scripts/download-chrome.sh
 
-    # Run tests that require headfull Chrome.
-    - run: sudo apt-get install xvfb
     - name: yarn test-clients
-      run: xvfb-run --auto-servernum bash $GITHUB_WORKSPACE/.github/scripts/test-retry.sh yarn test-clients
+      run: bash $GITHUB_WORKSPACE/.github/scripts/test-retry.sh yarn test-clients
     - name: yarn test-docs
-      run: xvfb-run --auto-servernum yarn test-docs
+      run: yarn test-docs
     - name: yarn test-treemap
-      run: xvfb-run --auto-servernum bash $GITHUB_WORKSPACE/.github/scripts/test-retry.sh yarn test-treemap
+      run: bash $GITHUB_WORKSPACE/.github/scripts/test-retry.sh yarn test-treemap
 
     - run: yarn diff:sample-json
     - run: yarn diff:flow-sample-json

.github/workflows/package-test.yml

@@ -26,9 +26,8 @@ jobs:
 
     - run: yarn install --frozen-lockfile --network-timeout 1000000
     - run: yarn build-report
-    - run: sudo apt-get install xvfb
 
-    - run: xvfb-run --auto-servernum bash $GITHUB_WORKSPACE/core/scripts/release/package-test.sh
+    - run: bash $GITHUB_WORKSPACE/core/scripts/release/package-test.sh
 
     # Fail if any changes were written to source files.
     - run: git diff --exit-code

.github/workflows/unit.yml

@@ -59,17 +59,15 @@ jobs:
 
     - run: yarn test-proto # Run before unit-core because the roundtrip json is needed for proto tests.
 
-    - run: sudo apt-get install xvfb
-
     - name: yarn unit
       if: ${{ matrix.node != env.LATEST_NODE }}
-      run: xvfb-run --auto-servernum yarn unit:ci
+      run: yarn unit:ci
 
     # Only gather coverage on latest node, where c8 is the most accurate.
     - name: yarn unit:cicoverage
       if: ${{ matrix.node == env.LATEST_NODE }}
       run: |
-        xvfb-run --auto-servernum yarn unit:cicoverage
+        yarn unit:cicoverage
         yarn c8 report --reporter text-lcov > unit-coverage.lcov
     - name: Upload test coverage to Codecov
       if: ${{ matrix.node == env.LATEST_NODE }}
@@ -80,7 +78,7 @@ jobs:
 
     # Runs here because it needs the roundtrip proto.
     - name: yarn test-viewer
-      run: yarn build-viewer && xvfb-run --auto-servernum bash $GITHUB_WORKSPACE/.github/scripts/test-retry.sh yarn test-viewer
+      run: yarn build-viewer && bash $GITHUB_WORKSPACE/.github/scripts/test-retry.sh yarn test-viewer
 
     - name: Upload failures
       if: failure()

clients/test/extension/popup-test-pptr.js

@@ -38,7 +38,7 @@ describe('Lighthouse chrome popup', function() {
   before(async function() {
     // start puppeteer
     browser = await puppeteer.launch({
-      headless: false,
+      headless: 'new',
       executablePath: getChromePath(),
     });
 

core/scripts/release/package-test.sh

@@ -23,7 +23,7 @@ npm install "$LH_ROOT/lighthouse-$VERSION.tgz"
 # --force to ignore potentially off peer dependency on Lighthouse itself. This just ignores whatever
 # Lighthouse version pubads declares, and defers to the version installed above.
 npm install lighthouse-plugin-publisher-ads@next --force
-npm explore lighthouse -- npm run fast -- http://example.com
+npm explore lighthouse -- npm run fast -- http://example.com --chrome-flags=--headless=new
 
 # Packaged smokehouse/lighthouse using root's static-server and test fixtures.
 # This is because we don't have access to any of the dev dependencies.

docs/puppeteer.md

@@ -19,11 +19,12 @@ import lighthouse from 'lighthouse';
 
 const url = 'https://chromestatus.com/features';
 
-// Use Puppeteer to launch headful Chrome
+// Use Puppeteer to launch headless Chrome
 // - Omit `--enable-automation` (See https://github.com/GoogleChrome/lighthouse/issues/12988)
 // - Don't use 800x600 default viewport
 const browser = await puppeteer.launch({
-  headless: false,
+  // Set to false if you want to see the script in action.
+  headless: 'new',
   defaultViewport: null,
   ignoreDefaultArgs: ['--enable-automation']
 });

docs/recipes/auth/README.md

@@ -45,8 +45,8 @@ Puppeteer - a browser automation tool - can be used to programmatically setup a
 First, launch Chrome and create a new page:
 ```js
 const browser = await puppeteer.launch({
-  // Optional, if you want to see the tests in action.
-  headless: false,
+  // Set to false if you want to see the script in action.
+  headless: 'new',
   slowMo: 50,
 });
 const page = await browser.newPage();

docs/recipes/auth/example-lh-auth.js

@@ -43,8 +43,8 @@ async function logout(page, origin) {
 async function main() {
   // Direct Puppeteer to open Chrome with a specific debugging port.
   const browser = await puppeteer.launch({
-    // Optional, if you want to see the tests in action.
-    headless: false,
+    // Set DEBUG environment variable if you want to see the tests in action.
+    headless: process.env.DEBUG ? false : 'new',
     slowMo: 50,
   });
   const page = await browser.newPage();

docs/recipes/custom-gatherer-puppeteer/test.sh

@@ -3,6 +3,6 @@
 # Make sure we're in this `docs/recipes/customer-gatherer-puppeteer` directory
 cd "$(dirname "$0")"
 
-node node_modules/.bin/lighthouse --config-path=custom-config.js https://www.example.com --output=json |
+node node_modules/.bin/lighthouse --chrome-flags=--headless=new --config-path=custom-config.js https://www.example.com --output=json |
   jq '.audits["custom-audit"].score' |
   grep -q 1

docs/recipes/integration-test/example-lh-auth.test.js

@@ -83,7 +83,7 @@ describe('my site', () => {
     await new Promise(resolve => server.listen(SERVER_PORT, resolve));
     browser = await puppeteer.launch({
       args: [`--remote-debugging-port=${CHROME_DEBUG_PORT}`],
-      headless: !process.env.DEBUG,
+      headless: process.env.DEBUG ? false : 'new',
       slowMo: process.env.DEBUG ? 50 : undefined,
       executablePath: getChromePath(),
     });

treemap/test/treemap-test-pptr.js

@@ -50,7 +50,7 @@ describe('Lighthouse Treemap', () => {
   beforeEach(async () => {
     if (!browser) {
       browser = await puppeteer.launch({
-        headless: 'new',
+        headless: process.env.DEBUG ? false : 'new',
         executablePath: getChromePath(),
       });
     }