feat(install-browsers): automatically detect out of sync playwright d…

…eps and attempt to install

Sometimes when playwright releases a new version the system deps
required also change. This change attempts to catch the out of sync deps
from a playwright warning, and then install the deps playwright needs to
prevent hard to debug issues with playwright not working.

workflow-steps/install-browsers/main.js

@@ -9,7 +9,41 @@ if (existsSync('package.json')) {
       (json.devDependencies || {}).hasOwnProperty('@playwright/test');
     if (hasPlaywright) {
       console.log('Installing browsers required by Playwright');
-      execSync('npx playwright install', { stdio: 'inherit' });
+      const output = execSync('npx playwright install', {
+        stdio: 'inherit',
+      }).toString();
+
+      if (output.includes('missing dependencies')) {
+        console.log(
+          'Playwright detected missing dependencies. Attempting to install...',
+        );
+        try {
+          // playwright has detected out of sync dependencies on the host machine, we we'll try to manually install them to prevent hard to debug failures
+          const installDryRun = execSync(
+            'npx playwright install --with-deps --dry-run',
+            { stdio: 'pipe' },
+          ).toString();
+
+          const [installCommand] = installDryRun.match(
+            /apt-get install .+(?=")/gi,
+          );
+          if (installCommand) {
+            console.log('Installing Playwright dependencies');
+            execSync(installCommand, { stdio: 'inherit' });
+          }
+        } catch (installError) {
+          console.error(
+            'There was an issue installing dependencies for Playwright.',
+          );
+          console.error(installError);
+          console.log(
+            'You can create a custom launch template and add a step to manually install the missing dependencies (desribed above from Playwright) in order to get around this error.',
+          );
+          console.log(
+            'See docs here: https://nx.dev/ci/reference/launch-templates',
+          );
+        }
+      }
     }
 
     const hasCypress =
@@ -19,7 +53,6 @@ if (existsSync('package.json')) {
       console.log('Installing browsers required by Cypress');
       execSync('npx cypress install', { stdio: 'inherit' });
     }
-
   } catch (e) {
     console.error(e);
   }