fix: add cjs sauce.config and load correct type based on project (#218)

* Add a cjs version of wrapper config

* copy both configs to build dir

* Try to load the correct config wrapper

Check package.json for "type" and if its explicitly "module" load up
sauce.config.mjs. Then try checking the customer's config, if its
suffixed with '.mjs' or '.mts' then also load up sauce.config.mjs.
Otherwise, load the commonjs version.

* Only need to check package.json for module type

I don't think its possible or sensical to have type: "module" but a
playwright.config.cts file.

* Update sauce.config.cjs to have changes since it was moved to .mjs

* A little safer package.json access

* Update jsdoc for isEsmProject

* Read and parse package.json instead of importing

* remove unnecessary string conversion

* Add an integration test for commonjs + typescript

* remove unnecessary files

* projectPath should always be set, but be defensive anyways

Log it if it should ever come to pass.

Author: mhan83

package.json

@@ -9,7 +9,7 @@
   ],
   "main": "lib/playwright-recorder.js",
   "scripts": {
-    "build": "tsc && cp src/sauce.config.mjs lib/",
+    "build": "tsc && cp src/sauce.config.* lib/",
     "clean": "rm -rf lib",
     "lint": "eslint tests/ src/",
     "test": "./bin/wait_display && DISPLAY=\"$(cat DISPLAY)\" node .",

src/playwright-runner.ts

@@ -210,8 +210,12 @@ async function runPlaywright(nodeBin: string, runCfg: RunnerConfig): Promise<Run
 
   // Copy our runner's playwright config to a custom location in order to
   // preserve the customer's config which we may want to load in the future
-  const configFile = path.join(runCfg.projectPath, 'sauce.config.mjs');
-  fs.copyFileSync(path.join(__dirname, 'sauce.config.mjs'), configFile);
+  const configFileName =
+    await utils.isEsmProject(runCfg.projectPath) ?
+      'sauce.config.mjs' :
+      'sauce.config.cjs';
+  const configFile = path.join(runCfg.projectPath, configFileName);
+  fs.copyFileSync(path.join(__dirname, configFileName), configFile);
 
   const defaultArgs = {
     output: runCfg.playwrightOutputFolder,

src/sauce.config.cjs

@@ -0,0 +1,84 @@
+// @ts-check
+const process = require('process');
+const _ = require('lodash');
+const fs = require('fs');
+
+let userConfig = {};
+
+// Prefer ts over js to match default behaviour of playwright-test
+const configFiles = process.env.PLAYWRIGHT_CFG_FILE ?
+  [process.env.PLAYWRIGHT_CFG_FILE] :
+  ['./playwright.config.ts', './playwright.config.js'];
+
+for (const file of configFiles) {
+  if (fs.existsSync(file)) {
+    try {
+      userConfig = require(file);
+      // it should put config just under root level to get it work with playwright.config.ts
+      // there is no such issue with playwright.config.js
+      if (userConfig.default) {
+        userConfig = userConfig.default;
+      }
+      break;
+    } catch (e) {
+      console.error(e);
+    }
+  }
+}
+
+const overrides = {
+  use: {
+    headless: process.env.HEADLESS === 'true',
+    video: 'off',
+    launchOptions: {},
+  },
+  reporter: [
+    ['list'],
+    // outputFile is set by playwright-runner.js as an env variable. The runner needs to process it
+    // so better for it to set the output path
+    ['junit'],
+    // outputFile is set by playwright-runner.js as an env variable. The runner needs to process it
+    // so better for it to set the output path
+    ['@saucelabs/playwright-reporter',
+      {
+        upload: false,
+      },
+    ],
+  ],
+  testIgnore: process.env.TEST_IGNORE?.split(','),
+};
+
+// Values that are arrays are merged at the very end (see arrMerger()), but primitives are not.
+// Allow the user to set a single reporter like so: `reporter: 'list'`.
+if (userConfig.reporter && !(userConfig.reporter instanceof Array)) {
+  overrides.reporter.push([userConfig.reporter]);
+}
+
+if (process.env.BROWSER_NAME !== 'chrome') {
+  // chromium, firefox and webkit come pre-packaged with playwright.
+  // So we can just pass those browser values to playwright and
+  // it knows what to do and where to pick them up.
+  overrides.use.browserName = process.env.BROWSER_NAME; // override browserName with suite browserName
+} else {
+  // Google chrome is provided by the sauce VM. So we have to let playwright know where to look.
+  overrides.use.channel = 'chrome';
+  overrides.use.launchOptions.executablePath = process.env.BROWSER_PATH;
+}
+
+if ('HTTP_PROXY' in process.env && process.env.HTTP_PROXY !== '') {
+  const proxy = {
+    server: process.env.HTTP_PROXY,
+  };
+
+  overrides.use.contextOptions = {proxy, ignoreHTTPSErrors: true};
+  // Need to set the browser launch option as well, it is a hard requirement when testing chromium + windows.
+  overrides.use.launchOptions = {proxy, ignoreHTTPSErrors: true};
+}
+
+function arrMerger(objValue, srcValue) {
+  if (_.isArray(objValue)) {
+    return objValue.concat(srcValue);
+  }
+}
+
+module.exports = _.mergeWith(userConfig, overrides, arrMerger);

src/utils.ts

@@ -1,4 +1,5 @@
 import * as path from 'node:path';
+import { readFile } from 'node:fs/promises';
 
 import shell from 'shelljs';
 import logger from '@wdio/logger';
@@ -80,3 +81,30 @@ export function setEnvironmentVariables (envVars: Record<string, string> = {}) {
     process.env[key] = value;
   }
 }
+
+/**
+ * Check project's module type from an included package.json and return true
+ * if configured for ESM.
+ */
+export async function isEsmProject(projectPath?: string) {
+  if (!projectPath) {
+    console.warn('Project path expected, but is undefined');
+    return false
+  }
+
+  const packagePath = path.join(projectPath, 'package.json');
+  let packageJson: unknown;
+  try {
+    const contents = await readFile(packagePath, { encoding: 'utf-8' });
+    packageJson = JSON.parse(contents);
+  } catch {
+    return false
+  }
+
+  return (
+    packageJson &&
+    typeof packageJson === 'object' &&
+    'type' in packageJson &&
+    packageJson.type === 'module'
+  );
+}

tests/fixtures/local/basic-ts/.sauce/config.yml

@@ -0,0 +1,3 @@
+{
+  "type": "commonjs"
+}

tests/fixtures/local/ts-cjs/package.json

@@ -4,7 +4,7 @@
     },
     "suites": [
         {
-            "name": "basic-ts",
+            "name": "ts-cjs",
             "param": {
               "browserName": "chromium",
               "headless": true

tests/fixtures/local/basic-ts/playwright.config.ts renamed to tests/fixtures/local/ts-cjs/playwright.config.ts

@@ -14,8 +14,10 @@
  * limitations under the License.
  */
 import { test, expect } from '@playwright/test';
+import config from '../playwright.config.js';
 
 test('is a basic test with the page', async ({ page }) => {
   await page.goto('https://playwright.dev/');
   expect(await page.innerText('.navbar__title')).toBe('Playwright');
+  expect(config.use?.video).toEqual('off');
 });

tests/fixtures/local/basic-ts/sauce-runner.json renamed to tests/fixtures/local/ts-cjs/sauce-runner.json

@@ -0,0 +1,8 @@
+import { defineConfig } from '@playwright/test';
+
+export default defineConfig({
+  use: {
+    headless: true,
+    video: 'on',
+  },
+});

tests/fixtures/local/basic-ts/tests/test.spec.ts renamed to tests/fixtures/local/ts-cjs/tests/test.spec.ts

@@ -0,0 +1,15 @@
+{
+    "playwright": {
+        "version": "1.12.3"
+    },
+    "suites": [
+        {
+            "name": "ts-esm",
+            "param": {
+              "browserName": "chromium",
+              "headless": true
+            },
+            "testMatch": ".*.spec.ts"
+        }
+    ]
+}

tests/fixtures/local/basic-ts/package.json renamed to tests/fixtures/local/ts-esm/package.json

@@ -0,0 +1,23 @@
+/**
+ * Copyright Microsoft Corporation. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { test, expect } from '@playwright/test';
+import config from '../playwright.config.js';
+
+test('is a basic test with the page', async ({ page }) => {
+  await page.goto('https://playwright.dev/');
+  expect(await page.innerText('.navbar__title')).toBe('Playwright');
+  expect(config.use?.video).toEqual('off');
+});

tests/fixtures/local/ts-esm/playwright.config.ts

@@ -1,7 +1,7 @@
 #!/usr/bin/env bash
 
 # suite=result
-tests=(basic-js=success basic-ts=success broken-tests=failure config-merging=success)
+tests=(basic-js=success broken-tests=failure config-merging=success ts-esm=success ts-cjs=success)
 
 for i in ${tests[@]}; do
     key=$(echo ${i} | cut -d '=' -f 1)